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

This commit is contained in:
pskfyi 2022-01-08 15:42:22 -08:00 committed by pskfyi
parent f5d689117a
commit 484f773e8a
3 changed files with 29 additions and 27 deletions

View File

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

View File

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

View File

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