Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <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="2"] { background: #500; } | |
| .wire[data-power="3"] { background: #600; } | |
| .wire[data-power="4"] { background: #700; } | |
| .wire[data-power="5"] { background: #800; } | |
| .wire[data-power="6"] { background: #900; } | |
| .wire[data-power="7"] { background: #a00; } | |
| .wire[data-power="8"] { background: #b00; } | |
| .wire[data-power="9"] { background: #c00; } | |
| .wire[data-power="10"] { background: #d00; } | |
| .wire[data-power="11"] { background: #e00; } | |
| .wire[data-power="12"] { background: #f00; } | |
| .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 active" data-tool="wire" data-name="Wire">⚡</div> | |
| <div class="tool" data-tool="torch" data-name="Torch">🔥</div> | |
| <div class="tool" data-tool="block" data-name="Block">⬛</div> | |
| <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> |