-<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="color-scheme" content="dark"><meta name="viewport" content="width=device-width,initial-scale=1"><title>The Game</title><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"><link rel="stylesheet" href="styles.css"><script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script></head><body><div id="app"><div id="start-screen" class="screen hidden"><div class="auth-controls"><button id="btn-signup" class="btn primary">Sign Up</button> <button id="btn-login" class="btn primary">Log In</button> <span id="user-greeting" class="hidden"></span> <button id="btn-logout" class="btn danger hidden" aria-label="Log Out"><i class="fa-solid fa-arrow-right-from-bracket"></i></button></div><h1 class="title">The Game</h1><div class="hud"><div><b><i class="fa-solid fa-heart"></i> Health: <span id="start-health">--</span></b></div><div><b><i class="fa-solid fa-dollar-sign"></i> Diamonds: <span id="start-diamonds">--</span></b></div><div><b><i class="fa-solid fa-briefcase"></i> Profile: <span id="start-profile">--</span></b></div></div><div class="panel"><h2>Skills</h2><div id="start-skills" class="list"></div></div><div class="panel"><h2>Tactics</h2><div id="start-tactics" class="list"></div></div><div class="controls"><button id="btn-battle" class="btn primary"><i class="fa-solid fa-fire"></i> Battle</button> <button id="btn-shop" class="btn shop"><i class="fa-solid fa-shop"></i> Shop</button></div><p class="hint">Version: 1.6.3</p><a class="hint" href="https://github.com/willyblah/thegame" target="_blank">GitHub</a></div><div id="battle-screen" class="screen hidden"><div class="topbar"><div class="left"><div>Player HP: <span id="player-health-text">--/--</span><div class="healthbar"><div class="hp-fill" id="player-hp-fill"></div></div></div><div>Opponent HP: <span id="opponent-health-text">--/--</span><div class="healthbar"><div class="hp-fill" id="opponent-hp-fill"></div></div></div></div><div class="center"><div id="turn-indicator">Waiting...</div></div><div class="right"><button id="btn-surrender" class="btn danger">Surrender</button></div></div><div class="content"><canvas id="game-canvas" width="960" height="560"></canvas><div class="sidepanel"><div class="panel"><h3>Skills</h3><div id="battle-skills" class="list"></div></div><div class="panel"><h3>Tactics</h3><div id="battle-tactics" class="list"></div></div></div></div></div><div id="scale-screen" class="screen hidden"><h1>Opponent Strength</h1><select id="level-select" class="level-dropdown" aria-label="Select Level"><option value="normal">Normal</option><option value="underworld">Underworld</option></select><div class="scale-container"><div class="scale-labels"><span>Weaker</span> <span>Stronger</span></div><div class="scale-track"><div id="scale-dot" class="scale-dot"></div></div><button id="btn-stop-scale" class="btn primary">Stop</button></div><div id="opponent-preview" class="opponent-preview hidden"><h3>Opponent Preview</h3><div>Health: <span id="preview-health">--</span></div><div>Skills: <span id="preview-skills">--</span></div><div>Tactics: <span id="preview-tactics">--</span></div></div><div class="controls"><button id="btn-start-battle" class="btn primary"><i class="fa-solid fa-play"></i> Start Battle</button> <button id="btn-scale-back" class="btn"><i class="fa-solid fa-arrow-left"></i> Back</button></div></div><div id="shop-screen" class="screen hidden"><h1>Shop</h1><div>Diamonds: <span id="shop-diamonds">0</span></div><div class="shop-lists"><div class="panel shop-panel"><h3>Skills</h3><div id="shop-skills" class="shop-list"></div></div><div class="panel shop-panel"><h3>Tactics</h3><div id="shop-tactics" class="shop-list"></div></div></div><div class="controls"><button id="btn-buy-health" class="btn tall">Buy <input type="number" id="health-amount" min="5" step="5" value="5" aria-label="Health Amount"> health</button> <button id="btn-change-profile" class="btn tall">Change Profile (5 diamonds)</button> <button id="btn-shop-back" class="btn tall">Back</button></div></div><div id="signup-screen" class="screen hidden"><h1>Sign Up</h1><form id="signup-form"><input type="text" id="signup-username" class="input-field" placeholder="Username" required> <input type="email" id="signup-email" class="input-field" placeholder="Email" required> <input type="password" id="signup-password" class="input-field" placeholder="Password" required><div class="controls"><button type="submit" class="btn primary">Sign Up</button> <button id="btn-signup-back" class="btn">Back</button></div></form></div><div id="login-screen" class="screen hidden"><h1>Log In</h1><form id="login-form"><input type="email" id="login-identifier" class="input-field" placeholder="Email" required> <input type="password" id="login-password" class="input-field" placeholder="Password" required><div class="controls"><button type="submit" class="btn primary">Log In</button> <button id="btn-login-back" class="btn">Back</button></div></form></div><div id="verify-screen" class="screen hidden"><h2>Email Verification</h2><p>Please check your inbox for the verification email.</p><div class="controls"><button id="btn-verify-back" class="btn primary">Back to Start</button></div></div><div id="profile-screen" class="screen hidden"><h2>Choose Your Profile</h2><div class="panel profile-panel"><button id="btn-warrior" class="btn profile"><i class="fa-solid fa-gun"></i> Warrior: Opponent's accuracy is always 50%.</button> <button id="btn-miner" class="btn profile"><i class="fa-solid fa-person-digging"></i> Miner: Get twice as many diamonds when you win.</button> <button id="btn-trickster" class="btn profile"><i class="fa-solid fa-hat-wizard"></i> Trickster: Get a (small) prize, even if you lost.</button> <button id="btn-villager" class="btn profile"><i class="fa-solid fa-child-reaching"></i> Villager: Get 50% off in the shop.</button></div></div><div id="prize-screen" class="screen hidden"><h2>Trickster Prize</h2><div class="scale-container"><div class="scale-labels"><span>No Prize</span><span>Prize</span></div><div class="scale-track"><div id="prize-dot" class="scale-dot"></div></div><button id="btn-stop-prize" class="btn primary">Stop</button></div><div id="prize-result" class="hidden"><p></p></div><div class="controls"><button id="btn-prize-back" class="btn">Back</button></div></div></div><div id="loading-indicator" class="loading-indicator hidden"><div class="loading-spinner"></div></div><div id="tooltip" class="tooltip hidden"></div><div id="messages" class="messages"></div><script src="game.js"></script></body></html>
0 commit comments