Competitions management

CLAUDE.md

@@ -138,6 +138,7 @@ Feature design documents and implementation plans are in `docs/features/`. Each
 - **API & OAuth2**: `docs/features/api/` — Public REST API (V1), OAuth2 server, Swagger docs, internal APIs, deprecated V0
 - **Stripe Payments**: `docs/features/stripe.md` — Stripe integration for premium membership
 - **Opt-Out Features**: `docs/features/opt-out.md` — Streak and ranking opt-out for players
+- **Competitions Management**: `docs/features/competitions-management/` — Community-driven event creation with admin approval, round management, puzzle assignment, table layout planning, and live stopwatch
 
 ### Feature Flags
 Active feature flags are documented in `docs/features/feature_flags.md`. **Always read and update this file** when adding, modifying, or removing feature flags. It tracks which files are gated, what feature each flag belongs to, and when it can be removed.

assets/controllers/colorpicker_controller.js

@@ -0,0 +1,27 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    async connect() {
+        const [{ default: Coloris }] = await Promise.all([
+            import('@melloware/coloris'),
+            import('@melloware/coloris/dist/coloris.css'),
+        ]);
+
+        Coloris.init();
+        Coloris({
+            el: '#' + this.element.id,
+            format: 'hex',
+            alpha: false,
+            swatches: [
+                '#fe696a',
+                '#ffffff',
+                '#000000',
+                '#0d6efd',
+                '#198754',
+                '#ffc107',
+                '#dc3545',
+                '#6c757d',
+            ],
+        });
+    }
+}

assets/controllers/competition_form_controller.js

@@ -0,0 +1,29 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    static targets = ['offlineFields', 'recurringField', 'typeSelectedFields'];
+
+    connect() {
+        this._toggle();
+    }
+
+    toggle() {
+        this._toggle();
+    }
+
+    _toggle() {
+        const checkedRadio = this.element.querySelector('input[type="radio"]:checked');
+        const hasSelection = checkedRadio !== null;
+        const isOnline = checkedRadio !== null && checkedRadio.value === '1';
+
+        this.offlineFieldsTargets.forEach(el => {
+            el.style.display = hasSelection && !isOnline ? '' : 'none';
+        });
+
+        this.recurringFieldTarget.style.display = hasSelection && isOnline ? '' : 'none';
+
+        this.typeSelectedFieldsTargets.forEach(el => {
+            el.style.display = hasSelection ? '' : 'none';
+        });
+    }
+}

assets/controllers/player_search_autocomplete_controller.js

@@ -0,0 +1,40 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    static values = {
+        url: String,
+    };
+
+    initialize() {
+        this._onPreConnect = this._onPreConnect.bind(this);
+    }
+
+    connect() {
+        this.element.addEventListener('autocomplete:pre-connect', this._onPreConnect);
+    }
+
+    disconnect() {
+        this.element.removeEventListener('autocomplete:pre-connect', this._onPreConnect);
+    }
+
+    _onPreConnect(event) {
+        const url = this.urlValue;
+
+        event.detail.options.shouldLoad = (query) => query.length >= 2;
+
+        event.detail.options.score = () => () => 1;
+
+        event.detail.options.render = {
+            ...event.detail.options.render,
+            option: (item) => `<div>${item.text}</div>`,
+            item: (item) => `<div>${item.text}</div>`,
+        };
+
+        event.detail.options.load = function (query, callback) {
+            fetch(`${url}?query=${encodeURIComponent(query)}`)
+                .then(response => response.json())
+                .then(data => callback(data))
+                .catch(() => callback());
+        };
+    }
+}

assets/controllers/round_stopwatch_controller.js

@@ -0,0 +1,162 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+    static targets = ['hours', 'minutes', 'seconds', 'status'];
+
+    static values = {
+        status: String,
+        startedAt: String,
+        minutesLimit: Number,
+        serverNow: String,
+        mercureUrl: String,
+        topic: String,
+    };
+
+    connect() {
+        this._serverOffset = this._calculateServerOffset();
+        this._rafId = null;
+        this._startTimestamp = null;
+        this._stopped = false;
+
+        if (this.statusValue === 'running' && this.startedAtValue) {
+            this._startTimestamp = new Date(this.startedAtValue).getTime() + this._serverOffset;
+            this._startRaf();
+        } else if (this.statusValue === 'stopped' && this.startedAtValue) {
+            this._startTimestamp = new Date(this.startedAtValue).getTime() + this._serverOffset;
+            this._stopped = true;
+            this._renderTime(Date.now() - this._startTimestamp);
+        } else {
+            this._renderTime(0);
+        }
+
+        this._connectMercure();
+    }
+
+    disconnect() {
+        this._stopRaf();
+        if (this._eventSource) {
+            this._eventSource.close();
+            this._eventSource = null;
+        }
+    }
+
+    _connectMercure() {
+        if (!this.mercureUrlValue || !this.topicValue) return;
+
+        const url = new URL(this.mercureUrlValue);
+        url.searchParams.append('topic', this.topicValue);
+
+        this._eventSource = new EventSource(url);
+
+        this._eventSource.addEventListener('message', (event) => {
+            try {
+                const data = JSON.parse(event.data);
+                this._handleMercureMessage(data);
+            } catch { /* ignore non-JSON */ }
+        });
+    }
+
+    _handleMercureMessage(data) {
+        switch (data.action) {
+            case 'start':
+                this._stopped = false;
+                this._startTimestamp = new Date(data.startedAt).getTime() + this._serverOffset;
+                if (data.minutesLimit) {
+                    this.minutesLimitValue = data.minutesLimit;
+                }
+                this._updateStatus('running');
+                this._startRaf();
+                break;
+
+            case 'stop':
+                this._stopped = true;
+                this._stopRaf();
+                this._updateStatus('stopped');
+                break;
+
+            case 'reset':
+                this._stopped = false;
+                this._stopRaf();
+                this._startTimestamp = null;
+                this._renderTime(0);
+                this._updateStatus('');
+                break;
+        }
+    }
+
+    _startRaf() {
+        this._stopRaf();
+        const tick = () => {
+            if (this._startTimestamp === null) return;
+            let elapsed = Date.now() - this._startTimestamp;
+            const limitMs = this.minutesLimitValue * 60 * 1000;
+
+            if (elapsed >= limitMs) {
+                elapsed = limitMs;
+                this._renderTime(elapsed);
+                this._updateStatus('times_up');
+                this._stopRaf();
+                return;
+            }
+
+            this._renderTime(elapsed);
+            this._rafId = requestAnimationFrame(tick);
+        };
+        this._rafId = requestAnimationFrame(tick);
+    }
+
+    _stopRaf() {
+        if (this._rafId !== null) {
+            cancelAnimationFrame(this._rafId);
+            this._rafId = null;
+        }
+    }
+
+    _renderTime(ms) {
+        const totalSeconds = Math.max(0, Math.floor(ms / 1000));
+        const hours = Math.floor(totalSeconds / 3600);
+        const minutes = Math.floor((totalSeconds % 3600) / 60);
+        const seconds = totalSeconds % 60;
+
+        this.hoursTarget.textContent = this._pad(hours);
+        this.minutesTarget.textContent = this._pad(minutes);
+        this.secondsTarget.textContent = this._pad(seconds);
+    }
+
+    _pad(n) {
+        return n < 10 ? '0' + n : String(n);
+    }
+
+    _calculateServerOffset() {
+        if (!this.serverNowValue) return 0;
+        return Date.now() - new Date(this.serverNowValue).getTime();
+    }
+
+    _updateStatus(status) {
+        if (!this.hasStatusTarget) return;
+
+        const labels = {
+            '': this.statusTarget.dataset.labelNotStarted || 'Not started',
+            'running': this.statusTarget.dataset.labelRunning || 'Running',
+            'stopped': this.statusTarget.dataset.labelStopped || 'Stopped',
+            'times_up': this.statusTarget.dataset.labelTimesUp || "Time's up!",
+        };
+
+        this.statusTarget.textContent = labels[status] || labels[''];
+
+        this.statusTarget.classList.remove('text-muted', 'text-success', 'text-warning', 'text-danger');
+        switch (status) {
+            case 'running':
+                this.statusTarget.classList.add('text-success');
+                break;
+            case 'stopped':
+                this.statusTarget.classList.add('text-warning');
+                break;
+            case 'times_up':
+                this.statusTarget.classList.add('text-danger');
+                break;
+            default:
+                this.statusTarget.classList.add('text-muted');
+        }
+    }
+}

assets/styles/app.scss

@@ -540,7 +540,7 @@ button[data-submit-prevention-target] {
     }
 }
 
-.marketplace-country-filter-wrapper {
+.country-select-wrapper {
     .ts-wrapper {
         .ts-control {
             min-height: auto;

assets/styles/components/_forms.scss

@@ -3,6 +3,14 @@
 // --------------------------------------------------
 
 
+// Required field indicator
+
+.required > label::after,
+.required > .form-label::after {
+  content: ' *';
+  color: $danger;
+}
+
 // Label for use with horizontal and inline forms
 
 .col-form-label {