@tsparticles/template-tictactoe 4.1.3 → 4.2.0

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# [4.2.0](https://github.com/tsparticles/tsparticles/compare/v4.1.3...v4.2.0) (2026-06-17)
+
+### Features
+
+- adding templates to cli create ([bc118ef](https://github.com/tsparticles/tsparticles/commit/bc118efa3f40497f9fa84186ac6102411a19fda7))

package/README.md

@@ -0,0 +1,3 @@
+# @tsparticles/template-tictactoe
+
+tsParticles tic-tac-toe game template. Use with `create-tsparticles-app` to scaffold a new tic-tac-toe game project with animated particles.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/template-tictactoe",
-  "version": "4.1.3",
+  "version": "4.2.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -8,7 +8,8 @@
   "scripts": {
     "prebuild": "node scripts/prebuild.js",
     "build": "pnpm run prebuild",
-    "build:ci": "pnpm run prebuild"
+    "build:ci": "pnpm run prebuild",
+    "version": "pnpm run build && git add template.json"
   },
-  "gitHead": "0551736c55ae8eec3855a693af8a99b1b4420350"
+  "gitHead": "0a0fbf89c6cb3e1c2395763f55dabecfa85618f9"
 }

package/template/angular/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "dev": "ng serve",
+    "build": "ng build",
+    "preview": "ng serve",
+    "watch": "ng build --watch --configuration development"
+  },
+  "dependencies": {
+    "@angular/animations": "~22.0.0",
+    "@angular/common": "~22.0.0",
+    "@angular/compiler": "~22.0.0",
+    "@angular/core": "~22.0.0",
+    "@angular/forms": "~22.0.0",
+    "@angular/platform-browser": "~22.0.0",
+    "@angular/platform-browser-dynamic": "~22.0.0",
+    "@angular/router": "~22.0.0",
+    "@tsparticles/angular": "^4.1.3",
+    "@tsparticles/confetti": "^3.8.1",
+    "rxjs": "~7.8.2",
+    "tslib": "^2.8.1",
+    "zone.js": "~0.16.2"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~22.0.0",
+    "@angular/cli": "~22.0.0",
+    "@angular/compiler-cli": "~22.0.0",
+    "typescript": "~6.0.3"
+  }
+}

package/template/angular/src/app/app.component.css

@@ -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/angular/src/app/app.component.html

@@ -0,0 +1,21 @@
+<ngx-particles id="tsparticles" [options]="particlesOptions" />
+
+<div id="app">
+  <h1>Tic-Tac-Toe</h1>
+  <div class="scoreboard">
+    <span>X: <strong>{{ scores.X }}</strong></span>
+    <span>Draws: <strong>{{ scores.draw }}</strong></span>
+    <span>O: <strong>{{ scores.O }}</strong></span>
+  </div>
+  <div class="turn">{{ status }}</div>
+  <div class="board">
+    <div
+      *ngFor="let cell of board; let i = index"
+      [ngClass]="['cell', { taken: cell, win: winLine?.includes(i) }]"
+      (click)="handleMove(i)"
+    >
+      {{ cell }}
+    </div>
+  </div>
+  <button class="reset-btn" (click)="handleReset()">New Game</button>
+</div>

package/template/angular/src/app/app.component.ts

@@ -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/angular-confetti/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "dev": "ng serve",
+    "build": "ng build",
+    "preview": "ng serve",
+    "watch": "ng build --watch --configuration development"
+  },
+  "dependencies": {
+    "@angular/animations": "~22.0.0",
+    "@angular/common": "~22.0.0",
+    "@angular/compiler": "~22.0.0",
+    "@angular/core": "~22.0.0",
+    "@angular/forms": "~22.0.0",
+    "@angular/platform-browser": "~22.0.0",
+    "@angular/platform-browser-dynamic": "~22.0.0",
+    "@angular/router": "~22.0.0",
+    "@tsparticles/angular": "^4.1.3",
+    "@tsparticles/confetti": "^3.8.1",
+    "rxjs": "~7.8.2",
+    "tslib": "^2.8.1",
+    "zone.js": "~0.16.2"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~22.0.0",
+    "@angular/cli": "~22.0.0",
+    "@angular/compiler-cli": "~22.0.0",
+    "typescript": "~6.0.3"
+  }
+}

package/template/angular-confetti/src/app/app.component.css

@@ -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/angular-confetti/src/app/app.component.html

@@ -0,0 +1,21 @@
+<ngx-particles id="tsparticles" [options]="particlesOptions" />
+
+<div id="app">
+  <h1>Tic-Tac-Toe</h1>
+  <div class="scoreboard">
+    <span>X: <strong>{{ scores.X }}</strong></span>
+    <span>Draws: <strong>{{ scores.draw }}</strong></span>
+    <span>O: <strong>{{ scores.O }}</strong></span>
+  </div>
+  <div class="turn">{{ status }}</div>
+  <div class="board">
+    <div
+      *ngFor="let cell of board; let i = index"
+      [ngClass]="['cell', { taken: cell, win: winLine?.includes(i) }]"
+      (click)="handleMove(i)"
+    >
+      {{ cell }}
+    </div>
+  </div>
+  <button class="reset-btn" (click)="handleReset()">New Game</button>
+</div>

package/template/angular-confetti/src/app/app.component.ts

@@ -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/angular-fireworks/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "dev": "ng serve",
+    "build": "ng build",
+    "preview": "ng serve",
+    "watch": "ng build --watch --configuration development"
+  },
+  "dependencies": {
+    "@angular/animations": "~22.0.0",
+    "@angular/common": "~22.0.0",
+    "@angular/compiler": "~22.0.0",
+    "@angular/core": "~22.0.0",
+    "@angular/forms": "~22.0.0",
+    "@angular/platform-browser": "~22.0.0",
+    "@angular/platform-browser-dynamic": "~22.0.0",
+    "@angular/router": "~22.0.0",
+    "@tsparticles/angular": "^4.1.3",
+    "@tsparticles/confetti": "^3.8.1",
+    "rxjs": "~7.8.2",
+    "tslib": "^2.8.1",
+    "zone.js": "~0.16.2"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~22.0.0",
+    "@angular/cli": "~22.0.0",
+    "@angular/compiler-cli": "~22.0.0",
+    "typescript": "~6.0.3"
+  }
+}

package/template/angular-fireworks/src/app/app.component.css

@@ -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/angular-fireworks/src/app/app.component.html

@@ -0,0 +1,21 @@
+<ngx-particles id="tsparticles" [options]="particlesOptions" />
+
+<div id="app">
+  <h1>Tic-Tac-Toe</h1>
+  <div class="scoreboard">
+    <span>X: <strong>{{ scores.X }}</strong></span>
+    <span>Draws: <strong>{{ scores.draw }}</strong></span>
+    <span>O: <strong>{{ scores.O }}</strong></span>
+  </div>
+  <div class="turn">{{ status }}</div>
+  <div class="board">
+    <div
+      *ngFor="let cell of board; let i = index"
+      [ngClass]="['cell', { taken: cell, win: winLine?.includes(i) }]"
+      (click)="handleMove(i)"
+    >
+      {{ cell }}
+    </div>
+  </div>
+  <button class="reset-btn" (click)="handleReset()">New Game</button>
+</div>