kgames

KGames — free keyboard games for kids
git clone https://www.keyboard.games/code/kgames.git
Log | Files | Refs | README | LICENSE

main.js (1359B)

      1 const GAMES = [
      2   { slug: 'letter-find', title: 'Letter Find', thumb: 'assets/thumbnails/letter-find.svg', status: 'live' },
      3   { slug: 'fire-truck', title: 'Fire Truck', thumb: 'assets/thumbnails/fire-truck.svg', status: 'live' },
      4   { slug: 'animal-letter', title: 'Animal Letter', thumb: 'assets/thumbnails/animal-letter.svg', status: 'live' },
      5   { slug: 'animal-spell', title: 'Animal Spell', thumb: 'assets/thumbnails/animal-spell.svg', status: 'live' },
      6   { slug: 'work', title: 'Work', thumb: 'assets/thumbnails/work.svg', status: 'live' },
      7   { slug: null, title: 'Coming Soon', thumb: 'assets/thumbnails/placeholder.svg', status: 'placeholder' },
      8 ];
      9 
     10 const PALETTE = ['#E63946', '#1D7CF2', '#FFD23F', '#2EC4B6'];
     11 
     12 document.addEventListener('DOMContentLoaded', () => {
     13   const grid = document.getElementById('game-grid');
     14 
     15   GAMES.forEach((game, i) => {
     16     const color = PALETTE[i % PALETTE.length];
     17     const isLive = game.status === 'live';
     18 
     19     const el = document.createElement(isLive ? 'a' : 'div');
     20     el.className = 'game-tile' + (isLive ? '' : ' coming-soon');
     21     el.style.borderColor = color;
     22 
     23     if (isLive) el.href = `games/${game.slug}/index.html`;
     24 
     25     el.innerHTML = `
     26       <img src="${game.thumb}" alt="${game.title}" class="tile-thumb">
     27       <span class="tile-title">${game.title}</span>
     28     `;
     29 
     30     grid.appendChild(el);
     31   });
     32 });