@extends('layouts.app')
@section('title', 'Würfel & Münze – Online Würfelrechner | kotsch.tech')
@section('meta_description', 'Online Würfeln: W4, W6, W8, W10, W12, W20, W100 – einzeln oder mehrfach. Münze werfen, Zufallsauswahl aus Liste. Statistiken und Verlauf.')
@section('meta_extra')
<meta name="keywords" content="Online Würfeln, Würfel W6, W20, D20, Münze werfen, Kopf oder Zahl, Würfelrechner, virtueller Würfel">
@endsection
@section('content')
@include('tools._tool_base')
<style>
.dice-emoji { font-size:3.5rem; display:inline-block; }
.dice-emoji.spin { animation:dice-spin 0.4s ease-out; }
@keyframes dice-spin { 0%{transform:rotate(0deg) scale(0.8)} 50%{transform:rotate(180deg) scale(1.2)} 100%{transform:rotate(360deg) scale(1)} }
.die-chip { padding:6px 14px; border-radius:999px; background:var(--accent-soft); border:1px solid var(--accent); font-weight:800; font-size:0.9rem; color:var(--ink); font-variant-numeric:tabular-nums; display:inline-block; margin:3px; }
.hist-row { display:flex; justify-content:space-between; padding:8px 12px; border-radius:var(--radius-sm); font-size:0.85rem; font-weight:600; margin-bottom:4px; }
.hist-row:nth-child(odd) { background:var(--bg); }
.coin-wrap { width:120px; height:120px; perspective:600px; margin:12px auto; }
.coin { width:120px; height:120px; border-radius:50%; background:linear-gradient(135deg,#fde68a,#f59e0b); display:flex; align-items:center; justify-content:center; font-size:3rem; font-weight:900; box-shadow:0 8px 32px -8px rgba(202,138,4,0.4); border:4px solid #d97706; transition:transform 0.6s ease; }
.coin.flipping { animation:coinflip 0.8s ease; }
@keyframes coinflip { 0%{transform:rotateY(0deg)} 50%{transform:rotateY(900deg)} 100%{transform:rotateY(0deg)} }
.coin-chip { padding:5px 12px; border-radius:999px; font-size:0.82rem; font-weight:800; border:1px solid var(--line); display:inline-block; margin:3px; }
.coin-chip.kopf { background:#fef9c3; border-color:#fde047; color:#78350f; }
.coin-chip.zahl { background:#dbeafe; border-color:#bae6fd; color:#1e40af; }
.mode-tab { padding:8px 14px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--card); font-weight:700; font-size:0.82rem; cursor:pointer; color:var(--muted); transition:all 0.15s; }
.mode-tab.active { border-color:var(--accent); background:var(--accent); color:#fff; }
</style>

<div class="tool-page">
<div class="tool-container">
    <div class="tool-header">
        <span class="t-tag"><i class="fas fa-dice"></i> Zufall</span>
        <h1 class="tool-h1">Würfel &<span>münze.</span></h1>
        <p class="tool-sub">Virtuelle Würfel, Münzwurf, Zufallsauswahl – mit Statistik und Verlauf.</p>
    </div>

    <div class="t-panel">
        <div style="display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px">
            <button class="mode-tab active" onclick="showPane('dice',this)">🎲 Würfeln</button>
            <button class="mode-tab" onclick="showPane('coin',this)">🪙 Münze</button>
            <button class="mode-tab" onclick="showPane('pick',this)">📋 Zufallsauswahl</button>
        </div>

        <!-- Würfel Pane -->
        <div id="pane-dice">
            <div class="t-grid-3" style="gap:12px;margin-bottom:16px">
                <div class="t-field">
                    <label class="t-label">Anzahl Würfel</label>
                    <input type="number" class="t-input" id="dice-count" value="2" min="1" max="20">
                </div>
                <div class="t-field">
                    <label class="t-label">Würfeltyp</label>
                    <select class="t-select" id="dice-type">
                        <option value="4">W4 (1–4)</option>
                        <option value="6" selected>W6 (1–6)</option>
                        <option value="8">W8 (1–8)</option>
                        <option value="10">W10 (1–10)</option>
                        <option value="12">W12 (1–12)</option>
                        <option value="20">W20 (1–20)</option>
                        <option value="100">W100 (1–100)</option>
                    </select>
                </div>
                <div class="t-field">
                    <label class="t-label">Modifikator</label>
                    <input type="number" class="t-input" id="dice-mod" value="0" placeholder="+/-">
                </div>
            </div>
            <button class="t-btn full" onclick="rollDice()"><i class="fas fa-dice"></i> Würfeln!</button>

            <div style="text-align:center;padding:20px 0" id="dice-result-area">
                <span class="dice-emoji" id="dice-emoji">🎲</span>
                <div id="dice-sum-wrap" style="display:none;margin-top:8px">
                    <div style="font-size:3rem;font-weight:900;letter-spacing:-2px;color:var(--accent);font-family:'JetBrains Mono',monospace" id="dice-sum">–</div>
                    <div style="font-size:0.82rem;color:var(--muted);font-weight:700;text-transform:uppercase" id="dice-sum-lbl"></div>
                    <div style="margin-top:8px" id="individual-results"></div>
                </div>
            </div>

            <div style="border-top:1px solid var(--line);padding-top:12px">
                <div class="t-grid-3" style="gap:8px;margin-bottom:12px">
                    <div class="t-stat-card"><div class="t-stat-val" id="stat-total">0</div><div class="t-stat-label">Würfe</div></div>
                    <div class="t-stat-card"><div class="t-stat-val" id="stat-avg">–</div><div class="t-stat-label">Ø Summe</div></div>
                    <div class="t-stat-card"><div class="t-stat-val" id="stat-max">–</div><div class="t-stat-label">Höchste</div></div>
                </div>
                <div style="font-size:0.78rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px">Verlauf (letzte 10)</div>
                <div id="dice-history"></div>
            </div>
        </div>

        <!-- Münze Pane -->
        <div id="pane-coin" style="display:none;text-align:center">
            <div class="coin-wrap"><div class="coin" id="coin">🪙</div></div>
            <div style="font-size:1.4rem;font-weight:900;margin:8px 0;min-height:2rem" id="coin-result"></div>
            <button class="t-btn" onclick="flipCoin()"><i class="fas fa-coins"></i> Münze werfen</button>
            <div class="t-grid-2" style="gap:10px;margin-top:16px">
                <div class="t-stat-card"><div class="t-stat-val" id="coin-kopf">0</div><div class="t-stat-label">Kopf</div></div>
                <div class="t-stat-card"><div class="t-stat-val" id="coin-zahl">0</div><div class="t-stat-label">Zahl</div></div>
            </div>
            <div style="margin-top:12px;display:flex;flex-wrap:wrap;justify-content:center;gap:4px" id="coin-hist"></div>
            <button class="t-btn ghost sm" onclick="coinKopf=0;coinZahl=0;coinHistory=[];renderCoinHistory()" style="margin-top:8px"><i class="fas fa-trash"></i> Reset</button>
        </div>

        <!-- Zufallsauswahl Pane -->
        <div id="pane-pick" style="display:none">
            <div class="t-field" style="margin-bottom:12px">
                <label class="t-label">Optionen (eine pro Zeile)</label>
                <textarea class="t-textarea" id="pick-list" style="min-height:120px;font-family:'JetBrains Mono',monospace" placeholder="Option 1&#10;Option 2&#10;Option 3">Option 1
Option 2
Option 3
Option 4
Option 5</textarea>
            </div>
            <div class="t-grid-2" style="gap:10px;margin-bottom:12px">
                <div class="t-field">
                    <label class="t-label">Anzahl auswählen</label>
                    <input type="number" class="t-input" id="pick-count" value="1" min="1">
                </div>
                <div class="t-toggle-row" style="border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 14px">
                    <label for="pick-unique">Keine Duplikate</label>
                    <input type="checkbox" id="pick-unique" class="t-check" checked>
                </div>
            </div>
            <button class="t-btn full" onclick="doPick()"><i class="fas fa-random"></i> Auswählen</button>
            <div id="pick-result" style="margin-top:16px;display:none;padding:16px;background:var(--accent-soft);border:2px solid var(--accent);border-radius:var(--radius-sm)">
                <div style="font-size:0.78rem;font-weight:700;color:var(--accent);margin-bottom:8px">AUSWAHL</div>
                <div id="pick-items" style="font-size:1.1rem;font-weight:700;font-family:'JetBrains Mono',monospace"></div>
            </div>
        </div>
    </div>
</div>
@include('tools._ads_banner')
</div>

<script>
const DICE_EMOJIS = {4:'🔷',6:'🎲',8:'🔶',10:'🔹',12:'🔸',20:'⬡',100:'💯'};
let diceHistory = [];
let rollSums = [];
let coinHistory = [];
let coinKopf = 0, coinZahl = 0;

function showPane(name, btn) {
    ['dice','coin','pick'].forEach(p => document.getElementById('pane-'+p).style.display='none');
    document.getElementById('pane-'+name).style.display='';
    document.querySelectorAll('.mode-tab').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
}

function rollDice() {
    const count = Math.min(20, Math.max(1, parseInt(document.getElementById('dice-count').value)||1));
    const sides = parseInt(document.getElementById('dice-type').value);
    const mod = parseInt(document.getElementById('dice-mod').value)||0;
    const results = Array.from({length:count}, () => Math.floor(Math.random()*sides)+1);
    const rawSum = results.reduce((a,b)=>a+b,0);
    const sum = rawSum + mod;

    const emojiEl = document.getElementById('dice-emoji');
    emojiEl.textContent = DICE_EMOJIS[sides]||'🎲';
    emojiEl.classList.remove('spin');
    void emojiEl.offsetWidth;
    emojiEl.classList.add('spin');
    setTimeout(() => emojiEl.classList.remove('spin'), 400);

    document.getElementById('dice-sum').textContent = sum + (mod!==0 ? ` (${rawSum}${mod>0?'+':'-'}${Math.abs(mod)})` : '');
    document.getElementById('dice-sum-lbl').textContent = count>1 ? `Summe ${count}×W${sides}${mod!==0?(mod>0?'+':'')+mod:''}` : `W${sides} Ergebnis`;
    document.getElementById('dice-sum-wrap').style.display='block';
    document.getElementById('individual-results').innerHTML = count>1 ? results.map(r=>`<span class="die-chip">${r}</span>`).join('') : '';

    const now = new Date().toLocaleTimeString('de-DE',{hour:'2-digit',minute:'2-digit',second:'2-digit'});
    diceHistory.unshift({count,sides,results,sum,mod,time:now});
    if (diceHistory.length>10) diceHistory.pop();
    rollSums.push(sum);
    renderDiceHistory();
    updateDiceStats();
}

function renderDiceHistory() {
    document.getElementById('dice-history').innerHTML = diceHistory.length
        ? diceHistory.map(h=>`<div class="hist-row"><span>${h.count}×W${h.sides}${h.mod!==0?(h.mod>0?'+':'')+h.mod:''} → <strong style="color:var(--accent)">${h.sum}</strong>${h.count>1?' ['+h.results.join(', ')+']':''}</span><span style="color:var(--muted);font-size:0.78rem">${h.time}</span></div>`).join('')
        : '<div style="color:var(--muted);font-size:0.85rem;padding:8px">Noch keine Würfe.</div>';
}

function updateDiceStats() {
    document.getElementById('stat-total').textContent = rollSums.length;
    document.getElementById('stat-avg').textContent = rollSums.length ? (rollSums.reduce((a,b)=>a+b,0)/rollSums.length).toFixed(1) : '–';
    document.getElementById('stat-max').textContent = rollSums.length ? Math.max(...rollSums) : '–';
}

function flipCoin() {
    const coin = document.getElementById('coin');
    const isKopf = Math.random() < 0.5;
    coin.classList.remove('flipping');
    void coin.offsetWidth;
    coin.classList.add('flipping');
    setTimeout(() => {
        coin.classList.remove('flipping');
        if (isKopf) { coin.textContent='👑'; document.getElementById('coin-result').textContent='👑 Kopf!'; coinKopf++; }
        else { coin.textContent='⭐'; document.getElementById('coin-result').textContent='⭐ Zahl!'; coinZahl++; }
        coinHistory.unshift(isKopf?'kopf':'zahl');
        if (coinHistory.length>30) coinHistory.pop();
        renderCoinHistory();
    }, 800);
}

function renderCoinHistory() {
    document.getElementById('coin-kopf').textContent = coinKopf;
    document.getElementById('coin-zahl').textContent = coinZahl;
    document.getElementById('coin-hist').innerHTML = coinHistory.map(r=>
        `<span class="coin-chip ${r}">${r==='kopf'?'👑 Kopf':'⭐ Zahl'}</span>`).join('');
}

function doPick() {
    const lines = document.getElementById('pick-list').value.split('\n').map(l=>l.trim()).filter(Boolean);
    const count = Math.min(parseInt(document.getElementById('pick-count').value)||1, lines.length);
    const unique = document.getElementById('pick-unique').checked;

    if (!lines.length) return;
    let pool = [...lines];
    const picks = [];
    for (let i=0;i<count;i++) {
        if (!pool.length) break;
        const idx = Math.floor(Math.random()*pool.length);
        picks.push(pool[idx]);
        if (unique) pool.splice(idx,1);
    }
    document.getElementById('pick-items').innerHTML = picks.map((p,i)=>`<div style="padding:4px 0">${i+1}. ${escH(p)}</div>`).join('');
    document.getElementById('pick-result').style.display='';
}

function escH(s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
</script>

@include('tools._seo_content', ['toolSlug' => 'wuerfel', 'toolName' => 'Würfel & Münze'])

@endsection