1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  6.   <title>Badminton Score Keeper</title>
  7.   <link rel="icon" type="image/svg+xml" href="favicon.svg">
  8.   <style>
  9.     * {
  10.       margin: 0;
  11.       padding: 0;
  12.       box-sizing: border-box;
  13.       -webkit-tap-highlight-color: transparent;
  14.     }
  15.  
  16.     :root {
  17.       --bg-primary: #0f3460;
  18.       --bg-secondary: #16213e;
  19.       --border-color: #3b4272;
  20.       --text-primary: #ffffff;
  21.       --text-secondary: #d1d5db;
  22.       --text-muted: #9ca3af;
  23.       --accent: #06b6d4;
  24.       --accent-dark: #0891b2;
  25.       --btn-gray: #333333;
  26.       --btn-gray-dark: #444444;
  27.       --timer-color: #ff9800;
  28.       --selection-border: #ffffff;
  29.       --radius-sm: 6px;
  30.       --radius-md: 12px;
  31.       --btn-padding: 8px 16px;
  32.       --ui-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  33.       --mono-font: ui-monospace, 'SF Mono', 'Fira Code', 'Roboto Mono', 'Consolas', monospace;
  34.     }
  35.  
  36.     @media (prefers-color-scheme: light) {
  37.       :root {
  38.         --bg-primary: #f5f5f5;
  39.         --bg-secondary: #ffffff;
  40.         --border-color: #d1d5db;
  41.         --text-primary: #1a1a1a;
  42.         --text-secondary: #4a4a4a;
  43.         --text-muted: #888888;
  44.         --accent: #0891b2;
  45.         --accent-dark: #06b6d4;
  46.         --btn-gray: #e5e5e5;
  47.         --btn-gray-dark: #d1d5db;
  48.         --timer-color: #d97706;
  49.         --selection-border: #000000;
  50.       }
  51.     }
  52.  
  53.     html, body {
  54.       height: 100%;
  55.       min-height: 100dvh;
  56.       margin: 0;
  57.       padding: 0;
  58.       overflow: hidden;
  59.       overflow-x: hidden;
  60.     }
  61.  
  62.     body {
  63.       font-family: var(--ui-font);
  64.       background: var(--bg-primary);
  65.       color: var(--text-primary);
  66.       display: flex;
  67.       flex-direction: column;
  68.       touch-action: none;
  69.       user-select: none;
  70.       max-width: 100vw;
  71.       align-items: stretch;
  72.     }
  73.  
  74.     .hidden {
  75.       display: none !important;
  76.     }
  77.  
  78.     .header {
  79.       display: flex;
  80.       justify-content: space-between;
  81.       align-items: center;
  82.       padding: 0 12px;
  83.       background: var(--bg-secondary);
  84.       border-bottom: 1px solid var(--border-color);
  85.       height: 50px;
  86.       flex-shrink: 0;
  87.       box-sizing: border-box;
  88.     }
  89.  
  90.     .header-left,
  91.     .header-right {
  92.       flex: 1;
  93.       min-width: 0;
  94.       display: flex;
  95.       align-items: center;
  96.     }
  97.  
  98.     .header-left {
  99.       justify-content: flex-start;
  100.     }
  101.  
  102.     .header-right {
  103.       justify-content: flex-end;
  104.     }
  105.  
  106.     .header-center {
  107.       display: flex;
  108.       justify-content: center;
  109.       align-items: center;
  110.       padding: 0 12px;
  111.     }
  112.  
  113.     .header-right .player-name {
  114.       text-align: right;
  115.     }
  116.  
  117.     .player-name {
  118.       font-size: 16px;
  119.       color: var(--text-secondary);
  120.       cursor: pointer;
  121.       padding: 4px 8px;
  122.       display: inline-block;
  123.       min-width: 0;
  124.       overflow: hidden;
  125.       text-overflow: ellipsis;
  126.       white-space: nowrap;
  127.       border-bottom: 1px dashed var(--text-muted);
  128.     }
  129.  
  130.     .player-name:hover {
  131.       border-bottom-color: var(--accent);
  132.       border-bottom-style: solid;
  133.     }
  134.  
  135.     .main-area {
  136.       width: 100%;
  137.       height: calc((100vw - 10px) * 2 / 3);
  138.       max-height: calc(100vh - 180px);
  139.       padding: 10px 5px;
  140.       text-align: center;
  141.       display: flex;
  142.       flex-direction: column;
  143.       gap: 10px;
  144.       justify-content: center;
  145.       box-sizing: border-box;
  146.     }
  147.  
  148.     .scores-container {
  149.       display: flex;
  150.       justify-content: center;
  151.       align-items: center;
  152.       gap: 0;
  153.       flex: 1;
  154.       min-height: 0;
  155.       position: relative;
  156.     }
  157.  
  158.     .vs-text {
  159.       position: absolute;
  160.       left: 50%;
  161.       transform: translateX(-50%);
  162.       color: var(--text-muted);
  163.       font-weight: bold;
  164.       pointer-events: none;
  165.     }
  166.  
  167.     .score-button {
  168.       background: var(--bg-secondary);
  169.       border-radius: var(--radius-md);
  170.       display: flex;
  171.       flex-direction: column;
  172.       justify-content: center;
  173.       align-items: center;
  174.       cursor: pointer;
  175.       position: relative;
  176.       overflow: hidden;
  177.       transition: transform 0.1s, background 0.2s;
  178.     }
  179.  
  180.     .score-button:active {
  181.       transform: scale(0.95);
  182.     }
  183.  
  184.     .score-value {
  185.       font-family: var(--mono-font);
  186.       font-size: 2.67ch;
  187.       font-weight: bold;
  188.       text-shadow: 0 0.05em 0.1em rgba(0, 0, 0, 0.5);
  189.       transition: transform 0.15s;
  190.     }
  191.  
  192.     @keyframes flash {
  193.       0%, 50%, 100% { opacity: 1; }
  194.       25%, 75% { opacity: 0.3; }
  195.     }
  196.  
  197.     .score-value.flash {
  198.       animation: flash 0.2s ease-in-out 5;
  199.     }
  200.  
  201.     .game-btn,
  202.     .undo-btn,
  203.     .new-btn {
  204.       background: var(--accent);
  205.       color: white;
  206.       border: none;
  207.       padding: var(--btn-padding);
  208.       font-size: 14px;
  209.       border-radius: var(--radius-sm);
  210.       cursor: pointer;
  211.       transition: background 0.2s, transform 0.1s;
  212.     }
  213.  
  214.     .game-btn:active,
  215.     .undo-btn:active,
  216.     .new-btn:active {
  217.       transform: scale(0.95);
  218.       background: var(--accent-dark);
  219.     }
  220.  
  221.     .game-number {
  222.       font-size: 16px;
  223.       font-weight: bold;
  224.       color: var(--text-primary);
  225.     }
  226.  
  227.     .game-log-section {
  228.       flex: 1;
  229.       display: flex;
  230.       flex-direction: column;
  231.       background: var(--bg-secondary);
  232.       border-top: 1px solid var(--border-color);
  233.       min-height: 100px;
  234.       overflow: hidden;
  235.     }
  236.  
  237.     .game-log-header {
  238.       display: flex;
  239.       justify-content: space-between;
  240.       align-items: center;
  241.       padding: 6px 10px;
  242.       border-bottom: 1px solid var(--border-color);
  243.       flex-shrink: 0;
  244.     }
  245.  
  246.     .game-log-header-left,
  247.     .game-log-header-right {
  248.       display: flex;
  249.       align-items: center;
  250.     }
  251.  
  252.     .game-log-header-left {
  253.       gap: 12px;
  254.     }
  255.  
  256.     .timer {
  257.       font-family: var(--mono-font);
  258.       font-size: 16px;
  259.       color: var(--timer-color);
  260.       font-weight: bold;
  261.     }
  262.  
  263.     .game-log-title {
  264.       font-size: 14px;
  265.       color: var(--text-muted);
  266.     }
  267.  
  268.     .export-btn {
  269.       background: var(--accent);
  270.       color: white;
  271.       border: none;
  272.       padding: var(--btn-padding);
  273.       font-size: 12px;
  274.       border-radius: var(--radius-sm);
  275.       cursor: pointer;
  276.       transition: background 0.2s;
  277.     }
  278.  
  279.     .export-btn:hover {
  280.       background: var(--accent-dark);
  281.     }
  282.  
  283.     .game-log-list {
  284.       flex: 1;
  285.       overflow-y: auto;
  286.       padding: 0 16px 8px 16px;
  287.       min-height: 80px;
  288.     }
  289.  
  290.     .game-log-item {
  291.       font-family: var(--ui-font);
  292.       font-size: 13px;
  293.       padding: 6px 0;
  294.       color: var(--text-muted);
  295.       position: relative;
  296.     }
  297.  
  298.     .game-log-item:first-child {
  299.       padding-top: 8px;
  300.     }
  301.  
  302.     .game-log-item:not(:last-child)::after {
  303.       content: '';
  304.       position: absolute;
  305.       bottom: 0;
  306.       left: 0;
  307.       right: 0;
  308.       height: 1px;
  309.       background: var(--border-color);
  310.     }
  311.  
  312.     .game-log-item:last-child {
  313.       color: var(--text-secondary);
  314.     }
  315.  
  316.     .footer {
  317.       display: flex;
  318.       align-items: center;
  319.       padding: 8px 12px;
  320.       background: var(--bg-secondary);
  321.       border-top: 1px solid var(--border-color);
  322.       flex-shrink: 0;
  323.     }
  324.  
  325.     .footer-favicon {
  326.       height: 30px;
  327.       width: auto;
  328.       flex-shrink: 0;
  329.       margin-right: 20px;
  330.     }
  331.  
  332.     .footer-spacer {
  333.       flex-shrink: 0;
  334.       width: 50px;
  335.     }
  336.  
  337.     .footer-buttons {
  338.       flex: 1;
  339.       display: flex;
  340.       justify-content: center;
  341.       gap: 12px;
  342.     }
  343.  
  344.     .footer-buttons button {
  345.       flex: 1;
  346.     }
  347.  
  348.     .modal-overlay {
  349.       position: fixed;
  350.       top: 0;
  351.       left: 0;
  352.       right: 0;
  353.       bottom: 0;
  354.       background: rgba(0, 0, 0, 0.7);
  355.       display: flex;
  356.       justify-content: center;
  357.       align-items: flex-start;
  358.       padding-top: 10vh;
  359.       z-index: 1000;
  360.       overflow-y: auto;
  361.     }
  362.  
  363.     .modal-content {
  364.       background: var(--bg-secondary);
  365.       padding: 24px;
  366.       border-radius: var(--radius-md);
  367.       text-align: center;
  368.       min-width: 280px;
  369.       max-height: 80vh;
  370.       overflow-y: auto;
  371.       margin: auto;
  372.     }
  373.  
  374.     .modal-content h3 {
  375.       margin-bottom: 16px;
  376.       color: var(--text-primary);
  377.     }
  378.  
  379.     .modal-content input[type="text"] {
  380.       width: 100%;
  381.       padding: 10px;
  382.       font-size: 16px;
  383.       border: 1px solid var(--border-color);
  384.       border-radius: var(--radius-sm);
  385.       background: var(--bg-primary);
  386.       color: var(--text-primary);
  387.       margin-bottom: 12px;
  388.       box-sizing: border-box;
  389.     }
  390.  
  391.     .modal-content input[type="color"] {
  392.       width: 100%;
  393.       height: 50px;
  394.       border: none;
  395.       border-radius: var(--radius-sm);
  396.       cursor: pointer;
  397.       margin-bottom: 16px;
  398.     }
  399.  
  400.     .modal-content .color-picker {
  401.       display: flex;
  402.       gap: 8px;
  403.       justify-content: center;
  404.       flex-wrap: wrap;
  405.       margin-bottom: 16px;
  406.     }
  407.  
  408.     .modal-content .color-option {
  409.       flex: 0 0 40px;
  410.       width: 40px;
  411.       height: 40px;
  412.       display: block;
  413.       border-radius: 50%;
  414.       cursor: pointer;
  415.       transition: transform 0.2s, border-color 0.2s;
  416.       box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  417.     }
  418.  
  419.     .modal-content .color-option.selected {
  420.       outline: 3px solid var(--selection-border);
  421.       outline-offset: 2px;
  422.     }
  423.  
  424.     .modal-content .color-option.selected:not(.two-tone) {
  425.       outline-width: 3px;
  426.       outline-color: var(--selection-border);
  427.       outline-offset: 0;
  428.     }
  429.  
  430.     .modal-content .modal-buttons {
  431.       display: flex;
  432.       gap: 12px;
  433.       justify-content: center;
  434.     }
  435.  
  436.     .modal-content button {
  437.       padding: 10px 24px;
  438.       font-size: 14px;
  439.       border: none;
  440.       border-radius: var(--radius-sm);
  441.       cursor: pointer;
  442.       min-width: 100px;
  443.       width: 100px;
  444.       text-align: center;
  445.     }
  446.  
  447.     .modal-content .btn-cancel {
  448.       background: var(--btn-gray);
  449.       color: white;
  450.     }
  451.  
  452.     .modal-content .btn-save {
  453.       background: var(--accent);
  454.       color: white;
  455.     }
  456.  
  457.     .confirm-dialog .modal-content {
  458.       min-width: 260px;
  459.     }
  460.  
  461.     .confirm-dialog .modal-content p {
  462.       margin-bottom: 20px;
  463.       color: var(--text-secondary);
  464.       font-size: 15px;
  465.     }
  466.  
  467.   </style>
  468. </head>
  469. <body>
  470.   <header class="header">
  471.     <div class="header-left">
  472.       <div class="player-name" id="nameA">Player A</div>
  473.     </div>
  474.     <div class="header-center">
  475.       <div class="game-number" id="gameNumber">0 : 0</div>
  476.     </div>
  477.     <div class="header-right">
  478.       <div class="player-name" id="nameB">Player B</div>
  479.     </div>
  480.   </header>
  481.  
  482.   <main class="main-area">
  483.     <div class="scores-container">
  484.       <div class="score-button" id="scoreBtnA" data-player="A">
  485.         <div class="score-value" id="scoreA">0</div>
  486.       </div>
  487.       <div class="vs-text">:</div>
  488.       <div class="score-button" id="scoreBtnB" data-player="B">
  489.         <div class="score-value" id="scoreB">0</div>
  490.       </div>
  491.     </div>
  492.  
  493.   </main>
  494.  
  495.   <section class="game-log-section">
  496.     <div class="game-log-header">
  497.       <div class="game-log-header-left">
  498.         <span class="game-log-title">Game Log</span>
  499.         <button class="export-btn" id="exportBtn">Export</button>
  500.       </div>
  501.       <div class="game-log-header-right">
  502.         <div class="timer" id="timer">00:00</div>
  503.       </div>
  504.     </div>
  505.     <div class="game-log-list" id="gameLogList"></div>
  506.   </section>
  507.  
  508.   <footer class="footer">
  509.     <img class="footer-favicon" src="favicon.svg" alt="Logo">
  510.     <div class="footer-buttons">
  511.       <button class="new-btn" id="newBtn">New Match</button>
  512.       <button class="game-btn" id="gameBtn">Start Game</button>
  513.       <button class="undo-btn" id="undoBtn">Undo</button>
  514.     </div>
  515.     <div class="footer-spacer"></div>
  516.   </footer>
  517.  
  518.   <script>
  519.     const STORAGE_KEY = 'badminton_score_keeper';
  520.     const SWIPE_THRESHOLD = 30;
  521.     const CLICK_LOCK_MS = 100;
  522.     const AUTO_END_DELAY_MS = 2000;
  523.     const WIN_POINTS = 21;
  524.     const DEUCE_TRIGGER = 20;
  525.     const MAX_POINTS = 30;
  526.  
  527.     const DEFAULT_STATE = {
  528.       playerA: 'Player A',
  529.       playerB: 'Player B',
  530.       playerColorA: '#e94560',
  531.       playerColorB: '#2196f3',
  532.       scoreA: 0,
  533.       scoreB: 0,
  534.       gamesWonA: 0,
  535.       gamesWonB: 0,
  536.       currentGame: 1,
  537.       gameState: 'not_started',
  538.       timerElapsed: 0,
  539.       gameLog: [],
  540.       firstGameStartTime: null,
  541.       manualEndMode: false,
  542.       customMatch: false
  543.     };
  544.  
  545.     const elements = {
  546.       nameA: document.getElementById('nameA'),
  547.       nameB: document.getElementById('nameB'),
  548.       timer: document.getElementById('timer'),
  549.       scoreA: document.getElementById('scoreA'),
  550.       scoreB: document.getElementById('scoreB'),
  551.       scoreBtnA: document.getElementById('scoreBtnA'),
  552.       scoreBtnB: document.getElementById('scoreBtnB'),
  553.       gameBtn: document.getElementById('gameBtn'),
  554.       gameNumber: document.getElementById('gameNumber'),
  555.       gameLogList: document.getElementById('gameLogList'),
  556.       newBtn: document.getElementById('newBtn'),
  557.       undoBtn: document.getElementById('undoBtn'),
  558.       exportBtn: document.getElementById('exportBtn')
  559.     };
  560.  
  561.     let state = loadState();
  562.     let timerInterval = null;
  563.     let isProcessingClick = false;
  564.     let isFlashing = false;
  565.  
  566.     function normalizeState(raw) {
  567.       const merged = { ...DEFAULT_STATE, ...(raw || {}) };
  568.       merged.gameLog = Array.isArray(merged.gameLog) ? [...merged.gameLog] : [];
  569.       if (!merged.playerColorA) merged.playerColorA = DEFAULT_STATE.playerColorA;
  570.       if (!merged.playerColorB) merged.playerColorB = DEFAULT_STATE.playerColorB;
  571.       if (!Number.isFinite(merged.timerElapsed) || merged.timerElapsed < 0) {
  572.        merged.timerElapsed = 0;
  573.      }
  574.      if (!['not_started', 'playing', 'ended'].includes(merged.gameState)) {
  575.        merged.gameState = 'not_started';
  576.      }
  577.      if (!Number.isFinite(merged.currentGame) || merged.currentGame < 1) {
  578.        merged.currentGame = 1;
  579.      }
  580.      return merged;
  581.    }
  582.  
  583.    function loadState() {
  584.      try {
  585.        const saved = localStorage.getItem(STORAGE_KEY);
  586.        if (!saved) return normalizeState();
  587.        return normalizeState(JSON.parse(saved));
  588.      } catch (err) {
  589.        return normalizeState();
  590.      }
  591.    }
  592.  
  593.    function saveState() {
  594.      localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
  595.    }
  596.  
  597.    function isMatchWon() {
  598.      return state.gamesWonA >= 2 || state.gamesWonB >= 2;
  599.     }
  600.  
  601.     function formatTime(seconds) {
  602.       const safeSeconds = Math.max(0, Number.isFinite(seconds) ? Math.floor(seconds) : 0);
  603.       const h = Math.floor(safeSeconds / 3600);
  604.       const m = Math.floor((safeSeconds % 3600) / 60);
  605.       const s = safeSeconds % 60;
  606.       if (h > 0) {
  607.         return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
  608.       }
  609.       return `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
  610.     }
  611.  
  612.     function formatExportTime(seconds) {
  613.       const safeSeconds = Math.max(0, Number.isFinite(seconds) ? Math.floor(seconds) : 0);
  614.       const h = Math.floor(safeSeconds / 3600);
  615.       const m = Math.floor((safeSeconds % 3600) / 60);
  616.       const s = safeSeconds % 60;
  617.       return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
  618.     }
  619.  
  620.     function parseTimeToSeconds(timeStr) {
  621.       if (typeof timeStr !== 'string') return 0;
  622.       const parts = timeStr.split(':').map(Number);
  623.       if (parts.length === 3) return parts[0] * 3600 + parts[1] * 60 + parts[2];
  624.       if (parts.length === 2) return parts[0] * 60 + parts[1];
  625.       return 0;
  626.     }
  627.  
  628.     function shouldTimerRun() {
  629.       if (!state.firstGameStartTime) return false;
  630.       if (state.customMatch) return true;
  631.       return !isMatchWon();
  632.     }
  633.  
  634.     function recomputeElapsed() {
  635.       if (!state.firstGameStartTime) {
  636.         state.timerElapsed = 0;
  637.         return;
  638.       }
  639.       const elapsed = Math.floor((Date.now() - state.firstGameStartTime) / 1000);
  640.       state.timerElapsed = Math.max(0, elapsed);
  641.     }
  642.  
  643.     function updateTimerDisplay() {
  644.       elements.timer.textContent = formatTime(state.timerElapsed);
  645.     }
  646.  
  647.     function syncTimerLoop() {
  648.       const running = shouldTimerRun();
  649.       if (running && !timerInterval) {
  650.        timerInterval = setInterval(() => {
  651.          recomputeElapsed();
  652.           updateTimerDisplay();
  653.           saveState();
  654.         }, 1000);
  655.       } else if (!running && timerInterval) {
  656.        clearInterval(timerInterval);
  657.         timerInterval = null;
  658.       }
  659.     }
  660.  
  661.     function getScoreTextColor(bgColor) {
  662.       return String(bgColor).toLowerCase() === '#ffffff' ? '#0f3460' : '#ffffff';
  663.     }
  664.  
  665.     function syncPlayerUI() {
  666.       elements.nameA.textContent = state.playerA;
  667.       elements.nameB.textContent = state.playerB;
  668.       elements.scoreBtnA.style.backgroundColor = state.playerColorA;
  669.       elements.scoreBtnB.style.backgroundColor = state.playerColorB;
  670.       elements.scoreA.style.color = getScoreTextColor(state.playerColorA);
  671.       elements.scoreB.style.color = getScoreTextColor(state.playerColorB);
  672.     }
  673.  
  674.     function syncScoreUI() {
  675.       elements.scoreA.textContent = String(state.scoreA);
  676.       elements.scoreB.textContent = String(state.scoreB);
  677.       elements.gameNumber.textContent = `${state.gamesWonA} : ${state.gamesWonB}`;
  678.     }
  679.  
  680.     function syncGameButtonUI() {
  681.       if (state.gameState === 'playing') {
  682.         elements.gameBtn.textContent = 'End Game';
  683.       } else if (state.gameState === 'not_started') {
  684.         elements.gameBtn.textContent = 'Start Game';
  685.       } else {
  686.         elements.gameBtn.textContent = 'Start Game';
  687.       }
  688.     }
  689.  
  690.     function getHistoryScoreA(entry) {
  691.       return Number.isFinite(entry.scoreA) ? entry.scoreA : entry.leftScore;
  692.     }
  693.  
  694.     function getHistoryScoreB(entry) {
  695.       return Number.isFinite(entry.scoreB) ? entry.scoreB : entry.rightScore;
  696.     }
  697.  
  698.     function formatHistoryEntry(entry) {
  699.       const leftName = entry.leftPlayerName || state.playerA;
  700.       const rightName = entry.rightPlayerName || state.playerB;
  701.       const scoreA = getHistoryScoreA(entry) ?? 0;
  702.       const scoreB = getHistoryScoreB(entry) ?? 0;
  703.       switch (entry.action) {
  704.         case 'start_game':
  705.           return `${entry.time} - Game ${entry.game} Started (${leftName} vs ${rightName})`;
  706.         case 'point':
  707.           return `${entry.time} - ${scoreA} : ${scoreB} (+1 ${entry.playerName || (entry.player === 'A' ? state.playerA : state.playerB)})`;
  708.         case 'end_game':
  709.           return `${entry.time} - Game ${entry.game} Ended (${entry.winnerName || ''}, ${scoreA} : ${scoreB})`;
  710.         case 'switch_sides':
  711.           return `${entry.time} - Sides switched (${leftName} vs ${rightName})`;
  712.         default:
  713.           return '';
  714.       }
  715.     }
  716.  
  717.     function renderHistory() {
  718.       elements.gameLogList.innerHTML = '';
  719.       for (let i = 0; i < state.gameLog.length; i++) {
  720.        const entry = state.gameLog[i];
  721.        if (entry.action === 'free_scoring_started' || entry.action === 'auto_end_game') continue;
  722.  
  723.        const div = document.createElement('div');
  724.        div.className = 'game-log-item';
  725.  
  726.        let text = '';
  727.        switch (entry.action) {
  728.          case 'start_game':
  729.            if (entry.game === 1) {
  730.              text = `${entry.time} - Game ${entry.game} started (${entry.leftPlayerName} vs ${entry.rightPlayerName})`;
  731.            } else {
  732.              text = `${entry.time} - Game ${entry.game} started (${entry.leftPlayerName} ${entry.gamesWonA}:${entry.gamesWonB} ${entry.rightPlayerName})`;
  733.            }
  734.            break;
  735.          case 'point':
  736.            text = `${entry.time} - ${entry.leftPlayerName} ${entry.leftScore}:${entry.rightScore} ${entry.rightPlayerName}`;
  737.            break;
  738.          case 'end_game':
  739.            text = `${entry.time} - Game ${entry.game} ended (${entry.leftPlayerName} ${entry.gamesWonA}:${entry.gamesWonB} ${entry.rightPlayerName})`;
  740.            break;
  741.          case 'switch_sides':
  742.            text = `${entry.time} - Sides switched (${entry.leftPlayerName} vs ${entry.rightPlayerName})`;
  743.            break;
  744.        }
  745.        div.textContent = text;
  746.        elements.gameLogList.appendChild(div);
  747.      }
  748.    }
  749.  
  750.    function syncUI() {
  751.      syncPlayerUI();
  752.      syncScoreUI();
  753.      syncGameButtonUI();
  754.      updateTimerDisplay();
  755.      renderHistory();
  756.    }
  757.  
  758.    function addHistoryEntry(action, data = {}) {
  759.      const entry = {
  760.        time: formatTime(state.timerElapsed),
  761.        action,
  762.        ...data
  763.      };
  764.      state.gameLog.unshift(entry);
  765.      renderHistory();
  766.    }
  767.  
  768.    function lockClicks() {
  769.      isProcessingClick = true;
  770.      setTimeout(() => {
  771.         isProcessingClick = false;
  772.       }, CLICK_LOCK_MS);
  773.     }
  774.  
  775.     function hasAutoEndInCurrentGame() {
  776.       for (const entry of state.gameLog) {
  777.         if (entry.action === 'start_game') break;
  778.         if (entry.action === 'auto_end_game') return true;
  779.       }
  780.       return false;
  781.     }
  782.  
  783.     function hasSwitchInCurrentGame() {
  784.       for (const entry of state.gameLog) {
  785.         if (entry.action === 'start_game') break;
  786.         if (entry.action === 'switch_sides') return true;
  787.       }
  788.       return false;
  789.     }
  790.  
  791.     function doSwitchSides() {
  792.       [state.playerA, state.playerB] = [state.playerB, state.playerA];
  793.       [state.playerColorA, state.playerColorB] = [state.playerColorB, state.playerColorA];
  794.       [state.scoreA, state.scoreB] = [state.scoreB, state.scoreA];
  795.       [state.gamesWonA, state.gamesWonB] = [state.gamesWonB, state.gamesWonA];
  796.       syncPlayerUI();
  797.       syncScoreUI();
  798.     }
  799.  
  800.     function checkWinningCondition() {
  801.       const scoreA = state.scoreA;
  802.       const scoreB = state.scoreB;
  803.       if (scoreA < WIN_POINTS && scoreB < WIN_POINTS) {
  804.        return { won: false };
  805.      }
  806.      if (scoreA >= WIN_POINTS && scoreB <= DEUCE_TRIGGER - 1) {
  807.        return { won: true, winner: 'A', winnerName: state.playerA };
  808.       }
  809.       if (scoreB >= WIN_POINTS && scoreA <= DEUCE_TRIGGER - 1) {
  810.        return { won: true, winner: 'B', winnerName: state.playerB };
  811.       }
  812.       if (scoreA >= DEUCE_TRIGGER && scoreB >= DEUCE_TRIGGER) {
  813.        if (scoreA === MAX_POINTS || scoreB === MAX_POINTS) {
  814.          if (scoreA !== scoreB) {
  815.            const winner = scoreA > scoreB ? 'A' : 'B';
  816.             return { won: true, winner, winnerName: winner === 'A' ? state.playerA : state.playerB };
  817.           }
  818.         } else if (Math.abs(scoreA - scoreB) >= 2) {
  819.           const winner = scoreA > scoreB ? 'A' : 'B';
  820.           return { won: true, winner, winnerName: winner === 'A' ? state.playerA : state.playerB };
  821.         }
  822.       }
  823.       return { won: false };
  824.     }
  825.  
  826.     function animateScore(element, direction, oldValue) {
  827.       const parent = element.parentElement;
  828.       const rect = element.getBoundingClientRect();
  829.       const parentRect = parent.getBoundingClientRect();
  830.       const fontSize = parseFloat(getComputedStyle(element).fontSize);
  831.       const scoreGap = (rect.height + fontSize) / 2;
  832.       const isPlayerA = element === elements.scoreA;
  833.       const textColor = getScoreTextColor(isPlayerA ? state.playerColorA : state.playerColorB);
  834.  
  835.       const oldScoreEl = document.createElement('div');
  836.       oldScoreEl.className = 'score-value';
  837.       oldScoreEl.textContent = oldValue;
  838.       oldScoreEl.style.cssText = `
  839.         position: absolute;
  840.         left: ${rect.left - parentRect.left}px;
  841.         top: ${rect.top - parentRect.top}px;
  842.         width: ${rect.width}px;
  843.         height: ${rect.height}px;
  844.         font-size: ${fontSize}px;
  845.         font-weight: bold;
  846.         color: ${textColor};
  847.         text-shadow: 0 0.05em 0.1em rgba(0, 0, 0, 0.5);
  848.         display: flex;
  849.         justify-content: center;
  850.         align-items: center;
  851.         z-index: 10;
  852.         pointer-events: none;
  853.         transition: transform 0.15s ease-out;
  854.       `;
  855.  
  856.       const newScoreEl = document.createElement('div');
  857.       newScoreEl.className = 'score-value';
  858.       newScoreEl.textContent = direction === 1 ? oldValue + 1 : oldValue - 1;
  859.       newScoreEl.style.cssText = `
  860.         position: absolute;
  861.         left: ${rect.left - parentRect.left}px;
  862.         top: ${rect.top - parentRect.top}px;
  863.         width: ${rect.width}px;
  864.         height: ${rect.height}px;
  865.         font-size: ${fontSize}px;
  866.         font-weight: bold;
  867.         color: ${textColor};
  868.         text-shadow: 0 0.05em 0.1em rgba(0, 0, 0, 0.5);
  869.         display: flex;
  870.         justify-content: center;
  871.         align-items: center;
  872.         z-index: 11;
  873.         pointer-events: none;
  874.         transform: translateY(${direction === 1 ? scoreGap : -scoreGap}px);
  875.         transition: transform 0.15s ease-out;
  876.       `;
  877.  
  878.       parent.appendChild(oldScoreEl);
  879.       parent.appendChild(newScoreEl);
  880.       element.style.opacity = '0';
  881.  
  882.       requestAnimationFrame(() => {
  883.         oldScoreEl.style.transform = direction === 1 ? `translateY(-${scoreGap}px)` : `translateY(${scoreGap}px)`;
  884.         newScoreEl.style.transform = 'translateY(0)';
  885.       });
  886.  
  887.       setTimeout(() => {
  888.         element.style.opacity = '1';
  889.         oldScoreEl.remove();
  890.         newScoreEl.remove();
  891.       }, 150);
  892.     }
  893.  
  894.     async function maybeSwitchSidesBeforeGame() {
  895.       const lastWasSwitch = state.gameLog[0] && state.gameLog[0].action === 'switch_sides';
  896.       if (lastWasSwitch) return false;
  897.       if (await showConfirmDialog('Switch sides?')) {
  898.         doSwitchSides();
  899.         addHistoryEntry('switch_sides', {
  900.           leftPlayerName: state.playerA,
  901.           rightPlayerName: state.playerB
  902.         });
  903.         saveState();
  904.         return true;
  905.       }
  906.       return false;
  907.     }
  908.  
  909.     async function startGameFlow() {
  910.       if (state.gameState === 'playing') return false;
  911.       let switched = false;
  912.       if (state.gameState === 'ended') {
  913.         if (isMatchWon()) {
  914.           state.customMatch = true;
  915.         }
  916.         switched = await maybeSwitchSidesBeforeGame();
  917.       }
  918.  
  919.       if (!state.firstGameStartTime) {
  920.         state.firstGameStartTime = Date.now();
  921.         state.timerElapsed = 0;
  922.       }
  923.  
  924.       state.gameState = 'playing';
  925.       state.manualEndMode = false;
  926.       state.scoreA = 0;
  927.       state.scoreB = 0;
  928.       addHistoryEntry('start_game', {
  929.         game: state.currentGame,
  930.         gamesWonA: state.gamesWonA,
  931.         gamesWonB: state.gamesWonB,
  932.         leftPlayerName: state.playerA,
  933.         rightPlayerName: state.playerB
  934.       });
  935.       syncScoreUI();
  936.       syncGameButtonUI();
  937.       recomputeElapsed();
  938.       updateTimerDisplay();
  939.       syncTimerLoop();
  940.       saveState();
  941.       return switched;
  942.     }
  943.  
  944.     async function finalizeAutoEnd(result) {
  945.       const winnerElement = result.winner === 'A' ? elements.scoreA : elements.scoreB;
  946.       winnerElement.classList.add('flash');
  947.       isFlashing = true;
  948.  
  949.       setTimeout(() => winnerElement.classList.remove('flash'), 1000);
  950.  
  951.       await new Promise((resolve) => setTimeout(resolve, AUTO_END_DELAY_MS));
  952.  
  953.       winnerElement.classList.remove('flash');
  954.       isFlashing = false;
  955.  
  956.       state.gameState = 'ended';
  957.       state.manualEndMode = true;
  958.  
  959.       if (result.winner === 'A') state.gamesWonA += 1;
  960.       if (result.winner === 'B') state.gamesWonB += 1;
  961.  
  962.       const finalScoreA = state.scoreA;
  963.       const finalScoreB = state.scoreB;
  964.  
  965.       addHistoryEntry('end_game', {
  966.         game: state.currentGame,
  967.         winner: result.winner,
  968.         winnerName: result.winnerName,
  969.         leftPlayerName: state.playerA,
  970.         rightPlayerName: state.playerB,
  971.         scoreA: finalScoreA,
  972.         scoreB: finalScoreB,
  973.         gamesWonA: state.gamesWonA,
  974.         gamesWonB: state.gamesWonB
  975.       });
  976.  
  977.       state.currentGame += 1;
  978.       state.scoreA = 0;
  979.       state.scoreB = 0;
  980.  
  981.       syncScoreUI();
  982.       syncGameButtonUI();
  983.       syncTimerLoop();
  984.       saveState();
  985.     }
  986.  
  987.     async function updateScore(player, delta, animate = true) {
  988.       if (state.gameState !== 'playing') return;
  989.  
  990.       const oldScoreA = state.scoreA;
  991.       const oldScoreB = state.scoreB;
  992.  
  993.       if (player === 'A') {
  994.         state.scoreA = Math.max(0, state.scoreA + delta);
  995.       } else {
  996.         state.scoreB = Math.max(0, state.scoreB + delta);
  997.       }
  998.  
  999.       const scoreEl = player === 'A' ? elements.scoreA : elements.scoreB;
  1000.       if (animate) {
  1001.         animateScore(scoreEl, delta > 0 ? 1 : -1, player === 'A' ? oldScoreA : oldScoreB);
  1002.       }
  1003.  
  1004.       syncScoreUI();
  1005.  
  1006.       addHistoryEntry('point', {
  1007.         player,
  1008.         playerName: player === 'A' ? state.playerA : state.playerB,
  1009.         leftScore: state.scoreA,
  1010.         rightScore: state.scoreB,
  1011.         prevScoreA: oldScoreA,
  1012.         prevScoreB: oldScoreB,
  1013.         game: state.currentGame,
  1014.         leftPlayerName: state.playerA,
  1015.         rightPlayerName: state.playerB
  1016.       });
  1017.  
  1018.       if (!state.manualEndMode && !state.customMatch && state.currentGame === 3) {
  1019.        const wasUnderEleven = Math.max(oldScoreA, oldScoreB) < 11;
  1020.         const reachedEleven = Math.max(state.scoreA, state.scoreB) >= 11;
  1021.         if (wasUnderEleven && reachedEleven && !hasSwitchInCurrentGame()) {
  1022.          if (await showConfirmDialog('Switch sides?')) {
  1023.            doSwitchSides();
  1024.             addHistoryEntry('switch_sides', {
  1025.               leftPlayerName: state.playerA,
  1026.               rightPlayerName: state.playerB
  1027.             });
  1028.             saveState();
  1029.           }
  1030.         }
  1031.       }
  1032.  
  1033.       if (!state.manualEndMode) {
  1034.         const result = checkWinningCondition();
  1035.         if (result.won) {
  1036.           addHistoryEntry('auto_end_game');
  1037.           await finalizeAutoEnd(result);
  1038.         }
  1039.       }
  1040.  
  1041.       saveState();
  1042.     }
  1043.  
  1044.     async function handleScoreClick(player) {
  1045.       if (isFlashing || isProcessingClick) return;
  1046.       lockClicks();
  1047.       let switchedSide = false;
  1048.       if (state.gameState !== 'playing') {
  1049.         switchedSide = await startGameFlow();
  1050.       }
  1051.       if (switchedSide) {
  1052.         player = player === 'A' ? 'B' : 'A';
  1053.       }
  1054.       await updateScore(player, 1, true);
  1055.     }
  1056.  
  1057.     async function handleSwipe(player, deltaY, animate = true) {
  1058.       if (isFlashing) return;
  1059.       if (deltaY < -SWIPE_THRESHOLD) {
  1060.        if (state.gameState !== 'playing') {
  1061.          await startGameFlow();
  1062.        }
  1063.        await updateScore(player, 1, animate);
  1064.      } else if (deltaY > SWIPE_THRESHOLD) {
  1065.         const last = state.gameLog[0];
  1066.         if (state.gameState === 'playing' && last && last.action === 'point' && last.player === player) {
  1067.          await handleUndo(true);
  1068.         }
  1069.       }
  1070.     }
  1071.  
  1072.     function manualEndGame() {
  1073.       state.gameState = 'ended';
  1074.  
  1075.       let winner = null;
  1076.       let winnerName = '';
  1077.       if (state.scoreA > state.scoreB) {
  1078.         winner = 'A';
  1079.         winnerName = state.playerA;
  1080.         state.gamesWonA += 1;
  1081.       } else if (state.scoreB > state.scoreA) {
  1082.         winner = 'B';
  1083.         winnerName = state.playerB;
  1084.         state.gamesWonB += 1;
  1085.       }
  1086.  
  1087.       addHistoryEntry('end_game', {
  1088.         game: state.currentGame,
  1089.         winner,
  1090.         winnerName,
  1091.         leftPlayerName: state.playerA,
  1092.         rightPlayerName: state.playerB,
  1093.         scoreA: state.scoreA,
  1094.         scoreB: state.scoreB,
  1095.         gamesWonA: state.gamesWonA,
  1096.         gamesWonB: state.gamesWonB
  1097.       });
  1098.  
  1099.       state.currentGame += 1;
  1100.       state.scoreA = 0;
  1101.       state.scoreB = 0;
  1102.  
  1103.       syncScoreUI();
  1104.       syncGameButtonUI();
  1105.       syncTimerLoop();
  1106.       saveState();
  1107.     }
  1108.  
  1109.     async function handleGameToggle() {
  1110.       if (isProcessingClick || isFlashing) return;
  1111.       lockClicks();
  1112.       if (state.gameState === 'playing') {
  1113.         manualEndGame();
  1114.         return;
  1115.       }
  1116.       await startGameFlow();
  1117.     }
  1118.  
  1119.     async function handleNew() {
  1120.       const ok = await showConfirmDialog('Start a new match? This will clear all game log and scores.');
  1121.       if (!ok) return;
  1122.  
  1123.       localStorage.removeItem(STORAGE_KEY);
  1124.       state = normalizeState();
  1125.       if (timerInterval) {
  1126.         clearInterval(timerInterval);
  1127.         timerInterval = null;
  1128.       }
  1129.       syncUI();
  1130.       syncTimerLoop();
  1131.       saveState();
  1132.     }
  1133.  
  1134.     async function handleUndo(silent = false) {
  1135.       if (state.gameLog.length === 0) return;
  1136.       if (!silent && isProcessingClick) return;
  1137.       if (!silent) lockClicks();
  1138.  
  1139.       let index = 0;
  1140.       let hiddenOnTop = false;
  1141.       if (state.gameLog[0] && state.gameLog[0].action === 'auto_end_game') {
  1142.        hiddenOnTop = true;
  1143.         index = 1;
  1144.       }
  1145.  
  1146.       const lastEntry = state.gameLog[index];
  1147.       if (!lastEntry) return;
  1148.  
  1149.       if (!silent) {
  1150.         const entrySeconds = parseTimeToSeconds(lastEntry.time);
  1151.         const currentSeconds = state.timerElapsed;
  1152.         const minutesAgo = Math.floor((currentSeconds - entrySeconds) / 60);
  1153.         if (minutesAgo >= 1) {
  1154.           const ok = await showConfirmDialog(`This action happened ${minutesAgo} minute${minutesAgo > 1 ? 's' : ''} ago. Are you sure you want to undo?`);
  1155.           if (!ok) return;
  1156.         }
  1157.       }
  1158.  
  1159.       if (lastEntry.action === 'end_game') {
  1160.         state.gameState = 'playing';
  1161.         state.currentGame = Math.max(1, state.currentGame - 1);
  1162.         if (lastEntry.winner === 'A') state.gamesWonA = Math.max(0, state.gamesWonA - 1);
  1163.         if (lastEntry.winner === 'B') state.gamesWonB = Math.max(0, state.gamesWonB - 1);
  1164.  
  1165.         state.scoreA = Number.isFinite(lastEntry.scoreA) ? lastEntry.scoreA : (lastEntry.leftScore || 0);
  1166.         state.scoreB = Number.isFinite(lastEntry.scoreB) ? lastEntry.scoreB : (lastEntry.rightScore || 0);
  1167.  
  1168.         state.gameLog.splice(index, 1);
  1169.         state.manualEndMode = hasAutoEndInCurrentGame();
  1170.       } else if (lastEntry.action === 'point') {
  1171.         state.scoreA = Number.isFinite(lastEntry.prevScoreA) ? lastEntry.prevScoreA : Math.max(0, state.scoreA - (lastEntry.player === 'A' ? 1 : 0));
  1172.         state.scoreB = Number.isFinite(lastEntry.prevScoreB) ? lastEntry.prevScoreB : Math.max(0, state.scoreB - (lastEntry.player === 'B' ? 1 : 0));
  1173.  
  1174.         if (hiddenOnTop) {
  1175.           state.gameLog.splice(0, 2);
  1176.           state.manualEndMode = false;
  1177.         } else {
  1178.           state.gameLog.splice(index, 1);
  1179.           state.manualEndMode = hasAutoEndInCurrentGame();
  1180.         }
  1181.       } else if (lastEntry.action === 'start_game') {
  1182.         if (state.gameLog.length === 1) {
  1183.           state.firstGameStartTime = null;
  1184.           state.timerElapsed = 0;
  1185.           state.gameState = 'not_started';
  1186.           state.currentGame = 1;
  1187.           state.gamesWonA = 0;
  1188.           state.gamesWonB = 0;
  1189.           state.scoreA = 0;
  1190.           state.scoreB = 0;
  1191.           state.gameLog = [];
  1192.           state.manualEndMode = false;
  1193.           state.customMatch = false;
  1194.         } else {
  1195.           state.gameLog.splice(index, 1);
  1196.           state.gameState = 'ended';
  1197.           state.scoreA = 0;
  1198.           state.scoreB = 0;
  1199.         }
  1200.       } else if (lastEntry.action === 'switch_sides') {
  1201.         doSwitchSides();
  1202.         state.gameLog.splice(index, 1);
  1203.       } else {
  1204.         state.gameLog.splice(index, 1);
  1205.       }
  1206.  
  1207.       syncScoreUI();
  1208.       syncGameButtonUI();
  1209.       renderHistory();
  1210.       syncTimerLoop();
  1211.       updateTimerDisplay();
  1212.       saveState();
  1213.     }
  1214.  
  1215.     function gameLogEntryToExportText(entry) {
  1216.       const leftName = entry.leftPlayerName || state.playerA;
  1217.       const rightName = entry.rightPlayerName || state.playerB;
  1218.       const scoreA = getHistoryScoreA(entry) ?? 0;
  1219.       const scoreB = getHistoryScoreB(entry) ?? 0;
  1220.  
  1221.       switch (entry.action) {
  1222.         case 'start_game':
  1223.           return `Game ${entry.game} Started (${leftName} vs ${rightName})`;
  1224.         case 'point':
  1225.           return `${scoreA} : ${scoreB} (+1 ${entry.playerName || (entry.player === 'A' ? state.playerA : state.playerB)})`;
  1226.         case 'end_game':
  1227.           return `Game ${entry.game} Ended (${entry.winnerName || ''}, ${scoreA} : ${scoreB})`;
  1228.         case 'switch_sides':
  1229.           return `Sides switched (${leftName} vs ${rightName})`;
  1230.         default:
  1231.           return '';
  1232.       }
  1233.     }
  1234.  
  1235.     function handleExport() {
  1236.       const visible = state.gameLog.filter((e) => e.action !== 'auto_end_game' && e.action !== 'free_scoring_started');
  1237.       if (visible.length === 0) {
  1238.         alert('No game log to export');
  1239.         return;
  1240.       }
  1241.  
  1242.       let filename = `${state.playerA} vs ${state.playerB}`;
  1243.       if (state.firstGameStartTime) {
  1244.         const d = new Date(state.firstGameStartTime);
  1245.         const date = `${d.getFullYear()}${String(d.getMonth() + 1).padStart(2, '0')}${String(d.getDate()).padStart(2, '0')}`;
  1246.         const time = `${String(d.getHours()).padStart(2, '0')}${String(d.getMinutes()).padStart(2, '0')}${String(d.getSeconds()).padStart(2, '0')}`;
  1247.         filename += ` ${date}_${time}`;
  1248.       }
  1249.       filename += '.txt';
  1250.  
  1251.       const entries = [...visible].reverse();
  1252.       let content = '';
  1253.       entries.forEach((entry, idx) => {
  1254.         const sec = parseTimeToSeconds(entry.time);
  1255.         const stamp = formatExportTime(sec);
  1256.         const text = gameLogEntryToExportText(entry);
  1257.         if (!text) return;
  1258.         content += `${idx + 1}\n${stamp} --> ${stamp}\n${text}\n\n`;
  1259.       });
  1260.  
  1261.       const blob = new Blob([content], { type: 'text/plain' });
  1262.       const url = URL.createObjectURL(blob);
  1263.       const link = document.createElement('a');
  1264.       link.href = url;
  1265.       link.download = filename;
  1266.       document.body.appendChild(link);
  1267.       link.click();
  1268.       document.body.removeChild(link);
  1269.       URL.revokeObjectURL(url);
  1270.     }
  1271.  
  1272.     function showConfirmDialog(message) {
  1273.       return new Promise((resolve) => {
  1274.         const overlay = document.createElement('div');
  1275.         overlay.className = 'modal-overlay confirm-dialog';
  1276.  
  1277.         const modal = document.createElement('div');
  1278.         modal.className = 'modal-content';
  1279.  
  1280.         const messageEl = document.createElement('p');
  1281.         messageEl.textContent = message;
  1282.         modal.appendChild(messageEl);
  1283.  
  1284.         const buttons = document.createElement('div');
  1285.         buttons.className = 'modal-buttons';
  1286.  
  1287.         const noBtn = document.createElement('button');
  1288.         noBtn.className = 'btn-cancel';
  1289.         noBtn.textContent = 'No';
  1290.         noBtn.addEventListener('click', () => {
  1291.           document.body.removeChild(overlay);
  1292.           resolve(false);
  1293.         });
  1294.  
  1295.         const yesBtn = document.createElement('button');
  1296.         yesBtn.className = 'btn-save';
  1297.         yesBtn.textContent = 'Yes';
  1298.         yesBtn.addEventListener('click', () => {
  1299.           document.body.removeChild(overlay);
  1300.           resolve(true);
  1301.         });
  1302.  
  1303.         buttons.appendChild(noBtn);
  1304.         buttons.appendChild(yesBtn);
  1305.         modal.appendChild(buttons);
  1306.         overlay.appendChild(modal);
  1307.         document.body.appendChild(overlay);
  1308.       });
  1309.     }
  1310.  
  1311.     function setupNameEditing(element, player) {
  1312.       element.addEventListener('click', () => {
  1313.         const colorOptions = ['#000000', '#2196f3', '#e94560', '#4caf50', '#ff9800', '#ffffff'];
  1314.         const currentName = player === 'A' ? state.playerA : state.playerB;
  1315.         const currentColor = player === 'A' ? state.playerColorA : state.playerColorB;
  1316.  
  1317.         const overlay = document.createElement('div');
  1318.         overlay.className = 'modal-overlay';
  1319.  
  1320.         const modal = document.createElement('div');
  1321.         modal.className = 'modal-content';
  1322.  
  1323.         const title = document.createElement('h3');
  1324.         title.textContent = `Edit ${currentName}`;
  1325.         modal.appendChild(title);
  1326.  
  1327.         const nameInput = document.createElement('input');
  1328.         nameInput.type = 'text';
  1329.         nameInput.value = currentName;
  1330.         modal.appendChild(nameInput);
  1331.  
  1332.         const colorPicker = document.createElement('div');
  1333.         colorPicker.className = 'color-picker';
  1334.         let selectedColor = currentColor;
  1335.         const selectionBorder = getComputedStyle(document.documentElement).getPropertyValue('--selection-border').trim();
  1336.  
  1337.         colorOptions.forEach((color) => {
  1338.           const option = document.createElement('div');
  1339.           option.className = 'color-option';
  1340.           if (color === '#ffffff') option.classList.add('white-option');
  1341.           option.style.backgroundColor = color;
  1342.           if (color === selectionBorder) option.classList.add('two-tone');
  1343.  
  1344.           if (color.toLowerCase() === currentColor.toLowerCase()) {
  1345.             option.classList.add('selected');
  1346.           }
  1347.           option.addEventListener('click', () => {
  1348.             colorPicker.querySelectorAll('.color-option').forEach((node) => node.classList.remove('selected'));
  1349.             option.classList.add('selected');
  1350.             selectedColor = color;
  1351.           });
  1352.           colorPicker.appendChild(option);
  1353.         });
  1354.         modal.appendChild(colorPicker);
  1355.  
  1356.         const buttons = document.createElement('div');
  1357.         buttons.className = 'modal-buttons';
  1358.  
  1359.         const cancelBtn = document.createElement('button');
  1360.         cancelBtn.className = 'btn-cancel';
  1361.         cancelBtn.textContent = 'Cancel';
  1362.         cancelBtn.addEventListener('click', () => {
  1363.           document.body.removeChild(overlay);
  1364.         });
  1365.  
  1366.         const saveBtn = document.createElement('button');
  1367.         saveBtn.className = 'btn-save';
  1368.         saveBtn.textContent = 'Save';
  1369.         saveBtn.addEventListener('click', () => {
  1370.           const fallbackName = player === 'A' ? 'Player A' : 'Player B';
  1371.           const oldName = player === 'A' ? state.playerA : state.playerB;
  1372.           const newName = nameInput.value.trim() || fallbackName;
  1373.  
  1374.           if (player === 'A') {
  1375.             state.playerA = newName;
  1376.             state.playerColorA = selectedColor;
  1377.           } else {
  1378.             state.playerB = newName;
  1379.             state.playerColorB = selectedColor;
  1380.           }
  1381.  
  1382.           for (const entry of state.gameLog) {
  1383.             if (entry.action === 'point' && entry.player === player) {
  1384.              entry.playerName = newName;
  1385.             }
  1386.             if (entry.action === 'end_game' && entry.winner === player) {
  1387.              entry.winnerName = newName;
  1388.             }
  1389.             if (entry.leftPlayerName === oldName) entry.leftPlayerName = newName;
  1390.             if (entry.rightPlayerName === oldName) entry.rightPlayerName = newName;
  1391.           }
  1392.  
  1393.           syncPlayerUI();
  1394.           renderHistory();
  1395.           saveState();
  1396.           document.body.removeChild(overlay);
  1397.         });
  1398.  
  1399.         buttons.appendChild(cancelBtn);
  1400.         buttons.appendChild(saveBtn);
  1401.         modal.appendChild(buttons);
  1402.         overlay.appendChild(modal);
  1403.         document.body.appendChild(overlay);
  1404.  
  1405.         nameInput.focus();
  1406.         nameInput.select();
  1407.       });
  1408.     }
  1409.  
  1410.     function setupTouchHandlers(element, player) {
  1411.       let startX = null;
  1412.       let startY = null;
  1413.       let hasMoved = false;
  1414.       let direction = null;
  1415.       let trackingDeltaY = 0;
  1416.       let touchHandled = false;
  1417.       let oldScoreClone = null;
  1418.       let newScoreClone = null;
  1419.       const scoreElement = player === 'A' ? elements.scoreA : elements.scoreB;
  1420.       const scoreBtn = player === 'A' ? elements.scoreBtnA : elements.scoreBtnB;
  1421.  
  1422.       function clearPreview(showRealScore = true) {
  1423.         if (showRealScore) {
  1424.           scoreElement.style.opacity = '1';
  1425.         }
  1426.         if (oldScoreClone) oldScoreClone.remove();
  1427.         if (newScoreClone) newScoreClone.remove();
  1428.         oldScoreClone = null;
  1429.         newScoreClone = null;
  1430.       }
  1431.  
  1432.       function createPreviewNodes(directionNow, currentScore, scoreGap, textColor, canUndo, prevScore) {
  1433.         oldScoreClone = document.createElement('div');
  1434.         oldScoreClone.textContent = currentScore;
  1435.         oldScoreClone.style.cssText = `
  1436.           position: absolute;
  1437.           left: 0;
  1438.           top: 0;
  1439.           width: 100%;
  1440.           height: 100%;
  1441.           font-family: ui-monospace, 'SF Mono', 'Fira Code', 'Roboto Mono', 'Consolas', monospace;
  1442.           font-size: ${getComputedStyle(scoreElement).fontSize};
  1443.           font-weight: bold;
  1444.           color: ${textColor};
  1445.           text-shadow: 0 0.05em 0.1em rgba(0, 0, 0, 0.5);
  1446.           display: flex;
  1447.           justify-content: center;
  1448.           align-items: center;
  1449.           z-index: 10;
  1450.           pointer-events: none;
  1451.         `;
  1452.  
  1453.         newScoreClone = document.createElement('div');
  1454.         newScoreClone.textContent = directionNow === 'up' ? currentScore + 1 : (canUndo ? prevScore : '');
  1455.         newScoreClone.style.cssText = `
  1456.           position: absolute;
  1457.           left: 0;
  1458.           top: 0;
  1459.           width: 100%;
  1460.           height: 100%;
  1461.           font-family: ui-monospace, 'SF Mono', 'Fira Code', 'Roboto Mono', 'Consolas', monospace;
  1462.           font-size: ${getComputedStyle(scoreElement).fontSize};
  1463.           font-weight: bold;
  1464.           color: ${textColor};
  1465.           text-shadow: 0 0.05em 0.1em rgba(0, 0, 0, 0.5);
  1466.           display: flex;
  1467.           justify-content: center;
  1468.           align-items: center;
  1469.           z-index: 9;
  1470.           pointer-events: none;
  1471.           transform: translateY(${directionNow === 'up' ? scoreGap : -scoreGap}px);
  1472.         `;
  1473.  
  1474.         scoreBtn.appendChild(oldScoreClone);
  1475.         scoreBtn.appendChild(newScoreClone);
  1476.         scoreElement.style.opacity = '0';
  1477.       }
  1478.  
  1479.       element.addEventListener('touchstart', (e) => {
  1480.         startX = e.touches[0].clientX;
  1481.         startY = e.touches[0].clientY;
  1482.         hasMoved = false;
  1483.         direction = null;
  1484.         trackingDeltaY = 0;
  1485.         touchHandled = false;
  1486.         clearPreview(false);
  1487.       }, { passive: true });
  1488.  
  1489.       element.addEventListener('touchmove', (e) => {
  1490.         if (startX === null || startY === null) return;
  1491.         const dx = e.touches[0].clientX - startX;
  1492.         const dy = e.touches[0].clientY - startY;
  1493.  
  1494.         if (!hasMoved && Math.abs(dy) > Math.abs(dx) && Math.abs(dy) > 10) {
  1495.          hasMoved = true;
  1496.           direction = dy > 0 ? 'down' : 'up';
  1497.           trackingDeltaY = dy;
  1498.         }
  1499.  
  1500.         if (!hasMoved) return;
  1501.  
  1502.         if (Math.abs(dy) > Math.abs(dx)) {
  1503.           e.preventDefault();
  1504.         }
  1505.  
  1506.         const currentDirection = dy > 0 ? 'down' : 'up';
  1507.         const currentDelta = dy - trackingDeltaY;
  1508.         const fontSize = parseFloat(getComputedStyle(scoreElement).fontSize);
  1509.         const scoreGap = (scoreBtn.offsetHeight + fontSize) / 2;
  1510.         const currentScore = Number.parseInt(scoreElement.textContent, 10) || 0;
  1511.         const textColor = getScoreTextColor(player === 'A' ? state.playerColorA : state.playerColorB);
  1512.         const lastEntry = state.gameLog[0];
  1513.         const canUndo = state.gameState === 'playing' && lastEntry && lastEntry.action === 'point' && lastEntry.player === player;
  1514.         const prevScore = canUndo ? (player === 'A' ? lastEntry.prevScoreA : lastEntry.prevScoreB) : '';
  1515.  
  1516.         if (currentDirection !== direction || !oldScoreClone || !newScoreClone) {
  1517.           direction = currentDirection;
  1518.           trackingDeltaY = dy;
  1519.           clearPreview(false);
  1520.           createPreviewNodes(direction, currentScore, scoreGap, textColor, canUndo, prevScore);
  1521.         }
  1522.  
  1523.         if (!oldScoreClone || !newScoreClone) return;
  1524.  
  1525.         if (direction === 'up') {
  1526.           const clampedDelta = Math.max(-scoreGap, Math.min(0, currentDelta));
  1527.           oldScoreClone.style.transform = `translateY(${clampedDelta}px)`;
  1528.           newScoreClone.style.transform = `translateY(${scoreGap + clampedDelta}px)`;
  1529.         } else {
  1530.           const clampedDelta = Math.max(0, Math.min(scoreGap, currentDelta));
  1531.           oldScoreClone.style.transform = `translateY(${clampedDelta}px)`;
  1532.           newScoreClone.style.transform = `translateY(${clampedDelta - scoreGap}px)`;
  1533.         }
  1534.       }, { passive: false });
  1535.  
  1536.       element.addEventListener('touchend', async (e) => {
  1537.         if (startX === null || startY === null) return;
  1538.         const dx = e.changedTouches[0].clientX - startX;
  1539.         const dy = e.changedTouches[0].clientY - startY;
  1540.  
  1541.         const fontSize = parseFloat(getComputedStyle(scoreElement).fontSize);
  1542.         const scoreGap = (scoreBtn.offsetHeight + fontSize) / 2;
  1543.         const currentDelta = dy - trackingDeltaY;
  1544.         const lastEntry = state.gameLog[0];
  1545.         const canUndo = state.gameState === 'playing' && lastEntry && lastEntry.action === 'point' && lastEntry.player === player;
  1546.  
  1547.         startX = null;
  1548.         startY = null;
  1549.  
  1550.         if (hasMoved && direction === 'up' && currentDelta < -SWIPE_THRESHOLD) {
  1551.          touchHandled = true;
  1552.           clearPreview();
  1553.           await handleSwipe(player, dy, false);
  1554.         } else if (hasMoved && direction === 'down' && currentDelta > SWIPE_THRESHOLD && canUndo) {
  1555.          touchHandled = true;
  1556.           clearPreview();
  1557.           await handleUndo(true);
  1558.         } else if (hasMoved && oldScoreClone && newScoreClone) {
  1559.          oldScoreClone.style.transition = 'transform 0.15s ease-out';
  1560.           newScoreClone.style.transition = 'transform 0.15s ease-out';
  1561.           oldScoreClone.style.transform = 'translateY(0)';
  1562.           newScoreClone.style.transform = direction === 'up' ? `translateY(${scoreGap}px)` : `translateY(-${scoreGap}px)`;
  1563.           setTimeout(() => {
  1564.             clearPreview();
  1565.           }, 150);
  1566.         } else if (Math.abs(dy) > Math.abs(dx) && Math.abs(dy) > SWIPE_THRESHOLD) {
  1567.          touchHandled = true;
  1568.           await handleSwipe(player, dy, true);
  1569.         }
  1570.  
  1571.         hasMoved = false;
  1572.         direction = null;
  1573.         trackingDeltaY = 0;
  1574.       });
  1575.  
  1576.       element.addEventListener('click', (e) => {
  1577.         if (touchHandled) {
  1578.           touchHandled = false;
  1579.           return;
  1580.         }
  1581.         e.preventDefault();
  1582.         handleScoreClick(player);
  1583.       });
  1584.     }
  1585.  
  1586.     function updateScoreFontSize() {
  1587.       const main = document.querySelector('.main-area');
  1588.       if (!main || main.offsetHeight <= 0) return;
  1589.      const maxFromHeight = main.offsetHeight * 0.8;
  1590.      const maxFromWidth = main.offsetWidth * 0.4;
  1591.      const buttonSize = Math.min(maxFromHeight, maxFromWidth);
  1592.      const fontSize = buttonSize * 0.75;
  1593.      elements.scoreBtnA.style.flexBasis = `${buttonSize}px`;
  1594.      elements.scoreBtnA.style.width = `${buttonSize}px`;
  1595.      elements.scoreBtnA.style.height = `${buttonSize}px`;
  1596.      elements.scoreBtnA.style.marginRight = `${buttonSize * 0.15}px`;
  1597.      elements.scoreBtnB.style.flexBasis = `${buttonSize}px`;
  1598.      elements.scoreBtnB.style.width = `${buttonSize}px`;
  1599.      elements.scoreBtnB.style.height = `${buttonSize}px`;
  1600.      elements.scoreBtnB.style.marginLeft = `${buttonSize * 0.15}px`;
  1601.      elements.scoreA.style.fontSize = `${fontSize}px`;
  1602.      elements.scoreB.style.fontSize = `${fontSize}px`;
  1603.      const vsText = document.querySelector('.vs-text');
  1604.      if (vsText) {
  1605.        vsText.style.fontSize = `${fontSize * 0.6}px`;
  1606.      }
  1607.    }
  1608.  
  1609.    function init() {
  1610.      recomputeElapsed();
  1611.      syncUI();
  1612.      syncTimerLoop();
  1613.      updateScoreFontSize();
  1614.  
  1615.      setupNameEditing(elements.nameA, 'A');
  1616.      setupNameEditing(elements.nameB, 'B');
  1617.      setupTouchHandlers(elements.scoreBtnA, 'A');
  1618.      setupTouchHandlers(elements.scoreBtnB, 'B');
  1619.  
  1620.      elements.gameBtn.addEventListener('click', handleGameToggle);
  1621.      elements.newBtn.addEventListener('click', handleNew);
  1622.      elements.undoBtn.addEventListener('click', () => handleUndo(false));
  1623.       elements.exportBtn.addEventListener('click', handleExport);
  1624.  
  1625.       window.addEventListener('resize', updateScoreFontSize);
  1626.     }
  1627.  
  1628.     init();
  1629.   </script>
  1630. </body>
  1631. </html>
  1632.