2023-05-02 06:01:30 -06:00
|
|
|
|
<!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">
|
2023-05-02 09:35:46 -06:00
|
|
|
|
|
|
|
|
|
|
<script src="https://kit.fontawesome.com/55072ce5fd.js" crossorigin="anonymous" defer></script>
|
2023-05-02 06:01:30 -06:00
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
<body>
|
2023-05-02 07:01:09 -06:00
|
|
|
|
|
|
|
|
|
|
<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">
|
2023-05-02 09:35:46 -06:00
|
|
|
|
<li class="navbar-brand">
|
|
|
|
|
|
<a href="index.html">PRESSURIZED GAS</a>
|
2023-05-02 07:01:09 -06:00
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
<div class="nav-item m-2 align-content-end">
|
2023-05-02 09:35:46 -06:00
|
|
|
|
<a href="viewGameData.html">Admin View</a>
|
2023-05-02 07:01:09 -06:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</nav>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
2023-05-02 09:35:46 -06:00
|
|
|
|
<div id="header" class="container text-center">
|
|
|
|
|
|
<h1>Welcome to Pressurized Gas!</h1>
|
|
|
|
|
|
<h4>"The extremely popular online storefront for computer games"</h4>
|
2023-05-02 06:01:30 -06:00
|
|
|
|
<hr/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
2023-05-02 09:35:46 -06:00
|
|
|
|
<!--
|
|
|
|
|
|
<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>
|
2023-05-02 06:01:30 -06:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2023-05-02 09:35:46 -06:00
|
|
|
|
</a>
|
2023-05-02 06:01:30 -06:00
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
2023-05-02 09:35:46 -06:00
|
|
|
|
-->
|
|
|
|
|
|
<div class="container-fluid">
|
|
|
|
|
|
<div class="mx-5" id="gameList"></div>
|
2023-05-02 06:01:30 -06:00
|
|
|
|
</div>
|
|
|
|
|
|
|
2023-05-02 09:35:46 -06:00
|
|
|
|
<div class="mb-5"></div>
|
|
|
|
|
|
|
2023-05-02 06:01:30 -06:00
|
|
|
|
<footer id="footer">
|
|
|
|
|
|
<p>Page created by <a href="https://lunarpenguin.net/">Kaj Forney</a>, as work for class (GIMM 285).</p>
|
2023-05-02 09:35:46 -06:00
|
|
|
|
<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>
|
2023-05-02 06:01:30 -06:00
|
|
|
|
</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>
|
2023-05-02 09:35:46 -06:00
|
|
|
|
//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>"
|
2023-05-02 06:01:30 -06:00
|
|
|
|
}
|
2023-05-02 09:35:46 -06:00
|
|
|
|
;
|
|
|
|
|
|
if (lnx == 1) {
|
|
|
|
|
|
osString += "<i class=\"fa-brands fa-linux mx-2\"></i>"
|
|
|
|
|
|
}
|
|
|
|
|
|
;
|
|
|
|
|
|
return osString;
|
|
|
|
|
|
}
|
2023-05-02 06:01:30 -06:00
|
|
|
|
|
2023-05-02 09:35:46 -06:00
|
|
|
|
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\">";
|
|
|
|
|
|
|
|
|
|
|
|
console.log(gameListData[0]);
|
|
|
|
|
|
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 += ""
|
2023-05-02 06:01:30 -06:00
|
|
|
|
}
|
2023-05-02 09:35:46 -06:00
|
|
|
|
|
|
|
|
|
|
gameListHTML += currentCard;
|
2023-05-02 06:01:30 -06:00
|
|
|
|
}
|
2023-05-02 09:35:46 -06:00
|
|
|
|
gameListHTML += "</div>";
|
|
|
|
|
|
console.log(gameListHTML);
|
|
|
|
|
|
gameListDiv.innerHTML = gameListHTML;
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch(error => {
|
|
|
|
|
|
console.error('Error:', error);
|
|
|
|
|
|
});
|
2023-05-02 06:01:30 -06:00
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
|
|
</html>
|
