gimm285-api-project/game.html

78 lines
No EOL
2.7 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pressurized Gas -- Game Page</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<meta name="theme-color" content="#488ea7">
</head>
<body>
<div id="gameTitle"></div>
<div id="longDescription"></div>
<div id="coverArt"></div>
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous" defer></script>
<script>
const isEmpty = (obj) => Object.keys(obj).length === 0;
const getParameters = {};
let gameID = new URL(document.location).searchParams.get("ID");
if (gameID == null) {
gameID = -1;
}
//Settings for FETCH API request
let fetchSettings = {
method: 'GET'
};
if (gameID !== -1) {
fetch("http://localhost:8787/games/" + gameID, fetchSettings)
.then((response) => {
return new Promise((resolve) => response.json()
.then((json) => resolve({
status: response.status,
json,
})
));
})
.then(({status, json}) => {
if (status === 200) {
document.title = "Pressurized Gas - " + json.data[0].title;
document.getElementById("gameTitle").innerHTML = json.data[0].title;
document.getElementById("longDescription").innerHTML = json.data[0].longDescription;
let coverImg = document.createElement('img');
coverImg.src = "http://localhost:8787/images/" + json.data[0].coverArt;
document.getElementById("coverArt").appendChild(coverImg);
}
})
.catch(error => {
console.error('Error:', error);
});
} else {
document.title = "Pressurized Gas - ERROR"
document.getElementById("gameTitle").innerHTML = "Invalid game ID!"
document.getElementById("gameTitle").style.color = "#FF0000";
}
</script>
</body>
</html>