index.html

<!DOCTYPE html>
<html class="has-background-grey-lighter has-navbar-fixed-top">
<head>
    <title>Mowu</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="description" content="Mowu is a Magic: The Gathering goldfishing web app. Playtest your MTG decks. Track turn count and life total. Play out your turns and see how long it takes you to deal 40 damage to an opponent."/>
    <meta name="keywords" content="mowu, magic, gathering, mtg, goldfish, goldfishing, gold, fish, playtest, play, test, track, count, life, turn, turns, health, edh, commander, deck, tcg"/>
    <meta name="google-site-verification" content="94DV2TLWhsAoVxhs-RM1sXTt2_1vYGCC2b9u9uagOr8" />
    <link rel="icon" type="image/x-icon" href="images/favicon.ico"/>
    <link rel="stylesheet" href="css/bulma.min.css"/>
    <link rel="stylesheet" href="css/animate.min.css"/>
    <link rel="stylesheet" href="css/mowu.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
</head>
<body>
    <!-- Nav Bar -->
    <nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation">
        <div class="navbar-brand">
            <h1 class="navbar-item"><img src="images/logo.png" width="112" height="28"></h1>
            <h1 class="navbar-item deckName"></h1>
            <a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
                <span aria-hidden="true"></span>
            </a>
        </div>
        <div class="navbar-menu" id="navMenu">
            <div class="navbar-end">
                <a class="navbar-item" href="#" onclick="openModal('.helpModal');return false;">Press ? for help</a>
            </div>
        </div>
    </nav>
    <!-- End of Nav Bar -->
    <!-- Main Section -->
    <section class="section mainSection">
        <div class="container">
            <div class="columns mainColumns is-centered is-mobile is-multiline">
                <!-- Column 1 - Counters -->
                <div class="column counters is-narrow">
                    <div class="box">
                        <button class="button is-info is-fullwidth" onclick="openModal('.endGameMenuModal')">End Game</button>
                    </div>
                    <!-- Turn Counter -->
                    <div class="box turnBox">
                        <div class="columns is-mobile">
                            <div class="column is-8">
                                <h1 class="title columnTwoCardTitle has-text-centered">Turn</h1>
                                <hr/>
                                <div class="columns is-mobile">
                                    <div class="column"></div>
                                    <div class="column"><h2 class="subtitle has-text-centered turnCounter">0</h2></div>
                                    <div class="column"></div>
                                </div>
                                
                            </div>
                            <div class="column is-4">
                                <button class="button is-success is-medium my-1" onclick="changeTurnCounter(1)"><span><i class="fa fa-plus"></i></span></button>
                                <button class="button is-danger is-medium my-1" onclick="changeTurnCounter(-1)"><span><i class="fa fa-minus"></i></span></button>
                            </div>
                        </div>
                    </div>
                    <!-- Life Tracker-->
                    <div class="box lifeBox">
                        <div class="columns is-mobile">
                            <div class="column is-8">
                                <h1 class="title columnTwoCardTitle has-text-centered">Life</h1>
                                <hr/>
                                <div class="columns is-mobile">
                                    <div class="column"></div>
                                    <div class="column"><h2 class="subtitle has-text-centered lifeTracker">40</h2></div>
                                    <div class="column"><h2 class="subtitle has-text-centered lifeDelta has-text-white animate__delay-1s">100</h2></div>
                                </div>
                            </div>
                            <div class="column is-4">
                                <button class="button is-success is-medium my-1" onclick="changeLifeTracker(1)"><span><i class="fa fa-plus"></i></span></button>
                                <button class="button is-danger is-medium my-1" onclick="changeLifeTracker(-1)"><span><i class="fa fa-minus"></i></span></button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Column 2 - Events -->
            </div>
        </div>
    </section>
    <!-- End of Main Section -->
    <!-- Modals Section -->
    <section class="section modalsSection">
        <!-- New Game Menu Modal-->
        <div class="modal newGameMenuModal">
            <div class="modal-background"></div>
            <div class="modal-content">
                <div class="box">
                    <h1 class="title">New Game Menu</h1>
                    <hr/>
                    <fieldset class="newGameMenuFieldset">
                        <!-- Starting Life -->
                        <div class="field startingLifeField">
                            <label class="label startingLifeLabel">Starting Life</label>
                            <div class="control startingLifeControl">
                                <input class="input startingLifeInput" type="number" value="40" style="width:15%">
                            </div>
                        </div>
                        <hr>
                        <div class="box has-background-grey-lighter">
                            <h1 class="subtitle">Coming Soon</h1>
                            <!-- Deck Name -->
                            <div class="field deckNameField">
                                <label class="label deckNameLabel">Deck</label>
                                <div class="control deckNameControl">
                                    <input class="input deckNameInput" type="text" list="deckName" placeholder="Select from previously used decks or enter new deck name">
                                    <datalist class="datalist deckNameDataList" id="deckName">
                                        <option>These</option>
                                        <option>Should</option>
                                        <option>Get</option>
                                        <option>Automatically</option>
                                        <option>Replaced</option>
                                    </datalist>
                                </div>
                            </div>
                            <!-- Difficulty -->
                            <div class="field difficultyField">
                                <label class="label difficultyLabel">Difficulty</label>
                                <div class="control difficultyControl">
                                    <div class="buttons difficulty has-addons">
                                        <button class="button is-responsive difficultyOff is-selected is-info" onclick="difficultyButtonClick('.difficultyOff',0)" >Off</button>
                                        <button class="button is-responsive difficultyEasy" onclick="difficultyButtonClick('.difficultyEasy',7)" >Easy</button>                                
                                        <button class="button is-responsive difficultyMedium" onclick="difficultyButtonClick('.difficultyMedium',5)" >Medium</button>
                                        <button class="button is-responsive difficultyHard" onclick="difficultyButtonClick('.difficultyHard',3)" >Hard</button>
                                        <button class="button is-responsive difficultyCustom" onclick="difficultyButtonClick('.difficultyCustom',0)" >Custom</button>
                                    </div>
                                </div>
                            </div>
                            <!-- Events -->
                            <div class="field">
                                <label class="label eventsLabel">Random events every <span class="eventsLabelSpan">0</span> turns</label>
                                <div class="control">
                                    <input class="input difficultyInput is-flex-grow-1" type="number" value="0" style="width:15%" onchange="difficultyValueChange()" disabled>
                                </div>
                            </div>
                        </div>
                        <!-- Submit Button -->
                        <div class="field is-grouped">
                            <div class="control">
                                <button class="button is-half is-info submit" onclick="startNewGame()">Start Game</button>
                            </div>
                        </div>
                        <!-- End of Fields -->
                    </fieldset>
                </div>
            </div>
            <!--button class="modal-close is-large" aria-label="close"></button-->
        </div>
        <!-- Confirm Restart Modal-->
        <div class="modal endGameMenuModal">
            <div class="modal-background"></div>
            <div class="modal-content">
                <div class="box">
                    <h1 class="title">End Game?</h1>
                    <hr/>   
                    <p>Start a new game, restart with the same settings or cancel and return to current game</p>
                    <hr/>  
                    <div class="buttons endGameMenuButtons">
                        <!-- Which of these should be confirm? or submit? -->
                        <button class="button is-half is-success" onclick="confirmRestartGame('New Game')"><u>N</u>ew Game</button>
                        <button class="button is-half is-danger" onclick="confirmRestartGame('Restart')"><u>R</u>estart</button>
                        <button class="button is-half is-info dismiss" onclick="confirmRestartGame('Cancel')"><u>C</u>ancel</button>
                    </div>
                </div>
            </div>
            <!--button class="modal-close is-large" aria-label="close" onclick="confirmNewGame(0)"></button-->
        </div>
        <!-- Game Over Modal-->
        <div class="modal gameOverModal">
            <div class="modal-background"></div>
            <div class="modal-content">
                <div class="box">
                    <h1 class="title">You won!</h1>
                    <h2 class="subtitle">You did <span class="gameOverDamageSpan">x</span> damage in <span class="gameOverTurnsSpan">x</span> turns!</h2>

                    <hr/>   
                    <p>Start a new game, restart with the same settings or cancel and return to current game</p>
                    <hr/>  
                    <div class="buttons gameOverModalButtons">
                        <button class="button is-half is-success" onclick="confirmRestartGame('New Game')"><u>N</u>ew Game</button>
                        <button class="button is-half is-danger" onclick="confirmRestartGame('Restart')"><u>R</u>estart</button>
                        <button class="button is-half is-info dismiss" onclick="confirmRestartGame('Cancel')"><u>C</u>ancel</button>
                    </div>
                </div>
            </div>
        </div>
        <!--button class="modal-close is-large" aria-label="close"></button-->
        <!-- Help Modal-->
        <div class="modal helpModal">
            <div class="modal-background" onclick="closeModal('.helpModal')"></div>
            <div class="modal-content">
                <div class="box">
                    <h1 class="title">Help Menu</h1>
                    <hr/>
                    <h2 class="subtitle">About Mowu</h2>
                    <p>Mowu is a Magic: The Gathering goldfishing web app.</p>
                    <p>Playtest your MTG decks! Track turn count and life total. Play out your turns and see how long it takes you to deal 40 damage to an opponent.</p>
                    <hr/>
                    <h2 class="subtitle">Hotkeys</h2>
                    <table class="table is-striped is-narrow is-hoverable is-fullwidth">
                        <thead><tr><th>Action</th><th>Keys</th></tr></thead>
                        <tbody>
                            <tr><td>Increase Life Tracker<br></td><td>Up, W, Numpad+<br></td></tr>
                            <tr><td>Decrease Life Tracker</td><td>Down, S, Numpad-</td></tr>
                            <tr><td>Next turn<br></td><td>Space, NumpadEnter</td></tr>
                            <tr><td>Open End Game Menu<br></td><td>Escape</td></tr>
                            <tr><td>Quick Restart Game with current settings<br></td><td>Ctrl+Q</td></tr>
                        </tbody>
                    </table>
                    <hr/>
                    <button class="button is-half is-info confirm submit dismiss" onclick="closeModal('.helpModal')">Close</button>
                </div>
            </div>
            <button class="modal-close is-large" aria-label="close" onclick="closeModal('.helpModal')"></button>
        </div>
    </section>
    <!-- End of Modals Section -->
    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="columns has-text-grey-light">
                <div class="column is-4 has-text-left is-hidden-mobile"><p>Check out Mowu on <a class="has-text-grey-dark" href="https://github.com/jamesj223/Mowu">GitHub</a></p></div>
                <div class="column is-4 has-text-centered"><p class="footerMiddle">Made by jamesj223</p></div>
                <div class="column is-4 has-text-right is-hidden-mobile"><p>Built using <a class="has-text-grey-dark" href="https://bulma.io/">Bulma</a> and <a class="has-text-grey-dark" href="https://animate.style/">Animate.css</a></p></div>
            </div>
        </div>
    </footer>
    <!-- Scripts -->
    <script src="js/jquery-3.7.0.min.js"></script>
    <script src="js/mousetrap.min.js"></script>
    <script src="js/mowu.js"></script>
    <script src="js/version.js"></script>
</body>

</html>