175 lines
6.4 KiB
HTML
175 lines
6.4 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">
|
|
|
|
<script src="https://kit.fontawesome.com/55072ce5fd.js" crossorigin="anonymous" defer></script>
|
|
|
|
<meta name="theme-color" content="#488ea7">
|
|
</head>
|
|
<body class="parallax">
|
|
<div id="navbar">
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
|
<div class="container-fluid">
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
|
|
data-bs-target="#navbarMenu" aria-controls="navbarSupportedContent"
|
|
aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarMenu">
|
|
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
|
<li class="navbar-brand">
|
|
<a href="index.html">
|
|
<img src="img/logo.png">
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<div class="nav-item m-2 align-content-end">
|
|
<a href="viewGameData.html">Admin View</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-1"></div>
|
|
<div class="col-10 gamePage">
|
|
<h1 id="gameTitle" class="text-center"></h1>
|
|
|
|
<div class="coverArtContainer">
|
|
<div id="coverArt"></div>
|
|
</div>
|
|
|
|
<div class="mb-3"></div>
|
|
|
|
<div class="text-center" id="developer"></div>
|
|
<div class="text-center" id="publisher"></div>
|
|
|
|
<div class="mb-3"></div>
|
|
|
|
<div id="osSupport" class="text-center"></div>
|
|
|
|
<div class="mb-3"></div>
|
|
|
|
<div id="longDescription"></div>
|
|
</div>
|
|
<div class="col-1"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-5"></div>
|
|
|
|
<footer id="footer">
|
|
<p>Page created by <a href="https://lunarpenguin.net/">Kaj Forney</a>, as work for class (GIMM 285).</p>
|
|
<p>All example data used is originally from <a href="https://store.steampowered.com/">Steam</a>.</p>
|
|
<p>(also, I can take no credit for the name "Pressurized Gas"... that was from the fantastically creative people who
|
|
made The Stanley Parable.)</p>
|
|
</footer>
|
|
|
|
<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;
|
|
}
|
|
|
|
function osSupport(win, mac, lnx) {
|
|
let osString = "";
|
|
if (win == 1) {
|
|
osString += "<i class=\"fa-brands fa-windows mx-2\" title='Supports Windows'></i>"
|
|
}
|
|
;
|
|
if (mac == 1) {
|
|
osString += "<i class=\"fa-brands fa-apple mx-2\" title='Supports MacOS'></i>"
|
|
}
|
|
;
|
|
if (lnx == 1) {
|
|
osString += "<i class=\"fa-brands fa-linux mx-2\" title='Supports Linux'></i>"
|
|
}
|
|
;
|
|
return osString;
|
|
}
|
|
|
|
//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) {
|
|
let gameData = json.data[0];
|
|
|
|
document.title = "Pressurized Gas - " + gameData.title;
|
|
document.getElementById("gameTitle").innerHTML = gameData.title;
|
|
|
|
let developerHTML = "";
|
|
developerHTML += "<p>Developer: <a href='"
|
|
developerHTML += gameData.devURL;
|
|
developerHTML += "'>";
|
|
developerHTML += gameData.developer;
|
|
developerHTML += "</a></p>";
|
|
document.getElementById("developer").innerHTML = developerHTML;
|
|
|
|
if(gameData.publisher != "Self Published") {
|
|
let publisherHTML = "";
|
|
publisherHTML += "<p>Publisher: <a href='"
|
|
publisherHTML += gameData.pubURL;
|
|
publisherHTML += "'>";
|
|
publisherHTML += gameData.publisher;
|
|
publisherHTML += "</a></p>";
|
|
document.getElementById("publisher").innerHTML = publisherHTML;
|
|
}
|
|
|
|
document.getElementById("osSupport").innerHTML = osSupport(gameData.win, gameData.mac, gameData.linux)
|
|
|
|
let coverImg = document.createElement('img');
|
|
coverImg.src = "http://localhost:8787/images/" + gameData.coverArt;
|
|
coverImg.classList.add("coverArt");
|
|
document.getElementById("coverArt").appendChild(coverImg);
|
|
|
|
document.getElementById("longDescription").innerHTML = gameData.longDescription;
|
|
}
|
|
})
|
|
.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> |