upload commit, working

5 years ago · e41db04307
74 changed files with 12257 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1 @@
				@@ -0,0 +1 @@
+.idea/
--- a/css/app.css
+++ b/css/app.css
@ -0,0 +1,17 @@
				@@ -0,0 +1,17 @@
+body {
+    background-color: #0f0f0f;
+    color: white;
+}
+
+.container {
+    padding-top: 3em;
+}
+
+.playing-card {
+    max-width: 100%;
+}
+
+#status {
+    color: darkred;
+    text-align: center;
+}
--- a/css/bootstrap.min.css
+++ b/css/bootstrap.min.css
--- a/img/cardBack_blue1.png
+++ b/img/cardBack_blue1.png
--- a/img/cardBack_blue2.png
+++ b/img/cardBack_blue2.png
--- a/img/cardBack_blue3.png
+++ b/img/cardBack_blue3.png
--- a/img/cardBack_blue4.png
+++ b/img/cardBack_blue4.png
--- a/img/cardBack_blue5.png
+++ b/img/cardBack_blue5.png
--- a/img/cardBack_green1.png
+++ b/img/cardBack_green1.png
--- a/img/cardBack_green2.png
+++ b/img/cardBack_green2.png
--- a/img/cardBack_green3.png
+++ b/img/cardBack_green3.png
--- a/img/cardBack_green4.png
+++ b/img/cardBack_green4.png
--- a/img/cardBack_green5.png
+++ b/img/cardBack_green5.png
--- a/img/cardBack_red1.png
+++ b/img/cardBack_red1.png
--- a/img/cardBack_red2.png
+++ b/img/cardBack_red2.png
--- a/img/cardBack_red3.png
+++ b/img/cardBack_red3.png
--- a/img/cardBack_red4.png
+++ b/img/cardBack_red4.png
--- a/img/cardBack_red5.png
+++ b/img/cardBack_red5.png
--- a/img/clubs10.png
+++ b/img/clubs10.png
--- a/img/clubs2.png
+++ b/img/clubs2.png
--- a/img/clubs3.png
+++ b/img/clubs3.png
--- a/img/clubs4.png
+++ b/img/clubs4.png
--- a/img/clubs5.png
+++ b/img/clubs5.png
--- a/img/clubs6.png
+++ b/img/clubs6.png
--- a/img/clubs7.png
+++ b/img/clubs7.png
--- a/img/clubs8.png
+++ b/img/clubs8.png
--- a/img/clubs9.png
+++ b/img/clubs9.png
--- a/img/clubsa.png
+++ b/img/clubsa.png
--- a/img/clubsj.png
+++ b/img/clubsj.png
--- a/img/clubsk.png
+++ b/img/clubsk.png
--- a/img/clubsq.png
+++ b/img/clubsq.png
--- a/img/diamonds10.png
+++ b/img/diamonds10.png
--- a/img/diamonds2.png
+++ b/img/diamonds2.png
--- a/img/diamonds3.png
+++ b/img/diamonds3.png
--- a/img/diamonds4.png
+++ b/img/diamonds4.png
--- a/img/diamonds5.png
+++ b/img/diamonds5.png
--- a/img/diamonds6.png
+++ b/img/diamonds6.png
--- a/img/diamonds7.png
+++ b/img/diamonds7.png
--- a/img/diamonds8.png
+++ b/img/diamonds8.png
--- a/img/diamonds9.png
+++ b/img/diamonds9.png
--- a/img/diamondsa.png
+++ b/img/diamondsa.png
--- a/img/diamondsj.png
+++ b/img/diamondsj.png
--- a/img/diamondsk.png
+++ b/img/diamondsk.png
--- a/img/diamondsq.png
+++ b/img/diamondsq.png
--- a/img/hearts10.png
+++ b/img/hearts10.png
--- a/img/hearts2.png
+++ b/img/hearts2.png
--- a/img/hearts3.png
+++ b/img/hearts3.png
--- a/img/hearts4.png
+++ b/img/hearts4.png
--- a/img/hearts5.png
+++ b/img/hearts5.png
--- a/img/hearts6.png
+++ b/img/hearts6.png
--- a/img/hearts7.png
+++ b/img/hearts7.png
--- a/img/hearts8.png
+++ b/img/hearts8.png
--- a/img/hearts9.png
+++ b/img/hearts9.png
--- a/img/heartsa.png
+++ b/img/heartsa.png
--- a/img/heartsj.png
+++ b/img/heartsj.png
--- a/img/heartsk.png
+++ b/img/heartsk.png
--- a/img/heartsq.png
+++ b/img/heartsq.png
--- a/img/joker.png
+++ b/img/joker.png
--- a/img/spades10.png
+++ b/img/spades10.png
--- a/img/spades2.png
+++ b/img/spades2.png
--- a/img/spades3.png
+++ b/img/spades3.png
--- a/img/spades4.png
+++ b/img/spades4.png
--- a/img/spades5.png
+++ b/img/spades5.png
--- a/img/spades6.png
+++ b/img/spades6.png
--- a/img/spades7.png
+++ b/img/spades7.png
--- a/img/spades8.png
+++ b/img/spades8.png
--- a/img/spades9.png
+++ b/img/spades9.png
--- a/img/spadesa.png
+++ b/img/spadesa.png
--- a/img/spadesj.png
+++ b/img/spadesj.png
--- a/img/spadesk.png
+++ b/img/spadesk.png
--- a/img/spadesq.png
+++ b/img/spadesq.png
--- a/index.htm
+++ b/index.htm
@ -0,0 +1,57 @@
				@@ -0,0 +1,57 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>BlackJack ♠</title>
+    <link rel="stylesheet" href="css/bootstrap.min.css">
+    <link rel="stylesheet" href="css/app.css">
+    <link rel="icon" href="favicon.ico">
+</head>
+<body>
+<div class="container" id="root">
+    <div class="row">
+        <div class="col-md-12">
+            <button @click="testRound" v-if="!roundActive">Start round</button>
+            <button @click="drawAnotherCard" v-if="roundActive">Draw</button>
+            <button @click="pass" v-if="roundActive">Pass</button>
+            <button @click="endRound" v-if="roundActive">End round</button>
+        </div>
+    </div>
+
+<!--    <div class="row">-->
+<!--        <div class="col-md-1" v-for="card in cards">-->
+<!--            <img :src="card.asset" :alt="card.symbol + '_' + card.points" class="playing-card">-->
+<!--        </div>-->
+<!--    </div>-->
+
+    <div class="row">
+        <div class="col-md-6">
+            <h4>Dealer <template v-if="!roundActive">({{ dealerScore }})</template></h4>
+            <div class="row">
+                <div class="col-md-4" v-for="(card, index) in dealersHand">
+                    <img :src="index > 0 ? card.asset : roundActive ? cardBack : card.asset" :alt="card.symbol + '_' + card.points" class="playing-card">
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6">
+            <h4>Hand ({{ handScore === 21 && usersHand.count < 2 ? 'BlackJack' : handScore > 21 ? 'Plus! ' + handScore : handScore }})</h4>
+            <div class="row">
+                <div class="col-md-4" v-for="card in usersHand">
+                    <img :src="card.asset" :alt="card.symbol + '_' + card.points" class="playing-card">
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-md-12" id="status">
+            <h1 v-text="status"></h1>
+        </div>
+    </div>
+</div>
+</body>
+<script src="js/vue.js"></script>
+<script src="js/app.js"></script>
+</html>
--- a/js/app.js
+++ b/js/app.js
@ -0,0 +1,205 @@
				@@ -0,0 +1,205 @@
+let app = new Vue({
+    el: '#root',
+    data: {
+        roundActive: false,
+        cardBack: 'img/cardBack_red5.png',
+        cards: [],
+        cardDeck: [],
+        usersHand: [],
+        dealersHand: [],
+        lastCard: null,
+        handScore: 0,
+        dealerScore: 0,
+        status: '',
+    },
+    methods: {
+        generateDeck() {
+            const symbolNames = ['spades', 'clubs', 'diamonds', 'hearts'];
+            const highCards = ['j', 'q', 'k'];
+
+            let cardDeck = [];
+
+            symbolNames.forEach((symbolName) => {
+                for (let cardPoints = 1; cardPoints <= 10; cardPoints++) {
+                    let cardSymbol = cardPoints;
+                    let points = cardPoints;
+                    let isAnAce = false;
+
+                    if (cardPoints === 1) {
+                        points = 11;
+                        cardSymbol = 'a';
+                        isAnAce = true;
+                    }
+
+                    cardDeck.push({
+                        ace: isAnAce,
+                        points: points,
+                        symbol: cardSymbol,
+                        asset: 'img/' + symbolName + cardSymbol + '.png'
+                    });
+                }
+
+                highCards.forEach((highCard) => {
+                    cardDeck.push({
+                        ace: false,
+                        points: 10,
+                        symbol: symbolName,
+                        asset: 'img/' + symbolName + highCard + '.png'
+                    })
+                });
+            });
+
+            return cardDeck;
+        },
+
+        shuffleDeck() {
+            let shuffledDeck = this.cards;
+            let cardCount = shuffledDeck.length, t, i;
+
+            while (cardCount) {
+                i = Math.floor(Math.random() * cardCount--);
+                t = shuffledDeck[cardCount];
+                shuffledDeck[cardCount] = shuffledDeck[i];
+                shuffledDeck[i] = t;
+            }
+
+            this.cards = shuffledDeck;
+        },
+
+        drawCardToUser() {
+            let vue = this;
+
+            let drawnCard = vue.cards.shift();
+            vue.usersHand.push(drawnCard);
+
+            if (drawnCard.ace && vue.handScore > 10) {
+                drawnCard.points = 1;
+            }
+
+            if ((vue.handScore + drawnCard.points) > 21) {
+                let aceCount = this.handIncludesAces(this.usersHand);
+                console.log(aceCount + ' aces should be decreased in value');
+            }
+
+            vue.handScore += drawnCard.points;
+        },
+
+        drawCardToDealer() {
+            let vue = this;
+
+            let drawnCard = vue.cards.shift();
+            vue.dealersHand.push(drawnCard);
+
+            if (drawnCard.ace && vue.dealerScore > 10) {
+                drawnCard.points = 1;
+            }
+
+            if ((vue.dealerScore + drawnCard.points) > 21) {
+                let aceCount = this.handIncludesAces(this.dealersHand);
+                console.log(aceCount + ' aces should be decreased in value');
+            }
+
+            vue.dealerScore += drawnCard.points;
+        },
+
+        handIncludesAces(hand) {
+            let aceCount = 0;
+
+            hand.forEach((card) => {
+                if (card.ace === true) {
+                    aceCount++;
+                }
+            });
+
+            return aceCount;
+        },
+
+        handHasBlackJack(score) {
+            return score === 21;
+        },
+
+        isPlus(score) {
+            return score > 21;
+        },
+
+        startRound() {
+            this.endRound();
+
+            this.roundActive = true;
+
+            this.drawCardToUser();
+            this.drawCardToDealer();
+            this.drawCardToUser();
+            this.drawCardToDealer();
+
+            if (this.handHasBlackJack(this.dealerScore)) {
+                this.dealerWon();
+            }
+
+            if (this.handScore === 21) {
+                this.pass();
+            }
+        },
+
+        drawAnotherCard() {
+            this.drawCardToUser();
+
+            if (this.isPlus(this.handScore)) {
+                this.status = 'Hand is plus, you lose.';
+                this.roundActive = false;
+            }
+        },
+
+        pass() {
+            if (this.dealerScore === this.handScore) {
+                this.roundActive = false;
+                this.status = 'Draw!'
+            } else if (this.dealerScore > 22) {
+                this.roundActive = false;
+                this.status = 'Dealer is plus, you win';
+            } else if (this.dealerScore > this.handScore) {
+                this.roundActive = false;
+                this.status = 'Dealer Wins';
+            } else if (this.dealerScore < 17) {
+                this.roundActive = false;
+                this.drawCardToDealer();
+                this.pass();
+
+                // this.status = 'Dealer drawing not yet implemented';
+            } else if (this.handScore > this.dealerScore && this.handScore < 22) {
+                this.roundActive = false;
+                this.status = 'You win!';
+            }
+        },
+
+        endRound() {
+            this.roundActive = false;
+            this.lastCard = null;
+            this.status = null;
+            this.dealersHand = [];
+            this.dealerScore = 0;
+            this.usersHand = [];
+            this.handScore = 0;
+
+            this.cards = this.generateDeck();
+            this.shuffleDeck();
+        },
+
+        dealerWon() {
+            console.log('House wins')
+        },
+
+        userWon() {
+            console.log('You win')
+        },
+
+        testRound() {
+            this.startRound();
+        }
+    },
+    created() {
+        this.cardDeck = this.generateDeck();
+        this.cards = this.generateDeck();
+        this.shuffleDeck();
+    }
+});
--- a/js/vue.js
+++ b/js/vue.js