Hugging Face's logo

Spaces:
rajgupt
/
ttt
Running

App Files Community
rajgupt commited on
Commit
c228f9f
·
verified ·
1 Parent(s): c688d15

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +346 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ttt
3
- emoji: 👀
4
- colorFrom: green
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: ttt
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
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>Tic Tac Toe</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
+ .cell {
11
+ transition: all 0.3s ease;
12
+ }
13
+ .cell:hover:not(.occupied) {
14
+ transform: scale(1.05);
15
+ box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
16
+ }
17
+ .winning-cell {
18
+ animation: pulse 1.5s infinite;
19
+ }
20
+ @keyframes pulse {
21
+ 0% { background-color: rgba(59, 130, 246, 0.1); }
22
+ 50% { background-color: rgba(59, 130, 246, 0.3); }
23
+ 100% { background-color: rgba(59, 130, 246, 0.1); }
24
+ }
25
+ </style>
26
+ </head>
27
+ <body class="bg-gray-100 min-h-screen flex flex-col items-center justify-center p-4">
28
+ <div class="max-w-md w-full bg-white rounded-xl shadow-2xl overflow-hidden">
29
+ <!-- Header -->
30
+ <div class="bg-blue-600 p-6 text-white">
31
+ <h1 class="text-3xl font-bold text-center">Tic Tac Toe</h1>
32
+ <div class="flex justify-between items-center mt-4">
33
+ <div class="flex items-center">
34
+ <i class="fas fa-user text-2xl mr-2"></i>
35
+ <span id="playerX" class="text-xl font-semibold">Player X</span>
36
+ </div>
37
+ <div class="text-center">
38
+ <p class="text-sm">Current Turn</p>
39
+ <p id="currentTurn" class="text-2xl font-bold">X</p>
40
+ </div>
41
+ <div class="flex items-center">
42
+ <span id="playerO" class="text-xl font-semibold">Player O</span>
43
+ <i class="fas fa-robot text-2xl ml-2"></i>
44
+ </div>
45
+ </div>
46
+ </div>
47
+
48
+ <!-- Game Board -->
49
+ <div class="p-6">
50
+ <div class="grid grid-cols-3 gap-3 aspect-square">
51
+ <!-- Cells will be generated by JavaScript -->
52
+ </div>
53
+ </div>
54
+
55
+ <!-- Game Controls -->
56
+ <div class="p-6 bg-gray-50 border-t">
57
+ <div class="flex justify-between items-center">
58
+ <div>
59
+ <p class="text-gray-600">Score</p>
60
+ <div class="flex space-x-4">
61
+ <div class="text-center">
62
+ <p class="font-bold">X</p>
63
+ <p id="scoreX" class="text-xl">0</p>
64
+ </div>
65
+ <div class="text-center">
66
+ <p class="font-bold">O</p>
67
+ <p id="scoreO" class="text-xl">0</p>
68
+ </div>
69
+ </div>
70
+ </div>
71
+ <button id="resetBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-lg transition">
72
+ <i class="fas fa-redo mr-2"></i> Reset
73
+ </button>
74
+ </div>
75
+ </div>
76
+
77
+ <!-- Game Mode Selector -->
78
+ <div class="p-4 bg-gray-100 border-t">
79
+ <div class="flex justify-center space-x-4">
80
+ <button id="pvpBtn" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg transition">
81
+ <i class="fas fa-users mr-2"></i> Player vs Player
82
+ </button>
83
+ <button id="pvcBtn" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-lg transition">
84
+ <i class="fas fa-robot mr-2"></i> Player vs Computer
85
+ </button>
86
+ </div>
87
+ </div>
88
+ </div>
89
+
90
+ <!-- Modal -->
91
+ <div id="modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
92
+ <div class="bg-white rounded-xl p-8 max-w-sm w-full mx-4 text-center">
93
+ <h2 id="modalTitle" class="text-2xl font-bold mb-4"></h2>
94
+ <p id="modalMessage" class="text-lg mb-6"></p>
95
+ <button id="modalBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-lg transition w-full">
96
+ Play Again
97
+ </button>
98
+ </div>
99
+ </div>
100
+
101
+ <script>
102
+ document.addEventListener('DOMContentLoaded', () => {
103
+ // Game state
104
+ let board = ['', '', '', '', '', '', '', '', ''];
105
+ let currentPlayer = 'X';
106
+ let gameActive = true;
107
+ let scores = { X: 0, O: 0 };
108
+ let gameMode = 'pvp'; // 'pvp' or 'pvc'
109
+
110
+ // DOM elements
111
+ const boardElement = document.querySelector('.grid');
112
+ const currentTurnElement = document.getElementById('currentTurn');
113
+ const scoreXElement = document.getElementById('scoreX');
114
+ const scoreOElement = document.getElementById('scoreO');
115
+ const resetBtn = document.getElementById('resetBtn');
116
+ const pvpBtn = document.getElementById('pvpBtn');
117
+ const pvcBtn = document.getElementById('pvcBtn');
118
+ const modal = document.getElementById('modal');
119
+ const modalTitle = document.getElementById('modalTitle');
120
+ const modalMessage = document.getElementById('modalMessage');
121
+ const modalBtn = document.getElementById('modalBtn');
122
+ const playerXElement = document.getElementById('playerX');
123
+ const playerOElement = document.getElementById('playerO');
124
+
125
+ // Initialize the game board
126
+ function initializeBoard() {
127
+ boardElement.innerHTML = '';
128
+ for (let i = 0; i < 9; i++) {
129
+ const cell = document.createElement('div');
130
+ cell.className = 'cell bg-white border-2 border-gray-200 rounded-lg flex items-center justify-center text-6xl font-bold cursor-pointer';
131
+ cell.dataset.index = i;
132
+ cell.addEventListener('click', () => handleCellClick(i));
133
+ boardElement.appendChild(cell);
134
+ }
135
+ }
136
+
137
+ // Handle cell click
138
+ function handleCellClick(index) {
139
+ if (!gameActive || board[index] !== '') return;
140
+
141
+ // Update board
142
+ board[index] = currentPlayer;
143
+ updateBoard();
144
+
145
+ // Check for win or draw
146
+ if (checkWin()) {
147
+ endGame(false);
148
+ return;
149
+ }
150
+
151
+ if (checkDraw()) {
152
+ endGame(true);
153
+ return;
154
+ }
155
+
156
+ // Switch player
157
+ currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
158
+ currentTurnElement.textContent = currentPlayer;
159
+
160
+ // If playing against computer and it's computer's turn
161
+ if (gameMode === 'pvc' && currentPlayer === 'O' && gameActive) {
162
+ setTimeout(computerMove, 500);
163
+ }
164
+ }
165
+
166
+ // Computer's move (simple AI)
167
+ function computerMove() {
168
+ if (!gameActive) return;
169
+
170
+ // Try to win if possible
171
+ let move = findWinningMove('O');
172
+ if (move === -1) {
173
+ // Block player from winning
174
+ move = findWinningMove('X');
175
+ }
176
+ if (move === -1) {
177
+ // Take center if available
178
+ if (board[4] === '') move = 4;
179
+ else {
180
+ // Take a random available corner
181
+ const corners = [0, 2, 6, 8];
182
+ const availableCorners = corners.filter(i => board[i] === '');
183
+ if (availableCorners.length > 0) {
184
+ move = availableCorners[Math.floor(Math.random() * availableCorners.length)];
185
+ } else {
186
+ // Take any available spot
187
+ const availableSpots = board.map((val, idx) => val === '' ? idx : -1).filter(i => i !== -1);
188
+ if (availableSpots.length > 0) {
189
+ move = availableSpots[Math.floor(Math.random() * availableSpots.length)];
190
+ }
191
+ }
192
+ }
193
+ }
194
+
195
+ if (move !== -1) {
196
+ board[move] = 'O';
197
+ updateBoard();
198
+
199
+ if (checkWin()) {
200
+ endGame(false);
201
+ return;
202
+ }
203
+
204
+ if (checkDraw()) {
205
+ endGame(true);
206
+ return;
207
+ }
208
+
209
+ currentPlayer = 'X';
210
+ currentTurnElement.textContent = currentPlayer;
211
+ }
212
+ }
213
+
214
+ // Find a winning move for the given player
215
+ function findWinningMove(player) {
216
+ for (let i = 0; i < 9; i++) {
217
+ if (board[i] === '') {
218
+ board[i] = player;
219
+ if (checkWin()) {
220
+ board[i] = '';
221
+ return i;
222
+ }
223
+ board[i] = '';
224
+ }
225
+ }
226
+ return -1;
227
+ }
228
+
229
+ // Update the board display
230
+ function updateBoard() {
231
+ const cells = document.querySelectorAll('.cell');
232
+ cells.forEach((cell, index) => {
233
+ cell.textContent = board[index];
234
+ if (board[index] === 'X') {
235
+ cell.classList.add('text-blue-600');
236
+ cell.classList.add('occupied');
237
+ } else if (board[index] === 'O') {
238
+ cell.classList.add('text-purple-600');
239
+ cell.classList.add('occupied');
240
+ } else {
241
+ cell.classList.remove('text-blue-600', 'text-purple-600', 'occupied');
242
+ }
243
+ });
244
+ }
245
+
246
+ // Check for a win
247
+ function checkWin() {
248
+ const winPatterns = [
249
+ [0, 1, 2], [3, 4, 5], [6, 7, 8], // rows
250
+ [0, 3, 6], [1, 4, 7], [2, 5, 8], // columns
251
+ [0, 4, 8], [2, 4, 6] // diagonals
252
+ ];
253
+
254
+ for (const pattern of winPatterns) {
255
+ const [a, b, c] = pattern;
256
+ if (board[a] && board[a] === board[b] && board[a] === board[c]) {
257
+ // Highlight winning cells
258
+ const cells = document.querySelectorAll('.cell');
259
+ cells[a].classList.add('winning-cell');
260
+ cells[b].classList.add('winning-cell');
261
+ cells[c].classList.add('winning-cell');
262
+ return true;
263
+ }
264
+ }
265
+ return false;
266
+ }
267
+
268
+ // Check for a draw
269
+ function checkDraw() {
270
+ return board.every(cell => cell !== '');
271
+ }
272
+
273
+ // End the game
274
+ function endGame(isDraw) {
275
+ gameActive = false;
276
+
277
+ if (isDraw) {
278
+ modalTitle.textContent = "It's a Draw!";
279
+ modalMessage.textContent = "No one wins this round.";
280
+ } else {
281
+ const winner = currentPlayer;
282
+ modalTitle.textContent = `${winner} Wins!`;
283
+ modalMessage.textContent = `Congratulations ${winner === 'X' ? 'Player' : gameMode === 'pvp' ? 'Player' : 'Computer'} ${winner}!`;
284
+
285
+ // Update score
286
+ scores[winner]++;
287
+ scoreXElement.textContent = scores.X;
288
+ scoreOElement.textContent = scores.O;
289
+ }
290
+
291
+ modal.classList.remove('hidden');
292
+ }
293
+
294
+ // Reset the game
295
+ function resetGame() {
296
+ board = ['', '', '', '', '', '', '', '', ''];
297
+ currentPlayer = 'X';
298
+ gameActive = true;
299
+ currentTurnElement.textContent = currentPlayer;
300
+
301
+ // Remove winning cell highlights
302
+ const cells = document.querySelectorAll('.cell');
303
+ cells.forEach(cell => {
304
+ cell.classList.remove('winning-cell');
305
+ });
306
+
307
+ updateBoard();
308
+ }
309
+
310
+ // Set game mode
311
+ function setGameMode(mode) {
312
+ gameMode = mode;
313
+ if (mode === 'pvp') {
314
+ pvpBtn.classList.add('bg-green-700');
315
+ pvpBtn.classList.remove('bg-green-600');
316
+ pvcBtn.classList.add('bg-purple-600');
317
+ pvcBtn.classList.remove('bg-purple-700');
318
+ playerOElement.textContent = 'Player O';
319
+ playerOElement.nextElementSibling.className = 'fas fa-user text-2xl ml-2';
320
+ } else {
321
+ pvpBtn.classList.add('bg-green-600');
322
+ pvpBtn.classList.remove('bg-green-700');
323
+ pvcBtn.classList.add('bg-purple-700');
324
+ pvcBtn.classList.remove('bg-purple-600');
325
+ playerOElement.textContent = 'Computer';
326
+ playerOElement.nextElementSibling.className = 'fas fa-robot text-2xl ml-2';
327
+ }
328
+ resetGame();
329
+ }
330
+
331
+ // Event listeners
332
+ resetBtn.addEventListener('click', resetGame);
333
+ pvpBtn.addEventListener('click', () => setGameMode('pvp'));
334
+ pvcBtn.addEventListener('click', () => setGameMode('pvc'));
335
+ modalBtn.addEventListener('click', () => {
336
+ modal.classList.add('hidden');
337
+ resetGame();
338
+ });
339
+
340
+ // Initialize the game
341
+ initializeBoard();
342
+ setGameMode('pvp');
343
+ });
344
+ </script>
345
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=rajgupt/ttt" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
346
+ </html>