Implemented "main" UI and added big number abstraction

src/App.vue

@@ -1,16 +1,89 @@
 <template>
-	<div id="app">
+	<div id="app" @mousemove="updateMouse" :style="theme">
+		<Nav />
+		<TPS v-if="showTPS || true" />
 	</div>
 </template>
 
 <script>
+import Nav from './components/system/Nav.vue';
+import TPS from './components/system/TPS.vue';
+import themes from './data/themes.js';
+import { mapState } from 'vuex';
+
 export default {
 	name: 'App',
 	components: {
+		Nav, TPS
+	},
+	computed: {
+		...mapState([ 'showTPS' ]),
+		theme() {
+			return themes[this.$store.state.theme || "default"];
+		}
+	},
+	methods: {
+		updateMouse(event) {
+			console.log("TODO updateMouse", event)
 		}
 	}
+};
 </script>
 
 <style>
+* {
+	transition-duration: 0.5s;
+	text-align: center;
+	font-family: "Roboto Mono", monospace;
+	font-weight: bold;
+	table-align: center;
+	margin: auto;
+	-webkit-text-size-adjust: none;
+	text-size-adjust: none;
+}
 
+*:focus {
+	outline: none;
+	webkit-outline: none;
+}
+
+body {
+	overflow: hidden;
+	min-width: 640px;
+	transition: none;
+}
+
+html, body, #app {
+	min-height: 100%;
+	height: 100%;
+}
+
+h1, h2, h3, b, input {
+	display: inline;
+}
+
+a,
+.link {
+    display: block;
+    font-size: 20px;
+    color: #02f2f2;
+    cursor: pointer;
+    text-decoration: none;
+}
+
+a:hover,
+.link:hover {
+    transform: scale(1.2, 1.2);
+    text-shadow: 5px 0 10px #02f2f2,
+    -3px 0 12px #02f2f2;
+}
+
+ul {
+    list-style-type: none;
+}
+
+#app {
+	background-color: var(--background);
+	color: var(--color);
+}
 </style>

src/components/system/Nav.vue

@@ -0,0 +1,184 @@
+<template>
+	<div class="nav" v-if="useHeader">
+		<img v-if="banner" :src="banner" height="100%" :alt="title" />
+		<div v-else class="title">{{ title }}</div>
+		<div class="version" @click="showTab('changelog-tab')">v{{ version }}</div>
+		<div style="flex-grow: 1"></div>
+		<div class="discord">
+			<img src="images/discord.png" @click="window.open(discordLink, 'mywindow')" />
+			<ul class="discord-links">
+				<li v-if="discordLink !== 'https://discord.gg/WzejVAx'">
+					<a :href="discordLink" target="_blank">{{ discordName }}</a>
+				</li>
+				<li><a href="https://discord.gg/WzejVAx" target="_blank">TMT-X Server</a></li>
+				<li><a href="https://discord.gg/F3xveHV" target="_blank">TMT Server</a></li>
+				<li><a href="http://discord.gg/wwQfgPa" target="_blank">TPT Server</a></li>
+			</ul>
+		</div>
+		<div v-if="tab !== 'info-tab'" class="info" @click="showTab('info-tab')"><br/>i</div>
+		<img v-if="tab !== 'options-tab'" class="options" src="images/options_wheel.png"
+			@click="showTab('options-tab')" />
+	</div>
+	<div v-else>
+		<div class="discord overlay">
+			<img src="images/discord.png" @click="openDiscord" />
+			<ul class="discord-links">
+				<li v-if="discordLink !== 'https://discord.gg/WzejVAx'">
+					<a :href="discordLink" target="_blank">{{ discordName }}</a>
+				</li>
+				<li><a href="https://discord.gg/WzejVAx" target="_blank">TMT-X Server</a></li>
+				<li><a href="https://discord.gg/F3xveHV" target="_blank">TMT Server</a></li>
+				<li><a href="http://discord.gg/wwQfgPa" target="_blank">TPT Server</a></li>
+			</ul>
+		</div>
+		<div v-if="tab !== 'info-tab'" class="info overlay" @click="showTab('info-tab')"><br/>i</div>
+		<img v-if="tab !== 'options-tab'" class="options overlay" src="images/options_wheel.png"
+			@click="showTab('options-tab')" />
+		<div class="version overlay" @click="showTab('changelog-tab')">v{{ version }}</div>
+	</div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import modInfo from '../../data/mod.js';
+
+export default {
+	name: 'Nav',
+	data() {
+		return {
+			useHeader: modInfo.useHeader,
+			banner: modInfo.banner,
+			title: modInfo.title,
+			discordName: modInfo.discordName,
+			discordLink: modInfo.discordLink,
+			version: modInfo.versionNumber
+		}
+	},
+	computed: mapState([ 'tab' ]),
+	methods: {
+		openDiscord() {
+			window.open(this.discordLink, 'mywindow');
+		},
+		showTab(tab) {
+			console.log("TODO show tab", tab);
+		}
+	}
+};
+</script>
+
+<style scoped>
+	.nav {
+		background-color: var(--background_nav);
+		display: flex;
+		left: 0;
+		right: 0;
+		top: 0;
+		height: 50px;
+		z-index: 9999999;
+	}
+
+	.title {
+		font-size: 36px;
+		text-align: left;
+		margin-left: 12px;
+	}
+
+	.discord {
+		width: 40px;
+		height: 40px;
+		cursor: pointer;
+	}
+
+	.discord.overlay {
+		position: absolute;
+		top: 120px;
+		left: 4px;
+	}
+
+	.discord img {
+		width: 100%;
+		height: 100%;
+	}
+
+	.discord-links {
+		position: fixed;
+		top: 45px;
+		padding: 30px;
+		right: -280px;
+		width: 200px;
+		transition: right .25s ease;
+		background: var(--background_nav);
+	}
+
+	.discord.overlay .discord-links {
+		top: 160px;
+		right: unset;
+		left: -280px;
+		transition: left .25s ease;
+	}
+
+	.discord:not(.overlay):hover .discord-links {
+		right: 0;
+	}
+
+	.discord.overlay:hover .discord-links {
+		left: 0;
+	}
+
+	.info {
+		font-size: 20px;
+		color: var(--link);
+		line-height: 14px;
+		width: 40px;
+		height: 40px;
+		cursor: pointer;
+	}
+
+	.info.overlay {
+		position: absolute;
+		top: 60px;
+		left: 4px;
+	}
+
+	.info:hover {
+		transform: scale(1.2, 1.2);
+		text-shadow: 5px 0 10px var(--link),
+			-3px 0 12px var(--link);
+	}
+
+	.options {
+		height: 50px;
+		width: 50px;
+		cursor: pointer;
+		transition-duration: .5s;
+	}
+
+	.options.overlay {
+		position: absolute;
+		top: 0;
+		left: 0;
+	}
+
+	.options:hover {
+		transform: rotate(360deg);
+	}
+
+	.version {
+		margin-left: 12px;
+		margin-right: 12px;
+		margin-bottom: 7px;
+		color: var(--points);
+		cursor: pointer;
+	}
+
+	.version.overlay {
+		position: absolute;
+		right: 4px;
+		top: 4px;
+	}
+
+	.version:hover {
+		transform: scale(1.2, 1.2);
+		text-shadow: 5px 0 10px var(--points), -3px 0 12px var(--points);
+	}
+</style>

src/components/system/TPS.vue

@@ -0,0 +1,28 @@
+<template>
+	<div class="tpsDisplay">
+		TPS: {{ tps }}
+	</div>
+</template>
+
+<script>
+import Decimal, { format } from '../../util/bignum.js';
+
+export default {
+	name: 'TPS',
+	computed: {
+		tps() {
+			const lastTenTicks = this.$store.state.lastTenTicks;
+			return format(Decimal.div(lastTenTicks.length, lastTenTicks.reduce((acc, curr) => acc + curr, 0)))
+		}
+	}
+};
+</script>
+
+<style scoped>
+.tpsDisplay {
+	position: absolute;
+	left: 10px;
+	bottom: 10px;
+	z-index: 10000000;
+}
+</style>

src/data/mod.js

@@ -0,0 +1,39 @@
+// import TreeTab from '../components/system/TreeTab.vue';
+// Import Decimal and numberUtils from a different file to globally change which big num library gets used
+import Decimal, * as numberUtils from '../util/break_eternity.js';
+
+export default {
+	// General Info
+	title: "The Modding Tree X",
+	id: "tmt-x",
+	author: "thepaperpilot",
+	discordName: "TMT-X Server",
+	discordLink: "https://discord.gg/WzejVAx",
+
+	// Gameplay Options
+	getStartingData() {
+		return {
+			points: new Decimal(10),
+		}
+	},
+	// TODO getPointGen or some abstract version?
+	hasWon() {
+		return false;
+	},
+
+	// Version
+	versionNumber: "0.0",
+	versionTitle: "Initial Commit",
+
+	// UI options
+	allowSmall: false,
+	useHeader: true,
+	//defaultTab: TreeTab
+
+	// Advanced Options
+	/* eslint-disable-next-line no-unused-vars */
+	fixOldSave(oldVersion) {
+	},
+	bigNum: { Decimal, ...numberUtils },
+	maxTickLength: 3600
+};

src/data/themes.js

@@ -0,0 +1,27 @@
+const defaultTheme = {
+	"--background": "#0f0f0f",
+	"--background_tooltip": "rgba(0, 0, 0, 0.75)",
+	"--background_nav": "#0f0f0f",
+	"--color": "#dfdfdf",
+	"--points": "#ffffff",
+	"--locked": "#bf8f8f",
+	"--link": "#02f2f2"
+};
+
+export default {
+	default: defaultTheme,
+	paper: {
+		...defaultTheme,
+		"--background": "#2a323d",
+		"--background_nav": "#333c4a"
+	},
+	aquad: {
+		...defaultTheme,
+		"--background": "#001f3f",
+		"--background_tooltip": "rgba(0, 15, 31, 0.75)",
+		"--background_nav": "#001f3f",
+		"--color": "#bfdfff",
+		"--points": "#dfefff",
+		"--locked": "#c4a7b3"
+	}
+};

src/store/index.js

@@ -1,11 +1,11 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
+import { getInitialStore } from '../util/load.js';
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
-	state: {
+	state: getInitialStore(),
-	},
 	mutations: {
 	},
 	actions: {

src/util/bignum.js

@@ -0,0 +1,19 @@
+// This class is just used to lookup the correct bignum library set in modInfo and pass it, along with its format utility functions, through this file
+// This way switching out big number libraries just needs to happen in mod.js, not every file that needs big numbers
+
+import modInfo from '../data/mod.js';
+
+export const {
+	Decimal,
+	exponentialFormat,
+	commaFormat,
+	regularFormat,
+	format,
+	formatWhole,
+	formatTime,
+	toPlaces,
+	formatSmall,
+	invertOOM
+} = modInfo.bigNum;
+
+export default Decimal;

src/util/break_eternity.js

@@ -0,0 +1,142 @@
+import Decimal from '../lib/break_eternity.js';
+import modInfo from '../data/mod.js';
+
+export default Decimal;
+
+const decimalOne = new Decimal(1);
+
+export function exponentialFormat(num, precision, mantissa = true) {
+	let e = num.log10().floor();
+	let m = num.div(Decimal.pow(10, e));
+	if(m.toStringWithDecimalPlaces(precision) === 10) {
+		m = decimalOne;
+		e = e.add(1);
+	}
+	e = (e.gte(1e9) ? format(e, 3) : (e.gte(10000) ? commaFormat(e, 0) : e.toStringWithDecimalPlaces(0)))
+	if (mantissa) {
+		return m.toStringWithDecimalPlaces(precision)+"e"+e;
+	} else {
+		return "e"+e;
+	}
+}
+
+export function commaFormat(num, precision) {
+	if (num === null || num === undefined) {
+		return "NaN";
+	}
+	if (num.mag < 0.001) {
+		return (0).toFixed(precision);
+	}
+	let init = num.toStringWithDecimalPlaces(precision)
+	let portions = init.split(".")
+	portions[0] = portions[0].replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")
+	if (portions.length == 1) return portions[0]
+	return portions[0] + "." + portions[1]
+}
+
+export function regularFormat(num, precision) {
+	if (num === null || num === undefined) {
+		return "NaN";
+	}
+	if (num.mag < 0.0001) {
+		return (0).toFixed(precision);
+	}
+	if (num.mag < 0.1 && precision !== 0) {
+		precision = Math.max(precision, 4);
+	}
+	return num.toStringWithDecimalPlaces(precision);
+}
+
+export function format(decimal, precision=2, small) {
+	small = small || modInfo.allowSmall;
+	decimal = new Decimal(decimal);
+	if (isNaN(decimal.sign)||isNaN(decimal.layer)||isNaN(decimal.mag)) {
+		//player.hasNaN = true;
+		return "NaN";
+	}
+	if (decimal.sign<0) {
+		return "-"+format(decimal.neg(), precision);
+	}
+	if (decimal.mag === Number.POSITIVE_INFINITY) {
+		return "Infinity";
+	}
+	if (decimal.gte("eeee1000")) {
+		const slog = decimal.slog();
+		if (slog.gte(1e6)) {
+			return "F" + format(slog.floor());
+		} else {
+			return Decimal.pow(10, slog.sub(slog.floor())).toStringWithDecimalPlaces(3) + "F" + commaFormat(slog.floor(), 0);
+		}
+	} else if (decimal.gte("1e100000")) {
+		return exponentialFormat(decimal, 0, false);
+	} else if (decimal.gte("1e1000")) {
+		return exponentialFormat(decimal, 0);
+	} else if (decimal.gte(1e9)) {
+		return exponentialFormat(decimal, precision);
+	} else if (decimal.gte(1e3)) {
+		return commaFormat(decimal, 0);
+	} else if (decimal.gte(0.001) || !small) {
+		return regularFormat(decimal, precision);
+	} else if (decimal.eq(0)) {
+		return (0).toFixed(precision);
+	}
+
+	decimal = invertOOM(decimal);
+	if (decimal.lt("1e1000")){
+		const val = exponentialFormat(decimal, precision);
+		return val.replace(/([^(?:e|F)]*)$/, '-$1');
+	} else {
+		return format(decimal, precision) + "⁻¹";
+	}
+}
+
+export function formatWhole(decimal) {
+	decimal = new Decimal(decimal);
+	if (decimal.sign<0) {
+		return "-"+formatWhole(decimal.neg());
+	}
+	if (decimal.gte(1e9)) {
+		return format(decimal, 2);
+	}
+	if (decimal.lte(0.98) && !decimal.eq(0)) {
+		return format(decimal, 2);
+	}
+	return format(decimal, 0);
+}
+
+export function formatTime(s) {
+	if (s<60) {
+		return format(s)+"s";
+	} else if (s<3600) {
+		return formatWhole(Math.floor(s/60))+"m "+format(s%60)+"s";
+	} else if (s<86400) {
+		return formatWhole(Math.floor(s/3600))+"h "+formatWhole(Math.floor(s/60)%60)+"m "+format(s%60)+"s";
+	} else if (s<31536000) {
+		return formatWhole(Math.floor(s/84600)%365)+"d " + formatWhole(Math.floor(s/3600)%24)+"h "+formatWhole(Math.floor(s/60)%60)+"m "+format(s%60)+"s";
+	} else {
+		return formatWhole(Math.floor(s/31536000))+"y "+formatWhole(Math.floor(s/84600)%365)+"d " + formatWhole(Math.floor(s/3600)%24)+"h "+formatWhole(Math.floor(s/60)%60)+"m "+format(s%60)+"s";
+	}
+}
+
+export function toPlaces(x, precision, maxAccepted) {
+	x = new Decimal(x);
+	let result = x.toStringWithDecimalPlaces(precision);
+	if (new Decimal(result).gte(maxAccepted)) {
+		result = new Decimal(maxAccepted - Math.pow(0.1, precision)).toStringWithDecimalPlaces(precision);
+	}
+	return result;
+}
+
+// Will also display very small numbers
+export function formatSmall(x, precision=2) {
+	return format(x, precision, true);
+}
+
+export function invertOOM(x){
+	let e = x.log10().ceil();
+	let m = x.div(Decimal.pow(10, e));
+	e = e.neg();
+	x = new Decimal(10).pow(e).times(m);
+
+	return x;
+}

src/util/load.js

@@ -0,0 +1,15 @@
+import modInfo from '../data/mod.js';
+
+export function getInitialStore() {
+	return {
+		tabs: ["tree-tab"],
+		time: Date.now(),
+		autosave: true,
+		offlineProd: true,
+		timePlayed: 0,
+		keepGoing: false,
+		hasNaN: false,
+		lastTenTicks: [],
+		...modInfo.getStartingData()
+	}
+}

vue.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+	publicPath: process.env.NODE_ENV === 'production'
+  ? '/The-Modding-Tree-X'
+  : '/'
+};