Update 2025-04-13_16:26:34

static/app.js

@@ -0,0 +1,148 @@
+// app.js – Central game logic and initialization for EmojiTrail
+
+import { EMOJIS } from './emoji.js';
+
+// Game state variables
+let currentTrail = [];
+let currentLevel = 1;
+let selected = [];
+let bestLevel = localStorage.getItem('bestLevel') || 1;
+
+/**
+ * Starts a new game round, resetting state and displaying the trail and options.
+ */
+export function startGame() {
+  const levelDisplay = document.getElementById('level');
+  const messageDisplay = document.getElementById('message');
+  const trailBox = document.getElementById('trail');
+  const optionsBox = document.getElementById('options');
+
+  if (!levelDisplay || !messageDisplay || !trailBox || !optionsBox) return;
+
+  messageDisplay.textContent = '';
+  const trail = generateTrail(currentLevel);
+  currentTrail = trail;
+  selected = [];
+  levelDisplay.textContent = `Level ${currentLevel} (Best: ${bestLevel})`;
+
+  showTrail(trail);
+
+  setTimeout(() => {
+    trailBox.innerHTML = ''; // Clear trail for options display
+    showOptions(generateOptions(trail));
+  }, 2000);
+}
+
+// Initialize start button
+const startBtn = document.getElementById('startBtn');
+if (startBtn) {
+  startBtn.textContent = '🔄';
+  startBtn.addEventListener('click', startGame);
+}
+
+/**
+ * Generates a trail of random emojis based on the current level.
+ * @param {number} level - The current game level.
+ * @returns {string[]} Array of emojis.
+ */
+function generateTrail(level) {
+  const result = [];
+  for (let i = 0; i < level; i++) {
+    result.push(EMOJIS[Math.floor(Math.random() * EMOJIS.length)]);
+  }
+  return result;
+}
+
+/**
+ * Generates a shuffled array of 12 options, including trail emojis and distractors.
+ * @param {string[]} trail - The current trail of emojis.
+ * @returns {string[]} Shuffled array of options.
+ */
+function generateOptions(trail) {
+  const trailSet = new Set(trail);
+  const needed = 12 - trailSet.size;
+  const distractors = EMOJIS.filter(e => !trailSet.has(e));
+  const randomExtras = [];
+  while (randomExtras.length < needed) {
+    const candidate = distractors[Math.floor(Math.random() * distractors.length)];
+    if (!randomExtras.includes(candidate)) randomExtras.push(candidate);
+  }
+  const combined = [...trailSet, ...randomExtras];
+  return shuffle(combined);
+}
+
+/**
+ * Shuffles an array using the Fisher-Yates algorithm.
+ * @param {any[]} array - The array to shuffle.
+ * @returns {any[]} The shuffled array.
+ */
+function shuffle(array) {
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [array[i], array[j]] = [array[j], array[i]];
+  }
+  return array;
+}
+
+/**
+ * Displays the trail of emojis in the DOM.
+ * @param {string[]} trail - The array of emojis to display.
+ */
+function showTrail(trail) {
+  const box = document.getElementById('trail');
+  if (!box) return;
+  box.innerHTML = ''; // Clear previous trail
+  trail.forEach(e => {
+    const span = document.createElement('span');
+    span.className = 'trail-emoji';
+    span.textContent = e;
+    box.appendChild(span);
+  });
+}
+
+/**
+ * Displays the grid of clickable emoji options.
+ * @param {string[]} options - The array of emojis to display as options.
+ */
+function showOptions(options) {
+  const grid = document.getElementById('options');
+  if (!grid) return;
+  grid.innerHTML = ''; // Clear previous options
+  options.forEach(e => {
+    const span = document.createElement('span');
+    span.textContent = e;
+    span.addEventListener('click', () => handlePick(e, span));
+    grid.appendChild(span);
+  });
+}
+
+/**
+ * Handles player selection of an emoji option.
+ * @param {string} emoji - The selected emoji.
+ * @param {HTMLElement} el - The DOM element clicked.
+ */
+function handlePick(emoji, el) {
+  el.classList.add('picked');
+  selected.push(emoji);
+
+  const messageDisplay = document.getElementById('message');
+  const levelDisplay = document.getElementById('level');
+
+  if (!messageDisplay || !levelDisplay) return;
+
+  if (selected.length === currentTrail.length) {
+    if (selected.every((e, i) => e === currentTrail[i])) {
+      messageDisplay.textContent = '✅ Correct! Level up!';
+      currentLevel++;
+      if (currentLevel > bestLevel) {
+        bestLevel = currentLevel;
+        localStorage.setItem('bestLevel', bestLevel);
+      }
+    } else {
+      messageDisplay.textContent = '❌ Wrong! Try again.';
+    }
+    setTimeout(() => {
+      startGame();
+    }, 1200);
+  }
+}

static/button.js

@@ -0,0 +1,14 @@
+// button.js – Buttonverhalten für New Game (🔄)
+
+import { startGame } from './app.js';
+
+const startBtn = document.getElementById('startBtn');
+
+if (startBtn) {
+  startBtn.addEventListener('click', () => {
+    localStorage.removeItem('bestLevel');
+    localStorage.removeItem('currentLevel');
+    startGame();
+  });
+}
+

static/emoji.js

@@ -0,0 +1,11 @@
+// emoji.js — just exports the emoji array
+
+export const EMOJIS = [
+  '🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼', '🐨', '🐯', '🦁', '🐮', '🐷', '🐽', '🐸', '🐵',
+  '🙈', '🙉', '🙊', '🐒', '🐔', '🐧', '🐦', '🐤', '🐣', '🐥', '🦆', '🦅', '🦉', '🦇', '🐺', '🐗',
+  '🐴', '🫎', '🫏', '🦄', '🐝', '🐛', '🦋', '🐌', '🐞', '🐜', '🪰', '🪱', '🐢', '🐍', '🦎', '🦂',
+  '🦀', '🦞', '🦐', '🦑', '🐙', '🪼', '🐠', '🐟', '🐡', '🦈', '🐬', '🐳', '🐋', '🦭', '🐊', '🐆',
+  '🐅', '🐃', '🐂', '🐄', '🐪', '🐫', '🦙', '🦘', '🦬', '🐘', '🦣', '🦏', '🦛', '🐐', '🐏', '🐑',
+  '🐎', '🐖', '🐀', '🐁', '🐓', '🦃', '🕊️', '🦢', '🦜', '🦚', '🦩', '🕷️', '🕸️', '🦂'
+];
+

static/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Added for mobile responsiveness -->
+  <title>EmojiTrail</title>
+  <link rel="stylesheet" href="/static/style.css">
+</head>
+<body>
+
+  <h1>EmojiTrail</h1>
+  <button id="startBtn" aria-label="Start or reset game">🔄</button> <!-- Added aria-label for accessibility -->
+  <div id="level"></div>
+  <div id="message"></div>
+  <div id="options"></div>
+  <div id="trail"></div>
+
+  <script type="module" src="/static/emoji.js"></script>
+  <script type="module" src="/static/app.js"></script>
+</body>
+</html>

static/style.css

@@ -0,0 +1,162 @@
+/* style.css — visual layout for EmojiTrail */
+
+/* Define CSS variables for colors */
+:root {
+  --background-color: #fff9e6;
+  --text-color: #2c2c2c;
+  --button-color: #ffb347;
+  --button-hover-color: #ffd700;
+}
+
+/* General layout for page background and text style */
+body {
+  font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
+  background: var(--background-color);
+  color: var(--text-color);
+  text-align: center;
+  padding: 1em;
+  margin: 0;
+}
+
+/* Container for centered content */
+.container {
+  max-width: 700px;
+  margin: 0 auto;
+  width: 90%; /* Ensures responsiveness */
+}
+
+/* Game title */
+h1 {
+  font-size: 2em;
+  margin-bottom: 0.3em;
+}
+
+/* Current level display */
+#level {
+  font-size: 1em;
+  margin-top: 0.5em;
+}
+
+#message {
+  font-size: 1em;
+  margin-top: 0.5em;
+  min-height: 1.4em; /* Allows growth if needed */
+}
+
+#options {
+  margin-top: 0.5em;
+  min-height: 1.2em; /* Allows growth if needed */
+}
+
+#trail {
+  margin-top: 2em;
+  min-height: 1.2em; /* Allows growth if needed */
+}
+
+#options span {
+    font-size: 1.5em; /* ~24px with 16px base */
+    padding: 0.2em;
+}
+
+#trail span {
+    font-size: 3em; /* ~48px with 16px base */
+    padding: 0.2em;
+}
+
+/* Display area for the emoji sequence */
+.emoji-box {
+  margin: 0.5em 0;
+  font-size: 1.2em; /* Smaller emojis */
+  display: inline-flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.5em; /* Reduced gap */
+}
+
+/* Emoji selection grid */
+.emoji-grid {
+  display: flex;
+  justify-content: center;
+  flex-wrap: nowrap;
+  gap: 0.4em; /* Adjusted gap to prevent overlap */
+  margin: 1em 0;
+  overflow-x: auto;
+  padding: 0.3em;
+}
+
+/* Individual emojis in the selection grid */
+.emoji-grid span {
+  font-size: 1.2em; /* Smaller emojis */
+  cursor: pointer;
+  transition: transform 0.2s;
+  display: inline-block;
+  text-align: center;
+}
+
+/* Hover effect for emojis */
+.emoji-grid span:hover {
+  transform: scale(1.1); /* Reduced scale to prevent overlap */
+}
+
+/* Style for already picked emojis */
+.picked {
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+
+/* General button styling */
+button {
+  padding: 0.4em 1.2em;
+  font-size: 1em;
+  background-color: var(--button-color);
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+/* Button hover color */
+button:hover {
+  background-color: var(--button-hover-color);
+}
+
+/* Focus styles for accessibility */
+button:focus {
+  outline: 2px solid var(--text-color);
+}
+
+.emoji-grid span:focus {
+  outline: 2px solid var(--text-color);
+}
+
+/* Media query for smaller screens */
+@media (max-width: 600px) {
+  body {
+    padding: 0.5em;
+  }
+  h1 {
+    font-size: 1.5em;
+  }
+  #level {
+    font-size: 0.8em;
+  }
+  .emoji-box {
+    font-size: 1em;
+    gap: 0.3em;
+  }
+  .emoji-grid {
+    gap: 0.2em;
+  }
+  .emoji-grid span {
+    font-size: 1em;
+  }
+  button {
+    font-size: 0.8em;
+    padding: 0.3em 1em;
+  }
+  #message {
+    font-size: 1em;
+    min-height: 1em;
+  }
+}