generated from Parcle-game/Parcle-game.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
214 additions
and
17 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| document.addEventListener('DOMContentLoaded', () => { | ||
| const gameTemplate = document.getElementById('test').content; | ||
| const gameContainer = document.querySelector('.click-test-content'); | ||
|
|
||
| // Static mapping of game names and universe IDs | ||
| const gamesData = [ | ||
| { universeId: '4922186765', name: 'Game Name 1' }, | ||
| { universeId: 'anotherUniverseId', name: 'Another Game' }, | ||
| { universeId: 'anotherUniverseId2', name: 'Yet Another Game' } | ||
| ]; | ||
|
|
||
| const fetchAndDisplayGame = (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)) { | ||
| throw new Error('Invalid data format received from API'); | ||
| } | ||
|
|
||
| data.data.forEach(gameData => { | ||
| const gameClone = document.importNode(gameTemplate, true); | ||
|
|
||
| // Fetch game icon (image) | ||
| 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; | ||
| gameClone.querySelector('.icon').src = imageUrl; | ||
| } else { | ||
| console.error('Invalid image data received from API'); | ||
| } | ||
|
|
||
| // Add click event listener to the game element | ||
| gameClone.addEventListener('click', () => { | ||
| const customPageUrl = `../games/game.html?gameName=${encodeURIComponent(game.name)}`; | ||
| window.location.href = customPageUrl; | ||
| }); | ||
|
|
||
| // Append the clone to the container | ||
| gameContainer.appendChild(gameClone); | ||
| }) | ||
| .catch(error => { | ||
| console.error('Error fetching the thumbnail:', error); | ||
| }); | ||
|
|
||
| // Set other game details | ||
| gameClone.querySelector('.game-title').textContent = gameData.name || 'No title available'; | ||
| gameClone.querySelector('.game-desc').textContent = gameData.description || 'No description available'; | ||
|
|
||
| // Use static text for other details if needed | ||
| gameClone.querySelector('.active').textContent = `Active: ${gameData.playing || 'N/A'}`; | ||
| gameClone.querySelector('.owner').textContent = `Owner: ${gameData.creator && gameData.creator.name ? gameData.creator.name : 'N/A'}`; | ||
| gameClone.querySelector('.likes').textContent = `Likes: ${gameData.likes || 'N/A'}`; | ||
| }); | ||
| }) | ||
| .catch(error => { | ||
| console.error('Error fetching the game data:', error); | ||
| const errorMessage = document.createElement('p'); | ||
| errorMessage.textContent = 'Error fetching the game data. Please try again later.'; | ||
| gameContainer.appendChild(errorMessage); | ||
| }); | ||
| }; | ||
|
|
||
| gamesData.forEach(game => { | ||
| fetchAndDisplayGame(game); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,22 +1,84 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
|
|
||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| <title></title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Game Details</title> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class="game-details"> | ||
| <h1 class="game-title"></h1> | ||
| <img class="game-icon" alt="Game Icon"> | ||
| <p class="game-description"></p> | ||
| <p class="active-players"></p> | ||
| <p class="game-likes"></p> | ||
| </div> | ||
| <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 src = "../../games/scripts/data.js"></script> | ||
| </body> | ||
| <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: '4922186765' }, | ||
| '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> |