@tsparticles/template-tictactoe 4.4.0 → 4.5.1

package/CHANGELOG.md

@@ -3,11 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.5.1](https://github.com/tsparticles/tsparticles/compare/v4.5.0...v4.5.1) (2026-11-02)
+
+**Note:** Version bump only for package @tsparticles/template-tictactoe
+
+# [4.5.0](https://github.com/tsparticles/tsparticles/compare/v4.4.0...v4.5.0) (2026-10-25)
+
+**Note:** Version bump only for package @tsparticles/template-tictactoe
+
 # [4.4.0](https://github.com/tsparticles/tsparticles/compare/v4.3.3...v4.4.0) (2026-08-30)
 
 ### Bug Fixes
 
-* various fixes for 4.4.0 ([475d06d](https://github.com/tsparticles/tsparticles/commit/475d06da27e1497bb097c0822fcfcb72d7142456))
+- various fixes for 4.4.0 ([475d06d](https://github.com/tsparticles/tsparticles/commit/475d06da27e1497bb097c0822fcfcb72d7142456))
 
 ## [4.3.3](https://github.com/tsparticles/tsparticles/compare/v4.3.2...v4.3.3) (2026-07-23)
 
@@ -25,7 +33,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ### Bug Fixes
 
-* fixed angular confetti ([6f25a4a](https://github.com/tsparticles/tsparticles/commit/6f25a4a1eaa69c47f2668316e7b396fe55195f84))
+- fixed angular confetti ([6f25a4a](https://github.com/tsparticles/tsparticles/commit/6f25a4a1eaa69c47f2668316e7b396fe55195f84))
 
 ## [4.2.1](https://github.com/tsparticles/tsparticles/compare/v4.2.0...v4.2.1) (2026-06-18)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/template-tictactoe",
-  "version": "4.4.0",
+  "version": "4.5.1",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -18,12 +18,12 @@
     "prepack": "pnpm run build"
   },
   "dependencies": {
-    "@tsparticles/confetti": "4.4.0",
-    "@tsparticles/engine": "4.4.0",
-    "@tsparticles/slim": "4.4.0"
+    "@tsparticles/confetti": "4.5.1",
+    "@tsparticles/engine": "4.5.1",
+    "@tsparticles/slim": "4.5.1"
   },
   "devDependencies": {
     "fs-extra": "^11.3.4"
   },
-  "gitHead": "b7e605098d6ea937d5068c06542671d4891070e4"
+  "gitHead": "433c560448e5020cb051e1b025e0f9914f23b147"
 }

package/scripts/prebuild.js

@@ -52,7 +52,7 @@ fs.readFile(libPackage, function (error, data) {
     }
   }
 
-  fs.writeFile(libPackage, JSON.stringify(libObj, undefined, 2), "utf-8", function () {
+  fs.writeFile(libPackage, `${JSON.stringify(libObj, undefined, 2)}\n`, "utf-8", function () {
     console.log("template.json dependencies updated successfully");
   });
 });

package/template/angular/package.json

@@ -11,24 +11,24 @@
     "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",
+    "@angular/animations": "~22.2.2",
+    "@angular/common": "~22.2.2",
+    "@angular/compiler": "~22.2.2",
+    "@angular/core": "~22.2.2",
+    "@angular/forms": "~22.2.2",
+    "@angular/platform-browser": "~22.2.2",
+    "@angular/platform-browser-dynamic": "~22.2.2",
+    "@angular/router": "~22.2.2",
+    "@tsparticles/angular": "^4.4.0",
+    "@tsparticles/confetti": "^4.4.0",
     "rxjs": "~7.8.2",
     "tslib": "^2.8.1",
-    "zone.js": "~0.16.2"
+    "zone.js": "~0.16.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~22.0.0",
-    "@angular/cli": "~22.0.0",
-    "@angular/compiler-cli": "~22.0.0",
+    "@angular-devkit/build-angular": "~22.2.2",
+    "@angular/cli": "~22.2.2",
+    "@angular/compiler-cli": "~22.2.2",
     "typescript": "~6.0.3"
   }
 }

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

@@ -11,6 +11,7 @@ const WIN_PATTERNS = [
 ];
 
 @Component({
+  standalone: false,
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.css"],

package/template/angular-confetti/package.json

@@ -11,24 +11,24 @@
     "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",
+    "@angular/animations": "~22.2.2",
+    "@angular/common": "~22.2.2",
+    "@angular/compiler": "~22.2.2",
+    "@angular/core": "~22.2.2",
+    "@angular/forms": "~22.2.2",
+    "@angular/platform-browser": "~22.2.2",
+    "@angular/platform-browser-dynamic": "~22.2.2",
+    "@angular/router": "~22.2.2",
+    "@tsparticles/angular": "^4.4.0",
+    "@tsparticles/confetti": "^4.4.0",
     "rxjs": "~7.8.2",
     "tslib": "^2.8.1",
-    "zone.js": "~0.16.2"
+    "zone.js": "~0.16.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~22.0.0",
-    "@angular/cli": "~22.0.0",
-    "@angular/compiler-cli": "~22.0.0",
+    "@angular-devkit/build-angular": "~22.2.2",
+    "@angular/cli": "~22.2.2",
+    "@angular/compiler-cli": "~22.2.2",
     "typescript": "~6.0.3"
   }
 }

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

@@ -11,6 +11,7 @@ const WIN_PATTERNS = [
 ];
 
 @Component({
+  standalone: false,
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.css"],

package/template/angular-fireworks/package.json

@@ -11,24 +11,24 @@
     "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",
+    "@angular/animations": "~22.2.2",
+    "@angular/common": "~22.2.2",
+    "@angular/compiler": "~22.2.2",
+    "@angular/core": "~22.2.2",
+    "@angular/forms": "~22.2.2",
+    "@angular/platform-browser": "~22.2.2",
+    "@angular/platform-browser-dynamic": "~22.2.2",
+    "@angular/router": "~22.2.2",
+    "@tsparticles/angular": "^4.4.0",
+    "@tsparticles/confetti": "^4.4.0",
     "rxjs": "~7.8.2",
     "tslib": "^2.8.1",
-    "zone.js": "~0.16.2"
+    "zone.js": "~0.16.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~22.0.0",
-    "@angular/cli": "~22.0.0",
-    "@angular/compiler-cli": "~22.0.0",
+    "@angular-devkit/build-angular": "~22.2.2",
+    "@angular/cli": "~22.2.2",
+    "@angular/compiler-cli": "~22.2.2",
     "typescript": "~6.0.3"
   }
 }

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

@@ -11,6 +11,7 @@ const WIN_PATTERNS = [
 ];
 
 @Component({
+  standalone: false,
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.css"],

package/template/astro/package.json

@@ -9,7 +9,7 @@
     "preview": "astro preview"
   },
   "dependencies": {
-    "astro": "^5.0.0",
-    "@tsparticles/astro": "^4.1.3"
+    "astro": "^7.3.2",
+    "@tsparticles/astro": "^4.4.0"
   }
 }

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

@@ -63,8 +63,14 @@ import Particles from "@tsparticles/astro";
     </div>
 
     <script>
+      import { initParticlesEngine } from "@tsparticles/astro";
+      import { loadSlim } from "@tsparticles/slim";
       import { confetti } from "@tsparticles/confetti";
 
+      await initParticlesEngine(async (engine) => {
+        await loadSlim(engine);
+      });
+
       const WIN_PATTERNS = [
         [0, 1, 2], [3, 4, 5], [6, 7, 8],
         [0, 3, 6], [1, 4, 7], [2, 5, 8],

package/template/ember/package.json

@@ -7,11 +7,32 @@
     "build": "ember build",
     "preview": "ember serve"
   },
+  "devDependencies": {
+    "@ember/optional-features": "^3.0.0",
+    "@glimmer/component": "^2.1.1",
+    "@glimmer/tracking": "^1.1.2",
+    "broccoli-asset-rev": "^3.0.0",
+    "ember-auto-import": "^2.13.1",
+    "ember-cli": "~6.12.0",
+    "ember-cli-babel": "^8.3.1",
+    "ember-cli-htmlbars": "^7.0.1",
+    "ember-cli-inject-live-reload": "^2.1.0",
+    "ember-cli-sri": "^2.1.1",
+    "ember-cli-terser": "^4.0.2",
+    "ember-load-initializers": "^3.0.1",
+    "ember-modifier": "^4.3.0",
+    "ember-resolver": "^13.2.0",
+    "ember-source": "~6.12.0",
+    "loader.js": "^4.7.0",
+    "typescript": "^6.0.3",
+    "webpack": "^5.106.1"
+  },
   "dependencies": {
-    "ember-source": "^6.0.0",
-    "@tsparticles/ember": "^4.1.3"
+    "@tsparticles/ember": "^4.4.0",
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0"
   },
-  "devDependencies": {
-    "ember-cli": "^6.0.0"
+  "ember": {
+    "edition": "octane"
   }
 }

package/template/inferno/package.json

@@ -9,12 +9,13 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "inferno": "^9.0.0",
-    "inferno-hydrate": "^9.0.0",
-    "@tsparticles/inferno": "^4.1.3"
+    "inferno": "^9.1.0",
+    "inferno-create-element": "^9.1.0",
+    "inferno-hydrate": "^9.1.0",
+    "@tsparticles/inferno": "^4.4.0"
   },
   "devDependencies": {
     "typescript": "~5.7.0",
-    "vite": "^6.0.0"
+    "vite": "^8.3.5"
   }
 }

package/template/inferno/src/App.tsx

@@ -1,5 +1,5 @@
 import { Component } from "inferno";
-import Particles from "@tsparticles/inferno";
+import { Particles, ParticlesProvider } from "@tsparticles/inferno";
 import { loadSlim } from "@tsparticles/slim";
 import { confetti } from "@tsparticles/confetti";
 import type { Engine, ISourceOptions } from "@tsparticles/engine";
@@ -114,14 +114,14 @@ export default class App extends Component<any, GameState> {
   }
 
   render() {
-    const state = this.state;
+    const state = this.state as GameState;
     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} />
+      <ParticlesProvider init={init}>
+        <Particles id="tsparticles" options={particlesOptions} />
         <div id="app">
           <h1>Tic-Tac-Toe</h1>
           <div className="scoreboard">
@@ -143,7 +143,7 @@ export default class App extends Component<any, GameState> {
           </div>
           <button className="reset-btn" onClick={this.handleReset}>New Game</button>
         </div>
-      </div>
+      </ParticlesProvider>
     );
   }
 }

package/template/jquery/index.html

@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{projectName}}</title>
+  </head>
+  <body>
+    <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 id="turnIndicator" class="turn">X's turn</div>
+      <div id="board" class="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 id="resetBtn" class="reset-btn">New Game</button>
+    </div>
+    <div id="tsparticles"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/template/jquery/package.json

@@ -10,11 +10,11 @@
   },
   "dependencies": {
     "jquery": "^3.7.1",
-    "@tsparticles/jquery": "^4.1.3"
+    "@tsparticles/jquery": "^4.4.0"
   },
   "devDependencies": {
     "@types/jquery": "^3.5.30",
     "typescript": "~5.7.0",
-    "vite": "^6.0.0"
+    "vite": "^8.3.5"
   }
 }

package/template/jquery/src/main.ts

@@ -2,6 +2,7 @@ import "./style.css";
 import $ from "jquery";
 import "@tsparticles/jquery";
 import { loadSlim } from "@tsparticles/slim";
+import { tsParticles } from "@tsparticles/engine";
 import { confetti } from "@tsparticles/confetti";
 
 type Player = "X" | "O";
@@ -61,7 +62,7 @@ function render(): void {
     $el.toggleClass("win", state.winLine?.includes(i) ?? false);
   });
 
-  const $turn = $("#turn");
+  const $turn = $("#turnIndicator");
   if (!state.winner) $turn.text(`${state.currentPlayer}'s turn`);
   else if (state.winner === "draw") $turn.text("It's a draw!");
   else $turn.text(`${state.winner} wins!`);
@@ -108,8 +109,9 @@ $(document).ready(async () => {
 
   render();
 
-  await loadSlim($("#tsparticles").particles() as any);
-  $("#tsparticles").particles({
+  await loadSlim(tsParticles);
+
+  $("#tsparticles").particles().load({
     fullScreen: { enable: true, zIndex: -1 },
     background: { color: { value: "#0a0a1a" } },
     fpsLimit: 60,

package/template/lit/package.json

@@ -10,10 +10,10 @@
   },
   "dependencies": {
     "lit": "^3.2.0",
-    "@tsparticles/lit": "^4.1.3"
+    "@tsparticles/lit": "^4.4.0"
   },
   "devDependencies": {
-    "vite": "^6.0.0",
+    "vite": "^8.3.5",
     "typescript": "~5.7.0"
   }
 }

package/template/nextjs/package.json

@@ -9,12 +9,16 @@
     "preview": "next start"
   },
   "dependencies": {
+    "@tsparticles/nextjs": "^4.4.0",
+    "@tsparticles/react": "^4.4.0",
     "next": "^15.0.0",
     "react": "^19.2.5",
-    "react-dom": "^19.2.5",
-    "@tsparticles/react": "^4.1.3"
+    "react-dom": "^19.2.5"
   },
   "devDependencies": {
-    "typescript": "~5.7.0"
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "typescript": "^6.0.3"
   }
 }

package/template/nuxt2/package.json

@@ -8,7 +8,17 @@
     "preview": "nuxt start"
   },
   "dependencies": {
-    "nuxt": "^2.19.0",
-    "@tsparticles/vue2": "^4.1.3"
+    "nuxt": "^2.18.1",
+    "@tsparticles/vue2": "^4.4.0",
+    "@tsparticles/nuxt2": "^4.4.0"
+  },
+  "browserslist": [
+    "chrome 58",
+    "edge 16",
+    "firefox 57",
+    "safari 11"
+  ],
+  "devDependencies": {
+    "@babel/preset-env": "^7.29.0"
   }
 }

package/template/nuxt3/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "nuxt": "^3.16.0",
     "vue": "^3.5.32",
-    "@tsparticles/vue3": "^4.1.3"
+    "@tsparticles/vue3": "^4.4.0",
+    "@tsparticles/nuxt3": "^4.4.0"
   }
 }

package/template/nuxt4/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "nuxt": "^4.0.0",
     "vue": "^3.5.32",
-    "@tsparticles/vue3": "^4.1.3"
+    "@tsparticles/vue3": "^4.4.0",
+    "@tsparticles/nuxt4": "^4.4.0"
   }
 }

package/template/preact/package.json

@@ -10,11 +10,11 @@
   },
   "dependencies": {
     "preact": "^10.26.0",
-    "@tsparticles/preact": "^4.1.3"
+    "@tsparticles/preact": "^4.4.0"
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.10.0",
     "typescript": "~5.7.0",
-    "vite": "^6.0.0"
+    "vite": "^8.3.5"
   }
 }

package/template/preact/src/App.tsx

@@ -1,8 +1,8 @@
-import { useState, useCallback } from "preact/hooks";
-import Particles, { ParticlesProvider } from "@tsparticles/preact";
+import { useEffect, useState, useCallback } from "preact/hooks";
+import Particles, { initParticlesEngine } from "@tsparticles/preact";
 import { loadSlim } from "@tsparticles/slim";
 import { confetti } from "@tsparticles/confetti";
-import type { Engine, ISourceOptions } from "@tsparticles/engine";
+import type { ISourceOptions } from "@tsparticles/engine";
 import "./App.css";
 
 type Player = "X" | "O";
@@ -57,10 +57,6 @@ function fireConfettiEffect() {
   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" } },
@@ -79,6 +75,12 @@ const particlesOptions: ISourceOptions = {
 export default function App() {
   const [state, setState] = useState<GameState>(createInitialState);
 
+  useEffect(() => {
+    void initParticlesEngine(async (engine) => {
+      await loadSlim(engine);
+    });
+  }, []);
+
   const handleMove = useCallback((index: number) => {
     setState((prev) => {
       if (prev.board[index] || prev.winner) return prev;
@@ -113,7 +115,7 @@ export default function App() {
     : `${state.currentPlayer}'s turn`;
 
   return (
-    <ParticlesProvider init={init}>
+    <>
       <Particles id="tsparticles" options={particlesOptions} />
       <div id="app">
         <h1>Tic-Tac-Toe</h1>
@@ -136,6 +138,6 @@ export default function App() {
         </div>
         <button class="reset-btn" onClick={handleReset}>New Game</button>
       </div>
-    </ParticlesProvider>
+    </>
   );
 }

package/template/qwik/package.json

@@ -10,10 +10,10 @@
   },
   "dependencies": {
     "@builder.io/qwik": "^1.12.0",
-    "@tsparticles/qwik": "^4.1.3"
+    "@tsparticles/qwik": "^4.4.0"
   },
   "devDependencies": {
     "typescript": "~5.7.0",
-    "vite": "^6.0.0"
+    "vite": "^7.3.6"
   }
 }

package/template/qwik/src/App.tsx

@@ -1,8 +1,8 @@
-import { component$, useSignal, $ } from "@builder.io/qwik";
-import Particles from "@tsparticles/qwik";
+import { component$, useSignal, useVisibleTask$, $ } from "@builder.io/qwik";
+import { Particles, initParticlesEngine } from "@tsparticles/qwik";
 import { loadSlim } from "@tsparticles/slim";
 import { confetti } from "@tsparticles/confetti";
-import type { Engine, ISourceOptions } from "@tsparticles/engine";
+import type { ISourceOptions } from "@tsparticles/engine";
 
 type Player = "X" | "O";
 
@@ -36,10 +36,6 @@ function fireConfettiEffect() {
   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" } },
@@ -64,6 +60,12 @@ interface GameState {
 }
 
 export default component$(() => {
+  useVisibleTask$(() => {
+    void initParticlesEngine(async (engine) => {
+      await loadSlim(engine);
+    });
+  });
+
   const state = useSignal<GameState>({
     board: Array(9).fill(null),
     currentPlayer: "X",
@@ -105,7 +107,7 @@ export default component$(() => {
 
   return (
     <>
-      <Particles init={init} id="tsparticles" options={particlesOptions} />
+      <Particles id="tsparticles" options={particlesOptions} />
       <div id="app">
         <h1>Tic-Tac-Toe</h1>
         <div class="scoreboard">

package/template/react/package.json

@@ -11,9 +11,11 @@
   "dependencies": {
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
-    "@tsparticles/react": "^4.1.3"
+    "@tsparticles/react": "^4.4.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-react": "^6.0.1"
+    "@vitejs/plugin-react": "^6.0.1",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3"
   }
 }

package/template/riot/package.json

@@ -9,12 +9,16 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "riot": "^10.0.0",
-    "@tsparticles/riot": "^4.1.3"
+    "riot": "^10.1.6",
+    "@tsparticles/riot": "^4.4.0",
+    "@tsparticles/confetti": "^4.4.0",
+    "@tsparticles/engine": "^4.4.0",
+    "@tsparticles/slim": "^4.4.0"
   },
   "devDependencies": {
+    "@riotjs/compiler": "^10.0.4",
     "rollup-plugin-riot": "^10.0.0",
-    "vite": "^6.0.0",
-    "typescript": "~5.7.0"
+    "typescript": "^5.7.2",
+    "vite": "^8.3.5"
   }
 }

package/template/riot/src/app.riot

@@ -9,10 +9,10 @@
     </div>
     <div class="turn">{ statusText }</div>
     <div class="board">
-      <div each="{ cell, i in state.board }"
-        class="cell{ cell ? ' taken' : '' }{ state.winLine && state.winLine.includes(i) ? ' win' : '' }"
-        onclick="{ () => handleMove(i) }">
-        { cell }
+      <div each="{ square in state.squares }"
+        class="cell{ square.value ? ' taken' : '' }{ state.winLine && state.winLine.includes(square.index) ? ' win' : '' }"
+        onclick="{ () => handleMove(square.index) }">
+        { square.value }
       </div>
     </div>
     <button class="reset-btn" onclick="{ handleReset }">New Game</button>
@@ -36,6 +36,9 @@
         winner: null,
         winLine: null,
         scores: { X: 0, O: 0, draw: 0 },
+        get squares() {
+          return this.board.map((value, index) => ({ value, index }));
+        },
       },
       get statusText() {
         const w = this.state.winner;

package/template/solid/package.json

@@ -10,9 +10,9 @@
   },
   "dependencies": {
     "solid-js": "^1.8.11",
-    "@tsparticles/solid": "^4.1.3"
+    "@tsparticles/solid": "^4.4.0"
   },
   "devDependencies": {
-    "vite-plugin-solid": "^2.8.2"
+    "vite-plugin-solid": "^2.11.14"
   }
 }

package/template/stencil/package.json

@@ -9,6 +9,6 @@
   },
   "dependencies": {
     "@stencil/core": "^4.20.0",
-    "@tsparticles/stencil": "^4.1.3"
+    "@tsparticles/stencil": "^4.4.0"
   }
 }

package/template/stencil/src/components/app-home/app-home.tsx

@@ -1,6 +1,7 @@
 import { Component, State, h } from "@stencil/core";
 import { confetti } from "@tsparticles/confetti";
-import type { ISourceOptions } from "@tsparticles/engine";
+import { loadSlim } from "@tsparticles/slim";
+import type { Engine, ISourceOptions } from "@tsparticles/engine";
 
 type Player = "X" | "O";
 
@@ -61,6 +62,10 @@ export class AppHome {
   @State() winLine: number[] | null = null;
   @State() scores = { X: 0, O: 0, draw: 0 };
 
+  private async particlesInit(engine: Engine): Promise<void> {
+    await loadSlim(engine);
+  }
+
   get status(): string {
     if (!this.winner) return `${this.currentPlayer}'s turn`;
     if (this.winner === "draw") return "It's a draw!";
@@ -95,7 +100,11 @@ export class AppHome {
   render() {
     return (
       <div>
-        <stencil-particles id="tsparticles" options={particlesOptions} />
+        <stencil-particles
+          container-id="tsparticles"
+          init={this.particlesInit.bind(this)}
+          options={particlesOptions}
+        />
         <div id="app">
           <h1>Tic-Tac-Toe</h1>
           <div class="scoreboard">

package/template/svelte/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tsparticles/svelte": "^4.1.3"
+    "@tsparticles/svelte": "^4.4.0"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^5.0.3",

package/template/vanilla/src/game/board.ts

@@ -1,4 +1,4 @@
-import { type GameState, makeMove } from "./game-state";
+import type { GameState } from "./game-state";
 import { fireConfetti } from "./confetti-effect";
 
 const boardEl = document.getElementById("board") as HTMLDivElement;

package/template/vue2/package.json

@@ -9,11 +9,11 @@
   },
   "dependencies": {
     "vue": "^2.7.16",
-    "@tsparticles/vue2": "^4.1.3"
+    "@tsparticles/vue2": "^4.4.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue2": "^2.3.1",
-    "vite": "^6.0.0",
+    "@vitejs/plugin-vue2": "^2.3.4",
+    "vite": "^7.3.6",
     "vue-template-compiler": "^2.7.16"
   }
 }

package/template/vue3/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "vue": "^3.5.32",
-    "@tsparticles/vue3": "^4.1.3"
+    "@tsparticles/vue3": "^4.4.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.5",

package/template/webcomponents/index.html

@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{projectName}}</title>
+  </head>
+  <body>
+    <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 id="turnIndicator" class="turn">X's turn</div>
+      <div id="board" class="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 id="resetBtn" class="reset-btn">New Game</button>
+    </div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/template/webcomponents/package.json

@@ -9,10 +9,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@tsparticles/webcomponents": "^4.1.3"
+    "@tsparticles/webcomponents": "^4.4.0"
   },
   "devDependencies": {
     "typescript": "~5.7.0",
-    "vite": "^6.0.0"
+    "vite": "^8.3.5"
   }
 }

package/template/webcomponents/src/main.ts

@@ -53,7 +53,7 @@ function fireConfettiEffect(): void {
 
 function render(): void {
   const boardEl = document.getElementById("board") as HTMLDivElement;
-  const turnEl = document.getElementById("turn") as HTMLDivElement;
+  const turnEl = document.querySelector(".turn") as HTMLDivElement;
   const scoreX = document.getElementById("scoreX") as HTMLSpanElement;
   const scoreO = document.getElementById("scoreO") as HTMLSpanElement;
   const scoreDraw = document.getElementById("scoreDraw") as HTMLSpanElement;

package/template.json

@@ -1,13 +1,13 @@
 {
   "package": {
     "dependencies": {
-      "@tsparticles/engine": "^4.4.0",
-      "@tsparticles/slim": "^4.4.0",
-      "@tsparticles/confetti": "^4.4.0"
+      "@tsparticles/engine": "^4.5.1",
+      "@tsparticles/slim": "^4.5.1",
+      "@tsparticles/confetti": "^4.5.1"
     },
     "devDependencies": {
       "typescript": "^6.0.3",
-      "vite": "^8.1.0"
+      "vite": "^8.3.5"
     }
   }
-}
+}