feat: Laborassistent hinzugefügt
This commit is contained in:
parent
321de38def
commit
f14337096a
238
app.js
238
app.js
@ -46,6 +46,7 @@ let discoveredMolecules = new Set(JSON.parse(localStorage.getItem('chem_lab_disc
|
||||
let currentLevelIndex = parseInt(localStorage.getItem('chem_lab_story_level') || '0');
|
||||
let completedLevels = JSON.parse(localStorage.getItem('chem_lab_story_completed') || '[]');
|
||||
let currentAllowedAtoms = [];
|
||||
let playerEnergy = parseInt(localStorage.getItem('chem_lab_energy') || '0');
|
||||
|
||||
// Elemente Datenbank für Spawnen (Symbole, Farben, Namen)
|
||||
const elementDetails = {
|
||||
@ -430,6 +431,36 @@ clearDeskBtn.addEventListener('click', () => {
|
||||
document.getElementById('reactor-synth-btn').addEventListener('click', synthesizeReactor);
|
||||
document.getElementById('reactor-decompose-btn').addEventListener('click', decomposeReactor);
|
||||
|
||||
// Machine Toggles in Reaktor Box
|
||||
const heatToggle = document.getElementById('reactor-heat-toggle');
|
||||
const elecToggle = document.getElementById('reactor-elec-toggle');
|
||||
|
||||
if (heatToggle) {
|
||||
heatToggle.addEventListener('change', () => {
|
||||
if (heatToggle.checked) {
|
||||
setAssistantText("Brenner gezündet! 🔥 Hitze liefert die nötige Aktivierungsenergie, um reaktionsträge Dreifachbindungen anzuregen.");
|
||||
} else {
|
||||
setAssistantText("Brenner aus. Der Reaktor kühlt langsam ab.");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (elecToggle) {
|
||||
elecToggle.addEventListener('change', () => {
|
||||
if (elecToggle.checked) {
|
||||
setAssistantText("Strom ein! ⚡ Die Elektrolyse zwingt Elektronen auf Bahnen und spaltet selbst extrem stabile Moleküle.");
|
||||
} else {
|
||||
setAssistantText("Strom aus. Die Ionenbewegung normalisiert sich.");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Particle Accelerator fire event
|
||||
const accFireBtn = document.getElementById('acc-fire-btn');
|
||||
if (accFireBtn) {
|
||||
accFireBtn.addEventListener('click', fireAccelerator);
|
||||
}
|
||||
|
||||
// =========================================
|
||||
// MODALS LOGIC
|
||||
// =========================================
|
||||
@ -700,12 +731,39 @@ function ejectMoleculeFromReactor(idx) {
|
||||
}
|
||||
}
|
||||
|
||||
function analyzeFailedSynthesis() {
|
||||
const counts = {};
|
||||
reactorAtoms.forEach(sym => {
|
||||
counts[sym] = (counts[sym] || 0) + 1;
|
||||
});
|
||||
|
||||
if (counts['N'] && counts['H'] && counts['H'] && counts['H'] !== 3) {
|
||||
setAssistantText("Achtung! Stickstoff (N) benötigt genau 3 Wasserstoff-Atome (H) für Ammoniak (NH₃). Deine Mischung lässt freie Valenzen ungesättigt. Füge noch ein H hinzu!", true);
|
||||
} else if (counts['H'] === 1 && counts['O'] === 1) {
|
||||
setAssistantText("Wasserstoff (H) und Sauerstoff (O) können nicht im Verhältnis 1:1 binden. Sie brauchen entweder 2x H und 1x O für Wasser (H₂O) oder 2x H und 2x O für Wasserstoffperoxid (H₂O₂).", true);
|
||||
} else if (counts['C'] && counts['O'] && counts['C'] === 1 && counts['O'] !== 1 && counts['O'] !== 2) {
|
||||
setAssistantText("Kohlenstoff (C) bindet sich mit Sauerstoff (O) entweder zu Kohlenmonoxid (CO, 1:1) oder Kohlendioxid (CO₂, 1:2). Passe dein Verhältnis an!", true);
|
||||
} else {
|
||||
setAssistantText("Diese Atome können sich nicht zu einem stabilen Molekül verbinden. Achte auf die Oktettregel und die Wertigkeiten (H=1, O=2, N=3, C=4, Na=1, Cl=1)!", true);
|
||||
}
|
||||
}
|
||||
|
||||
function synthesizeReactor() {
|
||||
if (reactorAtoms.length === 0) {
|
||||
alert("Der Reaktor enthält keine freien Atome für die Synthese!");
|
||||
return;
|
||||
}
|
||||
|
||||
const hasNitrogen = reactorAtoms.includes('N');
|
||||
const heatOn = document.getElementById('reactor-heat-toggle').checked;
|
||||
const elecOn = document.getElementById('reactor-elec-toggle').checked;
|
||||
|
||||
if (hasNitrogen && !heatOn && !elecOn) {
|
||||
setAssistantText("Halt! Stickstoff (N) ist extrem reaktionsträge aufgrund seiner starken Dreifachbindung! Um ihn zur Reaktion zu bringen, benötigst du zusätzliche Aktivierungsenergie. Schalte die Brenner-Station (Hitze) oder die Elektrolyse-Kammer (Strom) hinzu!", true);
|
||||
alert("Synthese blockiert: Aktivierungsenergie fehlt für Stickstoff!");
|
||||
return;
|
||||
}
|
||||
|
||||
// Sort recipes by ingredient length descending so we build larger molecules first
|
||||
const sortedRecipes = [...recipes].sort((a, b) => b.ingredients.length - a.ingredients.length);
|
||||
|
||||
@ -749,6 +807,11 @@ function synthesizeReactor() {
|
||||
const ry = parseFloat(reactorBox.style.top || (workspace.clientHeight - 190)) + Math.random() * 40;
|
||||
createMolecule(recipe, Math.max(10, rx), Math.max(10, ry));
|
||||
|
||||
// Award energy
|
||||
const energyAwarded = recipe.ingredients.length * 15;
|
||||
playerEnergy += energyAwarded;
|
||||
localStorage.setItem('chem_lab_energy', playerEnergy);
|
||||
|
||||
// Explosion at the reactor center
|
||||
const rect = reactorBox.getBoundingClientRect();
|
||||
const workspaceRect = workspace.getBoundingClientRect();
|
||||
@ -774,6 +837,9 @@ function synthesizeReactor() {
|
||||
|
||||
showModal(recipe, isNew);
|
||||
|
||||
const cleanName = recipe.result.substring(recipe.result.indexOf('(') + 1, recipe.result.indexOf(')'));
|
||||
setAssistantText(`Sensationell! Wir haben ${cleanName} synthetisiert und dabei ${energyAwarded} J Energie freigesetzt!`);
|
||||
|
||||
synthesizedAny = true;
|
||||
keepMatching = true;
|
||||
break;
|
||||
@ -784,10 +850,19 @@ function synthesizeReactor() {
|
||||
if (synthesizedAny) {
|
||||
updateReactorUI();
|
||||
} else {
|
||||
alert("Aus den vorhandenen Atomen konnte kein bekanntes Molekül synthetisiert werden!");
|
||||
analyzeFailedSynthesis();
|
||||
}
|
||||
}
|
||||
|
||||
function setAssistantText(text, isWarning = false) {
|
||||
const avatar = document.querySelector('.assistant-avatar');
|
||||
const textEl = document.getElementById('assistant-text');
|
||||
if (!avatar || !textEl) return;
|
||||
|
||||
avatar.innerText = isWarning ? "⚠️" : "🔬";
|
||||
textEl.innerText = text;
|
||||
}
|
||||
|
||||
function decomposeReactor() {
|
||||
if (reactorMolecules.length === 0) {
|
||||
alert("Es befinden sich keine Moleküle in der Reaktor-Box, die zerlegt werden können!");
|
||||
@ -970,11 +1045,33 @@ function renderDiscoveryBook() {
|
||||
discoveryProgress.innerText = `${count}/${recipes.length}`;
|
||||
}
|
||||
|
||||
function checkPhysicsUnlock() {
|
||||
const physicsBtn = document.getElementById('tab-physics-btn');
|
||||
if (!physicsBtn) return;
|
||||
if (playerEnergy >= 150) {
|
||||
physicsBtn.classList.remove('locked');
|
||||
physicsBtn.disabled = false;
|
||||
physicsBtn.title = "Klicke, um den Teilchenbeschleuniger zu öffnen!";
|
||||
physicsBtn.innerHTML = "⚛️ Physik";
|
||||
} else {
|
||||
physicsBtn.classList.add('locked');
|
||||
physicsBtn.disabled = true;
|
||||
physicsBtn.innerHTML = `⚛️ Physik 🔒 (${playerEnergy}/150J)`;
|
||||
}
|
||||
}
|
||||
|
||||
function updateStats() {
|
||||
const atoms = elementsOnDesk.filter(el => el.classList.contains('atom')).length;
|
||||
const molecules = elementsOnDesk.filter(el => el.classList.contains('molecule')).length;
|
||||
atomCountEl.innerText = atoms;
|
||||
moleculeCountEl.innerText = molecules;
|
||||
|
||||
const energyCountEl = document.getElementById('energy-count');
|
||||
if (energyCountEl) {
|
||||
energyCountEl.innerText = playerEnergy;
|
||||
}
|
||||
localStorage.setItem('chem_lab_energy', playerEnergy);
|
||||
checkPhysicsUnlock();
|
||||
}
|
||||
|
||||
// =========================================
|
||||
@ -1113,8 +1210,10 @@ function renderBohrModel(electronsArray) {
|
||||
// Dom Tabs switching
|
||||
const tabSandboxBtn = document.getElementById('tab-sandbox-btn');
|
||||
const tabStoryBtn = document.getElementById('tab-story-btn');
|
||||
const tabPhysicsBtn = document.getElementById('tab-physics-btn');
|
||||
const sandboxContentEl = document.getElementById('sandbox-content');
|
||||
const storyContentEl = document.getElementById('story-content');
|
||||
const physicsContentEl = document.getElementById('physics-content');
|
||||
|
||||
tabSandboxBtn.addEventListener('click', () => {
|
||||
switchMode('sandbox');
|
||||
@ -1124,6 +1223,14 @@ tabStoryBtn.addEventListener('click', () => {
|
||||
switchMode('story');
|
||||
});
|
||||
|
||||
if (tabPhysicsBtn) {
|
||||
tabPhysicsBtn.addEventListener('click', () => {
|
||||
if (!tabPhysicsBtn.classList.contains('locked')) {
|
||||
switchMode('physics');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function switchMode(mode) {
|
||||
gameMode = mode;
|
||||
const elementsToRemove = workspace.querySelectorAll('.atom, .molecule');
|
||||
@ -1139,19 +1246,38 @@ function switchMode(mode) {
|
||||
if (mode === 'sandbox') {
|
||||
tabSandboxBtn.classList.add('active');
|
||||
tabStoryBtn.classList.remove('active');
|
||||
if (tabPhysicsBtn) tabPhysicsBtn.classList.remove('active');
|
||||
|
||||
sandboxContentEl.classList.remove('hidden');
|
||||
storyContentEl.classList.add('hidden');
|
||||
if (physicsContentEl) physicsContentEl.classList.add('hidden');
|
||||
|
||||
deskTitle.innerText = "Labor-Tisch (Sandbox)";
|
||||
deskSubtitle.innerText = "Ziehe Atome übereinander, um Reaktionen frei auszulösen!";
|
||||
deskSubtitle.innerText = "Ziehe Atome in die Reaktor-Box, um Reaktionen auszulösen!";
|
||||
currentAllowedAtoms = Object.keys(elementDetails);
|
||||
} else {
|
||||
} else if (mode === 'story') {
|
||||
tabSandboxBtn.classList.remove('active');
|
||||
tabStoryBtn.classList.add('active');
|
||||
if (tabPhysicsBtn) tabPhysicsBtn.classList.remove('active');
|
||||
|
||||
sandboxContentEl.classList.add('hidden');
|
||||
storyContentEl.classList.remove('hidden');
|
||||
if (physicsContentEl) physicsContentEl.classList.add('hidden');
|
||||
|
||||
loadStoryLevel(currentLevelIndex);
|
||||
} else if (mode === 'physics') {
|
||||
tabSandboxBtn.classList.remove('active');
|
||||
tabStoryBtn.classList.remove('active');
|
||||
if (tabPhysicsBtn) tabPhysicsBtn.classList.add('active');
|
||||
|
||||
sandboxContentEl.classList.add('hidden');
|
||||
storyContentEl.classList.add('hidden');
|
||||
if (physicsContentEl) physicsContentEl.classList.remove('hidden');
|
||||
|
||||
deskTitle.innerText = "Labor-Tisch (Kernphysik)";
|
||||
deskSubtitle.innerText = "Teilchenbeschleuniger geladen. Kollidiere Atome, um neue Elemente zu erschaffen!";
|
||||
currentAllowedAtoms = Object.keys(elementDetails);
|
||||
populateAcceleratorDropdowns();
|
||||
}
|
||||
}
|
||||
|
||||
@ -1321,3 +1447,109 @@ storyNextLevelBtn.addEventListener('click', () => {
|
||||
// Zusätzliche Modal Close-Events
|
||||
if (storySuccessCloseIcon) storySuccessCloseIcon.addEventListener('click', closeStorySuccessModal);
|
||||
if (storySuccessOverlay) storySuccessOverlay.addEventListener('click', closeStorySuccessModal);
|
||||
|
||||
function populateAcceleratorDropdowns() {
|
||||
const s1 = document.getElementById('acc-source-1');
|
||||
const s2 = document.getElementById('acc-source-2');
|
||||
if (!s1 || !s2) return;
|
||||
|
||||
s1.innerHTML = '';
|
||||
s2.innerHTML = '';
|
||||
|
||||
const playable = pseElements.filter(el => el.playable);
|
||||
playable.forEach(el => {
|
||||
const opt1 = document.createElement('option');
|
||||
opt1.value = el.symbol;
|
||||
opt1.innerText = `${el.symbol} (${el.name}, Z=${el.number})`;
|
||||
s1.appendChild(opt1);
|
||||
|
||||
const opt2 = document.createElement('option');
|
||||
opt2.value = el.symbol;
|
||||
opt2.innerText = `${el.symbol} (${el.name}, Z=${el.number})`;
|
||||
s2.appendChild(opt2);
|
||||
});
|
||||
}
|
||||
|
||||
function fireAccelerator() {
|
||||
if (playerEnergy < 20) {
|
||||
alert("Nicht genug Energie! Du benötigst mindestens 20 J, um den Teilchenbeschleuniger zu laden.");
|
||||
return;
|
||||
}
|
||||
|
||||
const s1 = document.getElementById('acc-source-1');
|
||||
const s2 = document.getElementById('acc-source-2');
|
||||
if (!s1 || !s2) return;
|
||||
|
||||
const sym1 = s1.value;
|
||||
const sym2 = s2.value;
|
||||
|
||||
const el1 = pseElements.find(e => e.symbol === sym1);
|
||||
const el2 = pseElements.find(e => e.symbol === sym2);
|
||||
if (!el1 || !el2) return;
|
||||
|
||||
// Cost
|
||||
playerEnergy -= 20;
|
||||
updateStats();
|
||||
|
||||
// Animate
|
||||
const animZone = document.getElementById('acc-animation-zone');
|
||||
const fireBtn = document.getElementById('acc-fire-btn');
|
||||
const resultBox = document.getElementById('acc-result-box');
|
||||
|
||||
if (animZone) animZone.classList.add('firing');
|
||||
if (resultBox) resultBox.classList.add('hidden');
|
||||
if (fireBtn) fireBtn.disabled = true;
|
||||
|
||||
// Set labels
|
||||
const p1 = document.getElementById('acc-particle-1');
|
||||
const p2 = document.getElementById('acc-particle-2');
|
||||
if (p1) p1.innerText = el1.symbol;
|
||||
if (p2) p2.innerText = el2.symbol;
|
||||
|
||||
setTimeout(() => {
|
||||
if (animZone) animZone.classList.remove('firing');
|
||||
if (fireBtn) fireBtn.disabled = false;
|
||||
|
||||
const totalZ = el1.number + el2.number;
|
||||
const resultEl = pseElements.find(e => e.number === totalZ);
|
||||
|
||||
if (resultBox) resultBox.classList.remove('hidden');
|
||||
|
||||
const resSymbolEl = document.getElementById('acc-result-element');
|
||||
const resDescEl = document.getElementById('acc-result-desc');
|
||||
|
||||
if (resultEl) {
|
||||
// SUCCESS!
|
||||
resultBox.classList.remove('decayed');
|
||||
if (resSymbolEl) {
|
||||
resSymbolEl.innerText = resultEl.symbol;
|
||||
resSymbolEl.className = 'acc-result-circle';
|
||||
resSymbolEl.style.backgroundColor = getElementColor(resultEl.symbol);
|
||||
}
|
||||
if (resDescEl) {
|
||||
resDescEl.innerText = `Kernfusion erfolgreich! Du hast ${resultEl.name} (Ordnungszahl ${totalZ}) erschaffen.`;
|
||||
}
|
||||
|
||||
// Spawn on desk!
|
||||
spawnAtom(resultEl.symbol, getElementColor(resultEl.symbol));
|
||||
} else {
|
||||
// DECAY!
|
||||
resultBox.classList.add('decayed');
|
||||
if (resSymbolEl) {
|
||||
resSymbolEl.innerText = "💥";
|
||||
resSymbolEl.style.backgroundColor = "#e74c3c";
|
||||
}
|
||||
if (resDescEl) {
|
||||
resDescEl.innerText = `Instabiler Kern! Das Element mit Ordnungszahl ${totalZ} ist sofort in leichtere Trümmer-Isotope zerfallen.`;
|
||||
}
|
||||
|
||||
// Spawn random lighter elements as debris
|
||||
const count = 2 + Math.floor(Math.random() * 2);
|
||||
for (let i = 0; i < count; i++) {
|
||||
const randomLight = pseElements.filter(e => e.playable && e.number < 20);
|
||||
const randomEl = randomLight[Math.floor(Math.random() * randomLight.length)];
|
||||
spawnAtom(randomEl.symbol, getElementColor(randomEl.symbol));
|
||||
}
|
||||
}
|
||||
}, 800);
|
||||
}
|
||||
|
||||
58
index.html
58
index.html
@ -16,6 +16,7 @@
|
||||
<div class="sidebar-tabs">
|
||||
<button id="tab-sandbox-btn" class="tab-btn active">🧪 Sandbox</button>
|
||||
<button id="tab-story-btn" class="tab-btn">🏆 Story</button>
|
||||
<button id="tab-physics-btn" class="tab-btn locked" title="Sammle 150 J Energie durch Synthesen, um die Kernphysik freizuschalten!" disabled>⚛️ Physik 🔒</button>
|
||||
</div>
|
||||
|
||||
<!-- SANDBOX CONTENT -->
|
||||
@ -86,6 +87,43 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PHYSICS CONTENT (Locked by default) -->
|
||||
<div id="physics-content" class="tab-content hidden">
|
||||
<div id="physics-panel">
|
||||
<h3>⚛️ Teilchenbeschleuniger</h3>
|
||||
<p class="physics-desc">Kollidiere zwei Atome bei Lichtgeschwindigkeit, um neue schwere Elemente oder Isotope zu fusionieren!</p>
|
||||
|
||||
<div class="accelerator-controls">
|
||||
<div class="target-select-box">
|
||||
<label>Projektil-Atom (A):</label>
|
||||
<select id="acc-source-1" class="acc-select">
|
||||
<!-- Dynamisch befüllt -->
|
||||
</select>
|
||||
</div>
|
||||
<div class="target-select-box">
|
||||
<label>Target-Atom (B):</label>
|
||||
<select id="acc-source-2" class="acc-select">
|
||||
<!-- Dynamisch befüllt -->
|
||||
</select>
|
||||
</div>
|
||||
<button id="acc-fire-btn" class="acc-btn">⚡ Kollision starten (Kosten: 20 J)</button>
|
||||
</div>
|
||||
|
||||
<div id="acc-animation-zone">
|
||||
<div class="acc-ring">
|
||||
<div id="acc-particle-1" class="acc-particle">A</div>
|
||||
<div id="acc-particle-2" class="acc-particle">B</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="acc-result-box" class="hidden">
|
||||
<h4>Kollisions-Ergebnis:</h4>
|
||||
<div id="acc-result-element">He</div>
|
||||
<p id="acc-result-desc">Kernfusion erfolgreich!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="lab-desk">
|
||||
@ -96,7 +134,7 @@
|
||||
</div>
|
||||
<div class="desk-controls">
|
||||
<div id="stats">
|
||||
Atome: <span id="atom-count">0</span> | Moleküle: <span id="molecule-count">0</span>
|
||||
⚡ Energie: <span id="energy-count">0</span> J | Atome: <span id="atom-count">0</span> | Moleküle: <span id="molecule-count">0</span>
|
||||
</div>
|
||||
<button id="pse-toggle-btn" class="control-btn">📊 Periodensystem</button>
|
||||
<button id="clear-desk-btn" class="control-btn danger">🧹 Tisch leeren</button>
|
||||
@ -108,10 +146,28 @@
|
||||
<div class="reactor-header">
|
||||
<h3>☢️ Reaktor-Box</h3>
|
||||
</div>
|
||||
<!-- ASSISTENT -->
|
||||
<div class="reactor-assistant">
|
||||
<div class="assistant-avatar">🔬</div>
|
||||
<div class="assistant-bubble">
|
||||
<p id="assistant-text">Hallo! Ich bin dein Labor-Assistent. Ziehe Atome in die Box, schalte bei Bedarf Brenner oder Elektrolyse ein und klicke auf Synthetisieren!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="reactor-body">
|
||||
<div id="reactor-contents-summary">
|
||||
<span class="empty-text">Atome/Moleküle hierher ziehen!</span>
|
||||
</div>
|
||||
<!-- MASCHINEN -->
|
||||
<div class="reactor-machines">
|
||||
<label class="machine-switch">
|
||||
<input type="checkbox" id="reactor-heat-toggle">
|
||||
<span class="slider" id="slider-heat">🔥 Brenner</span>
|
||||
</label>
|
||||
<label class="machine-switch">
|
||||
<input type="checkbox" id="reactor-elec-toggle">
|
||||
<span class="slider" id="slider-elec">⚡ Elektrolyse</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="reactor-buttons">
|
||||
<button id="reactor-synth-btn" class="reactor-btn">✨ Synthetisieren</button>
|
||||
<button id="reactor-decompose-btn" class="reactor-btn secondary">💔 Zerlegen</button>
|
||||
|
||||
298
style.css
298
style.css
@ -1177,3 +1177,301 @@ body {
|
||||
font-style: italic;
|
||||
color: #7f8c8d;
|
||||
}
|
||||
|
||||
/* KI-LABORASSISTENT */
|
||||
.reactor-assistant {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
border: 1px solid var(--border-color);
|
||||
margin-top: 5px;
|
||||
box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.assistant-avatar {
|
||||
font-size: 1.8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
animation: pulse-avatar 2s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes pulse-avatar {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.1); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
.assistant-bubble {
|
||||
flex-grow: 1;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.35;
|
||||
color: #dfe4ea;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.assistant-bubble p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* REAKTOR-MASCHINEN */
|
||||
.reactor-machines {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.machine-switch {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.machine-switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.machine-switch .slider {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #57606f;
|
||||
transition: .2s;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.machine-switch input:checked + #slider-heat {
|
||||
background-color: #e67e22;
|
||||
box-shadow: 0 0 12px rgba(230, 126, 34, 0.6);
|
||||
border-color: #f39c12;
|
||||
}
|
||||
|
||||
.machine-switch input:checked + #slider-elec {
|
||||
background-color: #9b59b6;
|
||||
box-shadow: 0 0 12px rgba(155, 89, 182, 0.6);
|
||||
border-color: #8e44ad;
|
||||
}
|
||||
|
||||
/* KERNPHYSIK / TEILCHENBESCHLEUNIGER STYLES */
|
||||
.tab-btn.locked {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.tab-btn.locked:hover {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
#physics-panel {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
#physics-panel h3 {
|
||||
font-size: 1.1rem;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.physics-desc {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.4;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.accelerator-controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
background: rgba(0,0,0,0.2);
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.target-select-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.target-select-box label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.pse-legend {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 15px;
|
||||
padding: 10px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.acc-select {
|
||||
background: #2f3542;
|
||||
border: 1px solid var(--border-color);
|
||||
color: #fff;
|
||||
padding: 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.acc-btn {
|
||||
background: #e74c3c;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 10px;
|
||||
border-radius: 6px;
|
||||
font-weight: bold;
|
||||
font-size: 0.85rem;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.15);
|
||||
transition: background 0.15s, transform 0.1s;
|
||||
}
|
||||
|
||||
.acc-btn:hover {
|
||||
background: #c0392b;
|
||||
}
|
||||
|
||||
.acc-btn:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
#acc-animation-zone {
|
||||
height: 100px;
|
||||
background: #111;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border-color);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.acc-ring {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border: 2px dashed rgba(231, 76, 60, 0.3);
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.acc-particle {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: #3498db;
|
||||
color: #fff;
|
||||
font-size: 0.7rem;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
box-shadow: 0 0 8px #3498db;
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
#acc-particle-1 {
|
||||
left: -12px;
|
||||
top: calc(50% - 12px);
|
||||
background: #e74c3c;
|
||||
box-shadow: 0 0 8px #e74c3c;
|
||||
}
|
||||
|
||||
#acc-particle-2 {
|
||||
right: -12px;
|
||||
top: calc(50% - 12px);
|
||||
background: #2ecc71;
|
||||
box-shadow: 0 0 8px #2ecc71;
|
||||
}
|
||||
|
||||
/* Animations for firing */
|
||||
@keyframes fire-left {
|
||||
0% { left: -12px; }
|
||||
100% { left: calc(50% - 12px); }
|
||||
}
|
||||
|
||||
@keyframes fire-right {
|
||||
0% { right: -12px; }
|
||||
100% { right: calc(50% - 12px); }
|
||||
}
|
||||
|
||||
.firing #acc-particle-1 {
|
||||
animation: fire-left 0.8s forwards cubic-bezier(0.5, 0, 0.5, 1);
|
||||
}
|
||||
|
||||
.firing #acc-particle-2 {
|
||||
animation: fire-right 0.8s forwards cubic-bezier(0.5, 0, 0.5, 1);
|
||||
}
|
||||
|
||||
#acc-result-box {
|
||||
background: rgba(46, 204, 113, 0.1);
|
||||
border: 1px solid #2ecc71;
|
||||
padding: 12px;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
animation: fade-in 0.3s ease-out;
|
||||
}
|
||||
|
||||
#acc-result-box.decayed {
|
||||
background: rgba(231, 76, 60, 0.1);
|
||||
border-color: #e74c3c;
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
#acc-result-element {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background-color: #ffeaa7;
|
||||
color: #333;
|
||||
font-size: 1.3rem;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2px solid rgba(0,0,0,0.15);
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
#acc-result-desc {
|
||||
font-size: 0.8rem;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user