Compare commits
3 Commits
group-efa1
...
t.homas-pa
| Author | SHA1 | Date | |
|---|---|---|---|
| 4a594269f5 | |||
| fc5f47cf25 | |||
| aa16ef0fa9 |
2
.gitignore
vendored
2
.gitignore
vendored
@@ -1,2 +0,0 @@
|
||||
dist
|
||||
node_modules
|
||||
69
README.md
69
README.md
@@ -1,44 +1,37 @@
|
||||
# P2P Poll App
|
||||
There are lots of trust-issues:
|
||||
The possiblity to generate lots of users that do a lot of things (at a rather low cost)
|
||||
The possibility to put out wrong data, maby not even contradicting but additional to existing data.
|
||||
The possibility to do all kinds of shenenigans like spam other users with some requests
|
||||
|
||||
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.
|
||||
Due to low programming knowledge, the starting point of this proposal was to mirror how normal groups of people solve issues of trust to then automate and possibly improve the process. There are already some systems out there like Trust flow or random walk.As far as i understand it, the Flexible Trust Web also already does something like this, also maby RWOT and GNUweb but i didn't read into them too much yet since i discovered them rather late.
|
||||
|
||||
## Features
|
||||
If random new people should be able to use the system as equals to previous users, but the system never has real identities as an input, then there is no way to fully prevent the creation of new users to manipulate or sabotage the poll. But it can be assumed, that your friends are rather trustworthy and most likely also their friends and so on. And if someone makes huge ammounts or just one second account, they will probably only have the creator or maby some other people as friends, and even they might already be less socially connected than a normal user.
|
||||
So the social distance to another user should be evaluated to see, whether you should count their vote.
|
||||
This is evaluated for and by every user individually, based on the information they were sent. The ammount of contacts you won't count are displayed to you, such that you get a hint at how many people you are missing but also how many people are not counting you. This encourages people to try to prove others/vise versa and make social connections to officially tie the network closer together such that the voting system works and confirms itself. It would be great, if there was some chat attached to the poll. If people want to prove their (or others) trustworhiness within this system, they are then also encouraged to have productive discussions, probably about the matter of the poll.
|
||||
Everyone in a poll with you is a "contact" of yours.
|
||||
"users" can have "friends".
|
||||
You can also manually mark users as suspicious or trustworthy or normal again.
|
||||
The system for evaluating the trustworthyness of users is somehow a mix between the concepts "weighted path score" and "trust flow" with 5 steps.
|
||||
That means for 5 steps starting with you, all friends and trusted people of people looked at in this step get some trust from the people we look at: 0.8 * The trust of the looked at person (if trusted) + 0.8 * The trust of the looked at person / friends the looked at person has (if friend). Then the trust of the person that received trust may maximally be 100. The Trust you have to yourself is 100.
|
||||
You can also mark someone as trustworthy or untrustworthy. That is then also sent around to everyone if you want(should be the standard, but maby a user wants to just see how the trustworthyness will look like after the change).
|
||||
If you receive such an information, you can make the following calculations immidiately and after every assesment of everyones trustworthyness:
|
||||
If the accused is less trustworthy then the accusing person, decrease the accused trustworthyness to 0 and the accused friends and trustees trustworthyness by the trustworthyness of the accusing person.
|
||||
If the trustworhyness of the accusing person is less than the trustworthyness of the accused, then reduce the trustworthyness of the accusing person to 0 and the accusing persons friends and trustees by the trustworthyness of the accused.
|
||||
If you mark someone as trustworthy:
|
||||
The Trust flowing to the trusted person from you will also be 0.8 of your trust.
|
||||
Maby this should also be the effect of beeing "friends" since "trust" might be something you could more intuitively casually deal out after a short chat. If that change were to occur, then the effect would have to be switched around.
|
||||
All contacts can maximally have the Trust 100.
|
||||
|
||||
- **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
|
||||
Future matters:
|
||||
If there can be any discrepancy of sent information, depending on what sender you trust most, you will mark one of the senders as untrustworthy and neglect all future information from this user. Since everything can be signed and such, that shouldnˋt be an issue tho, but if it was, the ammount of "useless" messages to already informed people might have to increase to validate received data.
|
||||
A system to showcase the social connections in a 2D - format would be neat.
|
||||
(most likely something like this exists already)
|
||||
Obviously the user would also have to see other context like the total of all votes (trusted or not)
|
||||
|
||||
- [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
|
||||
```
|
||||
|
||||
Open `http://localhost:5173/?room=my-poll` in multiple browser tabs to test.
|
||||
|
||||
To test across devices on the same network:
|
||||
|
||||
```bash
|
||||
npm run dev -- --host
|
||||
```
|
||||
|
||||
Then open the URL shown in the terminal on other devices.
|
||||
|
||||
## How It Works
|
||||
|
||||
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
|
||||
Anonymous polls:
|
||||
A system of individually assigned trust poses a challenge for a system where you can decide not to trust some voters.
|
||||
If there is no other option some compromises might be makable, such as:
|
||||
-Your Friends can know what you voted for
|
||||
-The Person initiating a poll just decides on the validity of participants according to an own judgement of trust at the moment of poll-creation
|
||||
13
index.html
13
index.html
@@ -1,13 +0,0 @@
|
||||
<!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>
|
||||
1437
package-lock.json
generated
1437
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
18
package.json
18
package.json
@@ -1,18 +0,0 @@
|
||||
{
|
||||
"name": "p2p-poll",
|
||||
"private": true,
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"yjs": "^13.6.0",
|
||||
"y-webrtc": "^10.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"vite": "^6.0.0"
|
||||
}
|
||||
}
|
||||
@@ -1,47 +0,0 @@
|
||||
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;
|
||||
}
|
||||
@@ -1,77 +0,0 @@
|
||||
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;
|
||||
}
|
||||
@@ -1,44 +0,0 @@
|
||||
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, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"');
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
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;
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
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;
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
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;
|
||||
}
|
||||
41
src/main.js
41
src/main.js
@@ -1,41 +0,0 @@
|
||||
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);
|
||||
412
src/style.css
412
src/style.css
@@ -1,412 +0,0 @@
|
||||
/* ── 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; }
|
||||
}
|
||||
@@ -1,79 +0,0 @@
|
||||
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;
|
||||
}
|
||||
Reference in New Issue
Block a user