chore: rename tabs, declare routes, use icons for tabs; layout updates

components/GameTab.vue

@@ -4,10 +4,12 @@
     :class="[colorClasses, index < 5 && 'mr-px']"
     @click="$store.commit('setActiveTab', index)"
   >
-    <template v-if="!tabData.locked">{{ tabData.label }}</template>
-    <template v-if="tabData.locked"
-      ><i class="fa fa-lock" aria-hidden="true"></i
-    ></template>
+    <template v-if="!tabData.locked">
+      <span :class="tabData.label" />
+    </template>
+    <template v-if="tabData.locked">
+      <span class="fas fa-lock" />
+    </template>
   </div>
 </template>
 

pages/index.vue

@@ -10,7 +10,7 @@
 
     <main class="bg-gray-400 grid w-full h-full overflow-auto relative">
       <div
-        class="flex flex-row bg-gray-300 border border-gray-600 font-semibold"
+        class="flex flex-row bg-gray-300 border border-gray-600 font-semibold h-10"
       >
         <div class="text-center pt-2 pb-1 flex-grow border-r border-gray-600">
           Dec. 1990
@@ -44,7 +44,7 @@
         </div>
       </div>
 
-      <div class="tabs flex flex-row w-full bg-gray-400 text-gray-400">
+      <div class="tabs flex flex-row w-full bg-gray-400 text-gray-400 h-10">
         <game-tab
           v-for="(tab, index) in $store.state.tabs"
           :key="index"
@@ -131,11 +131,11 @@ html {
 
 <style scoped>
 .page {
-  grid-template-rows: 4rem 1fr auto;
+  grid-template-rows: 0rem 1fr auto;
 }
 
 main {
-  grid-template-rows: auto minmax(0, 1fr) auto auto minmax(0, 2fr);
+  grid-template-rows: auto minmax(0, 2fr) auto auto minmax(0, 3fr);
 }
 
 .units-background {

store/index.js

@@ -5,52 +5,52 @@ export const state = () => ({
   activeTabIndex: 0,
   tabs: [
     {
-      id: 'instruments',
-      label: '1',
-      title: 'Instruments',
+      route: '/',
+      label: 'fas fa-clock',
+      title: 'Timekeeping Instruments',
       darkColor: 'yellow-600',
       lightColor: 'yellow-200',
       locked: false,
     },
     {
-      id: 'upgrades',
-      label: '2',
-      title: 'Upgrades',
+      route: '/apprentices',
+      label: 'fas fa-user-friends',
+      title: 'Apprentices',
       darkColor: 'blue-600',
       lightColor: 'blue-200',
       locked: false,
     },
     {
-      id: 'missions',
-      label: '3',
+      route: '/missions',
+      label: 'fas fa-th-list',
       title: 'Missions',
       darkColor: 'violet-600',
       lightColor: 'violet-200',
-      locked: true,
+      locked: false,
     },
     {
-      id: 'timemachine',
-      label: '4',
+      route: '/timemachine',
+      label: 'fas fa-fast-forward',
       title: 'Time Machine',
       darkColor: 'lime-600',
       lightColor: 'lime-200',
-      locked: true,
+      locked: false,
     },
     {
-      id: 'achievements',
-      label: '5',
+      route: '/timemagic',
+      label: 'fas fa-eye',
       title: 'Time Magic',
       darkColor: 'orange-600',
       lightColor: 'orange-200',
-      locked: true,
+      locked: false,
     },
     {
-      id: 'prestige',
-      label: '6',
-      title: 'Etc.',
+      route: '/wisdom',
+      label: 'fas fa-book-open',
+      title: 'Wisdom',
       darkColor: 'teal-600',
       lightColor: 'teal-200',
-      locked: true,
+      locked: false,
     },
   ],
   currency: new Decimal(0),