Working on vue

Author: LinkofOrigin

libraries/vueJS/.gitignore

@@ -29,5 +29,6 @@ coverage
 
 *.tsbuildinfo
 
-# Hide secret files
-*secrets*
+# Hide environment data
+*.env
+*.env.local

libraries/vueJS/README.md

@@ -2,7 +2,7 @@
 
 This library uses the standard Vue template as a foundation. See the details below for running the project.
 
-You will also need to create a `secrets.json` file to store your API credentials. See the section below for more details.
+You will also need to create a `.env` file to store your API credentials. See the section below for more details.
 
 ## Recommended IDE Setup
 
@@ -41,16 +41,16 @@ npm run build
 
 ## Client Credentials
 
-You will need to create a file for storing your client credentials. Typically these secrets would be handled through your server environment, but for basic testing you can create this secrets file to immediately test the library.
+You will need to create a file for storing your client credentials. Typically these secrets would be handled through your server environment, but for basic testing you can create this environment file locally to immediately test the library.
 
 Reminder: DON'T COMMIT SECRETS TO VERSION CONTROL!
 
 ### Twitch Account for Authentication
 
 IGDB is owned and operated by Twitch.tv. In order to authenticate with the api, you will need an active Twitch account and register a developer application with it to acquire a Client ID and Client Secret. See IGDB's documentation here for details: [IGDB Account Creation](https://api-docs.igdb.com/#account-creation)
 
-### Create Secrets File
+### Create Environment File
 
-1. Create a `secrets.json` file at the project root.
-2. Add two fields called `clientId` and `clientSecret`.
-3. Set those values to their respective values from your Twitch Developer App.
+1. Create a `.env` file at the project root.
+2. Add two fields called `CLIENT_ID` and `CLIENT_SECRET`.
+3. Set those values to their respective values from your Twitch Developer App.

libraries/vueJS/package-lock.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "apicalypse": "^1.0.5",
+    "axios": "^1.12.2",
     "vue": "^3.5.22"
   },
   "devDependencies": {

libraries/vueJS/package.json

@@ -1,4 +1,5 @@
 <script setup>
+import { onMounted, ref } from 'vue';
 import DataPreview from './components/DataPreview.vue';
 import { getCredentials, getAPIToken, getGenreData, getGameData, getCharacterData } from './api';
 
@@ -20,29 +21,28 @@ let sectionThree = ref({
   data: null
 });
 
-const credentials = getCredentials();
-
-const clientId = credentials.clientId;
-const clientSecret = credentials.clientSecret;
-
-const apiToken = getAPIToken(clientId, clientSecret);
+let credentials = ref({
+  clientId: null,
+  clientSecret: null,
+});
+let apiToken = ref("");
 
-sectionOne.data = getGenreData(clientId, apiToken);
-sectionTwo.data = getGameData(clientId, apiToken);
-sectionThree.data = getCharacterData(clientId, apiToken);
+onMounted(() => {
+  credentials.value = getCredentials();
+  console.log("credentials: " + JSON.stringify(credentials.value));
+  apiToken.value = getAPIToken(credentials.value.clientId, credentials.value.clientSecret);
+  sectionOne.value.data = getGenreData(credentials.clientId, apiToken);
+  sectionTwo.value.data = getGameData(credentials.clientId, apiToken);
+  sectionThree.value.data = getCharacterData(credentials.clientId, apiToken);
+})
 
 
 function refreshData() {
-  
+  sectionThree.value.data = getCharacterData(credentials.credentials.clientId);
 }
-
 </script>
 
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-  </header>
-
   <main>
     <div class="pageContent">
       <h1>Welcome to the VGD Multi Library!</h1>
@@ -54,7 +54,7 @@ function refreshData() {
       </div>
 
       <span class="buttonContainer">
-        <button id="refreshData">Reload Data</button>
+        <button id="refreshData" @click="refreshData">Reload Data</button>
       </span>
 
       <div id="sectionContainer" class="sectionContainer">
@@ -101,8 +101,8 @@ body {
 }
 
 .pageContent {
-  max-width: 1080px;
-  min-height: 100%;
+  min-width: 100%;
+  min-height: 100vh;
   margin: 0 auto;
   background-color: #d3d3d3;
 }
@@ -121,7 +121,8 @@ body {
 
 .pageContent p {
   flex: 1 1 auto;
-  text-align: justify;
+  color: black;
+  text-align: center;
 }
 
 .pageContent .buttonContainer {

libraries/vueJS/src/App.vue

@@ -3,9 +3,12 @@ import IGDB_Helper from "./igdb_api/IGDB_Helper.js";
 
 export function getCredentials() {
     console.log("Retrieving client ID and client secret");
-    const secrets = fs.readFileSync("./secrets.json");
-    const secretsJSON = JSON.parse(secrets);
-    return secretsJSON;
+    console.log(`process: ${JSON.stringify(process)}`);
+    const credentials = {
+        clientId: process.env.VITE_CLIENT_ID,
+        clientSecret: process.env.VITE_CLIENT_SECRET
+    };
+    return credentials;
 }
 
 export async function getAPIToken(clientId, clientSecret) {
@@ -15,7 +18,6 @@ export async function getAPIToken(clientId, clientSecret) {
     return apiTokenResult.access_token;
 }
 
-
 export async function getGenreData(clientId, apiToken) {
     console.log("Pulling game data from IGDB");
     const igdb = new IGDB_Helper();

libraries/vueJS/src/api.js

@@ -60,7 +60,6 @@
 
 body {
   min-height: 100vh;
-  color: var(--color-text);
   background: var(--color-background);
   transition:
     color 0.5s,
@@ -83,4 +82,4 @@ body {
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-}
+}

libraries/vueJS/src/assets/base.css

@@ -1,10 +1,12 @@
 @import './base.css';
 
 #app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
   font-weight: normal;
+  min-height: 100vh;
+}
+
+#app>main {
+  min-height: 100vh;
 }
 
 a,
@@ -19,17 +21,4 @@ a,
   a:hover {
     background-color: hsla(160, 100%, 37%, 0.2);
   }
-}
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-}
+}