Duistere verhaalspel

HTML

<div class="container">
  <!-- Achtergrond -->
  <img src="https://i.imgur.com/B8rcEym.png" alt="achtergrond" class="bg">

  <!-- UITLEG TEKSTVAK -->
  <div class="story-box">
    Hi! Het is weer tijd voor een nieuwe competitie. Ik vind het een erg leuk idee dat ik heb bedacht dus ik zal het even uitleggen: Klik op 'Spin' om te draaien aan de woordmachine en dan verschijnt er een locatie, 'wapen' en een personage. Aan de hand hiervan ga je een verhaal schrijven.
    <br><br>
    <b>Eisen</b><br>
    - Er is/gaat iemand dood in je verhaal. Expres of per ongeluk, dat mag je zelf kiezen. <br>
    - De drie woorden moeten in je verhaal voorkomen; het maakt niet uit hoe. Dus de persoon kan de dader zijn, het slachtoffer, een getuige etc. Laat weten welke 3 woorden er gedraaid werden.<br>
    - Zorg dat het verhaal tussen de 100 en 500 woorden bevat. (Dit is vooral een richtlijn)<br>
    - Laat bij je inzending weten of ik het verhaal mag gebruiken (bv voor een blog, FT actie of iets). Als ik je verhaal gebruik zal ik natuurlijk zeggen dat jij 'm hebt bedacht!<br><br>

    <b>Prijzen & deadline</b><br>
    Iedereen die meedoet ontvangt een deel van de set die hiernaast te zien is. Daarnaast krijgen de 5 origineelste verhalen 15 credits. 
    De deadline is <b>zondag 26 oktober 23.59 uur</b>. Je mailt je inzending naar mij, Bluesweater.

    

    <i>Zijn er nog vragen of onduidelijkheden? Laat het weten in de reacties </i><br>
    Veel succes/plezier! <br>

  </div>

  <script type="text/javascript">// <![CDATA[
var css = document.createElement("style" );
css.type = "text/css";
css.innerHTML = "::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #A; } ::-webkit-scrollbar-thumb { background: #a6e326; } ::-webkit-scrollbar-thumb:hover { background: #fff; }";
document.body.appendChild(css);
// ]]></script>

  <!-- WOORDENMACHINE -->
  <div class="machine">
    <h3>Woordenmachine</h3>
    <div class="slots">
     ...

CSS

body {
  background: #222;
  display: flex;
  justify-content: center;
  font-family: Arial, sans-serif;
}

.container {
  position: relative;
  width: 688px;
}


/* Transparant tekstvak */
.story-box {
  position: absolute;
  top: 140px;
  left: 150px;
  width: 380px;
  height: 290px;
  color: white;
  font-size: 14px;
  text-align: center;
  overflow:auto;
}

/* Woordenmachine onderaan */
.machine {
  position: absolute;
  top: 450px;      /* hoogte vanaf de bovenkant */
  left: 100px;     /* afstand vanaf de linkerkant */
  width: 490px;    /* zelfde breedte als story-box */
  text-align: center;
  border-radius: 10px;            /* optioneel */
}


.machine h3 {
  color: white;   /* Kies hier je eigen kleur */
}


.slots {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin: 15px 0;
}

.slot {
  width: 150px;
  height: 40px;
  background: #ccff66;
  border: 2px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  border-radius: 8px;
}

.btn {
  padding: 8px 20px;
  font-size: 1em;
  border-radius: 6px;
  border: 2px solid #333;
  background: #ccff66;
  cursor: pointer;
}

.btn:disabled {
  background: #ddd;
  cursor: not-allowed;
}

JavaScript

// Woordenlijsten
const locaties = ["Kasteel", "Bos", "Begraafplaats", "Spookhuis", "Bioscoop","Kerk", "Zwembad", "Restaurant", "Badkamer", "Keuken", "Straat","School","Snelweg","Dierentuin","Supermarkt","Strand","Neverland","Boot","Maan"];
const wapens = ["Zwaard", "Bijl", "Ketting", "Toverstok","Mes","Pistool","Touw","Kussen","Potlood","Gif","Pop","Speelgoed","Bestek","Schep","Rubberen eend"];
const personen = ["Ridder", "Heks", "Vampier", "Geest","Boer/Bakker","Familielid","Jager","Vriend(in)","Seriemoordenaar","Sporter","Bekend persoon","Prins(es)"];

const slots = [
  document.getElementById("slot1"),
  document.getElementById("slot2"),
  document.getElementById("slot3")
];
const spinBtn = document.getElementById("spinBtn");

function spinSlot(slot, words, delay) {
  return new Promise((resolve) => {
    let i = 0;
    const rolling = setInterval(() => {
      slot.textContent = words[Math.floor(Math.random() * words.length)];
      i++;
      if (i > 15 + delay) {
        clearInterval(rolling);
        resolve(slot.textContent);
      }
    }, 100);
  });
}

spinBtn.addEventListener("click", async () => {
  spinBtn.disabled = true;

  await Promise.all([
    spinSlot(slots[0], locaties, 0),
    spinSlot(slots[1], wapens, 5),
    spinSlot(slots[2], personen, 10)
  ]);

  spinBtn.disabled = false;
});