npm - @tsparticles/template-tictactoe - Versions diffs - 4.1.3 → 4.2.0 - Mend

@tsparticles/template-tictactoe 4.1.3 → 4.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (66) hide show

package/CHANGELOG.md +10 -0
package/README.md +3 -0
package/package.json +4 -3
package/template/angular/package.json +34 -0
package/template/angular/src/app/app.component.css +97 -0
package/template/angular/src/app/app.component.html +21 -0
package/template/angular/src/app/app.component.ts +94 -0
package/template/angular-confetti/package.json +34 -0
package/template/angular-confetti/src/app/app.component.css +97 -0
package/template/angular-confetti/src/app/app.component.html +21 -0
package/template/angular-confetti/src/app/app.component.ts +94 -0
package/template/angular-fireworks/package.json +34 -0
package/template/angular-fireworks/src/app/app.component.css +97 -0
package/template/angular-fireworks/src/app/app.component.html +21 -0
package/template/angular-fireworks/src/app/app.component.ts +94 -0
package/template/astro/package.json +15 -0
package/template/astro/src/pages/index.astro +158 -0
package/template/ember/app/controllers/application.js +94 -0
package/template/ember/app/templates/application.hbs +39 -0
package/template/ember/package.json +17 -0
package/template/inferno/package.json +20 -0
package/template/inferno/src/App.css +97 -0
package/template/inferno/src/App.tsx +149 -0
package/template/jquery/package.json +20 -0
package/template/jquery/src/main.ts +126 -0
package/template/jquery/src/style.css +97 -0
package/template/lit/package.json +19 -0
package/template/lit/src/my-app.ts +133 -0
package/template/nextjs/package.json +20 -0
package/template/nextjs/src/app/page.tsx +173 -0
package/template/nextjs/src/app/providers.tsx +13 -0
package/template/nuxt2/package.json +14 -0
package/template/nuxt2/pages/index.vue +203 -0
package/template/nuxt3/app.vue +204 -0
package/template/nuxt3/package.json +16 -0
package/template/nuxt4/app.vue +202 -0
package/template/nuxt4/package.json +16 -0
package/template/preact/package.json +20 -0
package/template/preact/src/App.css +97 -0
package/template/preact/src/App.tsx +141 -0
package/template/qwik/package.json +19 -0
package/template/qwik/src/App.tsx +132 -0
package/template/react/package.json +19 -0
package/template/react/src/App.css +97 -0
package/template/react/src/App.tsx +141 -0
package/template/riot/package.json +20 -0
package/template/riot/src/app.riot +139 -0
package/template/solid/package.json +18 -0
package/template/solid/src/App.tsx +151 -0
package/template/solid/src/index.css +97 -0
package/template/solid/src/main.tsx +9 -0
package/template/stencil/package.json +14 -0
package/template/stencil/src/components/app-home/app-home.css +97 -0
package/template/stencil/src/components/app-home/app-home.tsx +122 -0
package/template/svelte/package.json +20 -0
package/template/svelte/src/App.svelte +256 -0
package/template/svelte/src/main.ts +12 -0
package/template/vanilla/LICENSE +21 -0
package/template/vue2/package.json +19 -0
package/template/vue2/src/App.vue +204 -0
package/template/vue3/package.json +19 -0
package/template/vue3/src/App.vue +215 -0
package/template/vue3/src/main.ts +14 -0
package/template/webcomponents/package.json +18 -0
package/template/webcomponents/src/main.ts +134 -0
package/template/webcomponents/src/style.css +97 -0

package/template/angular-fireworks/src/app/app.component.ts ADDED Viewed

@@ -0,0 +1,94 @@
+import { Component } from "@angular/core";
+import { confetti } from "@tsparticles/confetti";
+import type { ISourceOptions } from "@tsparticles/engine";
+type Player = "X" | "O";
+const WIN_PATTERNS = [
+  [0, 1, 2], [3, 4, 5], [6, 7, 8],
+  [0, 3, 6], [1, 4, 7], [2, 5, 8],
+  [0, 4, 8], [2, 4, 6],
+];
+@Component({
+  selector: "app-root",
+  templateUrl: "./app.component.html",
+  styleUrls: ["./app.component.css"],
+})
+export class AppComponent {
+  board: (Player | null)[] = Array(9).fill(null);
+  currentPlayer: Player = "X";
+  winner: Player | "draw" | null = null;
+  winLine: number[] | null = null;
+  scores = { X: 0, O: 0, draw: 0 };
+  particlesOptions: ISourceOptions = {
+    fullScreen: { enable: true, zIndex: -1 },
+    background: { color: { value: "#0a0a1a" } },
+    fpsLimit: 60,
+    particles: {
+      number: { value: 30, density: { enable: true } },
+      color: { value: ["#6c5ce7", "#a29bfe"] },
+      shape: { type: "circle" },
+      opacity: { value: 0.2, random: true },
+      size: { value: { min: 1, max: 2 } },
+      move: { enable: true, speed: 0.5, direction: "none", random: true, straight: false, outModes: { default: "out" } },
+    },
+    detectRetina: true,
+  };
+  get status(): string {
+    if (!this.winner) return `${this.currentPlayer}'s turn`;
+    if (this.winner === "draw") return "It's a draw!";
+    return `${this.winner} wins!`;
+  }
+  private checkWin(board: (Player | null)[]): { winner: Player | "draw"; winLine: number[] } | null {
+    for (const pattern of WIN_PATTERNS) {
+      const [a, b, c] = pattern;
+      if (board[a] && board[a] === board[b] && board[a] === board[c]) {
+        return { winner: board[a] as Player, winLine: pattern };
+      }
+    }
+    if (board.every((cell) => cell !== null)) return { winner: "draw" as const, winLine: [] };
+    return null;
+  }
+  private fireConfettiEffect(): void {
+    const count = 200;
+    const defaults = { origin: { y: 0.7 } };
+    const fire = (particleRatio: number, opts: Record<string, unknown>) => {
+      confetti({ ...defaults, ...opts, particleCount: Math.floor(count * particleRatio) });
+    };
+    fire(0.25, { spread: 26, startVelocity: 55 });
+    fire(0.2, { spread: 60 });
+    fire(0.35, { spread: 100, decay: 0.91, scalar: 0.8 });
+    fire(0.1, { spread: 120, startVelocity: 25, decay: 0.92, scalar: 1.2 });
+    fire(0.1, { spread: 120, startVelocity: 45 });
+  }
+  handleMove(index: number): void {
+    if (this.board[index] || this.winner) return;
+    const board = [...this.board];
+    board[index] = this.currentPlayer;
+    const result = this.checkWin(board);
+    if (result) {
+      this.board = board;
+      this.winner = result.winner;
+      this.winLine = result.winLine;
+      if (result.winner === "draw") this.scores.draw++;
+      else this.scores[result.winner]++;
+      if (result.winner !== "draw") setTimeout(() => this.fireConfettiEffect(), 100);
+    } else {
+      this.board = board;
+      this.currentPlayer = this.currentPlayer === "X" ? "O" : "X";
+    }
+  }
+  handleReset(): void {
+    this.board = Array(9).fill(null);
+    this.currentPlayer = "X";
+    this.winner = null;
+    this.winLine = null;
+  }
+}

package/template/astro/package.json ADDED Viewed

@@ -0,0 +1,15 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview"
+  },
+  "dependencies": {
+    "astro": "^5.0.0",
+    "@tsparticles/astro": "^4.1.3"
+  }
+}

package/template/astro/src/pages/index.astro ADDED Viewed

@@ -0,0 +1,158 @@
+---
+import Particles from "@tsparticles/astro";
+---
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Tic-Tac-Toe</title>
+    <style>
+      * { box-sizing: border-box; }
+      body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0a0a1a; font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; color: #fff; }
+      #app { text-align: center; z-index: 10; padding: 1rem; }
+      h1 { font-size: 2.5em; margin-bottom: 1rem; background: linear-gradient(135deg, #6c5ce7, #fd79a8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
+      .scoreboard { display: flex; justify-content: center; gap: 2rem; margin-bottom: 1rem; font-size: 1.1em; opacity: 0.8; }
+      .turn { font-size: 1.2em; margin-bottom: 1rem; opacity: 0.7; }
+      .board { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 100px); gap: 4px; background: rgba(255,255,255,0.1); border-radius: 12px; overflow: hidden; margin: 0 auto; width: fit-content; }
+      .cell { display: flex; align-items: center; justify-content: center; font-size: 2.5em; font-weight: 700; background: #12122a; cursor: pointer; transition: background 0.2s; user-select: none; }
+      .cell:hover { background: #1a1a3a; }
+      .cell.taken { cursor: default; }
+      .cell.win { background: rgba(108,92,231,0.3); }
+      .reset-btn { margin-top: 1.5rem; padding: 0.7em 2em; font-size: 1em; font-weight: 600; border: none; border-radius: 8px; background: linear-gradient(135deg, #6c5ce7, #a29bfe); color: #fff; cursor: pointer; transition: transform 0.2s; }
+      .reset-btn:hover { transform: scale(1.05); }
+    </style>
+  </head>
+  <body>
+    <Particles id="tsparticles" options={{
+      fullScreen: { enable: true, zIndex: -1 },
+      background: { color: { value: "#0a0a1a" } },
+      fpsLimit: 60,
+      particles: {
+        number: { value: 30, density: { enable: true } },
+        color: { value: ["#6c5ce7", "#a29bfe"] },
+        shape: { type: "circle" },
+        opacity: { value: 0.2, random: true },
+        size: { value: { min: 1, max: 2 } },
+        move: { enable: true, speed: 0.5, direction: "none", random: true, straight: false, outModes: { default: "out" } },
+      },
+      detectRetina: true,
+    }} client:load />
+    <div id="app">
+      <h1>Tic-Tac-Toe</h1>
+      <div class="scoreboard">
+        <span>X: <strong id="scoreX">0</strong></span>
+        <span>Draws: <strong id="scoreDraw">0</strong></span>
+        <span>O: <strong id="scoreO">0</strong></span>
+      </div>
+      <div class="turn" id="turn">X's turn</div>
+      <div class="board" id="board">
+        <div class="cell" data-index="0"></div>
+        <div class="cell" data-index="1"></div>
+        <div class="cell" data-index="2"></div>
+        <div class="cell" data-index="3"></div>
+        <div class="cell" data-index="4"></div>
+        <div class="cell" data-index="5"></div>
+        <div class="cell" data-index="6"></div>
+        <div class="cell" data-index="7"></div>
+        <div class="cell" data-index="8"></div>
+      </div>
+      <button class="reset-btn" id="resetBtn">New Game</button>
+    </div>
+    <script>
+      import { confetti } from "@tsparticles/confetti";
+      const WIN_PATTERNS = [
+        [0, 1, 2], [3, 4, 5], [6, 7, 8],
+        [0, 3, 6], [1, 4, 7], [2, 5, 8],
+        [0, 4, 8], [2, 4, 6],
+      ];
+      let board = Array(9).fill(null);
+      let currentPlayer = "X";
+      let winner = null;
+      let winLine = null;
+      let scores = { X: 0, O: 0, draw: 0 };
+      function checkWin(b) {
+        for (const pattern of WIN_PATTERNS) {
+          const [a, b_, c] = pattern;
+          if (b[a] && b[a] === b[b_] && b[a] === b[c]) {
+            return { winner: b[a], winLine: pattern };
+          }
+        }
+        if (b.every((cell) => cell !== null)) return { winner: "draw", winLine: [] };
+        return null;
+      }
+      function fireConfettiEffect() {
+        const count = 200;
+        const defaults = { origin: { y: 0.7 } };
+        const fire = (particleRatio, opts) => {
+          confetti({ ...defaults, ...opts, particleCount: Math.floor(count * particleRatio) });
+        };
+        fire(0.25, { spread: 26, startVelocity: 55 });
+        fire(0.2, { spread: 60 });
+        fire(0.35, { spread: 100, decay: 0.91, scalar: 0.8 });
+        fire(0.1, { spread: 120, startVelocity: 25, decay: 0.92, scalar: 1.2 });
+        fire(0.1, { spread: 120, startVelocity: 45 });
+      }
+      function render() {
+        document.querySelectorAll(".cell").forEach((cell, i) => {
+          cell.textContent = board[i] ?? "";
+          cell.classList.toggle("taken", board[i] !== null);
+          cell.classList.toggle("win", winLine?.includes(i) ?? false);
+        });
+        const turnEl = document.getElementById("turn");
+        if (!winner) turnEl.textContent = `${currentPlayer}'s turn`;
+        else if (winner === "draw") turnEl.textContent = "It's a draw!";
+        else turnEl.textContent = `${winner} wins!`;
+        document.getElementById("scoreX").textContent = String(scores.X);
+        document.getElementById("scoreO").textContent = String(scores.O);
+        document.getElementById("scoreDraw").textContent = String(scores.draw);
+      }
+      function handleMove(index) {
+        if (board[index] || winner) return;
+        const b = [...board];
+        b[index] = currentPlayer;
+        const result = checkWin(b);
+        if (result) {
+          board = b;
+          winner = result.winner;
+          winLine = result.winLine;
+          if (result.winner === "draw") scores.draw++;
+          else scores[result.winner]++;
+          if (result.winner !== "draw") setTimeout(fireConfettiEffect, 100);
+        } else {
+          board = b;
+          currentPlayer = currentPlayer === "X" ? "O" : "X";
+        }
+        render();
+      }
+      document.getElementById("board").addEventListener("click", (e) => {
+        const cell = e.target.closest(".cell");
+        if (!cell) return;
+        const index = parseInt(cell.dataset.index, 10);
+        if (!isNaN(index)) handleMove(index);
+      });
+      document.getElementById("resetBtn").addEventListener("click", () => {
+        board = Array(9).fill(null);
+        currentPlayer = "X";
+        winner = null;
+        winLine = null;
+        render();
+      });
+      render();
+    </script>
+  </body>
+</html>

package/template/ember/app/controllers/application.js ADDED Viewed

@@ -0,0 +1,94 @@
+import Controller from "@ember/controller";
+import { action } from "@ember/object";
+import { tracked } from "@glimmer/tracking";
+import { confetti } from "@tsparticles/confetti";
+const WIN_PATTERNS = [
+  [0, 1, 2], [3, 4, 5], [6, 7, 8],
+  [0, 3, 6], [1, 4, 7], [2, 5, 8],
+  [0, 4, 8], [2, 4, 6],
+];
+export default class ApplicationController extends Controller {
+  @tracked board = Array(9).fill(null);
+  @tracked currentPlayer = "X";
+  @tracked winner = null;
+  @tracked winLine = null;
+  @tracked scores = { X: 0, O: 0, draw: 0 };
+  particlesOptions = {
+    fullScreen: { enable: true, zIndex: -1 },
+    background: { color: { value: "#0a0a1a" } },
+    fpsLimit: 60,
+    particles: {
+      number: { value: 30, density: { enable: true } },
+      color: { value: ["#6c5ce7", "#a29bfe"] },
+      shape: { type: "circle" },
+      opacity: { value: 0.2, random: true },
+      size: { value: { min: 1, max: 2 } },
+      move: { enable: true, speed: 0.5, direction: "none", random: true, straight: false, outModes: { default: "out" } },
+    },
+    detectRetina: true,
+  };
+  get status() {
+    if (!this.winner) return `${this.currentPlayer}'s turn`;
+    if (this.winner === "draw") return "It's a draw!";
+    return `${this.winner} wins!`;
+  }
+  isWinLine(index) {
+    return this.winLine?.includes(index) ?? false;
+  }
+  checkWin(board) {
+    for (const pattern of WIN_PATTERNS) {
+      const [a, b, c] = pattern;
+      if (board[a] && board[a] === board[b] && board[a] === board[c]) {
+        return { winner: board[a], winLine: pattern };
+      }
+    }
+    if (board.every((cell) => cell !== null)) return { winner: "draw", winLine: [] };
+    return null;
+  }
+  fireConfettiEffect() {
+    const count = 200;
+    const defaults = { origin: { y: 0.7 } };
+    const fire = (particleRatio, opts) => {
+      confetti({ ...defaults, ...opts, particleCount: Math.floor(count * particleRatio) });
+    };
+    fire(0.25, { spread: 26, startVelocity: 55 });
+    fire(0.2, { spread: 60 });
+    fire(0.35, { spread: 100, decay: 0.91, scalar: 0.8 });
+    fire(0.1, { spread: 120, startVelocity: 25, decay: 0.92, scalar: 1.2 });
+    fire(0.1, { spread: 120, startVelocity: 45 });
+  }
+  @action
+  handleMove(index) {
+    if (this.board[index] || this.winner) return;
+    const board = [...this.board];
+    board[index] = this.currentPlayer;
+    const result = this.checkWin(board);
+    if (result) {
+      this.board = board;
+      this.winner = result.winner;
+      this.winLine = result.winLine;
+      if (result.winner === "draw") this.scores = { ...this.scores, draw: this.scores.draw + 1 };
+      else this.scores = { ...this.scores, [result.winner]: this.scores[result.winner] + 1 };
+      if (result.winner !== "draw") setTimeout(() => this.fireConfettiEffect(), 100);
+    } else {
+      this.board = board;
+      this.currentPlayer = this.currentPlayer === "X" ? "O" : "X";
+    }
+  }
+  @action
+  handleReset() {
+    this.board = Array(9).fill(null);
+    this.currentPlayer = "X";
+    this.winner = null;
+    this.winLine = null;
+  }
+}

package/template/ember/app/templates/application.hbs ADDED Viewed

@@ -0,0 +1,39 @@
+<Particles @id="tsparticles" @options={{this.particlesOptions}} />
+<div id="app">
+  <h1>Tic-Tac-Toe</h1>
+  <div class="scoreboard">
+    <span>X: <strong>{{this.scores.X}}</strong></span>
+    <span>Draws: <strong>{{this.scores.draw}}</strong></span>
+    <span>O: <strong>{{this.scores.O}}</strong></span>
+  </div>
+  <div class="turn">{{this.status}}</div>
+  <div class="board">
+    {{#each this.board as |cell i|}}
+      <div
+        class="cell{{if cell " taken"}}{{if (this.isWinLine i) " win"}}"
+        role="button"
+        {{on "click" (fn this.handleMove i)}}
+      >
+        {{cell}}
+      </div>
+    {{/each}}
+  </div>
+  <button class="reset-btn" {{on "click" this.handleReset}}>New Game</button>
+</div>
+<style>
+  * { box-sizing: border-box; }
+  body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #0a0a1a; font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; color: #fff; }
+  #app { text-align: center; z-index: 10; padding: 1rem; }
+  h1 { font-size: 2.5em; margin-bottom: 1rem; background: linear-gradient(135deg, #6c5ce7, #fd79a8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
+  .scoreboard { display: flex; justify-content: center; gap: 2rem; margin-bottom: 1rem; font-size: 1.1em; opacity: 0.8; }
+  .turn { font-size: 1.2em; margin-bottom: 1rem; opacity: 0.7; }
+  .board { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 100px); gap: 4px; background: rgba(255,255,255,0.1); border-radius: 12px; overflow: hidden; margin: 0 auto; width: fit-content; }
+  .cell { display: flex; align-items: center; justify-content: center; font-size: 2.5em; font-weight: 700; background: #12122a; cursor: pointer; transition: background 0.2s; user-select: none; }
+  .cell:hover { background: #1a1a3a; }
+  .cell.taken { cursor: default; }
+  .cell.win { background: rgba(108,92,231,0.3); }
+  .reset-btn { margin-top: 1.5rem; padding: 0.7em 2em; font-size: 1em; font-weight: 600; border: none; border-radius: 8px; background: linear-gradient(135deg, #6c5ce7, #a29bfe); color: #fff; cursor: pointer; transition: transform 0.2s; }
+  .reset-btn:hover { transform: scale(1.05); }
+</style>

package/template/ember/package.json ADDED Viewed

@@ -0,0 +1,17 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "ember serve",
+    "build": "ember build",
+    "preview": "ember serve"
+  },
+  "dependencies": {
+    "ember-source": "^6.0.0",
+    "@tsparticles/ember": "^4.1.3"
+  },
+  "devDependencies": {
+    "ember-cli": "^6.0.0"
+  }
+}

package/template/inferno/package.json ADDED Viewed

@@ -0,0 +1,20 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "inferno": "^9.0.0",
+    "inferno-hydrate": "^9.0.0",
+    "@tsparticles/inferno": "^4.1.3"
+  },
+  "devDependencies": {
+    "typescript": "~5.7.0",
+    "vite": "^6.0.0"
+  }
+}

package/template/inferno/src/App.css ADDED Viewed

@@ -0,0 +1,97 @@
+* {
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #0a0a1a;
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  color: #fff;
+}
+#app {
+  text-align: center;
+  z-index: 10;
+  padding: 1rem;
+}
+h1 {
+  font-size: 2.5em;
+  margin-bottom: 1rem;
+  background: linear-gradient(135deg, #6c5ce7, #fd79a8);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+.scoreboard {
+  display: flex;
+  justify-content: center;
+  gap: 2rem;
+  margin-bottom: 1rem;
+  font-size: 1.1em;
+  opacity: 0.8;
+}
+.turn {
+  font-size: 1.2em;
+  margin-bottom: 1rem;
+  opacity: 0.7;
+}
+.board {
+  display: grid;
+  grid-template-columns: repeat(3, 100px);
+  grid-template-rows: repeat(3, 100px);
+  gap: 4px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  overflow: hidden;
+  margin: 0 auto;
+  width: fit-content;
+}
+.cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 2.5em;
+  font-weight: 700;
+  background: #12122a;
+  cursor: pointer;
+  transition: background 0.2s;
+  user-select: none;
+}
+.cell:hover {
+  background: #1a1a3a;
+}
+.cell.taken {
+  cursor: default;
+}
+.cell.win {
+  background: rgba(108, 92, 231, 0.3);
+}
+.reset-btn {
+  margin-top: 1.5rem;
+  padding: 0.7em 2em;
+  font-size: 1em;
+  font-weight: 600;
+  border: none;
+  border-radius: 8px;
+  background: linear-gradient(135deg, #6c5ce7, #a29bfe);
+  color: #fff;
+  cursor: pointer;
+  transition: transform 0.2s;
+}
+.reset-btn:hover {
+  transform: scale(1.05);
+}

package/template/inferno/src/App.tsx ADDED Viewed

@@ -0,0 +1,149 @@
+import { Component } from "inferno";
+import Particles from "@tsparticles/inferno";
+import { loadSlim } from "@tsparticles/slim";
+import { confetti } from "@tsparticles/confetti";
+import type { Engine, ISourceOptions } from "@tsparticles/engine";
+import "./App.css";
+type Player = "X" | "O";
+interface GameState {
+  board: (Player | null)[];
+  currentPlayer: Player;
+  winner: Player | "draw" | null;
+  winLine: number[] | null;
+  scores: { X: number; O: number; draw: number };
+}
+const WIN_PATTERNS = [
+  [0, 1, 2], [3, 4, 5], [6, 7, 8],
+  [0, 3, 6], [1, 4, 7], [2, 5, 8],
+  [0, 4, 8], [2, 4, 6],
+];
+function createInitialState(): GameState {
+  return {
+    board: Array(9).fill(null),
+    currentPlayer: "X",
+    winner: null,
+    winLine: null,
+    scores: { X: 0, O: 0, draw: 0 },
+  };
+}
+function checkWin(board: (Player | null)[]): { winner: Player | "draw"; winLine: number[] } | null {
+  for (const pattern of WIN_PATTERNS) {
+    const [a, b, c] = pattern;
+    if (board[a] && board[a] === board[b] && board[a] === board[c]) {
+      return { winner: board[a] as Player, winLine: pattern };
+    }
+  }
+  if (board.every((cell) => cell !== null)) {
+    return { winner: "draw" as const, winLine: [] };
+  }
+  return null;
+}
+function fireConfettiEffect() {
+  const count = 200;
+  const defaults = { origin: { y: 0.7 } };
+  const fire = (particleRatio: number, opts: Record<string, unknown>) => {
+    confetti({ ...defaults, ...opts, particleCount: Math.floor(count * particleRatio) });
+  };
+  fire(0.25, { spread: 26, startVelocity: 55 });
+  fire(0.2, { spread: 60 });
+  fire(0.35, { spread: 100, decay: 0.91, scalar: 0.8 });
+  fire(0.1, { spread: 120, startVelocity: 25, decay: 0.92, scalar: 1.2 });
+  fire(0.1, { spread: 120, startVelocity: 45 });
+}
+async function init(engine: Engine): Promise<void> {
+  await loadSlim(engine);
+}
+const particlesOptions: ISourceOptions = {
+  fullScreen: { enable: true, zIndex: -1 },
+  background: { color: { value: "#0a0a1a" } },
+  fpsLimit: 60,
+  particles: {
+    number: { value: 30, density: { enable: true } },
+    color: { value: ["#6c5ce7", "#a29bfe"] },
+    shape: { type: "circle" },
+    opacity: { value: 0.2, random: true },
+    size: { value: { min: 1, max: 2 } },
+    move: { enable: true, speed: 0.5, direction: "none", random: true, straight: false, outModes: { default: "out" } },
+  },
+  detectRetina: true,
+};
+export default class App extends Component<any, GameState> {
+  constructor(props: any) {
+    super(props);
+    this.state = createInitialState();
+    this.handleMove = this.handleMove.bind(this);
+    this.handleReset = this.handleReset.bind(this);
+  }
+  handleMove(index: number) {
+    this.setState((prev) => {
+      if (prev.board[index] || prev.winner) return prev;
+      const board = [...prev.board];
+      board[index] = prev.currentPlayer;
+      const result = checkWin(board);
+      if (result) {
+        const scores = { ...prev.scores };
+        if (result.winner === "draw") scores.draw++;
+        else scores[result.winner]++;
+        if (result.winner !== "draw") {
+          setTimeout(fireConfettiEffect, 100);
+        }
+        return { ...prev, board, winner: result.winner, winLine: result.winLine, scores };
+      }
+      return { ...prev, board, currentPlayer: prev.currentPlayer === "X" ? "O" : "X" };
+    });
+  }
+  handleReset() {
+    this.setState((prev) => ({
+      ...prev,
+      board: Array(9).fill(null),
+      currentPlayer: "X",
+      winner: null,
+      winLine: null,
+    }));
+  }
+  render() {
+    const state = this.state;
+    const status = state.winner
+      ? state.winner === "draw" ? "It's a draw!" : `${state.winner} wins!`
+      : `${state.currentPlayer}'s turn`;
+    return (
+      <div>
+        <Particles id="tsparticles" init={init} options={particlesOptions} />
+        <div id="app">
+          <h1>Tic-Tac-Toe</h1>
+          <div className="scoreboard">
+            <span>X: <strong>{state.scores.X}</strong></span>
+            <span>Draws: <strong>{state.scores.draw}</strong></span>
+            <span>O: <strong>{state.scores.O}</strong></span>
+          </div>
+          <div className="turn">{status}</div>
+          <div className="board">
+            {state.board.map((cell, i) => (
+              <div
+                key={i}
+                className={`cell${cell ? " taken" : ""}${state.winLine?.includes(i) ? " win" : ""}`}
+                onClick={() => this.handleMove(i)}
+              >
+                {cell}
+              </div>
+            ))}
+          </div>
+          <button className="reset-btn" onClick={this.handleReset}>New Game</button>
+        </div>
+      </div>
+    );
+  }
+}