v1 - Now pulling from IGDB API

LinkofOrigin · LinkofOrigin · commit 8ad5de30260a · 2025-10-17T15:26:08.000-06:00
diff --git a/.gitignore b/.gitignore
@@ -35,3 +35,4 @@ _site/
 # counterproductive to check this file into the repository.
 # Details at https://github.com/github/pages-gem/issues/768
 Gemfile.lock
+.vscode/tasks.json
diff --git a/site/public/gameData/gameData.js b/site/public/gameData/gameData.js
@@ -1,3 +1,42 @@
+// Slugs
+const PRIMARY_DATA = "primaryData";
+const SECONDARY_DATA = "secondaryData";
+const TERTIARY_DATA = "tertiaryData";
+
+
+function injectDataToPage(sectionSlug, data) {
+    // Locate the housing element for this data
+    const dataContainerSlug = sectionSlug + "Container";
+    let dataContainerElement = document.getElementById(dataContainerSlug);
+    
+    const dataTitle = data.title.slice(0, 1).toUpperCase() + data.title.slice(1).toLowerCase();
+    dataContainerElement.querySelector("[name='title']").innerHTML = dataTitle;
+    
+    const dataSummary = data.summary;
+    dataContainerElement.querySelector("[name='summary']").innerHTML = dataSummary;
+    
+    const rawData = JSON.stringify(data.data, null, 6);
+    dataContainerElement.querySelector("[name='data']").innerText = rawData;
+}
+
+/**
+ * Convert the API data format to a consistent structure for the client to process.
+ * 
+ * @param {JSON} apiData 
+ * @returns 
+ */
+function parseData(apiData) {
+    const primaryData = apiData.primary;
+    const secondaryData = apiData.secondary;
+    const tertiaryData = apiData.tertiary;
+    
+    return {
+        primary: primaryData,
+        secondary: secondaryData,
+        tertiary: tertiaryData
+    }
+}
+
 
 export default async function getGameData() {
     let gameDataResponse = await fetch("/get_idgb_data");
@@ -6,8 +45,14 @@ export default async function getGameData() {
         throw new Error("Failed to retrieve game data!");
     }
     
-    let gameData = await gameDataResponse.text();
-    console.log(`Client received game data: ${gameData}`);
+    const gameData = await gameDataResponse.json();
+    console.log(`Client received game data: ${JSON.stringify(gameData)}`);
+    
+    const parsedData = parseData(gameData);
+    
+    injectDataToPage(PRIMARY_DATA, parsedData.primary);
+    injectDataToPage(SECONDARY_DATA, parsedData.secondary);
+    injectDataToPage(TERTIARY_DATA, parsedData.tertiary);
     
     return gameData;
-}
+}
diff --git a/site/public/index.html b/site/public/index.html
@@ -1,25 +1,48 @@
 <html>
-	
+
 <head>
 	<title>VGD Multi Library</title>
 	<meta charset="utf-8" />
-    <style src="./styles.css"></style>
+    <link rel="stylesheet" href="./styles.css"></style>
+    <script src="./components/vgdComponent.js"></script>
 </head>
 
 <body>
-    <h1>Welcome to the VGD Multi Library!</h1>
-    <button id="refreshData">REFRESH</button>
-    <section>
-        <h2>Genres</h2>
-    </section>
-    
-    <section>
-        <h2>Part 2</h2>
-    </section>
-    
-    <section>
-        <h2>Part 3</h2>
-    </section>
+    <div class="pageContent">
+        <h1>Welcome to the VGD Multi Library!</h1>
+        
+        <div class="description">
+            <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>
+            <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>
+        </div>
+        
+        <span class="buttonContainer">
+            <button id="refreshData">Reload Data</button>
+        </span>
+        
+        <div id="sectionContainer" class="sectionContainer">
+            <section id="primaryDataContainer">
+                <h2 name="title">LOADING...</h2>
+                <p name="summary"></p>
+                <hr>
+                <pre name="data"></pre>
+            </section>
+            
+            <section id="secondaryDataContainer">
+                <h2 name="title">LOADING...</h2>
+                <p name="summary"></p>
+                <hr>
+                <pre name="data"></pre>
+            </section>
+            
+            <section id="tertiaryDataContainer">
+                <h2 name="title">LOADING...</h2>
+                <p name="summary"></p>
+                <hr>
+                <pre name="data"></pre>
+            </section>
+        </div>
+    </div>
 </body>
 
 <script type="module">
diff --git a/site/public/oauth/initiate_twitch_oauth.html b/site/public/oauth/initiate_twitch_oauth.html
@@ -6,7 +6,7 @@
 </head>
 
 <body>
-    <h1>Click this to go to Twitch OAuth</h1>
+    <h1>Click this to setup Twitch OAuth manually</h1>
     <button id="twitch-oauth-button">Start Twitch OAuth</button>
 </body>
 
diff --git a/site/public/styles.css b/site/public/styles.css
@@ -1,4 +1,80 @@
-section {
-    max-width: 25%;
-    margin: 0 1rem;
-}
+body {
+    margin: 0;
+    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+    background-color: #717171;
+}
+
+.pageContent {
+    max-width: 1080px;
+    min-height: 100%;
+    margin: 0 auto;
+    background-color: #d3d3d3;
+}
+
+.pageContent h1 {
+    display: flex;
+    justify-content: center;
+}
+
+.pageContent .description {
+    display: flex;
+    flex-direction: column;
+    align-items: left;
+    margin: 0 10%;
+}
+
+.pageContent p {
+    flex: 1 1 auto;
+    text-align: justify;
+}
+
+.pageContent .buttonContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 1rem auto;
+}
+
+.buttonContainer button {
+    font-size: 18px;
+}
+
+.sectionContainer {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 2rem;
+    margin-top: 3rem;
+}
+
+.sectionContainer section {
+    color: black;
+    padding: 0 1rem;
+}
+
+.sectionContainer section h2 {
+    text-align: center;
+    margin-bottom: 2px;
+}
+
+.sectionContainer section p {
+    min-height: 3rem;
+    padding: 0 2rem;
+    font-size: 14px;
+    text-align: justify;
+}
+
+.sectionContainer section hr {
+    margin: 0 15%;
+    height: 4px;
+    color: rgb(23, 80, 150);
+    background-color: rgb(23, 80, 150);
+    border-color: rgb(23, 80, 150);
+    border-radius: 3px;
+    border-width: 1px;
+}
+
+.sectionContainer section pre {
+    min-width: 100%;
+    text-wrap: balance;
+    inline-size: min-content;
+}
diff --git a/site/public/template_index.html b/site/public/template_index.html
diff --git a/site/src/igdb_api/request_data.js b/site/src/igdb_api/request_data.js
@@ -1,24 +1,64 @@
 import IGDB_API from "./igdb_api";
 import { ensureOAuthToken } from "../twitch_oauth/request_token";
 
-async function getGenreData(igdb) {
+// Get a list of Genres registered with IGDB
+async function getPrimaryData(igdb) {
     let endpoint = "genres";
-    let fields = ["name", "slug", "updated_at"];
+    let fields = [
+        "name",
+        "updated_at",
+    ];
     let filters = {
         limit: 5,
     };
     
     let genreResponse = await igdb.request(endpoint, fields, filters);
-    // console.log("Received genre data from IGDB: " + genreResponse);
+    console.log("Retrieved primary data from IGDB.");
     return genreResponse;
 }
 
-async function getSecondaryGamesData(igdb) {
-    return "NULL";
+// Get Games from IGDB with few but high ratings (gems)
+async function getSecondaryData(igdb) {
+    let endpoint = "games";
+    let fields = [
+        "name",
+        "summary",
+        "aggregated_rating",
+        "aggregated_rating_count",
+        "updated_at",
+    ];
+    let filters = {
+        where: "aggregated_rating > 70 & aggregated_rating_count <= 100 & aggregated_rating_count > 10",
+        limit: 5,
+    };
+    
+    let genreResponse = await igdb.request(endpoint, fields, filters);
+    console.log("Retrieved secondary data from IGDB.");
+    return genreResponse;
 }
 
+// Get 5 random characters (alphabetized)
 async function getTertiaryData(igdb) {
-    return "NULL";
+    let endpoint = "characters";
+    let fields = [
+        "name",
+        "games.name",
+        "updated_at",
+        "description",
+    ];
+    
+    const randomPageNum = Math.floor(Math.random() * 1000); // 1000 is arbitrary, no idea how many total pages their will be
+    
+    let filters = {
+        sort: "name asc",
+        where: "games != null",
+        limit: 5,
+        offset: randomPageNum,
+    };
+    
+    let genreResponse = await igdb.request(endpoint, fields, filters);
+    console.log("Retrieved tertiary data from IGDB.");
+    return genreResponse;
 }
 
 export default async function requestGameData(request, env, ctx) {
@@ -29,14 +69,27 @@ export default async function requestGameData(request, env, ctx) {
     let accessToken = await env.IGDB.get("ACCESS_TOKEN");
     let igdbApi = new IGDB_API(clientId, accessToken);
     
-    let genreData = await getGenreData(igdbApi);
-    let secondaryData = await getSecondaryGamesData(igdbApi);
+    let primaryData = await getPrimaryData(igdbApi);
+    let secondaryData = await getSecondaryData(igdbApi);
     let tertiaryData = await getTertiaryData(igdbApi);
     console.log("Retrieved various data from IGDB.");
     
+    // Wrap up our return data into some objects with notable fields
     return {
-        "genres": genreData,
-        "secondary": secondaryData,
-        "tertiary": tertiaryData
+        "primary": {
+            "title": "Genres",
+            "summary": "5 genres the API returns (no order or sort logic).",
+            "data": primaryData,
+        },
+        "secondary": {
+            "title": "Games",
+            "summary": "5 games with a high average rating but relatively few total ratings. Maybe your next favorite game is here?",
+            "data": secondaryData,
+        },
+        "tertiary": {
+            "title": "Characters",
+            "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.",
+            "data": tertiaryData,
+        },
     }
 }
