Center AppHeader, Rubiks SVGs

src/components/units/AppGames.vue

@@ -1,42 +1,20 @@
 <template>
     <div id="app-games">
         <input id="searchbar" type="text" v-model="search" @keydown.esc="search = ''" :placeholder="'Search for ' + gameType" /> <br />
-        <div id="category-header" v-if="Object.keys(gamesV3).length">
-            <h2>{{ gameTypeTitle }} with Animated GUIs</h2>
-        </div>
-        <div id="games">
-            <router-link class="v3" v-for="game in gamesV3" :key="game.id" :to="{ name: 'variants', params: { type: gameType, gameId: game.id } }">
-                <img :src="getLogoSource(game)" :alt="game.name + ' Logo'" style="width: 8rem" />
-                <p>{{ game.name }}</p>
-            </router-link>
-        </div>
-        <div id="category-header" v-if="Object.keys(gamesV2).length">
-            <h2>{{ gameTypeTitle }} with Artisan GUIs</h2>
-        </div>
-        <div id="games">
-            <router-link class="v2" v-for="game in gamesV2" :key="game.id" :to="{ name: 'variants', params: { type: gameType, gameId: game.id } }">
-                <img :src="getLogoSource(game)" :alt="game.name + ' Logo'" style="width: 8rem" />
-                <p>{{ game.name }}</p>
-            </router-link>
-        </div>
-        <div id="category-header" v-if="Object.keys(gamesV1).length">
-            <h2>{{ gameTypeTitle }} with Standard GUIs</h2>
-        </div>
-        <div id="games">
-            <router-link class="v1" v-for="game in gamesV1" :key="game.id" :to="{ name: 'variants', params: { type: gameType, gameId: game.id } }">
-                <img :src="getLogoSource(game)" :alt="game.name + ' Logo'" style="width: 8rem" />
-                <p>{{ game.name }}</p>
-            </router-link>
-        </div>
-        <div id="category-header" v-if="Object.keys(gamesV0).length">
-            <h2>{{ gameTypeTitle }} without GUIs (Still in Development)</h2>
-        </div>
-        <div id="games">
-            <router-link class="v0" v-for="game in gamesV0" :key="game.id" :to="{ name: 'variants', params: { type: gameType, gameId: game.id } }">
-                <img :src="getLogoSource(game)" :alt="game.name + ' Logo'" style="width: 8rem" />
-                <p>{{ game.name }}</p>
-            </router-link>
-        </div>
+
+        <g v-for="category in categories" :key="category.id">
+            <g v-if="category.members.length > 0">
+                <h2>{{ gameTypeTitle }} with{{ category.name }}</h2>
+                <div class="games">
+                    <g v-for="member in category.members" :key="member.id">
+                        <router-link :class="category.id" v-if="member.gui_status === category.id" :to="{ name: 'variants', params: { type: gameType, gameId: member.id } }">
+                            <img :src="getLogoSource(member)" style="width: 8rem" />
+                            <p :style="member.name.length < 17 ? 'font-size: 100%' : 'font-size: 90%'" >{{ member.name }}</p>
+                        </router-link>
+                    </g>
+                </div>
+            </g>
+        </g>
     </div>
 </template>
 
@@ -68,30 +46,25 @@ const gameType = computed(() => route.params.type as string);
 const gameTypeTitle = computed(() => gameType.value[0].toUpperCase() + gameType.value.slice(1));
 const search = ref("");
 
-const gamesV0 = computed(() => {
-    let unfiltered = store.getters.games(gameType.value).games;
-    const asArray = Object.entries(unfiltered);
-    const filtered = asArray.filter(([_, value]) => value.name.toLowerCase().includes(search.value.toLowerCase()) && value.gui_status === "v0");
-    return Object.fromEntries(filtered);
-});
-const gamesV1 = computed(() => {
-    let unfiltered = store.getters.games(gameType.value).games;
-    const asArray = Object.entries(unfiltered);
-    const filtered = asArray.filter(([_, value]) => value.name.toLowerCase().includes(search.value.toLowerCase()) && value.gui_status === "v1");
-    return Object.fromEntries(filtered);
-});
-const gamesV2 = computed(() => {
-    let unfiltered = store.getters.games(gameType.value).games;
-    const asArray = Object.entries(unfiltered);
-    const filtered = asArray.filter(([_, value]) => value.name.toLowerCase().includes(search.value.toLowerCase()) && value.gui_status === "v2");
-    return Object.fromEntries(filtered);
-});
-const gamesV3 = computed(() => {
-    let unfiltered = store.getters.games(gameType.value).games;
-    const asArray = Object.entries(unfiltered);
-    const filtered = asArray.filter(([_, value]) => value.name.toLowerCase().includes(search.value.toLowerCase()) && value.gui_status === "v3");
-    return Object.fromEntries(filtered);
+interface Category {
+    id: string;
+    name: string;
+    members: Game[];
+}
+
+const categories = computed(() => {
+    let categories: Category[] = [];
+    const asArray = Object.values(store.getters.games(gameType.value).games);
+    for (const strs of [["v3", " Animated GUIs"], ["v2", " Artisan GUIs"], ["v1", " Standard GUIs"], ["v0", "out GUIs (Still in Development)"]]) {
+        categories.push({
+            id: strs[0],
+            name: strs[1],
+            members: asArray.filter((value) => value.name.toLowerCase().includes(search.value.toLowerCase()) && value.gui_status === strs[0])
+        });
+    }
+    return categories;
 });
+
 store.dispatch(actionTypes.loadGames, { type: gameType.value });
 watch(
     () => route.params.type as string,
@@ -101,60 +74,70 @@ watch(
 </script>
 
 <style lang="scss" scoped>
-#app-games {
-    float: top;
-    padding: 1rem 10%;
-    > #searchbar {
-        border: 0.4rem solid var(--neutralColor);
-        border-radius: 1rem;
-        width: 37%;
-        height: 2rem;
-        font-size: 150%;
-        margin: 1rem;
-    }
-    > #category-header {
-        align-content: center;
-        align-items: center;
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        justify-content: center;
-        > h2 {
-            margin-top: 2rem;
-        }
-    }
-    > #games {
-        align-content: center;
-        align-items: center;
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        justify-content: center;
-        > a {
-            border: 0.1rem solid var(--neutralColor);
+    #app-games {
+        float: top;
+        padding: 1rem 10%;
+        > #searchbar {
+            border: 0.4rem solid var(--neutralColor);
             border-radius: 1rem;
+            width: 37%;
+            height: 2rem;
+            font-size: 150%;
             margin: 1rem;
-            padding: 1rem;
-            > * {
-                text-align: center;
-            }
         }
 
-        > a.v3 {
-            border: 0.2rem solid rgb(180, 27, 180);
-        }
+        g {
+            h2 {
+                align-content: center;
+                align-items: center;
+                display: flex;
+                flex-direction: row;
+                flex-wrap: wrap;
+                justify-content: center;
+                margin-top: 2rem;
+            }
 
-        > a.v2 {
-            border: 0.2rem solid gold;
-        }
+            .games {
+                align-content: center;
+                align-items: center;
+                display: flex;
+                flex-direction: row;
+                flex-wrap: wrap;
+                justify-content: center;
+                g {
+                    align-content: center;
+                    align-items: center;
+                    display: flex;
+                    flex-direction: row;
+                    flex-wrap: wrap;
+                    justify-content: center;
+                    a {
+                        border: 0.2rem solid var(--neutralColor);
+                        border-radius: 1rem;
+                        margin: 1rem;
+                        padding: 1rem;
+                        > * {
+                            text-align: center;
+                        }
+                    }
 
-        > a.v1 {
-            border: 0.2rem solid silver;
-        }
+                    a.v3 {
+                        border: 0.2rem solid rgb(180, 27, 180);
+                    }
+
+                    a.v2 {
+                        border: 0.2rem solid gold;
+                    }
+
+                    a.v1 {
+                        border: 0.2rem solid silver;
+                    }
 
-        > a.v0 {
-            border: 0.2rem solid #cd7f32;
+                    a.v0 {
+                        border: 0.2rem solid #cd7f32;
+                    }
+                }
+            }
         }
     }
-}
 </style>

src/components/units/Header/AppHeaderNavigations.vue

@@ -1,7 +1,7 @@
 <template>
     <nav id="app-header-navigations">
         <router-link v-for="route in routes" :key="route.name" :to="route.path">
-            <h2>{{ t(route.name) }}</h2>
+            {{ t(route.name) }}
         </router-link>
     </nav>
 </template>
@@ -21,22 +21,38 @@
 
 <style lang="scss" scoped>
     #app-header-navigations {
+        width: 40%;
         align-content: center;
         align-items: center;
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
         justify-content: center;
-        > a > h2 {
-            color: var(--primaryColor);
-            margin: 0 0.5rem;
-        }
-        > a.router-link-exact-active {
-            color: var(--themeColor);
+        > a {
+            font-size: 1.5em;
+            text-decoration: none;
+            padding-left: 0.7em;
+            padding-right: 0.7em;
             > h2 {
-                color: var(--themeColor);
+                font-weight: 500;
+                color: var(--primaryColor);
+                margin: 0 0.5rem;
             }
         }
+
+        > a:hover {
+            color: var(--backgroundColor);
+        }
+
+        > a.router-link-exact-active {
+            color: var(--primaryColor);
+            text-decoration: solid underline var(--primaryColor) 10%;
+        }
+
+        > a.router-link-exact-active:hover {
+            color: var(--backgroundColor);
+            text-decoration: solid underline var(--backgroundColor) 10%;
+        }
     }
 </style>
 

src/components/units/Header/AppHeaderPreferences.vue

@@ -89,6 +89,7 @@
 
 <style lang="scss" scoped>
     #app-header-preferences {
+        width: 30%;
         align-content: center;
         align-items: center;
         display: flex;

src/components/units/Header/AppHeaderTitle.vue

@@ -11,6 +11,7 @@
 
 <style lang="scss" scoped>
     #app-header-title {
+        width: 30%;
         align-content: center;
         align-items: center;
         display: flex;

src/scripts/apis/gamesCrafters/types.ts

@@ -61,6 +61,7 @@ export type GameVariant = Status & {
             startPosition: string;
             variantId: string;
             imageAutoGUIData: ImageAutoGUIData;
+            gui_status: string;
         }>;
     };
 };