display.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fenger Management System (FMS)</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=IBM+Plex+Mono:wght@400;700&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            /* Scale all rem-based sizes with the viewport width.
               At 400px (OBS corner): ~5px base → compact overlay.
               At 1920px (full display): ~23px base → large scores. */
            font-size: 1.2vw;
        }

        body {
            background-color: transparent;
            color: #fff;
            font-family: 'IBM Plex Mono', 'Courier New', monospace;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .container {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: relative;
        }

        .scores-container {
            display: flex;
            justify-content: space-around;
            width: 100%;
            max-width: 1400px;
            margin-bottom: 50px;
        }

        .team-score {
            text-align: center;
            position: relative;
        }

        .score-number {
            font-size: 15rem;
            font-weight: bold;
            line-height: 1;
        }

        .red-score {
            color: #ff4444;
        }

        .blue-score {
            color: #4444ff;
        }

        .red-score.highlight {
            color: #ff6347;
        }

        .blue-score.highlight {
            color: #6495ed;
        }

        .score-indicator {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            opacity: 0;
            transition: opacity 0.3s;
        }

        .score-indicator.show {
            opacity: 1;
        }

        .red-indicator {
            background-color: #ff6347;
            right: -80px;
        }

        .blue-indicator {
            background-color: #6495ed;
            left: -80px;
        }

        .team-details {
            font-size: 2rem;
            margin-top: 20px;
        }

        .auto-score {
            color: #888;
        }

        .penalty {
            color: #fff;
            margin-top: 10px;
        }

        .timer {
            font-size: 5rem;
            margin-bottom: 30px;
            font-weight: bold;
        }

        .timer.endgame {
            font-size: 20rem;
            animation: pulse 1s infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        .phase-indicator {
            font-size: 2.5rem;
            margin-top: 20px;
        }

        .paused-indicator {
            font-size: 2.5rem;
            margin-top: 10px;
            color: #ffff00;
        }

        .winner-banner {
            font-size: 2.5rem;
            margin-bottom: 30px;
            font-weight: bold;
        }

        .winner-banner.red {
            color: #ff4444;
        }

        .winner-banner.blue {
            color: #4444ff;
        }

        .winner-banner.tie {
            color: #fff;
        }

        .phase-blink {
            font-size: 6rem;
            font-weight: bold;
            animation: blink 0.5s step-start infinite;
        }

        @keyframes blink {
            0%, 50% { opacity: 1; }
            51%, 100% { opacity: 0; }
        }

        .phase-blink.pickup {
            animation: blink-alt 0.5s step-start infinite;
        }

        @keyframes blink-alt {
            0%, 25% { opacity: 1; }
            26%, 50% { opacity: 0; }
            51%, 75% { opacity: 1; }
            76%, 100% { opacity: 0; }
        }

        .error-message {
            color: #ff0000;
            font-size: 2rem;
            text-align: center;
        }

        #connect-screen {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 24px;
        }

        #connect-screen h1 {
            font-size: 3rem;
            letter-spacing: 0.05em;
        }

        #connect-screen label {
            font-size: 1.5rem;
            color: #aaa;
        }

        #ip-input {
            font-family: inherit;
            font-size: 2rem;
            background: #111;
            color: #fff;
            border: 2px solid #444;
            border-radius: 6px;
            padding: 12px 24px;
            text-align: center;
            outline: none;
            width: 360px;
        }

        #ip-input:focus {
            border-color: #888;
        }

        #connect-btn {
            font-family: inherit;
            font-size: 1.5rem;
            background: #222;
            color: #fff;
            border: 2px solid #555;
            border-radius: 6px;
            padding: 10px 40px;
            cursor: pointer;
        }

        #connect-btn:hover {
            background: #333;
            border-color: #888;
        }

        #connect-error {
            color: #ff4444;
            font-size: 1.2rem;
            min-height: 1.5em;
        }
    </style>
</head>
<body>
    <div class="container" id="connect-screen">
        <h1>Fenger Management System</h1>
        <label for="ip-input">FMS Server IP Address</label>
        <input id="ip-input" type="text" placeholder="192.168.1.100" autocomplete="off" spellcheck="false" />
        <button id="connect-btn">Connect</button>
        <div id="connect-error"></div>
    </div>
    <div class="container" id="display" style="display:none"></div>

    <script>
        let API_URL = '';

        function updateDisplay(data) {
            const container = document.getElementById('display');
            container.innerHTML = buildScoresDisplay(data);
        }

        function buildScoresDisplay(data) {
            const timeRemaining = data.matchRunning ? data.timeRemaining : 0;
            const isEndgame = timeRemaining <= 10 && data.matchRunning && !data.auto;

            const timerDisplay = isEndgame
                ? `<div class="timer endgame">${timeRemaining}</div>`
                : `<div class="timer">${timeRemaining}</div>`;

            const redHighlight = data.redBlink > 0 ? 'highlight' : '';
            const blueHighlight = data.blueBlink > 0 ? 'highlight' : '';
            const redIndicatorShow = data.redBlink > 0 ? 'show' : '';
            const blueIndicatorShow = data.blueBlink > 0 ? 'show' : '';

            return `
                ${timerDisplay}
                <div class="scores-container">
                    <div class="team-score">
                        <div class="score-indicator blue-indicator ${blueIndicatorShow}"></div>
                        <div class="score-number blue-score ${blueHighlight}">${data.blueScore}</div>
                    </div>
                    <div class="team-score">
                        <div class="score-indicator red-indicator ${redIndicatorShow}"></div>
                        <div class="score-number red-score ${redHighlight}">${data.redScore}</div>
                    </div>
                    </div>
                </div>
            `;
        }

        async function fetchScores() {
            try {
                const response = await fetch(API_URL);
                if (!response.ok) throw new Error('Server error');
                const data = await response.json();
                updateDisplay(data);
            } catch (error) {
                document.getElementById('display').innerHTML =
                    `<div class="error-message">Error connecting to server: ${error.message}<br>Make sure the Fenger Management System (FMS) is running.</div>`;
            }
        }

        let pollInterval = null;

        function startPolling(ip) {
            API_URL = `http://${ip}:8080/scores`;
            document.getElementById('connect-screen').style.display = 'none';
            document.getElementById('display').style.display = 'flex';
            pollInterval = setInterval(fetchScores, 100);
            fetchScores();
        }

        // If loaded from the FMS server directly (e.g. OBS browser source),
        // skip the IP prompt and use the URL's hostname.
        if (window.location.hostname) {
            startPolling(window.location.hostname);
        }

        async function connect() {
            const ip = document.getElementById('ip-input').value.trim();
            const errEl = document.getElementById('connect-error');
            if (!ip) {
                errEl.textContent = 'Please enter an IP address.';
                return;
            }
            const testUrl = `http://${ip}:8080/scores`;
            errEl.textContent = 'Connecting...';
            try {
                const response = await fetch(testUrl, { signal: AbortSignal.timeout(3000) });
                if (!response.ok) throw new Error(`Server returned ${response.status}`);
                await response.json();
            } catch (e) {
                errEl.textContent = `Could not connect to ${ip}:8080 — ${e.message}`;
                return;
            }
            startPolling(ip);
        }

        document.getElementById('connect-btn').addEventListener('click', connect);
        document.getElementById('ip-input').addEventListener('keydown', e => {
            if (e.key === 'Enter') connect();
        });
    </script>
</body>
</html>