93 lines
3.4 KiB
HTML
93 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
|
<meta name="theme-color" content="#0d0f24">
|
|
<title>Tic-Tac-Toe</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<div class="bg-blob blob-cyan" aria-hidden="true"></div>
|
|
<div class="bg-blob blob-magenta" aria-hidden="true"></div>
|
|
|
|
<main class="app">
|
|
|
|
<section id="screen-menu" class="screen">
|
|
<h1 class="title">Tic-Tac-Toe</h1>
|
|
<div class="menu-buttons">
|
|
<button class="btn ghost" id="btn-cpu" type="button">Play vs CPU</button>
|
|
<button class="btn primary" id="btn-online" type="button">New Online Game</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="screen-waiting" class="screen" style="display:none">
|
|
<h1 class="title">Share this link</h1>
|
|
<p class="waiting-subtitle">Send this link to your opponent</p>
|
|
<div class="link-box" id="link-box">
|
|
<span id="link-text"></span>
|
|
</div>
|
|
<button class="btn primary" id="btn-copy" type="button">Copy Link</button>
|
|
<div class="status waiting-pulse" id="waiting-status">
|
|
<span class="status-text">Waiting for opponent…</span>
|
|
</div>
|
|
<button class="btn ghost" id="btn-back-menu-waiting" type="button">Back to Menu</button>
|
|
</section>
|
|
|
|
<section id="screen-game" class="screen" style="display:none">
|
|
<div class="scoreboard">
|
|
<div class="chip" id="chip-you">
|
|
<span class="chip-label" id="label-you">You (X)</span>
|
|
<span class="chip-value chip-x" id="score-you">0</span>
|
|
</div>
|
|
<div class="chip" id="chip-opponent">
|
|
<span class="chip-label" id="label-opponent">CPU (O)</span>
|
|
<span class="chip-value chip-o" id="score-opponent">0</span>
|
|
</div>
|
|
<div class="chip" id="chip-draws">
|
|
<span class="chip-label">Draws</span>
|
|
<span class="chip-value" id="score-draws">0</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="status" id="status">
|
|
<span class="status-text" id="status-text">Your turn</span>
|
|
</div>
|
|
|
|
<div class="board-wrap">
|
|
<div class="board" id="board" aria-label="Tic-tac-toe board"></div>
|
|
<svg class="win-line" id="win-line" aria-hidden="true">
|
|
<defs>
|
|
<linearGradient id="win-grad" x1="0" y1="0" x2="1" y2="1">
|
|
<stop offset="0" stop-color="#22d3ee"></stop>
|
|
<stop offset="1" stop-color="#f472b6"></stop>
|
|
</linearGradient>
|
|
</defs>
|
|
<line id="win-line-el" stroke="url(#win-grad)" stroke-width="6" stroke-linecap="round" opacity="0"></line>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="buttons">
|
|
<button class="btn" id="btn-reset" type="button">Reset Scores</button>
|
|
<button class="btn primary" id="btn-new-game" type="button">New Game</button>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<div class="overlay" id="overlay" aria-hidden="true">
|
|
<div class="modal" role="dialog" aria-modal="true">
|
|
<div class="modal-title" id="overlay-title">You Win!</div>
|
|
<button class="btn primary" id="btn-again-overlay" type="button">Play Again</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="confetti-layer" aria-hidden="true"></div>
|
|
<div class="toast" id="toast" aria-live="polite"></div>
|
|
|
|
<script src="game.js"></script>
|
|
<script src="multiplayer.js"></script>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|