js

docs/games.js

@@ -0,0 +1,66 @@
+const games = {
+    moba: {
+        title: "Puffer MOBA",
+        description: "A Multiplayer Online Battle Arena (MOBA) inspired by games like DoTA and League of Legends. Click to move, Q/W/E for skills. Number keys to switch characters. By Joseph Suarez.",
+        thumbnail: "assets/moba_thumbnail.png",
+        path: "assets/moba/game.html",
+        width: 1312,
+        height: 736,
+    },
+    tactics: {
+        title: "Puffer Tactics",
+        description: "A turn-based tactical combat game. Inspired by games like Fire Emblem and the popular MMO Dofus. By Nathan.",
+        thumbnail: "assets/tactical_thumbnail.png",
+        path: "assets/tactical/game.html",
+        width: 1200,
+        height: 900,
+    },
+    go: {
+        title: "Go",
+        description: "The ancient board game of territory control and strategic placement.",
+        thumbnail: "assets/go_thumbnail.png",
+        path: "assets/go/game.html",
+        width: 950,
+        height: 640,
+    },
+    tcg: {
+        title: "TCG",
+        description: "A trading card game environment for testing strategic deck building and card play.",
+        thumbnail: "assets/tcg_thumbnail.png",
+        path: "assets/tcg/game.html",
+        width: 1080,
+        height: 720,
+   },
+    snake: {
+        title: "Multiagent Snake",
+        description: "A multiplayer version of the classic snake game with competitive elements.",
+        thumbnail: "assets/snake_thumbnail.png",
+        path: "assets/snake/game.html",
+        width: 1080,
+        height: 720,
+    },
+    pong: {
+        title: "Pong",
+        description: "A classic reimagined: Play against our reinforcement learned agent or watch AI vs AI matches.",
+        thumbnail: "assets/pong_thumbnail.png",
+        path: "assets/pong/game.html",
+        width: 620,
+        height: 640,
+    },
+    breakout: {
+        title: "Breakout",
+        description: "The arcade classic featuring ball physics and block breaking gameplay.",
+        thumbnail: "assets/breakout_thumbnail.png",
+        path: "assets/breakout/game.html",
+        width: 576,
+        height: 330,
+    },
+    connect4: {
+        title: "Connect4",
+        description: "The classic two-player connection game with perfect play AI.",
+        thumbnail: "assets/connect4_thumbnail.png",
+        path: "assets/connect4/game.html",
+        width: 672,
+        height: 576,
+    },
+};

docs/main.js

@@ -0,0 +1,88 @@
+function resizeGame() {
+    const container = document.querySelector('.featured-game-container');
+    const iframe = document.querySelector('.featured-game');
+
+    // Set specific dimensions that maintain aspect ratio
+    container.style.width = 'calc(81vw)';  // Using viewport width
+    container.style.height = '81vh';       // Using viewport height
+
+    // Set same dimensions for iframe
+    iframe.style.width = '100%';
+    iframe.style.height = '100%';
+
+    console.log('Container resized:', {
+        containerWidth: container.clientWidth,
+        containerHeight: container.clientHeight,
+        iframeWidth: iframe.clientWidth,
+        iframeHeight: iframe.clientHeight,
+        containerVisible: container.offsetParent !== null
+    });
+}
+
+function loadGame(gameKey) {
+    const game = games[gameKey];
+    const container = document.querySelector('.featured-game-container');
+    const featured = document.querySelector('.featured-game');
+
+    featured.src = game.path;
+    document.querySelector('.game-info .game-title').textContent = game.title;
+    document.querySelector('.game-description').textContent = game.description;
+
+}
+
+function initializeGames() {
+    const grid = document.querySelector('.games-grid');
+    if (!grid) return;
+    grid.innerHTML = Object.entries(games).map(([key, game]) => `
+        <div class="game-card" onclick="loadGame('${key}')">
+            <div class="game-thumbnail">
+                <img src="${game.thumbnail}" alt="${game.title}">
+            </div>
+            <span class="game-title">${game.title}</span>
+        </div>
+    `).join('');
+}
+
+function randomizeGame() {
+    const currentGame = document.querySelector('.featured-game');
+    const gameEntries = Object.entries(games);
+    const currentPath = currentGame.src.split('/').slice(-2).join('/');
+    let newGame;
+    do {
+        newGame = gameEntries[Math.floor(Math.random() * gameEntries.length)][1];
+    } while (newGame.path === currentPath);
+
+    const container = document.querySelector('.featured-game-container');
+
+    // Set container size
+    container.style.width = `${newGame.width}px`;
+    container.style.height = `${newGame.height}px`;
+
+    // Set iframe size
+    currentGame.style.width = `${newGame.width}px`;
+    currentGame.style.height = `${newGame.height}px`;
+    // Also set the attributes for good measure
+    currentGame.width = newGame.width;
+    currentGame.height = newGame.height;
+
+    // Set source and text content last
+    currentGame.src = newGame.path;
+    document.querySelector('.game-info .game-title').textContent = newGame.title;
+    document.querySelector('.game-description').textContent = newGame.description;
+
+    console.log('Container resized to:', {
+        containerWidth: container.clientWidth,
+        containerHeight: container.clientHeight,
+        iframeWidth: currentGame.clientWidth,
+        iframeHeight: currentGame.clientHeight,
+        containerVisible: container.offsetParent !== null
+    });
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+    initializeGames();
+    const demoGame = document.querySelector('.featured-game');
+    if (demoGame) {
+        randomizeGame();
+    }
+});