<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>YATZY - 6 Dice game</title>
</head>
<body>
    <noscript>THIS GAME REQUIRES JAVASCRIPT TO RUN!!!!</noscript>
    <h1>YATZY - 6 Dice game</h1>
    <div id="startGame">
        <table class="input">
            <thead>
                <tr>
                    <th>Player Name</th>
                    <th></th>
                </tr>
                <tr>
                    <th><input type="text" name="playerName" id="nameInput"></th>
                    <th><button id="addPlayer">Add Player</button></th>
                </tr>
            </thead>
            <tbody id="playerList">
            </tbody>
        </table>
        <button id="startButton">Start Game</button>
    </div>
    <div id="game">
        <div class="turns">
            <h3 class="currentPlayer">Current player: <span id="currentPlayer">Player 1</span></h3>
            <h3 class="currentRolls">Rolls: <span id="rolls">0</span></h3>
        </div>
        <div class="dice">
            <div class="die">
                <div class='side one'>
                  <div class="dot one-1"></div>
                </div>
                <div class='side two'>
                  <div class="dot two-1"></div>
                  <div class="dot two-2"></div>
                </div>
                <div class='side three'>
                  <div class="dot three-1"></div>
                  <div class="dot three-2"></div>
                  <div class="dot three-3"></div>
                </div>
                <div class='side four'>
                  <div class="dot four-1"></div>
                  <div class="dot four-2"></div>
                  <div class="dot four-3"></div>
                  <div class="dot four-4"></div>
                </div>
                <div class='side five'>
                  <div class="dot five-1"></div>
                  <div class="dot five-2"></div>
                  <div class="dot five-3"></div>
                  <div class="dot five-4"></div>
                  <div class="dot five-5"></div>
                </div>
                <div class='side six'>
                  <div class="dot six-1"></div>
                  <div class="dot six-2"></div>
                  <div class="dot six-3"></div>
                  <div class="dot six-4"></div>
                  <div class="dot six-5"></div>
                  <div class="dot six-6"></div>
                </div>
            </div>
            <div class="die">
                <div class='side one'>
                  <div class="dot one-1"></div>
                </div>
                <div class='side two'>
                  <div class="dot two-1"></div>
                  <div class="dot two-2"></div>
                </div>
                <div class='side three'>
                  <div class="dot three-1"></div>
                  <div class="dot three-2"></div>
                  <div class="dot three-3"></div>
                </div>
                <div class='side four'>
                  <div class="dot four-1"></div>
                  <div class="dot four-2"></div>
                  <div class="dot four-3"></div>
                  <div class="dot four-4"></div>
                </div>
                <div class='side five'>
                  <div class="dot five-1"></div>
                  <div class="dot five-2"></div>
                  <div class="dot five-3"></div>
                  <div class="dot five-4"></div>
                  <div class="dot five-5"></div>
                </div>
                <div class='side six'>
                  <div class="dot six-1"></div>
                  <div class="dot six-2"></div>
                  <div class="dot six-3"></div>
                  <div class="dot six-4"></div>
                  <div class="dot six-5"></div>
                  <div class="dot six-6"></div>
                </div>
            </div>
            <div class="die">
                <div class='side one'>
                  <div class="dot one-1"></div>
                </div>
                <div class='side two'>
                  <div class="dot two-1"></div>
                  <div class="dot two-2"></div>
                </div>
                <div class='side three'>
                  <div class="dot three-1"></div>
                  <div class="dot three-2"></div>
                  <div class="dot three-3"></div>
                </div>
                <div class='side four'>
                  <div class="dot four-1"></div>
                  <div class="dot four-2"></div>
                  <div class="dot four-3"></div>
                  <div class="dot four-4"></div>
                </div>
                <div class='side five'>
                  <div class="dot five-1"></div>
                  <div class="dot five-2"></div>
                  <div class="dot five-3"></div>
                  <div class="dot five-4"></div>
                  <div class="dot five-5"></div>
                </div>
                <div class='side six'>
                  <div class="dot six-1"></div>
                  <div class="dot six-2"></div>
                  <div class="dot six-3"></div>
                  <div class="dot six-4"></div>
                  <div class="dot six-5"></div>
                  <div class="dot six-6"></div>
                </div>
            </div>
            <div class="die">
                <div class='side one'>
                  <div class="dot one-1"></div>
                </div>
                <div class='side two'>
                  <div class="dot two-1"></div>
                  <div class="dot two-2"></div>
                </div>
                <div class='side three'>
                  <div class="dot three-1"></div>
                  <div class="dot three-2"></div>
                  <div class="dot three-3"></div>
                </div>
                <div class='side four'>
                  <div class="dot four-1"></div>
                  <div class="dot four-2"></div>
                  <div class="dot four-3"></div>
                  <div class="dot four-4"></div>
                </div>
                <div class='side five'>
                  <div class="dot five-1"></div>
                  <div class="dot five-2"></div>
                  <div class="dot five-3"></div>
                  <div class="dot five-4"></div>
                  <div class="dot five-5"></div>
                </div>
                <div class='side six'>
                  <div class="dot six-1"></div>
                  <div class="dot six-2"></div>
                  <div class="dot six-3"></div>
                  <div class="dot six-4"></div>
                  <div class="dot six-5"></div>
                  <div class="dot six-6"></div>
                </div>
            </div>
            <div class="die">
                <div class='side one'>
                  <div class="dot one-1"></div>
                </div>
                <div class='side two'>
                  <div class="dot two-1"></div>
                  <div class="dot two-2"></div>
                </div>
                <div class='side three'>
                  <div class="dot three-1"></div>
                  <div class="dot three-2"></div>
                  <div class="dot three-3"></div>
                </div>
                <div class='side four'>
                  <div class="dot four-1"></div>
                  <div class="dot four-2"></div>
                  <div class="dot four-3"></div>
                  <div class="dot four-4"></div>
                </div>
                <div class='side five'>
                  <div class="dot five-1"></div>
                  <div class="dot five-2"></div>
                  <div class="dot five-3"></div>
                  <div class="dot five-4"></div>
                  <div class="dot five-5"></div>
                </div>
                <div class='side six'>
                  <div class="dot six-1"></div>
                  <div class="dot six-2"></div>
                  <div class="dot six-3"></div>
                  <div class="dot six-4"></div>
                  <div class="dot six-5"></div>
                  <div class="dot six-6"></div>
                </div>
            </div>
            <div class="die">
                <div class='side one'>
                  <div class="dot one-1"></div>
                </div>
                <div class='side two'>
                  <div class="dot two-1"></div>
                  <div class="dot two-2"></div>
                </div>
                <div class='side three'>
                  <div class="dot three-1"></div>
                  <div class="dot three-2"></div>
                  <div class="dot three-3"></div>
                </div>
                <div class='side four'>
                  <div class="dot four-1"></div>
                  <div class="dot four-2"></div>
                  <div class="dot four-3"></div>
                  <div class="dot four-4"></div>
                </div>
                <div class='side five'>
                  <div class="dot five-1"></div>
                  <div class="dot five-2"></div>
                  <div class="dot five-3"></div>
                  <div class="dot five-4"></div>
                  <div class="dot five-5"></div>
                </div>
                <div class='side six'>
                  <div class="dot six-1"></div>
                  <div class="dot six-2"></div>
                  <div class="dot six-3"></div>
                  <div class="dot six-4"></div>
                  <div class="dot six-5"></div>
                  <div class="dot six-6"></div>
                </div>
            </div>
        </div>
        <div class="buttons">
            <button id="rollButton">Roll</button>
            <button id="surrenderButton">Surrender</button>
        </div>
        <table>
            <thead>
                <tr class="highlight">
                    <th>Players</th>
                </tr>
            </thead>
            <tbody>
                <tr id="ones">
                    <td>Ones</td>
                </tr>
                <tr id="twos">
                    <td>Twos</td>
                </tr>
                <tr id="threes">
                    <td>Threes</td>
                </tr>
                <tr id="fours">
                    <td>Fours</td>
                </tr>
                <tr id="fives">
                    <td>Fives</td>
                </tr>
                <tr id="sixes">
                    <td>Sixes</td>
                </tr>
                <tr class="highlight nonfuctioning" id="sum">
                    <td>Sum</td>
                </tr>
                <tr class="highlight nonfuctioning" id="bonus">
                    <td>Bonus</td>
                </tr>
                <tr id="onePair">
                    <td>One Pair</td>
                </tr>
                <tr id="twoPairs">
                    <td>Two Pairs</td>
                </tr>
                <tr id="threePairs">
                    <td>Three Pairs</td>
                </tr>
                <tr id="threeOfAKind">
                    <td>Three Of A Kind</td>
                </tr>
                <tr id="twoThreeOfAKind">
                    <td>Two Three Of A Kind</td>
                </tr>
                <tr id="fourOfAKind">
                    <td>Four Of A Kind</td>
                </tr>
                <tr id="smallStraight">
                    <td>Small Straight</td>
                </tr>
                <tr id="largeStraight">
                    <td>Large Straight</td>
                </tr>
                <tr id="poker">
                    <td>Poker</td>
                </tr>
                <tr id="fullHouse">
                    <td>Full House</td>
                </tr>
                <tr id="chance">
                    <td>Chance</td>
                </tr>
                <tr id="yatzy">
                    <td>Yatzy</td>
                </tr>
                <tr class="highlight nonfuctioning" id="total">
                    <td>Total</td>
                </tr>
            </tbody>
        </table>
    </div>
    <a href="index.html">Return to home</a>
    <script src="js/script6dice.js"></script>
</body>
</html>