Add initial implementation of P2P Poll app with HTML, CSS, and JavaScript

2026-03-07 19:34:19 +01:00
5 changed files with 370 additions and 204 deletions
--- a/PollingApp.html
+++ b/PollingApp.html
@@ -1,200 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Peer‑to‑Peer Poll – up to 14 users (no vote loops)</title>
 <style>
  body {font-family:Arial,Helvetica,sans-serif; margin:20px;}
  #options li {margin:5px 0;}
  button {margin-left:5px;}
 </style>
 </head>
 <body>
 <h2>Peer‑to‑Peer Poll (max 14 participants)</h2>
 <div id="setup">
  <label>Your Peer ID: <input id="myId" readonly size="30"></label><br><br>
  <label>Room host ID (leave empty if you are the first client):
    <input id="hostId" placeholder="host peer id">
  </label>
  <button id="joinBtn">Join / Create Room</button>
  <p id="status"></p>
 </div>
 <hr>
 <h3>Poll</h3>
 <ul id="options"></ul>
 <input id="newOption" placeholder="New option text">
 <button id="addOptionBtn">Add option</button>
 <script src="https://unpkg.com/peerjs@1.5.4/dist/peerjs.min.js"></script>
 <script>
 /* ---------- 1. Initialise PeerJS ---------- */
 const peer = new Peer();                     // public signalling server
 const myIdInput = document.getElementById('myId');
 const statusEl   = document.getElementById('status');
 let isHost = false;                          // true for the first client
 let connections = [];                        // all open DataConnections
 let knownPeers = new Set();                  // IDs of every peer we know (including host)
 peer.on('open', id => {
  myIdInput.value = id;
  statusEl.textContent = 'Enter a host ID (or leave empty) and click Join.';
 });
 /* ---------- 2. Accept incoming connections (host side) ---------- */
 peer.on('connection', incoming => {
  registerConnection(incoming);
 });
 /* ---------- 3. Join / create a room ---------- */
 document.getElementById('joinBtn').onclick = () => {
  const hostId = document.getElementById('hostId').value.trim();
  if (hostId) {
    isHost = false;
    connectToPeer(hostId);
    statusEl.textContent = `Connecting to host ${hostId}…`;
  } else {
    isHost = true;
    knownPeers.add(peer.id);
    statusEl.textContent = 'Room created – share this Peer ID with others.';
  }
 };
 /* ---------- 4. Helper: connect to a remote peer ---------- */
 function connectToPeer(peerId) {
  if (knownPeers.has(peerId)) return;
  const conn = peer.connect(peerId);
  registerConnection(conn);
 }
 /* ---------- 5. Register a DataConnection ---------- */
 function registerConnection(conn) {
  if (!conn) return;
  connections.push(conn);
  knownPeers.add(conn.peer);
  conn.on('open', () => {
    // 1️⃣ Send full poll state
    conn.send({type: 'full', payload: poll, msgId: crypto.randomUUID()});
    // 2️⃣ If we are the host, tell the newcomer about other peers
    if (isHost) {
      const others = Array.from(knownPeers).filter(id => id !== conn.peer && id !== peer.id);
      if (others.length) conn.send({type: 'peer-list', payload: others, msgId: crypto.randomUUID()});
    }
  });
  conn.on('data', data => handleMessage(data, conn.peer));
  conn.on('close', () => {
    connections = connections.filter(c => c !== conn);
    knownPeers.delete(conn.peer);
  });
 }
 /* ---------- 6. Shared poll state ---------- */
 let poll = {options: []};   // each option: {id, text, votes}
 /* ---------- 7. Track my own votes ---------- */
 const myVotes = new Set();   // option.id values
 /* ---------- 8. Remember which messages we already processed ---------- */
 const seenMsgIds = new Set();
 /* ---------- 9. Broadcast helper (skip the sender) ---------- */
 function broadcast(msg, except = null) {
  connections.forEach(c => {
    if (c.open && c.peer !== except) c.send(msg);
  });
 }
 /* ---------- 10. Message handling ---------- */
 function handleMessage(msg, senderId) {
  // Ignore duplicates
  if (seenMsgIds.has(msg.msgId)) return;
  seenMsgIds.add(msg.msgId);
  switch (msg.type) {
    case 'full':
      poll = msg.payload;
      render();
      break;
    case 'add':
      poll.options.push(msg.payload);
      render();
      broadcast(msg, senderId);   // forward once
      break;
    case 'vote':
      const opt = poll.options.find(o => o.id === msg.payload.id);
      if (opt) opt.votes++;
      render();
      broadcast(msg, senderId);
      break;
    case 'peer-list':
      msg.payload.forEach(id => {
        if (id !== peer.id && !knownPeers.has(id)) connectToPeer(id);
      });
      break;
  }
 }
 /* ---------- 11. UI rendering ---------- */
 function render() {
  const ul = document.getElementById('options');
  ul.innerHTML = '';
  poll.options.forEach(opt => {
    const li = document.createElement('li');
    li.textContent = `${opt.text} – ${opt.votes} vote(s)`;
    const btn = document.createElement('button');
    btn.textContent = myVotes.has(opt.id) ? 'Voted' : 'Vote';
    btn.disabled = myVotes.has(opt.id);
    btn.onclick = () => {
      // Record locally – prevents double‑click on the same client
      myVotes.add(opt.id);
      btn.textContent = 'Voted';
      btn.disabled = true;
      const voteMsg = {
        type: 'vote',
        payload: {id: opt.id},
        msgId: crypto.randomUUID()
      };
      // Apply locally first
      opt.votes++;
      render();
      // Send to all peers
      broadcast(voteMsg);
    };
    li.appendChild(btn);
    ul.appendChild(li);
  });
 }
 /* ---------- 12. Add new option ---------- */
 document.getElementById('addOptionBtn').onclick = () => {
  const txt = document.getElementById('newOption').value.trim();
  if (!txt) return;
  const option = {id: crypto.randomUUID(), text: txt, votes: 0};
  poll.options.push(option);
  render();
  const addMsg = {
    type: 'add',
    payload: option,
    msgId: crypto.randomUUID()
  };
  broadcast(addMsg);
  document.getElementById('newOption').value = '';
 };
 </script>
 </body>
 </html>
--- a/README.md
+++ b/README.md
@@ -1,7 +1,14 @@
 # P2P Poll App
-This is a very simple polling app using peerjs.
+P2P Poll - Minimal GUN-based Scaffolding
 It runs as a single HTML file and can handle multiple users in one poll room.
 The app once open is self explanatory.
 App created with the help of GPTOSS120B.
 What this is
 - A tiny peer-to-peer polling app implemented with vanilla JS and GUN (a decentralized, CRDT-friendly database).
 - No central server for poll data. Peers connect and synchronize the poll in real-time.
 Notes
 - This scaffold uses GUN’s browser-based peer-to-peer data replication.
 - You can extend with:
  - Persistent storage on each peer
  - Better conflict resolution UI
  - Optional signaling server for explicit peer discovery
--- a/app.js
+++ b/app.js
@@ -0,0 +1,200 @@
 // Minimal GUN-based P2P Poll scaffold (vanilla JS)
 (function() {
  // Initialize GUN (no server needed; can optionally connect to a relay server)
  // If you want a local-only node for prototyping: Gun()
  // If you want to use a signaling server for discovery, pass a list of peers to Gun().opt({peers: [...]})
  const gun = Gun();
  // DOM helpers
  const pollSection = document.getElementById('poll');
  const pollIdInput = document.getElementById('pollId');
  const loadPollBtn = document.getElementById('loadPollBtn');
  const createPollBtn = document.getElementById('createPollBtn');
  const pollTitleInput = document.getElementById('pollTitle');
  const setTitleBtn = document.getElementById('setTitleBtn');
  const optionsDiv = document.getElementById('options');
  const newOptionInput = document.getElementById('newOption');
  const addOptionBtn = document.getElementById('addOptionBtn');
  const totalVotesSpan = document.getElementById('totalVotes');
  const pollIdDisplay = document.getElementById('pollIdDisplay');
  let currentPollId = null;
  let pollsRef = null; // Gun node for /polls/{pollId}
  let pollData = null; // local cache
  // Helpers
  function renderOptionList(options) {
    optionsDiv.innerHTML = '';
    const keys = Object.keys(options || {});
    if (keys.length === 0) {
      optionsDiv.innerHTML = '<p>No options yet. Add one below.</p>';
      return;
    }
    keys.forEach((optId) => {
      const opt = options[optId];
      const el = document.createElement('div');
      el.className = 'option';
      el.innerHTML = `
        <span class="text">${opt.text}</span>
        <button data-optid="${optId}" class="voteBtn">Vote (${opt.votes || 0})</button>
      `;
      optionsDiv.appendChild(el);
    });
  }
  function updateTotalVotes() {
    const opts = pollData && pollData.options ? pollData.options : {};
    const total = Object.values(opts).reduce((sum, o) => sum + (o.votes || 0), 0);
    totalVotesSpan.textContent = total;
  }
  // Load existing poll and subscribe to changes
  function loadPoll(pollId) {
    if (!pollId) return;
    currentPollId = pollId;
    pollIdDisplay.textContent = pollId;
    pollsRef = gun.get('polls').get(pollId);
    // Initialize structure if new poll
    pollsRef.get('title').put('Untitled Poll');
    pollsRef.get('options').put({}); // ensure map exists
    // Real-time updates: listen to changes
    pollsRef.get('title').on((title) => {
      pollTitleInput.value = title || '';
    });
    pollsRef.on((data) => {
      // data is the entire poll node if subscribed; but we explore explicit fields
    });
    // For options map
    pollsRef.get('options').on((opts) => {
      // opts is the entire options map; convert to plain object
      const optionsObj = toPlainObject(opts);
      pollData = {
        title: null,
        options: optionsObj
      };
      renderOptionList(optionsObj);
      updateTotalVotes();
    });
    // Also listen for title changes separately (in case some clients push via title path)
    pollsRef.get('title').on((title) => {
      pollTitleInput.value = title || '';
    });
    // Show UI
    document.getElementById('setup').style.display = 'none';
    pollSection.style.display = 'block';
  }
  // Create a new poll
  function createPoll() {
    const pollId = pollIdInput.value.trim();
    if (!pollId) {
      alert('Please enter a poll ID to create.');
      return;
    }
    currentPollId = pollId;
    // Initialize poll
    pollsRef = gun.get('polls').get(pollId);
    pollsRef.put({
      title: 'New Poll',
    });
    pollsRef.get('options').put({}); // ensure map exists
    // reflect in UI
    pollIdDisplay.textContent = pollId;
    pollTitleInput.value = 'New Poll';
    pollSection.style.display = 'block';
    document.getElementById('setup').style.display = 'none';
  }
  // Add option
  function addOption() {
    if (!pollsRef) {
      alert('Load or create a poll first.');
      return;
    }
    const text = newOptionInput.value.trim();
    if (!text) return;
    const optionId = 'opt_' + Date.now();
    pollsRef.get('options').get(optionId).put({ text, votes: 0 });
    newOptionInput.value = '';
  }
  // Set title
  function setTitle() {
    if (!pollsRef) return;
    const title = pollTitleInput.value.trim() || 'Untitled';
    pollsRef.get('title').put(title);
  }
  // Vote handler (delegated)
  function handleVoteClick(e) {
    if (e.target.classList.contains('voteBtn')) {
      const optId = e.target.getAttribute('data-optid');
      if (!optId || !pollsRef) return;
      const optRef = pollsRef.get('options').get(optId);
      // Increment votes locally
      optRef.get('votes').once((v) => {
        const current = v || 0;
        optRef.put({ votes: current + 1 });
      });
      // UI will update via the on() listener on options map
    }
  }
  // Utilities
  function toPlainObject(obj) {
    // Gun emits special proxy-like objects; convert to plain object
    if (!obj) return {};
    // If it's already a plain object, return
    if (typeof obj !== 'object') return {};
    // Gun events deliver object-like; attempt shallow copy
    try {
      const copy = JSON.parse(JSON.stringify(obj));
      return copy;
    } catch (e) {
      // Fallback: return as-is if cannot stringify
      return obj;
    }
  }
  // Event bindings
  loadPollBtn.addEventListener('click', () => {
    const id = pollIdInput.value.trim();
    if (!id) {
      alert('Enter a Poll ID to load.');
      return;
    }
    loadPoll(id);
  });
  createPollBtn.addEventListener('click', () => {
    createPoll();
  });
  addOptionBtn.addEventListener('click', addOption);
  newOptionInput.addEventListener('keydown', (ev) => {
    if (ev.key === 'Enter') addOption();
  });
  setTitleBtn.addEventListener('click', setTitle);
  // Delegate vote clicks
  optionsDiv.addEventListener('click', handleVoteClick);
  // Initialize: optionally auto-create a poll if URL param present
  // Example: ?pollId=my-poll-123
  const urlParams = new URLSearchParams(window.location.search);
  const autoPoll = urlParams.get('pollId');
  if (autoPoll) {
    pollIdInput.value = autoPoll;
    loadPoll(autoPoll);
  }
 })();
--- a/index.html
+++ b/index.html
@@ -0,0 +1,55 @@
 <!doctype html>
 <html lang="en">
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>P2P Poll</title>
  <link rel="stylesheet" href="styles.css" />
  <!-- Gun.js via CDN for quick start -->
  <script src="https://unpkg.com/gun/gun.js"></script>
 </head>
 <body>
  <div class="container">
    <h1>P2P Poll</h1>
    <section id="setup" class="card">
      <h2>Start or Join Poll</h2>
      <div class="field">
        <label for="pollId">Poll ID (share with peer):</label>
        <input id="pollId" type="text" placeholder="e.g. my-poll-123" />
      </div>
      <button id="loadPollBtn">Load Poll</button>
      <button id="createPollBtn">Create New Poll</button>
      <p class="note">Tip: You can run two instances and connect by using the same Poll ID.</p>
    </section>
    <section id="poll" class="card" style="display:none;">
      <h2>Poll</h2>
      <div class="field">
        <label for="pollTitle">Poll Title</label>
        <input id="pollTitle" type="text" placeholder="Poll Title" />
        <button id="setTitleBtn">Set Title</button>
      </div>
      <div id="options" class="options">
        <!-- dynamic options will render here -->
      </div>
      <div class="field">
        <input id="newOption" type="text" placeholder="Add a new option" />
        <button id="addOptionBtn">Add Option</button>
      </div>
      <div class="summary">
        <p>Total votes: <span id="totalVotes">0</span></p>
      </div>
      <div class="share">
        <p>Share Poll ID with peer: <code id="pollIdDisplay"></code></p>
      </div>
    </section>
  </div>
  <script src="app.js"></script>
 </body>
 </html>
--- a/styles.css
+++ b/styles.css
@@ -0,0 +1,104 @@
 :root {
    --bg: #0f1220;
    --card: #1a1740;
    --text: #e8e3ff;
    --muted: #b8a7d2;
    --accent: #6bd3ff;
 }
 * {
    box-sizing: border-box;
 }
 html,
 body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background: #0b0a14;
    color: #fff;
    height: 100%;
 }
 .container {
    max-width: 700px;
    margin: 40px auto;
    padding: 0 16px;
 }
 .card {
    background: #1f1740;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 14px;
    border: 1px solid #2a1950;
 }
 .field {
    margin-bottom: 12px;
    display: flex;
    gap: 8px;
    align-items: center;
 }
 label {
    min-width: 180px;
 }
 input[type="text"] {
    flex: 1;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid #5a2d8a;
    background: #2a174f;
    color: #fff;
 }
 button {
    padding: 8px 12px;
    border-radius: 6px;
    border: none;
    background: #6bd3ff;
    color: #04152a;
    font-weight: bold;
    cursor: pointer;
 }
 button:hover {
    opacity: 0.95;
 }
 .options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
 }
 .option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    background: #2a174f;
    border: 1px solid #40217a;
    border-radius: 6px;
 }
 .option .text {
    flex: 1;
 }
 .share {
    font-size: 0.9em;
    color: var(--muted);
 }
 .note {
    color: #c8b5ff;
    font-size: 0.9em;
 }
 .total {
    font-weight: bold;
 }