Implemented displaying tabs

src/App.vue

@@ -1,12 +1,14 @@
 <template>
 	<div id="app" @mousemove="updateMouse" :style="theme">
 		<Nav />
-		<TPS v-if="showTPS || true" />
+		<Tabs />
+		<TPS v-if="showTPS" />
 	</div>
 </template>
 
 <script>
 import Nav from './components/system/Nav.vue';
+import Tabs from './components/system/Tabs.vue';
 import TPS from './components/system/TPS.vue';
 import themes from './data/themes.js';
 import { mapState } from 'vuex';
@@ -14,7 +16,7 @@ import { mapState } from 'vuex';
 export default {
 	name: 'App',
 	components: {
-		Nav, TPS
+		Nav, Tabs, TPS
 	},
 	computed: {
 		...mapState([ 'showTPS' ]),
@@ -23,8 +25,8 @@ export default {
 		}
 	},
 	methods: {
-		updateMouse(event) {
+		updateMouse(/* event */) {
-			console.log("TODO updateMouse", event)
+			// TODO use event to update mouse position for particles
 		}
 	}
 };
@@ -85,5 +87,7 @@ ul {
 #app {
 	background-color: var(--background);
 	color: var(--color);
+    display: flex;
+    flex-flow: column;
 }
 </style>

src/components/system/Nav.vue

@@ -61,6 +61,7 @@ export default {
 		},
 		showTab(tab) {
 			console.log("TODO show tab", tab);
+			// tabs.splice(1, tabs.length, tab);
 		}
 	}
 };
@@ -75,6 +76,7 @@ export default {
 		top: 0;
 		height: 50px;
 		z-index: 9999999;
+		width: 100%;
 	}
 
 	.title {

src/components/system/Tabs.vue

@@ -0,0 +1,59 @@
+<template>
+	<div class="tabs">
+		<div v-for="(tab, index) in tabs" class="tab" :key="index">
+			<button v-if="index > 0" class="goBack" @click="goBack(index)">←</button>
+			{{ tab }}
+			<div class="separator" v-if="index !== tabs.length - 1"></div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+
+export default {
+	name: 'Tabs',
+	computed: mapState([ 'tabs' ]),
+	methods: {
+		goBack(/* index */) {
+			// TODO tabs.splice(index)
+		}
+	}
+};
+</script>
+
+<style scoped>
+.tabs {
+    display: flex;
+    flex-grow: 1;
+    width: 100%;
+}
+
+.tab {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    padding: 0 10px;
+}
+
+.separator {
+	position: absolute;
+	right: -3px;
+	top: 0;
+	bottom: 0;
+	width: 6px;
+	background: var(--separator);
+}
+
+.goBack {
+    position: absolute;
+    top: 0;
+    left: 20px;
+    background-color: transparent;
+    border: 1px solid transparent;
+    color: var(--color);
+    font-size: 40px;
+    cursor: pointer;
+    line-height: 40px;
+}
+</style>

src/data/mod.js

@@ -5,6 +5,7 @@ import Decimal, * as numberUtils from '../util/break_eternity.js';
 export default {
 	// General Info
 	title: "The Modding Tree X",
+	banner: null,
 	id: "tmt-x",
 	author: "thepaperpilot",
 	discordName: "TMT-X Server",

src/data/themes.js

@@ -5,7 +5,8 @@ const defaultTheme = {
 	"--color": "#dfdfdf",
 	"--points": "#ffffff",
 	"--locked": "#bf8f8f",
-	"--link": "#02f2f2"
+	"--link": "#02f2f2",
+	"--separator": "#dfdfdf"
 };
 
 export default {
@@ -13,7 +14,8 @@ export default {
 	paper: {
 		...defaultTheme,
 		"--background": "#2a323d",
-		"--background_nav": "#333c4a"
+		"--background_nav": "#333c4a",
+		"--separator": "#333c4a"
 	},
 	aquad: {
 		...defaultTheme,
@@ -22,6 +24,7 @@ export default {
 		"--background_nav": "#001f3f",
 		"--color": "#bfdfff",
 		"--points": "#dfefff",
-		"--locked": "#c4a7b3"
+		"--locked": "#c4a7b3",
+		"--separator": "#bfdfff"
 	}
 };

src/main.js

@@ -1,10 +1,12 @@
-import Vue from 'vue'
+import Vue from 'vue';
-import App from './App.vue'
+import App from './App.vue';
-import store from './store'
+import store from './store';
 
-Vue.config.productionTip = false
+Vue.config.productionTip = false;
+
+window.player = store.state;
 
 new Vue({
 	store,
 	render: h => h(App)
-}).$mount('#app')
+}).$mount('#app');

src/util/load.js

@@ -2,7 +2,7 @@ import modInfo from '../data/mod.js';
 
 export function getInitialStore() {
 	return {
-		tabs: ["tree-tab"],
+		tabs: ["tree-tab", "info-tab", "dummy"],
 		time: Date.now(),
 		autosave: true,
 		offlineProd: true,
@@ -10,6 +10,7 @@ export function getInitialStore() {
 		keepGoing: false,
 		hasNaN: false,
 		lastTenTicks: [],
+		showTPS: true,
 		...modInfo.getStartingData()
 	}
 }