Initial commit: game development

index.html

@@ -0,0 +1,67 @@
+<!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">
+    <h1 class="title">Tic-Tac-Toe</h1>
+
+    <div class="scoreboard">
+      <div class="chip" id="chip-you">
+        <span class="chip-label">You (X)</span>
+        <span class="chip-value chip-x" id="score-you">0</span>
+      </div>
+      <div class="chip" id="chip-cpu">
+        <span class="chip-label">CPU (O)</span>
+        <span class="chip-value chip-o" id="score-cpu">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 primary" id="btn-new" type="button">New Game</button>
+      <button class="btn ghost" id="btn-reset" type="button">Reset Scores</button>
+    </div>
+  </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" 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>
+</body>
+</html>