Hugging Face's logo

Spaces:
gaur3009
/
diceroll
Running

App Files Community
gaur3009 commited on
Commit
f47b170
·
verified ·
1 Parent(s): 2dee23e

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +346 -19
index.html CHANGED
@@ -1,19 +1,346 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Dice Player Assignment Game</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @keyframes diceRoll {
11
+ 0% { transform: rotate(0deg); }
12
+ 25% { transform: rotate(90deg); }
13
+ 50% { transform: rotate(180deg); }
14
+ 75% { transform: rotate(270deg); }
15
+ 100% { transform: rotate(360deg); }
16
+ }
17
+
18
+ .rolling {
19
+ animation: diceRoll 0.5s linear 3;
20
+ }
21
+
22
+ .dice-face {
23
+ display: grid;
24
+ grid-template-areas:
25
+ "a . c"
26
+ "e g f"
27
+ "d . b";
28
+ grid-template-columns: repeat(3, 1fr);
29
+ grid-template-rows: repeat(3, 1fr);
30
+ gap: 0.5rem;
31
+ width: 100px;
32
+ height: 100px;
33
+ padding: 0.5rem;
34
+ background-color: white;
35
+ border-radius: 10px;
36
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
37
+ }
38
+
39
+ .dot {
40
+ display: block;
41
+ width: 20px;
42
+ height: 20px;
43
+ border-radius: 50%;
44
+ background-color: #333;
45
+ align-self: center;
46
+ justify-self: center;
47
+ }
48
+
49
+ .dot:nth-child(1) { grid-area: a; }
50
+ .dot:nth-child(2) { grid-area: b; }
51
+ .dot:nth-child(3) { grid-area: c; }
52
+ .dot:nth-child(4) { grid-area: d; }
53
+ .dot:nth-child(5) { grid-area: e; }
54
+ .dot:nth-child(6) { grid-area: f; }
55
+ .dot:nth-child(7) { grid-area: g; }
56
+
57
+ .face-1 .dot:nth-child(1) { display: none; }
58
+ .face-1 .dot:nth-child(2) { display: none; }
59
+ .face-1 .dot:nth-child(3) { display: none; }
60
+ .face-1 .dot:nth-child(4) { display: none; }
61
+ .face-1 .dot:nth-child(6) { display: none; }
62
+
63
+ .face-2 .dot:nth-child(3) { display: none; }
64
+ .face-2 .dot:nth-child(4) { display: none; }
65
+ .face-2 .dot:nth-child(5) { display: none; }
66
+ .face-2 .dot:nth-child(7) { display: none; }
67
+
68
+ .face-3 .dot:nth-child(4) { display: none; }
69
+ .face-3 .dot:nth-child(5) { display: none; }
70
+ .face-3 .dot:nth-child(7) { display: none; }
71
+
72
+ .face-4 .dot:nth-child(5) { display: none; }
73
+ .face-4 .dot:nth-child(7) { display: none; }
74
+
75
+ .face-5 .dot:nth-child(7) { display: none; }
76
+
77
+ .player-card {
78
+ transition: all 0.3s ease;
79
+ }
80
+
81
+ .player-card.active {
82
+ transform: scale(1.05);
83
+ box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
84
+ }
85
+
86
+ .assigned {
87
+ background-color: #e5e7eb;
88
+ }
89
+ </style>
90
+ </head>
91
+ <body class="bg-gray-100 min-h-screen flex flex-col items-center py-8">
92
+ <div class="container mx-auto px-4">
93
+ <h1 class="text-4xl font-bold text-center text-blue-600 mb-2">Dice Player Assignment</h1>
94
+ <p class="text-center text-gray-600 mb-8">Roll the dice to assign each number (1-6) to a unique player</p>
95
+
96
+ <div class="flex flex-col md:flex-row justify-center items-center gap-8 mb-12">
97
+ <!-- Dice Container -->
98
+ <div class="flex flex-col items-center">
99
+ <div id="dice" class="dice-face face-1 mb-4">
100
+ <span class="dot"></span>
101
+ <span class="dot"></span>
102
+ <span class="dot"></span>
103
+ <span class="dot"></span>
104
+ <span class="dot"></span>
105
+ <span class="dot"></span>
106
+ <span class="dot"></span>
107
+ </div>
108
+ <button id="rollBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-full shadow-lg transition duration-300 flex items-center gap-2">
109
+ <i class="fas fa-dice"></i> Roll Dice
110
+ </button>
111
+ <div id="result" class="mt-4 text-xl font-semibold text-center min-h-8"></div>
112
+ </div>
113
+
114
+ <!-- Assignment Board -->
115
+ <div class="bg-white p-6 rounded-xl shadow-md w-full max-w-md">
116
+ <h2 class="text-2xl font-bold text-gray-800 mb-4 border-b pb-2">Assignments</h2>
117
+ <div id="assignmentBoard" class="grid grid-cols-2 gap-4">
118
+ <!-- Will be populated by JavaScript -->
119
+ </div>
120
+ </div>
121
+ </div>
122
+
123
+ <!-- Players Section -->
124
+ <div class="bg-white p-6 rounded-xl shadow-md mb-8">
125
+ <h2 class="text-2xl font-bold text-gray-800 mb-4 border-b pb-2">Players</h2>
126
+ <div id="playersContainer" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
127
+ <!-- Player cards will be added here -->
128
+ </div>
129
+ <div class="mt-4 flex flex-col sm:flex-row gap-2">
130
+ <input type="text" id="playerNameInput" placeholder="Enter player name" class="flex-grow px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
131
+ <button id="addPlayerBtn" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg transition duration-300">Add Player</button>
132
+ <button id="resetBtn" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg transition duration-300">Reset Game</button>
133
+ </div>
134
+ </div>
135
+ </div>
136
+
137
+ <script>
138
+ document.addEventListener('DOMContentLoaded', function() {
139
+ // Game state
140
+ const state = {
141
+ players: [],
142
+ assignments: {},
143
+ usedNumbers: new Set(),
144
+ usedPlayers: new Set()
145
+ };
146
+
147
+ // DOM elements
148
+ const dice = document.getElementById('dice');
149
+ const rollBtn = document.getElementById('rollBtn');
150
+ const result = document.getElementById('result');
151
+ const assignmentBoard = document.getElementById('assignmentBoard');
152
+ const playersContainer = document.getElementById('playersContainer');
153
+ const playerNameInput = document.getElementById('playerNameInput');
154
+ const addPlayerBtn = document.getElementById('addPlayerBtn');
155
+ const resetBtn = document.getElementById('resetBtn');
156
+
157
+ // Initialize assignment board
158
+ function initAssignmentBoard() {
159
+ assignmentBoard.innerHTML = '';
160
+ for (let i = 1; i <= 6; i++) {
161
+ const assignmentItem = document.createElement('div');
162
+ assignmentItem.className = 'border rounded-lg p-3';
163
+ assignmentItem.innerHTML = `
164
+ <div class="font-bold text-gray-700">Number ${i}</div>
165
+ <div id="assignment-${i}" class="text-blue-600 font-medium">-</div>
166
+ `;
167
+ assignmentBoard.appendChild(assignmentItem);
168
+ }
169
+ }
170
+
171
+ // Add a player
172
+ function addPlayer(name) {
173
+ if (state.players.length >= 6) {
174
+ alert('Maximum of 6 players reached!');
175
+ return;
176
+ }
177
+
178
+ if (!name.trim()) {
179
+ alert('Please enter a valid name');
180
+ return;
181
+ }
182
+
183
+ const player = {
184
+ id: Date.now(),
185
+ name: name.trim(),
186
+ assignedNumber: null
187
+ };
188
+
189
+ state.players.push(player);
190
+ renderPlayers();
191
+ playerNameInput.value = '';
192
+ }
193
+
194
+ // Render players
195
+ function renderPlayers() {
196
+ playersContainer.innerHTML = '';
197
+ state.players.forEach(player => {
198
+ const playerCard = document.createElement('div');
199
+ playerCard.className = `player-card bg-white border rounded-lg p-4 shadow-sm ${player.assignedNumber ? 'assigned' : ''}`;
200
+ playerCard.id = `player-${player.id}`;
201
+ playerCard.innerHTML = `
202
+ <div class="flex justify-between items-center">
203
+ <div>
204
+ <h3 class="font-bold text-lg">${player.name}</h3>
205
+ <p class="text-sm text-gray-600">
206
+ ${player.assignedNumber ? `Assigned to: #${player.assignedNumber}` : 'Not assigned yet'}
207
+ </p>
208
+ </div>
209
+ <div class="text-2xl">
210
+ ${player.assignedNumber ? '✅' : '🎲'}
211
+ </div>
212
+ </div>
213
+ `;
214
+ playersContainer.appendChild(playerCard);
215
+ });
216
+ }
217
+
218
+ // Roll the dice
219
+ function rollDice() {
220
+ if (state.players.length < 6) {
221
+ alert('Please add all 6 players first!');
222
+ return;
223
+ }
224
+
225
+ if (state.usedNumbers.size === 6) {
226
+ alert('All numbers have been assigned!');
227
+ return;
228
+ }
229
+
230
+ // Disable button during roll
231
+ rollBtn.disabled = true;
232
+ rollBtn.classList.add('opacity-50');
233
+
234
+ // Add rolling animation
235
+ dice.classList.add('rolling');
236
+
237
+ // Clear previous result
238
+ result.textContent = '';
239
+
240
+ // Determine available numbers and players
241
+ const availableNumbers = [1, 2, 3, 4, 5, 6].filter(n => !state.usedNumbers.has(n));
242
+ const availablePlayers = state.players.filter(p => !state.usedPlayers.has(p.id));
243
+
244
+ // Simulate rolling for 1.5 seconds
245
+ let rolls = 0;
246
+ const rollInterval = setInterval(() => {
247
+ const randomFace = Math.floor(Math.random() * 6) + 1;
248
+ showDiceFace(randomFace);
249
+ rolls++;
250
+ }, 100);
251
+
252
+ // After rolling, show final result
253
+ setTimeout(() => {
254
+ clearInterval(rollInterval);
255
+ dice.classList.remove('rolling');
256
+
257
+ // Get random available number
258
+ const randomIndex = Math.floor(Math.random() * availableNumbers.length);
259
+ const rolledNumber = availableNumbers[randomIndex];
260
+
261
+ // Get random available player
262
+ const playerIndex = Math.floor(Math.random() * availablePlayers.length);
263
+ const player = availablePlayers[playerIndex];
264
+
265
+ // Assign
266
+ state.assignments[rolledNumber] = player;
267
+ player.assignedNumber = rolledNumber;
268
+ state.usedNumbers.add(rolledNumber);
269
+ state.usedPlayers.add(player.id);
270
+
271
+ // Update UI
272
+ showDiceFace(rolledNumber);
273
+ updateAssignment(rolledNumber, player);
274
+ renderPlayers();
275
+
276
+ // Show result
277
+ result.innerHTML = `Number <span class="text-blue-600 font-bold">${rolledNumber}</span> assigned to <span class="text-blue-600 font-bold">${player.name}</span>`;
278
+
279
+ // Highlight the assigned player
280
+ const playerCard = document.getElementById(`player-${player.id}`);
281
+ playerCard.classList.add('active');
282
+ setTimeout(() => playerCard.classList.remove('active'), 2000);
283
+
284
+ // Re-enable button if there are more assignments
285
+ if (state.usedNumbers.size < 6) {
286
+ rollBtn.disabled = false;
287
+ rollBtn.classList.remove('opacity-50');
288
+ } else {
289
+ result.innerHTML += '<br><span class="text-green-600 font-bold">All numbers assigned!</span>';
290
+ }
291
+ }, 1500);
292
+ }
293
+
294
+ // Show dice face
295
+ function showDiceFace(number) {
296
+ dice.className = 'dice-face';
297
+ dice.classList.add(`face-${number}`);
298
+ }
299
+
300
+ // Update assignment display
301
+ function updateAssignment(number, player) {
302
+ const assignmentElement = document.getElementById(`assignment-${number}`);
303
+ assignmentElement.textContent = player.name;
304
+ assignmentElement.parentElement.classList.add('bg-blue-50', 'border-blue-200');
305
+ }
306
+
307
+ // Reset game
308
+ function resetGame() {
309
+ state.players = [];
310
+ state.assignments = {};
311
+ state.usedNumbers = new Set();
312
+ state.usedPlayers = new Set();
313
+
314
+ initAssignmentBoard();
315
+ playersContainer.innerHTML = '';
316
+ result.textContent = '';
317
+ showDiceFace(1);
318
+
319
+ rollBtn.disabled = false;
320
+ rollBtn.classList.remove('opacity-50');
321
+ }
322
+
323
+ // Event listeners
324
+ addPlayerBtn.addEventListener('click', () => addPlayer(playerNameInput.value));
325
+
326
+ playerNameInput.addEventListener('keypress', (e) => {
327
+ if (e.key === 'Enter') {
328
+ addPlayer(playerNameInput.value);
329
+ }
330
+ });
331
+
332
+ rollBtn.addEventListener('click', rollDice);
333
+ resetBtn.addEventListener('click', resetGame);
334
+
335
+ // Initialize
336
+ initAssignmentBoard();
337
+ showDiceFace(1);
338
+
339
+ // Add some sample players for demo
340
+ if (window.location.href.includes('localhost')) {
341
+ ['Alice', 'Bob', 'Charlie', 'Diana', 'Eve', 'Frank'].forEach(name => addPlayer(name));
342
+ }
343
+ });
344
+ </script>
345
+ </body>
346
+ </html>