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;
  }>;
  };
 };