@jjlmoya/utils-sports 1.18.0 → 1.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-sports",
-    "version": "1.18.0",
+    "version": "1.20.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/category/index.ts

@@ -5,6 +5,7 @@ import { scoreKeeper } from '../tool/scoreKeeper/index';
 import { tournamentBracket } from '../tool/tournamentBracket/index';
 import { gymTracker } from '../tool/gymTracker/index';
 import { reactionTester } from '../tool/reactionTester/index';
+import { pingPongScoreKeeper } from '../tool/pingPongScoreKeeper/index';
 
 export const sportsCategory: SportsCategoryEntry = {
   icon: 'mdi:soccer',
@@ -15,6 +16,7 @@ export const sportsCategory: SportsCategoryEntry = {
     tournamentBracket,
     gymTracker,
     reactionTester,
+    pingPongScoreKeeper,
   ] as unknown as SportsToolEntry<Record<string, string>>[],
   i18n: {
     es: () => import('./i18n/es').then((m) => m.content),

package/src/entries.ts

@@ -4,17 +4,23 @@ export { footballScoreKeeper } from './tool/footballScoreKeeper/entry';
 export type { FootballScoreKeeperLocaleContent } from './tool/footballScoreKeeper/entry';
 export { gymTracker } from './tool/gymTracker/entry';
 export type { GymTrackerLocaleContent } from './tool/gymTracker/entry';
+export { pingPongScoreKeeper } from './tool/pingPongScoreKeeper/entry';
+export type { PingPongScoreKeeperLocaleContent } from './tool/pingPongScoreKeeper/entry';
 export { reactionTester } from './tool/reactionTester/entry';
 export type { ReactionTesterLocaleContent } from './tool/reactionTester/entry';
 export { scoreKeeper } from './tool/scoreKeeper/entry';
 export type { ScoreKeeperLocaleContent } from './tool/scoreKeeper/entry';
 export { tournamentBracket } from './tool/tournamentBracket/entry';
 export type { TournamentBracketLocaleContent } from './tool/tournamentBracket/entry';
+export { tennisScoreKeeper } from './tool/tennisScoreKeeper/entry';
+export type { TennisScoreKeeperLocaleContent } from './tool/tennisScoreKeeper/entry';
 export { sportsCategory } from './category';
 import { basketScoreKeeper } from './tool/basketScoreKeeper/entry';
 import { footballScoreKeeper } from './tool/footballScoreKeeper/entry';
 import { gymTracker } from './tool/gymTracker/entry';
+import { pingPongScoreKeeper } from './tool/pingPongScoreKeeper/entry';
 import { reactionTester } from './tool/reactionTester/entry';
 import { scoreKeeper } from './tool/scoreKeeper/entry';
 import { tournamentBracket } from './tool/tournamentBracket/entry';
-export const ALL_ENTRIES = [basketScoreKeeper, footballScoreKeeper, gymTracker, reactionTester, scoreKeeper, tournamentBracket];
+import { tennisScoreKeeper } from './tool/tennisScoreKeeper/entry';
+export const ALL_ENTRIES = [basketScoreKeeper, footballScoreKeeper, gymTracker, pingPongScoreKeeper, reactionTester, scoreKeeper, tournamentBracket, tennisScoreKeeper];

package/src/tests/locale_completeness.test.ts

@@ -3,6 +3,6 @@ import { ALL_TOOLS } from '../tools';
 
 describe('Locale Completeness Validation', () => {
   it('all tools registered', () => {
-    expect(ALL_TOOLS.length).toBe(6);
+    expect(ALL_TOOLS.length).toBe(8);
   });
 });

package/src/tests/tool_validation.test.ts

@@ -4,8 +4,8 @@ import { sportsCategory } from '../data';
 
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
-    it('should have 6 tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(6);
+    it('should have 8 tools in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBe(8);
     });
 
     it('sportsCategory should be defined', () => {

package/src/tool/pingPongScoreKeeper/bibliography.astro

@@ -0,0 +1,6 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { bibliography } from './bibliography';
+---
+
+<SharedBibliography links={bibliography} />

package/src/tool/pingPongScoreKeeper/bibliography.ts

@@ -0,0 +1,8 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'ITTF Table Tennis Rules',
+    url: 'https://documents.ittf.sport/sites/default/files/public/2026-02/2026_Statutes_v1_consolidated_clean.pdf',
+  },
+];

package/src/tool/pingPongScoreKeeper/component.astro

@@ -0,0 +1,124 @@
+---
+import type { KnownLocale } from '../../types';
+import type { PingPongScoreKeeperUI } from './ui';
+
+interface Props {
+  locale?: KnownLocale;
+  ui?: Record<string, unknown>;
+}
+
+const { ui } = Astro.props;
+const t = (ui ?? {}) as PingPongScoreKeeperUI;
+---
+
+<div class="pp-card" id="pp-card" data-pp-ui={JSON.stringify(t)}>
+  <div class="pp-bar">
+    <button class="pp-bar-btn" data-pp-fs>
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>
+    </button>
+    <div class="pp-mode">
+      <button class="pp-mode-btn" data-mode-bo1>{t.bo1}</button>
+      <button class="pp-mode-btn" data-mode-bo3>{t.bo3}</button>
+      <button class="pp-mode-btn pp-mode-active" data-mode-bo5>{t.bo5}</button>
+      <button class="pp-mode-btn" data-mode-bo7>{t.bo7}</button>
+    </div>
+    <button class="pp-bar-btn" data-pp-reset>
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
+      </svg>
+    </button>
+  </div>
+
+  <div class="pp-board" id="pp-board">
+    <div class="pp-side pp-side-a" id="pp-side-a">
+      <div id="pp-particles-a" class="pp-particles"></div>
+      <svg class="pp-ball" id="pp-ball-a" viewBox="0 0 60 60" fill="none">
+        <circle cx="30" cy="30" r="28" fill="currentcolor" opacity="0.12"/>
+        <path d="M12 12 Q30 50 48 48" stroke="currentcolor" stroke-width="0.8" opacity="0.08" fill="none"/>
+        <path d="M12 48 Q30 10 48 12" stroke="currentcolor" stroke-width="0.8" opacity="0.08" fill="none"/>
+      </svg>
+      <div class="pp-name-wrap">
+        <input type="text" value={t.playerA} class="pp-name" id="pp-name-a" list="pp-names-a" />
+        <datalist id="pp-names-a"></datalist>
+        <svg class="pp-pencil" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round"><path d="M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg>
+      </div>
+      <div class="pp-dots" id="pp-dots-a"></div>
+      <div class="pp-score pp-score-a" id="pp-score-a">0</div>
+      <button class="pp-btn-plus pp-btn-plus-a" data-pp-a>+</button>
+      <button class="pp-btn-minus pp-btn-minus-a" data-minus-a>&minus;</button>
+    </div>
+    <div class="pp-side pp-side-b" id="pp-side-b">
+      <div id="pp-particles-b" class="pp-particles"></div>
+      <svg class="pp-ball" id="pp-ball-b" viewBox="0 0 60 60" fill="none">
+        <circle cx="30" cy="30" r="28" fill="currentcolor" opacity="0.12"/>
+        <path d="M12 12 Q30 50 48 48" stroke="currentcolor" stroke-width="0.8" opacity="0.08" fill="none"/>
+        <path d="M12 48 Q30 10 48 12" stroke="currentcolor" stroke-width="0.8" opacity="0.08" fill="none"/>
+      </svg>
+      <div class="pp-name-wrap">
+        <input type="text" value={t.playerB} class="pp-name" id="pp-name-b" list="pp-names-b" />
+        <datalist id="pp-names-b"></datalist>
+        <svg class="pp-pencil" viewBox="0 0 24 24" fill="none" stroke="currentcolor" stroke-width="2" stroke-linecap="round"><path d="M17 3a2.85 2.85 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg>
+      </div>
+      <div class="pp-dots" id="pp-dots-b"></div>
+      <div class="pp-score pp-score-b" id="pp-score-b">0</div>
+      <button class="pp-btn-plus pp-btn-plus-b" data-pp-b>+</button>
+      <button class="pp-btn-minus pp-btn-minus-b" data-minus-b>&minus;</button>
+    </div>
+  </div>
+
+  <div class="pp-status" id="pp-status"></div>
+
+  <div class="pp-actions">
+    <button class="pp-action" data-pp-new>{t.newGame}</button>
+  </div>
+
+  <div class="pp-history" id="pp-history"></div>
+
+  <div id="pp-swap" class="pp-swap">
+    <div class="pp-swap-bg"></div>
+    <div class="pp-swap-box" data-pp-swap>
+      <div class="pp-swap-icon">
+        <svg viewBox="0 0 48 48" fill="none" stroke="currentcolor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" width="40" height="40">
+          <path d="M12 36L6 30M6 30L12 24M6 30H36"/>
+          <path d="M36 12L42 18M42 18L36 24M42 18H12"/>
+        </svg>
+      </div>
+      <div class="pp-swap-text">{t.changeSide}</div>
+      <div class="pp-swap-sub">{t.swapHint}</div>
+    </div>
+  </div>
+
+  <div id="pp-winner" class="pp-winner">
+    <div class="pp-winner-bg" data-close-winner></div>
+    <div class="pp-winner-box">
+      <button class="pp-winner-close" data-close-winner>&times;</button>
+      <div class="pp-winner-cup">
+        <svg viewBox="0 0 64 64" fill="currentcolor" width="40" height="40">
+          <path d="M8 48l8-32 12 16 4-24 4 24 12-16 8 32z"/>
+          <rect x="12" y="48" width="40" height="6" rx="2"/>
+        </svg>
+      </div>
+      <div class="pp-winner-label">{t.winnerLabel}</div>
+      <div id="pp-winner-team" class="pp-winner-team">Player 1</div>
+      <div id="pp-winner-score" class="pp-winner-score">0 &minus; 0</div>
+    </div>
+  </div>
+
+  <div id="pp-confetti" class="pp-confetti"></div>
+
+  <div id="pp-modal" class="pp-modal">
+    <div class="pp-modal-bg"></div>
+    <div class="pp-modal-box">
+      <p class="pp-modal-text">{t.resetConfirm}</p>
+      <div class="pp-modal-btns">
+        <button id="pp-modal-cancel" class="pp-modal-btn pp-modal-btn-cancel">{t.cancel}</button>
+        <button id="pp-modal-confirm" class="pp-modal-btn pp-modal-btn-reset">{t.reset}</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  import { initPingPongScoreKeeper } from './logic';
+  initPingPongScoreKeeper();
+</script>

package/src/tool/pingPongScoreKeeper/entry.ts

@@ -0,0 +1,31 @@
+import type { SportsToolEntry, ToolLocaleContent } from '../../types';
+
+import type { PingPongScoreKeeperUI } from './ui';
+
+export type { PingPongScoreKeeperUI };
+export type PingPongScoreKeeperLocaleContent = ToolLocaleContent<PingPongScoreKeeperUI>;
+
+export const pingPongScoreKeeper: SportsToolEntry<PingPongScoreKeeperUI> = {
+  id: 'ping-pong-scorekeeper',
+  icons: {
+    bg: 'mdi:table-tennis',
+    fg: 'mdi:scoreboard-outline',
+  },
+  i18n: {
+    en: () => import('./i18n/en').then((m) => m.content),
+    es: () => import('./i18n/es').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+    de: () => import('./i18n/de').then((m) => m.content),
+    id: () => import('./i18n/id').then((m) => m.content),
+    it: () => import('./i18n/it').then((m) => m.content),
+    ja: () => import('./i18n/ja').then((m) => m.content),
+    ko: () => import('./i18n/ko').then((m) => m.content),
+    nl: () => import('./i18n/nl').then((m) => m.content),
+    pl: () => import('./i18n/pl').then((m) => m.content),
+    pt: () => import('./i18n/pt').then((m) => m.content),
+    ru: () => import('./i18n/ru').then((m) => m.content),
+    sv: () => import('./i18n/sv').then((m) => m.content),
+    tr: () => import('./i18n/tr').then((m) => m.content),
+    zh: () => import('./i18n/zh').then((m) => m.content),
+  },
+};

package/src/tool/pingPongScoreKeeper/game-logic.ts

@@ -0,0 +1,120 @@
+export const POINTS_TO_WIN_GAME = 11;
+export const MIN_POINT_LEAD = 2;
+
+export type PlayerSide = 'a' | 'b';
+export type MatchFormat = 'bo1' | 'bo3' | 'bo5' | 'bo7';
+
+export interface MatchScore {
+  currentGamePointsA: number;
+  currentGamePointsB: number;
+  gamesWonByA: number;
+  gamesWonByB: number;
+  servingPlayer: PlayerSide;
+  servesSinceLastChange: number;
+  format: MatchFormat;
+  areSidesSwapped: boolean;
+}
+
+export function createInitialScore(): MatchScore {
+  return {
+    currentGamePointsA: 0,
+    currentGamePointsB: 0,
+    gamesWonByA: 0,
+    gamesWonByB: 0,
+    servingPlayer: 'a',
+    servesSinceLastChange: 0,
+    format: 'bo5',
+    areSidesSwapped: false,
+  };
+}
+
+export function gamesNeededForMatchWin(format: MatchFormat): number {
+  if (format === 'bo1') return 1;
+  if (format === 'bo3') return 2;
+  if (format === 'bo5') return 3;
+  return 4;
+}
+
+export function checkGameOver(score: MatchScore): PlayerSide | null {
+  if (score.currentGamePointsA >= POINTS_TO_WIN_GAME && score.currentGamePointsA - score.currentGamePointsB >= MIN_POINT_LEAD) return 'a';
+  if (score.currentGamePointsB >= POINTS_TO_WIN_GAME && score.currentGamePointsB - score.currentGamePointsA >= MIN_POINT_LEAD) return 'b';
+  return null;
+}
+
+export function checkMatchOver(score: MatchScore): PlayerSide | null {
+  const need = gamesNeededForMatchWin(score.format);
+  if (score.gamesWonByA >= need) return 'a';
+  if (score.gamesWonByB >= need) return 'b';
+  return null;
+}
+
+export function checkGamePointOpportunity(score: MatchScore): PlayerSide | null {
+  if (score.currentGamePointsA >= POINTS_TO_WIN_GAME - 1 && score.currentGamePointsA > score.currentGamePointsB) return 'a';
+  if (score.currentGamePointsB >= POINTS_TO_WIN_GAME - 1 && score.currentGamePointsB > score.currentGamePointsA) return 'b';
+  return null;
+}
+
+function isOneGameAway(leader: number, trailing: number, need: number): boolean {
+  return leader >= need - 1 && leader > trailing;
+}
+
+function isAtGamePoint(leaderPoints: number, trailingPoints: number): boolean {
+  return leaderPoints >= POINTS_TO_WIN_GAME - 1 && leaderPoints > trailingPoints;
+}
+
+export function checkMatchPointOpportunity(score: MatchScore): PlayerSide | null {
+  const need = gamesNeededForMatchWin(score.format);
+  if (isOneGameAway(score.gamesWonByA, score.gamesWonByB, need) && isAtGamePoint(score.currentGamePointsA, score.currentGamePointsB)) return 'a';
+  if (isOneGameAway(score.gamesWonByB, score.gamesWonByA, need) && isAtGamePoint(score.currentGamePointsB, score.currentGamePointsA)) return 'b';
+  return null;
+}
+
+export function awardPointToPlayer(score: MatchScore, side: PlayerSide): MatchScore {
+  if (checkMatchOver(score)) return score;
+  const next = { ...score };
+  if (side === 'a') next.currentGamePointsA += 1;
+  else next.currentGamePointsB += 1;
+  next.servesSinceLastChange += 1;
+  if (next.servesSinceLastChange >= 2) {
+    next.servingPlayer = next.servingPlayer === 'a' ? 'b' : 'a';
+    next.servesSinceLastChange = 0;
+  }
+  return next;
+}
+
+export function undoLastPoint(score: MatchScore, side: PlayerSide): MatchScore {
+  if (checkMatchOver(score)) return score;
+  const next = { ...score };
+  if (side === 'a' && next.currentGamePointsA > 0) next.currentGamePointsA -= 1;
+  else if (side === 'b' && next.currentGamePointsB > 0) next.currentGamePointsB -= 1;
+  else return score;
+  if (next.servesSinceLastChange > 0) next.servesSinceLastChange -= 1;
+  return next;
+}
+
+export function concludeGame(score: MatchScore, gameWinner: PlayerSide): MatchScore {
+  const next = { ...score };
+  if (gameWinner === 'a') next.gamesWonByA += 1;
+  else next.gamesWonByB += 1;
+  next.currentGamePointsA = 0;
+  next.currentGamePointsB = 0;
+  next.servesSinceLastChange = 0;
+  next.servingPlayer = next.servingPlayer === 'a' ? 'b' : 'a';
+  return next;
+}
+
+export function swapPlayerSides(score: MatchScore): MatchScore {
+  return {
+    ...score,
+    gamesWonByA: score.gamesWonByB,
+    gamesWonByB: score.gamesWonByA,
+    currentGamePointsA: 0,
+    currentGamePointsB: 0,
+    servesSinceLastChange: 0,
+    areSidesSwapped: !score.areSidesSwapped,
+  };
+}
+
+export function createCleanMatch(score: MatchScore): MatchScore {
+  return { ...createInitialScore(), format: score.format };
+}

package/src/tool/pingPongScoreKeeper/i18n/de.ts

@@ -0,0 +1,201 @@
+import { bibliography } from '../bibliography';
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { PingPongScoreKeeperUI } from '../ui';
+
+const slug = 'tischtennis-punktestand';
+const title = 'Tischtennis Punktestand Online : Kostenloser Table Tennis Tracker';
+const description =
+  'Verfolge Tischtennis-Matches mit Spiel- und Satzpunktzählung. Kostenloser Online-Punktestand für Trainingsspiele und Turniere. Keine Anmeldung nötig.';
+
+const faqData = [
+  {
+    question: 'Wie funktioniert die Zählweise beim Tischtennis?',
+    answer:
+      'Ein normales Tischtennisspiel wird bis 11 Punkte gespielt. Du musst mit 2 Punkten Vorsprung gewinnen. Bei 10:10 wird weitergespielt, bis jemand mit 2 Punkten führt. Der Aufschlag wechselt alle 2 Punkte. Dieser Punktestand verfolgt all das automatisch.',
+  },
+  {
+    question: 'Wie benutze ich diesen Punktestand?',
+    answer:
+      'Drücke die +-Taste unter jedem Spieler, um einen Punkt zu vergeben. Der Spielstand aktualisiert sich automatisch. Wenn ein Spieler 11 Punkte mit 2 Punkten Vorsprung erreicht, endet das Spiel und ein neues beginnt. Der Spielstandsanzeiger zeigt, wie viele Spiele jeder Spieler gewonnen hat. Drücke Spiel beenden, wenn das Match vorbei ist.',
+  },
+  {
+    question: 'Wie funktioniert die Aufschlag-Anzeige?',
+    answer:
+      'Der Aufschlag wechselt alle 2 Punkte. Ein Punkt erscheint neben dem Spieler, der aufschlägt. Dies folgt den offiziellen Tischtennisregeln. Du kannst jederzeit im Match sehen, wer aufschlagen müsste.',
+  },
+  {
+    question: 'Kann ich es während eines Spiels auf dem Handy benutzen?',
+    answer:
+      'Ja. Die Benutzeroberfläche ist mobilfreundlich mit großen Tasten. Der Vollbildmodus blendet den Browser aus und hält den Bildschirm wach.',
+  },
+  {
+    question: 'Speichert es meine Spieldaten?',
+    answer:
+      'Ja. Der aktuelle Spielstand, gewonnene Spiele und Spielernamen werden automatisch im Browser gespeichert.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Namen eingeben',
+    text: 'Tippe auf den Standard-Spielernamen und gib deinen eigenen ein. Namen werden automatisch gespeichert.',
+  },
+  {
+    name: 'Punkt vergeben',
+    text: 'Drücke den großen runden +-Knopf für den Spieler, der gepunktet hat. Der Stand aktualisiert sich mit einer Jubel-Animation.',
+  },
+  {
+    name: 'Punkt zurücknehmen',
+    text: 'Drücke den Minus-Knopf, falls du versehentlich einen Punkt vergeben hast.',
+  },
+  {
+    name: 'Neues Spiel starten',
+    text: 'Wenn ein Spiel endet, drücke Neues Spiel, um das nächste zu beginnen. Oder drücke Spiel beenden, um das Match zu beenden.',
+  },
+  {
+    name: 'Match beenden',
+    text: 'Drücke Spiel beenden, um den Gewinner mit Trophäe und Konfetti zu feiern.',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowTo> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step, i) => ({
+    '@type': 'HowToStep',
+    position: i + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'SportsApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'USD' },
+  inLanguage: 'de',
+};
+
+export const content: ToolLocaleContent<PingPongScoreKeeperUI> = {
+  slug,
+  title,
+  description,
+  faq: faqData,
+  bibliography,
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Kostenloser Online-Tischtennis-Punktestand : Match-Tracker',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Die Zählweise beim Tischtennis sollte einfach sein, aber die Regeln können verwirrend sein. Wer schlägt als Nächstes auf? Steht es 10:10 oder 11:9? Wie viele Spiele hat jeder Spieler gewonnen? Dieser kostenlose Online-Punktestand erledigt all das automatisch. Du drückst einfach auf +, wenn jemand punktet. Der Punktestand verfolgt Punkte pro Spiel, gewonnene Spiele und den Aufschlag. Alles aktualisiert sich in Echtzeit mit Jubel-Animationen, die jeden Punkt zählen lassen. Keine Anmeldung, kein Download, keine komplizierten Menüs.',
+    },
+    {
+      type: 'title',
+      text: 'Wie die Zählweise in diesem Punktestand funktioniert',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Tischtennis folgt einem standardisierten Zählsystem. Jedes Spiel geht bis 11 Punkte. Ein Spieler muss mit 2 Punkten Vorsprung gewinnen. Bei 10:10 wird weitergespielt, bis jemand mit 2 Punkten führt. Der Aufschlag wechselt alle 2 Punkte während eines Spiels. Dieser Punktestand verfolgt all diese Regeln automatisch. Du musst dir nicht merken, wer aufschlägt oder wann gewechselt wird. Die Anzeige zeigt einen Punkt neben dem aktuellen Aufschläger. Wenn ein Spieler ein Spiel gewinnt, wechselt der Punktestand automatisch zum nächsten Spiel. Der Zähler für gewonnene Spiele erhöht sich für den Gewinner. Ein Match kann beliebig viele Spiele umfassen, ist aber typischerweise Best of 5 oder 7. Drücke Spiel beenden, wenn das Match vorbei ist, und der Gewinner wird mit einer Feier bekannt gegeben.',
+    },
+    {
+      type: 'comparative',
+      columns: 3,
+      items: [
+        {
+          title: 'Trainingsspiele',
+          description: 'Schnelle und einfache Zählweise für lockere Spiele mit Freunden. Automatische Spiel- und Match-Verfolgung.',
+          icon: 'mdi:table-tennis',
+          points: ['Ein Klick pro Punkt', 'Automatische Aufschlag-Verfolgung', 'Funktioniert offline'],
+        },
+        {
+          title: 'Verein & Liga',
+          description: 'Führe saubere Aufzeichnungen über Spiele und Ergebnisse. Perfekt für Vereinsturniere und Ligaspiele.',
+          icon: 'mdi:trophy-outline',
+          points: ['Gewonnene Spiele verfolgen', 'Best of 5 oder 7 Modus', 'Mobilfreundlich'],
+        },
+        {
+          title: 'Turnierbetrieb',
+          description: 'Verfolge mehrere Partien im Turniermodus. Schneller Reset zwischen den Matches.',
+          icon: 'mdi:school',
+          points: ['Schneller Match-Reset', 'Stand speichert', 'Vollbildmodus'],
+        },
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Was diesen Tischtennis-Punktestand besonders macht',
+      level: 2,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Automatische Spielzählung</strong> der Punktestand kennt die Regeln des Tischtennis. Spiele bis 11, Sieg mit 2 Punkten Vorsprung, automatische Aufschlagwechsel.',
+        '<strong>Gewonnene Spiele verfolgen</strong> jedes gewonnene Spiel wird aufgezeichnet. Sieh auf einen Blick, wie viele Spiele jeder Spieler im Match gewonnen hat.',
+        '<strong>Aufschlag-Anzeige</strong> ein sichtbarer Punkt zeigt, welcher Spieler aufschlägt, nach der 2-Punkte-Wechselregel.',
+        '<strong>Jubel-Animationen</strong> jeder Punkt löst eine zufällige Jubel-Animation aus. Acht verschiedene Effekte halten jeden Punkt spannend.',
+        '<strong>Schwebende Partikel</strong> jeder erzielte Punkt erzeugt schwebenden Text, der den Moment feiert.',
+        '<strong>Match-Abschluss-Zeremonie</strong> drücke Spiel beenden, um eine Gewinner-Bekanntgabe mit Trophäe und Konfetti auszulösen.',
+        '<strong>Bearbeitbare Spielernamen</strong> tippe auf das Namensfeld, um Spieler umzubenennen. Namen werden im Browser gespeichert.',
+        '<strong>Vollbildmodus</strong> blendet die Browser-Oberfläche aus, sodass die Anzeige den Bildschirm füllt und wach bleibt.',
+        '<strong>Offline zuerst</strong> funktioniert ohne Internet. Keine Werbung, kein Tracking, keine Datensammlung.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Punktestand vs. Manuelle Zählweise',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Bei der manuellen Zählweise im Tischtennis muss man den Punktestand verfolgen, sich merken, wer aufschlägt, wissen, wann der Aufschlag wechselt, und die gewonnenen Spiele zählen. Besonders in einem schnellen Spiel verliert man leicht den Überblick. Dieser digitale Punktestand erledigt alles automatisch. Du musst nur einen Knopf drücken, wenn ein Punkt erzielt wird. Der Punktestand verfolgt das Spielergebnis, erkennt, wann ein Spiel gewonnen wird, zeichnet gewonnene Spiele auf und zeigt an, wer aufschlägt. Jeder Punkt wird mit Animationen und Partikeln gefeiert. Der Stand gerät nie durcheinander und du verpasst nie einen Aufschlagwechsel. Ob du nun ein lockeres Spiel mit Freunden spielst oder an einem Turnier teilnimmst, dieser kostenlose Online-Tischtennis-Punktestand bietet alles, was du brauchst.',
+    },
+  ],
+  ui: {
+    playerA: 'Spieler 1',
+    playerB: 'Spieler 2',
+    winnerLabel: 'SIEGER',
+    finishMatch: 'Spiel beenden',
+    newGame: 'Neues Spiel',
+    serving: 'Aufschlag',
+    changeSide: 'Seiten wechseln',
+    swapHint: 'Zum Wechseln tippen',
+    game: 'Spiel',
+    set: 'Satz',
+    gamePoint: 'Spielpunkt',
+    matchPoint: 'Matchpunkt',
+    mode: 'Format',
+    bo1: 'BO1',
+    bo3: 'BO3',
+    bo5: 'BO5',
+    bo7: 'BO7',
+    points: 'Punkte',
+    reset: 'Zurücksetzen',
+    resetConfirm: 'Match zurücksetzen? Alle Daten gehen verloren.',
+    cancel: 'Abbrechen',
+    fullscreen: 'Vollbild',
+    exitFullscreen: 'Vollbild beenden',
+  },
+};