Initial Commit

static/css/styles.css

@@ -0,0 +1,426 @@
+:root {
+    --desktop-bg: #008080;
+    --window-bg: #c0c0c0;
+    --window-text: #000000;
+    --border-light: #ffffff;
+    --border-dark: #000000;
+    --border-mid-light: #dfdfdf;
+    --border-mid-dark: #808080;
+    --title-bg: #000080;
+    --title-text: #ffffff;
+    --input-bg: #ffffff;
+    --status-bg: #b3b3b3;
+    --board-bg: #0f6d3d;
+    --card-bg: #ffffff;
+    --card-text: #000000;
+}
+
+[data-theme="dark"] {
+    --desktop-bg: #0a0a0a;
+    --window-bg: #2b2b2b;
+    --window-text: #e0e0e0;
+    --border-light: #555555;
+    --border-dark: #000000;
+    --border-mid-light: #3a3a3a;
+    --border-mid-dark: #1a1a1a;
+    --title-bg: #000000;
+    --title-text: #00ff00;
+    --input-bg: #111111;
+    --status-bg: #1b1b1b;
+    --board-bg: #0a2c14;
+    --card-bg: #171717;
+    --card-text: #00ff66;
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    font-family: 'VT323', monospace;
+}
+
+body {
+    background-color: var(--desktop-bg);
+    color: var(--window-text);
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.12) 1px, transparent 1px);
+    background-size: 4px 4px;
+}
+
+#desktop {
+    flex: 1;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 28px 16px 40px;
+}
+
+.top-bar {
+    position: fixed;
+    top: 12px;
+    right: 12px;
+    z-index: 10;
+}
+
+.window {
+    background-color: var(--window-bg);
+    border: 2px solid;
+    border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
+    padding: 2px;
+    box-shadow: inset 1px 1px var(--border-mid-light), inset -1px -1px var(--border-mid-dark);
+}
+
+.title-bar {
+    background-color: var(--title-bg);
+    color: var(--title-text);
+    padding: 2px 4px;
+    font-size: 1.25rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    letter-spacing: 0.8px;
+}
+
+.title-bar-controls {
+    display: inline-flex;
+    gap: 2px;
+}
+
+.title-bar-controls button {
+    background: var(--window-bg);
+    border: 1px solid;
+    border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
+    width: 16px;
+    height: 16px;
+    font-size: 0.8rem;
+    line-height: 10px;
+    text-align: center;
+    color: var(--window-text);
+    font-weight: bold;
+    pointer-events: none;
+}
+
+.window-content {
+    padding: 12px;
+}
+
+.config-window {
+    width: 100%;
+    max-width: 980px;
+}
+
+.intro-copy {
+    font-size: 1.3rem;
+    margin-bottom: 12px;
+}
+
+.room-form {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.config-layout {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 320px;
+    gap: 12px;
+    align-items: start;
+}
+
+.config-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.field-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 10px;
+}
+
+.field-group {
+    display: flex;
+    flex-direction: column;
+}
+
+.field-group label,
+legend {
+    font-size: 1.2rem;
+    margin-bottom: 4px;
+}
+
+input[type="text"],
+input[type="number"],
+select {
+    background: var(--input-bg);
+    color: var(--window-text);
+    border: 2px solid;
+    border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
+    padding: 5px 6px;
+    font-size: 1.2rem;
+    width: 100%;
+    outline: none;
+}
+
+input[type="text"]:focus,
+input[type="number"]:focus,
+select:focus {
+    box-shadow: inset 0 0 0 1px var(--title-bg);
+}
+
+input[type="number"] {
+    appearance: textfield;
+    -moz-appearance: textfield;
+}
+
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+.number-input-wrap {
+    display: flex;
+    align-items: center;
+    background: var(--input-bg);
+    border: 2px solid;
+    border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
+    padding: 0 6px;
+    min-height: 38px;
+}
+
+.number-input-wrap input[type="number"] {
+    border: 0;
+    box-shadow: none;
+    background: transparent;
+    padding: 5px 0;
+}
+
+.number-with-unit {
+    gap: 8px;
+}
+
+.input-unit {
+    font-size: 1rem;
+    opacity: 0.8;
+    min-width: 26px;
+    text-align: right;
+}
+
+.options-box {
+    padding: 8px;
+}
+
+.options-box legend {
+    padding: 0 4px;
+}
+
+.option-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 1.2rem;
+    margin: 6px 0;
+}
+
+.option-item input[type="checkbox"] {
+    width: 16px;
+    height: 16px;
+    accent-color: #000080;
+}
+
+[data-theme="dark"] .option-item input[type="checkbox"] {
+    accent-color: #00aa00;
+}
+
+.preview-window {
+    width: 100%;
+}
+
+.preview-content {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.preview-meta {
+    display: flex;
+    justify-content: space-between;
+    font-size: 1.1rem;
+}
+
+.preview-board {
+    background: var(--board-bg);
+    border: 2px solid;
+    border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
+    border-radius: 2px;
+    min-height: 190px;
+    padding: 10px;
+}
+
+.preview-cards {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    align-content: flex-start;
+}
+
+.preview-card {
+    position: relative;
+    width: 50px;
+    height: 72px;
+    background: var(--card-bg);
+    border: 2px solid #000;
+    border-radius: 5px;
+    color: var(--card-text);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    font-weight: bold;
+    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
+    user-select: none;
+    transition: transform 180ms ease, opacity 180ms ease;
+    cursor: default;
+}
+
+.preview-card-remove {
+    position: absolute;
+    top: -6px;
+    right: -6px;
+    width: 18px;
+    height: 18px;
+    border: 1px solid;
+    border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
+    background: #a40000;
+    color: #fff;
+    font-size: 0.8rem;
+    line-height: 14px;
+    opacity: 0;
+    transform: scale(0.85);
+    pointer-events: none;
+    transition: opacity 130ms ease, transform 130ms ease;
+    cursor: pointer;
+}
+
+.preview-card:hover .preview-card-remove,
+.preview-card-remove:focus {
+    opacity: 1;
+    transform: scale(1);
+    pointer-events: auto;
+}
+
+.preview-card.is-removing {
+    opacity: 0;
+    transform: scale(0.55) rotate(-8deg);
+}
+
+.card-editor {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.card-editor label {
+    font-size: 1.1rem;
+}
+
+.card-editor-row {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: 6px;
+}
+
+.status-line {
+    background: var(--status-bg);
+    border: 2px solid;
+    border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
+    padding: 5px 8px;
+    font-size: 1.1rem;
+    min-height: 30px;
+}
+
+.actions-row {
+    text-align: right;
+    margin-top: 4px;
+}
+
+.btn {
+    background: var(--window-bg);
+    color: var(--window-text);
+    border: 2px solid;
+    border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
+    box-shadow: inset 1px 1px var(--border-mid-light), inset -1px -1px var(--border-mid-dark);
+    padding: 4px 12px;
+    font-size: 1.2rem;
+    cursor: pointer;
+    margin-left: 6px;
+}
+
+.btn:active {
+    border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
+    box-shadow: inset 1px 1px var(--border-mid-dark), inset -1px -1px var(--border-mid-light);
+    padding: 5px 11px 3px 13px;
+}
+
+.btn-primary {
+    font-weight: bold;
+}
+
+.taskbar {
+    height: 30px;
+    background: var(--window-bg);
+    border-top: 2px solid var(--border-light);
+    box-shadow: inset 0 1px var(--border-mid-light);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 3px 6px;
+}
+
+.taskbar-start,
+.taskbar-status {
+    border: 2px solid;
+    border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
+    box-shadow: inset 1px 1px var(--border-mid-light), inset -1px -1px var(--border-mid-dark);
+    padding: 0 8px;
+    font-size: 1.1rem;
+    height: 20px;
+    display: inline-flex;
+    align-items: center;
+}
+
+.taskbar-status {
+    min-width: 180px;
+}
+
+@media (max-width: 960px) {
+    .config-layout {
+        grid-template-columns: 1fr;
+    }
+}
+
+@media (max-width: 720px) {
+    #desktop {
+        align-items: flex-start;
+        padding-top: 56px;
+    }
+
+    .field-row {
+        grid-template-columns: 1fr;
+    }
+
+    .actions-row {
+        display: flex;
+        justify-content: flex-end;
+        gap: 8px;
+    }
+
+    .btn {
+        margin-left: 0;
+    }
+}

static/js/app.js

@@ -0,0 +1,184 @@
+const themeToggleBtn = document.getElementById('theme-toggle');
+const roomConfigForm = document.getElementById('room-config-form');
+const statusLine = document.getElementById('config-status');
+const scaleSelect = document.getElementById('estimation-scale');
+const maxPeopleInput = document.getElementById('max-people');
+const previewScale = document.getElementById('preview-scale');
+const previewMaxPeople = document.getElementById('preview-max-people');
+const previewCards = document.getElementById('preview-cards');
+const customCardInput = document.getElementById('custom-card');
+const addCardButton = document.getElementById('add-card');
+
+const SCALE_PRESETS = {
+    fibonacci: ['0', '1', '2', '3', '5', '8', '13', '21', '?'],
+    tshirt: ['XS', 'S', 'M', 'L', 'XL', '?'],
+    'powers-of-two': ['1', '2', '4', '8', '16', '32', '?'],
+};
+
+let isDarkMode = false;
+let nextCardID = 1;
+let currentCards = [];
+
+themeToggleBtn.addEventListener('click', () => {
+    isDarkMode = !isDarkMode;
+    if (isDarkMode) {
+        document.documentElement.setAttribute('data-theme', 'dark');
+        themeToggleBtn.textContent = 'Light Mode';
+        return;
+    }
+
+    document.documentElement.removeAttribute('data-theme');
+    themeToggleBtn.textContent = 'Dark Mode';
+});
+
+function createCard(value) {
+    return { id: nextCardID++, value: value.toString() };
+}
+
+function getCardsForScale(scale) {
+    return (SCALE_PRESETS[scale] || SCALE_PRESETS.fibonacci).map(createCard);
+}
+
+function captureCardPositions() {
+    const positions = new Map();
+    previewCards.querySelectorAll('.preview-card').forEach((el) => {
+        positions.set(el.dataset.cardId, el.getBoundingClientRect());
+    });
+    return positions;
+}
+
+function animateCardReflow(previousPositions) {
+    previewCards.querySelectorAll('.preview-card').forEach((el) => {
+        const oldRect = previousPositions.get(el.dataset.cardId);
+        if (!oldRect) {
+            el.style.opacity = '0';
+            el.style.transform = 'scale(0.85)';
+            requestAnimationFrame(() => {
+                el.style.opacity = '1';
+                el.style.transform = 'translate(0, 0) scale(1)';
+            });
+            return;
+        }
+
+        const newRect = el.getBoundingClientRect();
+        const deltaX = oldRect.left - newRect.left;
+        const deltaY = oldRect.top - newRect.top;
+
+        if (deltaX === 0 && deltaY === 0) {
+            return;
+        }
+
+        el.style.transform = `translate(${deltaX}px, ${deltaY}px)`;
+        requestAnimationFrame(() => {
+            el.style.transform = 'translate(0, 0)';
+        });
+    });
+}
+
+function renderCards(previousPositions = new Map()) {
+    previewCards.innerHTML = '';
+
+    currentCards.forEach((card) => {
+        const cardEl = document.createElement('div');
+        cardEl.className = 'preview-card';
+        cardEl.dataset.cardId = String(card.id);
+        cardEl.textContent = card.value;
+
+        const removeBtn = document.createElement('button');
+        removeBtn.type = 'button';
+        removeBtn.className = 'preview-card-remove';
+        removeBtn.textContent = 'X';
+        removeBtn.setAttribute('aria-label', `Remove card ${card.value}`);
+        removeBtn.addEventListener('click', (event) => {
+            event.stopPropagation();
+            removeCard(card.id);
+        });
+
+        cardEl.appendChild(removeBtn);
+        previewCards.appendChild(cardEl);
+    });
+
+    animateCardReflow(previousPositions);
+}
+
+function removeCard(cardID) {
+    const cardEl = previewCards.querySelector(`[data-card-id="${cardID}"]`);
+    if (!cardEl) {
+        return;
+    }
+
+    cardEl.classList.add('is-removing');
+
+    window.setTimeout(() => {
+        const previousPositions = captureCardPositions();
+        currentCards = currentCards.filter((card) => card.id !== cardID);
+        renderCards(previousPositions);
+    }, 160);
+}
+
+function resetCardsForCurrentScale() {
+    const previousPositions = captureCardPositions();
+    currentCards = getCardsForScale(scaleSelect.value);
+    renderCards(previousPositions);
+}
+
+function updatePreviewMeta() {
+    previewScale.textContent = `Scale: ${scaleSelect.value}`;
+    previewMaxPeople.textContent = `Max: ${maxPeopleInput.value || 0}`;
+}
+
+addCardButton.addEventListener('click', () => {
+    const value = customCardInput.value.trim();
+    if (!value) {
+        return;
+    }
+
+    const previousPositions = captureCardPositions();
+    currentCards.push(createCard(value.slice(0, 8)));
+    renderCards(previousPositions);
+    customCardInput.value = '';
+    customCardInput.focus();
+});
+
+customCardInput.addEventListener('keydown', (event) => {
+    if (event.key === 'Enter') {
+        event.preventDefault();
+        addCardButton.click();
+    }
+});
+
+scaleSelect.addEventListener('change', () => {
+    resetCardsForCurrentScale();
+    updatePreviewMeta();
+    statusLine.textContent = 'Card deck reset to selected estimation scale.';
+});
+
+maxPeopleInput.addEventListener('input', () => {
+    updatePreviewMeta();
+});
+
+roomConfigForm.addEventListener('submit', (event) => {
+    event.preventDefault();
+
+    const formData = new FormData(roomConfigForm);
+    const roomName = (formData.get('roomName') || '').toString().trim();
+    const username = (formData.get('username') || '').toString().trim();
+
+    if (!roomName || !username) {
+        statusLine.textContent = 'Please fill in both room name and username.';
+        return;
+    }
+
+    statusLine.textContent = `Room "${roomName}" prepared by ${username} with ${currentCards.length} cards.`;
+});
+
+roomConfigForm.addEventListener('reset', () => {
+    window.setTimeout(() => {
+        updatePreviewMeta();
+        resetCardsForCurrentScale();
+        statusLine.textContent = 'Room settings reset to defaults.';
+    }, 0);
+});
+
+updatePreviewMeta();
+resetCardsForCurrentScale();