Lingo NIEUW

by Dutton

HTML

<div id="game">

  <!-- welkom -->
  <div id="popup">
    <div id="popupBox">
      <p class="title">Welkom bij deze herfst-lingo!</p>

      <p>
        <strong>Uitleg:</strong><br><br>

        Het is de bedoeling dat je alle 12 herfstwoorden raadt.
        Als je alle 12 woorden hebt geraden, krijg je een prijs!<br><br>

        Je hoeft niets met je score te doen. Je mag deze uiteraard wel delen
        met andere spelers, maar dat is helemaal aan jou.<br><br>

        Je kunt per woord maximaal 3 hints gebruiken.<br><br>
        
        De code is te claimen t/m 12 oktober!<br><br>

        Veel speelplezier!
      </p>

      <button id="startBtn">Start</button>
    </div>
  </div>

  <!-- naam -->
  <div id="namePopup">
    <div id="nameBox">

      <p class="title">Typ je VP-naam</p>

      <input
        id="vpName"
        type="text"
        maxlength="30"
        autocomplete="off"
        placeholder="VP-naam"
      >

      <p id="nameError"></p>

      <button id="nameBtn">Ga door</button>

    </div>
  </div>

  <!-- einde -->
  <div id="popupWin">
    <div id="popupBoxWin">

      <p id="winText"></p>

      <a
        id="claimBtn"
        href="https://virtualpopstar.com/financial/couponclaim"
        target="_blank"
      >
        Claim hier!
      </a>

      <button id="rankingBtn">
        Bekijk ranglijst
      </button>

    </div>
  </div>

  <!-- ranglijst -->
  <div id="rankingPopup">
    <div id="rankingBox">

      <p class="title">Ranglijst</p>

      <div class="rankingHeader">
        <span>#</span>
        <span>VP-naam</span>
        <span>Tijd</span>
        <span>Hints</span>
        <span>Pogingen</span>
      </div>

      <div id="rankingList"></div>

      <button id="closeRanking">
        Sluiten
      </button>

    </div>
  </div>

  <!-- score -->
  <div id="hud">
    <span id="progress">1 van de 12 woorden</span>
   ...

CSS

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

/* spel */

#game {
  width: 688px;
  height: 500px;
  position: relative;
  overflow: hidden;
  background: url("https://i.imgur.com/zQOpCSO.png") no-repeat center / cover;
  font-family: "Trebuchet MS", sans-serif;
}

/* score */

#hud {
  position: absolute;
  left: 76px;
  top: 180px;
  width: 95px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  z-index: 8;
}

#hud span {
  width: 95px;
  padding: 5px 6px;
  background: rgba(255, 245, 225, 0.95);
  border: 1px solid rgba(166, 94, 46, 0.45);
  border-radius: 7px;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  line-height: 1.15;
  color: #6b3f22;
  box-shadow: 0 2px 4px rgba(80, 45, 20, 0.1);
}

/* bord */

#board {
  position: absolute;
  left: 59%;
  top: 52%;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-rows: repeat(5, 46px);
  gap: 7px;
  z-index: 5;
}

.row {
  display: grid;
  grid-template-columns: repeat(6, 46px);
  gap: 7px;
}

.tile {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: linear-gradient(#f4e1c2, #ddb98b);
  color: #654321;
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.55),
    inset 0 -2px 4px rgba(90, 50, 20, 0.12),
    0 2px 4px rgba(70, 40, 20, 0.12);
  transition: transform 0.15s, outline 0.15s;
}

/* eerste letter */

.startLetter {
  color: rgba(101, 67, 33, 0.35);
}

.selectedTile {
  outline: 2px solid rgba(158, 82, 35, 0.9);
  outline-offset: 1px;
  transform: scale(1.03);
}

.hintTile {
  box-shadow:
    inset 0 0 0 2px rgba(169, 87, 44, 0.5),
    inset 0 2px 4px rgba(255, 255, 255, 0.55),
    0 2px 4px rgba(70, 40, 20, 0.12);
}

/* kleuren...

JavaScript

const words = [
  "herfst",
  "eikels",
  "beuken",
  "windje",
  "mistig",
  "donker",
  "modder",
  "bossen",
  "kachel",
  "jassen",
  "truien",
  "wanten"
];

let playerName = "";

let wordIndex = 0;
let word = words[0];

let currentRow = 0;
let currentLetters = ["", "", "", "", "", ""];
let selectedTile = 0;

let hintsLeft = 3;
let revealedLetters = [0];

let totalHints = 0;
let totalAttempts = 0;

let startTime = 0;
let timerInterval = null;

let acceptingInput = false;

const playLock = "herfst_lingo_gespeeld";


/* onderdelen */

const board = document.getElementById("board");

const guessBtn = document.getElementById("guessBtn");
const hintBtn = document.getElementById("hintBtn");

const progress = document.getElementById("progress");
const timeEl = document.getElementById("time");
const hintCount = document.getElementById("hintCount");

const popup = document.getElementById("popup");
const namePopup = document.getElementById("namePopup");
const popupWin = document.getElementById("popupWin");
const rankingPopup = document.getElementById("rankingPopup");

const winText = document.getElementById("winText");
const claimBtn = document.getElementById("claimBtn");

const startBtn = document.getElementById("startBtn");

const nameBtn = document.getElementById("nameBtn");
const vpName = document.getElementById("vpName");
const nameError = document.getElementById("nameError");

const rankingBtn = document.getElementById("rankingBtn");
const closeRanking = document.getElementById("closeRanking");
const rankingList = document.getElementById("rankingList");


/* starten */

startBtn.addEventListener("click", function() {
  popup.style.display = "none";
  namePopup.style.display = "flex";

  setTimeout(function() {
    vpName.focus();
  }, 50);
});


/* naam */

function submitName() {
  const name = vpName.value.trim();

  if (name.length < 2) {
    nameError.textContent =
     ...