Component split, UI enhancement and Light, airy, generous whitespace. Sharp editorial typography using DM Sans + Playfair Display. Thin borders, subtle vote progress bars, clean status indicators. Nothing heavy.

feat: add proposed group solution
2026-03-31 13:37:01 +01:00 · 2026-03-29 21:24:42 +02:00
17 changed files with 2240 additions and 615 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,2 @@
-node_modules/
+dist
 node_modules
--- a/README.md
+++ b/README.md
@@ -1,28 +1,44 @@
 # P2P Poll App
-## Install npm packages
+A peer-to-peer polling application where users create and vote on polls without any central server. All data syncs directly between browsers using WebRTC and CRDTs.
-```
+
-npm init -y
+## Features
 - **Real-time P2P sync** — poll options and votes sync instantly across all connected peers via WebRTC
 - **Collaborative poll title** — editable title that syncs between all participants
 - **One vote per user** — each peer gets a stable ID, enforcing one vote per person per option
 - **Vote/Unvote toggle** — change your mind anytime
 - **Connection status** — see when you're connected and how many peers are in the room
 - **Shareable polls** — share via URL with `?room=your-poll-name`
 - **No backend required** — runs entirely in the browser
 ## Tech Stack
 - [Yjs](https://yjs.dev/) — CRDT library for conflict-free shared state
 - [y-webrtc](https://github.com/yjs/y-webrtc) — WebRTC provider for peer-to-peer connections
 - [Vite](https://vitejs.dev/) — Development server and build tool
 - Vanilla JavaScript — no framework dependencies
 ## Getting Started
 ```bash
 npm install
 npm run dev
 ```
-Note: the frontend obtains the packages `yjs` and `y-websocket` dynamically.
+Open `http://localhost:5173/?room=my-poll` in multiple browser tabs to test.
-## Run backend
+To test across devices on the same network:
-```
+
-node backend.js
+```bash
 npm run dev -- --host
 ```
-### Note on Yjs suggestion
+Then open the URL shown in the terminal on other devices.
 Note that the following server setup is suggested in the Yjs docs (https://docs.yjs.dev/ecosystem/connection-provider/y-websocket):
 ```
 npm install y-websocket-server
 HOST=localhost PORT=1000 npx y-websocket
 ```
-However, across a range of npm versions, this does not work.
+## How It Works
 Nevertheless, the essential code from the `y-websocket-server` package is used here as provided in `utils.js`.
 ## Run frontend
 Open "frontend.html" in browser.
 1. Each browser tab creates a Yjs document and connects to other peers via WebRTC
 2. Poll options and votes are stored in Yjs shared data types (Y.Map)
 3. Changes propagate automatically to all connected peers using CRDTs
 4. A public signaling server handles peer discovery; all poll data flows directly between browsers
--- a/backend.js
+++ b/backend.js
@@ -1,31 +0,0 @@
 import { WebSocketServer } from 'ws';
 import { setupWSConnection } from './utils.js'
 // Create a WebSocket server
 const WS_PORT = 8080;
 const wss = new WebSocketServer({ port: WS_PORT });
 console.log('WebSocket server is running on ws://localhost:' + String(WS_PORT));
 // Connection event handler
 wss.on('connection', setupWSConnection);
 /*
 wss.on('connection', (ws) => {
  console.log('Client connected');
  // Message event handler
  ws.on('message', (message) => {
    let msg_str = String(message);
    console.log("Received: " + msg_str);
    // If this is a text or state message (no Yjs logic) - echo the message back to the client
    if (msg_str.startsWith("TEXT_MESSAGE") | msg_str.startsWith("STATE_MESSAGE")) {
      ws.send(msg_str);
    }
  });
  // Close event handler
  ws.on('close', () => {
    console.log('Client disconnected');
  });
 });*/
--- a/frontend.html
+++ b/frontend.html
@@ -1,196 +0,0 @@
 <!DOCTYPE html>
 <html>
 <head>
  <title>Poll Client</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 600px;
      margin: 0 auto;
      padding: 20px;
    }
    #messages {
      height: 300px;
      border: 1px solid #ccc;
      overflow-y: auto;
      padding: 10px;
      margin-bottom: 10px;
    }
    .message { margin: 5px 0; }
  </style>
 </head>
 <body>
  <h1>Poll Client</h1>
  <div id="status">Connecting to server...</div>
  <div id="status2">Connecting to server...</div>
  <div id="messages"></div>
  <div>
    <input type="text" id="messageInput" placeholder="Type your message">
    <!--button onclick="sendMessage()">Send</button-->
    <button id="sendBtn">Send</button>
    <input id="optionInput" placeholder="Add option">
    <button id="addBtn">Add</button>
    <ul id="options"></ul>
  </div>
  <script type="module">
    import * as Y from "https://esm.sh/yjs"
    import { WebsocketProvider } from "https://esm.sh/y-websocket"
    const WS_PORT = 8080;
    const ydoc = new Y.Doc();
    const status = document.getElementById('status');
    const status2 = document.getElementById('status2');
    const messages = document.getElementById('messages');
    const messageInput = document.getElementById('messageInput');
    // Connect to the backend (WebSocket server) via Yjs WebsocketProvider
    const wsp = new WebsocketProvider(
      'ws://localhost:' + String(WS_PORT), 'poll-room',
      ydoc
    )
    wsp.on('status', event => {
      //console.log("event.status =", event.status)
      if (event.status == "connected") {
        status.textContent = 'Yjs connected to WebSocket server';
        status.style.color = 'green';
      }
      else {
        status.textContent = 'Yjs disonnected from WebSocket server';
        status.style.color = 'red';
      }
    })
    wsp.onopen = () => {
      console.log('connected to y-websocket server');
    };
    ydoc.on('update', () => {
      console.log('Yjs document updated locally');
    });
    wsp.on('sync', isSynced => {
      console.log("isSynced =", isSynced)
    })
    // Connect to the backend (WebSocket server) via common WebSocket (only for informative messages)
    const ws = new WebSocket('ws://localhost:' + String(WS_PORT));
    ws.onopen = () => {
      status2.textContent = 'WebSocket client connected to WebSocket server';
      status2.style.color = 'green';
    };
    ws.onmessage = (event) => {
      const message = document.createElement('div');
      message.className = 'message';
      message.textContent = event.data;
      messages.appendChild(message);
      messages.scrollTop = messages.scrollHeight;
    };
    ws.onerror = (error) => {
      status2.textContent = 'Error: ' + error.message;
      status2.style.color = 'red';
    };
    ws.onclose = () => {
      status2.textContent = 'WebSocket client disconnected from WebSocket server';
      status2.style.color = 'red';
    };
    // Function to send a message
    function sendMessage(command, payload) {
        let message = "";
        if (command === "TEXT_MESSAGE") {
            message = command + ":" + messageInput.value.trim();
            messageInput.value = "";
        }
        else if (command.startsWith("STATE_MESSAGE--")) {
            message = command + ":" + payload;
        }
        else {
            console.log("Error: unknown command '" + command + "'")
        }
        if (message) {
            /* To make compatible with y-websocket-server API:
            const encoder = encoding.createEncoder()
            encoding.writeVarUint(encoder, messageTextMessage)
            syncProtocol.writeUpdate(encoder, update)
            enc_message = encoding.toUint8Array(encoder)*/
            ws.send(message);
        }
    }
     // Send message on button click
    document.getElementById("sendBtn").onclick = () => {
        sendMessage("TEXT_MESSAGE", "");
    };
    // Send message on Enter key
    messageInput.addEventListener('keypress', (e) => {
      if (e.key === 'Enter') {
        sendMessage("TEXT_MESSAGE", "");
      }
    });
    // Actual poll logic
    const optionsMap = ydoc.getMap("options");
    const optionsList = document.getElementById("options");
    const input = document.getElementById("optionInput");
    function render() {
        optionsList.innerHTML = ""
        optionsMap.forEach((vote, name) => {
            // List element for this option
            const li = document.createElement("li")
            // Label for this option
            const label = document.createElement("span")
            label.textContent = name + " — " + vote + " "
            // "Vote"/"Unvote" button
            const voteBtn = document.createElement("button")
            if (vote == false) {
                voteBtn.textContent = "Vote"
            }
            else {
                voteBtn.textContent = "Unvote"
            }
            voteBtn.onclick = () => {
                vote = !vote;
                optionsMap.set(name, vote);
                sendMessage("STATE_MESSAGE--" + (vote ? "VOTE" : "UNVOTE"), name);
            }
            // "Remove" button
            const removeBtn = document.createElement("button")
            removeBtn.textContent = "Remove"
            removeBtn.onclick = () => {
                optionsMap.delete(name);
                sendMessage("STATE_MESSAGE--REMOVE", name);
            }
            li.appendChild(label)
            li.appendChild(voteBtn)
            li.appendChild(removeBtn)
            optionsList.appendChild(li)
        })
    };
    document.getElementById("addBtn").onclick = () => {
        const name = input.value.trim()
        if (!name) return
        if (!optionsMap.has(name)) {
            optionsMap.set(name, false);
            sendMessage("STATE_MESSAGE--ADD_OPTION", name);
        }
        input.value = ""
    };
    optionsMap.observe(render);
    render();
  </script>
 </body>
 </html>
--- a/index.html
+++ b/index.html
@@ -0,0 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Polly — P2P Polls</title>
  <link rel="stylesheet" href="/src/style.css">
 </head>
 <body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
 </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,20 +1,18 @@
 {
-  "name": "yjs-poll",
+  "name": "p2p-poll",
  "private": true,
  "version": "1.0.0",
  "main": "index.js",
  "type": "module",
  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "vite",
-    "y-websocket": "y-websocket"
+    "build": "vite build",
    "preview": "vite preview"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
-    "ws": "^8.19.0",
+    "yjs": "^13.6.0",
-    "@y/protocols": "^1.0.6-1",
+    "y-webrtc": "^10.3.0"
-    "lib0": "^0.2.102",
+  },
-    "yjs": "^14.0.0-7"
+  "devDependencies": {
    "vite": "^6.0.0"
  }
 }
--- a/src/components/AddOption.js
+++ b/src/components/AddOption.js
@@ -0,0 +1,47 @@
 import { addOption } from '../utils/store.js';
 export function AddOption() {
  const wrapper = document.createElement('div');
  wrapper.className = 'add-option-wrapper';
  const input = document.createElement('input');
  input.type = 'text';
  input.className = 'add-option-input';
  input.placeholder = 'Add an option…';
  input.maxLength = 100;
  input.setAttribute('aria-label', 'New poll option');
  const btn = document.createElement('button');
  btn.className = 'add-option-btn';
  btn.setAttribute('aria-label', 'Add option');
  // Plus icon
  btn.innerHTML = `
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <path d="M8 2v12M2 8h12" stroke="currentColor" stroke-width="1.75" stroke-linecap="round"/>
    </svg>
    <span>Add</span>
  `;
  wrapper.append(input, btn);
  function submit() {
    const name = input.value.trim();
    if (!name) {
      input.focus();
      input.classList.add('shake');
      input.addEventListener('animationend', () => input.classList.remove('shake'), { once: true });
      return;
    }
    addOption(name);
    input.value = '';
    input.focus();
  }
  btn.addEventListener('click', submit);
  input.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') submit();
  });
  return wrapper;
 }
--- a/src/components/PollList.js
+++ b/src/components/PollList.js
@@ -0,0 +1,77 @@
 import { yOptions, getEntries, getTotalVotes  } from '../utils/store.js';
 import { PollOption } from './PollOption.js';
 export function PollList() {
  const wrapper = document.createElement('div');
  wrapper.className = 'poll-list-wrapper';
  const meta = document.createElement('div');
  meta.className = 'poll-list-meta';
  const list = document.createElement('div');
  list.className = 'poll-list';
  const empty = document.createElement('div');
  empty.className = 'poll-list-empty';
  empty.innerHTML = `
    <div class="empty-icon">
      <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect x="4" y="10" width="24" height="3" rx="1.5" fill="currentColor" opacity="0.15"/>
        <rect x="4" y="16" width="18" height="3" rx="1.5" fill="currentColor" opacity="0.1"/>
        <rect x="4" y="22" width="21" height="3" rx="1.5" fill="currentColor" opacity="0.07"/>
      </svg>
    </div>
    <p>No options yet — add the first one above.</p>
  `;
  wrapper.append(meta, list, empty);
  function render() {
    const entries = getEntries();
    const total = getTotalVotes();
    // Meta line
    if (entries.length > 0) {
      meta.textContent = `${entries.length} option${entries.length !== 1 ? 's' : ''} · ${total} vote${total !== 1 ? 's' : ''} total`;
      meta.style.display = '';
    } else {
      meta.style.display = 'none';
    }
    // Empty state
    empty.style.display = entries.length === 0 ? '' : 'none';
    // Diff-render: reuse existing rows when possible
    const existing = new Map(
      [...list.querySelectorAll('.poll-option')].map((el) => [el.dataset.id, el])
    );
    // Remove stale rows
    existing.forEach((el, id) => {
      if (!entries.find((e) => e.id === id)) el.remove();
    });
    // Update or insert rows in sorted order
    entries.forEach((entry, i) => {
      const newEl = PollOption({ ...entry, totalVotes: total });
      const currentEl = list.children[i];
      if (!currentEl) {
        list.appendChild(newEl);
      } else if (currentEl.dataset.id !== entry.id) {
        list.insertBefore(newEl, currentEl);
        // Remove the now-displaced old element if it was this id
        const old = existing.get(entry.id);
        if (old && old !== currentEl) old.remove();
      } else {
        // Replace in-place so vote bar animation triggers
        list.replaceChild(newEl, currentEl);
      }
    });
  }
  yOptions.observeDeep(() => render());
  render();
  return wrapper;
 }
--- a/src/components/PollOption.js
+++ b/src/components/PollOption.js
@@ -0,0 +1,44 @@
 import { toggleVote, deleteOption } from '../utils/store.js';
 /**
 * @param {{ id: string, name: string, votes: number, voted: boolean, totalVotes: number }} entry
 */
 export function PollOption({ id, name, votes, voted, totalVotes }) {
  const row = document.createElement('div');
  row.className = `poll-option${voted ? ' poll-option--voted' : ''}`;
  row.dataset.id = id;
  const pct = totalVotes > 0 ? Math.round((votes / totalVotes) * 100) : 0;
  row.innerHTML = `
    <div class="poll-option__bar" style="width: ${pct}%"></div>
    <div class="poll-option__content">
      <span class="poll-option__name">${escapeHtml(name)}</span>
      <div class="poll-option__actions">
        <span class="poll-option__pct">${pct}%</span>
        <span class="poll-option__count">${votes} vote${votes !== 1 ? 's' : ''}</span>
        <button class="poll-option__vote-btn" aria-pressed="${voted}">
          ${voted ? 'Voted' : 'Vote'}
        </button>
        <button class="poll-option__delete-btn" aria-label="Remove option">
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M2 2l10 10M12 2L2 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
          </svg>
        </button>
      </div>
    </div>
  `;
  row.querySelector('.poll-option__vote-btn').addEventListener('click', () => toggleVote(id));
  row.querySelector('.poll-option__delete-btn').addEventListener('click', () => deleteOption(id));
  return row;
 }
 function escapeHtml(str) {
  return str
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;');
 }
--- a/src/components/PollTitle.js
+++ b/src/components/PollTitle.js
@@ -0,0 +1,34 @@
 import { ydoc, yTitle } from '../utils/store.js';
 export function PollTitle() {
  const wrapper = document.createElement('div');
  wrapper.className = 'poll-title-wrapper';
  const input = document.createElement('input');
  input.type = 'text';
  input.id = 'poll-title';
  input.className = 'poll-title-input';
  input.placeholder = 'Untitled Poll';
  input.maxLength = 120;
  input.setAttribute('aria-label', 'Poll title');
  input.value = yTitle.toString();
  wrapper.appendChild(input);
  // Sync from Yjs → input (only when not focused to avoid cursor jump)
  yTitle.observe(() => {
    if (document.activeElement !== input) {
      input.value = yTitle.toString();
    }
  });
  // Sync from input → Yjs
  input.addEventListener('input', () => {
    ydoc.transact(() => {
      yTitle.delete(0, yTitle.length);
      yTitle.insert(0, input.value);
    });
  });
  return wrapper;
 }
--- a/src/components/ShareSection.js
+++ b/src/components/ShareSection.js
@@ -0,0 +1,38 @@
 import { roomName } from '../utils/store.js';
 export function ShareSection() {
  const url = `${window.location.origin}${window.location.pathname}?room=${encodeURIComponent(roomName)}`;
  const section = document.createElement('div');
  section.className = 'share-section';
  section.innerHTML = `
    <p class="share-label">Share this poll</p>
    <div class="share-row">
      <code class="share-url" title="${url}">${url}</code>
      <button class="share-copy-btn">Copy link</button>
    </div>
  `;
  const copyBtn = section.querySelector('.share-copy-btn');
  copyBtn.addEventListener('click', async () => {
    try {
      await navigator.clipboard.writeText(url);
      copyBtn.textContent = 'Copied!';
      copyBtn.classList.add('share-copy-btn--success');
      setTimeout(() => {
        copyBtn.textContent = 'Copy link';
        copyBtn.classList.remove('share-copy-btn--success');
      }, 2000);
    } catch {
      // Fallback: select the text
      const range = document.createRange();
      range.selectNode(section.querySelector('.share-url'));
      window.getSelection().removeAllRanges();
      window.getSelection().addRange(range);
    }
  });
  return section;
 }
--- a/src/components/StatusBar.js
+++ b/src/components/StatusBar.js
@@ -0,0 +1,50 @@
 import { provider } from '../utils/store.js';
 export function StatusBar() {
  const el = document.createElement('div');
  el.className = 'status-bar';
  const dot = document.createElement('span');
  dot.className = 'status-dot connecting';
  const statusText = document.createElement('span');
  statusText.className = 'status-text';
  statusText.textContent = 'Connecting';
  const divider = document.createElement('span');
  divider.className = 'status-divider';
  divider.textContent = '·';
  const peerText = document.createElement('span');
  peerText.className = 'status-peers';
  el.append(dot, statusText, divider, peerText);
  // --- Connection state ---
  let syncTimeout = setTimeout(() => {
    statusText.textContent = 'Ready';
    dot.className = 'status-dot ready';
  }, 3000);
  provider.on('synced', ({ synced }) => {
    clearTimeout(syncTimeout);
    dot.className = `status-dot ${synced ? 'connected' : 'connecting'}`;
    statusText.textContent = synced ? 'Connected' : 'Connecting';
  });
  // --- Peer count ---
  function updatePeerCount() {
    const total = provider.awareness.getStates().size;
    const others = total - 1;
    peerText.textContent = others === 0
      ? 'Only you'
      : `${others} other${others !== 1 ? 's' : ''}`;
  }
  provider.awareness.on('change', updatePeerCount);
  updatePeerCount();
  return el;
 }
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,41 @@
 import { StatusBar } from './components/StatusBar.js';
 import { PollTitle } from './components/PollTitle.js';
 import { AddOption } from './components/AddOption.js';
 import { PollList } from './components/PollList.js';
 import { ShareSection } from './components/ShareSection.js';
 const app = document.getElementById('app');
 // Header: logo + status
 const header = document.createElement('header');
 header.className = 'app-header';
 const wordmark = document.createElement('div');
 wordmark.className = 'app-wordmark';
 wordmark.innerHTML = `
  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <rect x="2" y="4" width="16" height="2.5" rx="1.25" fill="currentColor"/>
    <rect x="2" y="8.75" width="11" height="2.5" rx="1.25" fill="currentColor" opacity="0.6"/>
    <rect x="2" y="13.5" width="13" height="2.5" rx="1.25" fill="currentColor" opacity="0.35"/>
  </svg>
  <span>Polly</span>
 `;
 header.append(wordmark, StatusBar());
 // Main card
 const card = document.createElement('main');
 card.className = 'app-card';
 card.append(
  PollTitle(),
  AddOption(),
  PollList(),
 );
 // Footer
 const footer = document.createElement('footer');
 footer.className = 'app-footer';
 footer.appendChild(ShareSection());
 app.append(header, card, footer);
--- a/src/style.css
+++ b/src/style.css
@@ -0,0 +1,412 @@
 /* ── Fonts ─────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=Playfair+Display:wght@500&display=swap');
 /* ── Tokens ────────────────────────────────────────────── */
 :root {
  --bg:            #F7F6F2;
  --surface:       #FFFFFF;
  --surface-hover: #FAFAF8;
  --border:        #E8E5DF;
  --border-focus:  #1A1A1A;
  --text-primary:   #1A1A1A;
  --text-secondary: #6B6860;
  --text-muted:     #AAA79F;
  --accent:         #1A1A1A;
  --accent-text:    #FFFFFF;
  --vote-bar:       rgba(26, 26, 26, 0.07);
  --vote-bar-voted: rgba(26, 26, 26, 0.12);
  --success:        #2D7D46;
  --danger:         #C0392B;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.05);
 }
 /* ── Reset ─────────────────────────────────────────────── */
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 /* ── Base ──────────────────────────────────────────────── */
 html { font-size: 16px; }
 body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
 }
 /* ── Layout ────────────────────────────────────────────── */
 #app {
  max-width: 580px;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
 }
 /* ── Header ────────────────────────────────────────────── */
 .app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.25rem;
 }
 .app-wordmark {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--text-primary);
  letter-spacing: -0.01em;
 }
 /* ── Status bar ────────────────────────────────────────── */
 .status-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
 }
 .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.3s;
 }
 .status-dot.connecting { background: var(--text-muted); }
 .status-dot.ready      { background: var(--text-muted); }
 .status-dot.connected  { background: var(--success); }
 .status-divider { color: var(--text-muted); }
 /* ── Card ──────────────────────────────────────────────── */
 .app-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
 }
 /* ── Poll Title ────────────────────────────────────────── */
 .poll-title-wrapper {
  padding: 1.75rem 1.75rem 1.25rem;
  border-bottom: 1px solid var(--border);
 }
 .poll-title-input {
  width: 100%;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--text-primary);
  background: transparent;
  border: none;
  outline: none;
  line-height: 1.3;
  letter-spacing: -0.02em;
 }
 .poll-title-input::placeholder { color: var(--text-muted); }
 /* ── Add Option ────────────────────────────────────────── */
 .add-option-wrapper {
  display: flex;
  gap: 0.625rem;
  padding: 1.25rem 1.75rem;
  border-bottom: 1px solid var(--border);
 }
 .add-option-input {
  flex: 1;
  height: 2.5rem;
  padding: 0 0.875rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--text-primary);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.15s;
 }
 .add-option-input::placeholder { color: var(--text-muted); }
 .add-option-input:focus { border-color: var(--border-focus); }
 .add-option-input.shake {
  animation: shake 0.3s ease;
 }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-4px); }
  75%       { transform: translateX(4px); }
 }
 .add-option-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  height: 2.5rem;
  padding: 0 1rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--accent-text);
  background: var(--accent);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
 }
 .add-option-btn:hover { opacity: 0.85; }
 .add-option-btn:active { opacity: 0.7; }
 /* ── Poll List ─────────────────────────────────────────── */
 .poll-list-wrapper {
  padding: 0.5rem 0;
 }
 .poll-list-meta {
  padding: 0.5rem 1.75rem 0.75rem;
  font-size: 0.775rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 500;
 }
 .poll-list-empty {
  padding: 3rem 1.75rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.875rem;
 }
 .empty-icon {
  margin-bottom: 0.75rem;
  opacity: 0.6;
 }
 /* ── Poll Option ───────────────────────────────────────── */
 .poll-option {
  position: relative;
  overflow: hidden;
  transition: background 0.15s;
 }
 .poll-option:hover {
  background: var(--surface-hover);
 }
 .poll-option__bar {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--vote-bar);
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
 }
 .poll-option--voted .poll-option__bar {
  background: var(--vote-bar-voted);
 }
 .poll-option__content {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.75rem;
 }
 .poll-option__name {
  flex: 1;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--text-primary);
  word-break: break-word;
 }
 .poll-option--voted .poll-option__name {
  font-weight: 500;
 }
 .poll-option__actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
 }
 .poll-option__pct {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  min-width: 2.5rem;
  text-align: right;
 }
 .poll-option__count {
  font-size: 0.775rem;
  color: var(--text-muted);
  min-width: 3.5rem;
 }
 .poll-option__vote-btn {
  height: 1.875rem;
  padding: 0 0.875rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
 }
 .poll-option__vote-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
 }
 .poll-option--voted .poll-option__vote-btn {
  background: var(--accent);
  color: var(--accent-text);
  border-color: var(--accent);
 }
 .poll-option--voted .poll-option__vote-btn:hover {
  opacity: 0.8;
 }
 .poll-option__delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
 }
 .poll-option:hover .poll-option__delete-btn { opacity: 1; }
 .poll-option__delete-btn:hover {
  color: var(--danger);
  background: rgba(192, 57, 43, 0.07);
 }
 /* ── Footer ────────────────────────────────────────────── */
 .app-footer {
  padding: 0 0.25rem;
 }
 /* ── Share Section ─────────────────────────────────────── */
 .share-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 1.25rem 1.5rem;
 }
 .share-label {
  font-size: 0.775rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.625rem;
 }
 .share-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
 }
 .share-url {
  flex: 1;
  font-family: 'DM Mono', 'Fira Mono', monospace;
  font-size: 0.8rem;
  color: var(--text-secondary);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  user-select: all;
 }
 .share-copy-btn {
  height: 2rem;
  padding: 0 0.875rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
 }
 .share-copy-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
 }
 .share-copy-btn--success {
  color: var(--success) !important;
  border-color: var(--success) !important;
 }
 /* ── Responsive ────────────────────────────────────────── */
@media (max-width: 480px) {
  #app { padding: 1rem 0.75rem 3rem; }
  .poll-title-wrapper  { padding: 1.25rem 1.25rem 1rem; }
  .add-option-wrapper  { padding: 1rem 1.25rem; }
  .poll-option__content { padding: 0.875rem 1.25rem; }
  .poll-list-meta      { padding: 0.5rem 1.25rem 0.625rem; }
  .poll-list-empty     { padding: 2.5rem 1.25rem; }
  .poll-option__count  { display: none; }
  .share-section { padding: 1rem 1.25rem; }
 }
--- a/src/utils/store.js
+++ b/src/utils/store.js
@@ -0,0 +1,79 @@
 import * as Y from 'yjs';
 import { WebrtcProvider } from 'y-webrtc';
 // --- Peer ID (stable across reloads) ---
 function getOrCreatePeerId() {
  let id = localStorage.getItem('peer-id');
  if (!id) {
    id = crypto.randomUUID();
    localStorage.setItem('peer-id', id);
  }
  return id;
 }
 // --- Room name from URL ---
 function getRoomName() {
  const params = new URLSearchParams(window.location.search);
  return params.get('room') || 'default-poll';
 }
 // --- Yjs setup ---
 export const peerId = getOrCreatePeerId();
 export const roomName = getRoomName();
 export const ydoc = new Y.Doc();
 export const provider = new WebrtcProvider(roomName, ydoc);
 export const yOptions = ydoc.getMap('poll-options');
 export const yTitle = ydoc.getText('poll-title');
 // --- Data operations ---
 export function addOption(name) {
  const id = crypto.randomUUID();
  const optionMap = new Y.Map();
  optionMap.set('name', name);
  optionMap.set('votes', new Y.Map());
  yOptions.set(id, optionMap);
 }
 export function toggleVote(optionId) {
  const optionMap = yOptions.get(optionId);
  if (!optionMap) return;
  const votes = optionMap.get('votes');
  if (votes.has(peerId)) {
    votes.delete(peerId);
  } else {
    votes.set(peerId, true);
  }
 }
 export function deleteOption(optionId) {
  yOptions.delete(optionId);
 }
 // --- Derived read helpers ---
 export function getEntries() {
  const entries = [];
  yOptions.forEach((optionMap, id) => {
    entries.push({
      id,
      name: optionMap.get('name'),
      votes: optionMap.get('votes').size,
      voted: optionMap.get('votes').has(peerId),
    });
  });
  entries.sort((a, b) => b.votes - a.votes || a.name.localeCompare(b.name));
  return entries;
 }
 export function getTotalVotes() {
  let total = 0;
  yOptions.forEach((optionMap) => {
    total += optionMap.get('votes').size;
  });
  return total;
 }
--- a/utils.js
+++ b/utils.js
@@ -1,291 +0,0 @@
 /* Adapted from https://github.com/yjs/y-websocket-server/blob/main/src/server.js, version of 2025-04-02
   (author: dmonad/Kevin Jahns, MIT license) */
 import * as Y from 'yjs'
 import * as syncProtocol from '@y/protocols/sync'
 import * as awarenessProtocol from '@y/protocols/awareness'
 import * as encoding from 'lib0/encoding'
 import * as decoding from 'lib0/decoding'
 import * as map from 'lib0/map'
 import * as eventloop from 'lib0/eventloop'
 /*import { callbackHandler, isCallbackSet } from './callback.js'
 const CALLBACK_DEBOUNCE_WAIT = parseInt(process.env.CALLBACK_DEBOUNCE_WAIT || '2000')
 const CALLBACK_DEBOUNCE_MAXWAIT = parseInt(process.env.CALLBACK_DEBOUNCE_MAXWAIT || '10000')
 const debouncer = eventloop.createDebouncer(CALLBACK_DEBOUNCE_WAIT, CALLBACK_DEBOUNCE_MAXWAIT)*/
 const wsReadyStateConnecting = 0
 const wsReadyStateOpen = 1
 const wsReadyStateClosing = 2 // eslint-disable-line
 const wsReadyStateClosed = 3 // eslint-disable-line
 // disable gc when using snapshots!
 const gcEnabled = process.env.GC !== 'false' && process.env.GC !== '0'
 // const persistenceDir = process.env.YPERSISTENCE
 /**
 * @type {{bindState: function(string,WSSharedDoc):void, writeState:function(string,WSSharedDoc):Promise<any>, provider: any}|null}
 */
 let persistence = null
 /**
 * @param {{bindState: function(string,WSSharedDoc):void,
 * writeState:function(string,WSSharedDoc):Promise<any>,provider:any}|null} persistence_
 */
 export const setPersistence = persistence_ => {
  persistence = persistence_
 }
 /**
 * @return {null|{bindState: function(string,WSSharedDoc):void,
  * writeState:function(string,WSSharedDoc):Promise<any>}|null} used persistence layer
  */
 export const getPersistence = () => persistence
 /**
 * @type {Map<string,WSSharedDoc>}
 */
 export const docs = new Map()
 const messageSync = 0
 const messageAwareness = 1
 // const messageAuth = 2
 //const messageTextMessage = 3
 //const messageStateMessage = 4
 /**
 * @param {Uint8Array} update
 * @param {any} _origin
 * @param {WSSharedDoc} doc
 * @param {any} _tr
 */
 const updateHandler = (update, _origin, doc, _tr) => {
  const encoder = encoding.createEncoder()
  encoding.writeVarUint(encoder, messageSync)
  syncProtocol.writeUpdate(encoder, update)
  const message = encoding.toUint8Array(encoder)
  doc.conns.forEach((_, conn) => send(doc, conn, message))
 }
 /**
 * @type {(ydoc: Y.Doc) => Promise<void>}
 */
 let contentInitializor = _ydoc => Promise.resolve()
 /**
 * This function is called once every time a Yjs document is created. You can
 * use it to pull data from an external source or initialize content.
 *
 * @param {(ydoc: Y.Doc) => Promise<void>} f
 */
 export const setContentInitializor = (f) => {
  contentInitializor = f
 }
 export class WSSharedDoc extends Y.Doc {
  /**
   * @param {string} name
   */
  constructor (name) {
    super({ gc: gcEnabled })
    this.name = name
    /**
     * Maps from conn to set of controlled user ids. Delete all user ids from awareness when this conn is closed
     * @type {Map<Object, Set<number>>}
     */
    this.conns = new Map()
    /**
     * @type {awarenessProtocol.Awareness}
     */
    this.awareness = new awarenessProtocol.Awareness(this)
    this.awareness.setLocalState(null)
    /**
     * @param {{ added: Array<number>, updated: Array<number>, removed: Array<number> }} changes
     * @param {Object | null} conn Origin is the connection that made the change
     */
    const awarenessChangeHandler = ({ added, updated, removed }, conn) => {
      const changedClients = added.concat(updated, removed)
      if (conn !== null) {
        const connControlledIDs = /** @type {Set<number>} */ (this.conns.get(conn))
        if (connControlledIDs !== undefined) {
          added.forEach(clientID => { connControlledIDs.add(clientID) })
          removed.forEach(clientID => { connControlledIDs.delete(clientID) })
        }
      }
      // broadcast awareness update
      const encoder = encoding.createEncoder()
      encoding.writeVarUint(encoder, messageAwareness)
      encoding.writeVarUint8Array(encoder, awarenessProtocol.encodeAwarenessUpdate(this.awareness, changedClients))
      const buff = encoding.toUint8Array(encoder)
      this.conns.forEach((_, c) => {
        send(this, c, buff)
      })
    }
    this.awareness.on('update', awarenessChangeHandler)
    this.on('update', /** @type {any} */ (updateHandler))
    //if (isCallbackSet) {
    //  this.on('update', (_update, _origin, doc) => {
    //    debouncer(() => callbackHandler(/** @type {WSSharedDoc} */ (doc)))
    //  })
    //}
    this.whenInitialized = contentInitializor(this)
  }
 }
 /**
 * Gets a Y.Doc by name, whether in memory or on disk
 *
 * @param {string} docname - the name of the Y.Doc to find or create
 * @param {boolean} gc - whether to allow gc on the doc (applies only when created)
 * @return {WSSharedDoc}
 */
 export const getYDoc = (docname, gc = true) => map.setIfUndefined(docs, docname, () => {
  const doc = new WSSharedDoc(docname)
  doc.gc = gc
  if (persistence !== null) {
    persistence.bindState(docname, doc)
  }
  docs.set(docname, doc)
  return doc
 })
 /**
 * @param {any} conn
 * @param {WSSharedDoc} doc
 * @param {Uint8Array} message
 */
 const messageListener = (conn, doc, message) => {
  try {
    const encoder = encoding.createEncoder()
    const decoder = decoding.createDecoder(new Uint8Array(message))
    const messageType = decoding.readVarUint(decoder)
    switch (messageType) {
      case messageSync:
        encoding.writeVarUint(encoder, messageSync)
        syncProtocol.readSyncMessage(decoder, encoder, doc, conn)
        // If the `encoder` only contains the type of reply message and no
        // message, there is no need to send the message. When `encoder` only
        // contains the type of reply, its length is 1.
        if (encoding.length(encoder) > 1) {
          send(doc, conn, encoding.toUint8Array(encoder))
        }
        break
      case messageAwareness: {
        awarenessProtocol.applyAwarenessUpdate(doc.awareness, decoding.readVarUint8Array(decoder), conn)
        break
      }
      // If this is a text or a message (no Yjs logic) - echo the message back to the client
      default: {
        conn.send(String(message))
        console.log(String(message))
        break
      }
    }
  } catch (err) {
    console.error(err)
    // @ts-ignore
    doc.emit('error', [err])
  }
 }
 /**
 * @param {WSSharedDoc} doc
 * @param {any} conn
 */
 const closeConn = (doc, conn) => {
  if (doc.conns.has(conn)) {
    /**
     * @type {Set<number>}
     */
    // @ts-ignore
    const controlledIds = doc.conns.get(conn)
    doc.conns.delete(conn)
    awarenessProtocol.removeAwarenessStates(doc.awareness, Array.from(controlledIds), null)
    if (doc.conns.size === 0 && persistence !== null) {
      // if persisted, we store state and destroy ydocument
      persistence.writeState(doc.name, doc).then(() => {
        doc.destroy()
      })
      docs.delete(doc.name)
    }
  }
  conn.close()
 }
 /**
 * @param {WSSharedDoc} doc
 * @param {import('ws').WebSocket} conn
 * @param {Uint8Array} m
 */
 const send = (doc, conn, m) => {
  if (conn.readyState !== wsReadyStateConnecting && conn.readyState !== wsReadyStateOpen) {
    closeConn(doc, conn)
  }
  try {
    conn.send(m, {}, err => { err != null && closeConn(doc, conn) })
  } catch (e) {
    closeConn(doc, conn)
  }
 }
 const pingTimeout = 30000
 /**
 * @param {import('ws').WebSocket} conn
 * @param {import('http').IncomingMessage} req
 * @param {any} opts
 */
 export const setupWSConnection = (conn, req, { docName = (req.url || '').slice(1).split('?')[0], gc = true } = {}) => {
  conn.binaryType = 'arraybuffer'
  // get doc, initialize if it does not exist yet
  const doc = getYDoc(docName, gc)
  doc.conns.set(conn, new Set())
  // listen and reply to events
  conn.on('message', /** @param {ArrayBuffer} message */ message => messageListener(conn, doc, message))
  // Check if connection is still alive
  let pongReceived = true
  const pingInterval = setInterval(() => {
    if (!pongReceived) {
      if (doc.conns.has(conn)) {
        closeConn(doc, conn)
      }
      clearInterval(pingInterval)
    } else if (doc.conns.has(conn)) {
      pongReceived = false
      try {
        conn.ping()
      } catch (e) {
        closeConn(doc, conn)
        clearInterval(pingInterval)
      }
    }
  }, pingTimeout)
  conn.on('close', () => {
    closeConn(doc, conn)
    clearInterval(pingInterval)
  })
  conn.on('pong', () => {
    pongReceived = true
  })
  // put the following in a variables in a block so the interval handlers don't keep in in
  // scope
  {
    // send sync step 1
    const encoder = encoding.createEncoder()
    encoding.writeVarUint(encoder, messageSync)
    syncProtocol.writeSyncStep1(encoder, doc)
    send(doc, conn, encoding.toUint8Array(encoder))
    const awarenessStates = doc.awareness.getStates()
    if (awarenessStates.size > 0) {
      const encoder = encoding.createEncoder()
      encoding.writeVarUint(encoder, messageAwareness)
      encoding.writeVarUint8Array(encoder, awarenessProtocol.encodeAwarenessUpdate(doc.awareness, Array.from(awarenessStates.keys())))
      send(doc, conn, encoding.toUint8Array(encoder))
    }
  }
 }
Author	SHA1	Message	Date
Peter Thomas	d34db87df3	Component split, UI enhancement and Light, airy, generous whitespace. Sharp editorial typography using DM Sans + Playfair Display. Thin borders, subtle vote progress bars, clean status indicators. Nothing heavy.	2026-03-31 13:37:01 +01:00
Patrick Charrier	2462872e24	feat: add proposed group solution	2026-03-29 21:24:42 +02:00