Juno360219 commited on
Commit
2f59676
·
verified ·
1 Parent(s): b43aa65

incorperate random images - Follow Up Deployment

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +892 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Bhj
3
- emoji: 🔥
4
- colorFrom: gray
5
  colorTo: pink
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: bhj
3
+ emoji: 🐳
4
+ colorFrom: blue
5
  colorTo: pink
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,892 @@
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>Yu-Gi-Oh! Dungeon Dice Monsters</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
+ @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Roboto Condensed', sans-serif;
14
+ background-color: #1a1a2e;
15
+ color: #fff;
16
+ overflow-x: hidden;
17
+ }
18
+
19
+ .dice {
20
+ perspective: 1000px;
21
+ transition: transform 0.5s;
22
+ }
23
+
24
+ .dice:hover {
25
+ transform: scale(1.05);
26
+ }
27
+
28
+ .dice-face {
29
+ position: absolute;
30
+ width: 100%;
31
+ height: 100%;
32
+ backface-visibility: hidden;
33
+ display: flex;
34
+ justify-content: center;
35
+ align-items: center;
36
+ border-radius: 10px;
37
+ box-shadow: 0 0 10px rgba(0,0,0,0.3);
38
+ }
39
+
40
+ .dice-3d {
41
+ width: 60px;
42
+ height: 60px;
43
+ position: relative;
44
+ transform-style: preserve-3d;
45
+ transition: transform 1s;
46
+ }
47
+
48
+ .game-board {
49
+ background-image: url('https://i.imgur.com/XJQZ9Q9.jpg');
50
+ background-size: cover;
51
+ position: relative;
52
+ background-position: center;
53
+ }
54
+
55
+ .monster-card {
56
+ transition: all 0.3s;
57
+ transform-style: preserve-3d;
58
+ }
59
+
60
+ .monster-card:hover {
61
+ transform: translateY(-5px) rotateY(5deg);
62
+ box-shadow: 0 10px 20px rgba(0,0,0,0.3);
63
+ }
64
+
65
+ .monster-stats {
66
+ background: rgba(0,0,0,0.7);
67
+ border-radius: 5px;
68
+ padding: 2px 5px;
69
+ }
70
+
71
+ @keyframes diceRoll {
72
+ 0% { transform: rotateX(0) rotateY(0); }
73
+ 100% { transform: rotateX(360deg) rotateY(360deg); }
74
+ }
75
+
76
+ .rolling {
77
+ animation: diceRoll 1s ease-out;
78
+ }
79
+
80
+ .cell {
81
+ position: relative;
82
+ border: 1px dashed rgba(255,255,255,0.2);
83
+ }
84
+
85
+ .cell::after {
86
+ content: '';
87
+ display: block;
88
+ padding-bottom: 100%;
89
+ }
90
+
91
+ .cell-highlight {
92
+ box-shadow: inset 0 0 10px 5px rgba(255, 215, 0, 0.5);
93
+ }
94
+
95
+ .cell-occupied {
96
+ background-color: rgba(255,0,0,0.2);
97
+ }
98
+ </style>
99
+ </head>
100
+ <body class="min-h-screen flex flex-col">
101
+ <!-- Header -->
102
+ <header class="bg-gradient-to-r from-blue-900 to-purple-900 py-4 px-6 shadow-lg">
103
+ <div class="container mx-auto flex justify-between items-center">
104
+ <div class="flex items-center space-x-2">
105
+ <i class="fas fa-dice-d20 text-3xl text-yellow-400"></i>
106
+ <h1 class="text-2xl md:text-3xl font-bold text-white">Dungeon Dice Monsters</h1>
107
+ </div>
108
+ <div class="flex items-center space-x-4">
109
+ <div class="bg-black bg-opacity-50 px-4 py-2 rounded-lg">
110
+ <span class="text-yellow-400 font-bold">Turn: </span>
111
+ <span id="turn-counter" class="text-white">1</span>
112
+ </div>
113
+ <button id="end-turn-btn" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg font-bold transition">
114
+ End Turn
115
+ </button>
116
+ </div>
117
+ </div>
118
+ </header>
119
+
120
+ <!-- Main Game Area -->
121
+ <main class="flex-1 container mx-auto px-4 py-6 flex flex-col lg:flex-row gap-6">
122
+ <!-- Player Area -->
123
+ <div class="w-full lg:w-1/4 bg-gray-800 bg-opacity-70 rounded-xl p-4 shadow-lg">
124
+ <h2 class="text-xl font-bold text-yellow-400 mb-4 flex items-center">
125
+ <i class="fas fa-user mr-2"></i> Player 1
126
+ </h2>
127
+
128
+ <!-- Life Points -->
129
+ <div class="bg-black bg-opacity-50 rounded-lg p-3 mb-4">
130
+ <div class="flex justify-between items-center">
131
+ <span class="font-bold">Life Points:</span>
132
+ <span id="player-life" class="text-2xl font-bold text-green-400">4000</span>
133
+ </div>
134
+ <div class="w-full bg-gray-700 h-4 rounded-full mt-2">
135
+ <div id="life-bar" class="bg-green-500 h-4 rounded-full" style="width: 100%"></div>
136
+ </div>
137
+ </div>
138
+
139
+ <!-- Dice Counter -->
140
+ <div class="bg-black bg-opacity-50 rounded-lg p-3 mb-4">
141
+ <div class="flex justify-between items-center">
142
+ <span class="font-bold">Dice Remaining:</span>
143
+ <span id="dice-count" class="text-2xl font-bold text-blue-400">5</span>
144
+ </div>
145
+ </div>
146
+
147
+ <!-- Monster Cards -->
148
+ <h3 class="font-bold text-lg mb-2 flex items-center">
149
+ <i class="fas fa-dragon mr-2"></i> Your Monsters
150
+ </h3>
151
+ <div id="player-monsters" class="grid grid-cols-2 gap-3 mb-4">
152
+ <!-- Monster cards will be added here dynamically -->
153
+ </div>
154
+
155
+ <!-- Dice Roll Area -->
156
+ <div class="mt-auto">
157
+ <h3 class="font-bold text-lg mb-3 flex items-center">
158
+ <i class="fas fa-dice mr-2"></i> Roll Dice
159
+ </h3>
160
+ <div class="flex justify-center mb-3">
161
+ <div id="dice-result" class="dice-3d relative w-16 h-16 mx-auto"></div>
162
+ </div>
163
+ <button id="roll-dice-btn" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-bold text-lg transition flex items-center justify-center">
164
+ <i class="fas fa-dice mr-2"></i> Roll Dice
165
+ </button>
166
+ </div>
167
+ </div>
168
+
169
+ <!-- Game Board -->
170
+ <div class="flex-1 bg-gray-900 bg-opacity-80 rounded-xl p-4 shadow-lg">
171
+ <div class="game-board rounded-lg overflow-hidden border-2 border-yellow-600">
172
+ <div id="game-grid" class="grid grid-cols-7 gap-0">
173
+ <!-- 7x7 grid will be generated here -->
174
+ </div>
175
+ </div>
176
+
177
+ <!-- Game Log -->
178
+ <div class="mt-4 bg-black bg-opacity-50 rounded-lg p-3 h-32 overflow-y-auto">
179
+ <h3 class="font-bold text-lg mb-2 flex items-center">
180
+ <i class="fas fa-scroll mr-2"></i> Battle Log
181
+ </h3>
182
+ <div id="game-log" class="text-sm">
183
+ <p class="text-blue-300">Game started! Player 1's turn.</p>
184
+ </div>
185
+ </div>
186
+ </div>
187
+
188
+ <!-- Opponent Area -->
189
+ <div class="w-full lg:w-1/4 bg-gray-800 bg-opacity-70 rounded-xl p-4 shadow-lg">
190
+ <h2 class="text-xl font-bold text-red-400 mb-4 flex items-center">
191
+ <i class="fas fa-robot mr-2"></i> Kaiba Corp AI
192
+ </h2>
193
+
194
+ <!-- Life Points -->
195
+ <div class="bg-black bg-opacity-50 rounded-lg p-3 mb-4">
196
+ <div class="flex justify-between items-center">
197
+ <span class="font-bold">Life Points:</span>
198
+ <span id="opponent-life" class="text-2xl font-bold text-green-400">4000</span>
199
+ </div>
200
+ <div class="w-full bg-gray-700 h-4 rounded-full mt-2">
201
+ <div id="opponent-life-bar" class="bg-green-500 h-4 rounded-full" style="width: 100%"></div>
202
+ </div>
203
+ </div>
204
+
205
+ <!-- Dice Counter -->
206
+ <div class="bg-black bg-opacity-50 rounded-lg p-3 mb-4">
207
+ <div class="flex justify-between items-center">
208
+ <span class="font-bold">Dice Remaining:</span>
209
+ <span id="opponent-dice-count" class="text-2xl font-bold text-blue-400">5</span>
210
+ </div>
211
+ </div>
212
+
213
+ <!-- Monster Cards -->
214
+ <h3 class="font-bold text-lg mb-2 flex items-center">
215
+ <i class="fas fa-dragon mr-2"></i> Opponent Monsters
216
+ </h3>
217
+ <div id="opponent-monsters" class="grid grid-cols-2 gap-3">
218
+ <!-- Opponent monster cards will be added here dynamically -->
219
+ </div>
220
+ </div>
221
+ </main>
222
+
223
+ <!-- Modal for summoning -->
224
+ <div id="summon-modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
225
+ <div class="bg-gray-800 rounded-xl p-6 w-full max-w-md">
226
+ <h2 class="text-2xl font-bold text-yellow-400 mb-4">Summon Monster</h2>
227
+ <p id="summon-message" class="mb-4">You rolled a <span class="font-bold">3</span>. Choose a monster to summon:</p>
228
+ <div id="summon-options" class="grid grid-cols-2 gap-3 mb-4">
229
+ <!-- Summon options will be added here dynamically -->
230
+ </div>
231
+ <div class="flex justify-end space-x-3">
232
+ <button id="cancel-summon" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg">
233
+ Cancel
234
+ </button>
235
+ <button id="confirm-summon" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg">
236
+ Summon
237
+ </button>
238
+ </div>
239
+ </div>
240
+ </div>
241
+
242
+ <!-- Modal for game over -->
243
+ <div id="game-over-modal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
244
+ <div class="bg-gray-800 rounded-xl p-8 w-full max-w-md text-center">
245
+ <h2 id="game-over-title" class="text-3xl font-bold mb-4">Victory!</h2>
246
+ <p id="game-over-message" class="text-xl mb-6">You defeated Kaiba Corp AI!</p>
247
+ <div class="flex justify-center">
248
+ <button id="play-again-btn" class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg text-lg font-bold">
249
+ Play Again
250
+ </button>
251
+ </div>
252
+ </div>
253
+ </div>
254
+
255
+ <script>
256
+ // Game state
257
+ const gameState = {
258
+ currentPlayer: 1,
259
+ turn: 1,
260
+ playerLife: 4000,
261
+ opponentLife: 4000,
262
+ playerDice: 5,
263
+ opponentDice: 5,
264
+ selectedMonster: null,
265
+ selectedCell: null,
266
+ diceResult: 0,
267
+ gameBoard: Array(7).fill().map(() => Array(7).fill(null)),
268
+ highlightedCells: []
269
+ };
270
+
271
+ // Monster data with actual images
272
+ const monsters = [
273
+ { id: 1, name: "Dark Magician", attack: 2500, defense: 2100, level: 7, diceReq: 5, image: "https://i.imgur.com/9vQHwjK.png" },
274
+ { id: 2, name: "Blue-Eyes White Dragon", attack: 3000, defense: 2500, level: 8, diceReq: 6, image: "https://i.imgur.com/RkZqVYF.png" },
275
+ { id: 3, name: "Summoned Skull", attack: 2500, defense: 1200, level: 6, diceReq: 4, image: "https://i.imgur.com/5zQmLyP.png" },
276
+ { id: 4, name: "Celtic Guardian", attack: 1400, defense: 1200, level: 4, diceReq: 3, image: "https://i.imgur.com/JYw0T3j.png" },
277
+ { id: 5, name: "Kuriboh", attack: 300, defense: 200, level: 1, diceReq: 1, image: "https://i.imgur.com/3JQZ9Q9.png" },
278
+ { id: 6, name: "Mystical Elf", attack: 800, defense: 2000, level: 4, diceReq: 3, image: "https://i.imgur.com/8QZQZQZ.png" },
279
+ { id: 7, name: "Red-Eyes B. Dragon", attack: 2400, defense: 2000, level: 7, diceReq: 5, image: "https://i.imgur.com/7vQHwjK.png" },
280
+ { id: 8, name: "Gaia The Fierce Knight", attack: 2300, defense: 2100, level: 7, diceReq: 5, image: "https://i.imgur.com/6zQmLyP.png" },
281
+ { id: 9, name: "Time Wizard", attack: 500, defense: 400, level: 2, diceReq: 2, image: "https://i.imgur.com/4JQZ9Q9.png" },
282
+ { id: 10, name: "Black Luster Soldier", attack: 3000, defense: 2500, level: 8, diceReq: 6, image: "https://i.imgur.com/5vQHwjK.png" }
283
+ ];
284
+
285
+ // Initialize game
286
+ document.addEventListener('DOMContentLoaded', () => {
287
+ initializeGame();
288
+ setupEventListeners();
289
+ });
290
+
291
+ // Initialize game elements
292
+ function initializeGame() {
293
+ createGameGrid();
294
+ renderPlayerMonsters();
295
+ renderOpponentMonsters();
296
+ updateUI();
297
+ }
298
+
299
+ // Create 7x7 game grid
300
+ function createGameGrid() {
301
+ const gameGrid = document.getElementById('game-grid');
302
+ gameGrid.innerHTML = '';
303
+
304
+ for (let row = 0; row < 7; row++) {
305
+ for (let col = 0; col < 7; col++) {
306
+ const cell = document.createElement('div');
307
+ cell.className = 'cell relative';
308
+ cell.dataset.row = row;
309
+ cell.dataset.col = col;
310
+
311
+ // Add cell content if there's a monster
312
+ if (gameState.gameBoard[row][col]) {
313
+ const monster = gameState.gameBoard[row][col];
314
+ cell.innerHTML = `
315
+ <div class="monster-card absolute inset-0 flex flex-col items-center justify-center p-1">
316
+ <img src="${monster.image}" alt="${monster.name}" class="w-full h-full object-contain">
317
+ <div class="monster-stats absolute bottom-0 left-0 right-0 flex justify-between px-1 text-xs">
318
+ <span class="text-red-400">${monster.attack}</span>
319
+ <span class="text-blue-400">${monster.defense}</span>
320
+ </div>
321
+ <div class="absolute top-0 left-0 bg-black bg-opacity-70 px-1 text-xs">
322
+ ${monster.owner === 1 ? 'P1' : 'P2'}
323
+ </div>
324
+ </div>
325
+ `;
326
+ }
327
+
328
+ cell.addEventListener('click', () => handleCellClick(row, col));
329
+ gameGrid.appendChild(cell);
330
+ }
331
+ }
332
+ }
333
+
334
+ // Render player's monster cards (random 5)
335
+ function renderPlayerMonsters() {
336
+ const container = document.getElementById('player-monsters');
337
+ container.innerHTML = '';
338
+
339
+ // Get 5 random unique monsters
340
+ const shuffled = [...monsters].sort(() => 0.5 - Math.random());
341
+ const playerMonsters = shuffled.slice(0, 5);
342
+
343
+ playerMonsters.forEach(monster => {
344
+ const card = document.createElement('div');
345
+ card.className = 'monster-card bg-gray-700 rounded-lg overflow-hidden cursor-pointer hover:shadow-lg';
346
+ card.dataset.monsterId = monster.id;
347
+
348
+ card.innerHTML = `
349
+ <div class="p-2">
350
+ <img src="${monster.image}" alt="${monster.name}" class="w-full h-24 object-contain">
351
+ </div>
352
+ <div class="px-2 pb-2">
353
+ <h4 class="font-bold text-sm truncate">${monster.name}</h4>
354
+ <div class="flex justify-between text-xs mt-1">
355
+ <span class="text-red-400">ATK: ${monster.attack}</span>
356
+ <span class="text-blue-400">DEF: ${monster.defense}</span>
357
+ </div>
358
+ <div class="mt-1 text-xs text-yellow-400">
359
+ <i class="fas fa-dice"></i> ${monster.diceReq}
360
+ </div>
361
+ </div>
362
+ `;
363
+
364
+ card.addEventListener('click', () => selectMonster(monster.id));
365
+ container.appendChild(card);
366
+ });
367
+ }
368
+
369
+ // Render opponent's monster cards (random 5 different from player)
370
+ function renderOpponentMonsters() {
371
+ const container = document.getElementById('opponent-monsters');
372
+ container.innerHTML = '';
373
+
374
+ // Get player's monster IDs
375
+ const playerMonsterIds = Array.from(document.querySelectorAll('#player-monsters .monster-card'))
376
+ .map(card => parseInt(card.dataset.monsterId));
377
+
378
+ // Get 5 random monsters not in player's deck
379
+ const availableMonsters = monsters.filter(m => !playerMonsterIds.includes(m.id));
380
+ const shuffled = [...availableMonsters].sort(() => 0.5 - Math.random());
381
+ const opponentMonsters = shuffled.slice(0, 5);
382
+
383
+ opponentMonsters.forEach(monster => {
384
+ const card = document.createElement('div');
385
+ card.className = 'monster-card bg-gray-700 rounded-lg overflow-hidden opacity-70';
386
+
387
+ card.innerHTML = `
388
+ <div class="p-2">
389
+ <img src="${monster.image}" alt="${monster.name}" class="w-full h-24 object-contain">
390
+ </div>
391
+ <div class="px-2 pb-2">
392
+ <h4 class="font-bold text-sm truncate">${monster.name}</h4>
393
+ <div class="flex justify-between text-xs mt-1">
394
+ <span class="text-red-400">ATK: ${monster.attack}</span>
395
+ <span class="text-blue-400">DEF: ${monster.defense}</span>
396
+ </div>
397
+ <div class="mt-1 text-xs text-yellow-400">
398
+ <i class="fas fa-dice"></i> ${monster.diceReq}
399
+ </div>
400
+ </div>
401
+ `;
402
+
403
+ container.appendChild(card);
404
+ });
405
+ }
406
+
407
+ // Update UI elements
408
+ function updateUI() {
409
+ document.getElementById('turn-counter').textContent = gameState.turn;
410
+ document.getElementById('player-life').textContent = gameState.playerLife;
411
+ document.getElementById('opponent-life').textContent = gameState.opponentLife;
412
+ document.getElementById('dice-count').textContent = gameState.playerDice;
413
+ document.getElementById('opponent-dice-count').textContent = gameState.opponentDice;
414
+
415
+ // Update life bars
416
+ const playerLifePercent = (gameState.playerLife / 4000) * 100;
417
+ const opponentLifePercent = (gameState.opponentLife / 4000) * 100;
418
+
419
+ document.getElementById('life-bar').style.width = `${playerLifePercent}%`;
420
+ document.getElementById('opponent-life-bar').style.width = `${opponentLifePercent}%`;
421
+
422
+ // Change life bar color based on percentage
423
+ if (playerLifePercent < 30) {
424
+ document.getElementById('life-bar').classList.remove('bg-green-500');
425
+ document.getElementById('life-bar').classList.add('bg-red-500');
426
+ } else {
427
+ document.getElementById('life-bar').classList.remove('bg-red-500');
428
+ document.getElementById('life-bar').classList.add('bg-green-500');
429
+ }
430
+
431
+ if (opponentLifePercent < 30) {
432
+ document.getElementById('opponent-life-bar').classList.remove('bg-green-500');
433
+ document.getElementById('opponent-life-bar').classList.add('bg-red-500');
434
+ } else {
435
+ document.getElementById('opponent-life-bar').classList.remove('bg-red-500');
436
+ document.getElementById('opponent-life-bar').classList.add('bg-green-500');
437
+ }
438
+ }
439
+
440
+ // Setup event listeners
441
+ function setupEventListeners() {
442
+ // Roll dice button
443
+ document.getElementById('roll-dice-btn').addEventListener('click', rollDice);
444
+
445
+ // End turn button
446
+ document.getElementById('end-turn-btn').addEventListener('click', endTurn);
447
+
448
+ // Summon modal buttons
449
+ document.getElementById('cancel-summon').addEventListener('click', () => {
450
+ document.getElementById('summon-modal').classList.add('hidden');
451
+ });
452
+
453
+ document.getElementById('confirm-summon').addEventListener('click', confirmSummon);
454
+
455
+ // Play again button
456
+ document.getElementById('play-again-btn').addEventListener('click', resetGame);
457
+ }
458
+
459
+ // Handle cell click
460
+ function handleCellClick(row, col) {
461
+ if (gameState.currentPlayer !== 1) return;
462
+
463
+ // If we have a selected monster and valid dice roll
464
+ if (gameState.selectedMonster && gameState.diceResult > 0) {
465
+ const monster = monsters.find(m => m.id === gameState.selectedMonster);
466
+
467
+ // Check if cell is empty
468
+ if (!gameState.gameBoard[row][col]) {
469
+ gameState.selectedCell = { row, col };
470
+ showSummonModal(monster);
471
+ } else {
472
+ addToGameLog(`Cell is already occupied!`);
473
+ }
474
+ }
475
+ }
476
+
477
+ // Select monster
478
+ function selectMonster(monsterId) {
479
+ if (gameState.currentPlayer !== 1) return;
480
+
481
+ gameState.selectedMonster = monsterId;
482
+
483
+ // Highlight the selected monster card
484
+ document.querySelectorAll('#player-monsters .monster-card').forEach(card => {
485
+ if (parseInt(card.dataset.monsterId) === monsterId) {
486
+ card.classList.add('ring-2', 'ring-yellow-400');
487
+ } else {
488
+ card.classList.remove('ring-2', 'ring-yellow-400');
489
+ }
490
+ });
491
+
492
+ addToGameLog(`Selected ${monsters.find(m => m.id === monsterId).name}`);
493
+ }
494
+
495
+ // Roll dice
496
+ function rollDice() {
497
+ if (gameState.currentPlayer !== 1) return;
498
+ if (gameState.diceResult > 0) {
499
+ addToGameLog(`You already rolled a ${gameState.diceResult} this turn!`);
500
+ return;
501
+ }
502
+
503
+ const diceElement = document.getElementById('dice-result');
504
+ diceElement.classList.add('rolling');
505
+
506
+ // Disable button during roll
507
+ document.getElementById('roll-dice-btn').disabled = true;
508
+
509
+ // Random number between 1-6
510
+ setTimeout(() => {
511
+ const result = Math.floor(Math.random() * 6) + 1;
512
+ gameState.diceResult = result;
513
+
514
+ // Update dice visual
515
+ renderDiceFace(result);
516
+ diceElement.classList.remove('rolling');
517
+
518
+ // Re-enable button
519
+ document.getElementById('roll-dice-btn').disabled = false;
520
+
521
+ addToGameLog(`You rolled a ${result}!`);
522
+
523
+ // Highlight summonable monsters
524
+ highlightSummonableMonsters();
525
+ }, 1000);
526
+ }
527
+
528
+ // Render dice face
529
+ function renderDiceFace(value) {
530
+ const diceElement = document.getElementById('dice-result');
531
+ diceElement.innerHTML = '';
532
+
533
+ // Create dice faces (simplified for this example)
534
+ for (let i = 1; i <= 6; i++) {
535
+ const face = document.createElement('div');
536
+ face.className = `dice-face absolute bg-white flex items-center justify-center text-2xl font-bold`;
537
+
538
+ // Position each face correctly in 3D space
539
+ switch(i) {
540
+ case 1: // Front
541
+ face.style.transform = 'translateZ(30px)';
542
+ break;
543
+ case 2: // Back
544
+ face.style.transform = 'rotateY(180deg) translateZ(30px)';
545
+ break;
546
+ case 3: // Top
547
+ face.style.transform = 'rotateX(90deg) translateZ(30px)';
548
+ break;
549
+ case 4: // Bottom
550
+ face.style.transform = 'rotateX(-90deg) translateZ(30px)';
551
+ break;
552
+ case 5: // Left
553
+ face.style.transform = 'rotateY(-90deg) translateZ(30px)';
554
+ break;
555
+ case 6: // Right
556
+ face.style.transform = 'rotateY(90deg) translateZ(30px)';
557
+ break;
558
+ }
559
+
560
+ // Add dots based on face value
561
+ if (i === value) {
562
+ face.innerHTML = '<div class="w-4 h-4 rounded-full bg-black"></div>';
563
+ } else {
564
+ face.innerHTML = '<div class="w-4 h-4 rounded-full bg-transparent"></div>';
565
+ }
566
+
567
+ diceElement.appendChild(face);
568
+ }
569
+
570
+ // Rotate to show the correct face
571
+ diceElement.style.transform = `rotateX(${Math.random() * 360}deg) rotateY(${Math.random() * 360}deg)`;
572
+ }
573
+
574
+ // Highlight summonable monsters based on dice roll
575
+ function highlightSummonableMonsters() {
576
+ document.querySelectorAll('#player-monsters .monster-card').forEach(card => {
577
+ const monsterId = parseInt(card.dataset.monsterId);
578
+ const monster = monsters.find(m => m.id === monsterId);
579
+
580
+ if (monster.diceReq <= gameState.diceResult) {
581
+ card.classList.add('ring-2', 'ring-green-400');
582
+ } else {
583
+ card.classList.remove('ring-2', 'ring-green-400');
584
+ }
585
+ });
586
+ }
587
+
588
+ // Show summon modal
589
+ function showSummonModal(monster) {
590
+ if (monster.diceReq > gameState.diceResult) {
591
+ addToGameLog(`You need at least ${monster.diceReq} to summon ${monster.name}!`);
592
+ return;
593
+ }
594
+
595
+ document.getElementById('summon-message').innerHTML =
596
+ `You rolled a <span class="font-bold">${gameState.diceResult}</span>. Summon ${monster.name}?`;
597
+
598
+ document.getElementById('summon-modal').classList.remove('hidden');
599
+ }
600
+
601
+ // Confirm summon
602
+ function confirmSummon() {
603
+ const modal = document.getElementById('summon-modal');
604
+ modal.classList.add('hidden');
605
+
606
+ if (!gameState.selectedMonster || !gameState.selectedCell) return;
607
+
608
+ const monster = monsters.find(m => m.id === gameState.selectedMonster);
609
+ const { row, col } = gameState.selectedCell;
610
+
611
+ // Place monster on board
612
+ gameState.gameBoard[row][col] = {
613
+ ...monster,
614
+ owner: gameState.currentPlayer,
615
+ position: { row, col }
616
+ };
617
+
618
+ // Deduct dice cost
619
+ if (gameState.currentPlayer === 1) {
620
+ gameState.playerDice -= monster.diceReq;
621
+ } else {
622
+ gameState.opponentDice -= monster.diceReq;
623
+ }
624
+
625
+ // Reset selection
626
+ gameState.selectedMonster = null;
627
+ gameState.selectedCell = null;
628
+ gameState.diceResult = 0;
629
+
630
+ // Clear highlights
631
+ clearHighlights();
632
+
633
+ // Update UI
634
+ createGameGrid();
635
+ updateUI();
636
+
637
+ addToGameLog(`Summoned ${monster.name} at (${row+1}, ${col+1})!`);
638
+
639
+ // Check for attacks
640
+ checkForAttacks(row, col);
641
+ }
642
+
643
+ // Check for attacks after summon
644
+ function checkForAttacks(row, col) {
645
+ const directions = [
646
+ { dr: -1, dc: 0 }, // up
647
+ { dr: 1, dc: 0 }, // down
648
+ { dr: 0, dc: -1 }, // left
649
+ { dr: 0, dc: 1 } // right
650
+ ];
651
+
652
+ const attacker = gameState.gameBoard[row][col];
653
+ let attacked = false;
654
+
655
+ directions.forEach(dir => {
656
+ const newRow = row + dir.dr;
657
+ const newCol = col + dir.dc;
658
+
659
+ // Check bounds
660
+ if (newRow >= 0 && newRow < 7 && newCol >= 0 && newCol < 7) {
661
+ const defender = gameState.gameBoard[newRow][newCol];
662
+
663
+ // If there's an opponent monster
664
+ if (defender && defender.owner !== attacker.owner) {
665
+ attacked = true;
666
+ resolveBattle(attacker, defender, newRow, newCol);
667
+ }
668
+ }
669
+ });
670
+
671
+ if (!attacked && gameState.currentPlayer === 2) {
672
+ // AI turn continues if no attacks happened
673
+ setTimeout(aiTurn, 1000);
674
+ }
675
+ }
676
+
677
+ // Resolve battle between two monsters
678
+ function resolveBattle(attacker, defender, defRow, defCol) {
679
+ let logMessage = `${attacker.name} (ATK ${attacker.attack}) attacks ${defender.name} (DEF ${defender.defense}) - `;
680
+
681
+ if (attacker.attack > defender.defense) {
682
+ // Defender is destroyed
683
+ gameState.gameBoard[defRow][defCol] = null;
684
+
685
+ // Damage opponent
686
+ if (defender.owner === 1) {
687
+ gameState.playerLife -= attacker.attack - defender.defense;
688
+ } else {
689
+ gameState.opponentLife -= attacker.attack - defender.defense;
690
+ }
691
+
692
+ logMessage += `${defender.name} is destroyed!`;
693
+ } else if (attacker.attack < defender.defense) {
694
+ // Attacker is destroyed
695
+ const attRow = attacker.position.row;
696
+ const attCol = attacker.position.col;
697
+ gameState.gameBoard[attRow][attCol] = null;
698
+
699
+ // Damage player
700
+ if (attacker.owner === 1) {
701
+ gameState.playerLife -= defender.defense - attacker.attack;
702
+ } else {
703
+ gameState.opponentLife -= defender.defense - attacker.attack;
704
+ }
705
+
706
+ logMessage += `${attacker.name} is destroyed!`;
707
+ } else {
708
+ // Both are destroyed
709
+ const attRow = attacker.position.row;
710
+ const attCol = attacker.position.col;
711
+ gameState.gameBoard[attRow][attCol] = null;
712
+ gameState.gameBoard[defRow][defCol] = null;
713
+
714
+ logMessage += `Both monsters are destroyed!`;
715
+ }
716
+
717
+ addToGameLog(logMessage);
718
+
719
+ // Update game board
720
+ createGameGrid();
721
+ updateUI();
722
+
723
+ // Check for game over
724
+ checkGameOver();
725
+
726
+ // If it's AI's turn and game isn't over, continue
727
+ if (gameState.currentPlayer === 2 && !isGameOver()) {
728
+ setTimeout(aiTurn, 1000);
729
+ }
730
+ }
731
+
732
+ // Clear highlighted cells
733
+ function clearHighlights() {
734
+ gameState.highlightedCells.forEach(({ row, col }) => {
735
+ const cell = document.querySelector(`.cell[data-row="${row}"][data-col="${col}"]`);
736
+ if (cell) {
737
+ cell.classList.remove('cell-highlight');
738
+ }
739
+ });
740
+
741
+ gameState.highlightedCells = [];
742
+ }
743
+
744
+ // End current player's turn
745
+ function endTurn() {
746
+ if (gameState.currentPlayer === 1) {
747
+ gameState.currentPlayer = 2;
748
+ addToGameLog(`Player 1 ends turn. Kaiba Corp AI's turn!`);
749
+
750
+ // AI turn
751
+ setTimeout(aiTurn, 1000);
752
+ } else {
753
+ gameState.currentPlayer = 1;
754
+ gameState.turn++;
755
+ addToGameLog(`Kaiba Corp AI ends turn. Player 1's turn!`);
756
+ }
757
+
758
+ // Reset dice result for new turn
759
+ gameState.diceResult = 0;
760
+ document.getElementById('dice-result').innerHTML = '';
761
+
762
+ // Update UI
763
+ updateUI();
764
+ }
765
+
766
+ // AI turn logic
767
+ function aiTurn() {
768
+ if (gameState.currentPlayer !== 2) return;
769
+
770
+ // AI rolls dice
771
+ const aiRoll = Math.floor(Math.random() * 6) + 1;
772
+ addToGameLog(`Kaiba Corp AI rolled a ${aiRoll}!`);
773
+
774
+ // Find summonable monsters
775
+ const summonableMonsters = monsters.filter(m => m.diceReq <= aiRoll);
776
+
777
+ if (summonableMonsters.length > 0 && gameState.opponentDice > 0) {
778
+ // Choose random monster to summon
779
+ const monsterToSummon = summonableMonsters[Math.floor(Math.random() * summonableMonsters.length)];
780
+
781
+ // Find empty cell
782
+ const emptyCells = [];
783
+ for (let row = 0; row < 7; row++) {
784
+ for (let col = 0; col < 7; col++) {
785
+ if (!gameState.gameBoard[row][col]) {
786
+ emptyCells.push({ row, col });
787
+ }
788
+ }
789
+ }
790
+
791
+ if (emptyCells.length > 0) {
792
+ // Choose random empty cell
793
+ const { row, col } = emptyCells[Math.floor(Math.random() * emptyCells.length)];
794
+
795
+ // Summon monster
796
+ gameState.gameBoard[row][col] = {
797
+ ...monsterToSummon,
798
+ owner: 2,
799
+ position: { row, col }
800
+ };
801
+
802
+ // Deduct dice cost
803
+ gameState.opponentDice -= monsterToSummon.diceReq;
804
+
805
+ addToGameLog(`Kaiba Corp AI summoned ${monsterToSummon.name} at (${row+1}, ${col+1})!`);
806
+
807
+ // Update game board
808
+ createGameGrid();
809
+ updateUI();
810
+
811
+ // Check for attacks
812
+ checkForAttacks(row, col);
813
+ } else {
814
+ addToGameLog(`Kaiba Corp AI has no empty cells to summon!`);
815
+ endTurn();
816
+ }
817
+ } else {
818
+ addToGameLog(`Kaiba Corp AI has no summonable monsters or no dice left!`);
819
+ endTurn();
820
+ }
821
+ }
822
+
823
+ // Check if game is over
824
+ function isGameOver() {
825
+ return gameState.playerLife <= 0 || gameState.opponentLife <= 0;
826
+ }
827
+
828
+ // Check for game over condition
829
+ function checkGameOver() {
830
+ if (!isGameOver()) return;
831
+
832
+ const modal = document.getElementById('game-over-modal');
833
+ const title = document.getElementById('game-over-title');
834
+ const message = document.getElementById('game-over-message');
835
+
836
+ if (gameState.playerLife <= 0) {
837
+ title.textContent = "Defeat!";
838
+ message.textContent = "Kaiba Corp AI defeated you!";
839
+ title.classList.remove('text-green-500');
840
+ title.classList.add('text-red-500');
841
+ } else {
842
+ title.textContent = "Victory!";
843
+ message.textContent = "You defeated Kaiba Corp AI!";
844
+ title.classList.remove('text-red-500');
845
+ title.classList.add('text-green-500');
846
+ }
847
+
848
+ modal.classList.remove('hidden');
849
+ }
850
+
851
+ // Reset game
852
+ function resetGame() {
853
+ // Reset game state
854
+ gameState.currentPlayer = 1;
855
+ gameState.turn = 1;
856
+ gameState.playerLife = 4000;
857
+ gameState.opponentLife = 4000;
858
+ gameState.playerDice = 5;
859
+ gameState.opponentDice = 5;
860
+ gameState.selectedMonster = null;
861
+ gameState.selectedCell = null;
862
+ gameState.diceResult = 0;
863
+ gameState.gameBoard = Array(7).fill().map(() => Array(7).fill(null));
864
+ gameState.highlightedCells = [];
865
+
866
+ // Clear dice display
867
+ document.getElementById('dice-result').innerHTML = '';
868
+
869
+ // Clear game log
870
+ document.getElementById('game-log').innerHTML =
871
+ '<p class="text-blue-300">Game started! Player 1\'s turn.</p>';
872
+
873
+ // Hide modals
874
+ document.getElementById('summon-modal').classList.add('hidden');
875
+ document.getElementById('game-over-modal').classList.add('hidden');
876
+
877
+ // Reinitialize game
878
+ initializeGame();
879
+ }
880
+
881
+ // Add message to game log
882
+ function addToGameLog(message) {
883
+ const log = document.getElementById('game-log');
884
+ const entry = document.createElement('p');
885
+ entry.className = gameState.currentPlayer === 1 ? 'text-blue-300' : 'text-red-300';
886
+ entry.textContent = message;
887
+ log.appendChild(entry);
888
+ log.scrollTop = log.scrollHeight;
889
+ }
890
+ </script>
891
+ <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://deepsite.hf.co/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://deepsite.hf.co" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://deepsite.hf.co?remix=Juno360219/bhj" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
892
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ create yu gi oh dungeon dice monsters game
2
+ incorperate random images