Spaces:

krishgokul92
/

timer

Sleeping

App Files Files Community

krishgokul92 commited on Oct 7

Commit

f40632a

verified ·

1 Parent(s): d25057d

Upload 7 files

Browse files

Files changed (7) hide show

.dockerignore +5 -0
Dockerfile +18 -0
README.md +17 -9
package.json +13 -0
public/admin.html +111 -0
public/client.html +169 -0
server.js +70 -0

.dockerignore ADDED Viewed

	@@ -0,0 +1,5 @@

+.git
+.gitignore
+node_modules
+npm-debug.log
+.DS_Store

Dockerfile ADDED Viewed

	@@ -0,0 +1,18 @@

+# Hugging Face Spaces (Docker) compatible
+FROM node:20-alpine
+WORKDIR /app
+# Install prod deps (better build cache)
+COPY package*.json ./
+RUN npm ci --only=production
+# App files
+COPY public ./public
+COPY server.js ./server.js
+# Spaces provides PORT (usually 7860)
+ENV PORT=7860
+EXPOSE 7860
+CMD ["node", "server.js"]

README.md CHANGED Viewed

@@ -1,10 +1,18 @@
----
-title: Timer
-emoji: 📊
-colorFrom: red
-colorTo: gray
-sdk: docker
-pinned: false
----
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

+# LAN Timer — Hugging Face Space (Docker)
+- Admin: `/admin`
+- Clients: `/client` (use `?room=xyz` to group)
+- Blackout control from Admin
+- Fixed 5-char **SS:CC** (seconds:centiseconds) display on clients
+## Run locally
+```bash
+npm install
+npm start
+# http://localhost:7860/admin
+```
+## Deploy to Hugging Face Spaces (Docker)
+1. Create Space (type: Docker).
+2. Upload this repo (zip contents).
+3. Commit; Space will build and run at `https://<space>.hf.space`.

package.json ADDED Viewed

	@@ -0,0 +1,13 @@

+{
+  "name": "lan-timer",
+  "version": "1.2.0",
+  "private": true,
+  "type": "commonjs",
+  "scripts": {
+    "start": "node server.js"
+  },
+  "dependencies": {
+    "express": "^4.19.2",
+    "socket.io": "^4.7.5"
+  }
+}

public/admin.html ADDED Viewed

	@@ -0,0 +1,111 @@

+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>Timer Admin</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <style>
+    :root { color-scheme: dark; }
+    body { margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:#0b0f14; color:#e6edf3; }
+    .wrap { max-width: 960px; margin: 40px auto; padding: 0 20px; }
+    .card { background: #121820; border: 1px solid #1f2933; border-radius: 16px; padding: 20px; box-shadow: 0 6px 24px rgba(0,0,0,.35); }
+    h1 { margin: 0 0 6px; font-weight: 700; letter-spacing: .2px; }
+    p.sub { margin: 0 16px 20px 0; color: #8ea0b5; }
+    .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
+    .btn { border: 0; border-radius: 12px; padding: 12px 18px; font-weight: 600; cursor: pointer; background:#1e2936; color:#fff; transition: transform .02s ease, background .2s ease }
+    .btn:active { transform: translateY(1px); }
+    .btn.start { background: #2261ff; }
+    .btn.stop { background: #f43f5e; }
+    .btn.reset { background: #0ea5e9; }
+    .btn.blackon { background:#000; border:1px solid #2c3a4a; }
+    .btn.blackoff { background:#16a34a; }
+    .input { background: #0d141c; color:#e6edf3; border:1px solid #1f2933; border-radius:12px; padding: 10px 12px; min-width: 160px; }
+    .badge { background:#10161f; border:1px solid #223041; padding: 6px 10px; border-radius: 999px; color:#9fb4cc; display:inline-flex; gap:8px; align-items: center; }
+    .grid { display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
+    .stat { background:#0d141c; border: 1px solid #1f2933; border-radius:12px; padding: 14px; }
+    .stat b { font-size: 24px; }
+    code { background: #0d141c; border:1px solid #1f2933; padding:2px 6px; border-radius:6px; }
+  </style>
+</head>
+<body>
+<div class="wrap">
+  <div class="card">
+    <h1>Timer Admin</h1>
+    <p class="sub">Controls all clients in the same room over WebSockets. Use a small start delay for tight sync.</p>
+    <div class="row">
+      <label>Start delay (ms)
+        <input id="delay" class="input" type="number" value="3000" min="200" step="100">
+      </label>
+      <label>Label
+        <input id="label" class="input" type="text" placeholder="e.g. Heat 1">
+      </label>
+      <button id="start" class="btn start">Start</button>
+      <button id="stop" class="btn stop">Stop</button>
+      <button id="reset" class="btn reset">Reset</button>
+      <span class="badge" id="stats">Clients: 0 • Admins: 1</span>
+    </div>
+    <div class="row">
+      <button id="blackOn"  class="btn blackon">Blackout ON</button>
+      <button id="blackOff" class="btn blackoff">Show Timer</button>
+    </div>
+    <div class="grid">
+      <div class="stat">
+        <div>Room</div>
+        <b id="roomName">default</b>
+      </div>
+      <div class="stat">
+        <div>Server time (ms)</div>
+        <b id="serverNow">--</b>
+      </div>
+      <div class="stat">
+        <div>Hint</div>
+        <div>Open <code>/client</code> on each device. Use <code>?room=yourcode</code> to isolate groups.</div>
+      </div>
+    </div>
+  </div>
+</div>
+<script src="/socket.io/socket.io.js"></script>
+<script>
+  const params = new URLSearchParams(location.search);
+  const room = params.get('room') || 'default';
+  const socket = io({ query: { role: 'admin', room } });
+  const delayEl = document.getElementById('delay');
+  const labelEl = document.getElementById('label');
+  const statsEl = document.getElementById('stats');
+  const roomEl = document.getElementById('roomName');
+  const serverNowEl = document.getElementById('serverNow');
+  roomEl.textContent = room;
+  function syncOnce() { socket.emit('sync:ping', { t0: Date.now() }); }
+  socket.on('sync:pong', ({ t0, t1, t2 }) => {
+    const t3 = Date.now();
+    const offset = ((t1 - t0) + (t2 - t3)) / 2;
+    serverNowEl.textContent = String((Date.now() + offset)|0);
+  });
+  setInterval(syncOnce, 1000);
+  syncOnce();
+  socket.on('stats', ({ numAdmins, numClients }) => {
+    statsEl.textContent = `Clients: ${numClients} • Admins: ${numAdmins}`;
+  });
+  document.getElementById('start').onclick = () => {
+    socket.emit('admin:start', {
+      delayMs: Number(delayEl.value || 3000),
+      label: labelEl.value || ''
+    });
+  };
+  document.getElementById('stop').onclick = () => socket.emit('admin:stop');
+  document.getElementById('reset').onclick = () => socket.emit('admin:reset');
+  document.getElementById('blackOn').onclick  = () => socket.emit('admin:blackout', { on: true });
+  document.getElementById('blackOff').onclick = () => socket.emit('admin:blackout', { on: false });
+</script>
+</body>
+</html>

public/client.html ADDED Viewed

	@@ -0,0 +1,169 @@

+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>Timer Client</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <style>
+    :root { color-scheme: dark; }
+    html, body { height:100%; }
+    body {
+      margin:0; min-height:100%;
+      display:grid; place-items:center;
+      background:#05080d; color:#e6edf3;
+      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
+    }
+    .box { text-align:center; }
+    .time {
+      font-size: clamp(96px, 18vw, 240px);
+      font-weight: 900;
+      letter-spacing: 1px;
+      line-height: 1.0;
+      font-variant-numeric: tabular-nums;
+      -webkit-font-feature-settings: "tnum" 1;
+              font-feature-settings: "tnum" 1;
+    }
+    .label { color:#93a7bd; margin-top: 6px; font-size: clamp(14px, 3vw, 18px); }
+    .state { position: fixed; top:12px; right:12px; background:#0d141c; border:1px solid #1f2933; padding:6px 10px; border-radius:999px; color:#9fb4cc; font-size:13px; }
+    .room  { position: fixed; top:12px; left:12px;  background:#0d141c; border:1px solid #1f2933; padding:6px 10px; border-radius:999px; color:#9fb4cc; font-size:13px; }
+    .hint  { position: fixed; bottom:12px; left:50%; transform: translateX(-50%); color:#7f93a8; font-size:12px; }
+    .blackout { position: fixed; inset: 0; background: #000; display: none; z-index: 999999; }
+  </style>
+</head>
+<body>
+<div class="room" id="room">room: default</div>
+<div class="state" id="state">IDLE</div>
+<div class="box" id="box">
+  <div class="time" id="time">00:00</div>
+  <div class="label" id="label"></div>
+</div>
+<div class="hint">Keep this page visible for best accuracy. Screen is kept awake when possible.</div>
+<div class="blackout" id="blackout"></div>
+<script src="/socket.io/socket.io.js"></script>
+<script>
+  const qs = new URLSearchParams(location.search);
+  const room = qs.get('room') || 'default';
+  document.getElementById('room').textContent = `room: ${room}`;
+  const socket = io({ query: { role: 'client', room } });
+  let wakeLock;
+  async function keepAwake() {
+    try { if ('wakeLock' in navigator) wakeLock = await navigator.wakeLock.request('screen'); }
+    catch(_) {}
+  }
+  keepAwake();
+  document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'visible') keepAwake(); });
+  const offsets = [];
+  function syncOnce() { socket.emit('sync:ping', { t0: Date.now() }); }
+  socket.on('sync:pong', ({ t0, t1, t2 }) => {
+    const t3 = Date.now();
+    const delay = (t3 - t0) - (t2 - t1);
+    const offset = ((t1 - t0) + (t2 - t3)) / 2;
+    offsets.push({ delay, offset, ts: t3 });
+    if (offsets.length > 40) offsets.shift();
+  });
+  for (let i=0;i<10;i++) setTimeout(syncOnce, i*150);
+  setInterval(syncOnce, 3000);
+  function bestOffset() {
+    if (offsets.length === 0) return 0;
+    const best = [...offsets].sort((a,b)=>a.delay-b.delay).slice(0,7).map(x=>x.offset);
+    return Math.round(best.reduce((s,v)=>s+v,0)/best.length);
+  }
+  const State = { IDLE:'IDLE', RUNNING:'RUNNING', STOPPED:'STOPPED' };
+  let state = State.IDLE;
+  let label = '';
+  let startServerAt = null;
+  let pauseOffsetMs = 0;
+  let rafId = 0;
+  const timeEl = document.getElementById('time');
+  const stateEl = document.getElementById('state');
+  const labelEl = document.getElementById('label');
+  const blackoutEl = document.getElementById('blackout');
+  function serverMsToLocalPerf(msServer) {
+    const off = bestOffset();
+    const localNowWall = Date.now();
+    const localNowPerf = performance.now();
+    const whenLocalWall = msServer - off;
+    const delta = whenLocalWall - localNowWall;
+    return localNowPerf + delta;
+  }
+  // Fixed 5-char format: "SS:CC" (seconds:centiseconds), wraps at 99:99
+  function fmt(ms) {
+    if (ms < 0) ms = 0;
+    const totalCs = Math.floor(ms / 10);
+    const secs = Math.floor(totalCs / 100) % 100;
+    const cs   = totalCs % 100;
+    return `${String(secs).padStart(2,'0')}:${String(cs).padStart(2,'0')}`;
+  }
+  let zeroPerfTs = null;
+  function startAtServerTime(startAt) {
+    startServerAt = startAt;
+    pauseOffsetMs = 0;
+    zeroPerfTs = serverMsToLocalPerf(startAt);
+    state = State.RUNNING; labelEl.textContent = label; updateState();
+    scheduleRaf();
+  }
+  function stopPause() {
+    if (state !== State.RUNNING) return;
+    const nowPerf = performance.now();
+    const elapsed = nowPerf - zeroPerfTs;
+    pauseOffsetMs = Math.max(0, elapsed);
+    state = State.STOPPED; updateState();
+    cancelAnimationFrame(rafId);
+    renderElapsed(pauseOffsetMs);
+  }
+  function resetAll() {
+    state = State.IDLE; label = ''; startServerAt = null; pauseOffsetMs = 0; zeroPerfTs = null;
+    cancelAnimationFrame(rafId);
+    renderElapsed(0); updateState(); labelEl.textContent = '';
+  }
+  function renderElapsed(ms) { timeEl.textContent = fmt(ms); }
+  function updateState() { stateEl.textContent = state; }
+  function scheduleRaf() {
+    cancelAnimationFrame(rafId);
+    const loop = () => {
+      const nowPerf = performance.now();
+      const ms = nowPerf - zeroPerfTs;
+      renderElapsed(ms);
+      rafId = requestAnimationFrame(loop);
+    };
+    rafId = requestAnimationFrame(loop);
+  }
+  socket.on('cmd', (msg) => {
+    if (!msg || !msg.type) return;
+    switch (msg.type) {
+      case 'start':
+        label = msg.label || '';
+        startAtServerTime(msg.startAt);
+        break;
+      case 'stop':
+        stopPause();
+        break;
+      case 'reset':
+        resetAll();
+        break;
+      case 'blackout':
+        blackoutEl.style.display = msg.on ? 'block' : 'none';
+        document.documentElement.style.cursor = msg.on ? 'none' : 'auto';
+        break;
+    }
+  });
+  renderElapsed(0);
+</script>
+</body>
+</html>

server.js ADDED Viewed

	@@ -0,0 +1,70 @@

+// server.js — HF Spaces ready (PORT + 0.0.0.0) with blackout + rooms
+const path = require('path');
+const express = require('express');
+const http = require('http');
+const { Server } = require('socket.io');
+const app = express();
+const server = http.createServer(app);
+const io = new Server(server, {
+  pingInterval: 10000,
+  pingTimeout: 5000,
+  cors: { origin: true }
+});
+app.use(express.static(path.join(__dirname, 'public')));
+// Pretty routes
+app.get('/', (req, res) => res.redirect('/admin'));
+app.get('/admin', (req, res) => res.sendFile(path.join(__dirname, 'public', 'admin.html')));
+app.get('/client', (req, res) => res.sendFile(path.join(__dirname, 'public', 'client.html')));
+// Hugging Face sets PORT (usually 7860). Bind to 0.0.0.0 for container.
+const HOST = '0.0.0.0';
+const PORT = process.env.PORT || 7860;
+// Helpers to read room/role from connection query
+function getRoom(socket) { return (socket.handshake.query.room || 'default').toString(); }
+function getRole(socket) { return (socket.handshake.query.role || 'client').toString(); }
+io.on('connection', (socket) => {
+  const room = getRoom(socket);
+  const role = getRole(socket);
+  socket.join(room);
+  const emitStats = () => {
+    const sockets = io.sockets.adapter.rooms.get(room) || new Set();
+    const clients = Array.from(sockets).map(id => io.sockets.sockets.get(id));
+    const numAdmins = clients.filter(s => s?.handshake?.query?.role === 'admin').length;
+    const numClients = clients.length - numAdmins;
+    io.to(room).emit('stats', { numAdmins, numClients });
+  };
+  emitStats();
+  // NTP-like sync
+  socket.on('sync:ping', (msg = {}) => {
+    const t1 = Date.now();
+    socket.emit('sync:pong', { t0: msg.t0, t1, t2: Date.now() });
+  });
+  // Commands
+  socket.on('admin:start', ({ delayMs = 3000, label = '' } = {}) => {
+    if (role !== 'admin') return;
+    const startAt = Date.now() + Math.max(500, Number(delayMs));
+    io.to(room).emit('cmd', { type: 'start', startAt, label });
+  });
+  socket.on('admin:stop',  () => { if (role === 'admin') io.to(room).emit('cmd', { type: 'stop'  }); });
+  socket.on('admin:reset', () => { if (role === 'admin') io.to(room).emit('cmd', { type: 'reset' }); });
+  // Blackout toggle
+  socket.on('admin:blackout', ({ on = true } = {}) => {
+    if (role !== 'admin') return;
+    io.to(room).emit('cmd', { type: 'blackout', on: !!on });
+  });
+  socket.on('disconnect', emitStats);
+});
+server.listen(PORT, HOST, () => {
+  console.log(`Timer server on http://${HOST}:${PORT}`);
+});