176 lines
6.6 KiB
HTML
176 lines
6.6 KiB
HTML
<!doctype html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Kaj Forney -- GIMM 285 CRUD API Project</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">
|
||
|
||
<script src="https://kit.fontawesome.com/55072ce5fd.js" crossorigin="anonymous" defer></script>
|
||
</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 id="header" class="container text-center">
|
||
<h1>Welcome to Pressurized Gas!</h1>
|
||
<h4>"The extremely popular online storefront for computer games"</h4>
|
||
<hr/>
|
||
</div>
|
||
|
||
<!--
|
||
<div class="row">
|
||
<div class="col-xl-6 card gameEntry">
|
||
<a href="game.html?ID=16">
|
||
<div class="card-body">
|
||
<div class="row">
|
||
<div class="col">
|
||
<img class="coverArt" src="images/megsmonster.png"/>
|
||
</div>
|
||
<div class="col">
|
||
<h2 class="text-center">Meg's Monster</h2>
|
||
<p> Take control of the Underworld’s grumpiest ghoul to help a lost little girl find her way home in
|
||
this creepy-cute indie adventure. Just be warned: if she cries, the whole world dies. </p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
-->
|
||
<div class="container-fluid">
|
||
<div class="mx-5" id="gameList"></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>
|
||
//Settings for FETCH API request
|
||
let fetchSettings = {
|
||
method: 'GET'
|
||
};
|
||
|
||
//Send FETCH API request
|
||
fetch("http://localhost:8787/games", fetchSettings)
|
||
.then((response) => {
|
||
return new Promise((resolve) => response.json()
|
||
.then((json) => resolve({
|
||
status: response.status,
|
||
json,
|
||
})
|
||
));
|
||
})
|
||
.then(({status, json}) => {
|
||
if (status === 200) {
|
||
let gameListDiv = document.getElementById("gameList")
|
||
let gameListData = json.data;
|
||
let numberOfGames = json.data.length - 1;
|
||
console.log(gameListData);
|
||
|
||
function osSupport(win, mac, lnx) {
|
||
let osString = "";
|
||
if (win == 1) {
|
||
osString += "<i class=\"fa-brands fa-windows mx-2\"></i>"
|
||
}
|
||
;
|
||
if (mac == 1) {
|
||
osString += "<i class=\"fa-brands fa-apple mx-2\"></i>"
|
||
}
|
||
;
|
||
if (lnx == 1) {
|
||
osString += "<i class=\"fa-brands fa-linux mx-2\"></i>"
|
||
}
|
||
;
|
||
return osString;
|
||
}
|
||
|
||
const cardPt1 = "<div class=\"col-xl-6 card gameEntry\"><a href=\"game.html?ID="
|
||
const cardPt2 = "\"><div class=\"card-body\"><div class=\"row\"><div class=\"col coverArtContainer\"><img class=\"coverArt\" src=\"images/"
|
||
const cardPt3 = "\"></div><div class=\"col\"><h2 class=\"text-center\">"
|
||
const cardPt4 = "</p></div></div></div></a></div>"
|
||
|
||
let gameListHTML = ""
|
||
|
||
gameListHTML += "<div class=\"row\">";
|
||
|
||
for (let i = 0; i <= numberOfGames; i++) {
|
||
let currentCard = "";
|
||
currentCard += cardPt1;
|
||
currentCard += gameListData[i].appID;
|
||
currentCard += cardPt2;
|
||
currentCard += gameListData[i].coverArt;
|
||
currentCard += cardPt3;
|
||
currentCard += gameListData[i].title;
|
||
currentCard += "</h2><div class='text-center'>"
|
||
currentCard += osSupport(gameListData[i].win, gameListData[i].mac, gameListData[i].linux);
|
||
currentCard += "</div><p>"
|
||
currentCard += gameListData[i].summary;
|
||
currentCard += cardPt4;
|
||
|
||
if (i % 2 == 1) {
|
||
currentCard += "</div><div class=\"row my-3\">"
|
||
} else {
|
||
currentCard += ""
|
||
}
|
||
|
||
gameListHTML += currentCard;
|
||
}
|
||
gameListHTML += "</div>";
|
||
gameListDiv.innerHTML = gameListHTML;
|
||
}
|
||
})
|
||
.catch(error => {
|
||
console.error('Error:', error);
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
|
||
</html>
|