added grid game image in add session view

Didiloy · Jul 8, 2024 · 2cda106 · 2cda106
1 parent 893c13d
commit 2cda106
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 45 deletions.
diff --git a/src/renderer/src/api/steamgriddb.js b/src/renderer/src/api/steamgriddb.js
@@ -21,8 +21,9 @@ export async function getGameId(name) {
 }
 
 export async function getGameGrid(id) {
-  const grids = await client.getGrids({ type: "game", id: id });
-  return grids[0].url;
+  const url = BASE_URL + "/grids/game/" + id;
+  const data = await fetch(url, { headers: header }).then((res) => res.json());
+  return data.data[0].url;
 }
 
 export async function getGameLogo(id) {

diff --git a/src/renderer/src/assets/images/game_not_found.jpg b/src/renderer/src/assets/images/game_not_found.jpg
diff --git a/src/renderer/src/components/AddSession.vue b/src/renderer/src/components/AddSession.vue
@@ -8,37 +8,42 @@
   >
     <template #content>
       <div class="content-container">
-        <div class="as-input">
-          <AutoComplete
-            class="input-field mb10"
-            v-model="game"
-            placeholder="Nom du jeu"
-            :suggestions="items"
-            @complete="autocomplete"
-          ></AutoComplete>
-          <div class="as-duration-input">
-            <span class="as-icon" @click="toggleOverlay"
-              ><i class="pi pi-info"></i
-            ></span>
-            <OverlayPanel ref="op">
-              <span>
-                Vous pouvez entrer une durée en minutes ou utiliser une formule
-                pour additionner plusieurs durées. Par exemple, pour ajouter 10
-                minutes et 20 minutes, entrez "=10+20".
-              </span>
-            </OverlayPanel>
-            <InputText
-              class="input-number"
-              v-model="duration"
-              placeholder="Durée en minute"
-            ></InputText>
-            <div>
-              <Button
-                icon="pi pi-clock"
-                @click="startStopWatch"
-                style="background-color: var(--primary-400)"
-                class="as-chrono-button"
-              />
+        <div class="as-input-container">
+          <div class="as-game-image">
+            <img :src="game_grid" alt="game image" class="as-img-game-image" />
+          </div>
+          <div class="as-input">
+            <AutoComplete
+              class="input-field mb10"
+              v-model="game"
+              placeholder="Nom du jeu"
+              :suggestions="items"
+              @complete="autocomplete"
+            ></AutoComplete>
+            <div class="as-duration-input">
+              <span class="as-icon" @click="toggleOverlay"
+                ><i class="pi pi-info"></i
+              ></span>
+              <OverlayPanel ref="op">
+                <span>
+                  Vous pouvez entrer une durée en minutes ou utiliser une
+                  formule pour additionner plusieurs durées. Par exemple, pour
+                  ajouter 10 minutes et 20 minutes, entrez "=10+20".
+                </span>
+              </OverlayPanel>
+              <InputText
+                class="input-number"
+                v-model="duration"
+                placeholder="Durée en minute"
+              ></InputText>
+              <div>
+                <Button
+                  icon="pi pi-clock"
+                  @click="startStopWatch"
+                  style="background-color: var(--primary-400)"
+                  class="as-chrono-button"
+                />
+              </div>
             </div>
           </div>
         </div>
@@ -99,12 +104,13 @@
   <Toast />
 </template>
 <script setup>
-import { onMounted, onUnmounted, ref, watch, defineEmits } from "vue";
+import { onMounted, onUnmounted, ref, watch, defineEmits, computed } from "vue";
 import { useToast } from "primevue/usetoast";
 import { useStore, useStoreChrono } from "../store/store";
 import { storeToRefs } from "pinia";
 import { addSession } from "../database/database";
 import { getPreferences } from "../preferences/preferences";
+import gameNotFound from "../assets/images/game_not_found.jpg";
 
 const emit = defineEmits(["toggleChronoListener"]);
 const storeChrono = useStoreChrono();
@@ -118,6 +124,11 @@ const items = ref([]);
 const loading = ref(false);
 const icon = ref("pi pi-plus");
 const game = ref("");
+const game_grid = computed(() => {
+  return (
+    all_games.value.find((g) => g.name === game.value)?.grid || gameNotFound
+  );
+});
 const duration = ref("");
 const was_cool = ref({});
 const options_cool = ref([
@@ -278,11 +289,29 @@ async function addNewSession() {
   width: 100%;
 }
 
+.as-input-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  height: 150px;
+  width: 450px;
+}
+
+.as-img-game-image {
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  height: 190px;
+  width: 160px;
+  border-radius: 15px;
+}
+
 .as-input {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  align-items: center;
+  align-items: end;
   width: 100%;
 }
 
@@ -294,12 +323,9 @@ async function addNewSession() {
   width: 100%;
 }
 
-.input-field {
-  width: 300px;
-}
-
 .input-number {
-  margin-right: 80px;
+  margin-right: 10px;
+  width: 200px;
 }
 
 .as-fun-selector {
@@ -312,6 +338,7 @@ async function addNewSession() {
   background-color: whitesmoke;
   border-radius: 10px;
   padding: 5px;
+  margin-top: 30px;
 }
 
 .toggle-button {

diff --git a/src/renderer/src/components/SingleGameSetting.vue b/src/renderer/src/components/SingleGameSetting.vue
@@ -57,7 +57,16 @@
               @contextmenu="onRightClickLogo"
             />
             <ContextMenu ref="menu_logo" :model="items" />
-            <label for="heroe">Image du jeu</label>
+            <label for="heroe">Grille du jeu</label>
+            <InputText
+              id="grid"
+              type="text"
+              v-model="grid"
+              style="width: 400px"
+              @contextmenu="onRightClickGrid"
+            />
+            <ContextMenu ref="menu_grid" :model="items_grid" />
+            <label for="heroe">Heroe du jeu</label>
             <InputText
               id="heroe"
               type="text"
@@ -89,12 +98,13 @@ import { storeToRefs } from "pinia";
 import { useToast } from "primevue/usetoast";
 import { convertMinuteToHoursMinute } from "../common/main";
 
-const props = defineProps(["name", "logo", "heroe"]);
+const props = defineProps(["name", "logo", "heroe", "grid"]);
 const name = computed(() => {
   return props.name;
 });
 const logo = ref(props.logo);
 const heroe = ref(props.heroe);
+const grid = ref(props.grid);
 const heroe_url = computed(() => {
   return "url(" + props.heroe + ")";
 });
@@ -146,6 +156,24 @@ const items_heroe = ref([
   },
 ]);
 
+const menu_grid = ref();
+const items_grid = ref([
+  {
+    label: "Copier",
+    icon: "pi pi-copy",
+    command: () => {
+      navigator.clipboard.writeText(grid.value);
+    },
+  },
+  {
+    label: "Coller",
+    icon: "pi pi-clone",
+    command: () => {
+      paste(grid);
+    },
+  },
+]);
+
 const onRightClickLogo = (event) => {
   menu_logo.value.show(event);
 };
@@ -154,6 +182,10 @@ const onRightClickHeroe = (event) => {
   menu_heroe.value.show(event);
 };
 
+const onRightClickGrid = (event) => {
+  menu_grid.value.show(event);
+};
+
 const game_id = ref("");
 
 function getGameId() {
@@ -238,7 +270,12 @@ watch(name, () => {
 
 async function useModifyGame() {
   loading.value = true;
-  const success = await modifyGame(name.value, logo.value, heroe.value);
+  const success = await modifyGame(
+    name.value,
+    logo.value,
+    heroe.value,
+    grid.value
+  );
   loading.value = false;
   if (success) {
     icon.value = "pi pi-check";

diff --git a/src/renderer/src/database/database.js b/src/renderer/src/database/database.js
@@ -7,7 +7,12 @@ import {
   query,
   where,
 } from "firebase/firestore";
-import { getGameId, getGameLogo, getGameHeroe } from "../api/steamgriddb";
+import {
+  getGameId,
+  getGameLogo,
+  getGameHeroe,
+  getGameGrid,
+} from "../api/steamgriddb";
 
 //Teams
 export async function getTeams() {
@@ -121,14 +126,15 @@ export async function getGames() {
   return gamesList;
 }
 
-export async function modifyGame(name, logo, heroe) {
+export async function modifyGame(name, logo, heroe, grid) {
   try {
     const q = query(collection(db, "games"), where("name", "==", name));
     const gameDocument = (await getDocs(q)).docs[0];
     await setDoc(doc(db, "games", gameDocument.id), {
       name: name,
       logo: logo === undefined ? "" : logo,
       heroe: heroe === undefined ? "" : heroe,
+      grid: grid === undefined ? "" : grid,
     });
     return true;
   } catch (error) {
@@ -152,6 +158,7 @@ export async function addImagesToGame(gameName) {
   let gameid = "";
   let gameLogo = "";
   let gameHeroe = "";
+  let gameGrid = "";
   try {
     gameid = await getGameId(gameName);
   } catch (err) {
@@ -162,6 +169,7 @@ export async function addImagesToGame(gameName) {
   try {
     gameLogo = await getGameLogo(gameid);
     gameHeroe = await getGameHeroe(gameid);
+    gameGrid = await getGameGrid(gameid);
   } catch (err) {
     console.log("error getting game images from steamgriddb", err);
     return;
@@ -172,5 +180,6 @@ export async function addImagesToGame(gameName) {
     name: game.name,
     logo: gameLogo,
     heroe: gameHeroe,
+    grid: gameGrid,
   });
 }
diff --git a/src/renderer/src/views/GamesSettings.vue b/src/renderer/src/views/GamesSettings.vue
@@ -29,6 +29,7 @@
         :name="g.name"
         :heroe="g.heroe"
         :logo="g.logo"
+        :grid="g.grid"
       />
     </div>
   </div>