Initial Commit
This commit is contained in:
9
.dockerignore
Normal file
9
.dockerignore
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
.git
|
||||||
|
.gitignore
|
||||||
|
.vscode
|
||||||
|
.idea
|
||||||
|
README.md
|
||||||
|
frontend-mockup.html
|
||||||
|
**/*.log
|
||||||
|
**/.DS_Store
|
||||||
|
tmp
|
||||||
26
.gitignore
vendored
Normal file
26
.gitignore
vendored
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
# Binaries
|
||||||
|
*.exe
|
||||||
|
*.dll
|
||||||
|
*.so
|
||||||
|
*.dylib
|
||||||
|
*.test
|
||||||
|
*.out
|
||||||
|
|
||||||
|
# Build output
|
||||||
|
bin/
|
||||||
|
dist/
|
||||||
|
|
||||||
|
# Go workspace files
|
||||||
|
.coverprofile
|
||||||
|
|
||||||
|
# IDE/editor
|
||||||
|
.vscode/
|
||||||
|
.idea/
|
||||||
|
|
||||||
|
# OS files
|
||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
|
|
||||||
|
# Environment
|
||||||
|
.env
|
||||||
|
.env.*
|
||||||
28
Dockerfile
Normal file
28
Dockerfile
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
FROM golang:1.22-alpine AS build
|
||||||
|
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
COPY go.mod go.sum ./
|
||||||
|
RUN go mod download
|
||||||
|
|
||||||
|
COPY src ./src
|
||||||
|
COPY static ./static
|
||||||
|
|
||||||
|
RUN CGO_ENABLED=0 GOOS=linux go build -o /out/scrum-solitare ./src
|
||||||
|
|
||||||
|
FROM alpine:3.21
|
||||||
|
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
RUN addgroup -S app && adduser -S app -G app
|
||||||
|
|
||||||
|
COPY --from=build /out/scrum-solitare /app/scrum-solitare
|
||||||
|
COPY --from=build /app/src/templates /app/src/templates
|
||||||
|
COPY --from=build /app/static /app/static
|
||||||
|
|
||||||
|
EXPOSE 8002
|
||||||
|
ENV PORT=8002
|
||||||
|
|
||||||
|
USER app
|
||||||
|
|
||||||
|
ENTRYPOINT ["/app/scrum-solitare"]
|
||||||
55
README.md
Normal file
55
README.md
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
# Scrum Solitare
|
||||||
|
|
||||||
|
Win98-themed Scrum Poker web app scaffold using Go + Gin.
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- Gin server with default port `8002`
|
||||||
|
- Gzip compression enabled
|
||||||
|
- Cache headers for static `css`, `js`, and image assets
|
||||||
|
- Template rendering from `src/templates`
|
||||||
|
- Static file hosting from `static/`
|
||||||
|
- `/` currently serves a room configuration page (UI only)
|
||||||
|
|
||||||
|
## Project Layout
|
||||||
|
|
||||||
|
- `src/main.go`: Application bootstrap
|
||||||
|
- `src/config/`: Environment and runtime configuration
|
||||||
|
- `src/server/`: Gin engine construction and middleware wiring
|
||||||
|
- `src/routes/`: Route registration
|
||||||
|
- `src/controllers/`: HTTP handlers/controllers
|
||||||
|
- `src/middleware/`: Custom Gin middleware
|
||||||
|
- `src/models/`: Page/view data models
|
||||||
|
- `src/templates/`: HTML templates (`header`, `body`, `footer`, and `index` composition)
|
||||||
|
- `static/css/`: Stylesheets
|
||||||
|
- `static/js/`: Frontend scripts
|
||||||
|
- `static/img/`: Image assets
|
||||||
|
|
||||||
|
## Run Locally
|
||||||
|
|
||||||
|
```bash
|
||||||
|
go mod tidy
|
||||||
|
go run ./src
|
||||||
|
```
|
||||||
|
|
||||||
|
Open `http://localhost:8002`.
|
||||||
|
|
||||||
|
## Environment Variables
|
||||||
|
|
||||||
|
- `PORT`: Optional server port override (default is `8002`)
|
||||||
|
|
||||||
|
## Docker
|
||||||
|
|
||||||
|
Build image:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
docker build -t scrum-solitare .
|
||||||
|
```
|
||||||
|
|
||||||
|
Run container:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
docker run --rm -p 8002:8002 scrum-solitare
|
||||||
|
```
|
||||||
|
|
||||||
|
Then open `http://localhost:8002`.
|
||||||
520
frontend-mockup.html
Normal file
520
frontend-mockup.html
Normal file
@@ -0,0 +1,520 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Retro Scrum Poker</title>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* --- THEME VARIABLES --- */
|
||||||
|
:root {
|
||||||
|
/* Light Theme (Classic Win98) */
|
||||||
|
--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;
|
||||||
|
--solitaire-bg: #008000;
|
||||||
|
--card-bg: #ffffff;
|
||||||
|
--card-text: #000000;
|
||||||
|
--card-border: #000000;
|
||||||
|
--input-bg: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] {
|
||||||
|
/* Dark Theme (Nightmare/Hacker Win98) */
|
||||||
|
--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;
|
||||||
|
--solitaire-bg: #002200;
|
||||||
|
--card-bg: #1a1a1a;
|
||||||
|
--card-text: #00ff00;
|
||||||
|
--card-border: #555555;
|
||||||
|
--input-bg: #111111;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- GLOBAL STYLES --- */
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: 'VT323', monospace;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--desktop-bg);
|
||||||
|
color: var(--window-text);
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
background-image: radial-gradient(circle, rgba(0,0,0,0.1) 1px, transparent 1px);
|
||||||
|
background-size: 4px 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- WIN98 UI COMPONENTS --- */
|
||||||
|
.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);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-bar {
|
||||||
|
background-color: var(--title-bg);
|
||||||
|
color: var(--title-text);
|
||||||
|
padding: 2px 4px;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--window-text);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-bar-controls button:active {
|
||||||
|
border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
|
||||||
|
box-shadow: inset 1px 1px var(--border-mid-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.window-content {
|
||||||
|
padding: 10px;
|
||||||
|
flex-grow: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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; /* Shift text down */
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="text"], 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: 4px;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- LAYOUTS --- */
|
||||||
|
#desktop {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-bar {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- MODAL (LOGIN) --- */
|
||||||
|
#login-modal {
|
||||||
|
width: 350px;
|
||||||
|
z-index: 50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-group {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-group label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- MAIN APP WORKSPACE --- */
|
||||||
|
#app-workspace {
|
||||||
|
display: none; /* Hidden until login */
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
max-width: 1200px;
|
||||||
|
gap: 15px;
|
||||||
|
grid-template-columns: 2fr 1fr;
|
||||||
|
grid-template-rows: 2fr 1fr;
|
||||||
|
grid-template-areas:
|
||||||
|
"solitaire participants"
|
||||||
|
"results results";
|
||||||
|
}
|
||||||
|
|
||||||
|
/* --- SOLITAIRE AREA --- */
|
||||||
|
#solitaire-window {
|
||||||
|
grid-area: solitaire;
|
||||||
|
}
|
||||||
|
|
||||||
|
.solitaire-table {
|
||||||
|
background-color: var(--solitaire-bg);
|
||||||
|
height: 100%;
|
||||||
|
border: 2px solid;
|
||||||
|
border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
|
||||||
|
padding: 20px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 15px;
|
||||||
|
justify-content: center;
|
||||||
|
align-content: flex-start;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poker-card {
|
||||||
|
background-color: var(--card-bg);
|
||||||
|
border: 2px solid var(--card-border);
|
||||||
|
border-radius: 6px;
|
||||||
|
width: 80px;
|
||||||
|
height: 110px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 2.5rem;
|
||||||
|
color: var(--card-text);
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
transition: transform 0.1s ease;
|
||||||
|
box-shadow: 2px 2px 0px rgba(0,0,0,0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.poker-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.poker-card:active {
|
||||||
|
transform: translateY(0);
|
||||||
|
box-shadow: 1px 1px 0px rgba(0,0,0,0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.poker-card::before, .poker-card::after {
|
||||||
|
content: attr(data-value);
|
||||||
|
position: absolute;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poker-card::before { top: 5px; left: 5px; }
|
||||||
|
.poker-card::after { bottom: 5px; right: 5px; transform: rotate(180deg); }
|
||||||
|
|
||||||
|
/* --- PARTICIPANTS AREA --- */
|
||||||
|
#participants-window {
|
||||||
|
grid-area: participants;
|
||||||
|
}
|
||||||
|
|
||||||
|
.participant-list {
|
||||||
|
list-style: none;
|
||||||
|
background: var(--input-bg);
|
||||||
|
border: 2px solid;
|
||||||
|
border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
|
||||||
|
height: 100%;
|
||||||
|
padding: 5px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.participant-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 4px;
|
||||||
|
border-bottom: 1px dashed var(--border-mid-dark);
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-voting { color: #888; font-style: italic; }
|
||||||
|
.status-voted { color: #00aa00; font-weight: bold; }
|
||||||
|
[data-theme="dark"] .status-voted { color: #00ff00; }
|
||||||
|
|
||||||
|
/* --- RESULTS AREA --- */
|
||||||
|
#results-window {
|
||||||
|
grid-area: results;
|
||||||
|
}
|
||||||
|
|
||||||
|
.results-table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
background: var(--input-bg);
|
||||||
|
border: 2px solid;
|
||||||
|
border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.results-table th, .results-table td {
|
||||||
|
border: 1px solid var(--border-mid-dark);
|
||||||
|
padding: 8px;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.results-table th {
|
||||||
|
background: var(--window-bg);
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
box-shadow: inset 1px 1px var(--border-light), inset -1px -1px var(--border-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-card-badge {
|
||||||
|
display: inline-block;
|
||||||
|
background: var(--card-bg);
|
||||||
|
color: var(--card-text);
|
||||||
|
border: 1px solid var(--card-border);
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 2px 8px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div class="top-bar">
|
||||||
|
<button class="btn" id="theme-toggle">🌙 Dark Mode</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="desktop">
|
||||||
|
|
||||||
|
<div class="window" id="login-modal">
|
||||||
|
<div class="title-bar">
|
||||||
|
<span>Join.exe</span>
|
||||||
|
<div class="title-bar-controls">
|
||||||
|
<button>×</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="window-content">
|
||||||
|
<form id="join-form">
|
||||||
|
<div class="field-group">
|
||||||
|
<label for="username">Name:</label>
|
||||||
|
<input type="text" id="username" autocomplete="off" required placeholder="Enter your alias...">
|
||||||
|
</div>
|
||||||
|
<div class="field-group">
|
||||||
|
<label for="role">Role:</label>
|
||||||
|
<select id="role">
|
||||||
|
<option value="participant">Participant</option>
|
||||||
|
<option value="viewer">Viewer</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div style="text-align: right; margin-top: 20px;">
|
||||||
|
<button type="submit" class="btn">Connect</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="app-workspace">
|
||||||
|
|
||||||
|
<div class="window" id="solitaire-window">
|
||||||
|
<div class="title-bar">
|
||||||
|
<span>ScrumPoker_Solitaire.exe</span>
|
||||||
|
<div class="title-bar-controls">
|
||||||
|
<button>_</button>
|
||||||
|
<button>□</button>
|
||||||
|
<button>×</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="window-content solitaire-table" id="card-deck">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="window" id="participants-window">
|
||||||
|
<div class="title-bar">
|
||||||
|
<span>Network Users</span>
|
||||||
|
</div>
|
||||||
|
<div class="window-content" style="padding: 2px;">
|
||||||
|
<ul class="participant-list" id="user-list">
|
||||||
|
<li class="participant-item">
|
||||||
|
<span>Alice_Dev</span>
|
||||||
|
<span class="status-voted">Voted</span>
|
||||||
|
</li>
|
||||||
|
<li class="participant-item">
|
||||||
|
<span>Bob_QA</span>
|
||||||
|
<span class="status-voting">Voting...</span>
|
||||||
|
</li>
|
||||||
|
<li class="participant-item">
|
||||||
|
<span>Charlie_PM</span>
|
||||||
|
<span class="status-voting">Viewer</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="window" id="results-window">
|
||||||
|
<div class="title-bar">
|
||||||
|
<span>Vote Results.log</span>
|
||||||
|
</div>
|
||||||
|
<div class="window-content" style="padding: 2px; overflow-y: auto;">
|
||||||
|
<table class="results-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th style="width: 120px;">Card Picked</th>
|
||||||
|
<th>Participants</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="results-body">
|
||||||
|
<tr>
|
||||||
|
<td><span class="result-card-badge">5</span></td>
|
||||||
|
<td>Alice_Dev, Dave_BE</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><span class="result-card-badge">8</span></td>
|
||||||
|
<td>Eve_Designer</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><span class="result-card-badge">?</span></td>
|
||||||
|
<td>Bob_QA</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// --- THEME TOGGLE LOGIC ---
|
||||||
|
const themeToggleBtn = document.getElementById('theme-toggle');
|
||||||
|
let isDarkMode = false;
|
||||||
|
|
||||||
|
themeToggleBtn.addEventListener('click', () => {
|
||||||
|
isDarkMode = !isDarkMode;
|
||||||
|
if (isDarkMode) {
|
||||||
|
document.documentElement.setAttribute('data-theme', 'dark');
|
||||||
|
themeToggleBtn.textContent = '☀️ Light Mode';
|
||||||
|
} else {
|
||||||
|
document.documentElement.removeAttribute('data-theme');
|
||||||
|
themeToggleBtn.textContent = '🌙 Dark Mode';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// --- APP STATE ---
|
||||||
|
const fibonacciCards = ["0", "1", "2", "3", "5", "8", "13", "21", "?", "☕"];
|
||||||
|
let currentUser = { name: "", role: "participant", status: "Voting..." };
|
||||||
|
|
||||||
|
// --- DOM ELEMENTS ---
|
||||||
|
const loginModal = document.getElementById('login-modal');
|
||||||
|
const appWorkspace = document.getElementById('app-workspace');
|
||||||
|
const joinForm = document.getElementById('join-form');
|
||||||
|
const cardDeck = document.getElementById('card-deck');
|
||||||
|
const userList = document.getElementById('user-list');
|
||||||
|
|
||||||
|
// --- INITIALIZATION ---
|
||||||
|
function initDeck() {
|
||||||
|
cardDeck.innerHTML = '';
|
||||||
|
fibonacciCards.forEach(val => {
|
||||||
|
const card = document.createElement('div');
|
||||||
|
card.className = 'poker-card';
|
||||||
|
card.setAttribute('data-value', val);
|
||||||
|
card.textContent = val;
|
||||||
|
|
||||||
|
// Mock voting action
|
||||||
|
card.addEventListener('click', () => {
|
||||||
|
if(currentUser.role === 'viewer') {
|
||||||
|
alert("System Error: Viewers cannot vote.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
alert(`You selected card: ${val}. In a real app, this would trigger a socket update!`);
|
||||||
|
|
||||||
|
// Mock UI update for user status
|
||||||
|
const myListItem = document.getElementById('my-user-item');
|
||||||
|
if(myListItem) {
|
||||||
|
myListItem.querySelector('.status').textContent = "Voted";
|
||||||
|
myListItem.querySelector('.status').className = "status status-voted";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
cardDeck.appendChild(card);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- LOGIN / JOIN LOGIC ---
|
||||||
|
joinForm.addEventListener('submit', (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const nameInput = document.getElementById('username').value.trim();
|
||||||
|
const roleInput = document.getElementById('role').value;
|
||||||
|
|
||||||
|
if (nameInput) {
|
||||||
|
currentUser.name = nameInput;
|
||||||
|
currentUser.role = roleInput;
|
||||||
|
currentUser.status = roleInput === 'viewer' ? 'Viewer' : 'Voting...';
|
||||||
|
|
||||||
|
// Transition UI
|
||||||
|
loginModal.style.display = 'none';
|
||||||
|
appWorkspace.style.display = 'grid'; // Enable CSS grid layout
|
||||||
|
|
||||||
|
// Render components
|
||||||
|
initDeck();
|
||||||
|
addUserToList();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function addUserToList() {
|
||||||
|
const li = document.createElement('li');
|
||||||
|
li.className = 'participant-item';
|
||||||
|
li.id = 'my-user-item';
|
||||||
|
|
||||||
|
const nameSpan = document.createElement('span');
|
||||||
|
nameSpan.innerHTML = `<strong>> ${currentUser.name} (You)</strong>`;
|
||||||
|
|
||||||
|
const statusSpan = document.createElement('span');
|
||||||
|
statusSpan.className = currentUser.role === 'viewer' ? 'status-voting' : 'status-voting status';
|
||||||
|
statusSpan.textContent = currentUser.status;
|
||||||
|
|
||||||
|
li.appendChild(nameSpan);
|
||||||
|
li.appendChild(statusSpan);
|
||||||
|
|
||||||
|
// Prepend so the current user is at the top of the list
|
||||||
|
userList.insertBefore(li, userList.firstChild);
|
||||||
|
|
||||||
|
// If viewer, dim the cards slightly to indicate they shouldn't click
|
||||||
|
if (currentUser.role === 'viewer') {
|
||||||
|
cardDeck.style.opacity = '0.6';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
42
go.mod
Normal file
42
go.mod
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
module scrum-solitare
|
||||||
|
|
||||||
|
go 1.24.0
|
||||||
|
|
||||||
|
require (
|
||||||
|
github.com/gin-contrib/gzip v1.2.4
|
||||||
|
github.com/gin-gonic/gin v1.11.0
|
||||||
|
)
|
||||||
|
|
||||||
|
require (
|
||||||
|
github.com/bytedance/gopkg v0.1.3 // indirect
|
||||||
|
github.com/bytedance/sonic v1.14.1 // indirect
|
||||||
|
github.com/bytedance/sonic/loader v0.3.0 // indirect
|
||||||
|
github.com/cloudwego/base64x v0.1.6 // indirect
|
||||||
|
github.com/gabriel-vasile/mimetype v1.4.10 // indirect
|
||||||
|
github.com/gin-contrib/sse v1.1.0 // indirect
|
||||||
|
github.com/go-playground/locales v0.14.1 // indirect
|
||||||
|
github.com/go-playground/universal-translator v0.18.1 // indirect
|
||||||
|
github.com/go-playground/validator/v10 v10.28.0 // indirect
|
||||||
|
github.com/goccy/go-json v0.10.5 // indirect
|
||||||
|
github.com/goccy/go-yaml v1.18.0 // indirect
|
||||||
|
github.com/json-iterator/go v1.1.12 // indirect
|
||||||
|
github.com/klauspost/cpuid/v2 v2.3.0 // indirect
|
||||||
|
github.com/leodido/go-urn v1.4.0 // indirect
|
||||||
|
github.com/mattn/go-isatty v0.0.20 // indirect
|
||||||
|
github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd // indirect
|
||||||
|
github.com/modern-go/reflect2 v1.0.2 // indirect
|
||||||
|
github.com/pelletier/go-toml/v2 v2.2.4 // indirect
|
||||||
|
github.com/quic-go/qpack v0.5.1 // indirect
|
||||||
|
github.com/quic-go/quic-go v0.55.0 // indirect
|
||||||
|
github.com/twitchyliquid64/golang-asm v0.15.1 // indirect
|
||||||
|
github.com/ugorji/go/codec v1.3.0 // indirect
|
||||||
|
golang.org/x/arch v0.22.0 // indirect
|
||||||
|
golang.org/x/crypto v0.43.0 // indirect
|
||||||
|
golang.org/x/mod v0.29.0 // indirect
|
||||||
|
golang.org/x/net v0.46.0 // indirect
|
||||||
|
golang.org/x/sync v0.17.0 // indirect
|
||||||
|
golang.org/x/sys v0.37.0 // indirect
|
||||||
|
golang.org/x/text v0.30.0 // indirect
|
||||||
|
golang.org/x/tools v0.38.0 // indirect
|
||||||
|
google.golang.org/protobuf v1.36.10 // indirect
|
||||||
|
)
|
||||||
93
go.sum
Normal file
93
go.sum
Normal file
@@ -0,0 +1,93 @@
|
|||||||
|
github.com/bytedance/gopkg v0.1.3 h1:TPBSwH8RsouGCBcMBktLt1AymVo2TVsBVCY4b6TnZ/M=
|
||||||
|
github.com/bytedance/gopkg v0.1.3/go.mod h1:576VvJ+eJgyCzdjS+c4+77QF3p7ubbtiKARP3TxducM=
|
||||||
|
github.com/bytedance/sonic v1.14.1 h1:FBMC0zVz5XUmE4z9wF4Jey0An5FueFvOsTKKKtwIl7w=
|
||||||
|
github.com/bytedance/sonic v1.14.1/go.mod h1:gi6uhQLMbTdeP0muCnrjHLeCUPyb70ujhnNlhOylAFc=
|
||||||
|
github.com/bytedance/sonic/loader v0.3.0 h1:dskwH8edlzNMctoruo8FPTJDF3vLtDT0sXZwvZJyqeA=
|
||||||
|
github.com/bytedance/sonic/loader v0.3.0/go.mod h1:N8A3vUdtUebEY2/VQC0MyhYeKUFosQU6FxH2JmUe6VI=
|
||||||
|
github.com/cloudwego/base64x v0.1.6 h1:t11wG9AECkCDk5fMSoxmufanudBtJ+/HemLstXDLI2M=
|
||||||
|
github.com/cloudwego/base64x v0.1.6/go.mod h1:OFcloc187FXDaYHvrNIjxSe8ncn0OOM8gEHfghB2IPU=
|
||||||
|
github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
|
||||||
|
github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
|
||||||
|
github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
|
||||||
|
github.com/gabriel-vasile/mimetype v1.4.10 h1:zyueNbySn/z8mJZHLt6IPw0KoZsiQNszIpU+bX4+ZK0=
|
||||||
|
github.com/gabriel-vasile/mimetype v1.4.10/go.mod h1:d+9Oxyo1wTzWdyVUPMmXFvp4F9tea18J8ufA774AB3s=
|
||||||
|
github.com/gin-contrib/gzip v1.2.4 h1:yNz4EhPC2kHSZJD1oc1zwp7MLEhEZ3goQeGM3a1b6jU=
|
||||||
|
github.com/gin-contrib/gzip v1.2.4/go.mod h1:aomRgR7ftdZV3uWY0gW/m8rChfxau0n8YVvwlOHONzw=
|
||||||
|
github.com/gin-contrib/sse v1.1.0 h1:n0w2GMuUpWDVp7qSpvze6fAu9iRxJY4Hmj6AmBOU05w=
|
||||||
|
github.com/gin-contrib/sse v1.1.0/go.mod h1:hxRZ5gVpWMT7Z0B0gSNYqqsSCNIJMjzvm6fqCz9vjwM=
|
||||||
|
github.com/gin-gonic/gin v1.11.0 h1:OW/6PLjyusp2PPXtyxKHU0RbX6I/l28FTdDlae5ueWk=
|
||||||
|
github.com/gin-gonic/gin v1.11.0/go.mod h1:+iq/FyxlGzII0KHiBGjuNn4UNENUlKbGlNmc+W50Dls=
|
||||||
|
github.com/go-playground/assert/v2 v2.2.0 h1:JvknZsQTYeFEAhQwI4qEt9cyV5ONwRHC+lYKSsYSR8s=
|
||||||
|
github.com/go-playground/assert/v2 v2.2.0/go.mod h1:VDjEfimB/XKnb+ZQfWdccd7VUvScMdVu0Titje2rxJ4=
|
||||||
|
github.com/go-playground/locales v0.14.1 h1:EWaQ/wswjilfKLTECiXz7Rh+3BjFhfDFKv/oXslEjJA=
|
||||||
|
github.com/go-playground/locales v0.14.1/go.mod h1:hxrqLVvrK65+Rwrd5Fc6F2O76J/NuW9t0sjnWqG1slY=
|
||||||
|
github.com/go-playground/universal-translator v0.18.1 h1:Bcnm0ZwsGyWbCzImXv+pAJnYK9S473LQFuzCbDbfSFY=
|
||||||
|
github.com/go-playground/universal-translator v0.18.1/go.mod h1:xekY+UJKNuX9WP91TpwSH2VMlDf28Uj24BCp08ZFTUY=
|
||||||
|
github.com/go-playground/validator/v10 v10.28.0 h1:Q7ibns33JjyW48gHkuFT91qX48KG0ktULL6FgHdG688=
|
||||||
|
github.com/go-playground/validator/v10 v10.28.0/go.mod h1:GoI6I1SjPBh9p7ykNE/yj3fFYbyDOpwMn5KXd+m2hUU=
|
||||||
|
github.com/goccy/go-json v0.10.5 h1:Fq85nIqj+gXn/S5ahsiTlK3TmC85qgirsdTP/+DeaC4=
|
||||||
|
github.com/goccy/go-json v0.10.5/go.mod h1:oq7eo15ShAhp70Anwd5lgX2pLfOS3QCiwU/PULtXL6M=
|
||||||
|
github.com/goccy/go-yaml v1.18.0 h1:8W7wMFS12Pcas7KU+VVkaiCng+kG8QiFeFwzFb+rwuw=
|
||||||
|
github.com/goccy/go-yaml v1.18.0/go.mod h1:XBurs7gK8ATbW4ZPGKgcbrY1Br56PdM69F7LkFRi1kA=
|
||||||
|
github.com/google/go-cmp v0.7.0 h1:wk8382ETsv4JYUZwIsn6YpYiWiBsYLSJiTsyBybVuN8=
|
||||||
|
github.com/google/go-cmp v0.7.0/go.mod h1:pXiqmnSA92OHEEa9HXL2W4E7lf9JzCmGVUdgjX3N/iU=
|
||||||
|
github.com/google/gofuzz v1.0.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg=
|
||||||
|
github.com/json-iterator/go v1.1.12 h1:PV8peI4a0ysnczrg+LtxykD8LfKY9ML6u2jnxaEnrnM=
|
||||||
|
github.com/json-iterator/go v1.1.12/go.mod h1:e30LSqwooZae/UwlEbR2852Gd8hjQvJoHmT4TnhNGBo=
|
||||||
|
github.com/klauspost/cpuid/v2 v2.3.0 h1:S4CRMLnYUhGeDFDqkGriYKdfoFlDnMtqTiI/sFzhA9Y=
|
||||||
|
github.com/klauspost/cpuid/v2 v2.3.0/go.mod h1:hqwkgyIinND0mEev00jJYCxPNVRVXFQeu1XKlok6oO0=
|
||||||
|
github.com/leodido/go-urn v1.4.0 h1:WT9HwE9SGECu3lg4d/dIA+jxlljEa1/ffXKmRjqdmIQ=
|
||||||
|
github.com/leodido/go-urn v1.4.0/go.mod h1:bvxc+MVxLKB4z00jd1z+Dvzr47oO32F/QSNjSBOlFxI=
|
||||||
|
github.com/mattn/go-isatty v0.0.20 h1:xfD0iDuEKnDkl03q4limB+vH+GxLEtL/jb4xVJSWWEY=
|
||||||
|
github.com/mattn/go-isatty v0.0.20/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
|
||||||
|
github.com/modern-go/concurrent v0.0.0-20180228061459-e0a39a4cb421/go.mod h1:6dJC0mAP4ikYIbvyc7fijjWJddQyLn8Ig3JB5CqoB9Q=
|
||||||
|
github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd h1:TRLaZ9cD/w8PVh93nsPXa1VrQ6jlwL5oN8l14QlcNfg=
|
||||||
|
github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd/go.mod h1:6dJC0mAP4ikYIbvyc7fijjWJddQyLn8Ig3JB5CqoB9Q=
|
||||||
|
github.com/modern-go/reflect2 v1.0.2 h1:xBagoLtFs94CBntxluKeaWgTMpvLxC4ur3nMaC9Gz0M=
|
||||||
|
github.com/modern-go/reflect2 v1.0.2/go.mod h1:yWuevngMOJpCy52FWWMvUC8ws7m/LJsjYzDa0/r8luk=
|
||||||
|
github.com/pelletier/go-toml/v2 v2.2.4 h1:mye9XuhQ6gvn5h28+VilKrrPoQVanw5PMw/TB0t5Ec4=
|
||||||
|
github.com/pelletier/go-toml/v2 v2.2.4/go.mod h1:2gIqNv+qfxSVS7cM2xJQKtLSTLUE9V8t9Stt+h56mCY=
|
||||||
|
github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
|
||||||
|
github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
|
||||||
|
github.com/quic-go/qpack v0.5.1 h1:giqksBPnT/HDtZ6VhtFKgoLOWmlyo9Ei6u9PqzIMbhI=
|
||||||
|
github.com/quic-go/qpack v0.5.1/go.mod h1:+PC4XFrEskIVkcLzpEkbLqq1uCoxPhQuvK5rH1ZgaEg=
|
||||||
|
github.com/quic-go/quic-go v0.55.0 h1:zccPQIqYCXDt5NmcEabyYvOnomjs8Tlwl7tISjJh9Mk=
|
||||||
|
github.com/quic-go/quic-go v0.55.0/go.mod h1:DR51ilwU1uE164KuWXhinFcKWGlEjzys2l8zUl5Ss1U=
|
||||||
|
github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME=
|
||||||
|
github.com/stretchr/objx v0.4.0/go.mod h1:YvHI0jy2hoMjB+UWwv71VJQ9isScKT/TqJzVSSt89Yw=
|
||||||
|
github.com/stretchr/objx v0.5.0/go.mod h1:Yh+to48EsGEfYuaHDzXPcE3xhTkx73EhmCGUpEOglKo=
|
||||||
|
github.com/stretchr/testify v1.3.0/go.mod h1:M5WIy9Dh21IEIfnGCwXGc5bZfKNJtfHm1UVUgZn+9EI=
|
||||||
|
github.com/stretchr/testify v1.7.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/h/Wwjteg=
|
||||||
|
github.com/stretchr/testify v1.8.0/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO+kdMU+MU=
|
||||||
|
github.com/stretchr/testify v1.8.1/go.mod h1:w2LPCIKwWwSfY2zedu0+kehJoqGctiVI29o6fzry7u4=
|
||||||
|
github.com/stretchr/testify v1.11.1 h1:7s2iGBzp5EwR7/aIZr8ao5+dra3wiQyKjjFuvgVKu7U=
|
||||||
|
github.com/stretchr/testify v1.11.1/go.mod h1:wZwfW3scLgRK+23gO65QZefKpKQRnfz6sD981Nm4B6U=
|
||||||
|
github.com/twitchyliquid64/golang-asm v0.15.1 h1:SU5vSMR7hnwNxj24w34ZyCi/FmDZTkS4MhqMhdFk5YI=
|
||||||
|
github.com/twitchyliquid64/golang-asm v0.15.1/go.mod h1:a1lVb/DtPvCB8fslRZhAngC2+aY1QWCk3Cedj/Gdt08=
|
||||||
|
github.com/ugorji/go/codec v1.3.0 h1:Qd2W2sQawAfG8XSvzwhBeoGq71zXOC/Q1E9y/wUcsUA=
|
||||||
|
github.com/ugorji/go/codec v1.3.0/go.mod h1:pRBVtBSKl77K30Bv8R2P+cLSGaTtex6fsA2Wjqmfxj4=
|
||||||
|
go.uber.org/mock v0.6.0 h1:hyF9dfmbgIX5EfOdasqLsWD6xqpNZlXblLB/Dbnwv3Y=
|
||||||
|
go.uber.org/mock v0.6.0/go.mod h1:KiVJ4BqZJaMj4svdfmHM0AUx4NJYO8ZNpPnZn1Z+BBU=
|
||||||
|
golang.org/x/arch v0.22.0 h1:c/Zle32i5ttqRXjdLyyHZESLD/bB90DCU1g9l/0YBDI=
|
||||||
|
golang.org/x/arch v0.22.0/go.mod h1:dNHoOeKiyja7GTvF9NJS1l3Z2yntpQNzgrjh1cU103A=
|
||||||
|
golang.org/x/crypto v0.43.0 h1:dduJYIi3A3KOfdGOHX8AVZ/jGiyPa3IbBozJ5kNuE04=
|
||||||
|
golang.org/x/crypto v0.43.0/go.mod h1:BFbav4mRNlXJL4wNeejLpWxB7wMbc79PdRGhWKncxR0=
|
||||||
|
golang.org/x/mod v0.29.0 h1:HV8lRxZC4l2cr3Zq1LvtOsi/ThTgWnUk/y64QSs8GwA=
|
||||||
|
golang.org/x/mod v0.29.0/go.mod h1:NyhrlYXJ2H4eJiRy/WDBO6HMqZQ6q9nk4JzS3NuCK+w=
|
||||||
|
golang.org/x/net v0.46.0 h1:giFlY12I07fugqwPuWJi68oOnpfqFnJIJzaIIm2JVV4=
|
||||||
|
golang.org/x/net v0.46.0/go.mod h1:Q9BGdFy1y4nkUwiLvT5qtyhAnEHgnQ/zd8PfU6nc210=
|
||||||
|
golang.org/x/sync v0.17.0 h1:l60nONMj9l5drqw6jlhIELNv9I0A4OFgRsG9k2oT9Ug=
|
||||||
|
golang.org/x/sync v0.17.0/go.mod h1:9KTHXmSnoGruLpwFjVSX0lNNA75CykiMECbovNTZqGI=
|
||||||
|
golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
|
||||||
|
golang.org/x/sys v0.37.0 h1:fdNQudmxPjkdUTPnLn5mdQv7Zwvbvpaxqs831goi9kQ=
|
||||||
|
golang.org/x/sys v0.37.0/go.mod h1:OgkHotnGiDImocRcuBABYBEXf8A9a87e/uXjp9XT3ks=
|
||||||
|
golang.org/x/text v0.30.0 h1:yznKA/E9zq54KzlzBEAWn1NXSQ8DIp/NYMy88xJjl4k=
|
||||||
|
golang.org/x/text v0.30.0/go.mod h1:yDdHFIX9t+tORqspjENWgzaCVXgk0yYnYuSZ8UzzBVM=
|
||||||
|
golang.org/x/tools v0.38.0 h1:Hx2Xv8hISq8Lm16jvBZ2VQf+RLmbd7wVUsALibYI/IQ=
|
||||||
|
golang.org/x/tools v0.38.0/go.mod h1:yEsQ/d/YK8cjh0L6rZlY8tgtlKiBNTL14pGDJPJpYQs=
|
||||||
|
google.golang.org/protobuf v1.36.10 h1:AYd7cD/uASjIL6Q9LiTjz8JLcrh/88q5UObnmY3aOOE=
|
||||||
|
google.golang.org/protobuf v1.36.10/go.mod h1:HTf+CrKn2C3g5S8VImy6tdcUvCska2kB7j23XfzDpco=
|
||||||
|
gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
|
||||||
|
gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
|
||||||
|
gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
|
||||||
|
gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
|
||||||
16
src/config/config.go
Normal file
16
src/config/config.go
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
package config
|
||||||
|
|
||||||
|
import "os"
|
||||||
|
|
||||||
|
type Config struct {
|
||||||
|
Port string
|
||||||
|
}
|
||||||
|
|
||||||
|
func Load() Config {
|
||||||
|
port := os.Getenv("PORT")
|
||||||
|
if port == "" {
|
||||||
|
port = "8002"
|
||||||
|
}
|
||||||
|
|
||||||
|
return Config{Port: port}
|
||||||
|
}
|
||||||
20
src/controllers/page_controller.go
Normal file
20
src/controllers/page_controller.go
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
package controllers
|
||||||
|
|
||||||
|
import (
|
||||||
|
"net/http"
|
||||||
|
|
||||||
|
"github.com/gin-gonic/gin"
|
||||||
|
|
||||||
|
"scrum-solitare/src/models"
|
||||||
|
)
|
||||||
|
|
||||||
|
type PageController struct{}
|
||||||
|
|
||||||
|
func NewPageController() *PageController {
|
||||||
|
return &PageController{}
|
||||||
|
}
|
||||||
|
|
||||||
|
func (pc *PageController) ShowRoomSetup(c *gin.Context) {
|
||||||
|
pageData := models.DefaultRoomSetupPageData()
|
||||||
|
c.HTML(http.StatusOK, "index.html", pageData)
|
||||||
|
}
|
||||||
19
src/main.go
Normal file
19
src/main.go
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
package main
|
||||||
|
|
||||||
|
import (
|
||||||
|
"log"
|
||||||
|
|
||||||
|
"scrum-solitare/src/config"
|
||||||
|
"scrum-solitare/src/controllers"
|
||||||
|
"scrum-solitare/src/server"
|
||||||
|
)
|
||||||
|
|
||||||
|
func main() {
|
||||||
|
cfg := config.Load()
|
||||||
|
pageController := controllers.NewPageController()
|
||||||
|
router := server.NewRouter(pageController)
|
||||||
|
|
||||||
|
if err := router.Run(":" + cfg.Port); err != nil {
|
||||||
|
log.Fatalf("server failed to start: %v", err)
|
||||||
|
}
|
||||||
|
}
|
||||||
20
src/middleware/cache_control.go
Normal file
20
src/middleware/cache_control.go
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
package middleware
|
||||||
|
|
||||||
|
import (
|
||||||
|
"path/filepath"
|
||||||
|
"strings"
|
||||||
|
|
||||||
|
"github.com/gin-gonic/gin"
|
||||||
|
)
|
||||||
|
|
||||||
|
func StaticCacheControl() gin.HandlerFunc {
|
||||||
|
return func(c *gin.Context) {
|
||||||
|
ext := strings.ToLower(filepath.Ext(c.Request.URL.Path))
|
||||||
|
switch ext {
|
||||||
|
case ".css", ".js", ".png", ".jpg", ".jpeg", ".gif", ".svg", ".webp", ".ico":
|
||||||
|
c.Header("Cache-Control", "public, max-age=31536000, immutable")
|
||||||
|
c.Header("Vary", "Accept-Encoding")
|
||||||
|
}
|
||||||
|
c.Next()
|
||||||
|
}
|
||||||
|
}
|
||||||
31
src/models/room_setup.go
Normal file
31
src/models/room_setup.go
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
package models
|
||||||
|
|
||||||
|
type RoomSetupPageData struct {
|
||||||
|
DefaultRoomName string
|
||||||
|
DefaultUsername string
|
||||||
|
DefaultMaxPeople int
|
||||||
|
DefaultScale string
|
||||||
|
DefaultRevealMode string
|
||||||
|
DefaultVotingTime int
|
||||||
|
DefaultModerator string
|
||||||
|
AllowSpectators bool
|
||||||
|
AnonymousVoting bool
|
||||||
|
AutoResetCards bool
|
||||||
|
DefaultStatus string
|
||||||
|
}
|
||||||
|
|
||||||
|
func DefaultRoomSetupPageData() RoomSetupPageData {
|
||||||
|
return RoomSetupPageData{
|
||||||
|
DefaultRoomName: "Sprint Planning",
|
||||||
|
DefaultUsername: "",
|
||||||
|
DefaultMaxPeople: 50,
|
||||||
|
DefaultScale: "fibonacci",
|
||||||
|
DefaultRevealMode: "manual",
|
||||||
|
DefaultVotingTime: 0,
|
||||||
|
DefaultModerator: "creator",
|
||||||
|
AllowSpectators: true,
|
||||||
|
AnonymousVoting: true,
|
||||||
|
AutoResetCards: true,
|
||||||
|
DefaultStatus: "Ready to create room.",
|
||||||
|
}
|
||||||
|
}
|
||||||
25
src/routes/routes.go
Normal file
25
src/routes/routes.go
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
package routes
|
||||||
|
|
||||||
|
import (
|
||||||
|
"net/http"
|
||||||
|
|
||||||
|
"github.com/gin-gonic/gin"
|
||||||
|
|
||||||
|
"scrum-solitare/src/controllers"
|
||||||
|
"scrum-solitare/src/middleware"
|
||||||
|
)
|
||||||
|
|
||||||
|
func Register(r *gin.Engine, pageController *controllers.PageController) {
|
||||||
|
registerStatic(r)
|
||||||
|
registerPages(r, pageController)
|
||||||
|
}
|
||||||
|
|
||||||
|
func registerStatic(r *gin.Engine) {
|
||||||
|
static := r.Group("/static")
|
||||||
|
static.Use(middleware.StaticCacheControl())
|
||||||
|
static.StaticFS("/", http.Dir("static"))
|
||||||
|
}
|
||||||
|
|
||||||
|
func registerPages(r *gin.Engine, pageController *controllers.PageController) {
|
||||||
|
r.GET("/", pageController.ShowRoomSetup)
|
||||||
|
}
|
||||||
20
src/server/router.go
Normal file
20
src/server/router.go
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
package server
|
||||||
|
|
||||||
|
import (
|
||||||
|
"github.com/gin-contrib/gzip"
|
||||||
|
"github.com/gin-gonic/gin"
|
||||||
|
|
||||||
|
"scrum-solitare/src/controllers"
|
||||||
|
"scrum-solitare/src/routes"
|
||||||
|
)
|
||||||
|
|
||||||
|
func NewRouter(pageController *controllers.PageController) *gin.Engine {
|
||||||
|
r := gin.New()
|
||||||
|
r.Use(gin.Logger(), gin.Recovery())
|
||||||
|
r.Use(gzip.Gzip(gzip.DefaultCompression))
|
||||||
|
|
||||||
|
r.LoadHTMLGlob("src/templates/*.html")
|
||||||
|
routes.Register(r, pageController)
|
||||||
|
|
||||||
|
return r
|
||||||
|
}
|
||||||
127
src/templates/body-config.html
Normal file
127
src/templates/body-config.html
Normal file
@@ -0,0 +1,127 @@
|
|||||||
|
{{ define "body" }}
|
||||||
|
<section class="window config-window" aria-label="Room configuration">
|
||||||
|
<div class="title-bar">
|
||||||
|
<span>CreateRoom.exe</span>
|
||||||
|
<div class="title-bar-controls" aria-hidden="true">
|
||||||
|
<button type="button">_</button>
|
||||||
|
<button type="button">□</button>
|
||||||
|
<button type="button">×</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="window-content">
|
||||||
|
<p class="intro-copy">Configure your Scrum Poker room and share the invite link with your team.</p>
|
||||||
|
|
||||||
|
<form id="room-config-form" class="room-form" novalidate>
|
||||||
|
<div class="config-layout">
|
||||||
|
<section class="config-panel">
|
||||||
|
<div class="field-group">
|
||||||
|
<label for="room-name">Room name</label>
|
||||||
|
<input type="text" id="room-name" name="roomName" maxlength="40" value="{{ .DefaultRoomName }}" placeholder="Sprint 32 Planning" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field-row">
|
||||||
|
<div class="field-group">
|
||||||
|
<label for="username">Your username</label>
|
||||||
|
<input type="text" id="username" name="username" maxlength="32" value="{{ .DefaultUsername }}" placeholder="alice_dev" required>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field-group">
|
||||||
|
<label for="max-people">Max people</label>
|
||||||
|
<div class="number-input-wrap">
|
||||||
|
<input type="number" id="max-people" name="maxPeople" min="2" max="50" value="{{ .DefaultMaxPeople }}" required>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field-row">
|
||||||
|
<div class="field-group">
|
||||||
|
<label for="estimation-scale">Estimation scale</label>
|
||||||
|
<select id="estimation-scale" name="estimationScale">
|
||||||
|
<option value="fibonacci" {{ if eq .DefaultScale "fibonacci" }}selected{{ end }}>Fibonacci (0,1,2,3,5,8,13,21,?)</option>
|
||||||
|
<option value="tshirt" {{ if eq .DefaultScale "tshirt" }}selected{{ end }}>T-Shirt (XS,S,M,L,XL,?)</option>
|
||||||
|
<option value="powers-of-two" {{ if eq .DefaultScale "powers-of-two" }}selected{{ end }}>Powers of 2 (1,2,4,8,16,32,?)</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field-group">
|
||||||
|
<label for="reveal-mode">Reveal mode</label>
|
||||||
|
<select id="reveal-mode" name="revealMode">
|
||||||
|
<option value="manual" {{ if eq .DefaultRevealMode "manual" }}selected{{ end }}>Manual reveal by moderator</option>
|
||||||
|
<option value="all-voted" {{ if eq .DefaultRevealMode "all-voted" }}selected{{ end }}>Auto reveal when everyone voted</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field-row">
|
||||||
|
<div class="field-group">
|
||||||
|
<label for="voting-timeout">Voting timeout (seconds)</label>
|
||||||
|
<div class="number-input-wrap number-with-unit">
|
||||||
|
<input type="number" id="voting-timeout" name="votingTimeout" min="0" max="3600" value="{{ .DefaultVotingTime }}">
|
||||||
|
<span class="input-unit">sec</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="field-group">
|
||||||
|
<label for="moderator">Moderator role</label>
|
||||||
|
<select id="moderator" name="moderatorRole">
|
||||||
|
<option value="creator" {{ if eq .DefaultModerator "creator" }}selected{{ end }}>Room creator is moderator</option>
|
||||||
|
<option value="none" {{ if eq .DefaultModerator "none" }}selected{{ end }}>No fixed moderator</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<fieldset class="window options-box">
|
||||||
|
<legend>Room options</legend>
|
||||||
|
<label class="option-item">
|
||||||
|
<input type="checkbox" id="allow-spectators" name="allowSpectators" {{ if .AllowSpectators }}checked{{ end }}>
|
||||||
|
<span>Allow spectators (non-voting viewers)</span>
|
||||||
|
</label>
|
||||||
|
<label class="option-item">
|
||||||
|
<input type="checkbox" id="anonymous-voting" name="anonymousVoting" {{ if .AnonymousVoting }}checked{{ end }}>
|
||||||
|
<span>Anonymous voting until reveal</span>
|
||||||
|
</label>
|
||||||
|
<label class="option-item">
|
||||||
|
<input type="checkbox" id="auto-reset" name="autoReset" {{ if .AutoResetCards }}checked{{ end }}>
|
||||||
|
<span>Auto-reset cards after each reveal</span>
|
||||||
|
</label>
|
||||||
|
</fieldset>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<aside class="window preview-window" aria-label="Room preview">
|
||||||
|
<div class="title-bar">
|
||||||
|
<span>Room Preview</span>
|
||||||
|
</div>
|
||||||
|
<div class="window-content preview-content">
|
||||||
|
<div class="preview-meta">
|
||||||
|
<span id="preview-scale">Scale: {{ .DefaultScale }}</span>
|
||||||
|
<span id="preview-max-people">Max: {{ .DefaultMaxPeople }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="preview-board" id="preview-board">
|
||||||
|
<div class="preview-cards" id="preview-cards"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card-editor">
|
||||||
|
<label for="custom-card">Add card</label>
|
||||||
|
<div class="card-editor-row">
|
||||||
|
<input type="text" id="custom-card" maxlength="8" placeholder="e.g. 34 or ?">
|
||||||
|
<button type="button" id="add-card" class="btn">Add</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="status-line" id="config-status" role="status" aria-live="polite">
|
||||||
|
{{ .DefaultStatus }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="actions-row">
|
||||||
|
<button type="reset" class="btn">Reset</button>
|
||||||
|
<button type="submit" class="btn btn-primary">Create Room</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
{{ end }}
|
||||||
10
src/templates/footer.html
Normal file
10
src/templates/footer.html
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
{{ define "footer" }}
|
||||||
|
</main>
|
||||||
|
<footer class="taskbar" aria-hidden="true">
|
||||||
|
<div class="taskbar-start">Start</div>
|
||||||
|
<div class="taskbar-status">Scrum Poker Setup</div>
|
||||||
|
</footer>
|
||||||
|
<script src="/static/js/app.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
{{ end }}
|
||||||
18
src/templates/header.html
Normal file
18
src/templates/header.html
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
{{ define "header" }}
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Retro Scrum Poker - Room Setup</title>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="/static/css/styles.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="top-bar">
|
||||||
|
<button class="btn" id="theme-toggle">Dark Mode</button>
|
||||||
|
</div>
|
||||||
|
<main id="desktop">
|
||||||
|
{{ end }}
|
||||||
5
src/templates/index.html
Normal file
5
src/templates/index.html
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
{{ define "index.html" }}
|
||||||
|
{{ template "header" . }}
|
||||||
|
{{ template "body" . }}
|
||||||
|
{{ template "footer" . }}
|
||||||
|
{{ end }}
|
||||||
426
static/css/styles.css
Normal file
426
static/css/styles.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
0
static/img/.gitkeep
Normal file
0
static/img/.gitkeep
Normal file
184
static/js/app.js
Normal file
184
static/js/app.js
Normal file
@@ -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();
|
||||||
Reference in New Issue
Block a user