Skip to content

Commit 8ad5de3

Browse files
LinkofOriginLinkofOrigin
committed
v1 - Now pulling from IGDB API
1 parent 3e77d40 commit 8ad5de3

7 files changed

Lines changed: 232 additions & 66 deletions

File tree

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,3 +35,4 @@ _site/
3535
# counterproductive to check this file into the repository.
3636
# Details at https://github.com/github/pages-gem/issues/768
3737
Gemfile.lock
38+
.vscode/tasks.json

‎site/public/gameData/gameData.js‎

Lines changed: 48 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,42 @@
1+
// Slugs
2+
const PRIMARY_DATA = "primaryData";
3+
const SECONDARY_DATA = "secondaryData";
4+
const TERTIARY_DATA = "tertiaryData";
5+
6+
7+
function injectDataToPage(sectionSlug, data) {
8+
// Locate the housing element for this data
9+
const dataContainerSlug = sectionSlug + "Container";
10+
let dataContainerElement = document.getElementById(dataContainerSlug);
11+
12+
const dataTitle = data.title.slice(0, 1).toUpperCase() + data.title.slice(1).toLowerCase();
13+
dataContainerElement.querySelector("[name='title']").innerHTML = dataTitle;
14+
15+
const dataSummary = data.summary;
16+
dataContainerElement.querySelector("[name='summary']").innerHTML = dataSummary;
17+
18+
const rawData = JSON.stringify(data.data, null, 6);
19+
dataContainerElement.querySelector("[name='data']").innerText = rawData;
20+
}
21+
22+
/**
23+
* Convert the API data format to a consistent structure for the client to process.
24+
*
25+
* @param {JSON} apiData
26+
* @returns
27+
*/
28+
function parseData(apiData) {
29+
const primaryData = apiData.primary;
30+
const secondaryData = apiData.secondary;
31+
const tertiaryData = apiData.tertiary;
32+
33+
return {
34+
primary: primaryData,
35+
secondary: secondaryData,
36+
tertiary: tertiaryData
37+
}
38+
}
39+
140

241
export default async function getGameData() {
342
let gameDataResponse = await fetch("/get_idgb_data");
@@ -6,8 +45,14 @@ export default async function getGameData() {
645
throw new Error("Failed to retrieve game data!");
746
}
847

9-
let gameData = await gameDataResponse.text();
10-
console.log(`Client received game data: ${gameData}`);
48+
const gameData = await gameDataResponse.json();
49+
console.log(`Client received game data: ${JSON.stringify(gameData)}`);
50+
51+
const parsedData = parseData(gameData);
52+
53+
injectDataToPage(PRIMARY_DATA, parsedData.primary);
54+
injectDataToPage(SECONDARY_DATA, parsedData.secondary);
55+
injectDataToPage(TERTIARY_DATA, parsedData.tertiary);
1156

1257
return gameData;
13-
}
58+
}

‎site/public/index.html‎

Lines changed: 38 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,48 @@
11
<html>
2-
2+
33
<head>
44
<title>VGD Multi Library</title>
55
<meta charset="utf-8" />
6-
<style src="./styles.css"></style>
6+
<link rel="stylesheet" href="./styles.css"></style>
7+
<script src="./components/vgdComponent.js"></script>
78
</head>
89

910
<body>
10-
<h1>Welcome to the VGD Multi Library!</h1>
11-
<button id="refreshData">REFRESH</button>
12-
<section>
13-
<h2>Genres</h2>
14-
</section>
15-
16-
<section>
17-
<h2>Part 2</h2>
18-
</section>
19-
20-
<section>
21-
<h2>Part 3</h2>
22-
</section>
11+
<div class="pageContent">
12+
<h1>Welcome to the VGD Multi Library!</h1>
13+
14+
<div class="description">
15+
<p>This page is intended to show an example of retrieving data from the IGDB API. Click the button below to request a fresh batch of data from the backend.</p>
16+
<p>See the GitHub repository for various language implentations of an IGDB library: <a href="https://github.com/LinkofOrigin/GameDataMultiLibrary/tree/release">IGDB Multi Library</a></p>
17+
</div>
18+
19+
<span class="buttonContainer">
20+
<button id="refreshData">Reload Data</button>
21+
</span>
22+
23+
<div id="sectionContainer" class="sectionContainer">
24+
<section id="primaryDataContainer">
25+
<h2 name="title">LOADING...</h2>
26+
<p name="summary"></p>
27+
<hr>
28+
<pre name="data"></pre>
29+
</section>
30+
31+
<section id="secondaryDataContainer">
32+
<h2 name="title">LOADING...</h2>
33+
<p name="summary"></p>
34+
<hr>
35+
<pre name="data"></pre>
36+
</section>
37+
38+
<section id="tertiaryDataContainer">
39+
<h2 name="title">LOADING...</h2>
40+
<p name="summary"></p>
41+
<hr>
42+
<pre name="data"></pre>
43+
</section>
44+
</div>
45+
</div>
2346
</body>
2447

2548
<script type="module">

‎site/public/oauth/initiate_twitch_oauth.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
</head>
77

88
<body>
9-
<h1>Click this to go to Twitch OAuth</h1>
9+
<h1>Click this to setup Twitch OAuth manually</h1>
1010
<button id="twitch-oauth-button">Start Twitch OAuth</button>
1111
</body>
1212

‎site/public/styles.css‎

Lines changed: 80 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,80 @@
1-
section {
2-
max-width: 25%;
3-
margin: 0 1rem;
4-
}
1+
body {
2+
margin: 0;
3+
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
4+
background-color: #717171;
5+
}
6+
7+
.pageContent {
8+
max-width: 1080px;
9+
min-height: 100%;
10+
margin: 0 auto;
11+
background-color: #d3d3d3;
12+
}
13+
14+
.pageContent h1 {
15+
display: flex;
16+
justify-content: center;
17+
}
18+
19+
.pageContent .description {
20+
display: flex;
21+
flex-direction: column;
22+
align-items: left;
23+
margin: 0 10%;
24+
}
25+
26+
.pageContent p {
27+
flex: 1 1 auto;
28+
text-align: justify;
29+
}
30+
31+
.pageContent .buttonContainer {
32+
display: flex;
33+
flex-direction: column;
34+
align-items: center;
35+
margin: 1rem auto;
36+
}
37+
38+
.buttonContainer button {
39+
font-size: 18px;
40+
}
41+
42+
.sectionContainer {
43+
display: grid;
44+
grid-template-columns: repeat(3, 1fr);
45+
gap: 2rem;
46+
margin-top: 3rem;
47+
}
48+
49+
.sectionContainer section {
50+
color: black;
51+
padding: 0 1rem;
52+
}
53+
54+
.sectionContainer section h2 {
55+
text-align: center;
56+
margin-bottom: 2px;
57+
}
58+
59+
.sectionContainer section p {
60+
min-height: 3rem;
61+
padding: 0 2rem;
62+
font-size: 14px;
63+
text-align: justify;
64+
}
65+
66+
.sectionContainer section hr {
67+
margin: 0 15%;
68+
height: 4px;
69+
color: rgb(23, 80, 150);
70+
background-color: rgb(23, 80, 150);
71+
border-color: rgb(23, 80, 150);
72+
border-radius: 3px;
73+
border-width: 1px;
74+
}
75+
76+
.sectionContainer section pre {
77+
min-width: 100%;
78+
text-wrap: balance;
79+
inline-size: min-content;
80+
}

‎site/public/template_index.html‎

Lines changed: 0 additions & 32 deletions
This file was deleted.

‎site/src/igdb_api/request_data.js‎

Lines changed: 64 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,64 @@
11
import IGDB_API from "./igdb_api";
22
import { ensureOAuthToken } from "../twitch_oauth/request_token";
33

4-
async function getGenreData(igdb) {
4+
// Get a list of Genres registered with IGDB
5+
async function getPrimaryData(igdb) {
56
let endpoint = "genres";
6-
let fields = ["name", "slug", "updated_at"];
7+
let fields = [
8+
"name",
9+
"updated_at",
10+
];
711
let filters = {
812
limit: 5,
913
};
1014

1115
let genreResponse = await igdb.request(endpoint, fields, filters);
12-
// console.log("Received genre data from IGDB: " + genreResponse);
16+
console.log("Retrieved primary data from IGDB.");
1317
return genreResponse;
1418
}
1519

16-
async function getSecondaryGamesData(igdb) {
17-
return "NULL";
20+
// Get Games from IGDB with few but high ratings (gems)
21+
async function getSecondaryData(igdb) {
22+
let endpoint = "games";
23+
let fields = [
24+
"name",
25+
"summary",
26+
"aggregated_rating",
27+
"aggregated_rating_count",
28+
"updated_at",
29+
];
30+
let filters = {
31+
where: "aggregated_rating > 70 & aggregated_rating_count <= 100 & aggregated_rating_count > 10",
32+
limit: 5,
33+
};
34+
35+
let genreResponse = await igdb.request(endpoint, fields, filters);
36+
console.log("Retrieved secondary data from IGDB.");
37+
return genreResponse;
1838
}
1939

40+
// Get 5 random characters (alphabetized)
2041
async function getTertiaryData(igdb) {
21-
return "NULL";
42+
let endpoint = "characters";
43+
let fields = [
44+
"name",
45+
"games.name",
46+
"updated_at",
47+
"description",
48+
];
49+
50+
const randomPageNum = Math.floor(Math.random() * 1000); // 1000 is arbitrary, no idea how many total pages their will be
51+
52+
let filters = {
53+
sort: "name asc",
54+
where: "games != null",
55+
limit: 5,
56+
offset: randomPageNum,
57+
};
58+
59+
let genreResponse = await igdb.request(endpoint, fields, filters);
60+
console.log("Retrieved tertiary data from IGDB.");
61+
return genreResponse;
2262
}
2363

2464
export default async function requestGameData(request, env, ctx) {
@@ -29,14 +69,27 @@ export default async function requestGameData(request, env, ctx) {
2969
let accessToken = await env.IGDB.get("ACCESS_TOKEN");
3070
let igdbApi = new IGDB_API(clientId, accessToken);
3171

32-
let genreData = await getGenreData(igdbApi);
33-
let secondaryData = await getSecondaryGamesData(igdbApi);
72+
let primaryData = await getPrimaryData(igdbApi);
73+
let secondaryData = await getSecondaryData(igdbApi);
3474
let tertiaryData = await getTertiaryData(igdbApi);
3575
console.log("Retrieved various data from IGDB.");
3676

77+
// Wrap up our return data into some objects with notable fields
3778
return {
38-
"genres": genreData,
39-
"secondary": secondaryData,
40-
"tertiary": tertiaryData
79+
"primary": {
80+
"title": "Genres",
81+
"summary": "5 genres the API returns (no order or sort logic).",
82+
"data": primaryData,
83+
},
84+
"secondary": {
85+
"title": "Games",
86+
"summary": "5 games with a high average rating but relatively few total ratings. Maybe your next favorite game is here?",
87+
"data": secondaryData,
88+
},
89+
"tertiary": {
90+
"title": "Characters",
91+
"summary": "5 characters with at least one associated game. These characters were selected by sorting their names alphabetically and then pulling a random page number.",
92+
"data": tertiaryData,
93+
},
4194
}
4295
}

0 commit comments

Comments
 (0)