Spaces:

krishgokul92
/

stopwatch

Sleeping

App Files Files Community

krishgokul92 commited on Oct 9, 2025

Commit

f520256

verified ·

1 Parent(s): bdd3dc8

Upload 10 files

Browse files

Files changed (10) hide show

.dockerignore +6 -0
Dockerfile +7 -0
package.json +13 -0
public/admin.html +21 -0
public/admin.js +8 -0
public/client.html +16 -0
public/client.js +5 -0
public/shared.js +30 -0
public/style.css +43 -0
server.js +77 -0

.dockerignore ADDED Viewed

	@@ -0,0 +1,6 @@

+node_modules
+.git
+.gitignore
+Dockerfile
+README.md
+npm-debug.log*

Dockerfile ADDED Viewed

	@@ -0,0 +1,7 @@

+FROM node:20-alpine
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci --only=production || npm i --only=production
+COPY . .
+EXPOSE 7860
+CMD ["node", "server.js"]

package.json ADDED Viewed

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

+{
+  "name": "server-stopwatch",
+  "version": "1.0.0",
+  "description": "Server-authoritative stopwatch mirrored to clients",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js"
+  },
+  "dependencies": {
+    "express": "^4.19.2",
+    "socket.io": "^4.7.5"
+  }
+}

public/admin.html ADDED Viewed

	@@ -0,0 +1,21 @@

+<!doctype html>
+<html>
+<head>
+  <meta charset='utf-8'/>
+  <title>Stopwatch Admin</title>
+  <link rel='stylesheet' href='/style.css'/>
+</head>
+<body>
+  <div class='container'>
+    <h2>Stopwatch Admin</h2>
+    <div id='display' class='time'>00:00:00.000</div>
+    <div class='controls'>
+      <button id='start' class='primary'>Start</button>
+      <button id='stop'>Stop</button>
+      <button id='reset' class='danger'>Reset</button>
+    </div>
+  </div>
+  <script src='/socket.io/socket.io.js'></script>
+  <script type='module' src='/admin.js'></script>
+</body>
+</html>

public/admin.js ADDED Viewed

	@@ -0,0 +1,8 @@

+import { createSmoothRenderer } from './shared.js';
+const socket = io();
+const display = document.getElementById('display');
+const renderer = createSmoothRenderer({ setText: t => display.textContent = t });
+socket.on('state', s => renderer.applyServerState(s));
+document.getElementById('start').onclick = () => socket.emit('cmd:start');
+document.getElementById('stop').onclick = () => socket.emit('cmd:stop');
+document.getElementById('reset').onclick = () => socket.emit('cmd:reset');

public/client.html ADDED Viewed

	@@ -0,0 +1,16 @@

+<!doctype html>
+<html>
+<head>
+  <meta charset='utf-8'/>
+  <title>Stopwatch Client</title>
+  <link rel='stylesheet' href='/style.css'/>
+</head>
+<body>
+  <div class='container'>
+    <h2>Stopwatch Client</h2>
+    <div id='display' class='time'>00:00:00.000</div>
+  </div>
+  <script src='/socket.io/socket.io.js'></script>
+  <script type='module' src='/client.js'></script>
+</body>
+</html>

public/client.js ADDED Viewed

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

+import { createSmoothRenderer } from './shared.js';
+const socket = io();
+const display = document.getElementById('display');
+const renderer = createSmoothRenderer({ setText: t => display.textContent = t });
+socket.on('state', s => renderer.applyServerState(s));

public/shared.js ADDED Viewed

	@@ -0,0 +1,30 @@

+export function formatTime(ms) {
+  const totalMs = Math.max(0, Math.round(ms));
+  const hours = Math.floor(totalMs / 3600000);
+  const minutes = Math.floor((totalMs % 3600000) / 60000);
+  const seconds = Math.floor((totalMs % 60000) / 1000);
+  const millis = totalMs % 1000;
+  const H = hours.toString().padStart(2, "0");
+  const M = minutes.toString().padStart(2, "0");
+  const S = seconds.toString().padStart(2, "0");
+  const m = millis.toString().padStart(3, "0");
+  return `${H}:${M}:${S}.${m}`;
+}
+export function createSmoothRenderer({ setText }) {
+  let baseElapsedMs = 0;
+  let t0 = performance.now();
+  let running = false;
+  function applyServerState({ running: run, elapsedMs }) {
+    running = run;
+    baseElapsedMs = elapsedMs;
+    t0 = performance.now();
+  }
+  function loop() {
+    const now = performance.now();
+    const ms = baseElapsedMs + (running ? now - t0 : 0);
+    setText(formatTime(ms));
+    requestAnimationFrame(loop);
+  }
+  requestAnimationFrame(loop);
+  return { applyServerState };
+}

public/style.css ADDED Viewed

	@@ -0,0 +1,43 @@

+:root {
+  --bg: #0f1115;
+  --card: #181b22;
+  --text: #e8eef8;
+  --muted: #a9b4c2;
+  --accent: #46c2ff;
+  --accent-2: #8efbbf;
+}
+* { box-sizing: border-box; }
+html, body { height: 100%; }
+body {
+  margin: 0;
+  font-family: system-ui, sans-serif;
+  background: radial-gradient(80% 80% at 50% 30%, #12151c 0%, var(--bg) 70%);
+  color: var(--text);
+  display: grid;
+  place-items: center;
+}
+.container {
+  width: min(720px, 92vw);
+  background: var(--card);
+  border: 1px solid #242a35;
+  border-radius: 16px;
+  padding: 24px;
+  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
+}
+.time {
+  font-size: clamp(40px, 10vw, 84px);
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+.controls { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }
+button {
+  background: #232a36;
+  color: var(--text);
+  border: 1px solid #2f3746;
+  padding: 10px 16px;
+  font-size: 1rem;
+  border-radius: 10px;
+  cursor: pointer;
+}
+button.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #111; border: none; }
+button.danger { background: #3a2020; border-color: #5a2a2a; }

server.js ADDED Viewed

	@@ -0,0 +1,77 @@

+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, { cors: { origin: "*" } });
+app.use(express.static(path.join(__dirname, "public")));
+app.get("/", (_req, res) => {
+  res.sendFile(path.join(__dirname, "public", "admin.html"));
+});
+app.get("/client", (_req, res) => {
+  res.sendFile(path.join(__dirname, "public", "client.html"));
+});
+let running = false;
+let startNs = 0n;
+let accumulatedNs = 0n;
+const nowNs = () => process.hrtime.bigint();
+const nsToMillis = (ns) => Number(ns) / 1e6;
+function currentElapsedNs() {
+  if (!running) return accumulatedNs;
+  return nowNs() - startNs;
+}
+function broadcastState() {
+  const payload = {
+    running,
+    elapsedMs: nsToMillis(currentElapsedNs()),
+    serverSentAtMs: Date.now()
+  };
+  io.emit("state", payload);
+}
+io.on("connection", (socket) => {
+  socket.emit("state", {
+    running,
+    elapsedMs: nsToMillis(currentElapsedNs()),
+    serverSentAtMs: Date.now()
+  });
+  socket.on("cmd:start", () => {
+    if (!running) {
+      startNs = nowNs() - accumulatedNs;
+      running = true;
+      broadcastState();
+    }
+  });
+  socket.on("cmd:stop", () => {
+    if (running) {
+      accumulatedNs = nowNs() - startNs;
+      running = false;
+      broadcastState();
+    }
+  });
+  socket.on("cmd:reset", () => {
+    running = false;
+    accumulatedNs = 0n;
+    startNs = 0n;
+    broadcastState();
+  });
+});
+setInterval(broadcastState, 200);
+const PORT = process.env.PORT || 7860;
+server.listen(PORT, "0.0.0.0", () => {
+  console.log(`Stopwatch server running on http://0.0.0.0:${PORT}`);
+});