geograsim/App/assets/js/glossar-experiments-markt.js

/**
 * Glossar-Experimente — Markt & Alltag (kindgerecht).
 * Ergänzt window.GlossarExperiments via Object.assign (Ladereihenfolge egal).
 */
(function () {
  'use strict';
  const NS = 'http://www.w3.org/2000/svg';
  const svgEl = (tag, attrs, parent) => {
    const el = document.createElementNS(NS, tag);
    if (attrs) for (const k in attrs) el.setAttribute(k, attrs[k]);
    if (parent) parent.appendChild(el);
    return el;
  };

  // =====================================================================
  // Angebot & Nachfrage — der Marktplatz mit 10 Äpfeln
  // Preis-Regler: viele Käufer bei niedrigem Preis, wenige bei hohem.
  // Angebot ist fest (10 Äpfel). Wo Käufer = Äpfel, passt der Preis.
  // =====================================================================
  function marktplatz(root) {
    const STOCK = 10; // Angebot: 10 Äpfel am Stand
    root.innerHTML = `
      <div class="ge-wrap">
        <div class="ge-head">
          <h3>🍎 Der Marktplatz</h3>
          <p>Am Stand liegen <strong>10 Äpfel</strong>. Stell den Preis ein und schau,
          wie viele Kinder kaufen wollen. Wo beides zusammenpasst, stimmt der Preis.</p>
        </div>
        <svg class="ge-markt-svg" viewBox="0 0 600 300" preserveAspectRatio="xMidYMid meet" aria-hidden="true"></svg>
        <div class="ge-controls" style="align-items:center;gap:.6rem;flex-wrap:wrap">
          <label style="font-weight:700">Preis pro Apfel:
            <input type="range" class="ge-markt-preis" min="20" max="200" step="10" value="100" style="vertical-align:middle">
          </label>
          <span class="ge-markt-preis-anz" style="font-weight:800"></span>
        </div>
        <div class="ge-gh-pill ge-markt-pill" data-state="now" style="margin-top:.4rem"></div>
        <p class="ge-note">Modellbeispiel: Die Zahl der Käufer:innen sinkt, wenn der Preis
        steigt (Nachfrage). Das Angebot bleibt hier gleich (10 Äpfel). Treffen sich beide,
        ist der Markt im Gleichgewicht – so entsteht in Wirklichkeit der Preis.</p>
      </div>`;

    const svg = root.querySelector('.ge-markt-svg');
    const preis = root.querySelector('.ge-markt-preis');
    const preisAnz = root.querySelector('.ge-markt-preis-anz');
    const pill = root.querySelector('.ge-markt-pill');

    // Nachfrage-Modell: bei 20 ct wollen 18 Kinder, bei 200 ct nur 2.
    const kaeuferBei = (ct) => Math.max(0, Math.round(18 - (ct - 20) / 180 * 16));

    function zeichne() {
      const ct = +preis.value;
      const wollen = kaeuferBei(ct);
      const verkauft = Math.min(wollen, STOCK);
      preisAnz.textContent = (ct / 100).toLocaleString('de-AT', { minimumFractionDigits: 2 }) + ' €';

      while (svg.firstChild) svg.removeChild(svg.firstChild);
      // Stand oben: 10 Apfel-Plätze, verkaufte ausgegraut
      svgEl('text', { x: 20, y: 28, 'font-size': 15, 'font-weight': 700, fill: '#2f4f3a' }, svg).textContent = 'Angebot: 10 Äpfel';
      for (let i = 0; i < STOCK; i++) {
        const x = 26 + i * 34, y = 45;
        const sold = i < verkauft;
        svgEl('circle', { cx: x + 12, cy: y + 12, r: 12, fill: sold ? '#d9d3c0' : '#c0392b', stroke: '#2f4f3a', 'stroke-width': 1.5 }, svg);
        if (!sold) svgEl('rect', { x: x + 10, y: y - 2, width: 4, height: 6, fill: '#4a7c4e' }, svg);
      }
      // Käufer unten: Figuren, die kaufen wollen
      svgEl('text', { x: 20, y: 138, 'font-size': 15, 'font-weight': 700, fill: '#2f4f3a' }, svg).textContent = 'Wollen kaufen: ' + wollen + ' Kinder';
      for (let i = 0; i < wollen; i++) {
        const x = 26 + (i % 10) * 34, y = 155 + Math.floor(i / 10) * 46;
        const leer = i >= STOCK; // gehen leer aus
        svgEl('circle', { cx: x + 12, cy: y + 8, r: 7, fill: leer ? '#c98a3a' : '#4a7c8a' }, svg);
        svgEl('rect', { x: x + 6, y: y + 16, width: 12, height: 16, rx: 4, fill: leer ? '#c98a3a' : '#4a7c8a' }, svg);
      }

      let state, txt;
      if (wollen > STOCK) { state = 'now'; txt = '📈 Zu billig: ' + (wollen - STOCK) + ' Kinder gehen leer aus. Es wollen mehr kaufen, als es Äpfel gibt → der Preis steigt.'; }
      else if (wollen < STOCK) { state = 'now'; txt = '📉 Zu teuer: ' + (STOCK - wollen) + ' Äpfel bleiben liegen. Es gibt mehr Äpfel als Käufer → der Preis sinkt.'; }
      else { state = 'good'; txt = '🎯 Genau richtig! 10 Käufer für 10 Äpfel. Angebot und Nachfrage sind im Gleichgewicht.'; }
      pill.dataset.state = state;
      pill.textContent = txt;
    }
    preis.addEventListener('input', zeichne);
    zeichne();
  }

  window.GlossarExperiments = Object.assign(window.GlossarExperiments || {}, {
    'angebot-nachfrage': marktplatz
  });
})();