Merge pull request #7 from GilbN/claude/issue-5-20260409-2200

feat: add solo mode

Author: GilbN

.env.example

@@ -0,0 +1,5 @@
+VITE_HTTPS=true
+VITE_BASE_PATH=/
+VITE_WS_SERVER_URL=/ws
+WS_PORT=8080
+WS_ALLOWED_ORIGINS=https://localhost:5173,http://localhost:5173

.gitignore

@@ -6,6 +6,7 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
+.env
 
 node_modules
 dist

README.md

@@ -35,7 +35,7 @@ For internet-facing deployments, restrict WebSocket origins:
 
 ```bash
 docker run -d -p 80:80 \
-  -e ALLOWED_ORIGINS=https://timer.example.com \
+  -e WS_ALLOWED_ORIGINS=https://timer.example.com \
   ghcr.io/gilbn/opk-timer:latest
 ```
 
@@ -51,7 +51,7 @@ services:
       - "80:80"
     restart: unless-stopped
     environment:
-      ALLOWED_ORIGINS: "*"
+      WS_ALLOWED_ORIGINS: "*"
 ```
 
 ## Tech stack
@@ -76,8 +76,8 @@ services:
 
 | Variable | Default | Description |
 |----------|---------|-------------|
-| `PORT` | `8080` | Port the WebSocket relay server listens on |
-| `ALLOWED_ORIGINS` | `*` | Comma-separated list of allowed origins for WebSocket connections |
+| `WS_PORT` | `8080` | Port the WebSocket relay server listens on |
+| `WS_ALLOWED_ORIGINS` | `*` | Comma-separated list of allowed origins for WebSocket connections |
 
 ## Getting started
 

server/index.js

@@ -1,7 +1,7 @@
 import { WebSocketServer, WebSocket } from 'ws'
 
-const PORT = process.env.PORT || 8080
-const ALLOWED_ORIGINS = process.env.ALLOWED_ORIGINS || '*'
+const WS_PORT = process.env.WS_PORT || 8080
+const WS_ALLOWED_ORIGINS = process.env.WS_ALLOWED_ORIGINS || '*'
 const HEARTBEAT_INTERVAL = 30_000
 const HEARTBEAT_TIMEOUT = 10_000
 const HOST_GRACE_PERIOD = 60_000 * 30 // 10 minutes for host to reconnect
@@ -245,10 +245,10 @@ function startHeartbeat(wss) {
 // --- Server setup ---
 
 const wss = new WebSocketServer({
-  port: PORT,
+  port: WS_PORT,
   verifyClient: ({ origin }, cb) => {
-    if (ALLOWED_ORIGINS === '*' || !origin) return cb(true)
-    const allowed = ALLOWED_ORIGINS.split(',').map(o => o.trim())
+    if (WS_ALLOWED_ORIGINS === '*' || !origin) return cb(true)
+    const allowed = WS_ALLOWED_ORIGINS.split(',').map(o => o.trim())
     cb(allowed.includes(origin), 403, 'Forbidden')
   },
 })
@@ -285,4 +285,4 @@ wss.on('connection', (ws) => {
 
 startHeartbeat(wss)
 
-console.log(`opk-timer relay server listening on ws://localhost:${PORT}`)
+console.log(`opk-timer relay server listening on ws://localhost:${WS_PORT}`)

server/package.json

@@ -3,8 +3,8 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "start": "node index.js",
-    "dev": "node --watch index.js"
+    "start": "node --env-file-if-exists=../.env index.js",
+    "dev": "node --env-file-if-exists=../.env --watch index.js"
   },
   "dependencies": {
     "ws": "^8.18.0"

src/App.svelte

@@ -27,10 +27,27 @@
 
   async function restoreSession() {
     const savedRoom = loadRoomState()
-    if (!savedRoom?.code) return
+    if (!savedRoom?.code && !savedRoom?.isSolo) return
 
     try {
-      if (savedRoom.isHost) {
+      if (savedRoom.isSolo) {
+        // Solo mode: restore without any WebSocket
+        roomState.set({ code: null, isHost: true, isSolo: true, connectedPeers: [] })
+        const savedTimer = loadTimerState()
+        if (savedTimer?.programId || savedRoom.programId) {
+          const scheduler = new TimerScheduler()
+          window.__opkScheduler = scheduler
+          if (savedTimer?.programId) {
+            scheduler.loadProgram(savedTimer.programId)
+            scheduler.restoreState(savedTimer)
+          } else {
+            scheduler.loadProgram(savedRoom.programId)
+          }
+          currentView.set('timer')
+        } else {
+          currentView.set('lobby')
+        }
+      } else if (savedRoom.isHost) {
         // Host reload: reclaim the same room code
         const host = new SocketHost()
         await host.createRoom(savedRoom.code)

src/lib/i18n.js

@@ -10,6 +10,7 @@ const translations = {
     shareToInstall: 'Del',
     createRoom: 'Opprett rom',
     joinRoom: 'Bli med i rom',
+    soloMode: 'Solo',
     stopwatch: 'Stoppeklokke',
     roomCode: 'Romkode',
     enterCode: 'Skriv inn kode',
@@ -128,6 +129,7 @@ const translations = {
     shareToInstall: 'Share',
     createRoom: 'Create Room',
     joinRoom: 'Join Room',
+    soloMode: 'Solo',
     stopwatch: 'Stopwatch',
     roomCode: 'Room Code',
     enterCode: 'Enter code',

src/lib/stores.js

@@ -8,6 +8,7 @@ export const roomState = writable({
   code: null,
   isHost: false,
   isSpectator: false,
+  isSolo: false,
   connectedPeers: [],
 })
 

src/views/HomeView.svelte

@@ -180,6 +180,13 @@
     currentView.set('stopwatch')
   }
 
+  function startSolo() {
+    unlockAudio()
+    roomState.set({ code: null, isHost: true, isSolo: true, connectedPeers: [] })
+    saveRoomState({ isSolo: true, isHost: true })
+    currentView.set('lobby')
+  }
+
   function timeAgo(ts) {
     const diff = Date.now() - ts
     const min = Math.floor(diff / 60000)
@@ -258,14 +265,23 @@
       </div>
     </div>
 
-    <button class="btn-ghost stopwatch-btn" onclick={openStopwatch}>
-      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-        <circle cx="12" cy="13" r="8"/>
-        <polyline points="12 9 12 13 14.5 15"/>
-        <path d="M9 3h6M12 3v2"/>
-      </svg>
-      {$t('stopwatch')}
-    </button>
+    <div class="ghost-row">
+      <button class="btn-ghost" onclick={startSolo}>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="12" cy="8" r="4"/>
+          <path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/>
+        </svg>
+        {$t('soloMode')}
+      </button>
+      <button class="btn-ghost" onclick={openStopwatch}>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="12" cy="13" r="8"/>
+          <polyline points="12 9 12 13 14.5 15"/>
+          <path d="M9 3h6M12 3v2"/>
+        </svg>
+        {$t('stopwatch')}
+      </button>
+    </div>
 
     <button class="btn-ghost display-btn" onclick={() => { showDisplayForm = !showDisplayForm; error = '' }}>
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -533,6 +549,15 @@
     border-color: rgba(255,255,255,0.15);
   }
 
+  .ghost-row {
+    display: flex;
+    gap: 0.4rem;
+  }
+
+  .ghost-row .btn-ghost {
+    flex: 1;
+  }
+
   /* ── Recent rooms ── */
   .recent-rooms {
     display: flex;

src/views/LobbyView.svelte

@@ -26,7 +26,7 @@
 
     scheduler.loadProgram(programId)
 
-    saveRoomState({ code: $roomState.code, isHost: true, programId })
+    saveRoomState({ code: $roomState.code, isHost: true, isSolo: $roomState.isSolo, programId })
     currentView.set('timer')
   }
 
@@ -37,7 +37,7 @@
 
   function disconnect() {
     if (!confirm(get(t)('confirmDisconnect'))) return
-    if ($roomState.code) {
+    if ($roomState.code && !$roomState.isSolo) {
       addRoomToHistory({ code: $roomState.code, isHost: true })
     }
     if (window.__opkHost) {
@@ -51,11 +51,13 @@
 
 <div class="view lobby-view">
   <div class="top-bar">
-    <RoomCode code={$roomState.code} />
-    <div class="top-bar-right">
+    {#if $roomState.isSolo}
+      <div class="solo-badge">{$t('soloMode')}</div>
+    {:else}
+      <RoomCode code={$roomState.code} />
       <ConnectionStatus status="connected" />
-      <SettingsMenu />
-    </div>
+    {/if}
+    <SettingsMenu />
   </div>
 
   {#if $roomState.connectedPeers.length > 0}
@@ -90,10 +92,17 @@
     gap: 0.5rem;
   }
 
-  .top-bar-right {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
+  .solo-badge {
+    font-family: var(--font-mono);
+    font-size: 1rem;
+    font-weight: 700;
+    letter-spacing: 0.18em;
+    color: var(--accent);
+    padding: 0.35rem 0.7rem;
+    background: var(--bg-surface);
+    border: 1px solid rgba(0, 230, 118, 0.2);
+    border-radius: var(--radius);
+    text-transform: uppercase;
   }
 
   .peer-pill {