···
···
378
+
position: relative;
379
+
background: #1e1e2e;
382
+
position: absolute;
384
+
border-radius: 50%;
386
+
clip-path: circle(50% at 50% 50%);
390
+
position: absolute;
395
+
background: linear-gradient(to top, #a6e3a1, #a6e3a1cc);
396
+
height: var(--fill-height, 0%);
397
+
transition: height 0.3s ease;
399
+
border-radius: 0 0 50% 50%;
402
+
position: relative;
379
-
background: #1e1e2e;
409
+
.light.off::before {
413
+
border-radius: 0 0 50% 50%;
383
-
background: #a6e3a1;
385
-
box-shadow: 0 0 10px #a6e3a1;
417
+
box-shadow: 0 0 20px #a6e3a1, 0 0 30px #a6e3a180 !important;
420
+
.light.on::before {
424
+
border-radius: 50%;
···
// Part 1: Indicator lights
machine.target.forEach((target, i) => {
const light = document.createElement('div');
520
-
light.className = \`light \${currentState[i] ? 'on' : 'off'} \${target ? 'target' : ''}\`;
521
-
light.textContent = i;
559
+
const isOn = currentState[i];
560
+
light.className = \`light \${isOn ? 'on' : 'off'} \${target ? 'target' : ''}\`;
561
+
light.style.setProperty('--fill-height', isOn ? '100%' : '0%');
562
+
const label = document.createElement('div');
563
+
label.textContent = i;
564
+
light.appendChild(label);
lightsDiv.appendChild(light);
525
-
// Part 2: Joltage counters
568
+
// Part 2: Joltage counters with fill animation
machine.joltages.forEach((target, i) => {
const counter = document.createElement('div');
const current = currentState[i] || 0;
529
-
const isTarget = current === target;
572
+
const isTarget = current >= target;
573
+
const fillPercent = target > 0 ? Math.min(100, (current / target) * 100) : 0;
counter.className = \`light \${isTarget ? 'on' : 'off'} \${true ? 'target' : ''}\`;
531
-
counter.innerHTML = \`<div style="font-size: 7px; opacity: 0.7;">[\${i}]</div><div style="font-size: 10px; font-weight: bold;">\${current}/<span style="color: #f9e2af;">\${target}</span></div>\`;
576
+
counter.style.setProperty('--fill-height', \`\${fillPercent}%\`);
578
+
const indexLabel = document.createElement('div');
579
+
indexLabel.style.fontSize = '7px';
580
+
indexLabel.style.opacity = '0.7';
581
+
indexLabel.textContent = \`[\${i}]\`;
583
+
const valueLabel = document.createElement('div');
584
+
valueLabel.style.fontSize = '10px';
585
+
valueLabel.style.fontWeight = 'bold';
586
+
valueLabel.innerHTML = \`\${current}/<span style="color: #f9e2af;">\${target}</span>\`;
588
+
counter.appendChild(indexLabel);
589
+
counter.appendChild(valueLabel);
lightsDiv.appendChild(counter);
···
874
-
// Current machine done, move to next immediately
932
+
// Current machine done, move to next with a brief pause
if (currentMachineIndex < machines.length - 1) {
877
-
currentMachineIndex++;
879
-
setTimeout(animateSolution, animationSpeed);
935
+
// Add delay between machines (3x the normal animation speed)
937
+
currentMachineIndex++;
939
+
setTimeout(animateSolution, animationSpeed);
940
+
}, animationSpeed * 3);
dunkirk.sh