Implemented "main" UI and added big number abstraction
This commit is contained in:
parent
3a8c92f0b7
commit
5e4ec334a7
13 changed files with 538 additions and 4 deletions
BIN
public/images/discord.png
Normal file
BIN
public/images/discord.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
public/images/options_wheel.png
Normal file
BIN
public/images/options_wheel.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
77
src/App.vue
77
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>
|
||||
|
|
|
|||
184
src/components/system/Nav.vue
Normal file
184
src/components/system/Nav.vue
Normal file
|
|
@ -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>
|
||||
28
src/components/system/TPS.vue
Normal file
28
src/components/system/TPS.vue
Normal file
|
|
@ -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>
|
||||
39
src/data/mod.js
Normal file
39
src/data/mod.js
Normal file
|
|
@ -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
|
||||
};
|
||||
27
src/data/themes.js
Normal file
27
src/data/themes.js
Normal file
|
|
@ -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"
|
||||
}
|
||||
};
|
||||
2
src/lib/break_eternity.js
Normal file
2
src/lib/break_eternity.js
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -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: {
|
||||
|
|
|
|||
19
src/util/bignum.js
Normal file
19
src/util/bignum.js
Normal file
|
|
@ -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;
|
||||
142
src/util/break_eternity.js
Normal file
142
src/util/break_eternity.js
Normal file
|
|
@ -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;
|
||||
}
|
||||
15
src/util/load.js
Normal file
15
src/util/load.js
Normal file
|
|
@ -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()
|
||||
}
|
||||
}
|
||||
5
vue.config.js
Normal file
5
vue.config.js
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
module.exports = {
|
||||
publicPath: process.env.NODE_ENV === 'production'
|
||||
? '/The-Modding-Tree-X'
|
||||
: '/'
|
||||
};
|
||||
Loading…
Reference in a new issue