@tsparticles/template-tictactoe 4.1.3 → 4.2.1

package/template/vue3/src/App.vue

@@ -0,0 +1,215 @@
+<script setup lang="ts">
+import { reactive, computed } from "vue";
+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],
+];
+
+const state = reactive({
+  board: Array(9).fill(null) as (Player | null)[],
+  currentPlayer: "X" as Player,
+  winner: null as Player | "draw" | null,
+  winLine: null as number[] | null,
+  scores: { X: 0, O: 0, draw: 0 },
+});
+
+const status = computed(() => {
+  if (!state.winner) return `${state.currentPlayer}'s turn`;
+  if (state.winner === "draw") return "It's a draw!";
+  return `${state.winner} wins!`;
+});
+
+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 });
+}
+
+function handleMove(index: number) {
+  if (state.board[index] || state.winner) return;
+  const board = [...state.board];
+  board[index] = state.currentPlayer;
+  const result = checkWin(board);
+  if (result) {
+    state.board = board;
+    state.winner = result.winner;
+    state.winLine = result.winLine;
+    if (result.winner === "draw") state.scores.draw++;
+    else state.scores[result.winner]++;
+    if (result.winner !== "draw") setTimeout(fireConfettiEffect, 100);
+  } else {
+    state.board = board;
+    state.currentPlayer = state.currentPlayer === "X" ? "O" : "X";
+  }
+}
+
+function handleReset() {
+  state.board = Array(9).fill(null);
+  state.currentPlayer = "X";
+  state.winner = null;
+  state.winLine = null;
+}
+
+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,
+};
+</script>
+
+<template>
+  <vue-particles id="tsparticles" :options="particlesOptions" />
+  <div id="app">
+    <h1>Tic-Tac-Toe</h1>
+    <div class="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 class="turn">{{ status }}</div>
+    <div class="board">
+      <div
+        v-for="(cell, i) in state.board"
+        :key="i"
+        :class="['cell', { taken: cell, win: state.winLine?.includes(i) }]"
+        @click="handleMove(i)"
+      >
+        {{ cell }}
+      </div>
+    </div>
+    <button class="reset-btn" @click="handleReset">New Game</button>
+  </div>
+</template>
+
+<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/vue3/src/main.ts

@@ -0,0 +1,14 @@
+import { createApp } from "vue";
+import Particles from "@tsparticles/vue3";
+import { loadSlim } from "@tsparticles/slim";
+import App from "./App.vue";
+
+const app = createApp(App);
+
+app.use(Particles, {
+  init: async (engine) => {
+    await loadSlim(engine);
+  },
+});
+
+app.mount("#app");

package/template/webcomponents/package.json

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

package/template/webcomponents/src/main.ts

@@ -0,0 +1,134 @@
+import "./style.css";
+import { confetti } from "@tsparticles/confetti";
+import { tsParticles } from "@tsparticles/engine";
+import { loadSlim } from "@tsparticles/slim";
+
+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 boardEl = document.getElementById("board") as HTMLDivElement;
+  const turnEl = document.getElementById("turn") as HTMLDivElement;
+  const scoreX = document.getElementById("scoreX") as HTMLSpanElement;
+  const scoreO = document.getElementById("scoreO") as HTMLSpanElement;
+  const scoreDraw = document.getElementById("scoreDraw") as HTMLSpanElement;
+
+  const cells = boardEl.querySelectorAll(".cell");
+  cells.forEach((cell, i) => {
+    cell.textContent = state.board[i] ?? "";
+    cell.classList.toggle("taken", state.board[i] !== null);
+    cell.classList.toggle("win", state.winLine?.includes(i) ?? false);
+  });
+
+  if (!state.winner) turnEl.textContent = `${state.currentPlayer}'s turn`;
+  else if (state.winner === "draw") turnEl.textContent = "It's a draw!";
+  else turnEl.textContent = `${state.winner} wins!`;
+
+  scoreX.textContent = String(state.scores.X);
+  scoreO.textContent = String(state.scores.O);
+  scoreDraw.textContent = 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.getElementById("board")?.addEventListener("click", (e) => {
+  const cell = (e.target as HTMLElement).closest(".cell") as HTMLElement | null;
+  if (!cell) return;
+  const index = parseInt(cell.dataset.index ?? "", 10);
+  if (!isNaN(index)) handleMove(index);
+});
+
+document.getElementById("resetBtn")?.addEventListener("click", handleReset);
+
+render();
+
+(async () => {
+  await loadSlim(tsParticles);
+  await tsParticles.load({
+    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,
+    },
+  });
+})();

package/template/webcomponents/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);
+}