main.js (1468B)
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: 'story-stamp', title: 'Story Stamp', thumb: 'assets/thumbnails/story-stamp.svg', status: 'live' }, 8 { slug: null, title: 'Coming Soon', thumb: 'assets/thumbnails/placeholder.svg', status: 'placeholder' }, 9 ]; 10 11 const PALETTE = ['#E63946', '#1D7CF2', '#FFD23F', '#2EC4B6']; 12 13 document.addEventListener('DOMContentLoaded', () => { 14 const grid = document.getElementById('game-grid'); 15 16 GAMES.forEach((game, i) => { 17 const color = PALETTE[i % PALETTE.length]; 18 const isLive = game.status === 'live'; 19 20 const el = document.createElement(isLive ? 'a' : 'div'); 21 el.className = 'game-tile' + (isLive ? '' : ' coming-soon'); 22 el.style.borderColor = color; 23 24 if (isLive) el.href = `games/${game.slug}/index.html`; 25 26 el.innerHTML = ` 27 <img src="${game.thumb}" alt="${game.title}" class="tile-thumb"> 28 <span class="tile-title">${game.title}</span> 29 `; 30 31 grid.appendChild(el); 32 }); 33 });