From d060335e15d7c7dfedb3a4771b042132fe7e170d Mon Sep 17 00:00:00 2001 From: Rob Bos Date: Tue, 9 Jul 2024 21:42:56 +0200 Subject: [PATCH] Update game landscape (#26) --- game-landscape.html | 13 +++++++++++++ game-landscape.js | 29 +++++++++++++++++++++++++---- styles.css | 15 ++++++++++++++- 3 files changed, 52 insertions(+), 5 deletions(-) diff --git a/game-landscape.html b/game-landscape.html index b0c1b6f..47a0a83 100644 --- a/game-landscape.html +++ b/game-landscape.html @@ -5,6 +5,19 @@ Copilot Levels of Enlightenment + diff --git a/game-landscape.js b/game-landscape.js index bdfd093..4e81d83 100644 --- a/game-landscape.js +++ b/game-landscape.js @@ -3,8 +3,18 @@ document.addEventListener('DOMContentLoaded', function() { const ctx = canvas.getContext('2d'); let levelsData = []; - canvas.width = 800; - canvas.height = 600; + function adjustCanvasSize() { + if (window.innerWidth <= 820) { + canvas.width = window.innerWidth; + canvas.height = window.innerHeight - 135; // Adjust based on the header height + } else { + canvas.width = 800; + canvas.height = 600; + } + } + + adjustCanvasSize(); + window.addEventListener('resize', adjustCanvasSize); function loadLevels() { fetch('data.json') @@ -49,7 +59,7 @@ document.addEventListener('DOMContentLoaded', function() { const margin = 70; // Margin from both sides const maxX = canvas.width - (2 * margin); // Adjust maxX to leave a margin of 70 on both sides const maxY = canvas.height - margin; // Reserve some space at the bottom - const levelsPerRow = 4; // Number of levels before changing direction + const levelsPerRow = window.innerWidth <= 820 ? 2 : 4; // Number of levels before changing direction const numRows = Math.ceil(levelsData.length / levelsPerRow); // Total number of rows const deltaY = 1; // Additional vertical offset for each level // Adjust stepY to account for deltaY in the total height calculation @@ -161,10 +171,14 @@ document.addEventListener('DOMContentLoaded', function() { tooltip.style.left = event.pageX + 'px'; tooltip.style.top = (event.pageY - 35) + 'px'; tooltip.style.display = 'block'; + tooltip.style.color = '#000000'; + tooltip.style.fontWeight = 'bold'; + tooltip.style.fontSize = '24px'; document.getElementById('tooltip').textContent = title; break; // Exit loop once cursor change is applied } } + if (!cursorChanged) { canvas.style.cursor = 'default'; document.getElementById('tooltip').textContent = ''; // Hide the tooltip when not hovering over a level @@ -178,6 +192,13 @@ document.addEventListener('DOMContentLoaded', function() { window.location.href = `game-level.html?level=${levelIndex+1}`; } + loadLevels(); + window.addEventListener('resize', function() { + // Update canvas dimensions if necessary + adjustCanvasSize(); + + // Redraw everything on the canvas + drawLandscape(); + }); }); - diff --git a/styles.css b/styles.css index 0c0b084..6b40a1d 100644 --- a/styles.css +++ b/styles.css @@ -392,6 +392,8 @@ h1 { } #game-canvas { + position: absolute; + top: 135px; width: 800px; height: 600px; border: 5px solid #8B4513; /* Leathery brown border for the canvas */ @@ -439,4 +441,15 @@ h1 { .coming-soon-small { font-size: smaller; color: #00ff00; -} \ No newline at end of file +} + +/* Media queries for vertical phone screens */ +@media (max-width: 820px) { + #game-container { + flex-direction: column; + } + #game-canvas { + width: 100%; + height: auto; + } +}