js-blackjack/index.html at main · schmidward/js-blackjack · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>
    <head>
        <title>Simple Blackjack game</title>
        <link rel="stylesheet" type="text/css" href="styles.css">
        <script src="scripts.js"></script>
        <script src="./src/mainPlay.js"></script>
    </head>
    <body>
        <h1 id="title" class="center">Let's play some Blackjack!</h1>
        <div id="instructions">

        </div>
        <button id="hide-instructions" style="visibility: hidden"></button>
        <button id="show-instructions" style="visibility: visible">Show instructions</button>
        <div class="flex-container" id="name-input" style="visibility: visible">
            <input type="text" id="userNameInput" name="Player" placeholder="Enter your name to begin"/>
            <button id="save-name">Save</button>
        </div>
        <div id="game-space">
            <div class="flex-container">
            <p class="center">Dealer's Hand </p>
            <p class="center score-totals" id="dealer-total"></p>
            </div>
            <div class="flex-container" id="dealer-hand">
                <img src="./card-assets/card-back.png" alt="Card back">
                <img src="./card-assets/card-back.png" alt="Card back">
            </div>
            <br>
            <div class="flex-container" id="player-hand">
                <img src="./card-assets/card-back.png" alt="Card back">
                <img src="./card-assets/card-back.png" alt="Card back">
            </div>
            <div class="flex-container">
            <p class="center" id="playerName">Player's Hand </p>
            <p class="center score-totals" id="player-total"></p>
            </div>
        </div>
        <div>
            <p class="center" id="game-messages"></p>
        </div>
        <div class="flex-container">
            <button class="game-button" id="start-game" style="visibility: hidden">Start Game!</button>
            <button class="game-button" id="buttonA" style="visibility: hidden">Hit</button>
            <button class="game-button" id="buttonB" style="visibility: hidden">Stay</button>
            <button class="game-button" id="play-again" style="visibility: hidden">Play Again?</button>
        </div>
    </body>
    <footer class="center">
        <p><a id="bottom-link" href="https://github.com/schmidward/js-blackjack">Read more about this project.</a></p>
        <p>&copy; Eric D. Schmid 2022</p>
    </footer>
</html>