Hugging Face's logo

Spaces:
yomir
/
Redstone-Sandbox
Running

App Files Community
vip3 commited on
Commit
5a9b538
·
verified ·
1 Parent(s): e6ea07c

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +349 -356
index.html CHANGED
@@ -1,4 +1,3 @@
1
-
2
  <!DOCTYPE html>
3
  <html lang="en">
4
  <head>
@@ -7,118 +6,114 @@
7
  <title>Redstone Sandbox</title>
8
  <style>
9
  body {
10
- margin: 0;
11
- background: #1a1a1a;
12
- font-family: 'Segoe UI', sans-serif;
13
- overflow: hidden;
14
- color: #fff;
15
  }
16
 
17
  #gameContainer {
18
- position: relative;
19
- width: 100vw;
20
- height: 100vh;
21
  }
22
 
23
  #grid {
24
- position: absolute;
25
- top: 50%;
26
- left: 50%;
27
- transform: translate(-50%, -50%);
28
- background: rgba(0,0,0,0.3);
29
- padding: 2px;
30
- border-radius: 8px;
31
- box-shadow: 0 0 50px rgba(0,0,0,0.5);
32
  }
33
 
34
- /* Cell styles */
35
  .cell {
36
- width: 40px;
37
- height: 40px;
38
- border: 1px solid #2a2a2a;
39
- position: absolute;
40
- transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
41
- border-radius: 6px;
42
- display: flex;
43
- align-items: center;
44
- justify-content: center;
45
- font-size: 10px;
46
- cursor: pointer;
47
  }
48
 
49
- /* Toolbar styles */
50
  .toolbar {
51
- position: fixed;
52
- top: 20px;
53
- left: 50%;
54
- transform: translateX(-50%);
55
- background: rgba(20,20,20,0.95);
56
- padding: 15px;
57
- border-radius: 15px;
58
- display: flex;
59
- gap: 12px;
60
- box-shadow: 0 5px 25px rgba(0,0,0,0.3);
61
- z-index: 100;
62
  }
63
 
64
  .tool {
65
- width: 50px;
66
- height: 50px;
67
- border: 2px solid #444;
68
- border-radius: 10px;
69
- cursor: pointer;
70
- display: flex;
71
- align-items: center;
72
- justify-content: center;
73
- font-size: 22px;
74
- background: rgba(255,255,255,0.05);
75
- transition: 0.3s;
76
- position: relative;
77
  }
78
 
79
  .tool:hover {
80
- transform: translateY(-2px);
81
- background: rgba(255,255,255,0.1);
82
  }
83
 
84
  .tool.active {
85
- border-color: #f55;
86
- background: rgba(255,85,85,0.2);
87
- transform: scale(1.1);
88
  }
89
 
90
- /* Button styles */
91
  .button {
92
- background: #f55;
93
- border: none;
94
- border-radius: 8px;
95
- color: white;
96
- cursor: pointer;
97
- font-size: 16px;
98
- padding: 10px 20px;
99
- transition: 0.3s;
100
  }
101
 
102
  .button:hover {
103
- transform: scale(1.1);
104
  }
105
 
106
  .button.pause {
107
- background: #55f;
108
  }
109
 
110
  .button.pause.active {
111
- background: #f55;
112
  }
113
 
114
- /* Component styles */
115
- .wire {
116
- background: #300;
117
- transition: background-color 0.3s;
118
  }
119
 
120
- .wire.powered {
121
- background: #f00;
122
  }
123
 
124
  .wire[data-power="1"] { background: #400; }
@@ -136,97 +131,92 @@
136
  .wire[data-power="13"] { background: #f11; }
137
  .wire[data-power="14"] { background: #f22; }
138
  .wire[data-power="15"] { background: #f33; }
139
-
140
- .torch {
141
- background: #320;
142
- box-shadow: 0 0 10px #320;
143
  }
144
 
145
- .torch.powered {
146
- background: #fa0;
147
- box-shadow: 0 0 20px #fa0;
148
- animation: torch-glow 1s infinite alternate;
149
  }
150
-
151
- .block {
152
- background: #444;
153
- box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
154
  }
155
-
156
- .spreader {
157
- background: #030;
158
- transition: all 0.3s;
159
  }
160
 
161
- .spreader.powered {
162
- background: #0f0;
163
- box-shadow: 0 0 20px #0f0;
164
- animation: spreader-pulse 1s infinite;
165
  }
166
-
167
- .lamp {
168
- background: #330;
169
- transition: all 0.3s;
170
  }
171
 
172
- .lamp.powered {
173
- background: #ff0;
174
- box-shadow: 0 0 30px #ff0;
175
- animation: lamp-shine 2s infinite alternate;
176
  }
177
-
178
- .timer {
179
- background: #303;
180
- transition: all 0.3s;
181
  }
182
 
183
- .timer.powered {
184
- background: #f0f;
185
- box-shadow: 0 0 20px #f0f;
186
  }
187
 
188
- /* UI elements */
189
  .power-level {
190
- position: absolute;
191
- top: 2px;
192
- right: 2px;
193
- font-size: 10px;
194
- padding: 2px 4px;
195
- background: rgba(0,0,0,0.5);
196
- border-radius: 4px;
197
- pointer-events: none;
198
  }
199
 
200
  .timer-value {
201
- position: absolute;
202
- bottom: 2px;
203
- left: 2px;
204
- font-size: 10px;
205
- color: rgba(255,255,255,0.8);
206
  }
207
 
208
- /* Animations */
209
  @keyframes torch-glow {
210
- from { box-shadow: 0 0 10px #fa0; }
211
- to { box-shadow: 0 0 30px #fa0; }
212
  }
213
 
214
  @keyframes spreader-pulse {
215
- 0% { transform: scale(1); }
216
- 50% { transform: scale(1.1); }
217
- 100% { transform: scale(1); }
218
  }
219
 
220
  @keyframes lamp-shine {
221
- from { box-shadow: 0 0 20px #ff0; }
222
- to { box-shadow: 0 0 40px #ff0; }
223
  }
224
-
225
- /* Icons */
226
- ⚡ 🔥 ⬛ ➕ 💡 ⏲️
227
- Reset Pause
228
  </style>
229
  </head>
 
230
  <body>
231
  <div id="gameContainer">
232
  <div class="toolbar">
@@ -236,263 +226,266 @@
236
  <div class="tool" data-tool="spreader" data-name="Spreader">➕</div>
237
  <div class="tool" data-tool="lamp" data-name="Lamp">💡</div>
238
  <div class="tool" data-tool="timer" data-name="Timer">⏲️</div>
239
- <button class="reset-btn">Reset</button>
 
240
  </div>
241
- <div id="grid"></div>
242
  </div>
243
 
244
- <script>
245
- class RedstoneSandbox {
246
- constructor() {
247
- this.gridSize = 20;
248
- this.cellSize = 40;
249
- this.grid = {};
250
- this.selectedTool = 'wire';
251
- this.timers = new Set();
252
- this.isPaused = false;
253
- this.gameLoopInterval = null;
254
- this.init();
255
- }
256
 
257
- init() {
258
- this.setupGrid();
259
- this.setupTools();
260
- this.setupButtons();
261
- this.bindEvents();
262
- this.startGameLoop();
263
- }
264
 
265
- setupGrid() {
266
- const grid = document.getElementById('grid');
267
- grid.style.width = `${this.gridSize * this.cellSize + 2}px`;
268
- grid.style.height = `${this.gridSize * this.cellSize + 2}px`;
269
-
270
- for(let y = 0; y < this.gridSize; y++) {
271
- for(let x = 0; x < this.gridSize; x++) {
272
- const cell = document.createElement('div');
273
- cell.className = 'cell';
274
- cell.style.left = `${x * this.cellSize}px`;
275
- cell.style.top = `${y * this.cellSize}px`;
276
- cell.dataset.x = x;
277
- cell.dataset.y = y;
278
-
279
- const powerLevel = document.createElement('div');
280
- powerLevel.className = 'power-level';
281
-
282
- const timerValue = document.createElement('div');
283
- timerValue.className = 'timer-value';
284
-
285
- cell.appendChild(powerLevel);
286
- cell.appendChild(timerValue);
287
- grid.appendChild(cell);
288
-
289
- this.grid[`${x},${y}`] = {
290
- element: cell,
291
- powerDisplay: powerLevel,
292
- timerDisplay: timerValue,
293
- type: null,
294
- powered: false,
295
- powerLevel: 0,
296
- timerInterval: 1,
297
- lastUpdate: Date.now()
298
- };
 
299
  }
300
  }
301
- }
302
 
303
- setupTools() {
304
- const tools = document.querySelectorAll('.tool');
305
- tools.forEach(tool => {
306
- tool.addEventListener('click', () => {
307
- tools.forEach(t => t.classList.remove('active'));
308
- tool.classList.add('active');
309
- this.selectedTool = tool.dataset.tool;
 
310
  });
311
- });
312
- }
313
 
314
- setupButtons() {
315
- document.querySelector('.reset').addEventListener('click', () => {
316
- Object.values(this.grid).forEach(cell => {
317
- cell.element.className = 'cell';
318
- cell.type = null;
319
- cell.powered = false;
320
- cell.powerLevel = 0;
321
- cell.powerDisplay.textContent = '';
322
- cell.timerDisplay.textContent = '';
 
 
323
  });
324
- this.timers.clear();
325
- });
326
-
327
- const pauseBtn = document.querySelector('.pause');
328
- pauseBtn.addEventListener('click', () => {
329
- this.isPaused = !this.isPaused;
330
- pauseBtn.classList.toggle('active');
331
- pauseBtn.textContent = this.isPaused ? 'Resume' : 'Pause';
332
- });
333
- }
334
-
335
- bindEvents() {
336
- const grid = document.getElementById('grid');
337
-
338
- grid.addEventListener('contextmenu', e => {
339
- e.preventDefault();
340
- if(e.target.classList.contains('cell')) {
341
- const x = parseInt(e.target.dataset.x);
342
- const y = parseInt(e.target.dataset.y);
343
- this.deleteComponent(x, y);
344
- }
345
- });
346
-
347
- grid.addEventListener('click', e => {
348
- if(e.target.classList.contains('cell')) {
349
- const x = parseInt(e.target.dataset.x);
350
- const y = parseInt(e.target.dataset.y);
351
- const cell = this.grid[`${x},${y}`];
352
-
353
- if(cell.type === 'torch') {
354
- this.toggleTorch(cell);
355
- } else if(cell.type === 'timer') {
356
- this.adjustTimer(cell);
357
- } else {
358
- this.placeComponent(x, y);
359
- }
360
- }
361
- });
362
- }
363
 
364
- deleteComponent(x, y) {
365
- const cell = this.grid[`${x},${y}`];
366
- if(cell.type === 'timer') {
367
- this.timers.delete(`${x},${y}`);
 
 
368
  }
369
- cell.element.className = 'cell';
370
- cell.type = null;
371
- cell.powered = false;
372
- cell.powerLevel = 0;
373
- cell.powerDisplay.textContent = '';
374
- cell.timerDisplay.textContent = '';
375
- this.updatePower();
376
- }
377
 
378
- toggleTorch(cell) {
379
- cell.powered = !cell.powered;
380
- cell.powerLevel = cell.powered ? 15 : 0;
381
- this.updatePower();
382
- }
 
 
 
 
 
 
383
 
384
- adjustTimer(cell) {
385
- cell.timerInterval = (cell.timerInterval % 15) + 1;
386
- cell.timerDisplay.textContent = `${cell.timerInterval}s`;
387
- }
 
 
 
 
 
 
 
 
 
 
 
 
388
 
389
- placeComponent(x, y) {
390
- const cell = this.grid[`${x},${y}`];
391
-
392
- if(cell.type === this.selectedTool) return;
393
-
394
- cell.element.className = 'cell';
395
- cell.element.classList.add(this.selectedTool);
396
- cell.type = this.selectedTool;
397
-
398
- if(this.selectedTool === 'torch') {
399
- cell.powered = true;
400
- cell.powerLevel = 15;
401
- cell.element.classList.add('powered');
402
- } else if(this.selectedTool === 'spreader') {
403
  cell.powered = false;
404
  cell.powerLevel = 0;
 
 
 
405
  }
406
-
407
- if(this.selectedTool === 'timer') {
408
- cell.timerInterval = 1;
409
- cell.timerDisplay.textContent = '1s';
410
- this.timers.add(`${x},${y}`);
411
  }
412
 
413
- this.updatePower();
414
- }
 
 
415
 
416
- updatePower() {
417
- if(this.isPaused) return;
 
 
418
 
419
- Object.values(this.grid).forEach(cell => {
420
- if(cell.type && !['torch', 'timer'].includes(cell.type)) {
 
 
 
 
 
 
 
421
  cell.powered = false;
422
  cell.powerLevel = 0;
423
- cell.element.classList.remove('powered');
424
  }
425
- });
 
 
 
 
 
426
 
427
- for(let i = 15; i > 0; i--) {
428
- Object.entries(this.grid).forEach(([coord, cell]) => {
429
- if(!cell.powered) return;
430
 
431
- const [x, y] = coord.split(',').map(Number);
432
-
433
- if(cell.type === 'wire') {
434
- this.powerNearby(x, y, cell.powerLevel - 1);
435
- } else if(['torch', 'timer'].includes(cell.type)) {
436
- this.powerNearby(x, y, 15);
437
- } else if(cell.type === 'spreader' && cell.powered) {
438
- this.spreadPower(x, y);
439
  }
440
  });
441
- }
442
 
443
- Object.values(this.grid).forEach(cell => {
444
- if(cell.powerLevel > 0) {
445
- cell.element.classList.add('powered');
446
- cell.element.dataset.power = cell.powerLevel;
447
- cell.powerDisplay.textContent = cell.powerLevel;
448
- } else {
449
- cell.element.classList.remove('powered');
450
- delete cell.element.dataset.power;
451
- cell.powerDisplay.textContent = '';
 
 
 
 
 
452
  }
453
- });
454
- }
455
 
456
- powerNearby(x, y, power) {
457
- if(power <= 0) return;
458
- [[x+1,y], [x-1,y], [x,y+1], [x,y-1]].forEach(([nx, ny]) => {
459
- const neighbor = this.grid[`${nx},${ny}`];
460
- if(neighbor && neighbor.type && neighbor.type !== 'block' && neighbor.type !== 'timer' && neighbor.type !== 'torch' && power > neighbor.powerLevel) {
461
- neighbor.powered = true;
462
- neighbor.powerLevel = power;
463
- }
464
- });
465
- }
 
 
466
 
467
- spreadPower(x, y) {
468
- [[x+1,y], [x-1,y], [x,y+1], [x,y-1]].forEach(([nx, ny]) => {
469
- const neighbor = this.grid[`${nx},${ny}`];
470
- if(neighbor && neighbor.type && neighbor.type !== 'block' && neighbor.type !== 'timer' && neighbor.type !== 'torch' && neighbor.powerLevel === 0) {
471
- neighbor.powered = true;
472
- neighbor.powerLevel = 15;
473
- }
474
- });
475
- }
 
476
 
477
- startGameLoop() {
478
- this.gameLoopInterval = setInterval(() => {
479
- if(this.isPaused) return;
480
-
481
- const now = Date.now();
482
- this.timers.forEach(coord => {
483
- const cell = this.grid[coord];
484
- if(now - cell.lastUpdate >= cell.timerInterval * 1000) {
485
- cell.powered = !cell.powered;
486
- cell.powerLevel = cell.powered ? 15 : 0;
487
- cell.lastUpdate = now;
488
- this.updatePower();
489
  }
490
  });
491
- }, 50);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
492
  }
493
- }
494
 
495
- new RedstoneSandbox();
496
- </script>
 
497
  </body>
 
498
  </html>
 
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
 
6
  <title>Redstone Sandbox</title>
7
  <style>
8
  body {
9
+ margin: 0;
10
+ background: #1a1a1a;
11
+ font-family: 'Segoe UI', sans-serif;
12
+ overflow: hidden;
13
+ color: #fff;
14
  }
15
 
16
  #gameContainer {
17
+ position: relative;
18
+ width: 100vw;
19
+ height: 100vh;
20
  }
21
 
22
  #grid {
23
+ position: absolute;
24
+ top: 50%;
25
+ left: 50%;
26
+ transform: translate(-50%, -50%);
27
+ background: rgba(0,0,0,0.3);
28
+ padding: 2px;
29
+ border-radius: 8px;
30
+ box-shadow: 0 0 50px rgba(0,0,0,0.5);
31
  }
32
 
 
33
  .cell {
34
+ width: 40px;
35
+ height: 40px;
36
+ border: 1px solid #2a2a2a;
37
+ position: absolute;
38
+ transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
39
+ border-radius: 6px;
40
+ display: flex;
41
+ align-items: center;
42
+ justify-content: center;
43
+ font-size: 10px;
44
+ cursor: pointer;
45
  }
46
 
 
47
  .toolbar {
48
+ position: fixed;
49
+ top: 20px;
50
+ left: 50%;
51
+ transform: translateX(-50%);
52
+ background: rgba(20,20,20,0.95);
53
+ padding: 15px;
54
+ border-radius: 15px;
55
+ display: flex;
56
+ gap: 12px;
57
+ box-shadow: 0 5px 25px rgba(0,0,0,0.3);
58
+ z-index: 100;
59
  }
60
 
61
  .tool {
62
+ width: 50px;
63
+ height: 50px;
64
+ border: 2px solid #444;
65
+ border-radius: 10px;
66
+ cursor: pointer;
67
+ display: flex;
68
+ align-items: center;
69
+ justify-content: center;
70
+ font-size: 22px;
71
+ background: rgba(255,255,255,0.05);
72
+ transition: 0.3s;
73
+ position: relative;
74
  }
75
 
76
  .tool:hover {
77
+ transform: translateY(-2px);
78
+ background: rgba(255,255,255,0.1);
79
  }
80
 
81
  .tool.active {
82
+ border-color: #f55;
83
+ background: rgba(255,85,85,0.2);
84
+ transform: scale(1.1);
85
  }
86
 
 
87
  .button {
88
+ background: #f55;
89
+ border: none;
90
+ border-radius: 8px;
91
+ color: white;
92
+ cursor: pointer;
93
+ font-size: 16px;
94
+ padding: 10px 20px;
95
+ transition: 0.3s;
96
  }
97
 
98
  .button:hover {
99
+ transform: scale(1.1);
100
  }
101
 
102
  .button.pause {
103
+ background: #55f;
104
  }
105
 
106
  .button.pause.active {
107
+ background: #f55;
108
  }
109
 
110
+ .wire {
111
+ background: #300;
112
+ transition: background-color 0.3s;
 
113
  }
114
 
115
+ .wire.powered {
116
+ background: #f00;
117
  }
118
 
119
  .wire[data-power="1"] { background: #400; }
 
131
  .wire[data-power="13"] { background: #f11; }
132
  .wire[data-power="14"] { background: #f22; }
133
  .wire[data-power="15"] { background: #f33; }
134
+
135
+ .torch {
136
+ background: #320;
137
+ box-shadow: 0 0 10px #320;
138
  }
139
 
140
+ .torch.powered {
141
+ background: #fa0;
142
+ box-shadow: 0 0 20px #fa0;
143
+ animation: torch-glow 1s infinite alternate;
144
  }
145
+
146
+ .block {
147
+ background: #444;
148
+ box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
149
  }
150
+
151
+ .spreader {
152
+ background: #030;
153
+ transition: all 0.3s;
154
  }
155
 
156
+ .spreader.powered {
157
+ background: #0f0;
158
+ box-shadow: 0 0 20px #0f0;
159
+ animation: spreader-pulse 1s infinite;
160
  }
161
+
162
+ .lamp {
163
+ background: #330;
164
+ transition: all 0.3s;
165
  }
166
 
167
+ .lamp.powered {
168
+ background: #ff0;
169
+ box-shadow: 0 0 30px #ff0;
170
+ animation: lamp-shine 2s infinite alternate;
171
  }
172
+
173
+ .timer {
174
+ background: #303;
175
+ transition: all 0.3s;
176
  }
177
 
178
+ .timer.powered {
179
+ background: #f0f;
180
+ box-shadow: 0 0 20px #f0f;
181
  }
182
 
 
183
  .power-level {
184
+ position: absolute;
185
+ top: 2px;
186
+ right: 2px;
187
+ font-size: 10px;
188
+ padding: 2px 4px;
189
+ background: rgba(0,0,0,0.5);
190
+ border-radius: 4px;
191
+ pointer-events: none;
192
  }
193
 
194
  .timer-value {
195
+ position: absolute;
196
+ bottom: 2px;
197
+ left: 2px;
198
+ font-size: 10px;
199
+ color: rgba(255,255,255,0.8);
200
  }
201
 
 
202
  @keyframes torch-glow {
203
+ from { box-shadow: 0 0 10px #fa0; }
204
+ to { box-shadow: 0 0 30px #fa0; }
205
  }
206
 
207
  @keyframes spreader-pulse {
208
+ 0% { transform: scale(1); }
209
+ 50% { transform: scale(1.1); }
210
+ 100% { transform: scale(1); }
211
  }
212
 
213
  @keyframes lamp-shine {
214
+ from { box-shadow: 0 0 20px #ff0; }
215
+ to { box-shadow: 0 0 40px #ff0; }
216
  }
 
 
 
 
217
  </style>
218
  </head>
219
+
220
  <body>
221
  <div id="gameContainer">
222
  <div class="toolbar">
 
226
  <div class="tool" data-tool="spreader" data-name="Spreader">➕</div>
227
  <div class="tool" data-tool="lamp" data-name="Lamp">💡</div>
228
  <div class="tool" data-tool="timer" data-name="Timer">⏲️</div>
229
+ <button class="button reset">Reset</button>
230
+ <button class="button pause">Pause</button>
231
  </div>
232
+ <div id="grid" style="width: 802px; height: 802px;"><div class="cell" style="left: 0px; top: 0px;" data-x="0" data-y="0"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 40px; top: 0px;" data-x="1" data-y="0"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 80px; top: 0px;" data-x="2" data-y="0"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 120px; top: 0px;" data-x="3" data-y="0"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 160px; top: 0px;" data-x="4" data-y="0"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 200px; top: 0px;" data-x="5" data-y="0"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 240px; top: 0px;" data-x="6" data-y="0"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 280px; top: 0px;" data-x="7" data-y="0"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 320px; top: 0px;" data-x="8" data-y="0"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 360px; top: 0px;" data-x="9" data-y="0"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 400px; top: 0px;" data-x="10" data-y="0"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 440px; top: 0px;" data-x="11" data-y="0"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 480px; top: 0px;" data-x="12" data-y="0"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 520px; top: 0px;" data-x="13" data-y="0"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 560px; top: 0px;" data-x="14" data-y="0"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 600px; top: 0px;" data-x="15" data-y="0"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 640px; top: 0px;" data-x="16" data-y="0"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 680px; top: 0px;" data-x="17" data-y="0"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 720px; top: 0px;" data-x="18" data-y="0"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 760px; top: 0px;" data-x="19" data-y="0"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 0px; top: 40px;" data-x="0" data-y="1"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 40px; top: 40px;" data-x="1" data-y="1"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 80px; top: 40px;" data-x="2" data-y="1"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 120px; top: 40px;" data-x="3" data-y="1"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 160px; top: 40px;" data-x="4" data-y="1"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 200px; top: 40px;" data-x="5" data-y="1"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 240px; top: 40px;" data-x="6" data-y="1"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 280px; top: 40px;" data-x="7" data-y="1"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 320px; top: 40px;" data-x="8" data-y="1"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 360px; top: 40px;" data-x="9" data-y="1"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 400px; top: 40px;" data-x="10" data-y="1"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 440px; top: 40px;" data-x="11" data-y="1"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 480px; top: 40px;" data-x="12" data-y="1"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 520px; top: 40px;" data-x="13" data-y="1"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 560px; top: 40px;" data-x="14" data-y="1"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 600px; top: 40px;" data-x="15" data-y="1"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 640px; top: 40px;" data-x="16" data-y="1"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 680px; top: 40px;" data-x="17" data-y="1"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 720px; top: 40px;" data-x="18" data-y="1"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 760px; top: 40px;" data-x="19" data-y="1"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 0px; top: 80px;" data-x="0" data-y="2"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 40px; top: 80px;" data-x="1" data-y="2"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 80px; top: 80px;" data-x="2" data-y="2"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 120px; top: 80px;" data-x="3" data-y="2"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 160px; top: 80px;" data-x="4" data-y="2"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 200px; top: 80px;" data-x="5" data-y="2"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 240px; top: 80px;" data-x="6" data-y="2"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 280px; top: 80px;" data-x="7" data-y="2"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 320px; top: 80px;" data-x="8" data-y="2"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 360px; top: 80px;" data-x="9" data-y="2"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 400px; top: 80px;" data-x="10" data-y="2"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 440px; top: 80px;" data-x="11" data-y="2"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 480px; top: 80px;" data-x="12" data-y="2"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 520px; top: 80px;" data-x="13" data-y="2"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 560px; top: 80px;" data-x="14" data-y="2"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 600px; top: 80px;" data-x="15" data-y="2"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 640px; top: 80px;" data-x="16" data-y="2"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 680px; top: 80px;" data-x="17" data-y="2"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 720px; top: 80px;" data-x="18" data-y="2"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 760px; top: 80px;" data-x="19" data-y="2"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 0px; top: 120px;" data-x="0" data-y="3"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 40px; top: 120px;" data-x="1" data-y="3"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 80px; top: 120px;" data-x="2" data-y="3"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 120px; top: 120px;" data-x="3" data-y="3"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 160px; top: 120px;" data-x="4" data-y="3"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 200px; top: 120px;" data-x="5" data-y="3"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 240px; top: 120px;" data-x="6" data-y="3"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 280px; top: 120px;" data-x="7" data-y="3"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 320px; top: 120px;" data-x="8" data-y="3"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 360px; top: 120px;" data-x="9" data-y="3"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 400px; top: 120px;" data-x="10" data-y="3"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 440px; top: 120px;" data-x="11" data-y="3"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 480px; top: 120px;" data-x="12" data-y="3"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 520px; top: 120px;" data-x="13" data-y="3"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 560px; top: 120px;" data-x="14" data-y="3"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 600px; top: 120px;" data-x="15" data-y="3"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 640px; top: 120px;" data-x="16" data-y="3"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 680px; top: 120px;" data-x="17" data-y="3"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 720px; top: 120px;" data-x="18" data-y="3"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 760px; top: 120px;" data-x="19" data-y="3"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 0px; top: 160px;" data-x="0" data-y="4"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 40px; top: 160px;" data-x="1" data-y="4"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 80px; top: 160px;" data-x="2" data-y="4"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 120px; top: 160px;" data-x="3" data-y="4"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 160px; top: 160px;" data-x="4" data-y="4"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 200px; top: 160px;" data-x="5" data-y="4"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 240px; top: 160px;" data-x="6" data-y="4"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 280px; top: 160px;" data-x="7" data-y="4"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 320px; top: 160px;" data-x="8" data-y="4"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 360px; top: 160px;" data-x="9" data-y="4"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 400px; top: 160px;" data-x="10" data-y="4"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 440px; top: 160px;" data-x="11" data-y="4"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 480px; top: 160px;" data-x="12" data-y="4"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 520px; top: 160px;" data-x="13" data-y="4"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 560px; top: 160px;" data-x="14" data-y="4"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 600px; top: 160px;" data-x="15" data-y="4"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 640px; top: 160px;" data-x="16" data-y="4"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 680px; top: 160px;" data-x="17" data-y="4"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 720px; top: 160px;" data-x="18" data-y="4"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 760px; top: 160px;" data-x="19" data-y="4"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 0px; top: 200px;" data-x="0" data-y="5"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 40px; top: 200px;" data-x="1" data-y="5"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 80px; top: 200px;" data-x="2" data-y="5"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 120px; top: 200px;" data-x="3" data-y="5"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 160px; top: 200px;" data-x="4" data-y="5"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 200px; top: 200px;" data-x="5" data-y="5"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 240px; top: 200px;" data-x="6" data-y="5"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 280px; top: 200px;" data-x="7" data-y="5"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 320px; top: 200px;" data-x="8" data-y="5"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 360px; top: 200px;" data-x="9" data-y="5"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 400px; top: 200px;" data-x="10" data-y="5"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 440px; top: 200px;" data-x="11" data-y="5"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 480px; top: 200px;" data-x="12" data-y="5"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 520px; top: 200px;" data-x="13" data-y="5"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 560px; top: 200px;" data-x="14" data-y="5"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 600px; top: 200px;" data-x="15" data-y="5"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 640px; top: 200px;" data-x="16" data-y="5"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 680px; top: 200px;" data-x="17" data-y="5"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 720px; top: 200px;" data-x="18" data-y="5"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 760px; top: 200px;" data-x="19" data-y="5"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 0px; top: 240px;" data-x="0" data-y="6"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 40px; top: 240px;" data-x="1" data-y="6"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 80px; top: 240px;" data-x="2" data-y="6"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 120px; top: 240px;" data-x="3" data-y="6"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 160px; top: 240px;" data-x="4" data-y="6"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 200px; top: 240px;" data-x="5" data-y="6"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 240px; top: 240px;" data-x="6" data-y="6"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 280px; top: 240px;" data-x="7" data-y="6"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 320px; top: 240px;" data-x="8" data-y="6"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 360px; top: 240px;" data-x="9" data-y="6"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 400px; top: 240px;" data-x="10" data-y="6"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 440px; top: 240px;" data-x="11" data-y="6"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 480px; top: 240px;" data-x="12" data-y="6"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 520px; top: 240px;" data-x="13" data-y="6"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 560px; top: 240px;" data-x="14" data-y="6"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 600px; top: 240px;" data-x="15" data-y="6"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 640px; top: 240px;" data-x="16" data-y="6"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 680px; top: 240px;" data-x="17" data-y="6"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 720px; top: 240px;" data-x="18" data-y="6"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 760px; top: 240px;" data-x="19" data-y="6"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 0px; top: 280px;" data-x="0" data-y="7"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 40px; top: 280px;" data-x="1" data-y="7"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 80px; top: 280px;" data-x="2" data-y="7"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 120px; top: 280px;" data-x="3" data-y="7"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 160px; top: 280px;" data-x="4" data-y="7"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 200px; top: 280px;" data-x="5" data-y="7"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 240px; top: 280px;" data-x="6" data-y="7"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 280px; top: 280px;" data-x="7" data-y="7"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 320px; top: 280px;" data-x="8" data-y="7"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 360px; top: 280px;" data-x="9" data-y="7"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 400px; top: 280px;" data-x="10" data-y="7"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 440px; top: 280px;" data-x="11" data-y="7"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 480px; top: 280px;" data-x="12" data-y="7"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 520px; top: 280px;" data-x="13" data-y="7"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 560px; top: 280px;" data-x="14" data-y="7"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 600px; top: 280px;" data-x="15" data-y="7"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 640px; top: 280px;" data-x="16" data-y="7"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 680px; top: 280px;" data-x="17" data-y="7"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 720px; top: 280px;" data-x="18" data-y="7"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 760px; top: 280px;" data-x="19" data-y="7"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 0px; top: 320px;" data-x="0" data-y="8"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 40px; top: 320px;" data-x="1" data-y="8"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 80px; top: 320px;" data-x="2" data-y="8"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 120px; top: 320px;" data-x="3" data-y="8"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 160px; top: 320px;" data-x="4" data-y="8"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 200px; top: 320px;" data-x="5" data-y="8"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 240px; top: 320px;" data-x="6" data-y="8"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 280px; top: 320px;" data-x="7" data-y="8"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 320px; top: 320px;" data-x="8" data-y="8"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 360px; top: 320px;" data-x="9" data-y="8"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 400px; top: 320px;" data-x="10" data-y="8"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 440px; top: 320px;" data-x="11" data-y="8"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 480px; top: 320px;" data-x="12" data-y="8"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 520px; top: 320px;" data-x="13" data-y="8"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 560px; top: 320px;" data-x="14" data-y="8"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 600px; top: 320px;" data-x="15" data-y="8"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 640px; top: 320px;" data-x="16" data-y="8"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 680px; top: 320px;" data-x="17" data-y="8"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 720px; top: 320px;" data-x="18" data-y="8"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 760px; top: 320px;" data-x="19" data-y="8"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 0px; top: 360px;" data-x="0" data-y="9"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 40px; top: 360px;" data-x="1" data-y="9"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 80px; top: 360px;" data-x="2" data-y="9"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 120px; top: 360px;" data-x="3" data-y="9"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 160px; top: 360px;" data-x="4" data-y="9"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 200px; top: 360px;" data-x="5" data-y="9"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 240px; top: 360px;" data-x="6" data-y="9"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 280px; top: 360px;" data-x="7" data-y="9"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 320px; top: 360px;" data-x="8" data-y="9"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 360px; top: 360px;" data-x="9" data-y="9"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 400px; top: 360px;" data-x="10" data-y="9"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 440px; top: 360px;" data-x="11" data-y="9"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 480px; top: 360px;" data-x="12" data-y="9"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 520px; top: 360px;" data-x="13" data-y="9"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 560px; top: 360px;" data-x="14" data-y="9"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 600px; top: 360px;" data-x="15" data-y="9"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 640px; top: 360px;" data-x="16" data-y="9"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 680px; top: 360px;" data-x="17" data-y="9"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 720px; top: 360px;" data-x="18" data-y="9"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 760px; top: 360px;" data-x="19" data-y="9"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 0px; top: 400px;" data-x="0" data-y="10"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 40px; top: 400px;" data-x="1" data-y="10"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 80px; top: 400px;" data-x="2" data-y="10"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 120px; top: 400px;" data-x="3" data-y="10"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 160px; top: 400px;" data-x="4" data-y="10"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 200px; top: 400px;" data-x="5" data-y="10"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 240px; top: 400px;" data-x="6" data-y="10"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 280px; top: 400px;" data-x="7" data-y="10"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 320px; top: 400px;" data-x="8" data-y="10"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 360px; top: 400px;" data-x="9" data-y="10"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 400px; top: 400px;" data-x="10" data-y="10"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 440px; top: 400px;" data-x="11" data-y="10"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 480px; top: 400px;" data-x="12" data-y="10"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 520px; top: 400px;" data-x="13" data-y="10"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 560px; top: 400px;" data-x="14" data-y="10"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 600px; top: 400px;" data-x="15" data-y="10"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 640px; top: 400px;" data-x="16" data-y="10"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 680px; top: 400px;" data-x="17" data-y="10"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 720px; top: 400px;" data-x="18" data-y="10"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 760px; top: 400px;" data-x="19" data-y="10"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 0px; top: 440px;" data-x="0" data-y="11"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 40px; top: 440px;" data-x="1" data-y="11"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 80px; top: 440px;" data-x="2" data-y="11"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 120px; top: 440px;" data-x="3" data-y="11"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 160px; top: 440px;" data-x="4" data-y="11"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 200px; top: 440px;" data-x="5" data-y="11"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 240px; top: 440px;" data-x="6" data-y="11"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 280px; top: 440px;" data-x="7" data-y="11"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 320px; top: 440px;" data-x="8" data-y="11"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 360px; top: 440px;" data-x="9" data-y="11"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 400px; top: 440px;" data-x="10" data-y="11"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 440px; top: 440px;" data-x="11" data-y="11"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 480px; top: 440px;" data-x="12" data-y="11"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 520px; top: 440px;" data-x="13" data-y="11"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 560px; top: 440px;" data-x="14" data-y="11"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 600px; top: 440px;" data-x="15" data-y="11"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 640px; top: 440px;" data-x="16" data-y="11"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 680px; top: 440px;" data-x="17" data-y="11"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 720px; top: 440px;" data-x="18" data-y="11"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 760px; top: 440px;" data-x="19" data-y="11"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 0px; top: 480px;" data-x="0" data-y="12"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 40px; top: 480px;" data-x="1" data-y="12"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 80px; top: 480px;" data-x="2" data-y="12"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 120px; top: 480px;" data-x="3" data-y="12"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 160px; top: 480px;" data-x="4" data-y="12"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 200px; top: 480px;" data-x="5" data-y="12"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 240px; top: 480px;" data-x="6" data-y="12"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 280px; top: 480px;" data-x="7" data-y="12"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 320px; top: 480px;" data-x="8" data-y="12"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 360px; top: 480px;" data-x="9" data-y="12"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 400px; top: 480px;" data-x="10" data-y="12"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 440px; top: 480px;" data-x="11" data-y="12"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 480px; top: 480px;" data-x="12" data-y="12"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 520px; top: 480px;" data-x="13" data-y="12"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 560px; top: 480px;" data-x="14" data-y="12"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 600px; top: 480px;" data-x="15" data-y="12"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 640px; top: 480px;" data-x="16" data-y="12"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 680px; top: 480px;" data-x="17" data-y="12"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 720px; top: 480px;" data-x="18" data-y="12"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 760px; top: 480px;" data-x="19" data-y="12"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 0px; top: 520px;" data-x="0" data-y="13"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 40px; top: 520px;" data-x="1" data-y="13"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 80px; top: 520px;" data-x="2" data-y="13"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 120px; top: 520px;" data-x="3" data-y="13"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 160px; top: 520px;" data-x="4" data-y="13"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 200px; top: 520px;" data-x="5" data-y="13"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 240px; top: 520px;" data-x="6" data-y="13"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 280px; top: 520px;" data-x="7" data-y="13"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 320px; top: 520px;" data-x="8" data-y="13"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 360px; top: 520px;" data-x="9" data-y="13"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 400px; top: 520px;" data-x="10" data-y="13"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 440px; top: 520px;" data-x="11" data-y="13"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 480px; top: 520px;" data-x="12" data-y="13"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 520px; top: 520px;" data-x="13" data-y="13"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 560px; top: 520px;" data-x="14" data-y="13"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 600px; top: 520px;" data-x="15" data-y="13"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 640px; top: 520px;" data-x="16" data-y="13"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 680px; top: 520px;" data-x="17" data-y="13"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 720px; top: 520px;" data-x="18" data-y="13"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 760px; top: 520px;" data-x="19" data-y="13"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 0px; top: 560px;" data-x="0" data-y="14"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 40px; top: 560px;" data-x="1" data-y="14"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 80px; top: 560px;" data-x="2" data-y="14"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 120px; top: 560px;" data-x="3" data-y="14"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 160px; top: 560px;" data-x="4" data-y="14"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 200px; top: 560px;" data-x="5" data-y="14"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 240px; top: 560px;" data-x="6" data-y="14"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 280px; top: 560px;" data-x="7" data-y="14"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 320px; top: 560px;" data-x="8" data-y="14"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 360px; top: 560px;" data-x="9" data-y="14"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 400px; top: 560px;" data-x="10" data-y="14"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 440px; top: 560px;" data-x="11" data-y="14"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 480px; top: 560px;" data-x="12" data-y="14"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 520px; top: 560px;" data-x="13" data-y="14"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 560px; top: 560px;" data-x="14" data-y="14"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 600px; top: 560px;" data-x="15" data-y="14"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 640px; top: 560px;" data-x="16" data-y="14"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 680px; top: 560px;" data-x="17" data-y="14"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 720px; top: 560px;" data-x="18" data-y="14"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 760px; top: 560px;" data-x="19" data-y="14"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 0px; top: 600px;" data-x="0" data-y="15"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 40px; top: 600px;" data-x="1" data-y="15"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 80px; top: 600px;" data-x="2" data-y="15"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 120px; top: 600px;" data-x="3" data-y="15"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 160px; top: 600px;" data-x="4" data-y="15"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 200px; top: 600px;" data-x="5" data-y="15"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 240px; top: 600px;" data-x="6" data-y="15"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 280px; top: 600px;" data-x="7" data-y="15"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 320px; top: 600px;" data-x="8" data-y="15"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 360px; top: 600px;" data-x="9" data-y="15"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 400px; top: 600px;" data-x="10" data-y="15"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 440px; top: 600px;" data-x="11" data-y="15"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 480px; top: 600px;" data-x="12" data-y="15"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 520px; top: 600px;" data-x="13" data-y="15"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 560px; top: 600px;" data-x="14" data-y="15"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 600px; top: 600px;" data-x="15" data-y="15"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 640px; top: 600px;" data-x="16" data-y="15"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 680px; top: 600px;" data-x="17" data-y="15"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 720px; top: 600px;" data-x="18" data-y="15"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 760px; top: 600px;" data-x="19" data-y="15"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 0px; top: 640px;" data-x="0" data-y="16"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 40px; top: 640px;" data-x="1" data-y="16"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 80px; top: 640px;" data-x="2" data-y="16"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 120px; top: 640px;" data-x="3" data-y="16"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 160px; top: 640px;" data-x="4" data-y="16"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 200px; top: 640px;" data-x="5" data-y="16"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 240px; top: 640px;" data-x="6" data-y="16"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 280px; top: 640px;" data-x="7" data-y="16"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 320px; top: 640px;" data-x="8" data-y="16"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 360px; top: 640px;" data-x="9" data-y="16"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 400px; top: 640px;" data-x="10" data-y="16"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 440px; top: 640px;" data-x="11" data-y="16"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 480px; top: 640px;" data-x="12" data-y="16"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 520px; top: 640px;" data-x="13" data-y="16"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 560px; top: 640px;" data-x="14" data-y="16"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 600px; top: 640px;" data-x="15" data-y="16"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 640px; top: 640px;" data-x="16" data-y="16"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 680px; top: 640px;" data-x="17" data-y="16"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 720px; top: 640px;" data-x="18" data-y="16"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 760px; top: 640px;" data-x="19" data-y="16"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 0px; top: 680px;" data-x="0" data-y="17"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 40px; top: 680px;" data-x="1" data-y="17"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 80px; top: 680px;" data-x="2" data-y="17"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 120px; top: 680px;" data-x="3" data-y="17"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 160px; top: 680px;" data-x="4" data-y="17"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 200px; top: 680px;" data-x="5" data-y="17"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 240px; top: 680px;" data-x="6" data-y="17"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 280px; top: 680px;" data-x="7" data-y="17"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 320px; top: 680px;" data-x="8" data-y="17"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 360px; top: 680px;" data-x="9" data-y="17"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 400px; top: 680px;" data-x="10" data-y="17"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 440px; top: 680px;" data-x="11" data-y="17"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 480px; top: 680px;" data-x="12" data-y="17"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 520px; top: 680px;" data-x="13" data-y="17"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 560px; top: 680px;" data-x="14" data-y="17"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 600px; top: 680px;" data-x="15" data-y="17"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 640px; top: 680px;" data-x="16" data-y="17"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 680px; top: 680px;" data-x="17" data-y="17"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 720px; top: 680px;" data-x="18" data-y="17"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 760px; top: 680px;" data-x="19" data-y="17"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 0px; top: 720px;" data-x="0" data-y="18"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 40px; top: 720px;" data-x="1" data-y="18"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 80px; top: 720px;" data-x="2" data-y="18"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 120px; top: 720px;" data-x="3" data-y="18"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 160px; top: 720px;" data-x="4" data-y="18"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 200px; top: 720px;" data-x="5" data-y="18"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 240px; top: 720px;" data-x="6" data-y="18"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 280px; top: 720px;" data-x="7" data-y="18"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 320px; top: 720px;" data-x="8" data-y="18"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 360px; top: 720px;" data-x="9" data-y="18"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 400px; top: 720px;" data-x="10" data-y="18"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 440px; top: 720px;" data-x="11" data-y="18"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 480px; top: 720px;" data-x="12" data-y="18"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 520px; top: 720px;" data-x="13" data-y="18"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 560px; top: 720px;" data-x="14" data-y="18"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 600px; top: 720px;" data-x="15" data-y="18"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 640px; top: 720px;" data-x="16" data-y="18"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 680px; top: 720px;" data-x="17" data-y="18"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 720px; top: 720px;" data-x="18" data-y="18"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 760px; top: 720px;" data-x="19" data-y="18"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 0px; top: 760px;" data-x="0" data-y="19"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 40px; top: 760px;" data-x="1" data-y="19"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 80px; top: 760px;" data-x="2" data-y="19"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 120px; top: 760px;" data-x="3" data-y="19"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 160px; top: 760px;" data-x="4" data-y="19"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 200px; top: 760px;" data-x="5" data-y="19"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 240px; top: 760px;" data-x="6" data-y="19"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 280px; top: 760px;" data-x="7" data-y="19"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 320px; top: 760px;" data-x="8" data-y="19"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 360px; top: 760px;" data-x="9" data-y="19"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 400px; top: 760px;" data-x="10" data-y="19"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 440px; top: 760px;" data-x="11" data-y="19"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 480px; top: 760px;" data-x="12" data-y="19"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 520px; top: 760px;" data-x="13" data-y="19"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 560px; top: 760px;" data-x="14" data-y="19"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 600px; top: 760px;" data-x="15" data-y="19"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 640px; top: 760px;" data-x="16" data-y="19"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 680px; top: 760px;" data-x="17" data-y="19"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 720px; top: 760px;" data-x="18" data-y="19"><div class="power-level"></div><div class="timer-value"></div></div><div class="cell" style="left: 760px; top: 760px;" data-x="19" data-y="19"><div class="power-level"></div><div class="timer-value"></div></div></div>
233
  </div>
234
 
235
+ <script>
236
+ class RedstoneSandbox {
237
+ constructor() {
238
+ this.gridSize = 20;
239
+ this.cellSize = 40;
240
+ this.grid = {};
241
+ this.selectedTool = 'wire';
242
+ this.timers = new Set();
243
+ this.isPaused = false;
244
+ this.gameLoopInterval = null;
245
+ this.init();
246
+ }
247
 
248
+ init() {
249
+ this.setupGrid();
250
+ this.setupTools();
251
+ this.setupButtons();
252
+ this.bindEvents();
253
+ this.startGameLoop();
254
+ }
255
 
256
+ setupGrid() {
257
+ const grid = document.getElementById('grid');
258
+ grid.style.width = `${this.gridSize * this.cellSize + 2}px`;
259
+ grid.style.height = `${this.gridSize * this.cellSize + 2}px`;
260
+
261
+ for(let y = 0; y < this.gridSize; y++) {
262
+ for(let x = 0; x < this.gridSize; x++) {
263
+ const cell = document.createElement('div');
264
+ cell.className = 'cell';
265
+ cell.style.left = `${x * this.cellSize}px`;
266
+ cell.style.top = `${y * this.cellSize}px`;
267
+ cell.dataset.x = x;
268
+ cell.dataset.y = y;
269
+
270
+ const powerLevel = document.createElement('div');
271
+ powerLevel.className = 'power-level';
272
+
273
+ const timerValue = document.createElement('div');
274
+ timerValue.className = 'timer-value';
275
+
276
+ cell.appendChild(powerLevel);
277
+ cell.appendChild(timerValue);
278
+ grid.appendChild(cell);
279
+
280
+ this.grid[`${x},${y}`] = {
281
+ element: cell,
282
+ powerDisplay: powerLevel,
283
+ timerDisplay: timerValue,
284
+ type: null,
285
+ powered: false,
286
+ powerLevel: 0,
287
+ timerInterval: 1,
288
+ lastUpdate: Date.now()
289
+ };
290
+ }
291
  }
292
  }
 
293
 
294
+ setupTools() {
295
+ const tools = document.querySelectorAll('.tool');
296
+ tools.forEach(tool => {
297
+ tool.addEventListener('click', () => {
298
+ tools.forEach(t => t.classList.remove('active'));
299
+ tool.classList.add('active');
300
+ this.selectedTool = tool.dataset.tool;
301
+ });
302
  });
303
+ }
 
304
 
305
+ setupButtons() {
306
+ document.querySelector('.reset').addEventListener('click', () => {
307
+ Object.values(this.grid).forEach(cell => {
308
+ cell.element.className = 'cell';
309
+ cell.type = null;
310
+ cell.powered = false;
311
+ cell.powerLevel = 0;
312
+ cell.powerDisplay.textContent = '';
313
+ cell.timerDisplay.textContent = '';
314
+ });
315
+ this.timers.clear();
316
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
317
 
318
+ const pauseBtn = document.querySelector('.pause');
319
+ pauseBtn.addEventListener('click', () => {
320
+ this.isPaused = !this.isPaused;
321
+ pauseBtn.classList.toggle('active');
322
+ pauseBtn.textContent = this.isPaused ? 'Resume' : 'Pause';
323
+ });
324
  }
 
 
 
 
 
 
 
 
325
 
326
+ bindEvents() {
327
+ const grid = document.getElementById('grid');
328
+
329
+ grid.addEventListener('contextmenu', e => {
330
+ e.preventDefault();
331
+ if(e.target.classList.contains('cell')) {
332
+ const x = parseInt(e.target.dataset.x);
333
+ const y = parseInt(e.target.dataset.y);
334
+ this.deleteComponent(x, y);
335
+ }
336
+ });
337
 
338
+ grid.addEventListener('click', e => {
339
+ if(e.target.classList.contains('cell')) {
340
+ const x = parseInt(e.target.dataset.x);
341
+ const y = parseInt(e.target.dataset.y);
342
+ const cell = this.grid[`${x},${y}`];
343
+
344
+ if(cell.type === 'torch') {
345
+ this.toggleTorch(cell);
346
+ } else if(cell.type === 'timer') {
347
+ this.adjustTimer(cell);
348
+ } else {
349
+ this.placeComponent(x, y);
350
+ }
351
+ }
352
+ });
353
+ }
354
 
355
+ deleteComponent(x, y) {
356
+ const cell = this.grid[`${x},${y}`];
357
+ if(cell.type === 'timer') {
358
+ this.timers.delete(`${x},${y}`);
359
+ }
360
+ cell.element.className = 'cell';
361
+ cell.type = null;
 
 
 
 
 
 
 
362
  cell.powered = false;
363
  cell.powerLevel = 0;
364
+ cell.powerDisplay.textContent = '';
365
+ cell.timerDisplay.textContent = '';
366
+ this.updatePower();
367
  }
368
+
369
+ toggleTorch(cell) {
370
+ cell.powered = !cell.powered;
371
+ cell.powerLevel = cell.powered ? 15 : 0;
372
+ this.updatePower();
373
  }
374
 
375
+ adjustTimer(cell) {
376
+ cell.timerInterval = (cell.timerInterval % 15) + 1;
377
+ cell.timerDisplay.textContent = `${cell.timerInterval}s`;
378
+ }
379
 
380
+ placeComponent(x, y) {
381
+ const cell = this.grid[`${x},${y}`];
382
+
383
+ if(cell.type === this.selectedTool) return;
384
 
385
+ cell.element.className = 'cell';
386
+ cell.element.classList.add(this.selectedTool);
387
+ cell.type = this.selectedTool;
388
+
389
+ if(this.selectedTool === 'torch') {
390
+ cell.powered = true;
391
+ cell.powerLevel = 15;
392
+ cell.element.classList.add('powered');
393
+ } else if(this.selectedTool === 'spreader') {
394
  cell.powered = false;
395
  cell.powerLevel = 0;
 
396
  }
397
+
398
+ if(this.selectedTool === 'timer') {
399
+ cell.timerInterval = 1;
400
+ cell.timerDisplay.textContent = '1s';
401
+ this.timers.add(`${x},${y}`);
402
+ }
403
 
404
+ this.updatePower();
405
+ }
 
406
 
407
+ updatePower() {
408
+ if(this.isPaused) return;
409
+
410
+ Object.values(this.grid).forEach(cell => {
411
+ if(cell.type && !['torch', 'timer'].includes(cell.type)) {
412
+ cell.powered = false;
413
+ cell.powerLevel = 0;
414
+ cell.element.classList.remove('powered');
415
  }
416
  });
 
417
 
418
+ for(let i = 15; i > 0; i--) {
419
+ Object.entries(this.grid).forEach(([coord, cell]) => {
420
+ if(!cell.powered) return;
421
+
422
+ const [x, y] = coord.split(',').map(Number);
423
+
424
+ if(cell.type === 'wire') {
425
+ this.powerNearby(x, y, cell.powerLevel - 1);
426
+ } else if(['torch', 'timer'].includes(cell.type)) {
427
+ this.powerNearby(x, y, 15);
428
+ } else if(cell.type === 'spreader' && cell.powered) {
429
+ this.spreadPower(x, y);
430
+ }
431
+ });
432
  }
 
 
433
 
434
+ Object.values(this.grid).forEach(cell => {
435
+ if(cell.powerLevel > 0) {
436
+ cell.element.classList.add('powered');
437
+ cell.element.dataset.power = cell.powerLevel;
438
+ cell.powerDisplay.textContent = cell.powerLevel;
439
+ } else {
440
+ cell.element.classList.remove('powered');
441
+ delete cell.element.dataset.power;
442
+ cell.powerDisplay.textContent = '';
443
+ }
444
+ });
445
+ }
446
 
447
+ powerNearby(x, y, power) {
448
+ if(power <= 0) return;
449
+ [[x+1,y], [x-1,y], [x,y+1], [x,y-1]].forEach(([nx, ny]) => {
450
+ const neighbor = this.grid[`${nx},${ny}`];
451
+ if(neighbor && neighbor.type && neighbor.type !== 'block' && neighbor.type !== 'timer' && neighbor.type !== 'torch' && power > neighbor.powerLevel) {
452
+ neighbor.powered = true;
453
+ neighbor.powerLevel = power;
454
+ }
455
+ });
456
+ }
457
 
458
+ spreadPower(x, y) {
459
+ [[x+1,y], [x-1,y], [x,y+1], [x,y-1]].forEach(([nx, ny]) => {
460
+ const neighbor = this.grid[`${nx},${ny}`];
461
+ if(neighbor && neighbor.type && neighbor.type !== 'block' && neighbor.type !== 'timer' && neighbor.type !== 'torch' && neighbor.powerLevel === 0) {
462
+ neighbor.powered = true;
463
+ neighbor.powerLevel = 15;
 
 
 
 
 
 
464
  }
465
  });
466
+ }
467
+
468
+ startGameLoop() {
469
+ this.gameLoopInterval = setInterval(() => {
470
+ if(this.isPaused) return;
471
+
472
+ const now = Date.now();
473
+ this.timers.forEach(coord => {
474
+ const cell = this.grid[coord];
475
+ if(now - cell.lastUpdate >= cell.timerInterval * 1000) {
476
+ cell.powered = !cell.powered;
477
+ cell.powerLevel = cell.powered ? 15 : 0;
478
+ cell.lastUpdate = now;
479
+ this.updatePower();
480
+ }
481
+ });
482
+ }, 50);
483
+ }
484
  }
 
485
 
486
+ new RedstoneSandbox();
487
+ </script>
488
+
489
  </body>
490
+
491
  </html>