@tsparticles/template-tictactoe 4.1.3 → 4.2.0

package/template/jquery/package.json

@@ -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": {
+    "jquery": "^3.7.1",
+    "@tsparticles/jquery": "^4.1.3"
+  },
+  "devDependencies": {
+    "@types/jquery": "^3.5.30",
+    "typescript": "~5.7.0",
+    "vite": "^6.0.0"
+  }
+}

package/template/jquery/src/main.ts

@@ -0,0 +1,126 @@
+import "./style.css";
+import $ from "jquery";
+import "@tsparticles/jquery";
+import { loadSlim } from "@tsparticles/slim";
+import { confetti } from "@tsparticles/confetti";
+
+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],
+];
+
+interface GameState {
+  board: (Player | null)[];
+  currentPlayer: Player;
+  winner: Player | "draw" | null;
+  winLine: number[] | null;
+  scores: { X: number; O: number; draw: number };
+}
+
+let state: GameState = {
+  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(): 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 });
+}
+
+function render(): void {
+  const $cells = $(".cell");
+  $cells.each((i, el) => {
+    const $el = $(el);
+    $el.text(state.board[i] ?? "");
+    $el.toggleClass("taken", state.board[i] !== null);
+    $el.toggleClass("win", state.winLine?.includes(i) ?? false);
+  });
+
+  const $turn = $("#turn");
+  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!`);
+
+  $("#scoreX").text(String(state.scores.X));
+  $("#scoreO").text(String(state.scores.O));
+  $("#scoreDraw").text(String(state.scores.draw));
+}
+
+function handleMove(index: number): void {
+  if (state.board[index] || state.winner) return;
+  const board = [...state.board];
+  board[index] = state.currentPlayer;
+  const result = checkWin(board);
+  if (result) {
+    state = { ...state, board, winner: result.winner, winLine: result.winLine };
+    if (result.winner === "draw") state.scores.draw++;
+    else state.scores[result.winner]++;
+    if (result.winner !== "draw") setTimeout(fireConfettiEffect, 100);
+  } else {
+    state = { ...state, board, currentPlayer: state.currentPlayer === "X" ? "O" : "X" };
+  }
+  render();
+}
+
+function handleReset(): void {
+  state = {
+    ...state,
+    board: Array(9).fill(null),
+    currentPlayer: "X",
+    winner: null,
+    winLine: null,
+  };
+  render();
+}
+
+$(document).ready(async () => {
+  $("#board").on("click", ".cell", function () {
+    const index = parseInt($(this).data("index") as string, 10);
+    if (!isNaN(index)) handleMove(index);
+  });
+
+  $("#resetBtn").on("click", handleReset);
+
+  render();
+
+  await loadSlim($("#tsparticles").particles() as any);
+  $("#tsparticles").particles({
+    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,
+  });
+});

package/template/jquery/src/style.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/lit/package.json

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

package/template/lit/src/my-app.ts

@@ -0,0 +1,133 @@
+import { LitElement, html, css } from "lit";
+import { state } from "lit/decorators.js";
+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],
+];
+
+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(): 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 });
+}
+
+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 class MyApp extends LitElement {
+  @state() private board: (Player | null)[] = Array(9).fill(null);
+  @state() private currentPlayer: Player = "X";
+  @state() private winner: Player | "draw" | null = null;
+  @state() private winLine: number[] | null = null;
+  @state() private scores = { X: 0, O: 0, draw: 0 };
+
+  get status(): string {
+    if (!this.winner) return `${this.currentPlayer}'s turn`;
+    if (this.winner === "draw") return "It's a draw!";
+    return `${this.winner} wins!`;
+  }
+
+  handleMove(index: number): void {
+    if (this.board[index] || this.winner) return;
+    const board = [...this.board];
+    board[index] = this.currentPlayer;
+    const result = 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(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;
+  }
+
+  render() {
+    return html`
+      <lit-particles id="tsparticles" .options=${particlesOptions}></lit-particles>
+      <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">
+          ${this.board.map((cell, i) => html`
+            <div
+              class="cell${cell ? " taken" : ""}${this.winLine?.includes(i) ? " win" : ""}"
+              @click=${() => this.handleMove(i)}
+            >
+              ${cell ?? ""}
+            </div>
+          `)}
+        </div>
+        <button class="reset-btn" @click=${this.handleReset}>New Game</button>
+      </div>
+    `;
+  }
+
+  static styles = css`
+    :host { display: block; }
+    #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); }
+  `;
+}
+
+customElements.define("my-app", MyApp);

package/template/nextjs/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "preview": "next start"
+  },
+  "dependencies": {
+    "next": "^15.0.0",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "@tsparticles/react": "^4.1.3"
+  },
+  "devDependencies": {
+    "typescript": "~5.7.0"
+  }
+}

package/template/nextjs/src/app/page.tsx

@@ -0,0 +1,173 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import Particles from "@tsparticles/react";
+import { confetti } from "@tsparticles/confetti";
+import type { ISourceOptions } from "@tsparticles/engine";
+import Providers from "./providers";
+
+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 });
+}
+
+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 function Home() {
+  const [state, setState] = useState<GameState>(createInitialState);
+
+  const handleMove = useCallback((index: number) => {
+    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" };
+    });
+  }, []);
+
+  function handleReset() {
+    setState((prev) => ({
+      ...prev,
+      board: Array(9).fill(null),
+      currentPlayer: "X",
+      winner: null,
+      winLine: null,
+    }));
+  }
+
+  const status = state.winner
+    ? state.winner === "draw" ? "It's a draw!" : `${state.winner} wins!`
+    : `${state.currentPlayer}'s turn`;
+
+  return (
+    <Providers>
+      <Particles id="tsparticles" options={particlesOptions} />
+      <div id="app" style={{
+        textAlign: "center", zIndex: 10, padding: "1rem",
+      }}>
+        <h1 style={{
+          fontSize: "2.5em", marginBottom: "1rem",
+          background: "linear-gradient(135deg, #6c5ce7, #fd79a8)",
+          WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
+          backgroundClip: "text",
+        }}>
+          Tic-Tac-Toe
+        </h1>
+        <div className="scoreboard" style={{
+          display: "flex", justifyContent: "center", gap: "2rem",
+          marginBottom: "1rem", fontSize: "1.1em", opacity: 0.8,
+        }}>
+          <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" style={{ fontSize: "1.2em", marginBottom: "1rem", opacity: 0.7 }}>
+          {status}
+        </div>
+        <div className="board" style={{
+          display: "grid", gridTemplateColumns: "repeat(3, 100px)",
+          gridTemplateRows: "repeat(3, 100px)", gap: "4px",
+          background: "rgba(255,255,255,0.1)", borderRadius: "12px",
+          overflow: "hidden", margin: "0 auto", width: "fit-content",
+        }}>
+          {state.board.map((cell, i) => (
+            <div
+              key={i}
+              style={{
+                display: "flex", alignItems: "center", justifyContent: "center",
+                fontSize: "2.5em", fontWeight: 700, background: "#12122a",
+                cursor: cell ? "default" : "pointer", transition: "background 0.2s",
+                userSelect: "none", color: "#fff",
+                ...(state.winLine?.includes(i) ? { background: "rgba(108,92,231,0.3)" } : {}),
+              }}
+              onClick={() => handleMove(i)}
+            >
+              {cell}
+            </div>
+          ))}
+        </div>
+        <button
+          style={{
+            marginTop: "1.5rem", padding: "0.7em 2em", fontSize: "1em",
+            fontWeight: 600, border: "none", borderRadius: "8px",
+            background: "linear-gradient(135deg, #6c5ce7, #a29bfe)",
+            color: "#fff", cursor: "pointer", transition: "transform 0.2s",
+          }}
+          onClick={handleReset}
+        >
+          New Game
+        </button>
+      </div>
+    </Providers>
+  );
+}

package/template/nextjs/src/app/providers.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import { ParticlesProvider } from "@tsparticles/react";
+import { loadSlim } from "@tsparticles/slim";
+import type { Engine } from "@tsparticles/engine";
+
+async function init(engine: Engine): Promise<void> {
+  await loadSlim(engine);
+}
+
+export default function Providers({ children }: { children: React.ReactNode }) {
+  return <ParticlesProvider init={init}>{children}</ParticlesProvider>;
+}

package/template/nuxt2/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "{{projectName}}",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "preview": "nuxt start"
+  },
+  "dependencies": {
+    "nuxt": "^2.19.0",
+    "@tsparticles/vue2": "^4.1.3"
+  }
+}