Hugging Face's logo

Spaces:
yomir
/
Redstone-Sandbox
Running

App Files Community
vip3 commited on
Commit
d9373ae
·
verified ·
1 Parent(s): 5204199

Update index.html

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