Spaces:

vip3
/

Redstone-Sandbox

Running

App Files Files Community

vip3 commited on 29 days ago

Commit

5a9b538

•

1 Parent(s): e6ea07c

Update index.html

Browse files

Files changed (1) hide show

index.html +349 -356

index.html CHANGED Viewed

@@ -1,4 +1,3 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -7,118 +6,114 @@
     <title>Redstone Sandbox</title>
     <style>
         body {
-          margin: 0;
-          background: #1a1a1a;
-          font-family: 'Segoe UI', sans-serif;
-          overflow: hidden;
-          color: #fff;
         }
         #gameContainer {
-          position: relative;
-          width: 100vw;
-          height: 100vh;
         }
         #grid {
-          position: absolute;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          background: rgba(0,0,0,0.3);
-          padding: 2px;
-          border-radius: 8px;
-          box-shadow: 0 0 50px rgba(0,0,0,0.5);
         }
-        /* Cell styles */
         .cell {
-          width: 40px;
-          height: 40px;
-          border: 1px solid #2a2a2a;
-          position: absolute;
-          transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-          border-radius: 6px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          font-size: 10px;
-          cursor: pointer;
         }
-        /* Toolbar styles */
         .toolbar {
-          position: fixed;
-          top: 20px;
-          left: 50%;
-          transform: translateX(-50%);
-          background: rgba(20,20,20,0.95);
-          padding: 15px;
-          border-radius: 15px;
-          display: flex;
-          gap: 12px;
-          box-shadow: 0 5px 25px rgba(0,0,0,0.3);
-          z-index: 100;
         }
         .tool {
-          width: 50px;
-          height: 50px;
-          border: 2px solid #444;
-          border-radius: 10px;
-          cursor: pointer;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          font-size: 22px;
-          background: rgba(255,255,255,0.05);
-          transition: 0.3s;
-          position: relative;
         }
         .tool:hover {
-          transform: translateY(-2px);
-          background: rgba(255,255,255,0.1);
         }
         .tool.active {
-          border-color: #f55;
-          background: rgba(255,85,85,0.2);
-          transform: scale(1.1);
         }
-        /* Button styles */
         .button {
-          background: #f55;
-          border: none;
-          border-radius: 8px;
-          color: white;
-          cursor: pointer;
-          font-size: 16px;
-          padding: 10px 20px;
-          transition: 0.3s;
         }
         .button:hover {
-          transform: scale(1.1);
         }
         .button.pause {
-          background: #55f;
         }
         .button.pause.active {
-          background: #f55;
         }
-        /* Component styles */
-        .wire {
-          background: #300;
-          transition: background-color 0.3s;
         }
-        .wire.powered {
-          background: #f00;
         }
         .wire[data-power="1"] { background: #400; }
@@ -136,97 +131,92 @@
         .wire[data-power="13"] { background: #f11; }
         .wire[data-power="14"] { background: #f22; }
         .wire[data-power="15"] { background: #f33; }
-        .torch {
-          background: #320;
-          box-shadow: 0 0 10px #320;
         }
-        .torch.powered {
-          background: #fa0;
-          box-shadow: 0 0 20px #fa0;
-          animation: torch-glow 1s infinite alternate;
         }
-        .block {
-          background: #444;
-          box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
         }
-        .spreader {
-          background: #030;
-          transition: all 0.3s;
         }
-        .spreader.powered {
-          background: #0f0;
-          box-shadow: 0 0 20px #0f0;
-          animation: spreader-pulse 1s infinite;
         }
-        .lamp {
-          background: #330;
-          transition: all 0.3s;
         }
-        .lamp.powered {
-          background: #ff0;
-          box-shadow: 0 0 30px #ff0;
-          animation: lamp-shine 2s infinite alternate;
         }
-        .timer {
-          background: #303;
-          transition: all 0.3s;
         }
-        .timer.powered {
-          background: #f0f;
-          box-shadow: 0 0 20px #f0f;
         }
-        /* UI elements */
         .power-level {
-          position: absolute;
-          top: 2px;
-          right: 2px;
-          font-size: 10px;
-          padding: 2px 4px;
-          background: rgba(0,0,0,0.5);
-          border-radius: 4px;
-          pointer-events: none;
         }
         .timer-value {
-          position: absolute;
-          bottom: 2px;
-          left: 2px;
-          font-size: 10px;
-          color: rgba(255,255,255,0.8);
         }
-        /* Animations */
         @keyframes torch-glow {
-          from { box-shadow: 0 0 10px #fa0; }
-          to { box-shadow: 0 0 30px #fa0; }
         }
         @keyframes spreader-pulse {
-          0% { transform: scale(1); }
-          50% { transform: scale(1.1); }
-          100% { transform: scale(1); }
         }
         @keyframes lamp-shine {
-          from { box-shadow: 0 0 20px #ff0; }
-          to { box-shadow: 0 0 40px #ff0; }
         }
-        /* Icons */
-        ⚡ 🔥 ⬛ ➕ 💡 ⏲️
-        Reset Pause
     </style>
 </head>
 <body>
     <div id="gameContainer">
         <div class="toolbar">
@@ -236,263 +226,266 @@
             <div class="tool" data-tool="spreader" data-name="Spreader">➕</div>
             <div class="tool" data-tool="lamp" data-name="Lamp">💡</div>
             <div class="tool" data-tool="timer" data-name="Timer">⏲️</div>
-            <button class="reset-btn">Reset</button>
         </div>
-        <div id="grid"></div>
     </div>
-<script>
-    class RedstoneSandbox {
-        constructor() {
-            this.gridSize = 20;
-            this.cellSize = 40;
-            this.grid = {};
-            this.selectedTool = 'wire';
-            this.timers = new Set();
-            this.isPaused = false;
-            this.gameLoopInterval = null;
-            this.init();
-        }
-        init() {
-            this.setupGrid();
-            this.setupTools();
-            this.setupButtons();
-            this.bindEvents();
-            this.startGameLoop();
-        }
-        setupGrid() {
-            const grid = document.getElementById('grid');
-            grid.style.width = `${this.gridSize * this.cellSize + 2}px`;
-            grid.style.height = `${this.gridSize * this.cellSize + 2}px`;
-            for(let y = 0; y < this.gridSize; y++) {
-                for(let x = 0; x < this.gridSize; x++) {
-                    const cell = document.createElement('div');
-                    cell.className = 'cell';
-                    cell.style.left = `${x * this.cellSize}px`;
-                    cell.style.top = `${y * this.cellSize}px`;
-                    cell.dataset.x = x;
-                    cell.dataset.y = y;
-                    const powerLevel = document.createElement('div');
-                    powerLevel.className = 'power-level';
-                    const timerValue = document.createElement('div');
-                    timerValue.className = 'timer-value';
-                    cell.appendChild(powerLevel);
-                    cell.appendChild(timerValue);
-                    grid.appendChild(cell);
-                    this.grid[`${x},${y}`] = {
-                        element: cell,
-                        powerDisplay: powerLevel,
-                        timerDisplay: timerValue,
-                        type: null,
-                        powered: false,
-                        powerLevel: 0,
-                        timerInterval: 1,
-                        lastUpdate: Date.now()
-                    };
                 }
             }
-        }
-        setupTools() {
-            const tools = document.querySelectorAll('.tool');
-            tools.forEach(tool => {
-                tool.addEventListener('click', () => {
-                    tools.forEach(t => t.classList.remove('active'));
-                    tool.classList.add('active');
-                    this.selectedTool = tool.dataset.tool;
                 });
-            });
-        }
-        setupButtons() {
-            document.querySelector('.reset').addEventListener('click', () => {
-                Object.values(this.grid).forEach(cell => {
-                    cell.element.className = 'cell';
-                    cell.type = null;
-                    cell.powered = false;
-                    cell.powerLevel = 0;
-                    cell.powerDisplay.textContent = '';
-                    cell.timerDisplay.textContent = '';
                 });
-                this.timers.clear();
-            });
-            const pauseBtn = document.querySelector('.pause');
-            pauseBtn.addEventListener('click', () => {
-                this.isPaused = !this.isPaused;
-                pauseBtn.classList.toggle('active');
-                pauseBtn.textContent = this.isPaused ? 'Resume' : 'Pause';
-            });
-        }
-        bindEvents() {
-            const grid = document.getElementById('grid');
-            grid.addEventListener('contextmenu', e => {
-                e.preventDefault();
-                if(e.target.classList.contains('cell')) {
-                    const x = parseInt(e.target.dataset.x);
-                    const y = parseInt(e.target.dataset.y);
-                    this.deleteComponent(x, y);
-                }
-            });
-            grid.addEventListener('click', e => {
-                if(e.target.classList.contains('cell')) {
-                    const x = parseInt(e.target.dataset.x);
-                    const y = parseInt(e.target.dataset.y);
-                    const cell = this.grid[`${x},${y}`];
-                    if(cell.type === 'torch') {
-                        this.toggleTorch(cell);
-                    } else if(cell.type === 'timer') {
-                        this.adjustTimer(cell);
-                    } else {
-                        this.placeComponent(x, y);
-                    }
-                }
-            });
-        }
-        deleteComponent(x, y) {
-            const cell = this.grid[`${x},${y}`];
-            if(cell.type === 'timer') {
-                this.timers.delete(`${x},${y}`);
             }
-            cell.element.className = 'cell';
-            cell.type = null;
-            cell.powered = false;
-            cell.powerLevel = 0;
-            cell.powerDisplay.textContent = '';
-            cell.timerDisplay.textContent = '';
-            this.updatePower();
-        }
-        toggleTorch(cell) {
-            cell.powered = !cell.powered;
-            cell.powerLevel = cell.powered ? 15 : 0;
-            this.updatePower();
-        }
-        adjustTimer(cell) {
-            cell.timerInterval = (cell.timerInterval % 15) + 1;
-            cell.timerDisplay.textContent = `${cell.timerInterval}s`;
-        }
-        placeComponent(x, y) {
-            const cell = this.grid[`${x},${y}`];
-            if(cell.type === this.selectedTool) return;
-            cell.element.className = 'cell';
-            cell.element.classList.add(this.selectedTool);
-            cell.type = this.selectedTool;
-            if(this.selectedTool === 'torch') {
-                cell.powered = true;
-                cell.powerLevel = 15;
-                cell.element.classList.add('powered');
-            } else if(this.selectedTool === 'spreader') {
                 cell.powered = false;
                 cell.powerLevel = 0;
             }
-            if(this.selectedTool === 'timer') {
-                cell.timerInterval = 1;
-                cell.timerDisplay.textContent = '1s';
-                this.timers.add(`${x},${y}`);
             }
-            this.updatePower();
-        }
-        updatePower() {
-            if(this.isPaused) return;
-            Object.values(this.grid).forEach(cell => {
-                if(cell.type && !['torch', 'timer'].includes(cell.type)) {
                     cell.powered = false;
                     cell.powerLevel = 0;
-                    cell.element.classList.remove('powered');
                 }
-            });
-            for(let i = 15; i > 0; i--) {
-                Object.entries(this.grid).forEach(([coord, cell]) => {
-                    if(!cell.powered) return;
-                    const [x, y] = coord.split(',').map(Number);
-                    if(cell.type === 'wire') {
-                        this.powerNearby(x, y, cell.powerLevel - 1);
-                    } else if(['torch', 'timer'].includes(cell.type)) {
-                        this.powerNearby(x, y, 15);
-                    } else if(cell.type === 'spreader' && cell.powered) {
-                        this.spreadPower(x, y);
                     }
                 });
-            }
-            Object.values(this.grid).forEach(cell => {
-                if(cell.powerLevel > 0) {
-                    cell.element.classList.add('powered');
-                    cell.element.dataset.power = cell.powerLevel;
-                    cell.powerDisplay.textContent = cell.powerLevel;
-                } else {
-                    cell.element.classList.remove('powered');
-                    delete cell.element.dataset.power;
-                    cell.powerDisplay.textContent = '';
                 }
-            });
-        }
-        powerNearby(x, y, power) {
-            if(power <= 0) return;
-            [[x+1,y], [x-1,y], [x,y+1], [x,y-1]].forEach(([nx, ny]) => {
-                const neighbor = this.grid[`${nx},${ny}`];
-                if(neighbor && neighbor.type && neighbor.type !== 'block' && neighbor.type !== 'timer' && neighbor.type !== 'torch' && power > neighbor.powerLevel) {
-                    neighbor.powered = true;
-                    neighbor.powerLevel = power;
-                }
-            });
-        }
-        spreadPower(x, y) {
-            [[x+1,y], [x-1,y], [x,y+1], [x,y-1]].forEach(([nx, ny]) => {
-                const neighbor = this.grid[`${nx},${ny}`];
-                if(neighbor && neighbor.type && neighbor.type !== 'block' && neighbor.type !== 'timer' && neighbor.type !== 'torch' && neighbor.powerLevel === 0) {
-                    neighbor.powered = true;
-                    neighbor.powerLevel = 15;
-                }
-            });
-        }
-        startGameLoop() {
-            this.gameLoopInterval = setInterval(() => {
-                if(this.isPaused) return;
-                const now = Date.now();
-                this.timers.forEach(coord => {
-                    const cell = this.grid[coord];
-                    if(now - cell.lastUpdate >= cell.timerInterval * 1000) {
-                        cell.powered = !cell.powered;
-                        cell.powerLevel = cell.powered ? 15 : 0;
-                        cell.lastUpdate = now;
-                        this.updatePower();
                     }
                 });
-            }, 50);
         }
-    }
-    new RedstoneSandbox();
-</script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <title>Redstone Sandbox</title>
     <style>
         body {
+            margin: 0;
+            background: #1a1a1a;
+            font-family: 'Segoe UI', sans-serif;
+            overflow: hidden;
+            color: #fff;
         }
         #gameContainer {
+            position: relative;
+            width: 100vw;
+            height: 100vh;
         }
         #grid {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background: rgba(0,0,0,0.3);
+            padding: 2px;
+            border-radius: 8px;
+            box-shadow: 0 0 50px rgba(0,0,0,0.5);
         }
         .cell {
+            width: 40px;
+            height: 40px;
+            border: 1px solid #2a2a2a;
+            position: absolute;
+            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+            border-radius: 6px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 10px;
+            cursor: pointer;
         }
         .toolbar {
+            position: fixed;
+            top: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(20,20,20,0.95);
+            padding: 15px;
+            border-radius: 15px;
+            display: flex;
+            gap: 12px;
+            box-shadow: 0 5px 25px rgba(0,0,0,0.3);
+            z-index: 100;
         }
         .tool {
+            width: 50px;
+            height: 50px;
+            border: 2px solid #444;
+            border-radius: 10px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 22px;
+            background: rgba(255,255,255,0.05);
+            transition: 0.3s;
+            position: relative;
         }
         .tool:hover {
+            transform: translateY(-2px);
+            background: rgba(255,255,255,0.1);
         }
         .tool.active {
+            border-color: #f55;
+            background: rgba(255,85,85,0.2);
+            transform: scale(1.1);
         }
         .button {
+            background: #f55;
+            border: none;
+            border-radius: 8px;
+            color: white;
+            cursor: pointer;
+            font-size: 16px;
+            padding: 10px 20px;
+            transition: 0.3s;
         }
         .button:hover {
+            transform: scale(1.1);
         }
         .button.pause {
+            background: #55f;
         }
         .button.pause.active {
+            background: #f55;
         }
+        .wire {
+            background: #300;
+            transition: background-color 0.3s;
         }
+        .wire.powered {
+            background: #f00;
         }
         .wire[data-power="1"] { background: #400; }
         .wire[data-power="13"] { background: #f11; }
         .wire[data-power="14"] { background: #f22; }
         .wire[data-power="15"] { background: #f33; }
+        .torch {
+            background: #320;
+            box-shadow: 0 0 10px #320;
         }
+        .torch.powered {
+            background: #fa0;
+            box-shadow: 0 0 20px #fa0;
+            animation: torch-glow 1s infinite alternate;
         }
+        .block {
+            background: #444;
+            box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
         }
+        .spreader {
+            background: #030;
+            transition: all 0.3s;
         }
+        .spreader.powered {
+            background: #0f0;
+            box-shadow: 0 0 20px #0f0;
+            animation: spreader-pulse 1s infinite;
         }
+        .lamp {
+            background: #330;
+            transition: all 0.3s;
         }
+        .lamp.powered {
+            background: #ff0;
+            box-shadow: 0 0 30px #ff0;
+            animation: lamp-shine 2s infinite alternate;
         }
+        .timer {
+            background: #303;
+            transition: all 0.3s;
         }
+        .timer.powered {
+            background: #f0f;
+            box-shadow: 0 0 20px #f0f;
         }
         .power-level {
+            position: absolute;
+            top: 2px;
+            right: 2px;
+            font-size: 10px;
+            padding: 2px 4px;
+            background: rgba(0,0,0,0.5);
+            border-radius: 4px;
+            pointer-events: none;
         }
         .timer-value {
+            position: absolute;
+            bottom: 2px;
+            left: 2px;
+            font-size: 10px;
+            color: rgba(255,255,255,0.8);
         }
         @keyframes torch-glow {
+            from { box-shadow: 0 0 10px #fa0; }
+            to { box-shadow: 0 0 30px #fa0; }
         }
         @keyframes spreader-pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.1); }
+            100% { transform: scale(1); }
         }
         @keyframes lamp-shine {
+            from { box-shadow: 0 0 20px #ff0; }
+            to { box-shadow: 0 0 40px #ff0; }
         }
     </style>
 </head>
 <body>
     <div id="gameContainer">
         <div class="toolbar">
             <div class="tool" data-tool="spreader" data-name="Spreader">➕</div>
             <div class="tool" data-tool="lamp" data-name="Lamp">💡</div>
             <div class="tool" data-tool="timer" data-name="Timer">⏲️</div>
+            <button class="button reset">Reset</button>
+            <button class="button pause">Pause</button>
         </div>
+        <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>
     </div>
+    <script>
+        class RedstoneSandbox {
+            constructor() {
+                this.gridSize = 20;
+                this.cellSize = 40;
+                this.grid = {};
+                this.selectedTool = 'wire';
+                this.timers = new Set();
+                this.isPaused = false;
+                this.gameLoopInterval = null;
+                this.init();
+            }
+            init() {
+                this.setupGrid();
+                this.setupTools();
+                this.setupButtons();
+                this.bindEvents();
+                this.startGameLoop();
+            }
+            setupGrid() {
+                const grid = document.getElementById('grid');
+                grid.style.width = `${this.gridSize * this.cellSize + 2}px`;
+                grid.style.height = `${this.gridSize * this.cellSize + 2}px`;
+                for(let y = 0; y < this.gridSize; y++) {
+                    for(let x = 0; x < this.gridSize; x++) {
+                        const cell = document.createElement('div');
+                        cell.className = 'cell';
+                        cell.style.left = `${x * this.cellSize}px`;
+                        cell.style.top = `${y * this.cellSize}px`;
+                        cell.dataset.x = x;
+                        cell.dataset.y = y;
+                        const powerLevel = document.createElement('div');
+                        powerLevel.className = 'power-level';
+                        const timerValue = document.createElement('div');
+                        timerValue.className = 'timer-value';
+                        cell.appendChild(powerLevel);
+                        cell.appendChild(timerValue);
+                        grid.appendChild(cell);
+                        this.grid[`${x},${y}`] = {
+                            element: cell,
+                            powerDisplay: powerLevel,
+                            timerDisplay: timerValue,
+                            type: null,
+                            powered: false,
+                            powerLevel: 0,
+                            timerInterval: 1,
+                            lastUpdate: Date.now()
+                        };
+                    }
                 }
             }
+            setupTools() {
+                const tools = document.querySelectorAll('.tool');
+                tools.forEach(tool => {
+                    tool.addEventListener('click', () => {
+                        tools.forEach(t => t.classList.remove('active'));
+                        tool.classList.add('active');
+                        this.selectedTool = tool.dataset.tool;
+                    });
                 });
+            }
+            setupButtons() {
+                document.querySelector('.reset').addEventListener('click', () => {
+                    Object.values(this.grid).forEach(cell => {
+                        cell.element.className = 'cell';
+                        cell.type = null;
+                        cell.powered = false;
+                        cell.powerLevel = 0;
+                        cell.powerDisplay.textContent = '';
+                        cell.timerDisplay.textContent = '';
+                    });
+                    this.timers.clear();
                 });
+                const pauseBtn = document.querySelector('.pause');
+                pauseBtn.addEventListener('click', () => {
+                    this.isPaused = !this.isPaused;
+                    pauseBtn.classList.toggle('active');
+                    pauseBtn.textContent = this.isPaused ? 'Resume' : 'Pause';
+                });
             }
+            bindEvents() {
+                const grid = document.getElementById('grid');
+                grid.addEventListener('contextmenu', e => {
+                    e.preventDefault();
+                    if(e.target.classList.contains('cell')) {
+                        const x = parseInt(e.target.dataset.x);
+                        const y = parseInt(e.target.dataset.y);
+                        this.deleteComponent(x, y);
+                    }
+                });
+                grid.addEventListener('click', e => {
+                    if(e.target.classList.contains('cell')) {
+                        const x = parseInt(e.target.dataset.x);
+                        const y = parseInt(e.target.dataset.y);
+                        const cell = this.grid[`${x},${y}`];
+                        if(cell.type === 'torch') {
+                            this.toggleTorch(cell);
+                        } else if(cell.type === 'timer') {
+                            this.adjustTimer(cell);
+                        } else {
+                            this.placeComponent(x, y);
+                        }
+                    }
+                });
+            }
+            deleteComponent(x, y) {
+                const cell = this.grid[`${x},${y}`];
+                if(cell.type === 'timer') {
+                    this.timers.delete(`${x},${y}`);
+                }
+                cell.element.className = 'cell';
+                cell.type = null;
                 cell.powered = false;
                 cell.powerLevel = 0;
+                cell.powerDisplay.textContent = '';
+                cell.timerDisplay.textContent = '';
+                this.updatePower();
             }
+            toggleTorch(cell) {
+                cell.powered = !cell.powered;
+                cell.powerLevel = cell.powered ? 15 : 0;
+                this.updatePower();
             }
+            adjustTimer(cell) {
+                cell.timerInterval = (cell.timerInterval % 15) + 1;
+                cell.timerDisplay.textContent = `${cell.timerInterval}s`;
+            }
+            placeComponent(x, y) {
+                const cell = this.grid[`${x},${y}`];
+                if(cell.type === this.selectedTool) return;
+                cell.element.className = 'cell';
+                cell.element.classList.add(this.selectedTool);
+                cell.type = this.selectedTool;
+                if(this.selectedTool === 'torch') {
+                    cell.powered = true;
+                    cell.powerLevel = 15;
+                    cell.element.classList.add('powered');
+                } else if(this.selectedTool === 'spreader') {
                     cell.powered = false;
                     cell.powerLevel = 0;
                 }
+                if(this.selectedTool === 'timer') {
+                    cell.timerInterval = 1;
+                    cell.timerDisplay.textContent = '1s';
+                    this.timers.add(`${x},${y}`);
+                }
+                this.updatePower();
+            }
+            updatePower() {
+                if(this.isPaused) return;
+                Object.values(this.grid).forEach(cell => {
+                    if(cell.type && !['torch', 'timer'].includes(cell.type)) {
+                        cell.powered = false;
+                        cell.powerLevel = 0;
+                        cell.element.classList.remove('powered');
                     }
                 });
+                for(let i = 15; i > 0; i--) {
+                    Object.entries(this.grid).forEach(([coord, cell]) => {
+                        if(!cell.powered) return;
+                        const [x, y] = coord.split(',').map(Number);
+                        if(cell.type === 'wire') {
+                            this.powerNearby(x, y, cell.powerLevel - 1);
+                        } else if(['torch', 'timer'].includes(cell.type)) {
+                            this.powerNearby(x, y, 15);
+                        } else if(cell.type === 'spreader' && cell.powered) {
+                            this.spreadPower(x, y);
+                        }
+                    });
                 }
+                Object.values(this.grid).forEach(cell => {
+                    if(cell.powerLevel > 0) {
+                        cell.element.classList.add('powered');
+                        cell.element.dataset.power = cell.powerLevel;
+                        cell.powerDisplay.textContent = cell.powerLevel;
+                    } else {
+                        cell.element.classList.remove('powered');
+                        delete cell.element.dataset.power;
+                        cell.powerDisplay.textContent = '';
+                    }
+                });
+            }
+            powerNearby(x, y, power) {
+                if(power <= 0) return;
+                [[x+1,y], [x-1,y], [x,y+1], [x,y-1]].forEach(([nx, ny]) => {
+                    const neighbor = this.grid[`${nx},${ny}`];
+                    if(neighbor && neighbor.type && neighbor.type !== 'block' && neighbor.type !== 'timer' && neighbor.type !== 'torch' && power > neighbor.powerLevel) {
+                        neighbor.powered = true;
+                        neighbor.powerLevel = power;
+                    }
+                });
+            }
+            spreadPower(x, y) {
+                [[x+1,y], [x-1,y], [x,y+1], [x,y-1]].forEach(([nx, ny]) => {
+                    const neighbor = this.grid[`${nx},${ny}`];
+                    if(neighbor && neighbor.type && neighbor.type !== 'block' && neighbor.type !== 'timer' && neighbor.type !== 'torch' && neighbor.powerLevel === 0) {
+                        neighbor.powered = true;
+                        neighbor.powerLevel = 15;
                     }
                 });
+            }
+            startGameLoop() {
+                this.gameLoopInterval = setInterval(() => {
+                    if(this.isPaused) return;
+                    const now = Date.now();
+                    this.timers.forEach(coord => {
+                        const cell = this.grid[coord];
+                        if(now - cell.lastUpdate >= cell.timerInterval * 1000) {
+                            cell.powered = !cell.powered;
+                            cell.powerLevel = cell.powered ? 15 : 0;
+                            cell.lastUpdate = now;
+                            this.updatePower();
+                        }
+                    });
+                }, 50);
+            }
         }
+        new RedstoneSandbox();
+    </script>
 </body>
 </html>