Hugging Face's logo

Spaces:
ravithejads
/
tictactoe
Sleeping

App Files Community
ravithejads commited on
Commit
74553d1
·
verified ·
1 Parent(s): 23fb139

Delete room_game.html

Browse files
Files changed (1) hide show
  1. room_game.html +0 -341
room_game.html DELETED
@@ -1,341 +0,0 @@
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>Room-Based Tic-Tac-Toe vs Mistral AI</title>
7
- <style>
8
- body {
9
- font-family: 'Courier New', monospace;
10
- background: #1a1a1a;
11
- color: #00ff00;
12
- margin: 0;
13
- padding: 20px;
14
- display: flex;
15
- height: 100vh;
16
- gap: 20px;
17
- }
18
-
19
- .game-container {
20
- display: flex;
21
- gap: 20px;
22
- width: 100%;
23
- max-width: 1400px;
24
- margin: 0 auto;
25
- }
26
-
27
- .room-panel {
28
- flex: 0 0 250px;
29
- background: #222;
30
- border: 1px solid #444;
31
- border-radius: 5px;
32
- padding: 15px;
33
- display: flex;
34
- flex-direction: column;
35
- gap: 15px;
36
- }
37
-
38
- .room-header {
39
- color: #00ccff;
40
- font-weight: bold;
41
- text-align: center;
42
- margin-bottom: 10px;
43
- }
44
-
45
- .room-info {
46
- background: #333;
47
- padding: 10px;
48
- border-radius: 3px;
49
- font-size: 12px;
50
- }
51
-
52
- .room-controls button {
53
- width: 100%;
54
- background: #4ecdc4;
55
- color: white;
56
- border: none;
57
- padding: 10px;
58
- margin-bottom: 10px;
59
- cursor: pointer;
60
- font-family: 'Courier New', monospace;
61
- border-radius: 3px;
62
- }
63
-
64
- .room-controls button:hover {
65
- background: #45a7a0;
66
- }
67
-
68
- .room-id-input {
69
- width: 100%;
70
- background: #333;
71
- border: 1px solid #555;
72
- color: #00ff00;
73
- padding: 8px;
74
- font-family: 'Courier New', monospace;
75
- margin-bottom: 10px;
76
- }
77
-
78
- .markdown-panel {
79
- flex: 0 0 300px;
80
- background: #222;
81
- border: 1px solid #444;
82
- border-radius: 5px;
83
- overflow: hidden;
84
- }
85
-
86
- .markdown-header {
87
- background: #333;
88
- padding: 10px;
89
- text-align: center;
90
- color: #00ccff;
91
- font-weight: bold;
92
- }
93
-
94
- .markdown-content {
95
- padding: 15px;
96
- font-size: 12px;
97
- line-height: 1.4;
98
- max-height: 600px;
99
- overflow-y: auto;
100
- white-space: pre-wrap;
101
- }
102
-
103
- .game-board {
104
- flex: 1;
105
- display: flex;
106
- flex-direction: column;
107
- align-items: center;
108
- }
109
-
110
- .title {
111
- font-size: 24px;
112
- margin-bottom: 20px;
113
- text-align: center;
114
- color: #00ccff;
115
- }
116
-
117
- .board {
118
- display: grid;
119
- grid-template-columns: repeat(3, 100px);
120
- grid-template-rows: repeat(3, 100px);
121
- gap: 2px;
122
- background: #333;
123
- padding: 2px;
124
- margin-bottom: 20px;
125
- }
126
-
127
- .cell {
128
- background: #222;
129
- border: 1px solid #555;
130
- display: flex;
131
- align-items: center;
132
- justify-content: center;
133
- font-size: 36px;
134
- font-weight: bold;
135
- cursor: pointer;
136
- transition: background 0.2s;
137
- }
138
-
139
- .cell:hover {
140
- background: #333;
141
- }
142
-
143
- .cell.x {
144
- color: #ff6b6b;
145
- }
146
-
147
- .cell.o {
148
- color: #4ecdc4;
149
- }
150
-
151
- .status {
152
- font-size: 18px;
153
- margin-bottom: 20px;
154
- text-align: center;
155
- color: #ffff99;
156
- }
157
-
158
- .reset-btn {
159
- background: #ff6b6b;
160
- color: white;
161
- border: none;
162
- padding: 10px 20px;
163
- font-size: 16px;
164
- cursor: pointer;
165
- font-family: 'Courier New', monospace;
166
- margin-bottom: 20px;
167
- }
168
-
169
- .reset-btn:hover {
170
- background: #ff5252;
171
- }
172
-
173
- .chat-container {
174
- flex: 1;
175
- display: flex;
176
- flex-direction: column;
177
- background: #222;
178
- border: 1px solid #444;
179
- border-radius: 5px;
180
- overflow: hidden;
181
- }
182
-
183
- .chat-header {
184
- background: #333;
185
- padding: 10px;
186
- text-align: center;
187
- color: #00ccff;
188
- font-weight: bold;
189
- }
190
-
191
- .chat-messages {
192
- flex: 1;
193
- overflow-y: auto;
194
- padding: 10px;
195
- max-height: 400px;
196
- }
197
-
198
- .message {
199
- margin-bottom: 10px;
200
- padding: 8px;
201
- border-radius: 5px;
202
- }
203
-
204
- .message.user {
205
- background: #1a4a1a;
206
- align-self: flex-end;
207
- text-align: right;
208
- }
209
-
210
- .message.ai {
211
- background: #1a1a4a;
212
- align-self: flex-start;
213
- }
214
-
215
- .message-sender {
216
- font-weight: bold;
217
- font-size: 12px;
218
- margin-bottom: 4px;
219
- }
220
-
221
- .user .message-sender {
222
- color: #ff6b6b;
223
- }
224
-
225
- .ai .message-sender {
226
- color: #4ecdc4;
227
- }
228
-
229
- .chat-input {
230
- display: flex;
231
- padding: 10px;
232
- background: #333;
233
- }
234
-
235
- .chat-input input {
236
- flex: 1;
237
- background: #222;
238
- border: 1px solid #555;
239
- color: #00ff00;
240
- padding: 8px;
241
- font-family: 'Courier New', monospace;
242
- }
243
-
244
- .chat-input button {
245
- background: #4ecdc4;
246
- color: white;
247
- border: none;
248
- padding: 8px 15px;
249
- cursor: pointer;
250
- font-family: 'Courier New', monospace;
251
- }
252
-
253
- .loading {
254
- opacity: 0.6;
255
- }
256
-
257
- .no-room {
258
- text-align: center;
259
- color: #888;
260
- font-style: italic;
261
- margin-top: 50px;
262
- }
263
- </style>
264
- </head>
265
- <body>
266
- <div class="game-container">
267
- <!-- Room Management Panel -->
268
- <div class="room-panel">
269
- <div class="room-header">🏠 Room Management</div>
270
-
271
- <div class="room-controls">
272
- <button onclick="createNewRoom()">Create New Room</button>
273
- <input type="text" class="room-id-input" id="roomIdInput" placeholder="Enter Room ID">
274
- <button onclick="joinRoom()">Join Room</button>
275
- <button onclick="leaveRoom()">Leave Room</button>
276
- </div>
277
-
278
- <div class="room-info" id="roomInfo">
279
- <div>Status: No room selected</div>
280
- <div>Room ID: -</div>
281
- <div>Game Status: -</div>
282
- <div>Your Turn: -</div>
283
- </div>
284
- </div>
285
-
286
- <!-- Markdown Display Panel -->
287
- <div class="markdown-panel">
288
- <div class="markdown-header">📝 Game State (Markdown)</div>
289
- <div class="markdown-content" id="markdownContent">
290
- Select or create a room to see the markdown representation...
291
- </div>
292
- </div>
293
-
294
- <!-- Game Board -->
295
- <div class="game-board">
296
- <h1 class="title">🎮 Room-Based Tic-Tac-Toe</h1>
297
-
298
- <div class="status" id="gameStatus">Create or join a room to start playing!</div>
299
-
300
- <div id="gameArea" style="display: none;">
301
- <div class="board" id="gameBoard">
302
- <div class="cell" data-index="0"></div>
303
- <div class="cell" data-index="1"></div>
304
- <div class="cell" data-index="2"></div>
305
- <div class="cell" data-index="3"></div>
306
- <div class="cell" data-index="4"></div>
307
- <div class="cell" data-index="5"></div>
308
- <div class="cell" data-index="6"></div>
309
- <div class="cell" data-index="7"></div>
310
- <div class="cell" data-index="8"></div>
311
- </div>
312
-
313
- <button class="reset-btn" onclick="resetGame()">New Game (Same Room)</button>
314
- </div>
315
-
316
- <div class="no-room" id="noRoom">
317
- 👆 Create a new room or join an existing one to start playing!
318
- </div>
319
- </div>
320
-
321
- <!-- Chat Panel -->
322
- <div class="chat-container">
323
- <div class="chat-header">💬 Chat with Mistral AI</div>
324
-
325
- <div class="chat-messages" id="chatMessages">
326
- <div class="message ai">
327
- <div class="message-sender">System:</div>
328
- <div>Create or join a room to start chatting with Mistral AI!</div>
329
- </div>
330
- </div>
331
-
332
- <div class="chat-input">
333
- <input type="text" id="chatInput" placeholder="Join a room first..." onkeypress="handleEnter(event)" disabled>
334
- <button onclick="sendChatMessage()" disabled id="sendBtn">Send</button>
335
- </div>
336
- </div>
337
- </div>
338
-
339
- <script src="room_game.js"></script>
340
- </body>
341
- </html>