Shandoku/index.html at cab67e3f5a0dfabcbb2edb238d76efaeb43272a7 · ssfinney/Shandoku · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
  <meta name="theme-color" content="#111827" />
  <meta name="mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <meta name="apple-mobile-web-app-title" content="Shandoku" />
  <link rel="manifest" href="manifest.webmanifest" />
  <link rel="icon" href="icons/icon-192.png" sizes="192x192" />
  <link rel="apple-touch-icon" href="icons/icon-192.png" />
  <link rel="stylesheet" href="style.css" />
  <script src="script.js" defer></script>
  <title>Shandoku – Wife Edition</title>
  <style>
    /* Critical splash CSS — inlined so it works even while a stale
       service-worker cache is still serving the old style.css */
    html,body{background:#0b1220;margin:0}
    .splash{position:fixed;inset:0;background:#0b1220;display:flex;
      flex-direction:column;align-items:center;justify-content:center;
      gap:2rem;z-index:9999;transition:opacity .5s ease-out}
    .splash.fade-out{opacity:0;pointer-events:none}
    .splash-title{font-size:3rem;font-weight:800;letter-spacing:.15rem;
      color:#00ffcc;margin:0;animation:splash-pulse 1.5s infinite alternate}
    @keyframes splash-pulse{
      from{text-shadow:0 0 6px #00ffcc}
      to{text-shadow:0 0 22px #00ffcc,0 0 44px rgba(0,255,204,.45)}}
    .splash-oval{width:160px;height:210px;border-radius:50%;overflow:hidden;
      border:3px solid #00ffcc;box-shadow:0 0 28px rgba(0,255,204,.5);
      animation:whimsical-spin 3s ease-in-out infinite;flex-shrink:0}
    .splash-img{width:100%;height:100%;object-fit:cover;object-position:center 15%}
    @keyframes whimsical-spin{
      0%  {transform:scale(1)    rotate(0deg)}
      10% {transform:scale(1.08) rotate(20deg)}
      25% {transform:scale(1)    rotate(-15deg)}
      40% {transform:scale(1.05) rotate(15deg)}
      100%{transform:scale(1)    rotate(360deg)}}
    .splash-dots{font-size:1.5rem;color:rgba(255,255,255,.6);margin:0;
      animation:dot-fade 1.5s infinite}
    @keyframes dot-fade{0%,100%{opacity:1}50%{opacity:.25}}
    @media(prefers-reduced-motion:reduce){
      .splash-title,.splash-oval,.splash-dots{animation:none}}
  </style>
</head>
<body>
  <div id="splash" class="splash" role="status" aria-label="Shandoku is loading">
    <h1 class="splash-title">SHANDOKU</h1>
    <div class="splash-oval">
      <img src="icons/IMG_2670.jpeg" alt="Shannon" class="splash-img">
    </div>
    <p class="splash-dots">. . .</p>
  </div>

  <div id="resumeModal" class="resume-modal" hidden aria-modal="true" role="dialog" aria-labelledby="resumeModalMsg">
    <div class="resume-card">
      <p id="resumeModalMsg" class="resume-msg">You have a saved game.</p>
      <div class="resume-btns">
        <button id="resumeYesBtn" class="primary">Resume</button>
        <button id="resumeNoBtn">New Game</button>
      </div>
    </div>
  </div>

  <div id="riftModal" class="rift-modal" hidden aria-modal="true" role="dialog" aria-labelledby="riftTitle">
    <div class="rift-backdrop" id="riftBackdrop"></div>
    <div class="rift-card">
      <p class="rift-kicker">Rift Mode</p>
      <h2 id="riftTitle">A seam in the pattern</h2>
      <p id="riftBody" class="rift-body"></p>
      <div class="rift-btns">
        <button id="riftReturnBtn">Return to puzzle</button>
        <button id="riftRestoreBtn">Restore last solvable</button>
        <button id="riftFreshBtn" class="primary">Start fresh</button>
      </div>
    </div>
  </div>

  <div class="app">
    <!-- Compact top bar: title | timer + errors | settings -->
    <div class="top-bar">
      <h1>Shandoku 😂</h1>
      <div class="top-stats">
        <span id="timeStat">00:00</span>
        <span id="errorStat" class="error-chip" hidden></span>
      </div>
      <button id="settingsBtn" class="icon-btn" aria-label="Open settings">⚙</button>
    </div>

    <div class="main">
      <!-- Thin progress bar just above the board -->
      <div class="progress-wrap">
        <div id="progressBar" class="progress-fill"></div>
      </div>

      <div class="board-shell">
        <div id="board" class="board" aria-label="Shandoku board"></div>
      </div>

      <div id="status" class="status">Tap a cell to select it, then tap a number.</div>

      <div class="controls">
        <!-- Undo | Notes toggle | Redo -->
        <div class="action-row">
          <button id="undoBtn">↩ Undo</button>
          <button id="notesModeBtn" class="toggle notes-toggle">Notes Off</button>
          <button id="redoBtn">Redo ↪</button>
        </div>

        <!-- 3×3 digit pad + erase -->
        <div class="digit-pad" id="digitPad"></div>

        <!-- Hint | New Game -->
        <div class="action-row2">
          <button id="hintBtn">Hint</button>
          <button id="newGameBottomBtn" class="primary">New Game</button>
        </div>

        <!-- Install button — hidden until beforeinstallprompt fires -->
        <button id="installBtn" class="install-btn" hidden>⬇ Add to Home Screen</button>
      </div>
    </div>
  </div>

  <!-- Settings bottom sheet -->
  <div id="settingsModal" class="settings-modal" hidden>
    <div class="settings-backdrop" id="settingsBackdrop"></div>
    <div class="settings-sheet">
      <div class="settings-header">
        <span class="settings-title">Options</span>
        <button id="settingsCloseBtn" class="icon-btn" aria-label="Close settings">✕</button>
      </div>

      <div class="legend">
        <span><i class="swatch" style="background:var(--fixed)"></i> Starting numbers</span>
        <span><i class="swatch" style="background:var(--user)"></i> Your numbers</span>
        <span><i class="swatch" style="background:var(--error)"></i> Conflict</span>
      </div>

      <div class="settings-grid">
        <select id="difficulty" aria-label="Difficulty">
          <option value="easy">Easy</option>
          <option value="medium" selected>Medium</option>
          <option value="hard">Hard</option>
        </select>
        <button id="themeBtn">Theme: Dark</button>
        <button id="autoNotesBtn" class="toggle active">Auto-clean On</button>
        <button id="fillNotesBtn">Fill Notes</button>
        <button id="checkBtn">Check Board</button>
        <button id="nextEmptyBtn">Next Empty</button>
        <button id="resumeBottomBtn">Resume Saved</button>
        <button id="solveBtn">Solve</button>
      </div>
    </div>
  </div>

  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => {
        navigator.serviceWorker.register('./sw.js').catch(() => {});
      });
    }
  </script>
</body>
</html>