GitHub Community
Can't open page with custom url to load correct api data #138809
-
BodySo I have a page with games what load our games but now I want if you click a card it opens a file named game.html with a custom dymaticalty name to get the correct id connected to the name in the url but it send me to a non exist page with id Code gameClone.addEventListener('click', () => {
console.log('Game clicked:', game.name);
// Correctly format the URL with the query parameter
const customPageUrl = `https://unviere.github.io/Unviere/games/game.html?gameName=${encodeURIComponent(game.name)}`;
// Navigate to the constructed URL
window.location.href = customPageUrl;In the game.html it looking for the url name and get the correct id to load detailed information and a deeplink to directly join the game Page file <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Game Details</title>
</head>
<body>
<h1 id="gameTitle">Game Title</h1>
<img id="gameIcon" src="" alt="Game Icon">
<p id="gameDesc">Game Description</p>
<p id="gameActive">Active Players</p>
<p id="gameOwner">Owner</p>
<p id="gameLikes">Likes</p>
<script>
document.addEventListener('DOMContentLoaded', () => {
const urlParams = new URLSearchParams(window.location.search);
const gameName = urlParams.get('gameName');
if (gameName) {
// Static mapping of game names to universe IDs and other details
const gameDetails = {
'Game Name 1': { universeId: 'universeid' },
'Another Game': { universeId: 'anotherUniverseId' },
'Yet Another Game': { universeId: 'anotherUniverseId2' }
};
const game = gameDetails[gameName];
if (game) {
const apiUrl = `https://games.roproxy.com/v1/games?universeIds=${game.universeId}`;
fetch(apiUrl)
.then(response => {
if (!response.ok) {
throw new Error(`Network response was not ok: ${response.statusText}`);
}
return response.json();
})
.then(data => {
if (data.data && Array.isArray(data.data) && data.data.length > 0) {
const gameData = data.data[0];
document.getElementById('gameTitle').textContent = gameName || 'No title available';
document.getElementById('gameDesc').textContent = 'Description not needed'; // Static text
document.getElementById('gameActive').textContent = `Active: ${gameData.playing || 'N/A'}`;
document.getElementById('gameOwner').textContent = `Owner: ${gameData.creator && gameData.creator.name ? gameData.creator.name : 'N/A'}`;
document.getElementById('gameLikes').textContent = `Likes: ${gameData.likes || 'N/A'}`;
// Fetch and display game icon
const imgUrl = `https://thumbnails.roproxy.com/v1/games/icons?universeIds=${game.universeId}&returnPolicy=PlaceHolder&size=256x256&format=Png&isCircular=false`;
fetch(imgUrl)
.then(response => {
if (!response.ok) {
throw new Error(`Network response was not ok: ${response.statusText}`);
}
return response.json();
})
.then(data => {
if (data && data.data && data.data[0] && data.data[0].imageUrl) {
const imageUrl = data.data[0].imageUrl;
document.getElementById('gameIcon').src = imageUrl;
} else {
console.error('Invalid image data received from API');
}
})
.catch(error => {
console.error('Error fetching the thumbnail:', error);
});
}
})
.catch(error => {
console.error('Error fetching the game data:', error);
});
} else {
console.error('Game details not found for name:', gameName);
}
} else {
console.error('Game name not found in URL parameters.');
}
});
</script>
</body>
</html>It might be the problem how GitHub handle pages but idk it shouldnt lead you to id page what not exist Guidelines
|
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
|
Hi Unviere, Instead of using query parameters (e.g., ?gameName=...), you can use fragment identifiers (#gameName), which GitHub Pages handles better because the URL doesn't change on the server side. Maybe try something like this: JavaScript for redirecting to game.html: In your game.html page: Change how you retrieve the game name from the URL: This approach avoids the query parameter entirely, making it more compatible with static hosting on GitHub Pages. |
Beta Was this translation helpful? Give feedback.
Hi Unviere,
Instead of using query parameters (e.g., ?gameName=...), you can use fragment identifiers (#gameName), which GitHub Pages handles better because the URL doesn't change on the server side. Maybe try something like this:
JavaScript for redirecting to game.html:
In your game.html page: Change how you retrieve the game name from the URL: