Wavelength/index.html at main · Couvbat/Wavelength · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jeu du Demi-Cercle - Multijoueur</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Connection Screen -->
    <div id="connection-screen" class="connection-screen">
        <div class="connection-container">
            <h1>🎯 JEU DU DEMI-CERCLE</h1>

            <div id="connection-form" class="connection-form">
                <div class="form-group">
                    <label for="player-name">👤 Votre nom</label>
                    <input type="text" id="player-name" placeholder="Entrez votre nom" maxlength="20">
                </div>

                <div class="form-group">
                    <label for="room-id">🔑 Code de la salle (optionnel)</label>
                    <input type="text" id="room-id" placeholder="Code personnalisé ou laissez vide pour code aléatoire" maxlength="10">
                </div>

                <div class="form-group">
                    <label for="max-rounds">🎯 Nombre de manches</label>
                    <select id="max-rounds" class="round-select">
                        <option value="5">5 manches</option>
                        <option value="10" selected>10 manches</option>
                        <option value="15">15 manches</option>
                        <option value="20">20 manches</option>
                    </select>
                </div>

                <div class="connection-buttons">
                    <button id="join-room-btn" class="btn btn-primary">Rejoindre</button>
                    <button id="create-room-btn" class="btn btn-success">Créer une Salle</button>
                </div>
            </div>

            <div id="waiting-room" class="waiting-room" style="display: none;">
                <div class="waiting-content">
                    <h2>⏳ En attente d'un adversaire...</h2>
                    <div class="room-code-display">
                        <p class="room-label">Code de la salle</p>
                        <p class="room-code clickable" id="current-room-id" title="Cliquez pour copier le lien d'invitation"></p>
                        <p class="room-hint">Cliquez sur le code pour copier le lien d'invitation</p>
                        <p class="copy-feedback" id="copy-feedback">✓ Lien copié!</p>
                    </div>
                    <div class="player-count-display">
                        <span id="player-count">1</span>/2 joueurs
                    </div>
                    <div class="waiting-animation">
                        <div class="spinner"></div>
                    </div>
                    <button id="leave-room-btn" class="btn btn-warning">Quitter la Salle</button>
                </div>
            </div>
        </div>
    </div>

    <div class="game-container" id="game-container" style="display: none;">
        <h1>JEU DU DEMI-CERCLE</h1>

        <div class="scores-section">
            <div class="score-display">
                <h2>🏆 Scores</h2>
                <div class="player-scores">
                    <div class="player-score">
                        <span class="player-name" id="player1-name">Joueur 1:</span>
                        <span class="score" id="player1-score">0 pts</span>
                    </div>
                    <div class="player-score">
                        <span class="player-name" id="player2-name">Joueur 2:</span>
                        <span class="score" id="player2-score">0 pts</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="game-info">
            <div id="current-player">Tour de Joueur 1</div>
            <div id="round-info">Manche 1 sur 10</div>
        </div>

        <div class="game-board">
            <svg id="game-svg" width="800" height="500" viewBox="0 0 400 250">
                <!-- Decorative border -->
                <path id="border" d="M 25 200 A 175 175 0 0 1 375 200"
                      fill="none" stroke="#dc2626" stroke-width="10" stroke-dasharray="12,6"/>

                <!-- Main semicircle -->
                <path id="semicircle" d="M 45 200 A 155 155 0 0 1 355 200"
                      fill="url(#nightGradient)" stroke="none"/>

                <!-- Stars decoration -->
                <g id="stars">
                    <!-- Stars will be generated by JavaScript -->
                </g>

                <!-- Target range (initially hidden) -->
                <path id="target-range" d="M 200 200 L 200 45"
                      stroke="rgba(34, 197, 94, 0.8)" stroke-width="0"
                      stroke-linecap="round" opacity="0"/>

                <!-- Needle -->
                <g id="needle" style="transform-origin: 200px 200px; pointer-events: none;">
                    <line x1="200" y1="200" x2="200" y2="55"
                          stroke="#dc2626" stroke-width="3" stroke-linecap="round"/>
                    <circle cx="200" cy="200" r="6" fill="#dc2626"/>
                </g>

                <!-- Semicircle border overlay - drawn on top to cut zones cleanly -->
                <path id="semicircle-border" d="M 45 200 A 155 155 0 0 1 355 200"
                      fill="none" stroke="#1e40af" stroke-width="5" pointer-events="none"/>

                <!-- Click area for needle placement - MUST be on top to capture clicks -->
                <path id="click-area" d="M 45 200 A 155 155 0 0 1 355 200 L 200 200 Z"
                      fill="transparent" stroke="none" pointer-events="all"/>

                <!-- Gradient definitions -->
                <defs>
                    <radialGradient id="nightGradient" cx="50%" cy="80%" r="60%">
                        <stop offset="0%" stop-color="#fbbf24"/>
                        <stop offset="30%" stop-color="#f59e0b"/>
                        <stop offset="60%" stop-color="#1e3a8a"/>
                        <stop offset="100%" stop-color="#0f172a"/>
                    </radialGradient>
                </defs>
            </svg>
        </div>

        <div class="controls">
            <button id="start-round" class="btn btn-primary">Commencer la manche</button>
            <button id="show-target" class="btn btn-secondary" style="display: none;">Afficher la zone</button>
            <button id="place-needle" class="btn btn-success" style="display: none;">Activer le placement</button>
            <button id="confirm-guess" class="btn btn-success" style="display: none;">Confirmer le placement</button>
            <button id="next-turn" class="btn btn-primary" style="display: none;">Tour suivant</button>
            <button id="new-game" class="btn btn-warning" style="display: none;">Nouvelle partie</button>
        </div>

        <div class="instructions">
            <p id="instruction-text">Cliquez sur "Commencer la manche" pour débuter!</p>
        </div>

        <div id="score-popup" class="score-popup" style="display: none;">
            <div class="popup-content">
                <h3 id="score-title">Points gagnés!</h3>
                <div id="score-value">+5 points</div>
                <button id="close-popup" class="btn btn-small">Continuer</button>
            </div>
        </div>

        <!-- End Game Screen -->
        <div id="end-game-screen" class="end-game-screen" style="display: none;">
            <div class="end-game-content">
                <h1 id="end-game-title">🏆 Partie terminée!</h1>
                <div id="end-game-message" class="end-game-message"></div>

                <div class="final-scores">
                    <h2>Scores finaux</h2>
                    <div class="final-score-cards">
                        <div class="final-score-card" id="final-player1">
                            <div class="final-player-name" id="final-player1-name">Joueur 1</div>
                            <div class="final-player-score" id="final-player1-score">0 pts</div>
                        </div>
                        <div class="final-score-card" id="final-player2">
                            <div class="final-player-name" id="final-player2-name">Joueur 2</div>
                            <div class="final-player-score" id="final-player2-score">0 pts</div>
                        </div>
                    </div>
                </div>

                <div class="end-game-buttons">
                    <button id="new-game-end" class="btn btn-success btn-large">Rejouer</button>
                    <button id="leave-game-end" class="btn btn-warning btn-large">Quitter</button>
                </div>
            </div>
        </div>
    </div>

    <script src="/socket.io/socket.io.js"></script>
    <script src="script.js"></script>
</body>
</html>