control.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DarDoh Control Panel</title>
    <style>
        body {
            font-family: "Century Gothic", Arial, sans-serif;
            background-color: #2c3e50; /* Dark blue-grey */
            color: #ecf0f1; /* Light grey text */
            margin: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
            box-sizing: border-box;
        }

        h1, h2 {
            color: #ffd700; /* Gold */
            text-align: center;
            margin-bottom: 20px;
        }

        .section {
            background-color: #34495e; /* Slightly lighter dark blue-grey */
            padding: 25px;
            border-radius: 10px;
            margin-bottom: 25px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            width: 100%;
            max-width: 800px;
            box-sizing: border-box;
        }

        /* Setup Section */
        #setupSection {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        /* Contenitori Flexbox per le label nella sezione di setup per allineamento */
        .player-setup label,
        .game-settings label,
        .custom-text-settings label {
            display: flex; /* Trasforma la label in un contenitore flex */
            align-items: center; /* Allinea verticalmente gli elementi al centro */
            gap: 20px; /* Spazio tra gli elementi */
            font-weight: bold;
        }

        /* Regola generale per input testuali e numerici nella sezione setup */
        #setupSection input[type="text"],
        #setupSection input[type="number"] {
            flex-grow: 1; /* Permette all'input di occupare lo spazio disponibile */
            width: auto;  /* Annulla larghezza fissa o 100% se già presente */
            padding: 10px;
            border: 1px solid #555;
            border-radius: 5px;
            background-color: #4a617c; /* Medium blue-grey */
            color: white;
            font-size: 1em;
            box-sizing: border-box;
        }

        /* Assicurati che i select abbiano una larghezza propria e non si espandano come gli input */
        #setupSection select {
            padding: 10px;
            border: 1px solid #555;
            border-radius: 5px;
            background-color: #4a617c;
            color: white;
            font-size: 1em;
            box-sizing: border-box;
            width: auto; /* Si adatta al contenuto */
        }


        #setupSection input[type="text"]:focus,
        #setupSection input[type="number"]:focus,
        #setupSection select:focus {
            outline: none;
            border-color: #ffd700;
            box-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
        }

        button {
            padding: 12px 25px;
            font-size: 1.1em;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.2s, transform 0.1s;
            font-weight: bold;
        }

        button:hover {
            transform: translateY(-2px);
        }

        button:active {
            transform: translateY(0);
        }

        #startGameButton {
            background-color: #27ae60; /* Green */
            color: white;
            width: 100%;
            margin-top: 20px;
        }
        #startGameButton:hover {
            background-color: #219d53;
        }

        /* Game Area Section */
        #gameArea {
            display: none; /* Hidden by default */
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }

        .player-cards-container {
            display: flex;
            justify-content: space-around;
            gap: 20px;
            width: 100%;
            margin-bottom: 20px;
        }

        .player-card {
            background-color: #2980b9; /* Blue */
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            width: 45%;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            border: 2px solid transparent; /* Default border */
            transition: border-color 0.3s ease;
        }

        .player-card.active {
            border-color: #ffd700; /* Gold border for active player */
        }

        .player-card h3 {
            margin-top: 0;
            color: white;
        }

        .player-score {
            font-size: 3em;
            font-weight: bold;
            color: #ffd700; /* Gold */
            margin-bottom: 10px;
        }

        .player-stats {
            display: flex;
            justify-content: space-around;
            font-size: 0.9em;
            color: #ecf0f1;
        }
        .player-stats div {
            flex: 1;
            padding: 5px;
        }
        .player-stats span {
            font-weight: bold;
            color: white;
        }

        .input-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
            width: 100%;
            max-width: 400px; /* Max width for input area */
        }

        #scoreInput {
            width: calc(100% - 20px);
            padding: 15px;
            font-size: 2em;
            text-align: center;
            border: 2px solid #7f8c8d;
            border-radius: 8px;
            background-color: #4a617c;
            color: white;
            margin-bottom: 15px;
            box-sizing: border-box;
        }
        #scoreInput::placeholder {
            color: #bdc3c7;
        }
        #scoreInput:focus {
            border-color: #ffd700;
            box-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
        }

        /* Nuova griglia per numpad e pulsanti di azione */
        .numpad-and-actions-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-top: 15px;
            width: 100%; /* Si adatta al contenitore input-section */
        }

        .numpad-and-actions-grid button {
            padding: 15px 10px;
            font-size: 1.2em;
            background-color: #555;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.2s;
            flex-grow: 1;
        }

        .numpad-and-actions-grid button:hover {
            background-color: #777;
        }

        .action-button {
            background-color: #007bff; /* Blu */
        }
        .action-button:hover {
            background-color: #0056b3;
        }

        .full-width {
            grid-column: span 3; /* Occupa tutte e 3 le colonne */
            font-weight: bold;
            font-size: 1.3em;
            padding: 20px 10px;
        }

        #enterButton {
            background-color: #28a745; /* Verde per Enter */
            color: white;
        }
        #enterButton:hover {
            background-color: #218838;
        }
        
        /* Stile per il nuovo bottone "Cambia Partenza Leg" */
        .action-button.full-width:last-of-type {
            background-color: #ffc107; /* Giallo/Arancione */
            color: #333;
        }
        .action-button.full-width:last-of-type:hover {
            background-color: #e0a800;
        }

        .game-controls {
            display: flex;
            justify-content: space-around;
            width: 100%;
            margin-top: 25px;
        }

        .game-controls button {
            flex: 1;
            margin: 0 5px;
            background-color: #e74c3c; /* Red for reset buttons */
            color: white;
        }
        .game-controls button:hover {
            background-color: #c0392b;
        }

        #winnerMessage {
            margin-top: 20px;
            font-size: 2em;
            font-weight: bold;
            color: #00ff00; /* Bright green */
            text-align: center;
            background-color: rgba(0, 0, 0, 0.7);
            padding: 15px 30px;
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 255, 0, 0.5);
            display: none; /* Hidden by default, shown by JS */
            max-width: 700px;
            word-wrap: break-word;
        }

        /* Flag styling in control panel */
        .flag-small {
            width: 30px;
            height: 20px; /* Assicurati che l'altezza sia proporzionata alla larghezza */
            object-fit: contain; /* Mantiene il rapporto d'aspetto senza distorcere */
            border-radius: 3px;
            vertical-align: middle;
            margin-right: 8px;
            /* border: 1px solid rgba(255, 255, 255, 0.3); */ /* Bordo rimosso */
        }
    </style>
</head>
<body>
    <h1>DarDoh Scoreboard Controller</h1>

    <div id="setupSection" class="section">
        <h2>Imposta la Partita</h2>
        <div class="player-setup">
            <label>
                Giocatore 1:
                <select id="player1Country">
                    <option value="it">Italia</option>
                    <option value="uk">Regno Unito</option>
                    <option value="us">Stati Uniti</option>
                    <option value="de">Germania</option>
                    <option value="es">Spagna</option>
                    <option value="fr">Francia</option>
                    <option value="nl">Olanda</option>
                    <option value="be">Belgio</option>
                    <option value="ca">Canada</option>
                    <option value="au">Australia</option>
                    <option value="nz">Nuova Zelanda</option>
                    <option value="ie">Irlanda</option>
                    <option value="se">Svezia</option>
                    <option value="no">Norvegia</option>
                    <option value="dk">Danimarca</option>
                    <option value="fi">Finlandia</option>
                    <option value="ch">Svizzera</option>
                    <option value="at">Austria</option>
                    <option value="pl">Polonia</option>
                    <option value="cz">Repubblica Ceca</option>
                    <option value="jp">Giappone</option>
                </select>
                <input type="text" id="player1Name" placeholder="Nome Giocatore 1" value="Giocatore 1">
            </label>
            <label>
                Giocatore 2:
                <select id="player2Country">
                    <option value="it">Italia</option>
                    <option value="uk">Regno Unito</option>
                    <option value="us">Stati Uniti</option>
                    <option value="de">Germania</option>
                    <option value="es">Spagna</option>
                    <option value="fr">Francia</option>
                    <option value="nl">Olanda</option>
                    <option value="be">Belgio</option>
                    <option value="ca">Canada</option>
                    <option value="au">Australia</option>
                    <option value="nz">Nuova Zelanda</option>
                    <option value="ie">Irlanda</option>
                    <option value="se">Svezia</option>
                    <option value="no">Norvegia</option>
                    <option value="dk">Danimarca</option>
                    <option value="fi">Finlandia</option>
                    <option value="ch">Svizzera</option>
                    <option value="at">Austria</option>
                    <option value="pl">Polonia</option>
                    <option value="cz">Repubblica Ceca</option>
                    <option value="jp">Giappone</option>
                </select>
                <input type="text" id="player2Name" placeholder="Nome Giocatore 2" value="Giocatore 2">
            </label>
        </div>

        <div class="game-settings">
            <label>Legs per Set: <input type="number" id="legsToWinSet" value="3" min="1"></label>
            <label>Sets per Win: <input type="number" id="setsToWinMatch" value="1" min="1"></label>
        </div>

        <div class="custom-text-settings">
            <label>Testo personalizzato: <input type="text" id="customText" placeholder="Es. Partita Eliminatoria"></label>
            <label>Testo personalizzato:  <input type="text" id="customTextBottom" placeholder="Es. Sponsor By DarDoh"></label>
        </div>

        <button id="startGameButton" onclick="startGame()">INIZIA PARTITA</button>
    </div>

    <div id="gameArea" class="section">
        <h2>Area di Gioco</h2>
        <div class="player-cards-container">
            <div id="player1Card" class="player-card">
                <h3><img id="player1Flag" src="flags/it.svg" alt="Flag" class="flag-small"><span id="player1DisplayName">Giocatore 1</span></h3>
                <div class="player-score" id="player1ScoreDisplay">501</div>
                <div class="player-stats">
                    <div>Legs: <span id="player1LegsDisplay">0</span></div>
                    <div>Sets: <span id="player1SetsDisplay">0</span></div>
                    <div>AVG: <span id="player1AvgDisplay">0.00</span></div>
                </div>
            </div>
            <div id="player2Card" class="player-card">
                <h3><img id="player2Flag" src="flags/it.svg" alt="Flag" class="flag-small"><span id="player2DisplayName">Giocatore 2</span></h3>
                <div class="player-score" id="player2ScoreDisplay">501</div>
                <div class="player-stats">
                    <div>Legs: <span id="player2LegsDisplay">0</span></div>
                    <div>Sets: <span id="player2SetsDisplay">0</span></div>
                    <div>AVG: <span id="player2AvgDisplay">0.00</span></div>
                </div>
            </div>
        </div>

        <div class="input-section">
            <input type="text" id="scoreInput" placeholder="Punteggio" oninput="preventNonNumericInput(this)">
            
            <div class="numpad-and-actions-grid">
                <button onclick="appendToInput('1')">1</button>
                <button onclick="appendToInput('2')">2</button>
                <button onclick="appendToInput('3')">3</button>

                <button onclick="appendToInput('4')">4</button>
                <button onclick="appendToInput('5')">5</button>
                <button onclick="appendToInput('6')">6</button>

                <button onclick="appendToInput('7')">7</button>
                <button onclick="appendToInput('8')">8</button>
                <button onclick="appendToInput('9')">9</button>

                <button class="action-button" onclick="undoLastScore()">Undo</button>
                <button onclick="appendToInput('0')">0</button>
                <button class="action-button" onclick="clearInput()">Clear</button>

                <button class="action-button full-width" onclick="registerScore()" id="enterButton">Enter</button>
                
                <button class="action-button full-width" onclick="changeStartingPlayerForLeg()">Cambia Partenza Leg</button>
            </div>
        </div>

        <div class="game-controls">
            <button onclick="resetLeg()">Reset Leg</button>
            <button onclick="resetMatch()">Reset Partita</button>
        </div>

        <div id="winnerMessage"></div>
    </div>

    <script src="control.js"></script>
</body>
</html>