profectus/Profectus
Template
1
0
Fork 4
Code Issues 38 Pull requests 6 Projects 2 Releases Packages Wiki Activity Actions

First pass at typescript support

Browse source 
Oh man did this end up requiring a *ton* of other work as well.
There's still a few typing issues I still can't quite work out,
and others I'd like to improve when I have time. In fact, this version
doesn't even really work, it has a stack overflow error caused by
a tooltip for some reason have a tree inside it, which in turn has
another tooltip, etc. There's also 17 errors that I *really* feel like
shouldn't be there, but they are, and 113 warnings - mostly using !
to assert that things are non-null. Lots of work left to do, to sum up.

The reason I'm committing this now is because I really need to get to
work on my game jam, and since it won't use a tree or really many of
TMT-X's features, I can get away with using a broken engine :)
This commit is contained in:
thepaperpilot 2021-08-16 23:30:54 -05:00
parent c4a3a0de4d
commit 0afcd1cd3d
134 changed files with 16132 additions and 7106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
.eslintrc.js Normal file
View file

@ -0,0 +1,20 @@
module.exports = {
root: true,
env: {
node: true
},
extends: [
"plugin:vue/vue3-essential",
"eslint:recommended",
"@vue/typescript/recommended",
"@vue/prettier",
"@vue/prettier/@typescript-eslint"
],
parserOptions: {
ecmaVersion: 2020
},
rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
}
};

4
.prettierrc.json Normal file
View file

@ -0,0 +1,4 @@
{
"printWidth": 100,
"tabWidth": 4
}

6
babel.config.js
View file

@ -1,5 +1,3 @@
module.exports = { module.exports = {
presets: [ presets: ["@vue/cli-plugin-babel/preset"]
'@vue/cli-plugin-babel/preset' };
]
}

5
jsconfig.json
View file

@ -1,5 +0,0 @@
{
"include": [
"./src/components/**/*"
]
}

2726
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

43
package.json
View file

@ -8,44 +8,49 @@
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"@ivanv/vue-collapse-transition": "^1.0.2",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"lodash.clonedeep": "^4.5.0", "lodash.clonedeep": "^4.5.0",
"vue": "^3.1.4", "vue": "^3.2.2",
"vue-next-select": "^2.7.0", "vue-class-component": "^8.0.0-rc.1",
"vue-next-select": "^2.9.0",
"vue-sortable": "github:Netbel/vue-sortable#master-fix", "vue-sortable": "github:Netbel/vue-sortable#master-fix",
"vue-textarea-autosize": "^1.1.1", "vue-textarea-autosize": "^1.1.1",
"vue-transition-expand": "^0.1.0" "vue-transition-expand": "^0.1.0"
}, },
"devDependencies": { "devDependencies": {
"@ivanv/vue-collapse-transition": "^1.0.2",
"@types/lodash.clonedeep": "^4.5.6",
"@typescript-eslint/eslint-plugin": "^4.18.0",
"@typescript-eslint/parser": "^4.18.0",
"@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-typescript": "~4.5.0",
"@vue/cli-service": "~4.5.0", "@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0-beta.1", "@vue/compiler-sfc": "^3.2.2",
"@vue/eslint-config-prettier": "^6.0.0",
"@vue/eslint-config-typescript": "^7.0.0",
"babel-eslint": "^10.1.0", "babel-eslint": "^10.1.0",
"eslint": "^6.7.2", "eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-alpha.0", "eslint-plugin-vue": "^7.0.0-alpha.0",
"prettier": "^1.19.1",
"raw-loader": "^4.0.2", "raw-loader": "^4.0.2",
"sass": "^1.36.0", "sass": "^1.36.0",
"sass-loader": "^10.2.0" "sass-loader": "^10.2.0",
}, "tsconfig-paths-webpack-plugin": "^3.5.1",
"eslintConfig": { "typescript": "~4.1.5"
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
}, },
"browserslist": [ "browserslist": [
"> 1%", "> 1%",
"last 2 versions", "last 2 versions",
"not dead" "not dead"
],
"gitHooks": {
"pre-commit": "lint-staged"
},
"lint-staged": {
"*.{js,vue}": [
"vue-cli-service lint",
"git add"
] ]
} }
}

21
src/App.vue
View file

@ -9,20 +9,21 @@
</div> </div>
</template> </template>
<script> <script lang="ts">
import themes from './data/themes'; import { defineComponent } from "vue";
import player from './game/player'; import themes from "./data/themes";
import modInfo from './data/modInfo.json'; import player from "./game/player";
import { mapState } from './util/vue'; import modInfo from "./data/modInfo.json";
import './main.css'; import { mapState } from "./util/vue";
import "./main.css";
export default { export default defineComponent({
name: 'App', name: "App",
data() { data() {
return { useHeader: modInfo.useHeader }; return { useHeader: modInfo.useHeader };
}, },
computed: { computed: {
...mapState([ 'showTPS' ]), ...mapState(["showTPS"]),
theme() { theme() {
return themes[player.theme].variables; return themes[player.theme].variables;
} }
@ -32,7 +33,7 @@ export default {
// TODO use event to update mouse position for particles // TODO use event to update mouse position for particles
} }
} }
}; });
</script> </script>
<style scoped> <style scoped>

58
src/components/features/Achievement.vue
View file

@ -1,52 +1,66 @@
<template> <template>
<tooltip v-if="achievement.unlocked" :display="tooltip"> <tooltip v-if="achievement.unlocked" :display="tooltip">
<div :style="style" <div
:class="{ [layer || tab.layer]: true, feature: true, achievement: true, locked: !achievement.earned, :style="style"
bought: achievement.earned }"> :class="{
[layer]: true,
feature: true,
achievement: true,
locked: !achievement.earned,
bought: achievement.earned
}"
>
<component v-if="display" :is="display" /> <component v-if="display" :is="display" />
<branch-node :branches="achievement.branches" :id="id" featureType="achievement" /> <branch-node :branches="achievement.branches" :id="id" featureType="achievement" />
</div> </div>
</tooltip> </tooltip>
</template> </template>
<script> <script lang="ts">
import { layers } from '../../game/layers'; import { layers } from "@/game/layers";
import { coerceComponent } from '../../util/vue'; import { CoercableComponent } from "@/typings/component";
import { Achievement } from "@/typings/features/achievement";
import { coerceComponent, InjectLayerMixin } from "@/util/vue";
import { Component, defineComponent } from "vue";
export default { export default defineComponent({
name: 'achievement', name: "achievement",
inject: [ 'tab' ], mixins: [InjectLayerMixin],
props: { props: {
layer: String, id: {
id: [ Number, String ] type: [Number, String],
required: true
}
}, },
computed: { computed: {
achievement() { achievement(): Achievement {
return layers[this.layer || this.tab.layer].achievements[this.id]; return layers[this.layer].achievements!.data[this.id];
}, },
style() { style(): Array<Partial<CSSStyleDeclaration> | undefined> {
return [ return [
layers[this.layer || this.tab.layer].componentStyles?.achievement, layers[this.layer].componentStyles?.achievement,
this.achievement.style, this.achievement.style,
this.achievement.image && this.achievement.earned ? { this.achievement.image && this.achievement.earned
? {
backgroundImage: `url(${this.achievement.image}` backgroundImage: `url(${this.achievement.image}`
} : null }
: undefined
]; ];
}, },
display() { display(): Component | string {
if (this.achievement.display) { if (this.achievement.display) {
return coerceComponent(this.achievement.display, 'h3'); return coerceComponent(this.achievement.display, "h3");
} }
return coerceComponent(this.achievement.name, 'h3'); return coerceComponent(this.achievement.name!, "h3");
}, },
tooltip() { tooltip(): CoercableComponent {
if (this.achievement.earned) { if (this.achievement.earned) {
return this.achievement.doneTooltip || this.achievement.tooltip || "You did it!"; return this.achievement.doneTooltip || this.achievement.tooltip || "You did it!";
} }
return this.achievement.goalTooltip || this.achievement.tooltip || "LOCKED"; return this.achievement.goalTooltip || this.achievement.tooltip || "LOCKED";
} }
} }
}; });
</script> </script>
<style scoped> <style scoped>

40
src/components/features/Achievements.vue
View file

@ -3,7 +3,11 @@
<template v-if="filteredAchievements.rows && filteredAchievements.cols"> <template v-if="filteredAchievements.rows && filteredAchievements.cols">
<div v-for="row in filteredAchievements.rows" class="row" :key="row"> <div v-for="row in filteredAchievements.rows" class="row" :key="row">
<div v-for="col in filteredAchievements.cols" :key="col"> <div v-for="col in filteredAchievements.cols" :key="col">
<achievement v-if="filteredAchievements[row * 10 + col] !== undefined" class="align" :id="row * 10 + col" /> <achievement
v-if="filteredAchievements[row * 10 + col] !== undefined"
class="align"
:id="row * 10 + col"
/>
</div> </div>
</div> </div>
</template> </template>
@ -13,24 +17,32 @@
</div> </div>
</template> </template>
<script> <script lang="ts">
import { layers } from '../../game/layers'; import { layers } from "@/game/layers";
import { getFiltered } from '../../util/vue'; import { Achievement } from "@/typings/features/achievement";
import { getFiltered, InjectLayerMixin } from "@/util/vue";
import { defineComponent, PropType } from "vue";
export default { export default defineComponent({
name: 'achievements', name: "achievements",
inject: [ 'tab' ], mixins: [InjectLayerMixin],
props: { props: {
layer: String, achievements: {
achievements: Array type: Object as PropType<Array<string>>
}
}, },
computed: { computed: {
filteredAchievements() { filteredAchievements(): Record<string, Achievement> {
return getFiltered(layers[this.layer || this.tab.layer].achievements, this.achievements); if (layers[this.layer].achievements) {
return getFiltered<Achievement>(
layers[this.layer].achievements!.data,
this.achievements
);
}
return {};
} }
} }
}; });
</script> </script>
<style scoped> <style scoped></style>
</style>

100
src/components/features/Bar.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div v-if="bar.unlocked" :style="style" class="bar"> <div v-if="bar.unlocked" :style="style" :class="{ [layer]: true, bar: true }">
<div class="overlayTextContainer border" :style="borderStyle"> <div class="overlayTextContainer border" :style="borderStyle">
<component class="overlayText" :style="textStyle" :is="display" /> <component class="overlayText" :style="textStyle" :is="display" />
</div> </div>
@ -10,85 +10,89 @@
</div> </div>
</template> </template>
<script> <script lang="ts">
import { layers } from '../../game/layers'; import { Direction } from "@/game/enums";
import { UP, DOWN, LEFT, RIGHT, DEFAULT, coerceComponent } from '../../util/vue'; import { layers } from "@/game/layers";
import Decimal from '../../util/bignum'; import { Bar } from "@/typings/features/bar";
import Decimal from "@/util/bignum";
import { coerceComponent, InjectLayerMixin } from "@/util/vue";
import { Component, defineComponent } from "vue";
export default { export default defineComponent({
name: 'bar', name: "bar",
inject: [ 'tab' ], mixins: [InjectLayerMixin],
props: { props: {
layer: String, id: {
id: [ Number, String ] type: [Number, String],
required: true
}
}, },
computed: { computed: {
bar() { bar(): Bar {
return layers[this.layer || this.tab.layer].bars[this.id]; return layers[this.layer].bars!.data[this.id];
}, },
progress() { progress(): number {
let progress = this.bar.progress instanceof Decimal ? this.bar.progress.toNumber() : this.bar.progress; let progress =
this.bar.progress instanceof Decimal
? this.bar.progress.toNumber()
: (this.bar.progress as number);
return (1 - Math.min(Math.max(progress, 0), 1)) * 100; return (1 - Math.min(Math.max(progress, 0), 1)) * 100;
}, },
style() { style(): Array<Partial<CSSStyleDeclaration> | undefined> {
return [ return [
{ 'width': this.bar.width + "px", 'height': this.bar.height + "px" }, { width: this.bar.width + "px", height: this.bar.height + "px" },
layers[this.layer || this.tab.layer].componentStyles?.bar, layers[this.layer].componentStyles?.bar,
this.bar.style this.bar.style
]; ];
}, },
borderStyle() { borderStyle(): Array<Partial<CSSStyleDeclaration> | undefined> {
return [ return [
{ 'width': this.bar.width + "px", 'height': this.bar.height + "px" }, { width: this.bar.width + "px", height: this.bar.height + "px" },
this.bar.borderStyle this.bar.borderStyle
]; ];
}, },
textStyle() { textStyle(): Array<Partial<CSSStyleDeclaration> | undefined> {
return [ return [this.bar.style, this.bar.textStyle];
this.bar.style,
this.bar.textStyle
];
}, },
backgroundStyle() { backgroundStyle(): Array<Partial<CSSStyleDeclaration> | undefined> {
return [ return [
{ 'width': this.bar.width + "px", 'height': this.bar.height + "px" }, { width: this.bar.width + "px", height: this.bar.height + "px" },
this.bar.style, this.bar.style,
this.bar.baseStyle, this.bar.baseStyle,
this.bar.borderStyle this.bar.borderStyle
]; ];
}, },
fillStyle() { fillStyle(): Array<Partial<CSSStyleDeclaration> | undefined> {
const fillStyle = { 'width': (this.bar.width + 0.5) + "px", 'height': (this.bar.height + 0.5) + "px" }; const fillStyle: Partial<CSSStyleDeclaration> = {
width: this.bar.width + 0.5 + "px",
height: this.bar.height + 0.5 + "px"
};
switch (this.bar.direction) { switch (this.bar.direction) {
case UP: case Direction.Up:
fillStyle['clip-path'] = `inset(${this.progress}% 0% 0% 0%)`; fillStyle.clipPath = `inset(${this.progress}% 0% 0% 0%)`;
fillStyle.width = this.bar.width + 1 + 'px'; fillStyle.width = this.bar.width + 1 + "px";
break; break;
case DOWN: case Direction.Down:
fillStyle['clip-path'] = `inset(0% 0% ${this.progress}% 0%)`; fillStyle.clipPath = `inset(0% 0% ${this.progress}% 0%)`;
fillStyle.width = this.bar.width + 1 + 'px'; fillStyle.width = this.bar.width + 1 + "px";
break; break;
case RIGHT: case Direction.Right:
fillStyle['clip-path'] = `inset(0% ${this.progress}% 0% 0%)`; fillStyle.clipPath = `inset(0% ${this.progress}% 0% 0%)`;
break; break;
case LEFT: case Direction.Left:
fillStyle['clip-path'] = `inset(0% 0% 0% ${this.progress} + '%)`; fillStyle.clipPath = `inset(0% 0% 0% ${this.progress} + '%)`;
break; break;
case DEFAULT: case Direction.Default:
fillStyle['clip-path'] = 'inset(0% 50% 0% 0%)'; fillStyle.clipPath = "inset(0% 50% 0% 0%)";
break; break;
} }
return [ return [fillStyle, this.bar.style, this.bar.fillStyle];
fillStyle,
this.bar.style,
this.bar.fillStyle
];
}, },
display() { display(): Component | string {
return coerceComponent(this.bar.display); return coerceComponent(this.bar.display);
} }
} }
}; });
</script> </script>
<style scoped> <style scoped>
@ -115,7 +119,7 @@ export default {
border-radius: 10px; border-radius: 10px;
border-color: var(--color); border-color: var(--color);
overflow: hidden; overflow: hidden;
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
margin: 0; margin: 0;
} }

122
src/components/features/Buyable.vue
View file

@ -1,8 +1,24 @@
<template> <template>
<div v-if="buyable.unlocked" style="display: grid"> <div v-if="buyable.unlocked" style="display: grid">
<button :style="style" @click="buyable.buy" @mousedown="start" @mouseleave="stop" @mouseup="stop" @touchstart="start" <button
:class="{ feature: true, [layer || tab.layer]: true, buyable: true, can: buyable.canBuy, locked: !buyable.canAfford, bought }" :style="style"
@touchend="stop" @touchcancel="stop" :disabled="!buyable.canBuy"> @click="buyable.buy"
@mousedown="start"
@mouseleave="stop"
@mouseup="stop"
@touchstart="start"
:class="{
feature: true,
[layer]: true,
buyable: true,
can: buyable.canBuy,
locked: !buyable.canAfford,
bought
}"
@touchend="stop"
@touchcancel="stop"
:disabled="!buyable.canBuy"
>
<div v-if="title"> <div v-if="title">
<component :is="title" /> <component :is="title" />
</div> </div>
@ -10,67 +26,95 @@
<mark-node :mark="buyable.mark" /> <mark-node :mark="buyable.mark" />
<branch-node :branches="buyable.branches" :id="id" featureType="buyable" /> <branch-node :branches="buyable.branches" :id="id" featureType="buyable" />
</button> </button>
<div v-if="(buyable.sellOne !== undefined && buyable.canSellOne !== false) || <div
(buyable.sellAll !== undefined && buyable.canSellAll !== false)" style="width: 100%"> v-if="
<button @click="buyable.sellAll" v-if="buyable.sellAll !== undefined && buyable.canSellAll !== false" (buyable.sellOne !== undefined && buyable.canSellOne !== false) ||
:class="{ 'buyable-button': true, can: buyable.unlocked, locked: !buyable.unlocked, feature: true }" (buyable.sellAll !== undefined && buyable.canSellAll !== false)
:style="{ 'background-color': buyable.canSellAll ? layerColor : '' }"> "
style="width: 100%"
>
<button
@click="buyable.sellAll"
v-if="buyable.sellAll !== undefined && buyable.canSellAll !== false"
:class="{
'buyable-button': true,
can: buyable.unlocked,
locked: !buyable.unlocked,
feature: true
}"
:style="{ 'background-color': buyable.canSellAll ? layerColor : '' }"
>
Sell All Sell All
</button> </button>
<button @click="buyable.sellOne" v-if="buyable.sellOne !== undefined && buyable.canSellOne !== false" <button
:class="{ 'buyable-button': true, can: buyable.unlocked, locked: !buyable.unlocked, feature: true }" @click="buyable.sellOne"
:style="{ 'background-color': buyable.canSellOne ? layerColor : '' }"> v-if="buyable.sellOne !== undefined && buyable.canSellOne !== false"
:class="{
'buyable-button': true,
can: buyable.unlocked,
locked: !buyable.unlocked,
feature: true
}"
:style="{ 'background-color': buyable.canSellOne ? layerColor : '' }"
>
Sell One Sell One
</button> </button>
</div> </div>
</div> </div>
</template> </template>
<script> <script lang="ts">
import { layers } from '../../game/layers'; import { layers } from "@/game/layers";
import player from '../../game/player'; import player from "@/game/player";
import { coerceComponent } from '../../util/vue'; import { Buyable } from "@/typings/features/buyable";
import { coerceComponent, InjectLayerMixin } from "@/util/vue";
import { Component, defineComponent } from "vue";
export default { export default defineComponent({
name: 'buyable', name: "buyable",
inject: [ 'tab' ], mixins: [InjectLayerMixin],
props: { props: {
layer: String, id: {
id: [ Number, String ], type: [Number, String],
size: [ Number, String ] required: true
},
size: Number
}, },
data() { data() {
return { return {
interval: false, interval: null,
time: 0 time: 0
} as {
interval: number | null;
time: number;
}; };
}, },
computed: { computed: {
buyable() { buyable(): Buyable {
return layers[this.layer || this.tab.layer].buyables[this.id]; return layers[this.layer].buyables!.data[this.id];
}, },
bought() { bought(): boolean {
return player[this.layer || this.tab.layer].buyables[this.id].gte(this.buyable.purchaseLimit); return player.layers[this.layer].buyables[this.id].gte(this.buyable.purchaseLimit);
}, },
style() { style(): Array<Partial<CSSStyleDeclaration> | undefined> {
return [ return [
this.buyable.canBuy ? { 'background-color': layers[this.layer || this.tab.layer].color } : {}, this.buyable.canBuy ? { backgroundColor: layers[this.layer].color } : undefined,
this.size ? { 'height': this.size, 'width': this.size } : {}, this.size ? { height: this.size + "px", width: this.size + "px" } : undefined,
layers[this.layer || this.tab.layer].componentStyles?.buyable, layers[this.layer].componentStyles?.buyable,
this.buyable.style this.buyable.style
]; ];
}, },
title() { title(): Component | string | null {
if (this.buyable.title) { if (this.buyable.title) {
return coerceComponent(this.buyable.title, 'h2'); return coerceComponent(this.buyable.title, "h2");
} }
return null; return null;
}, },
display() { display(): Component | string {
return coerceComponent(this.buyable.display, 'div'); return coerceComponent(this.buyable.display, "div");
}, },
layerColor() { layerColor(): string {
return layers[this.layer || this.tab.layer].color; return layers[this.layer].color;
} }
}, },
methods: { methods: {
@ -80,12 +124,14 @@ export default {
} }
}, },
stop() { stop() {
if (this.interval) {
clearInterval(this.interval); clearInterval(this.interval);
this.interval = false; this.interval = null;
this.time = 0; this.time = 0;
} }
} }
}; }
});
</script> </script>
<style scoped> <style scoped>

82
src/components/features/Buyables.vue
View file

@ -1,63 +1,85 @@
<template> <template>
<div v-if="filteredBuyables" class="table"> <div v-if="filteredBuyables" class="table">
<respec-button v-if="showRespec" style="margin-bottom: 12px;" :confirmRespec="confirmRespec" <respec-button
@set-confirm-respec="setConfirmRespec" @respec="respec" /> v-if="showRespec"
style="margin-bottom: 12px;"
:confirmRespec="confirmRespec"
:respecWarningDisplay="respecWarningDisplay"
@set-confirm-respec="setConfirmRespec"
@respec="respec"
/>
<template v-if="filteredBuyables.rows && filteredBuyables.cols"> <template v-if="filteredBuyables.rows && filteredBuyables.cols">
<div v-for="row in filteredBuyables.rows" class="row" :key="row"> <div v-for="row in filteredBuyables.rows" class="row" :key="row">
<div v-for="col in filteredBuyables.cols" :key="col"> <div v-for="col in filteredBuyables.cols" :key="col">
<buyable v-if="filteredBuyables[row * 10 + col] !== undefined" class="align buyable-container" :style="{ height }" <buyable
:id="row * 10 + col" :size="height === 'inherit' ? null : height" /> v-if="filteredBuyables[row * 10 + col] !== undefined"
class="align buyable-container"
:style="{ height }"
:id="row * 10 + col"
:size="height === 'inherit' ? null : height"
/>
</div> </div>
</div> </div>
</template> </template>
<row v-else> <row v-else>
<buyable v-for="(buyable, id) in filteredBuyables" :key="id" class="align buyable-container" <buyable
:style="{ height }" :id="id" :size="height === 'inherit' ? null : height" /> v-for="(buyable, id) in filteredBuyables"
:key="id"
class="align buyable-container"
:style="{ height }"
:id="id"
:size="height === 'inherit' ? null : height"
/>
</row> </row>
</div> </div>
</template> </template>
<script> <script lang="ts">
import { layers } from '../../game/layers'; import { layers } from "@/game/layers";
import player from '../../game/player'; import player from "@/game/player";
import { getFiltered } from '../../util/vue'; import { CoercableComponent } from "@/typings/component";
import { Buyable } from "@/typings/features/buyable";
import { getFiltered, InjectLayerMixin } from "@/util/vue";
import { defineComponent, PropType } from "vue";
export default { export default defineComponent({
name: 'buyables', name: "buyables",
inject: [ 'tab' ], mixins: [InjectLayerMixin],
props: { props: {
layer: String, buyables: {
buyables: Array, type: Object as PropType<Array<string>>
},
height: { height: {
type: [Number, String], type: [Number, String],
default: "inherit" default: "inherit"
} }
}, },
emits: [ 'set-confirm-respec' ],
computed: { computed: {
filteredBuyables() { filteredBuyables(): Record<string, Buyable> {
return getFiltered(layers[this.layer || this.tab.layer].buyables, this.buyables); if (layers[this.layer].buyables) {
return getFiltered<Buyable>(layers[this.layer].buyables!.data, this.buyables);
}
return {};
}, },
showRespec() { showRespec(): boolean | undefined {
return layers[this.layer || this.tab.layer].buyables.showRespec; return layers[this.layer].buyables!.showRespecButton;
}, },
confirmRespec() { confirmRespec(): boolean {
return player[this.layer || this.tab.layer].buyables.confirmRespec; return player.layers[this.layer].confirmRespecBuyables;
},
respecWarningDisplay(): CoercableComponent | undefined {
return layers[this.layer].buyables?.respecWarningDisplay;
} }
}, },
methods: { methods: {
setConfirmRespec(value) { setConfirmRespec(value: boolean) {
if (this.confirmRespec != undefined) { player.layers[this.layer].confirmRespecBuyables = value;
this.$emit("set-confirm-respec", value);
} else {
player[this.layer || this.tab.layer].buyables.confirmRespec = value;
}
}, },
respec() { respec() {
layers[this.layer || this.tab.layer].buyables.respec?.(); layers[this.layer].buyables!.respec?.();
} }
} }
}; });
</script> </script>
<style scoped> <style scoped>

57
src/components/features/Challenge.vue
View file

@ -1,13 +1,17 @@
<template> <template>
<div v-if="challenge.shown" :style="style" <div
v-if="challenge.shown"
:style="style"
:class="{ :class="{
feature: true, feature: true,
[layer]: true,
challenge: true, challenge: true,
resetNotify: challenge.active, resetNotify: challenge.active,
notify: challenge.active && challenge.canComplete, notify: challenge.active && challenge.canComplete,
done: challenge.completed, done: challenge.completed,
maxed: challenge.maxed maxed: challenge.maxed
}"> }"
>
<div v-if="title"><component :is="title" /></div> <div v-if="title"><component :is="title" /></div>
<button :style="{ backgroundColor: challenge.maxed ? null : buttonColor }" @click="toggle"> <button :style="{ backgroundColor: challenge.maxed ? null : buttonColor }" @click="toggle">
{{ buttonText }} {{ buttonText }}
@ -19,40 +23,41 @@
</div> </div>
</template> </template>
<script> <script lang="ts">
import { layers } from '../../game/layers'; import { layers } from "@/game/layers";
import { coerceComponent } from '../../util/vue'; import { Challenge } from "@/typings/features/challenge";
import { coerceComponent, InjectLayerMixin } from "@/util/vue";
import { Component, defineComponent } from "vue";
export default { export default defineComponent({
name: 'challenge', name: "challenge",
inject: [ 'tab' ], mixins: [InjectLayerMixin],
props: { props: {
layer: String, id: {
id: [ Number, String ] type: [Number, String],
required: true
}
}, },
computed: { computed: {
challenge() { challenge(): Challenge {
return layers[this.layer || this.tab.layer].challenges[this.id]; return layers[this.layer].challenges!.data[this.id];
}, },
style() { style(): Array<Partial<CSSStyleDeclaration> | undefined> {
return [ return [layers[this.layer].componentStyles?.challenge, this.challenge.style];
layers[this.layer || this.tab.layer].componentStyles?.challenge,
this.challenge.style
];
}, },
title() { title(): Component | string | null {
if (this.challenge.titleDisplay) { if (this.challenge.titleDisplay) {
return coerceComponent(this.challenge.titleDisplay, 'div'); return coerceComponent(this.challenge.titleDisplay, "div");
} }
if (this.challenge.name) { if (this.challenge.name) {
return coerceComponent(this.challenge.name, 'h3'); return coerceComponent(this.challenge.name, "h3");
} }
return null; return null;
}, },
buttonColor() { buttonColor(): string {
return layers[this.layer || this.tab.layer].color; return layers[this.layer].color;
}, },
buttonText() { buttonText(): string {
if (this.challenge.active) { if (this.challenge.active) {
return this.challenge.canComplete ? "Finish" : "Exit Early"; return this.challenge.canComplete ? "Finish" : "Exit Early";
} }
@ -61,9 +66,9 @@ export default {
} }
return "Start"; return "Start";
}, },
fullDisplay() { fullDisplay(): Component | string | null {
if (this.challenge.fullDisplay) { if (this.challenge.fullDisplay) {
return coerceComponent(this.challenge.fullDisplay, 'div'); return coerceComponent(this.challenge.fullDisplay, "div");
} }
return null; return null;
} }
@ -73,7 +78,7 @@ export default {
this.challenge.toggle(); this.challenge.toggle();
} }
} }
}; });
</script> </script>
<style scoped> <style scoped>

33
src/components/features/Challenges.vue
View file

@ -3,7 +3,10 @@
<template v-if="filteredChallenges.rows && filteredChallenges.cols"> <template v-if="filteredChallenges.rows && filteredChallenges.cols">
<div v-for="row in filteredChallenges.rows" class="row" :key="row"> <div v-for="row in filteredChallenges.rows" class="row" :key="row">
<div v-for="col in filteredChallenges.cols" :key="col"> <div v-for="col in filteredChallenges.cols" :key="col">
<challenge v-if="filteredChallenges[row * 10 + col] !== undefined" :id="row * 10 + col" /> <challenge
v-if="filteredChallenges[row * 10 + col] !== undefined"
:id="row * 10 + col"
/>
</div> </div>
</div> </div>
</template> </template>
@ -13,24 +16,26 @@
</div> </div>
</template> </template>
<script> <script lang="ts">
import { layers } from '../../game/layers'; import { layers } from "@/game/layers";
import { getFiltered } from '../../util/vue'; import { Challenge } from "@/typings/features/challenge";
import { getFiltered, InjectLayerMixin } from "@/util/vue";
import { defineComponent, PropType } from "vue";
export default { export default defineComponent({
name: 'challenges', name: "challenges",
inject: [ 'tab' ], mixins: [InjectLayerMixin],
props: { props: {
layer: String, challenges: {
challenges: Array type: Object as PropType<Array<string>>
}
}, },
computed: { computed: {
filteredChallenges() { filteredChallenges(): Record<string, Challenge> {
return getFiltered(layers[this.layer || this.tab.layer].challenges, this.challenges); return getFiltered(layers[this.layer].challenges!.data, this.challenges);
} }
} }
}; });
</script> </script>
<style scoped> <style scoped></style>
</style>

78
src/components/features/Clickable.vue
View file

@ -1,8 +1,23 @@
<template> <template>
<div v-if="clickable.unlocked"> <div v-if="clickable.unlocked">
<button :style="style" @click="clickable.click" @mousedown="start" @mouseleave="stop" @mouseup="stop" @touchstart="start" <button
@touchend="stop" @touchcancel="stop" :disabled="!clickable.canClick" :style="style"
:class="{ feature: true, [layer || tab.layer]: true, clickable: true, can: clickable.canClick, locked: !clickable.canClick }"> @click="clickable.click"
@mousedown="start"
@mouseleave="stop"
@mouseup="stop"
@touchstart="start"
@touchend="stop"
@touchcancel="stop"
:disabled="!clickable.canClick"
:class="{
feature: true,
[layer]: true,
clickable: true,
can: clickable.canClick,
locked: !clickable.canClick
}"
>
<div v-if="title"> <div v-if="title">
<component :is="title" /> <component :is="title" />
</div> </div>
@ -13,61 +28,68 @@
</div> </div>
</template> </template>
<script> <script lang="ts">
import { layers } from '../../game/layers'; import { layers } from "@/game/layers";
import { coerceComponent } from '../../util/vue'; import { Clickable } from "@/typings/features/clickable";
import { coerceComponent, InjectLayerMixin } from "@/util/vue";
import { Component, defineComponent } from "vue";
export default { export default defineComponent({
name: 'clickable', name: "clickable",
inject: [ 'tab' ], mixins: [InjectLayerMixin],
props: { props: {
layer: String, id: {
id: [ Number, String ], type: [Number, String],
size: { required: true
type: [ Number, String ] },
} size: String
}, },
data() { data() {
return { return {
interval: false, interval: null,
time: 0 time: 0
} as {
interval: number | null;
time: number;
}; };
}, },
computed: { computed: {
clickable() { clickable(): Clickable {
return layers[this.layer || this.tab.layer].clickables[this.id]; return layers[this.layer].clickables!.data[this.id];
}, },
style() { style(): Array<Partial<CSSStyleDeclaration> | undefined> {
return [ return [
this.clickable.canClick ? { 'background-color': layers[this.layer || this.tab.layer].color } : {}, this.clickable.canClick ? { backgroundColor: layers[this.layer].color } : undefined,
this.size ? {'height': this.size, 'width': this.size} : {}, this.size ? { height: this.size, width: this.size } : undefined,
layers[this.layer || this.tab.layer].componentStyles?.clickable, layers[this.layer].componentStyles?.clickable,
this.clickable.style this.clickable.style
]; ];
}, },
title() { title(): Component | string | null {
if (this.clickable.title) { if (this.clickable.title) {
return coerceComponent(this.clickable.title, 'h2'); return coerceComponent(this.clickable.title, "h2");
} }
return null; return null;
}, },
display() { display(): Component | string {
return coerceComponent(this.clickable.display, 'div'); return coerceComponent(this.clickable.display, "div");
} }
}, },
methods: { methods: {
start() { start() {
if (!this.interval) { if (!this.interval && this.clickable.click) {
this.interval = setInterval(this.clickable.click, 250); this.interval = setInterval(this.clickable.click, 250);
} }
}, },
stop() { stop() {
if (this.interval) {
clearInterval(this.interval); clearInterval(this.interval);
this.interval = false; this.interval = null;
this.time = 0; this.time = 0;
} }
} }
}; }
});
</script> </script>
<style scoped> <style scoped>

60
src/components/features/Clickables.vue
View file

@ -1,32 +1,46 @@
<template> <template>
<div v-if="filteredClickables" class="table"> <div v-if="filteredClickables" class="table">
<master-button v-if="showMasterButton" style="margin-bottom: 12px;" @press="press" /> <master-button v-if="showMaster" style="margin-bottom: 12px;" @press="press" />
<template v-if="filteredClickables.rows && filteredClickables.cols"> <template v-if="filteredClickables.rows && filteredClickables.cols">
<div v-for="row in filteredClickables.rows" class="row" :key="row"> <div v-for="row in filteredClickables.rows" class="row" :key="row">
<div v-for="col in filteredClickables.cols" :key="col"> <div v-for="col in filteredClickables.cols" :key="col">
<clickable v-if="filteredClickables[row * 10 + col] !== undefined" class="align clickable-container" <clickable
:style="{ height }" :id="row * 10 + col" :size="height === 'inherit' ? null : height" /> v-if="filteredClickables[row * 10 + col] !== undefined"
class="align clickable-container"
:style="{ height }"
:id="row * 10 + col"
:size="height === 'inherit' ? null : height"
/>
</div> </div>
</div> </div>
</template> </template>
<row v-else> <row v-else>
<clickable v-for="(clickable, id) in filteredClickables" :key="id" class="align clickable-container" :style="{ height }" <clickable
:id="id" :size="height === 'inherit' ? null : height" /> v-for="(clickable, id) in filteredClickables"
:key="id"
class="align clickable-container"
:style="{ height }"
:id="id"
:size="height === 'inherit' ? null : height"
/>
</row> </row>
</div> </div>
</template> </template>
<script> <script lang="ts">
import { layers } from '../../game/layers'; import { Clickable } from "@/typings/features/clickable";
import { getFiltered } from '../../util/vue'; import { defineComponent, PropType } from "vue";
import { layers } from "@/game/layers";
import { getFiltered, InjectLayerMixin } from "@/util/vue";
export default { export default defineComponent({
name: 'clickables', name: "clickables",
inject: [ 'tab' ], mixins: [InjectLayerMixin],
props: { props: {
layer: String, achievements: {
clickables: Array, type: Object as PropType<Array<string>>
showMaster: { },
showMasterButton: {
type: Boolean, type: Boolean,
default: null default: null
}, },
@ -36,25 +50,25 @@ export default {
} }
}, },
computed: { computed: {
filteredClickables() { filteredClickables(): Record<string, Clickable> {
return getFiltered(layers[this.layer || this.tab.layer].clickables, this.clickables); return getFiltered(layers[this.layer].clickables!.data, this.clickables);
}, },
showMasterButton() { showMaster(): boolean | undefined {
if (layers[this.layer || this.tab.layer].clickables?.masterButtonClick == undefined) { if (layers[this.layer].clickables?.masterButtonClick == undefined) {
return false; return false;
} }
if (this.showMaster != undefined) { if (this.showMasterButton != undefined) {
return this.showMaster; return this.showMasterButton;
} }
return layers[this.layer || this.tab.layer].clickables?.showMaster; return layers[this.layer].clickables?.showMasterButton;
} }
}, },
methods: { methods: {
press() { press() {
layers[this.layer || this.tab.layer].clickables.masterButtonClick(); layers[this.layer].clickables?.masterButtonClick?.();
} }
} }
}; });
</script> </script>
<style scoped> <style scoped>

46
src/components/features/DefaultChallengeDisplay.vue
View file

@ -5,42 +5,48 @@
<component v-if="rewardDisplay" :is="rewardDisplay" /> <component v-if="rewardDisplay" :is="rewardDisplay" />
</template> </template>
<script> <script lang="ts">
import { layers } from '../../game/layers'; import { layers } from "@/game/layers";
import { coerceComponent } from '../../util/vue'; import { Challenge } from "@/typings/features/challenge";
import { coerceComponent, InjectLayerMixin } from "@/util/vue";
import { Component, defineComponent } from "vue";
export default { export default defineComponent({
name: 'default-challenge-display', name: "default-challenge-display",
inject: [ 'tab' ], mixins: [InjectLayerMixin],
props: { props: {
layer: String, id: {
id: [ Number, String ] type: [Number, String],
required: true
}
}, },
computed: { computed: {
challenge() { challenge(): Challenge {
return layers[this.layer || this.tab.layer].challenges[this.id]; return layers[this.layer].challenges!.data[this.id];
}, },
challengeDescription() { challengeDescription(): Component | string {
return coerceComponent(this.challenge.challengeDescription, 'div'); return coerceComponent(this.challenge.challengeDescription, "div");
}, },
goalDescription() { goalDescription(): Component | string {
if (this.challenge.goalDescription) { if (this.challenge.goalDescription) {
return coerceComponent(this.challenge.goalDescription); return coerceComponent(this.challenge.goalDescription);
} }
return coerceComponent(`{{ format(${this.challenge.goal}) }} ${this.challenge.currencyDisplayName || 'points'}`); return coerceComponent(
`{{ format(${this.challenge.goal}) }} ${this.challenge.currencyDisplayName ||
"points"}`
);
}, },
rewardDescription() { rewardDescription(): Component | string {
return coerceComponent(this.challenge.rewardDescription); return coerceComponent(this.challenge.rewardDescription);
}, },
rewardDisplay() { rewardDisplay(): Component | string | null {
if (this.challenge.rewardDisplay) { if (this.challenge.rewardDisplay) {
return coerceComponent(`Currently: ${this.challenge.rewardDisplay}`); return coerceComponent(`Currently: ${this.challenge.rewardDisplay}`);
} }
return null; return null;
},
} }
}; }
});
</script> </script>
<style scoped> <style scoped></style>
</style>

78
src/components/features/DefaultPrestigeButtonDisplay.vue
View file

@ -7,71 +7,73 @@
</span> </span>
</template> </template>
<script> <script lang="ts">
import { layers } from '../../game/layers'; import { layers } from "@/game/layers";
import player from '../../game/player'; import player from "@/game/player";
import { format, formatWhole } from '../../util/bignum'; import Decimal, { format, formatWhole } from "@/util/bignum";
import { InjectLayerMixin } from "@/util/vue";
import { defineComponent } from "vue";
export default { export default defineComponent({
name: 'default-prestige-button-display', name: "default-prestige-button-display",
inject: [ 'tab' ], mixins: [InjectLayerMixin],
props: {
layer: String
},
computed: { computed: {
resetDescription() { resetDescription(): string {
if (player[this.layer || this.tab.layer].points.lt(1e3) || layers[this.layer || this.tab.layer].type === "static") { if (player.layers[this.layer].points.lt(1e3) || layers[this.layer].type === "static") {
return layers[this.layer || this.tab.layer].resetDescription || "Reset for "; return layers[this.layer].resetDescription || "Reset for ";
} }
return ""; return "";
}, },
resetGain() { resetGain(): string {
return formatWhole(layers[this.layer || this.tab.layer].resetGain); return formatWhole(layers[this.layer].resetGain);
}, },
resource() { resource(): string {
return layers[this.layer || this.tab.layer].resource; return layers[this.layer].resource;
}, },
showNextAt() { showNextAt(): boolean {
if (layers[this.layer || this.tab.layer].showNextAt != undefined) { if (layers[this.layer].showNextAt != undefined) {
return layers[this.layer || this.tab.layer].showNextAt; return layers[this.layer].showNextAt!;
} else { } else {
return layers[this.layer || this.tab.layer].type === "static" ? return layers[this.layer].type === "static"
player[this.layer || this.tab.layer].points.lt(30) : // static ? player.layers[this.layer].points.lt(30) // static
player[this.layer || this.tab.layer].points.lt(1e3) && layers[this.layer || : player.layers[this.layer].points.lt(1e3) &&
this.tab.layer].resetGain.lt(100); // normal layers[this.layer].resetGain.lt(100); // normal
} }
}, },
nextAt() { nextAt(): string {
if (this.showNextAt) { if (this.showNextAt) {
let prefix; let prefix;
if (layers[this.layer || this.tab.layer].type === "static") { if (layers[this.layer].type === "static") {
if (layers[this.layer || this.tab.layer].baseAmount.gte(layers[this.layer || this.tab.layer].nextAt) && if (
layers[this.layer || this.tab.layer].canBuyMax !== false) { Decimal.gte(layers[this.layer].baseAmount!, layers[this.layer].nextAt) &&
layers[this.layer].canBuyMax !== false
) {
prefix = "Next:"; prefix = "Next:";
} else { } else {
prefix = "Req:"; prefix = "Req:";
} }
const baseAmount = formatWhole(layers[this.layer || this.tab.layer].baseAmount); const baseAmount = formatWhole(layers[this.layer].baseAmount!);
const nextAt = (layers[this.layer || this.tab.layer].roundUpCost ? formatWhole : format)(layers[this.layer || this.tab.layer].nextAtMax); const nextAt = (layers[this.layer].roundUpCost ? formatWhole : format)(
const baseResource = layers[this.layer || this.tab.layer].baseResource; layers[this.layer].nextAtMax
);
const baseResource = layers[this.layer].baseResource;
return `${prefix} ${baseAmount} / ${nextAt} ${baseResource}`; return `${prefix} ${baseAmount} / ${nextAt} ${baseResource}`;
} else { } else {
let amount; let amount;
if (layers[this.layer || this.tab.layer].roundUpCost) { if (layers[this.layer].roundUpCost) {
amount = formatWhole(layers[this.layer || this.tab.layer].nextAt); amount = formatWhole(layers[this.layer].nextAt);
} else { } else {
amount = format(layers[this.layer || this.tab.layer].nextAt); amount = format(layers[this.layer].nextAt);
} }
return `Next at ${amount} ${layers[this.layer || this.tab.layer].baseResource}`; return `Next at ${amount} ${layers[this.layer].baseResource}`;
} }
} }
return ""; return "";
} }
} }
}; });
</script> </script>
<style scoped> <style scoped></style>
</style>

51
src/components/features/DefaultUpgradeDisplay.vue
View file

@ -2,52 +2,55 @@
<span> <span>
<div v-if="title"><component :is="title" /></div> <div v-if="title"><component :is="title" /></div>
<component :is="description" /> <component :is="description" />
<div v-if="effectDisplay"><br>Currently: <component :is="effectDisplay" /></div> <div v-if="effectDisplay"><br />Currently: <component :is="effectDisplay" /></div>
<br> <br />
Cost: {{ cost }} {{ costResource }} Cost: {{ cost }} {{ costResource }}
</span> </span>
</template> </template>
<script> <script lang="ts">
import { layers } from '../../game/layers'; import { layers } from "@/game/layers";
import { coerceComponent } from '../../util/vue'; import { Upgrade } from "@/typings/features/upgrade";
import { formatWhole } from '../../util/bignum'; import { formatWhole } from "@/util/bignum";
import { coerceComponent, InjectLayerMixin } from "@/util/vue";
import { Component, defineComponent } from "vue";
export default { export default defineComponent({
name: 'default-upgrade-display', name: "default-upgrade-display",
inject: [ 'tab' ], mixins: [InjectLayerMixin],
props: { props: {
layer: String, id: {
id: [ Number, String ] type: [Number, String],
required: true
}
}, },
computed: { computed: {
upgrade() { upgrade(): Upgrade {
return layers[this.layer || this.tab.layer].upgrades[this.id]; return layers[this.layer].upgrades!.data[this.id];
}, },
title() { title(): Component | string | null {
if (this.upgrade.title) { if (this.upgrade.title) {
return coerceComponent(this.upgrade.title, 'h3'); return coerceComponent(this.upgrade.title, "h3");
} }
return null; return null;
}, },
description() { description(): Component | string {
return coerceComponent(this.upgrade.description, 'div'); return coerceComponent(this.upgrade.description, "div");
}, },
effectDisplay() { effectDisplay(): Component | string | null {
if (this.upgrade.effectDisplay) { if (this.upgrade.effectDisplay) {
return coerceComponent(this.upgrade.effectDisplay); return coerceComponent(this.upgrade.effectDisplay);
} }
return null; return null;
}, },
cost() { cost(): string {
return formatWhole(this.upgrade.cost); return formatWhole(this.upgrade.cost);
}, },
costResource() { costResource(): string {
return this.upgrade.currencyDisplayName || layers[this.layer || this.tab.layer].resource; return this.upgrade.currencyDisplayName || layers[this.layer].resource;
} }
} }
}; });
</script> </script>
<style scoped> <style scoped></style>
</style>

30
src/components/features/Grid.vue
View file

@ -2,29 +2,33 @@
<div v-if="grid" class="table"> <div v-if="grid" class="table">
<div v-for="row in grid.rows" class="row" :key="row"> <div v-for="row in grid.rows" class="row" :key="row">
<div v-for="col in grid.cols" :key="col"> <div v-for="col in grid.cols" :key="col">
<gridable class="align" :id="id" :cell="row * 100 + col" /> <grid-cell class="align" :id="id" :cell="row * 100 + col" />
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script lang="ts">
import { layers } from '../../game/layers'; import { layers } from "@/game/layers";
import { Grid } from "@/typings/features/grid";
import { InjectLayerMixin } from "@/util/vue";
import { defineComponent } from "vue";
export default { export default defineComponent({
name: 'grid', name: "grid",
inject: [ 'tab' ], mixins: [InjectLayerMixin],
props: { props: {
layer: String, id: {
id: [ Number, String ] type: [Number, String],
required: true
}
}, },
computed: { computed: {
grid() { grid(): Grid {
return layers[this.layer || this.tab.layer].grids[this.id]; return layers[this.layer].grids!.data[this.id];
} }
} }
}; });
</script> </script>
<style scoped> <style scoped></style>
</style>

97
src/components/features/GridCell.vue Normal file
View file

@ -0,0 +1,97 @@
<template>
<button
v-if="gridable.unlocked"
:class="{ feature: true, tile: true, can: canClick, locked: !canClick }"
:style="style"
@click="gridable.click"
@mousedown="start"
@mouseleave="stop"
@mouseup="stop"
@touchstart="start"
@touchend="stop"
@touchcancel="stop"
:disabled="!canClick"
>
<div v-if="title"><component :is="title" /></div>
<component :is="display" style="white-space: pre-line;" />
<branch-node :branches="gridable.branches" :id="id" featureType="gridable" />
</button>
</template>
<script lang="ts">
import { layers } from "@/game/layers";
import { GridCell } from "@/typings/features/grid";
import { coerceComponent, InjectLayerMixin } from "@/util/vue";
import { Component, defineComponent } from "vue";
export default defineComponent({
name: "grid-cell",
mixins: [InjectLayerMixin],
props: {
id: {
type: [Number, String],
required: true
},
cell: {
type: [Number, String],
required: true
},
size: [Number, String]
},
data() {
return {
interval: null,
time: 0
} as {
interval: number | null;
time: number;
};
},
computed: {
gridCell(): GridCell {
return layers[this.layer].grids!.data[this.id][this.cell] as GridCell;
},
canClick(): boolean {
return this.gridCell.canClick;
},
style(): Array<Partial<CSSStyleDeclaration> | undefined> {
return [
this.canClick ? { backgroundColor: layers[this.layer].color } : {},
layers[this.layer].componentStyles?.["grid-cell"],
this.gridCell.style
];
},
title(): Component | string | null {
if (this.gridCell.title) {
return coerceComponent(this.gridCell.title, "h3");
}
return null;
},
display(): Component | string {
return coerceComponent(this.gridCell.display, "div");
}
},
methods: {
start() {
if (!this.interval && this.gridCell.click) {
this.interval = setInterval(this.gridCell.click, 250);
}
},
stop() {
if (this.interval) {
clearInterval(this.interval);
this.interval = null;
this.time = 0;
}
}
}
});
</script>
<style scoped>
.tile {
min-height: 80px;
width: 80px;
font-size: 10px;
}
</style>

77
src/components/features/Gridable.vue
View file

@ -1,77 +0,0 @@
<template>
<button v-if="gridable.unlocked" :class="{ feature: true, tile: true, can: canClick, locked: !canClick}"
:style="style" @click="gridable.click" @mousedown="start" @mouseleave="stop" @mouseup="stop" @touchstart="start"
@touchend="stop" @touchcancel="stop" :disabled="!canClick">
<div v-if="title"><component :is="title" /></div>
<component :is="display" style="white-space: pre-line;" />
<branch-node :branches="gridable.branches" :id="id" featureType="gridable" />
</button>
</template>
<script>
import { layers } from '../../game/layers';
import { coerceComponent } from '../../util/vue';
export default {
name: 'gridable',
inject: [ 'tab' ],
props: {
layer: String,
id: [ Number, String ],
cell: [ Number, String ],
size: {
type: [ Number, String ]
}
},
data() {
return {
interval: false,
time: 0
};
},
computed: {
gridable() {
return layers[this.layer || this.tab.layer].grids[this.id][this.cell];
},
canClick() {
return this.gridable.canClick;
},
style() {
return [
this.canClick ? { 'background-color': layers[this.layer || this.tab.layer].color } : {},
layers[this.layer || this.tab.layer].componentStyles?.gridable,
this.gridable.style
];
},
title() {
if (this.gridable.title) {
return coerceComponent(this.gridable.title, 'h3');
}
return null;
},
display() {
return coerceComponent(this.gridable.display, 'div');
}
},
methods: {
start() {
if (!this.interval) {
this.interval = setInterval(this.gridable.click, 250);
}
},
stop() {
clearInterval(this.interval);
this.interval = false;
this.time = 0;
}
}
};
</script>
<style scoped>
.tile {
min-height: 80px;
width: 80px;
font-size: 10px;
}
</style>

69
src/components/features/Infobox.vue
View file

@ -13,68 +13,71 @@
</div> </div>
</template> </template>
<script> <script lang="ts">
import { layers } from '../../game/layers'; import themes from "@/data/themes";
import player from '../../game/player'; import { layers } from "@/game/layers";
import { coerceComponent } from '../../util/vue'; import player from "@/game/player";
import themes from '../../data/themes'; import { Infobox } from "@/typings/features/infobox";
import { coerceComponent, InjectLayerMixin } from "@/util/vue";
import { Component, defineComponent } from "vue";
export default { export default defineComponent({
name: 'infobox', name: "infobox",
inject: [ 'tab' ], mixins: [InjectLayerMixin],
props: { props: {
layer: String, id: {
id: [ Number, String ] type: [Number, String],
required: true
}
}, },
computed: { computed: {
infobox() { infobox(): Infobox {
return layers[this.layer || this.tab.layer].infoboxes[this.id]; return layers[this.layer].infoboxes!.data[this.id];
}, },
borderColor() { borderColor(): string {
return this.infobox.borderColor || layers[this.layer || this.tab.layer].color; return this.infobox.borderColor || layers[this.layer].color;
}, },
style() { style(): Array<Partial<CSSStyleDeclaration> | undefined> {
return [ return [
{ borderColor: this.borderColor }, { borderColor: this.borderColor },
layers[this.layer || this.tab.layer].componentStyles?.infobox, layers[this.layer].componentStyles?.infobox,
this.infobox.style this.infobox.style
]; ];
}, },
titleStyle() { titleStyle(): Array<Partial<CSSStyleDeclaration> | undefined> {
return [ return [
{ backgroundColor: layers[this.layer || this.tab.layer].color }, { backgroundColor: layers[this.layer].color },
layers[this.layer || this.tab.layer].componentStyles?.['infobox-title'], layers[this.layer].componentStyles?.["infobox-title"],
this.infobox.titleStyle this.infobox.titleStyle
]; ];
}, },
bodyStyle() { bodyStyle(): Array<Partial<CSSStyleDeclaration> | undefined> {
return [ return [layers[this.layer].componentStyles?.["infobox-body"], this.infobox.bodyStyle];
layers[this.layer || this.tab.layer].componentStyles?.['infobox-body'],
this.infobox.bodyStyle
];
}, },
title() { title(): Component | string {
if (this.infobox.title) { if (this.infobox.title) {
return coerceComponent(this.infobox.title); return coerceComponent(this.infobox.title);
} }
return coerceComponent(layers[this.layer || this.tab.layer].name); return coerceComponent(layers[this.layer].name || this.layer);
}, },
body() { body(): Component | string {
return coerceComponent(this.infobox.body); return coerceComponent(this.infobox.body);
}, },
collapsed() { collapsed(): boolean {
return player[this.layer || this.tab.layer].infoboxes[this.id]; return player.layers[this.layer].infoboxes[this.id];
}, },
stacked() { stacked(): boolean {
return themes[player.theme].stackedInfoboxes; return themes[player.theme].stackedInfoboxes;
} }
}, },
methods: { methods: {
toggle() { toggle() {
player[this.layer || this.tab.layer].infoboxes[this.id] = !player[this.layer || this.tab.layer].infoboxes[this.id]; player.layers[this.layer].infoboxes[this.id] = !player.layers[this.layer].infoboxes[
this.id
];
} }
} }
}; });
</script> </script>
<style scoped> <style scoped>
@ -148,7 +151,7 @@ export default {
} }
.body { .body {
transition-duration: .5s; transition-duration: 0.5s;
border-radius: 5px; border-radius: 5px;
border-top-left-radius: 0; border-top-left-radius: 0;
} }

59
src/components/features/MainDisplay.vue
View file

@ -2,49 +2,52 @@
<div> <div>
<span v-if="showPrefix">You have </span> <span v-if="showPrefix">You have </span>
<resource :amount="amount" :color="color" /> <resource :amount="amount" :color="color" />
{{ resource }}<!-- remove whitespace --> {{ resource
}}<!-- remove whitespace -->
<span v-if="effectDisplay">, <component :is="effectDisplay"/></span> <span v-if="effectDisplay">, <component :is="effectDisplay"/></span>
<br><br> <br /><br />
</div> </div>
</template> </template>
<script> <script lang="ts">
import player from '../../game/player'; import { layers } from "@/game/layers";
import { layers } from '../../game/layers'; import player from "@/game/player";
import { format, formatWhole } from '../../util/bignum'; import { format, formatWhole } from "@/util/bignum";
import { coerceComponent } from '../../util/vue'; import { coerceComponent, InjectLayerMixin } from "@/util/vue";
import { Component, defineComponent } from "vue";
export default { export default defineComponent({
name: 'main-display', name: "main-display",
inject: [ 'tab' ], mixins: [InjectLayerMixin],
props: { props: {
layer: String,
precision: Number precision: Number
}, },
computed: { computed: {
style() { style(): Partial<CSSStyleDeclaration> | undefined {
return layers[this.layer || this.tab.layer].componentStyles?.['main-display']; return layers[this.layer].componentStyles?.["main-display"];
}, },
resource() { resource(): string {
return layers[this.layer || this.tab.layer].resource; return layers[this.layer].resource;
}, },
effectDisplay() { effectDisplay(): Component | string | undefined {
return coerceComponent(layers[this.layer || this.tab.layer].effectDisplay); return (
layers[this.layer].effectDisplay &&
coerceComponent(layers[this.layer].effectDisplay!)
);
}, },
showPrefix() { showPrefix(): boolean {
return player[this.layer || this.tab.layer].points.lt('1e1000'); return player.layers[this.layer].points.lt("1e1000");
}, },
color() { color(): string {
return layers[this.layer || this.tab.layer].color; return layers[this.layer].color;
}, },
amount() { amount(): string {
return this.precision == undefined ? return this.precision == undefined
formatWhole(player[this.layer || this.tab.layer].points) : ? formatWhole(player.layers[this.layer].points)
format(player[this.layer || this.tab.layer].points, this.precision); : format(player.layers[this.layer].points, this.precision);
} }
} }
}; });
</script> </script>
<style scoped> <style scoped></style>
</style>

12
src/components/features/MarkNode.vue
View file

@ -5,13 +5,15 @@
</div> </div>
</template> </template>
<script> <script lang="ts">
export default { import { defineComponent } from "vue";
name: 'mark-node',
export default defineComponent({
name: "mark-node",
props: { props: {
mark: [Boolean, String] mark: [Boolean, String]
} }
}; });
</script> </script>
<style scoped> <style scoped>
@ -52,7 +54,7 @@ export default {
width: 0; width: 0;
height: 0; height: 0;
position: absolute; position: absolute;
top: .6em; top: 0.6em;
left: -1em; left: -1em;
border-right: 1em solid transparent; border-right: 1em solid transparent;
border-bottom: 0.7em solid #ffcc00; border-bottom: 0.7em solid #ffcc00;

48
src/components/features/MasterButton.vue
View file

@ -1,37 +1,40 @@
<template> <template>
<button @click="press" :class="{ feature: true, can: unlocked, locked: !unlocked }" :style="style"> <button
@click="press"
:class="{ feature: true, can: unlocked, locked: !unlocked }"
:style="style"
>
<component :is="masterButtonDisplay" /> <component :is="masterButtonDisplay" />
</button> </button>
</template> </template>
<script> <script lang="ts">
import { layers } from '../../game/layers'; import { layers } from "@/game/layers";
import player from '../../game/player'; import player from "@/game/player";
import { coerceComponent } from '../../util/vue'; import { CoercableComponent } from "@/typings/component";
import { coerceComponent, InjectLayerMixin } from "@/util/vue";
import { Component, defineComponent, PropType } from "vue";
export default { export default defineComponent({
name: 'master-button', name: "master-button",
inject: [ 'tab' ], mixins: [InjectLayerMixin],
props: { props: {
layer: String, display: [String, Object] as PropType<CoercableComponent>
display: [ String, Object ]
}, },
emits: [ 'press' ], emits: ["press"],
computed: { computed: {
style() { style(): Partial<CSSStyleDeclaration> | undefined {
return [ return layers[this.layer].componentStyles?.["master-button"];
layers[this.layer || this.tab.layer].componentStyles?.['master-button']
];
}, },
unlocked() { unlocked(): boolean {
return player[this.layer || this.tab.layer].unlocked; return player.layers[this.layer].unlocked;
}, },
masterButtonDisplay() { masterButtonDisplay(): Component | string {
if (this.display) { if (this.display) {
return coerceComponent(this.display); return coerceComponent(this.display);
} }
if (layers[this.layer || this.tab.layer].clickables?.masterButtonDisplay) { if (layers[this.layer].clickables?.masterButtonDisplay) {
return coerceComponent(layers[this.layer || this.tab.layer].clickables?.masterButtonDisplay); return coerceComponent(layers[this.layer].clickables!.masterButtonDisplay!);
} }
return coerceComponent("Click Me!"); return coerceComponent("Click Me!");
} }
@ -41,8 +44,7 @@ export default {
this.$emit("press"); this.$emit("press");
} }
} }
}; });
</script> </script>
<style scoped> <style scoped></style>
</style>

51
src/components/features/Milestone.vue
View file

@ -1,5 +1,9 @@
<template> <template>
<div v-if="milestone.shown" :style="style" :class="{ feature: true, milestone: true, done: milestone.earned }"> <div
v-if="milestone.shown"
:style="style"
:class="{ feature: true, milestone: true, done: milestone.earned }"
>
<div v-if="requirementDisplay"><component :is="requirementDisplay" /></div> <div v-if="requirementDisplay"><component :is="requirementDisplay" /></div>
<div v-if="effectDisplay"><component :is="effectDisplay" /></div> <div v-if="effectDisplay"><component :is="effectDisplay" /></div>
<component v-if="optionsDisplay" :is="optionsDisplay" /> <component v-if="optionsDisplay" :is="optionsDisplay" />
@ -7,47 +11,48 @@
</div> </div>
</template> </template>
<script> <script lang="ts">
import { layers } from '../../game/layers'; import { layers } from "@/game/layers";
import { coerceComponent } from '../../util/vue'; import { Milestone } from "@/typings/features/milestone";
import { coerceComponent, InjectLayerMixin } from "@/util/vue";
import { Component, defineComponent } from "vue";
export default { export default defineComponent({
name: 'milestone', name: "milestone",
inject: [ 'tab' ], mixins: [InjectLayerMixin],
props: { props: {
layer: String, id: {
id: [ Number, String ] type: [Number, String],
required: true
}
}, },
computed: { computed: {
milestone() { milestone(): Milestone {
return layers[this.layer || this.tab.layer].milestones[this.id]; return layers[this.layer].milestones!.data[this.id];
}, },
style() { style(): Array<Partial<CSSStyleDeclaration> | undefined> {
return [ return [layers[this.layer].componentStyles?.milestone, this.milestone.style];
layers[this.layer || this.tab.layer].componentStyles?.milestone,
this.milestone.style
];
}, },
requirementDisplay() { requirementDisplay(): Component | string | null {
if (this.milestone.requirementDisplay) { if (this.milestone.requirementDisplay) {
return coerceComponent(this.milestone.requirementDisplay, 'h3'); return coerceComponent(this.milestone.requirementDisplay, "h3");
} }
return null; return null;
}, },
effectDisplay() { effectDisplay(): Component | string | null {
if (this.milestone.effectDisplay) { if (this.milestone.effectDisplay) {
return coerceComponent(this.milestone.effectDisplay, 'b'); return coerceComponent(this.milestone.effectDisplay, "b");
} }
return null; return null;
}, },
optionsDisplay() { optionsDisplay(): Component | string | null {
if (this.milestone.optionsDisplay && this.milestone.earned) { if (this.milestone.optionsDisplay && this.milestone.earned) {
return coerceComponent(this.milestone.optionsDisplay, 'div'); return coerceComponent(this.milestone.optionsDisplay, "div");
} }
return null; return null;
} }
} }
}; });
</script> </script>
<style scoped> <style scoped>

31
src/components/features/Milestones.vue
View file

@ -4,24 +4,29 @@
</div> </div>
</template> </template>
<script> <script lang="ts">
import { layers } from '../../game/layers'; import { layers } from "@/game/layers";
import { getFiltered } from '../../util/vue'; import { Milestone } from "@/typings/features/milestone";
import { getFiltered, InjectLayerMixin } from "@/util/vue";
import { defineComponent, PropType } from "vue";
export default { export default defineComponent({
name: 'milestones', name: "milestones",
inject: [ 'tab' ], mixins: [InjectLayerMixin],
props: { props: {
layer: String, milestones: {
milestones: Array type: Object as PropType<Array<string>>
}
}, },
computed: { computed: {
filteredMilestones() { filteredMilestones(): Record<string, Milestone> {
return getFiltered(layers[this.layer || this.tab.layer].milestones, this.milestones); if (layers[this.layer].milestones) {
return getFiltered<Milestone>(layers[this.layer].milestones!.data, this.milestones);
}
return {};
} }
} }
}; });
</script> </script>
<style scoped> <style scoped></style>
</style>

49
src/components/features/PrestigeButton.vue
View file

@ -1,48 +1,49 @@
<template> <template>
<button :style="style" @click="resetLayer" <button
:class="{ [layer || tab.layer]: true, reset: true, locked: !canReset, can: canReset }" > :style="style"
@click="resetLayer"
:class="{ [layer]: true, reset: true, locked: !canReset, can: canReset }"
>
<component v-if="prestigeButtonDisplay" :is="prestigeButtonDisplay" /> <component v-if="prestigeButtonDisplay" :is="prestigeButtonDisplay" />
<default-prestige-button-display v-else /> <default-prestige-button-display v-else />
</button> </button>
</template> </template>
<script> <script lang="ts">
import { layers } from '../../game/layers'; import { layers } from "@/game/layers";
import { resetLayer } from '../../util/layers'; import { resetLayer } from "@/util/layers";
import { coerceComponent } from '../../util/vue'; import { coerceComponent, InjectLayerMixin } from "@/util/vue";
import { Component, defineComponent } from "vue";
export default { export default defineComponent({
name: 'prestige-button', name: "prestige-button",
inject: [ 'tab' ], mixins: [InjectLayerMixin],
props: {
layer: String
},
computed: { computed: {
canReset() { canReset(): boolean {
return layers[this.layer || this.tab.layer].canReset; return layers[this.layer].canReset;
}, },
color() { color(): string {
return layers[this.layer || this.tab.layer].color; return layers[this.layer].color;
}, },
prestigeButtonDisplay() { prestigeButtonDisplay(): Component | string | null {
if (layers[this.layer || this.tab.layer].prestigeButtonDisplay) { if (layers[this.layer].prestigeButtonDisplay) {
return coerceComponent(layers[this.layer || this.tab.layer].prestigeButtonDisplay); return coerceComponent(layers[this.layer].prestigeButtonDisplay!);
} }
return null; return null;
}, },
style() { style(): Array<Partial<CSSStyleDeclaration> | undefined> {
return [ return [
this.canReset ? { 'background-color': this.color } : {}, this.canReset ? { backgroundColor: this.color } : undefined,
layers[this.layer || this.tab.layer].componentStyles?.['prestige-button'] layers[this.layer].componentStyles?.["prestige-button"]
]; ];
} }
}, },
methods: { methods: {
resetLayer() { resetLayer() {
resetLayer(this.layer || this.tab.layer); resetLayer(this.layer);
} }
} }
}; });
</script> </script>
<style scoped> <style scoped>

81
src/components/features/ResourceDisplay.vue
View file

@ -1,51 +1,72 @@
<template> <template>
<div class="resource-display" :class="{ empty }"> <div class="resource-display" :class="{ empty }">
<div v-if="baseAmount != undefined">You have {{ baseAmount }} {{ baseResource }}</div> <div v-if="baseAmount != undefined && baseResource != undefined">
<div v-if="passiveGeneration != undefined">You are gaining {{ passiveGeneration }} {{ resource }} per second</div> You have {{ baseAmount }} {{ baseResource }}
<spacer v-if="(baseAmount != undefined || passiveGeneration != undefined) && (best != undefined || total != undefined)" /> </div>
<div v-if="passiveGeneration != undefined">
You are gaining {{ passiveGeneration }} {{ resource }} per second
</div>
<spacer
v-if="
(baseAmount != undefined || passiveGeneration != undefined) &&
(best != undefined || total != undefined)
"
/>
<div v-if="best != undefined">Your best {{ resource }} is {{ best }}</div> <div v-if="best != undefined">Your best {{ resource }} is {{ best }}</div>
<div v-if="total != undefined">You have made a total of {{ total }} {{ resource }}</div> <div v-if="total != undefined">You have made a total of {{ total }} {{ resource }}</div>
</div> </div>
</template> </template>
<script> <script lang="ts">
import { layers } from '../../game/layers'; import { layers } from "@/game/layers";
import player from '../../game/player'; import player from "@/game/player";
import Decimal, { formatWhole } from '../../util/bignum'; import { DecimalSource } from "@/lib/break_eternity";
import Decimal, { formatWhole } from "@/util/bignum";
import { InjectLayerMixin } from "@/util/vue";
import { defineComponent } from "vue";
export default { export default defineComponent({
name: 'resource-display', name: "resource-display",
inject: [ 'tab' ], mixins: [InjectLayerMixin],
props: {
layer: String
},
computed: { computed: {
baseAmount() { baseAmount(): string | null {
return layers[this.layer || this.tab.layer].baseAmount ? formatWhole(layers[this.layer || this.tab.layer].baseAmount) : null; return layers[this.layer].baseAmount
? formatWhole(layers[this.layer].baseAmount!)
: null;
}, },
baseResource() { baseResource(): string | undefined {
return layers[this.layer || this.tab.layer].baseResource; return layers[this.layer].baseResource;
}, },
passiveGeneration() { passiveGeneration(): string | null {
return layers[this.layer || this.tab.layer].passiveGeneration ? return layers[this.layer].passiveGeneration
formatWhole(Decimal.times(layers[this.layer || this.tab.layer].resetGain, ? formatWhole(
layers[this.layer || this.tab.layer].passiveGeneration)) : Decimal.times(
null; layers[this.layer].resetGain,
layers[this.layer].passiveGeneration === true
? 1
: (layers[this.layer].passiveGeneration as DecimalSource)
)
)
: null;
}, },
resource() { resource(): string {
return layers[this.layer || this.tab.layer].resource; return layers[this.layer].resource;
}, },
best() { best(): string | null {
return player[this.layer || this.tab.layer].best ? formatWhole(player[this.layer || this.tab.layer].best) : null; return player.layers[this.layer].best
? formatWhole(player.layers[this.layer].best as Decimal)
: null;
}, },
total() { total(): string | null {
return player[this.layer || this.tab.layer].total ? formatWhole(player[this.layer || this.tab.layer].total) : null; return player.layers[this.layer].total
? formatWhole(player.layers[this.layer].total as Decimal)
: null;
}, },
empty() { empty(): boolean {
return !(this.baseAmount || this.passiveGeneration || this.best || this.total); return !(this.baseAmount || this.passiveGeneration || this.best || this.total);
} }
} }
}; });
</script> </script>
<style scoped> <style scoped>

68
src/components/features/RespecButton.vue
View file

@ -3,8 +3,12 @@
<tooltip display="Disable respec confirmation"> <tooltip display="Disable respec confirmation">
<Toggle :value="confirmRespec" @change="setConfirmRespec" /> <Toggle :value="confirmRespec" @change="setConfirmRespec" />
</tooltip> </tooltip>
<button @click="respec" :class="{ feature: true, respec: true, can: unlocked, locked: !unlocked }" <button
style="margin-right: 18px" :style="style"> @click="respec"
:class="{ feature: true, respec: true, can: unlocked, locked: !unlocked }"
style="margin-right: 18px"
:style="style"
>
<component :is="respecButtonDisplay" /> <component :is="respecButtonDisplay" />
</button> </button>
<Modal :show="confirming" @close="cancel"> <Modal :show="confirming" @close="cancel">
@ -13,13 +17,15 @@
</template> </template>
<template v-slot:body> <template v-slot:body>
<slot name="respec-warning"> <slot name="respec-warning">
<div>Are you sure you want to respec? This will force you to do a {{ name }} respec as well!</div> <component :is="respecWarning" />
</slot> </slot>
</template> </template>
<template v-slot:footer> <template v-slot:footer>
<div class="modal-footer"> <div class="modal-footer">
<div class="modal-flex-grow"></div> <div class="modal-flex-grow"></div>
<danger-button class="button modal-button" @click="confirm" skipConfirm>Yes</danger-button> <danger-button class="button modal-button" @click="confirm" skipConfirm
>Yes</danger-button
>
<button class="button modal-button" @click="cancel">Cancel</button> <button class="button modal-button" @click="cancel">Cancel</button>
</div> </div>
</template> </template>
@ -27,46 +33,52 @@
</div> </div>
</template> </template>
<script> <script lang="ts">
import { layers } from '../../game/layers'; import { layers } from "@/game/layers";
import player from '../../game/player'; import player from "@/game/player";
import { coerceComponent } from '../../util/vue'; import { CoercableComponent } from "@/typings/component";
import { coerceComponent, InjectLayerMixin } from "@/util/vue";
import { Component, defineComponent, PropType } from "vue";
export default { export default defineComponent({
name: 'respec-button', name: "respec-button",
inject: [ 'tab' ], mixins: [InjectLayerMixin],
props: {
confirmRespec: Boolean,
display: [String, Object] as PropType<CoercableComponent>,
respecWarningDisplay: [String, Object] as PropType<CoercableComponent>
},
data() { data() {
return { return {
confirming: false confirming: false
}; };
}, },
props: { emits: ["set-confirm-respec", "respec"],
layer: String,
confirmRespec: Boolean,
display: [ String, Object ]
},
emits: [ 'set-confirm-respec', 'respec' ],
computed: { computed: {
style() { style(): Partial<CSSStyleDeclaration> | undefined {
return [ return layers[this.layer].componentStyles?.["respec-button"];
layers[this.layer || this.tab.layer].componentStyles?.['respec-button']
];
}, },
unlocked() { unlocked(): boolean {
return player[this.layer || this.tab.layer].unlocked; return player.layers[this.layer].unlocked;
}, },
respecButtonDisplay() { respecButtonDisplay(): Component | string {
if (this.display) { if (this.display) {
return coerceComponent(this.display); return coerceComponent(this.display);
} }
return coerceComponent("Respec"); return coerceComponent("Respec");
}, },
name() { respecWarning(): Component | string {
return layers[this.layer || this.tab.layer].name || this.layer || this.tab.layer; if (this.respecWarningDisplay) {
return coerceComponent(this.respecWarningDisplay);
}
return coerceComponent(
`Are you sure you want to respec? This will force you to do a ${layers[this.layer]
.name || this.layer} respec as well!`
);
} }
}, },
methods: { methods: {
setConfirmRespec(value) { setConfirmRespec(value: boolean) {
this.$emit("set-confirm-respec", value); this.$emit("set-confirm-respec", value);
}, },
respec() { respec() {
@ -84,7 +96,7 @@ export default {
this.confirming = false; this.confirming = false;
} }
} }
}; });
</script> </script>
<style scoped> <style scoped>

32
src/components/features/Subtab.vue Normal file
View file

@ -0,0 +1,32 @@
<template>
<LayerProvider :layer="layer" :index="tab.index">
<component :is="display" />
</LayerProvider>
</template>
<script lang="ts">
import { layers } from "@/game/layers";
import { coerceComponent, InjectLayerMixin } from "@/util/vue";
import { Component, defineComponent } from "vue";
export default defineComponent({
name: "subtab",
mixins: [InjectLayerMixin],
props: {
id: {
type: [Number, String],
required: true
}
},
computed: {
display(): Component | string | undefined {
return (
layers[this.layer].subtabs![this.id].display &&
coerceComponent(layers[this.layer].subtabs![this.id].display!)
);
}
}
});
</script>
<style scoped></style>

49
src/components/features/Upgrade.vue
View file

@ -1,44 +1,55 @@
<template> <template>
<button v-if="upgrade.unlocked" :style="style" @click="buy" <button
v-if="upgrade.unlocked"
:style="style"
@click="buy"
:class="{ :class="{
feature: true, feature: true,
[tab.layer]: true, [layer]: true,
upgrade: true, upgrade: true,
can: upgrade.canAfford && !upgrade.bought, can: upgrade.canAfford && !upgrade.bought,
locked: !upgrade.canAfford && !upgrade.bought, locked: !upgrade.canAfford && !upgrade.bought,
bought: upgrade.bought bought: upgrade.bought
}" :disabled="!upgrade.canAfford && !upgrade.bought"> }"
:disabled="!upgrade.canAfford && !upgrade.bought"
>
<component v-if="fullDisplay" :is="fullDisplay" /> <component v-if="fullDisplay" :is="fullDisplay" />
<default-upgrade-display v-else :id="id" /> <default-upgrade-display v-else :id="id" />
<branch-node :branches="upgrade.branches" :id="id" featureType="upgrade" /> <branch-node :branches="upgrade.branches" :id="id" featureType="upgrade" />
</button> </button>
</template> </template>
<script> <script lang="ts">
import { layers } from '../../game/layers'; import { layers } from "@/game/layers";
import { coerceComponent } from '../../util/vue'; import { Upgrade } from "@/typings/features/upgrade";
import { coerceComponent, InjectLayerMixin } from "@/util/vue";
import { Component, defineComponent } from "vue";
export default { export default defineComponent({
name: 'upgrade', name: "upgrade",
inject: [ 'tab' ], mixins: [InjectLayerMixin],
props: { props: {
layer: String, id: {
id: [ Number, String ] type: [Number, String],
required: true
}
}, },
computed: { computed: {
upgrade() { upgrade(): Upgrade {
return layers[this.layer || this.tab.layer].upgrades[this.id]; return layers[this.layer].upgrades!.data[this.id];
}, },
style() { style(): Array<Partial<CSSStyleDeclaration> | undefined> {
return [ return [
this.upgrade.canAfford && !this.upgrade.bought ? { 'background-color': layers[this.layer || this.tab.layer].color } : {}, this.upgrade.canAfford && !this.upgrade.bought
layers[this.layer || this.tab.layer].componentStyles?.upgrade, ? { backgroundColor: layers[this.layer].color }
: undefined,
layers[this.layer].componentStyles?.upgrade,
this.upgrade.style this.upgrade.style
]; ];
}, },
fullDisplay() { fullDisplay(): Component | string | null {
if (this.upgrade.fullDisplay) { if (this.upgrade.fullDisplay) {
return coerceComponent(this.upgrade.fullDisplay, 'div'); return coerceComponent(this.upgrade.fullDisplay, "div");
} }
return null; return null;
} }
@ -48,7 +59,7 @@ export default {
this.upgrade.buy(); this.upgrade.buy();
} }
} }
}; });
</script> </script>
<style scoped> <style scoped>

37
src/components/features/Upgrades.vue
View file

@ -3,7 +3,11 @@
<template v-if="filteredUpgrades.rows && filteredUpgrades.cols"> <template v-if="filteredUpgrades.rows && filteredUpgrades.cols">
<div v-for="row in filteredUpgrades.rows" class="row" :key="row"> <div v-for="row in filteredUpgrades.rows" class="row" :key="row">
<div v-for="col in filteredUpgrades.cols" :key="col"> <div v-for="col in filteredUpgrades.cols" :key="col">
<upgrade v-if="filteredUpgrades[row * 10 + col] !== undefined" class="align" :id="row * 10 + col" /> <upgrade
v-if="filteredUpgrades[row * 10 + col] !== undefined"
class="align"
:id="row * 10 + col"
/>
</div> </div>
</div> </div>
</template> </template>
@ -13,24 +17,29 @@
</div> </div>
</template> </template>
<script> <script lang="ts">
import { layers } from '../../game/layers'; import { layers } from "@/game/layers";
import { getFiltered } from '../../util/vue'; import { Upgrade } from "@/typings/features/upgrade";
import { getFiltered, InjectLayerMixin } from "@/util/vue";
import { defineComponent, PropType } from "vue";
export default { export default defineComponent({
name: 'upgrades', name: "upgrades",
inject: [ 'tab' ], mixins: [InjectLayerMixin],
props: { props: {
layer: String, upgrades: {
upgrades: Array type: Object as PropType<Array<string>>
}
}, },
computed: { computed: {
filteredUpgrades() { filteredUpgrades(): Record<string, Upgrade> {
return getFiltered(layers[this.layer || this.tab.layer].upgrades, this.upgrades); if (layers[this.layer].upgrades) {
return getFiltered<Upgrade>(layers[this.layer].upgrades!.data, this.upgrades);
}
return {};
} }
} }
}; });
</script> </script>
<style scoped> <style scoped></style>
</style>

20
src/components/fields/DangerButton.vue
View file

@ -9,32 +9,34 @@
</span> </span>
</template> </template>
<script> <script lang="ts">
export default { import { defineComponent } from "vue";
name: 'danger-button',
export default defineComponent({
name: "danger-button",
data() { data() {
return { return {
confirming: false confirming: false
} };
}, },
props: { props: {
disabled: Boolean, disabled: Boolean,
skipConfirm: Boolean skipConfirm: Boolean
}, },
emits: [ 'click', 'confirmingChanged' ], emits: ["click", "confirmingChanged"],
watch: { watch: {
confirming(newValue) { confirming(newValue) {
this.$emit('confirmingChanged', newValue); this.$emit("confirmingChanged", newValue);
} }
}, },
methods: { methods: {
click() { click() {
if (this.skipConfirm) { if (this.skipConfirm) {
this.$emit('click'); this.$emit("click");
return; return;
} }
if (this.confirming) { if (this.confirming) {
this.$emit('click'); this.$emit("click");
} }
this.confirming = !this.confirming; this.confirming = !this.confirming;
}, },
@ -42,7 +44,7 @@ export default {
this.confirming = false; this.confirming = false;
} }
} }
}; });
</script> </script>
<style scoped> <style scoped>

29
src/components/fields/FeedbackButton.vue
View file

@ -1,23 +1,30 @@
<template> <template>
<button @click.stop="click" class="feedback" :class="{ activated, left }"><slot /></button> <button @click.stop="click" class="feedback" :class="{ activated, left }">
<slot />
</button>
</template> </template>
<script> <script lang="ts">
export default { import { defineComponent } from "vue";
name: 'feedback-button',
export default defineComponent({
name: "feedback-button",
data() { data() {
return { return {
activated: false, activated: false,
activatedTimeout: null activatedTimeout: null
} } as {
activated: boolean;
activatedTimeout: number | null;
};
}, },
props: { props: {
left: Boolean left: Boolean
}, },
emits: [ 'click' ], emits: ["click"],
methods: { methods: {
click() { click() {
this.$emit('click'); this.$emit("click");
// Give feedback to user // Give feedback to user
if (this.activatedTimeout) { if (this.activatedTimeout) {
@ -26,11 +33,11 @@ export default {
this.activated = false; this.activated = false;
this.$nextTick(() => { this.$nextTick(() => {
this.activated = true; this.activated = true;
this.activatedTimeout = setTimeout(() => this.activated = false, 500); this.activatedTimeout = setTimeout(() => (this.activated = false), 500);
}); });
} }
} }
}; });
</script> </script>
<style scoped> <style scoped>
@ -43,7 +50,7 @@ export default {
left: calc(100% + 5px); left: calc(100% + 5px);
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
content: '✔'; content: "✔";
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
box-shadow: inset 0 0 0 35px rgba(111, 148, 182, 0); box-shadow: inset 0 0 0 35px rgba(111, 148, 182, 0);
@ -56,7 +63,7 @@ export default {
} }
.feedback.activated::after { .feedback.activated::after {
animation: feedback .5s ease-out forwards; animation: feedback 0.5s ease-out forwards;
} }
@keyframes feedback { @keyframes feedback {

30
src/components/fields/Select.vue
View file

@ -1,13 +1,23 @@
<template> <template>
<div class="field"> <div class="field">
<span class="field-title" v-if="title">{{ title }}</span> <span class="field-title" v-if="title">{{ title }}</span>
<vue-select :options="options" :model-value="value" @update:modelValue="setSelected" label-by="label" :value-by="getValue" :placeholder="placeholder" :close-on-select="closeOnSelect" /> <vue-select
:options="options"
:model-value="value"
@update:modelValue="setSelected"
label-by="label"
:value-by="getValue"
:placeholder="placeholder"
:close-on-select="closeOnSelect"
/>
</div> </div>
</template> </template>
<script> <script lang="ts">
export default { import { defineComponent } from "vue";
name: 'Select',
export default defineComponent({
name: "Select",
props: { props: {
title: String, title: String,
options: Array, // https://vue-select.org/guide/options.html#options-prop options: Array, // https://vue-select.org/guide/options.html#options-prop
@ -16,17 +26,17 @@ export default {
placeholder: String, placeholder: String,
closeOnSelect: Boolean closeOnSelect: Boolean
}, },
emits: [ 'change' ], emits: ["change"],
methods: { methods: {
setSelected(value) { setSelected(value: any) {
value = value || this.default; value = value || this.default;
this.$emit('change', value); this.$emit("change", value);
}, },
getValue(item) { getValue(item?: { value: any }) {
return item?.value; return item?.value;
} }
} }
}; });
</script> </script>
<style> <style>
@ -40,7 +50,7 @@ export default {
.vue-select, .vue-select,
.vue-dropdown { .vue-dropdown {
border-color: rgba(var(--color), .26); border-color: rgba(var(--color), 0.26);
} }
.vue-dropdown { .vue-dropdown {

20
src/components/fields/Slider.vue
View file

@ -2,22 +2,30 @@
<div class="field"> <div class="field">
<span class="field-title" v-if="title">{{ title }}</span> <span class="field-title" v-if="title">{{ title }}</span>
<tooltip :display="`${value}`" :class="{ fullWidth: !title }"> <tooltip :display="`${value}`" :class="{ fullWidth: !title }">
<input type="range" :value="value" @input="e => $emit('change', parseInt(e.target.value))" :min="min" :max="max" /> <input
type="range"
:value="value"
@input="e => $emit('change', parseInt(e.target.value))"
:min="min"
:max="max"
/>
</tooltip> </tooltip>
</div> </div>
</template> </template>
<script> <script lang="ts">
export default { import { defineComponent } from "vue";
name: 'Slider',
export default defineComponent({
name: "Slider",
props: { props: {
title: String, title: String,
value: Number, value: Number,
min: Number, min: Number,
max: Number max: Number
}, },
emits: [ 'change' ] emits: ["change"]
}; });
</script> </script>
<style scoped> <style scoped>

35
src/components/fields/Text.vue
View file

@ -2,17 +2,32 @@
<form @submit.prevent="$emit('submit')"> <form @submit.prevent="$emit('submit')">
<div class="field"> <div class="field">
<span class="field-title" v-if="title">{{ title }}</span> <span class="field-title" v-if="title">{{ title }}</span>
<textarea-autosize v-if="textarea" :placeholder="placeholder" :value="value" :maxHeight="maxHeight" <textarea-autosize
@input="value => $emit('change', value)" ref="field" /> v-if="textarea"
<input v-else type="text" :value="value" @input="e => $emit('change', e.target.value)" :placeholder="placeholder" ref="field" :placeholder="placeholder"
:class="{ fullWidth: !title }" /> :value="value"
:maxHeight="maxHeight"
@input="value => $emit('change', value)"
ref="field"
/>
<input
v-else
type="text"
:value="value"
@input="e => $emit('change', e.target.value)"
:placeholder="placeholder"
ref="field"
:class="{ fullWidth: !title }"
/>
</div> </div>
</form> </form>
</template> </template>
<script> <script lang="ts">
export default { import { defineComponent } from "vue";
name: 'TextField',
export default defineComponent({
name: "TextField",
props: { props: {
title: String, title: String,
value: String, value: String,
@ -20,11 +35,11 @@ export default {
placeholder: String, placeholder: String,
maxHeight: Number maxHeight: Number
}, },
emits: [ 'change', 'submit', 'input' ], emits: ["change", "submit"],
mounted() { mounted() {
this.$refs.field.focus(); (this.$refs.field as HTMLElement).focus();
} }
}; });
</script> </script>
<style scoped> <style scoped>

19
src/components/fields/Toggle.vue
View file

@ -5,21 +5,23 @@
</label> </label>
</template> </template>
<script> <script lang="ts">
import { defineComponent } from "vue";
// Reference: https://codepen.io/finnhvman/pen/pOeyjE // Reference: https://codepen.io/finnhvman/pen/pOeyjE
export default { export default defineComponent({
name: 'Toggle', name: "Toggle",
props: { props: {
title: String, title: String,
value: Boolean value: Boolean
}, },
emits: [ 'change' ], emits: ["change"],
methods: { methods: {
handleInput(e) { handleInput(e: InputEvent) {
this.$emit('change', e.target.checked); this.$emit("change", (e.target as HTMLInputElement).checked);
} }
} }
}; });
</script> </script>
<style scoped> <style scoped>
@ -59,7 +61,8 @@ span::after {
width: 20px; width: 20px;
height: 20px; height: 20px;
background-color: white; background-color: white;
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
transition: background-color 0.2s, transform 0.2s; transition: background-color 0.2s, transform 0.2s;
} }

28
src/components/index.js
View file

@ -1,28 +0,0 @@
// Import and register all components,
// which will allow us to use them in any template strings anywhere in the project
//import TransitionExpand from 'vue-transition-expand';
//import 'vue-transition-expand/dist/vue-transition-expand.css';
import CollapseTransition from '@ivanv/vue-collapse-transition/src/CollapseTransition.vue';
import VueTextareaAutosize from 'vue-textarea-autosize';
import Sortable from 'vue-sortable';
import VueNextSelect from 'vue-next-select';
import 'vue-next-select/dist/index.css';
export function registerComponents(vue) {
/* from files */
const componentsContext = require.context('./');
componentsContext.keys().forEach(path => {
const component = componentsContext(path).default;
if (component && !(component.name in vue._context.components)) {
vue.component(component.name, component);
}
});
/* from packages */
//vue.use(TransitionExpand);
vue.component('collapse-transition', CollapseTransition);
vue.use(VueTextareaAutosize);
vue.use(Sortable);
vue.component('vue-select', VueNextSelect);
}

26
src/components/index.ts Normal file
View file

@ -0,0 +1,26 @@
// Import and register all components,
// which will allow us to use them in any template strings anywhere in the project
import CollapseTransition from "@ivanv/vue-collapse-transition/src/CollapseTransition.vue";
import VueTextareaAutosize from "vue-textarea-autosize";
import Sortable from "vue-sortable";
import VueNextSelect from "vue-next-select";
import "vue-next-select/dist/index.css";
import { App } from "vue";
export function registerComponents(vue: App): void {
/* from files */
const componentsContext = require.context("./");
componentsContext.keys().forEach(path => {
const component = componentsContext(path).default;
if (component && !(component.name in vue._context.components)) {
vue.component(component.name, component);
}
});
/* from packages */
vue.component("collapse-transition", CollapseTransition);
vue.use(VueTextareaAutosize);
vue.use(Sortable);
vue.component("vue-select", VueNextSelect);
}

10
src/components/system/Column.vue
View file

@ -6,8 +6,10 @@
</div> </div>
</template> </template>
<script> <script lang="ts">
export default { import { defineComponent } from "vue";
name: 'column'
}; export default defineComponent({
name: "column"
});
</script> </script>

39
src/components/system/DefaultLayerTab.vue
View file

@ -12,32 +12,31 @@
<achievements /> <achievements />
</template> </template>
<script> <script lang="ts">
import { layers } from '../../game/layers'; import { layers } from "@/game/layers";
import { coerceComponent } from '../../util/vue'; import { coerceComponent, InjectLayerMixin } from "@/util/vue";
import { Component, defineComponent } from "vue";
export default { export default defineComponent({
name: 'default-layer-tab', name: "default-layer-tab",
inject: [ 'tab' ], mixins: [InjectLayerMixin],
props: {
layer: String
},
computed: { computed: {
infobox() { infobox(): string | undefined {
return layers[this.layer || this.tab.layer].infoboxes && Object.keys(layers[this.layer || this.tab.layer].infoboxes)[0]; return (
layers[this.layer].infoboxes && Object.keys(layers[this.layer].infoboxes!.data)[0]
);
}, },
midsection() { midsection(): Component | string | null {
if (layers[this.layer || this.tab.layer].midsection) { if (layers[this.layer].midsection) {
return coerceComponent(layers[this.layer || this.tab.layer].midsection); return coerceComponent(layers[this.layer].midsection!);
} }
return null; return null;
}, },
showPrestigeButton() { showPrestigeButton(): boolean {
return layers[this.layer || this.tab.layer].type !== "none"; return layers[this.layer].type !== "none";
},
} }
}; }
});
</script> </script>
<style scoped> <style scoped></style>
</style>

35
src/components/system/GameOverScreen.vue
View file

@ -12,9 +12,12 @@
<template v-slot:body="{ shown }"> <template v-slot:body="{ shown }">
<div v-if="shown"> <div v-if="shown">
<div>It took you {{ timePlayed }} to beat the game.</div> <div>It took you {{ timePlayed }} to beat the game.</div>
<br> <br />
<div>Please check the Discord to discuss the game or to check for new content updates!</div> <div>
<br> Please check the Discord to discuss the game or to check for new content
updates!
</div>
<br />
<div> <div>
<a :href="discordLink"> <a :href="discordLink">
<img src="images/discord.png" class="game-over-modal-discord" /> <img src="images/discord.png" class="game-over-modal-discord" />
@ -32,17 +35,25 @@
</Modal> </Modal>
</template> </template>
<script> <script lang="ts">
import modInfo from '../../data/modInfo.json'; import { hasWon } from "@/data/mod";
import { hasWon } from '../../data/mod'; import modInfo from "@/data/modInfo.json";
import { formatTime } from '../../util/bignum'; import player from "@/game/player";
import player from '../../game/player'; import { formatTime } from "@/util/bignum";
import { defineComponent } from "vue";
export default { export default defineComponent({
name: 'GameOverScreen', name: "GameOverScreen",
data() { data() {
const { title, logo, discordName, discordLink, versionNumber, versionTitle } = modInfo; const { title, logo, discordName, discordLink, versionNumber, versionTitle } = modInfo;
return { title, logo, discordName, discordLink, versionNumber, versionTitle }; return {
title,
logo,
discordName,
discordLink,
versionNumber,
versionTitle
};
}, },
computed: { computed: {
timePlayed() { timePlayed() {
@ -60,7 +71,7 @@ export default {
console.warn("Not yet implemented!"); console.warn("Not yet implemented!");
} }
} }
}; });
</script> </script>
<style scoped> <style scoped>

69
src/components/system/Info.vue
View file

@ -11,17 +11,22 @@
</template> </template>
<template v-slot:body="{ shown }"> <template v-slot:body="{ shown }">
<div v-if="shown"> <div v-if="shown">
<div v-if="author"> <div v-if="author">By {{ author }}</div>
By {{ author }}
</div>
<div> <div>
Made in TMT-X, by thepaperpilot with inspiration from Acameada, Jacorb, and Aarex Made in TMT-X, by thepaperpilot with inspiration from Acameada, Jacorb, and
Aarex
</div>
<br />
<div class="link" @click="$emit('openDialog', 'Changelog')">
Changelog
</div> </div>
<br /> <br />
<div class="link" @click="$emit('openDialog', 'Changelog')">Changelog</div>
<br>
<div> <div>
<a :href="discordLink" v-if="discordLink !== 'https://discord.gg/WzejVAx'" class="info-modal-discord-link"> <a
:href="discordLink"
v-if="discordLink !== 'https://discord.gg/WzejVAx'"
class="info-modal-discord-link"
>
<img src="images/discord.png" class="info-modal-discord" /> <img src="images/discord.png" class="info-modal-discord" />
{{ discordName }} {{ discordName }}
</a> </a>
@ -44,10 +49,10 @@
Jacorb's Games Jacorb's Games
</a> </a>
</div> </div>
<br> <br />
<div>Time Played: {{ timePlayed }}</div> <div>Time Played: {{ timePlayed }}</div>
<div v-if="hotkeys"> <div v-if="hotkeys">
<br> <br />
<h4>Hotkeys</h4> <h4>Hotkeys</h4>
<div v-for="key in hotkeys" :key="key.key"> <div v-for="key in hotkeys" :key="key.key">
{{ key.key }}: {{ key.description }} {{ key.key }}: {{ key.description }}
@ -58,36 +63,48 @@
</Modal> </Modal>
</template> </template>
<script> <script lang="ts">
import modInfo from '../../data/modInfo.json'; import modInfo from "@/data/modInfo.json";
import { formatTime } from '../../util/bignum'; import { hotkeys } from "@/game/layers";
import { hotkeys } from '../../game/layers'; import player from "@/game/player";
import player from '../../game/player'; import { formatTime } from "@/util/bignum";
import { defineComponent } from "vue";
export default { export default defineComponent({
name: 'Info', name: "Info",
data() { data() {
const { title, logo, author, discordName, discordLink, versionNumber, versionTitle } = modInfo; const {
return { title, logo, author, discordName, discordLink, versionNumber, versionTitle }; title,
logo,
author,
discordName,
discordLink,
versionNumber,
versionTitle
} = modInfo;
return {
title,
logo,
author,
discordName,
discordLink,
versionNumber,
versionTitle
};
}, },
props: { props: {
show: Boolean show: Boolean
}, },
emits: [ 'closeDialog', 'openDialog' ], emits: ["closeDialog", "openDialog"],
computed: { computed: {
timePlayed() { timePlayed() {
return formatTime(player.timePlayed); return formatTime(player.timePlayed);
}, },
hotkeys() { hotkeys() {
return Object.keys(hotkeys).reduce((acc, curr) => { return hotkeys.filter(hotkey => hotkey.unlocked);
if (hotkeys[curr].unlocked !== false) {
acc[curr] = hotkeys[curr];
}
return acc;
}, {});
} }
} }
}; });
</script> </script>
<style scoped> <style scoped>

15
src/components/system/LayerProvider.vue
View file

@ -2,12 +2,14 @@
<slot /> <slot />
</template> </template>
<script> <script lang="ts">
export default { import { defineComponent } from "vue";
name: 'LayerProvider',
export default defineComponent({
name: "LayerProvider",
provide() { provide() {
return { return {
'tab': { tab: {
layer: this.layer, layer: this.layer,
index: this.index index: this.index
} }
@ -17,8 +19,7 @@ export default {
layer: String, layer: String,
index: Number index: Number
} }
}; });
</script> </script>
<style scoped> <style scoped></style>
</style>

103
src/components/system/LayerTab.vue
View file

@ -1,37 +1,65 @@
<template> <template>
<LayerProvider :layer="layer" :index="index"> <LayerProvider :layer="layer" :index="index">
<div class="layer-container"> <div class="layer-container">
<button v-if="index > 0 && allowGoBack && !minimized" class="goBack" @click="goBack(index)">←</button> <button
<button class="layer-tab minimized" v-if="minimized" @click="toggleMinimized"><div>{{ name }}</div></button> v-if="index > 0 && allowGoBack && !minimized"
class="goBack"
@click="goBack(index)"
>
←
</button>
<button class="layer-tab minimized" v-if="minimized" @click="toggleMinimized">
<div>{{ name }}</div>
</button>
<div class="layer-tab" :style="style" :class="{ hasSubtabs: subtabs }" v-else> <div class="layer-tab" :style="style" :class="{ hasSubtabs: subtabs }" v-else>
<branches> <branches>
<sticky v-if="subtabs" class="subtabs-container" :class="{ floating, firstTab: firstTab || !allowGoBack, minimizable }"> <sticky
v-if="subtabs"
class="subtabs-container"
:class="{
floating,
firstTab: firstTab || !allowGoBack,
minimizable
}"
>
<div class="subtabs"> <div class="subtabs">
<tab-button v-for="(subtab, id) in subtabs" @selectTab="selectSubtab(id)" :key="id" <tab-button
:activeTab="id === activeSubtab" :options="subtab" :text="id" /> v-for="(subtab, id) in subtabs"
@selectTab="selectSubtab(id)"
:key="id"
:activeTab="id === activeSubtab"
:options="subtab"
:text="id"
/>
</div> </div>
</sticky> </sticky>
<component v-if="display" :is="display" /> <component v-if="display" :is="display" />
<default-layer-tab v-else /> <default-layer-tab v-else />
</branches> </branches>
</div> </div>
<button v-if="minimizable" class="minimize" @click="toggleMinimized">▼</button> <button v-if="minimizable" class="minimize" @click="toggleMinimized">
▼
</button>
</div> </div>
</LayerProvider> </LayerProvider>
</template> </template>
<script> <script lang="ts">
import { layers } from '../../game/layers'; import modInfo from "@/data/modInfo.json";
import player from '../../game/player'; import themes from "@/data/themes";
import { coerceComponent } from '../../util/vue'; import { layers } from "@/game/layers";
import { isPlainObject } from '../../util/common'; import player from "@/game/player";
import modInfo from '../../data/modInfo.json'; import { Subtab } from "@/typings/features/subtab";
import themes from '../../data/themes'; import { coerceComponent } from "@/util/vue";
import { Component, defineComponent } from "vue";
export default { export default defineComponent({
name: 'layer-tab', name: "layer-tab",
props: { props: {
layer: String, layer: {
type: String,
required: true
},
index: Number, index: Number,
forceFirstTab: Boolean, forceFirstTab: Boolean,
minimizable: Boolean, minimizable: Boolean,
@ -41,49 +69,49 @@ export default {
return { allowGoBack: modInfo.allowGoBack }; return { allowGoBack: modInfo.allowGoBack };
}, },
computed: { computed: {
minimized() { minimized(): boolean {
return this.minimizable && player.minimized[this.layer]; return this.minimizable && player.minimized[this.layer];
}, },
name() { name(): string {
return layers[this.layer].name; return layers[this.layer].name || this.layer;
}, },
floating() { floating(): boolean {
return themes[player.theme].floatingTabs; return themes[player.theme].floatingTabs;
}, },
style() { style(): Array<Partial<CSSStyleDeclaration> | undefined> {
const style = []; const style = [];
if (layers[this.layer].style) { if (layers[this.layer].style) {
style.push(layers[this.layer].style); style.push(layers[this.layer].style);
} }
if (layers[this.layer].activeSubtab?.style) { if (layers[this.layer].activeSubtab?.style) {
style.push(layers[this.layer].activeSubtab.style); style.push(layers[this.layer].activeSubtab!.style);
} }
return style; return style;
}, },
display() { display(): Component | string | null {
if (layers[this.layer].activeSubtab?.display) { if (layers[this.layer].activeSubtab?.display) {
return coerceComponent(layers[this.layer].activeSubtab.display); return coerceComponent(layers[this.layer].activeSubtab!.display!);
} }
if (layers[this.layer].display) { if (layers[this.layer].display) {
return coerceComponent(layers[this.layer].display); return coerceComponent(layers[this.layer].display!);
} }
return null; return null;
}, },
subtabs() { subtabs(): Record<string, Subtab> | null {
if (layers[this.layer].subtabs) { if (layers[this.layer].subtabs) {
return Object.entries(layers[this.layer].subtabs) return Object.entries(layers[this.layer].subtabs!)
.filter(subtab => isPlainObject(subtab[1]) && subtab[1].unlocked !== false) .filter(subtab => subtab[1].unlocked !== false)
.reduce((acc, curr) => { .reduce((acc: Record<string, Subtab>, curr: [string, Subtab]) => {
acc[curr[0]] = curr[1]; acc[curr[0]] = curr[1];
return acc; return acc;
}, {}); }, {});
} }
return null; return null;
}, },
activeSubtab() { activeSubtab(): string | undefined {
return layers[this.layer].activeSubtab?.id; return layers[this.layer].activeSubtab?.id;
}, },
firstTab() { firstTab(): boolean {
if (this.forceFirstTab != undefined) { if (this.forceFirstTab != undefined) {
return this.forceFirstTab; return this.forceFirstTab;
} }
@ -114,6 +142,10 @@ export default {
} }
}, },
mounted() { mounted() {
this.setup();
},
methods: {
setup() {
if (this.tab == undefined) { if (this.tab == undefined) {
return; return;
} }
@ -133,21 +165,20 @@ export default {
tab.style.margin = null; tab.style.margin = null;
} }
} else { } else {
this.$nextTick(this.mounted); this.$nextTick(this.setup);
} }
}, },
methods: { selectSubtab(subtab: string) {
selectSubtab(subtab) {
player.subtabs[this.layer].mainTabs = subtab; player.subtabs[this.layer].mainTabs = subtab;
}, },
toggleMinimized() { toggleMinimized() {
player.minimized[this.layer] = !player.minimized[this.layer]; player.minimized[this.layer] = !player.minimized[this.layer];
}, },
goBack(index) { goBack(index: number) {
player.tabs = player.tabs.slice(0, index); player.tabs = player.tabs.slice(0, index);
} }
} }
}; });
</script> </script>
<style scoped> <style scoped>

83
src/components/system/Microtab.vue
View file

@ -1,62 +1,83 @@
<template> <template>
<div v-if="microtabs" class="microtabs"> <div v-if="microtabs" class="microtabs">
<LayerProvider :layer="layer || tab.layer" :index="tab.index"> <LayerProvider :layer="layer" :index="tab.index">
<div v-if="microtabs" class="tabs" :class="{ floating }"> <div v-if="microtabs" class="tabs" :class="{ floating }">
<tab-button v-for="(microtab, id) in microtabs" @selectTab="selectMicrotab(id)" :key="id" <tab-button
:activeTab="id === activeMicrotab.id" :options="microtab" :text="id" /> v-for="(microtab, id) in microtabs"
@selectTab="selectMicrotab(id)"
:key="id"
:activeTab="id === activeMicrotab?.id"
:options="microtab"
:text="id"
/>
</div> </div>
<template v-if="activeMicrotab">
<layer-tab v-if="embed" :layer="embed" /> <layer-tab v-if="embed" :layer="embed" />
<component v-else :is="display" /> <component v-else :is="display" />
</template>
</LayerProvider> </LayerProvider>
</div> </div>
</template> </template>
<script> <script lang="ts">
import { layers } from '../../game/layers'; import themes from "@/data/themes";
import player from '../../game/player'; import { layers } from "@/game/layers";
import { coerceComponent } from '../../util/vue'; import player from "@/game/player";
import themes from '../../data/themes'; import { Microtab, MicrotabFamily } from "@/typings/features/subtab";
import { coerceComponent, InjectLayerMixin } from "@/util/vue";
import { Component, defineComponent } from "vue";
export default { export default defineComponent({
name: 'microtab', name: "microtab",
inject: [ 'tab' ], mixins: [InjectLayerMixin],
props: { props: {
layer: String, family: {
family: String, type: String,
id: String required: true
},
id: {
type: String,
required: true
}
}, },
computed: { computed: {
floating() { floating() {
return themes[player.theme].floatingTabs; return themes[player.theme].floatingTabs;
}, },
tabFamily() { tabFamily(): MicrotabFamily {
return layers[this.layer || this.tab.layer].microtabs[this.family]; return layers[this.layer].microtabs![this.family];
}, },
microtabs() { microtabs(): Record<string, Microtab> {
return Object.keys(this.tabFamily) return Object.keys(this.tabFamily.data)
.filter(microtab => .filter(
microtab !== 'activeMicrotab' && this.tabFamily[microtab].isProxy && this.tabFamily[microtab].unlocked !== false) microtab =>
.reduce((acc, curr) => { microtab !== "activeMicrotab" &&
acc[curr] = this.tabFamily[curr]; this.tabFamily.data[microtab].isProxy &&
this.tabFamily.data[microtab].unlocked !== false
)
.reduce((acc: Record<string, Microtab>, curr) => {
acc[curr] = this.tabFamily.data[curr];
return acc; return acc;
}, {}); }, {});
}, },
activeMicrotab() { activeMicrotab(): Microtab | undefined {
return this.id != undefined ? this.tabFamily[this.id] : this.tabFamily.activeMicrotab; return this.id != undefined
? this.tabFamily.data[this.id]
: this.tabFamily.activeMicrotab;
}, },
embed() { embed(): string | undefined {
return this.activeMicrotab.embedLayer; return this.activeMicrotab!.embedLayer;
}, },
display() { display(): Component | string | undefined {
return coerceComponent(this.activeMicrotab.display); return this.activeMicrotab!.display && coerceComponent(this.activeMicrotab!.display!);
} }
}, },
methods: { methods: {
selectMicrotab(tab) { selectMicrotab(tab: string) {
player.subtabs[this.layer || this.tab.layer][this.family] = tab; player.subtabs[this.layer][this.family] = tab;
} }
} }
}; });
</script> </script>
<style scoped> <style scoped>

36
src/components/system/Modal.vue
View file

@ -1,7 +1,16 @@
<template> <template>
<teleport to="#modal-root"> <teleport to="#modal-root">
<transition name="modal" @before-enter="setAnimating(true)" @after-leave="setAnimating(false)"> <transition
<div class="modal-mask" v-show="show" v-on:pointerdown.self="$emit('close')" v-bind="$attrs"> name="modal"
@before-enter="setAnimating(true)"
@after-leave="setAnimating(false)"
>
<div
class="modal-mask"
v-show="show"
v-on:pointerdown.self="$emit('close')"
v-bind="$attrs"
>
<div class="modal-wrapper"> <div class="modal-wrapper">
<div class="modal-container"> <div class="modal-container">
<div class="modal-header"> <div class="modal-header">
@ -20,7 +29,10 @@
<slot name="footer" :shown="isVisible"> <slot name="footer" :shown="isVisible">
<div class="modal-default-footer"> <div class="modal-default-footer">
<div class="modal-default-flex-grow"></div> <div class="modal-default-flex-grow"></div>
<button class="button modal-default-button" @click="$emit('close')"> <button
class="button modal-default-button"
@click="$emit('close')"
>
Close Close
</button> </button>
</div> </div>
@ -33,29 +45,31 @@
</teleport> </teleport>
</template> </template>
<script> <script lang="ts">
export default { import { defineComponent } from "vue";
name: 'Modal',
export default defineComponent({
name: "Modal",
data() { data() {
return { return {
isAnimating: false isAnimating: false
} };
}, },
props: { props: {
show: Boolean show: Boolean
}, },
emits: [ 'close' ], emits: ["close"],
computed: { computed: {
isVisible() { isVisible(): boolean {
return this.show || this.isAnimating; return this.show || this.isAnimating;
} }
}, },
methods: { methods: {
setAnimating(isAnimating) { setAnimating(isAnimating: boolean) {
this.isAnimating = isAnimating; this.isAnimating = isAnimating;
} }
} }
} });
</script> </script>
<style scoped> <style scoped>

64
src/components/system/NaNScreen.vue
View file

@ -6,24 +6,36 @@
</div> </div>
</template> </template>
<template v-slot:body> <template v-slot:body>
<div>Attempted to assign "{{ path }}" to NaN (previously {{ format(previous) }}). Auto-saving has been {{ autosave ? 'enabled' : 'disabled' }}. Check the console for more details, and consider sharing it with the developers on discord.</div> <div>
<br> Attempted to assign "{{ path }}" to NaN (previously {{ format(previous) }}).
Auto-saving has been {{ autosave ? "enabled" : "disabled" }}. Check the console for
more details, and consider sharing it with the developers on discord.
</div>
<br />
<div> <div>
<a :href="discordLink" class="nan-modal-discord-link"> <a :href="discordLink" class="nan-modal-discord-link">
<img src="images/discord.png" class="nan-modal-discord" /> <img src="images/discord.png" class="nan-modal-discord" />
{{ discordName }} {{ discordName }}
</a> </a>
</div> </div>
<br> <br />
<Toggle title="Autosave" :value="autosave" @change="setAutosave" /> <Toggle title="Autosave" :value="autosave" @change="setAutosave" />
<Toggle title="Pause game" :value="paused" @change="togglePaused" /> <Toggle title="Pause game" :value="paused" @change="togglePaused" />
</template> </template>
<template v-slot:footer> <template v-slot:footer>
<div class="nan-footer"> <div class="nan-footer">
<button @click="toggleSavesManager" class="button">Open Saves Manager</button> <button @click="toggleSavesManager" class="button">
Open Saves Manager
</button>
<button @click="setZero" class="button">Set to 0</button> <button @click="setZero" class="button">Set to 0</button>
<button @click="setOne" class="button">Set to 1</button> <button @click="setOne" class="button">Set to 1</button>
<button @click="setPrev" class="button" v-if="previous && previous.neq(0) && previous.neq(1)">Set to previous</button> <button
@click="setPrev"
class="button"
v-if="previous && previous.neq(0) && previous.neq(1)"
>
Set to previous
</button>
<button @click="ignore" class="button danger">Ignore</button> <button @click="ignore" class="button danger">Ignore</button>
</div> </div>
</template> </template>
@ -31,50 +43,60 @@
<SavesManager :show="showSaves" @closeDialog="toggleSavesManager" /> <SavesManager :show="showSaves" @closeDialog="toggleSavesManager" />
</template> </template>
<script> <script lang="ts">
import modInfo from '../../data/modInfo.json'; import modInfo from "@/data/modInfo.json";
import Decimal, { format } from '../../util/bignum'; import player from "@/game/player";
import { mapState } from '../../util/vue'; import Decimal, { format } from "@/util/bignum";
import player from '../../game/player'; import { mapState } from "@/util/vue";
import { defineComponent } from "vue";
export default { export default defineComponent({
name: 'NaNScreen', name: "NaNScreen",
data() { data() {
const { discordName, discordLink } = modInfo; const { discordName, discordLink } = modInfo;
return { discordName, discordLink, format, showSaves: false }; return { discordName, discordLink, format, showSaves: false };
}, },
computed: { computed: {
...mapState([ 'hasNaN', 'autosave' ]), ...mapState(["hasNaN", "autosave"]),
path() { path(): string | undefined {
return player.NaNPath.join('.'); return player.NaNPath?.join(".");
}, },
previous() { previous(): any {
return player.NaNReceiver?.[this.property]; if (player.NaNReceiver && this.property) {
return player.NaNReceiver[this.property];
}
return null;
}, },
paused() { paused() {
return player.devSpeed === 0; return player.devSpeed === 0;
}, },
property() { property(): string | undefined {
return player.NaNPath.slice(-1)[0]; return player.NaNPath?.slice(-1)[0];
} }
}, },
methods: { methods: {
setZero() { setZero() {
if (player.NaNReceiver && this.property) {
player.NaNReceiver[this.property] = new Decimal(0); player.NaNReceiver[this.property] = new Decimal(0);
player.hasNaN = false; player.hasNaN = false;
}
}, },
setOne() { setOne() {
if (player.NaNReceiver && this.property) {
player.NaNReceiver[this.property] = new Decimal(1); player.NaNReceiver[this.property] = new Decimal(1);
player.hasNaN = false; player.hasNaN = false;
}
}, },
setPrev() { setPrev() {
player.hasNaN = false; player.hasNaN = false;
}, },
ignore() { ignore() {
if (player.NaNReceiver && this.property) {
player.NaNReceiver[this.property] = new Decimal(NaN); player.NaNReceiver[this.property] = new Decimal(NaN);
player.hasNaN = false; player.hasNaN = false;
}
}, },
setAutosave(autosave) { setAutosave(autosave: boolean) {
player.autosave = autosave; player.autosave = autosave;
}, },
toggleSavesManager() { toggleSavesManager() {
@ -84,7 +106,7 @@ export default {
player.devSpeed = this.paused ? 1 : 0; player.devSpeed = this.paused ? 1 : 0;
} }
} }
}; });
</script> </script>
<style scoped> <style scoped>

80
src/components/system/Nav.vue
View file

@ -3,7 +3,9 @@
<img v-if="banner" :src="banner" height="100%" :alt="title" /> <img v-if="banner" :src="banner" height="100%" :alt="title" />
<div v-else class="title">{{ title }}</div> <div v-else class="title">{{ title }}</div>
<div @click="openDialog('Changelog')" class="version-container"> <div @click="openDialog('Changelog')" class="version-container">
<tooltip display="Changelog" bottom class="version"><span>v{{ version }}</span></tooltip> <tooltip display="Changelog" bottom class="version"
><span>v{{ version }}</span></tooltip
>
</div> </div>
<div style="flex-grow: 1; cursor: unset;"></div> <div style="flex-grow: 1; cursor: unset;"></div>
<div class="discord"> <div class="discord">
@ -12,9 +14,17 @@
<li v-if="discordLink !== 'https://discord.gg/WzejVAx'"> <li v-if="discordLink !== 'https://discord.gg/WzejVAx'">
<a :href="discordLink" target="_blank">{{ discordName }}</a> <a :href="discordLink" target="_blank">{{ discordName }}</a>
</li> </li>
<li><a href="https://discord.gg/WzejVAx" target="_blank">The Paper Pilot Community</a></li> <li>
<li><a href="https://discord.gg/F3xveHV" target="_blank">The Modding Tree</a></li> <a href="https://discord.gg/WzejVAx" target="_blank"
<li><a href="http://discord.gg/wwQfgPa" target="_blank">Jacorb's Games</a></li> >The Paper Pilot Community</a
>
</li>
<li>
<a href="https://discord.gg/F3xveHV" target="_blank">The Modding Tree</a>
</li>
<li>
<a href="http://discord.gg/wwQfgPa" target="_blank">Jacorb's Games</a>
</li>
</ul> </ul>
</div> </div>
<div @click="openDialog('Info')"> <div @click="openDialog('Info')">
@ -33,13 +43,19 @@
</div> </div>
<div v-else class="overlay-nav" v-bind="$attrs"> <div v-else class="overlay-nav" v-bind="$attrs">
<div @click="openDialog('Changelog')" class="version-container"> <div @click="openDialog('Changelog')" class="version-container">
<tooltip display="Changelog" right xoffset="25%" class="version"><span>v{{ version }}</span></tooltip> <tooltip display="Changelog" right xoffset="25%" class="version"
><span>v{{ version }}</span></tooltip
>
</div> </div>
<div @click="openDialog('Saves')"> <div @click="openDialog('Saves')">
<tooltip display="Saves" right class="saves"><span class="material-icons">library_books</span></tooltip> <tooltip display="Saves" right class="saves"
><span class="material-icons">library_books</span></tooltip
>
</div> </div>
<div @click="openDialog('Options')"> <div @click="openDialog('Options')">
<tooltip display="<span>Options</span>" right class="options"><img src="images/options_wheel.png" /></tooltip> <tooltip display="<span>Options</span>" right class="options"
><img src="images/options_wheel.png"
/></tooltip>
</div> </div>
<div @click="openDialog('Info')"> <div @click="openDialog('Info')">
<tooltip display="<span>Info</span>" right class="info"><span>i</span></tooltip> <tooltip display="<span>Info</span>" right class="info"><span>i</span></tooltip>
@ -50,9 +66,17 @@
<li v-if="discordLink !== 'https://discord.gg/WzejVAx'"> <li v-if="discordLink !== 'https://discord.gg/WzejVAx'">
<a :href="discordLink" target="_blank">{{ discordName }}</a> <a :href="discordLink" target="_blank">{{ discordName }}</a>
</li> </li>
<li><a href="https://discord.gg/WzejVAx" target="_blank">The Paper Pilot Community</a></li> <li>
<li><a href="https://discord.gg/F3xveHV" target="_blank">The Modding Tree</a></li> <a href="https://discord.gg/WzejVAx" target="_blank"
<li><a href="http://discord.gg/wwQfgPa" target="_blank">Jacorb's Games</a></li> >The Paper Pilot Community</a
>
</li>
<li>
<a href="https://discord.gg/F3xveHV" target="_blank">The Modding Tree</a>
</li>
<li>
<a href="http://discord.gg/wwQfgPa" target="_blank">Jacorb's Games</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -61,11 +85,15 @@
<Options :show="showOptions" @closeDialog="closeDialog" /> <Options :show="showOptions" @closeDialog="closeDialog" />
</template> </template>
<script> <script lang="ts">
import modInfo from '../../data/modInfo'; import modInfo from "@/data/modInfo.json";
import { defineComponent } from "vue";
export default { type modals = "Info" | "Saves" | "Options" | "Changelog";
name: 'Nav', type showModals = "showInfo" | "showSaves" | "showOptions" | "showChangelog";
export default defineComponent({
name: "Nav",
data() { data() {
return { return {
useHeader: modInfo.useHeader, useHeader: modInfo.useHeader,
@ -78,20 +106,20 @@ export default {
showSaves: false, showSaves: false,
showOptions: false, showOptions: false,
showChangelog: false showChangelog: false
} };
}, },
methods: { methods: {
openDiscord() { openDiscord() {
window.open(this.discordLink, 'mywindow'); window.open(this.discordLink, "mywindow");
}, },
openDialog(dialog) { openDialog(dialog: modals) {
this[`show${dialog}`] = true; this[`show${dialog}` as showModals] = true;
}, },
closeDialog(dialog) { closeDialog(dialog: modals) {
this[`show${dialog}`] = false; this[`show${dialog}` as showModals] = false;
} }
} }
}; });
</script> </script>
<style scoped> <style scoped>
@ -169,7 +197,7 @@ export default {
padding: 20px; padding: 20px;
right: -280px; right: -280px;
width: 200px; width: 200px;
transition: right .25s ease; transition: right 0.25s ease;
background: var(--secondary-background); background: var(--secondary-background);
z-index: 10; z-index: 10;
} }
@ -178,7 +206,7 @@ export default {
position: absolute; position: absolute;
left: -280px; left: -280px;
right: unset; right: unset;
transition: left .25s ease; transition: left 0.25s ease;
} }
.overlay-nav .discord:hover .discord-links { .overlay-nav .discord:hover .discord-links {
@ -205,8 +233,7 @@ export default {
.info:hover span { .info:hover span {
transform: scale(1.2, 1.2); transform: scale(1.2, 1.2);
text-shadow: 5px 0 10px var(--link), text-shadow: 5px 0 10px var(--link), -3px 0 12px var(--link);
-3px 0 12px var(--link);
} }
.saves span { .saves span {
@ -215,8 +242,7 @@ export default {
.saves:hover span { .saves:hover span {
transform: scale(1.2, 1.2); transform: scale(1.2, 1.2);
text-shadow: 5px 0 10px var(--color), text-shadow: 5px 0 10px var(--color), -3px 0 12px var(--color);
-3px 0 12px var(--color);
} }
.options img { .options img {

67
src/components/system/Options.vue
View file

@ -6,35 +6,62 @@
</div> </div>
</template> </template>
<template v-slot:body> <template v-slot:body>
<Select title="Theme" :options="themes" :value="theme" @change="setTheme" default="classic" /> <Select
<Select title="Show Milestones" :options="msDisplayOptions" :value="msDisplay" @change="setMSDisplay" default="all" /> title="Theme"
<Toggle title="Offline Production" :value="offlineProd" @change="toggleOption('offlineProd')" /> :options="themes"
:value="theme"
@change="setTheme"
default="classic"
/>
<Select
title="Show Milestones"
:options="msDisplayOptions"
:value="msDisplay"
@change="setMSDisplay"
default="all"
/>
<Toggle
title="Offline Production"
:value="offlineProd"
@change="toggleOption('offlineProd')"
/>
<Toggle title="Autosave" :value="autosave" @change="toggleOption('autosave')" /> <Toggle title="Autosave" :value="autosave" @change="toggleOption('autosave')" />
<Toggle title="Pause game" :value="paused" @change="togglePaused" /> <Toggle title="Pause game" :value="paused" @change="togglePaused" />
<Toggle title="Show TPS" :value="showTPS" @change="toggleOption('showTPS')" /> <Toggle title="Show TPS" :value="showTPS" @change="toggleOption('showTPS')" />
<Toggle title="Hide Maxed Challenges" :value="hideChallenges" @change="toggleOption('hideChallenges')" /> <Toggle
title="Hide Maxed Challenges"
:value="hideChallenges"
@change="toggleOption('hideChallenges')"
/>
</template> </template>
</Modal> </Modal>
</template> </template>
<script> <script lang="ts">
import themes from '../../data/themes'; import { defineComponent } from "vue";
import { camelToTitle } from '../../util/common'; import themes, { Themes } from "@/data/themes";
import { mapState } from '../../util/vue'; import { camelToTitle } from "@/util/common";
import player from '../../game/player'; import { mapState } from "@/util/vue";
import player from "@/game/player";
import { MilestoneDisplay } from "@/game/enums";
export default { export default defineComponent({
name: 'Options', name: "Options",
props: { props: {
show: Boolean show: Boolean
}, },
emits: [ 'closeDialog' ], emits: ["closeDialog"],
data() { data() {
return { return {
themes: Object.keys(themes).map(theme => ({ label: camelToTitle(theme), value: theme })), themes: Object.keys(themes).map(theme => ({
msDisplayOptions: [ "all", "last", "configurable", "incomplete", "none" ] label: camelToTitle(theme),
.map(option => ({ label: camelToTitle(option), value: option })) value: theme
} })),
msDisplayOptions: ["all", "last", "configurable", "incomplete", "none"].map(option => ({
label: camelToTitle(option),
value: option
}))
};
}, },
computed: { computed: {
...mapState(["autosave", "offlineProd", "showTPS", "hideChallenges", "theme", "msDisplay"]), ...mapState(["autosave", "offlineProd", "showTPS", "hideChallenges", "theme", "msDisplay"]),
@ -43,20 +70,20 @@ export default {
} }
}, },
methods: { methods: {
toggleOption(option) { toggleOption(option: string) {
player[option] = !player[option]; player[option] = !player[option];
}, },
setTheme(theme) { setTheme(theme: Themes) {
player.theme = theme; player.theme = theme;
}, },
setMSDisplay(msDisplay) { setMSDisplay(msDisplay: MilestoneDisplay) {
player.msDisplay = msDisplay; player.msDisplay = msDisplay;
}, },
togglePaused() { togglePaused() {
player.devSpeed = this.paused ? 1 : 0; player.devSpeed = this.paused ? 1 : 0;
} }
} }
}; });
</script> </script>
<style scoped> <style scoped>

13
src/components/system/Resource.vue
View file

@ -4,15 +4,16 @@
</h2> </h2>
</template> </template>
<script> <script lang="ts">
export default { import { defineComponent } from "vue";
name: 'resource',
export default defineComponent({
name: "resource",
props: { props: {
color: String, color: String,
amount: String amount: String
} }
}; });
</script> </script>
<style scoped> <style scoped></style>
</style>

10
src/components/system/Row.vue
View file

@ -6,8 +6,10 @@
</div> </div>
</template> </template>
<script> <script lang="ts">
export default { import { defineComponent } from "vue";
name: 'row'
}; export default defineComponent({
name: "row"
});
</script> </script>

81
src/components/system/Save.vue
View file

@ -1,17 +1,34 @@
<template> <template>
<div class="save" :class="{ active }"> <div class="save" :class="{ active }">
<div class='handle material-icons'>drag_handle</div> <div class="handle material-icons">drag_handle</div>
<div class="actions" v-if="!editing"> <div class="actions" v-if="!editing">
<feedback-button @click="$emit('export')" class="button" left v-if="save.error == undefined && !confirming"> <feedback-button
@click="$emit('export')"
class="button"
left
v-if="save.error == undefined && !confirming"
>
<span class="material-icons">content_paste</span> <span class="material-icons">content_paste</span>
</feedback-button> </feedback-button>
<button @click="$emit('duplicate')" class="button" v-if="save.error == undefined && !confirming"> <button
@click="$emit('duplicate')"
class="button"
v-if="save.error == undefined && !confirming"
>
<span class="material-icons">content_copy</span> <span class="material-icons">content_copy</span>
</button> </button>
<button @click="toggleEditing" class="button" v-if="save.error == undefined && !confirming"> <button
@click="toggleEditing"
class="button"
v-if="save.error == undefined && !confirming"
>
<span class="material-icons">edit</span> <span class="material-icons">edit</span>
</button> </button>
<danger-button :disabled="active" @click="$emit('delete')" @confirmingChanged="confirmingChanged"> <danger-button
:disabled="active"
@click="$emit('delete')"
@confirmingChanged="confirmingChanged"
>
<span class="material-icons" style="margin: -2px">delete</span> <span class="material-icons" style="margin: -2px">delete</span>
</danger-button> </danger-button>
</div> </div>
@ -27,32 +44,40 @@
<button class="button open" @click="$emit('open')"> <button class="button open" @click="$emit('open')">
<h3>{{ save.name }}</h3> <h3>{{ save.name }}</h3>
</button> </button>
<span class="save-version">v{{ save.modVersion }}</span><br> <span class="save-version">v{{ save.modVersion }}</span
<div>Last played {{ dateFormat.format(time) }}</div> ><br />
<div v-if="time">Last played {{ dateFormat.format(time) }}</div>
</div> </div>
<div class="details" v-else-if="save.error == undefined && editing"> <div class="details" v-else-if="save.error == undefined && editing">
<TextField v-model="newName" class="editname" @submit="changeName" /> <TextField v-model="newName" class="editname" @submit="changeName" />
</div> </div>
<div v-else class="details error"> <div v-else class="details error">Error: Failed to load save with id {{ save.id }}</div>
Error: Failed to load save with id {{ save.id }}
</div>
</div> </div>
</template> </template>
<script> <script lang="ts">
import player from '../../game/player'; import player from "@/game/player";
import { PlayerData } from "@/typings/player";
import { defineComponent, PropType } from "vue";
export default { export default defineComponent({
name: 'save', name: "save",
props: { props: {
save: Object save: {
type: Object as PropType<Partial<PlayerData>>,
required: true
}
}, },
emits: [ 'export', 'open', 'duplicate', 'delete', 'editSave' ], emits: ["export", "open", "duplicate", "delete", "editSave"],
data() { data() {
return { return {
dateFormat: new Intl.DateTimeFormat('en-US', { dateFormat: new Intl.DateTimeFormat("en-US", {
year: 'numeric', month: 'numeric', day: 'numeric', year: "numeric",
hour: 'numeric', minute: 'numeric', second: 'numeric', month: "numeric",
day: "numeric",
hour: "numeric",
minute: "numeric",
second: "numeric"
}), }),
editing: false, editing: false,
confirming: false, confirming: false,
@ -60,27 +85,27 @@ export default {
}; };
}, },
computed: { computed: {
active() { active(): boolean {
return this.save.id === player.id; return this.save.id === player.id;
}, },
time() { time(): number | undefined {
return this.active ? player.time : this.save.time; return this.active ? player.time : this.save.time;
} }
}, },
methods: { methods: {
confirmingChanged(confirming) { confirmingChanged(confirming: boolean) {
this.confirming = confirming; this.confirming = confirming;
}, },
toggleEditing() { toggleEditing() {
this.newName = this.save.name; this.newName = this.save.name || "";
this.editing = !this.editing; this.editing = !this.editing;
}, },
changeName() { changeName() {
this.$emit('editSave', this.newName); this.$emit("editSave", this.newName);
this.editing = false; this.editing = false;
} }
} }
}; });
</script> </script>
<style scoped> <style scoped>
@ -119,14 +144,14 @@ export default {
} }
.error { .error {
font-size: .8em; font-size: 0.8em;
color: var(--danger); color: var(--danger);
} }
.save-version { .save-version {
margin-left: 4px; margin-left: 4px;
font-size: .7em; font-size: 0.7em;
opacity: .7; opacity: 0.7;
} }
.actions { .actions {

196
src/components/system/SavesManager.vue
View file

@ -4,24 +4,48 @@
<h2>Saves Manager</h2> <h2>Saves Manager</h2>
</template> </template>
<template v-slot:body v-sortable="{ update, handle: '.handle' }"> <template v-slot:body v-sortable="{ update, handle: '.handle' }">
<save v-for="(save, index) in saves" :key="index" :save="save" @open="openSave(save.id)" @export="exportSave(save.id)" <save
@editSave="name => editSave(save.id, name)" @duplicate="duplicateSave(save.id)" @delete="deleteSave(save.id)" /> v-for="(save, index) in saves"
:key="index"
:save="save"
@open="openSave(save.id)"
@export="exportSave(save.id)"
@editSave="name => editSave(save.id, name)"
@duplicate="duplicateSave(save.id)"
@delete="deleteSave(save.id)"
/>
</template> </template>
<template v-slot:footer> <template v-slot:footer>
<div class="modal-footer"> <div class="modal-footer">
<TextField :value="saveToImport" @submit="importSave" @input="importSave" <TextField
title="Import Save" placeholder="Paste your save here!" :class="{ importingFailed }" /> :value="saveToImport"
@submit="importSave"
@input="importSave"
title="Import Save"
placeholder="Paste your save here!"
:class="{ importingFailed }"
/>
<div class="field"> <div class="field">
<span class="field-title">Create Save</span> <span class="field-title">Create Save</span>
<div class="field-buttons"> <div class="field-buttons">
<button class="button" @click="newSave">New Game</button> <button class="button" @click="newSave">New Game</button>
<Select v-if="Object.keys(bank).length > 0" :options="bank" closeOnSelect <Select
@change="newFromPreset" placeholder="Select preset" class="presets" :value="[]" /> v-if="Object.keys(bank).length > 0"
:options="bank"
closeOnSelect
@change="newFromPreset"
placeholder="Select preset"
class="presets"
:value="[]"
/>
</div> </div>
</div> </div>
<div class="footer"> <div class="footer">
<div style="flex-grow: 1"></div> <div style="flex-grow: 1"></div>
<button class="button modal-default-button" @click="$emit('closeDialog', 'Saves')"> <button
class="button modal-default-button"
@click="$emit('closeDialog', 'Saves')"
>
Close Close
</button> </button>
</div> </div>
@ -30,22 +54,29 @@
</Modal> </Modal>
</template> </template>
<script> <script lang="ts">
import { newSave, getUniqueID, loadSave, save } from '../../util/save'; import modInfo from "@/data/modInfo.json";
import player from '../../game/player'; import player from "@/game/player";
import modInfo from '../../data/modInfo.json'; import { PlayerData } from "@/typings/player";
import { getUniqueID, loadSave, newSave, save } from "@/util/save";
import { defineComponent } from "vue";
export default { export default defineComponent({
name: 'SavesManager', name: "SavesManager",
props: { props: {
show: Boolean show: Boolean
}, },
emits: [ 'closeDialog' ], emits: ["closeDialog"],
data() { data() {
let bankContext = require.context('raw-loader!../../../saves', true, /\.txt$/); let bankContext = require.context("raw-loader!../../../saves", true, /\.txt$/);
let bank = bankContext.keys().reduce((acc, curr) => { let bank = bankContext
.keys()
.reduce((acc: Array<{ label: string; value: string }>, curr) => {
// .slice(2, -4) strips the leading ./ and the trailing .txt // .slice(2, -4) strips the leading ./ and the trailing .txt
acc.push({ label: curr.slice(2, -4), value: bankContext(curr).default }); acc.push({
label: curr.slice(2, -4),
value: bankContext(curr).default
});
return acc; return acc;
}, []); }, []);
return { return {
@ -53,6 +84,11 @@ export default {
saves: {}, // Gets populated when the modal is opened saves: {}, // Gets populated when the modal is opened
saveToImport: "", saveToImport: "",
bank bank
} as {
importingFailed: boolean;
saves: Record<string, Partial<PlayerData>>;
saveToImport: string;
bank: Array<{ label: string; value: string }>;
}; };
}, },
watch: { watch: {
@ -65,24 +101,34 @@ export default {
methods: { methods: {
loadSaveData() { loadSaveData() {
try { try {
const { saves } = JSON.parse(decodeURIComponent(escape(atob(localStorage.getItem(modInfo.id))))); const { saves } = JSON.parse(
this.saves = saves.reduce((acc, curr) => { decodeURIComponent(escape(atob(localStorage.getItem(modInfo.id)!)))
);
this.saves = saves.reduce(
(acc: Record<string, Partial<PlayerData>>, curr: string) => {
try { try {
acc[curr] = JSON.parse(decodeURIComponent(escape(atob(localStorage.getItem(curr))))); acc[curr] = JSON.parse(
decodeURIComponent(escape(atob(localStorage.getItem(curr)!)))
);
acc[curr].id = curr; acc[curr].id = curr;
} catch (error) { } catch (error) {
console.warn(`Can't load save with id "${curr}"`, error); console.warn(`Can't load save with id "${curr}"`, error);
acc[curr] = { error, id: curr }; acc[curr] = { error, id: curr };
} }
return acc; return acc;
}, {}); },
{}
);
} catch (e) { } catch (e) {
this.saves = { [player.id]: player }; this.saves = { [player.id]: player };
const modData = { active: player.id, saves: [player.id] }; const modData = { active: player.id, saves: [player.id] };
localStorage.setItem(modInfo.id, btoa(unescape(encodeURIComponent(JSON.stringify(modData))))); localStorage.setItem(
modInfo.id,
btoa(unescape(encodeURIComponent(JSON.stringify(modData))))
);
} }
}, },
exportSave(id) { exportSave(id: string) {
let saveToExport; let saveToExport;
if (player.id === id) { if (player.id === id) {
save(); save();
@ -100,57 +146,86 @@ export default {
document.execCommand("copy"); document.execCommand("copy");
document.body.removeChild(el); document.body.removeChild(el);
}, },
duplicateSave(id) { duplicateSave(id: string) {
if (player.id === id) { if (player.id === id) {
save(); save();
} }
const playerData = { ...this.saves[id], id: getUniqueID() }; const playerData = { ...this.saves[id], id: getUniqueID() };
localStorage.setItem(playerData.id, btoa(unescape(encodeURIComponent(JSON.stringify(playerData))))); localStorage.setItem(
playerData.id,
btoa(unescape(encodeURIComponent(JSON.stringify(playerData))))
);
const modData = JSON.parse(decodeURIComponent(escape(atob(localStorage.getItem(modInfo.id))))); const modData = JSON.parse(
decodeURIComponent(escape(atob(localStorage.getItem(modInfo.id)!)))
);
modData.saves.push(playerData.id); modData.saves.push(playerData.id);
localStorage.setItem(modInfo.id, btoa(unescape(encodeURIComponent(JSON.stringify(modData))))); localStorage.setItem(
modInfo.id,
btoa(unescape(encodeURIComponent(JSON.stringify(modData))))
);
this.saves[playerData.id] = playerData; this.saves[playerData.id] = playerData;
}, },
deleteSave(id) { deleteSave(id: string) {
const modData = JSON.parse(decodeURIComponent(escape(atob(localStorage.getItem(modInfo.id))))); const modData = JSON.parse(
modData.saves = modData.saves.filter(save => save !== id); decodeURIComponent(escape(atob(localStorage.getItem(modInfo.id)!)))
);
modData.saves = modData.saves.filter((save: string) => save !== id);
localStorage.removeItem(id); localStorage.removeItem(id);
localStorage.setItem(modInfo.id, btoa(unescape(encodeURIComponent(JSON.stringify(modData))))); localStorage.setItem(
modInfo.id,
btoa(unescape(encodeURIComponent(JSON.stringify(modData))))
);
delete this.saves[id]; delete this.saves[id];
}, },
openSave(id) { openSave(id: string) {
this.saves[player.id].time = player.time; this.saves[player.id].time = player.time;
loadSave(this.saves[id]); loadSave(this.saves[id]);
const modData = JSON.parse(decodeURIComponent(escape(atob(localStorage.getItem(modInfo.id))))); const modData = JSON.parse(
decodeURIComponent(escape(atob(localStorage.getItem(modInfo.id)!)))
);
modData.active = id; modData.active = id;
localStorage.setItem(modInfo.id, btoa(unescape(encodeURIComponent(JSON.stringify(modData))))); localStorage.setItem(
modInfo.id,
btoa(unescape(encodeURIComponent(JSON.stringify(modData))))
);
}, },
async newSave() { newSave() {
const playerData = await newSave(); const playerData = newSave();
this.saves[playerData.id] = playerData; this.saves[playerData.id] = playerData;
}, },
newFromPreset(preset) { newFromPreset(preset: string) {
const playerData = JSON.parse(decodeURIComponent(escape(atob(preset)))); const playerData = JSON.parse(decodeURIComponent(escape(atob(preset))));
playerData.id = getUniqueID(); playerData.id = getUniqueID();
localStorage.setItem(playerData.id, btoa(unescape(encodeURIComponent(JSON.stringify(playerData))))); localStorage.setItem(
playerData.id,
btoa(unescape(encodeURIComponent(JSON.stringify(playerData))))
);
const modData = JSON.parse(decodeURIComponent(escape(atob(localStorage.getItem(modInfo.id))))); const modData = JSON.parse(
decodeURIComponent(escape(atob(localStorage.getItem(modInfo.id)!)))
);
modData.saves.push(playerData.id); modData.saves.push(playerData.id);
localStorage.setItem(modInfo.id, btoa(unescape(encodeURIComponent(JSON.stringify(modData))))); localStorage.setItem(
modInfo.id,
btoa(unescape(encodeURIComponent(JSON.stringify(modData))))
);
this.saves[playerData.id] = playerData; this.saves[playerData.id] = playerData;
}, },
editSave(id, newName) { editSave(id: string, newName: string) {
this.saves[id].name = newName; this.saves[id].name = newName;
if (player.id === id) { if (player.id === id) {
player.name = newName; player.name = newName;
save(); save();
} else { } else {
localStorage.setItem(id, btoa(unescape(encodeURIComponent(JSON.stringify(this.saves[id]))))); localStorage.setItem(
id,
btoa(unescape(encodeURIComponent(JSON.stringify(this.saves[id]))))
);
} }
}, },
importSave(text) { importSave(text: string) {
this.saveToImport = text; this.saveToImport = text;
if (text) { if (text) {
this.$nextTick(() => { this.$nextTick(() => {
@ -158,14 +233,22 @@ export default {
const playerData = JSON.parse(decodeURIComponent(escape(atob(text)))); const playerData = JSON.parse(decodeURIComponent(escape(atob(text))));
const id = getUniqueID(); const id = getUniqueID();
playerData.id = id; playerData.id = id;
localStorage.setItem(id, btoa(unescape(encodeURIComponent(JSON.stringify(playerData))))); localStorage.setItem(
id,
btoa(unescape(encodeURIComponent(JSON.stringify(playerData))))
);
this.saves[id] = playerData; this.saves[id] = playerData;
this.saveToImport = ""; this.saveToImport = "";
this.importingFailed = false; this.importingFailed = false;
const modData = JSON.parse(decodeURIComponent(escape(atob(localStorage.getItem(modInfo.id))))); const modData = JSON.parse(
decodeURIComponent(escape(atob(localStorage.getItem(modInfo.id)!)))
);
modData.saves.push(id); modData.saves.push(id);
localStorage.setItem(modInfo.id, btoa(unescape(encodeURIComponent(JSON.stringify(modData))))); localStorage.setItem(
modInfo.id,
btoa(unescape(encodeURIComponent(JSON.stringify(modData))))
);
} catch (e) { } catch (e) {
this.importingFailed = true; this.importingFailed = true;
} }
@ -174,15 +257,18 @@ export default {
this.importingFailed = false; this.importingFailed = false;
} }
}, },
update(e) { update(e: { newIndex: number; oldIndex: number }) {
this.saves.splice(e.newIndex, 0, this.saves.splive(e.oldIndex, 1)[0]); const modData = JSON.parse(
decodeURIComponent(escape(atob(localStorage.getItem(modInfo.id)!)))
const modData = JSON.parse(decodeURIComponent(escape(atob(localStorage.getItem(modInfo.id))))); );
modData.saves.splice(e.newIndex, 0, modData.saves.splice(e.oldIndex, 1)[0]); modData.saves.splice(e.newIndex, 0, modData.saves.splice(e.oldIndex, 1)[0]);
localStorage.setItem(modInfo.id, btoa(unescape(encodeURIComponent(JSON.stringify(modData))))); localStorage.setItem(
modInfo.id,
btoa(unescape(encodeURIComponent(JSON.stringify(modData))))
);
} }
} }
}; });
</script> </script>
<style scoped> <style scoped>
@ -220,11 +306,7 @@ export default {
width: 220px; width: 220px;
} }
.presets .vue-dropdown { .presets .vue-select[aria-expanded="true"] vue-dropdown {
}
.presets .vue-select[aria-expanded='true'] vue-dropdown {
visibility: hidden; visibility: hidden;
} }
</style> </style>

18
src/components/system/Spacer.vue
View file

@ -2,20 +2,22 @@
<div :style="{ width: spacingWidth, height: spacingHeight }"></div> <div :style="{ width: spacingWidth, height: spacingHeight }"></div>
</template> </template>
<script> <script lang="ts">
export default { import { defineComponent } from "vue";
name: 'spacer',
export default defineComponent({
name: "spacer",
props: { props: {
width: String, width: String,
height: String height: String
}, },
computed: { computed: {
spacingWidth() { spacingWidth(): string {
return this.width || '8px'; return this.width || "8px";
}, },
spacingHeight() { spacingHeight(): string {
return this.height || '17px'; return this.height || "17px";
} }
} }
}; });
</script> </script>

33
src/components/system/Sticky.vue
View file

@ -4,44 +4,53 @@
</div> </div>
</template> </template>
<script> <script lang="ts">
export default { import { defineComponent } from "vue";
name: 'sticky',
export default defineComponent({
name: "sticky",
data() { data() {
return { return {
top: 0, top: "0",
observer: null observer: null
} as {
top: string;
observer: ResizeObserver | null;
}; };
}, },
mounted() { mounted() {
this.setup();
},
methods: {
setup() {
this.$nextTick(() => { this.$nextTick(() => {
if (this.$refs.sticky == undefined) { if (this.$refs.sticky == undefined) {
this.$nextTick(this.mounted); this.$nextTick(this.setup);
} else { } else {
this.updateTop(); this.updateTop();
this.observer = new ResizeObserver(this.updateTop); this.observer = new ResizeObserver(this.updateTop);
this.observer.observe(this.$refs.sticky.parentElement); this.observer.observe((this.$refs.sticky as HTMLElement).parentElement!);
} }
}); });
}, },
methods: {
updateTop() { updateTop() {
let el = this.$refs.sticky; let el = this.$refs.sticky as HTMLElement;
if (el == undefined) { if (el == undefined) {
return; return;
} }
let top = 0; let top = 0;
while (el.previousSibling) { while (el.previousSibling) {
if (el.previousSibling.dataset && 'vSticky' in el.previousSibling.dataset) { const sibling = el.previousSibling as HTMLElement;
top += el.previousSibling.offsetHeight; if (sibling.dataset && "vSticky" in sibling.dataset) {
top += sibling.offsetHeight;
} }
el = el.previousSibling; el = sibling;
} }
this.top = top + "px"; this.top = top + "px";
} }
} }
}; });
</script> </script>
<style scoped> <style scoped>

27
src/components/system/Subtab.vue
View file

@ -1,27 +0,0 @@
<template>
<LayerProvider :layer="layer || tab.layer" :index="tab.index">
<component :is="display" />
</LayerProvider>
</template>
<script>
import { layers } from '../../game/layers';
import { coerceComponent } from '../../util/vue';
export default {
name: 'subtab',
inject: [ 'tab' ],
props: {
layer: String,
id: String
},
computed: {
display() {
return coerceComponent(layers[this.layer || this.tab.layer].subtabs[this.id].display);
}
}
};
</script>
<style scoped>
</style>

24
src/components/system/TPS.vue
View file

@ -1,21 +1,25 @@
<template> <template>
<div class="tpsDisplay" v-if="tps !== 'NaN'"> <div class="tpsDisplay" v-if="tps !== 'NaN'">TPS: {{ tps }}</div>
TPS: {{ tps }}
</div>
</template> </template>
<script> <script lang="ts">
import Decimal, { formatWhole } from '../../util/bignum'; import player from "@/game/player";
import player from '../../game/player'; import Decimal, { formatWhole } from "@/util/bignum";
import { defineComponent } from "vue";
export default { export default defineComponent({
name: 'TPS', name: "TPS",
computed: { computed: {
tps() { tps() {
return formatWhole(Decimal.div(player.lastTenTicks.length, player.lastTenTicks.reduce((acc, curr) => acc + curr, 0))) return formatWhole(
Decimal.div(
player.lastTenTicks.length,
player.lastTenTicks.reduce((acc, curr) => acc + curr, 0)
)
);
} }
} }
}; });
</script> </script>
<style scoped> <style scoped>

78
src/components/system/TabButton.vue
View file

@ -1,50 +1,70 @@
<template> <template>
<button @click="$emit('selectTab')" class="tabButton" :style="style" <button
:class="{ notify: options.notify, resetNotify: options.resetNotify, floating, activeTab }"> @click="$emit('selectTab')"
class="tabButton"
:style="style"
:class="{
notify: options.notify,
resetNotify: options.resetNotify,
floating,
activeTab
}"
>
{{ text }} {{ text }}
</button> </button>
</template> </template>
<script> <script lang="ts">
import { layers } from '../../game/layers'; import themes from "@/data/themes";
import player from '../../game/player'; import { layers } from "@/game/layers";
import themes from '../../data/themes'; import player from "@/game/player";
import { Subtab } from "@/typings/features/subtab";
import { InjectLayerMixin } from "@/util/vue";
import { defineComponent, PropType } from "vue";
export default { export default defineComponent({
name: 'tab-button', name: "tab-button",
mixins: [InjectLayerMixin],
props: { props: {
layer: String,
text: String, text: String,
options: Object, options: {
type: Object as PropType<Subtab>,
required: true
},
activeTab: Boolean activeTab: Boolean
}, },
emits: [ 'selectTab' ], emits: ["selectTab"],
inject: [ 'tab' ],
computed: { computed: {
floating() { floating(): boolean {
return themes[player.theme].floatingTabs; return themes[player.theme].floatingTabs;
}, },
style() { style(): Array<Partial<CSSStyleDeclaration> | undefined> {
return [ return [
(this.floating || this.activeTab) && { 'border-color': layers[this.layer || this.tab.layer].color }, this.floating || this.activeTab
layers[this.layer || this.tab.layer].componentStyles?.['tab-button'], ? {
this.options.resetNotify && this.options.glowColor && borderColor: layers[this.layer].color
{ }
boxShadow: this.floating ? : undefined,
`-2px -4px 4px rgba(0, 0, 0, 0) inset, 0 0 8px ${this.options.glowColor}` : layers[this.layer].componentStyles?.["tab-button"],
`0px 10px 7px -10px ${this.options.glowColor}` this.options.resetNotify && this.options.glowColor
}, ? {
this.options.notify && this.options.glowColor && boxShadow: this.floating
{ ? `-2px -4px 4px rgba(0, 0, 0, 0) inset, 0 0 8px ${this.options.glowColor}`
boxShadow: this.floating ? : `0px 10px 7px -10px ${this.options.glowColor}`
`-2px -4px 4px rgba(0, 0, 0, 0) inset, 0 0 20px ${this.options.glowColor}` : }
`0px 15px 7px -10px ${this.options.glowColor}` : undefined,
}, this.options.notify && this.options.glowColor
? {
boxShadow: this.floating
? `-2px -4px 4px rgba(0, 0, 0, 0) inset, 0 0 20px ${this.options.glowColor}`
: `0px 15px 7px -10px ${this.options.glowColor}`
}
: undefined,
this.options.buttonStyle this.options.buttonStyle
]; ];
} }
} }
}; });
</script> </script>
<style scoped> <style scoped>

43
src/components/system/Tabs.vue
View file

@ -3,11 +3,20 @@
<div v-for="(tab, index) in tabs" :key="index" class="tab" :ref="`tab-${index}`"> <div v-for="(tab, index) in tabs" :key="index" class="tab" :ref="`tab-${index}`">
<Nav v-if="index === 0 && !useHeader" /> <Nav v-if="index === 0 && !useHeader" />
<div class="inner-tab"> <div class="inner-tab">
<LayerProvider :layer="tab" :index="index" v-if="tab in components && components[tab]"> <LayerProvider
:layer="tab"
:index="index"
v-if="tab in components && components[tab]"
>
<component :is="components[tab]" /> <component :is="components[tab]" />
</LayerProvider> </LayerProvider>
<layer-tab :layer="tab" :index="index" v-else-if="tab in components" :minimizable="true" <layer-tab
:tab="() => $refs[`tab-${index}`]" /> :layer="tab"
:index="index"
v-else-if="tab in components"
:minimizable="true"
:tab="() => $refs[`tab-${index}`]"
/>
<component :is="tab" :index="index" v-else /> <component :is="tab" :index="index" v-else />
</div> </div>
<div class="separator" v-if="index !== tabs.length - 1"></div> <div class="separator" v-if="index !== tabs.length - 1"></div>
@ -15,26 +24,32 @@
</div> </div>
</template> </template>
<script> <script lang="ts">
import modInfo from '../../data/modInfo.json'; import modInfo from "@/data/modInfo.json";
import { layers } from '../../game/layers'; import { layers } from "@/game/layers";
import { mapState } from '../../util/vue'; import { coerceComponent, mapState } from "@/util/vue";
import { Component, defineComponent } from "vue";
export default { export default defineComponent({
name: 'Tabs', name: "Tabs",
data() { data() {
return { useHeader: modInfo.useHeader }; return { useHeader: modInfo.useHeader };
}, },
computed: { computed: {
...mapState([ 'tabs' ]), ...mapState(["tabs"]),
components() { components() {
return Object.keys(layers).reduce((acc, curr) => { return Object.keys(layers).reduce(
acc[curr] = layers[curr].component || false; (acc: Record<string, Component | string | false>, curr) => {
acc[curr] =
(layers[curr].component && coerceComponent(layers[curr].component!)) ||
false;
return acc; return acc;
}, {}); },
{}
);
} }
} }
}; });
</script> </script>
<style scoped> <style scoped>

47
src/components/system/Tooltip.vue
View file

@ -1,20 +1,34 @@
<template> <template>
<div class="tooltip-container" :class="{ shown }" @mouseenter="setHover(true)" @mouseleave="setHover(false)"> <div
class="tooltip-container"
:class="{ shown }"
@mouseenter="setHover(true)"
@mouseleave="setHover(false)"
>
<slot /> <slot />
<transition name="fade"> <transition name="fade">
<div v-if="shown" class="tooltip" :class="{ top, left, right, bottom }" <div
:style="{ '--xoffset': xoffset || '0px', '--yoffset': yoffset || '0px' }"> v-if="shown"
class="tooltip"
:class="{ top, left, right, bottom }"
:style="{
'--xoffset': xoffset || '0px',
'--yoffset': yoffset || '0px'
}"
>
<component :is="tooltipDisplay" /> <component :is="tooltipDisplay" />
</div> </div>
</transition> </transition>
</div> </div>
</template> </template>
<script> <script lang="ts">
import { coerceComponent } from '../../util/vue'; import { CoercableComponent } from "@/typings/component";
import { coerceComponent } from "@/util/vue";
import { Component, defineComponent, PropType } from "vue";
export default { export default defineComponent({
name: 'tooltip', name: "tooltip",
data() { data() {
return { return {
hover: false hover: false
@ -22,7 +36,10 @@ export default {
}, },
props: { props: {
force: Boolean, force: Boolean,
display: String, display: {
type: [String, Object] as PropType<CoercableComponent>,
required: true
},
top: Boolean, top: Boolean,
left: Boolean, left: Boolean,
right: Boolean, right: Boolean,
@ -31,10 +48,10 @@ export default {
yoffset: String yoffset: String
}, },
computed: { computed: {
tooltipDisplay() { tooltipDisplay(): Component | string {
return coerceComponent(this.display); return coerceComponent(this.display);
}, },
shown() { shown(): boolean {
return this.force || this.hover; return this.force || this.hover;
} }
}, },
@ -44,11 +61,11 @@ export default {
} }
}, },
methods: { methods: {
setHover(hover) { setHover(hover: boolean) {
this.hover = hover; this.hover = hover;
} }
} }
}; });
</script> </script>
<style scoped> <style scoped>
@ -58,7 +75,8 @@ export default {
--yoffset: 0px; --yoffset: 0px;
} }
.tooltip, .tooltip::after { .tooltip,
.tooltip::after {
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
} }
@ -83,7 +101,8 @@ export default {
z-index: 10; z-index: 10;
} }
.fade-enter, .fade-leave-to { .fade-enter,
.fade-leave-to {
opacity: 0; opacity: 0;
} }

10
src/components/system/VerticalRule.vue
View file

@ -2,13 +2,15 @@
<div class="vr" :style="{ height }"></div> <div class="vr" :style="{ height }"></div>
</template> </template>
<script> <script lang="ts">
export default { import { defineComponent } from "vue";
name: 'vr',
export default defineComponent({
name: "vr",
props: { props: {
height: String height: String
} }
}; });
</script> </script>
<style scoped> <style scoped>

72
src/components/tree/BranchLine.vue
View file

@ -1,48 +1,66 @@
<template> <template>
<line :stroke="stroke" :stroke-width="strokeWidth" v-bind="typeof options === 'string' ? [] : options" <line
:x1="startPosition.x" :y1="startPosition.y" :x2="endPosition.x" :y2="endPosition.y" /> :stroke="stroke"
:stroke-width="strokeWidth"
v-bind="typeof options === 'string' ? [] : options"
:x1="startPosition.x"
:y1="startPosition.y"
:x2="endPosition.x"
:y2="endPosition.y"
/>
</template> </template>
<script> <script lang="ts">
export default { import { BranchNode, BranchOptions, Position } from "@/typings/branches";
name: 'branch-line', import { defineComponent, PropType } from "vue";
export default defineComponent({
name: "branch-line",
props: { props: {
options: [ String, Object ], options: {
startNode: Object, type: [String, Object] as PropType<string | BranchOptions>,
endNode: Object required: true
},
startNode: {
type: Object as PropType<BranchNode>,
required: true
},
endNode: {
type: Object as PropType<BranchNode>,
required: true
}
}, },
computed: { computed: {
stroke() { stroke(): string {
if (typeof this.options === 'string' || !('stroke' in this.options)) { if (typeof this.options === "string" || !("stroke" in this.options)) {
return 'white'; return "white";
} }
return this.options.stroke; return this.options.stroke!;
}, },
strokeWidth() { strokeWidth(): string {
if (typeof this.options === 'string' || !('stroke-width' in this.options)) { if (typeof this.options === "string" || !("stroke-width" in this.options)) {
return '15px'; return "15px";
} }
return this.options['stroke-width']; return this.options["stroke-width"]!;
}, },
startPosition() { startPosition(): Position {
const position = { x: this.startNode.x || 0, y: this.startNode.y || 0 }; const position = { x: this.startNode.x || 0, y: this.startNode.y || 0 };
if (typeof this.options !== 'string' && 'startOffset' in this.options) { if (typeof this.options !== "string" && "startOffset" in this.options) {
position.x += this.options.startOffset.x || 0; position.x += this.options.startOffset?.x || 0;
position.y += this.options.startOffset.y || 0; position.y += this.options.startOffset?.y || 0;
} }
return position; return position;
}, },
endPosition() { endPosition(): Position {
const position = { x: this.endNode.x || 0, y: this.endNode.y || 0 }; const position = { x: this.endNode.x || 0, y: this.endNode.y || 0 };
if (typeof this.options !== 'string' && 'endOffset' in this.options) { if (typeof this.options !== "string" && "endOffset" in this.options) {
position.x += this.options.endOffset.x || 0; position.x += this.options.endOffset?.x || 0;
position.y += this.options.endOffset.y || 0; position.y += this.options.endOffset?.y || 0;
} }
return position; return position;
} }
} }
}; });
</script> </script>
<style scoped> <style scoped></style>
</style>

108
src/components/tree/BranchNode.vue
View file

@ -2,66 +2,114 @@
<div class="branch"></div> <div class="branch"></div>
</template> </template>
<script> <script lang="ts">
export default { import { BranchOptions } from "@/typings/branches";
name: 'branch-node', import { ComponentPublicInstance, defineComponent, PropType } from "vue";
// Annoying work-around for injected functions not appearing on `this`
// Also requires those annoying 3 lines in any function that uses this
type BranchInjectedComponent<T extends ComponentPublicInstance> = {
registerNode?: (id: string, component: ComponentPublicInstance) => void;
unregisterNode?: (id: string) => void;
registerBranch?: (start: string, options: string | BranchOptions) => void;
unregisterBranch?: (start: string, options: string | BranchOptions) => void;
} & T;
export default defineComponent({
name: "branch-node",
props: { props: {
featureType: String, featureType: {
id: [ Number, String ], type: String,
branches: Array required: true
}, },
inject: [ 'registerNode', 'unregisterNode', 'registerBranch', 'unregisterBranch' ], id: {
type: [Number, String],
required: true
},
branches: Array as PropType<Array<string | BranchOptions>>
},
inject: ["registerNode", "unregisterNode", "registerBranch", "unregisterBranch"],
mounted() { mounted() {
const id = `${this.featureType}@${this.id}`; const id = `${this.featureType}@${this.id}`;
if (this.registerNode) { // eslint-disable-next-line @typescript-eslint/no-this-alias
this.registerNode(id, this); const _this = this;
const injectedThis = this as BranchInjectedComponent<typeof _this>;
if (injectedThis.registerNode) {
injectedThis.registerNode(id, this);
} }
if (this.registerBranch) { if (injectedThis.registerBranch) {
this.branches?.map(this.handleBranch).forEach(branch => this.registerBranch(id, branch)); this.branches
?.map(this.handleBranch)
.forEach(branch => injectedThis.registerBranch!(id, branch));
} }
}, },
beforeUnmount() { beforeUnmount() {
const id = `${this.featureType}@${this.id}`; const id = `${this.featureType}@${this.id}`;
if (this.unregisterNode) { // eslint-disable-next-line @typescript-eslint/no-this-alias
this.unregisterNode(id); const _this = this;
const injectedThis = this as BranchInjectedComponent<typeof _this>;
if (injectedThis.unregisterNode) {
injectedThis.unregisterNode(id);
} }
if (this.unregisterBranch) { if (injectedThis.unregisterBranch) {
this.branches?.map(this.handleBranch).forEach(branch => this.unregisterBranch(id, branch)); this.branches
?.map(this.handleBranch)
.forEach(branch => injectedThis.unregisterBranch!(id, branch));
} }
}, },
watch: { watch: {
featureType(newValue, oldValue) { featureType(newValue, oldValue) {
if (this.registerNode && this.unregisterNode) { // eslint-disable-next-line @typescript-eslint/no-this-alias
this.unregisterNode(`${oldValue}@${this.id}`); const _this = this;
this.registerNode(`${newValue}@${this.id}`, this); const injectedThis = this as BranchInjectedComponent<typeof _this>;
if (injectedThis.registerNode && injectedThis.unregisterNode) {
injectedThis.unregisterNode(`${oldValue}@${this.id}`);
injectedThis.registerNode(`${newValue}@${this.id}`, this);
} }
}, },
id(newValue, oldValue) { id(newValue, oldValue) {
if (this.registerNode && this.unregisterNode) { // eslint-disable-next-line @typescript-eslint/no-this-alias
this.unregisterNode(`${this.featureType}@${oldValue}`); const _this = this;
this.registerNode(`${this.featureType}@${newValue}`, this); const injectedThis = this as BranchInjectedComponent<typeof _this>;
if (injectedThis.registerNode && injectedThis.unregisterNode) {
injectedThis.unregisterNode(`${this.featureType}@${oldValue}`);
injectedThis.registerNode(`${this.featureType}@${newValue}`, this);
} }
}, },
branches(newValue, oldValue) { branches(newValue, oldValue) {
if (this.registerBranch && this.unregisterBranch) { // eslint-disable-next-line @typescript-eslint/no-this-alias
const _this = this;
const injectedThis = this as BranchInjectedComponent<typeof _this>;
if (injectedThis.registerBranch && injectedThis.unregisterBranch) {
const id = `${this.featureType}@${this.id}`; const id = `${this.featureType}@${this.id}`;
oldValue?.map(this.handleBranch).forEach(branch => this.unregisterBranch(id, branch)); oldValue
newValue?.map(this.handleBranch).forEach(branch => this.registerBranch(id, branch)); ?.map(this.handleBranch)
.forEach((branch: string | BranchOptions) =>
injectedThis.unregisterBranch!(id, branch)
);
newValue
?.map(this.handleBranch)
.forEach((branch: string | BranchOptions) =>
injectedThis.registerBranch!(id, branch)
);
} }
} }
}, },
methods: { methods: {
handleBranch(branch) { handleBranch(branch: string | BranchOptions) {
if (typeof branch === 'string') { if (typeof branch === "string") {
return branch.includes('@') ? branch : `${this.featureType}@${branch}`; return branch.includes("@") ? branch : `${this.featureType}@${branch}`;
} }
if (!branch.target?.includes('@')) { if (!branch.target?.includes("@")) {
return { ...branch, target: `${branch.featureType || this.featureType}@${branch.target}` }; return {
...branch,
target: `${branch.featureType || this.featureType}@${branch.target}`
};
} }
return branch; return branch;
} }
} }
}; });
</script> </script>
<style scoped> <style scoped>

67
src/components/tree/Branches.vue
View file

@ -2,31 +2,44 @@
<slot /> <slot />
<div ref="resizeListener" class="resize-listener" /> <div ref="resizeListener" class="resize-listener" />
<svg v-bind="$attrs"> <svg v-bind="$attrs">
<branch-line v-for="(branch, index) in branches" :key="index" <branch-line
:startNode="nodes[branch.start]" :endNode="nodes[branch.end]" :options="branch.options" /> v-for="(branch, index) in branches"
:key="index"
:startNode="nodes[branch.start]"
:endNode="nodes[branch.end]"
:options="branch.options"
/>
</svg> </svg>
</template> </template>
<script> <script lang="ts">
import { BranchLink, BranchNode, BranchOptions } from "@/typings/branches";
import { ComponentPublicInstance, defineComponent } from "vue";
const observerOptions = { const observerOptions = {
attributes: true, attributes: true,
childList: true, childList: true,
subtree: true subtree: true
}; };
export default { export default defineComponent({
name: 'branches', name: "branches",
data() { data() {
return { return {
observer: new MutationObserver(this.updateNodes), observer: new MutationObserver(this.updateNodes as (...args: unknown[]) => void),
resizeObserver: new ResizeObserver(this.updateNodes), resizeObserver: new ResizeObserver(this.updateNodes as (...args: unknown[]) => void),
nodes: {}, nodes: {},
links: [] links: []
} as {
observer: MutationObserver;
resizeObserver: ResizeObserver;
nodes: Record<string, BranchNode>;
links: Array<BranchLink>;
}; };
}, },
mounted() { mounted() {
// ResizeListener exists because ResizeObserver's don't work when told to observe an SVG element // ResizeListener exists because ResizeObserver's don't work when told to observe an SVG element
this.resizeObserver.observe(this.$refs.resizeListener); this.resizeObserver.observe(this.$refs.resizeListener as HTMLElement);
this.updateNodes(); this.updateNodes();
}, },
provide() { provide() {
@ -38,47 +51,57 @@ export default {
}; };
}, },
computed: { computed: {
branches() { branches(): Array<BranchLink> {
return this.links.filter(link => link.start in this.nodes && link.end in this.nodes && return this.links.filter(
this.nodes[link.start].x != undefined && this.nodes[link.start].y != undefined && link =>
this.nodes[link.end].x != undefined && this.nodes[link.end].y != undefined); link.start in this.nodes &&
link.end in this.nodes &&
this.nodes[link.start].x != undefined &&
this.nodes[link.start].y != undefined &&
this.nodes[link.end].x != undefined &&
this.nodes[link.end].y != undefined
);
} }
}, },
methods: { methods: {
updateNodes() { updateNodes() {
if (this.$refs.resizeListener != undefined) { if (this.$refs.resizeListener != undefined) {
const containerRect = this.$refs.resizeListener.getBoundingClientRect(); const containerRect = (this.$refs
.resizeListener as HTMLElement).getBoundingClientRect();
Object.keys(this.nodes).forEach(id => this.updateNode(id, containerRect)); Object.keys(this.nodes).forEach(id => this.updateNode(id, containerRect));
} }
}, },
updateNode(id, containerRect) { updateNode(id: string, containerRect: DOMRect) {
const linkStartRect = this.nodes[id].element.getBoundingClientRect(); const linkStartRect = this.nodes[id].element.getBoundingClientRect();
this.nodes[id].x = linkStartRect.x + linkStartRect.width / 2 - containerRect.x; this.nodes[id].x = linkStartRect.x + linkStartRect.width / 2 - containerRect.x;
this.nodes[id].y = linkStartRect.y + linkStartRect.height / 2 - containerRect.y; this.nodes[id].y = linkStartRect.y + linkStartRect.height / 2 - containerRect.y;
}, },
registerNode(id, component) { registerNode(id: string, component: ComponentPublicInstance) {
const element = component.$el.parentElement; const element = component.$el.parentElement;
this.nodes[id] = { component, element }; this.nodes[id] = { component, element };
this.observer.observe(element, observerOptions); this.observer.observe(element, observerOptions);
this.$nextTick(() => { this.$nextTick(() => {
if (this.$refs.resizeListener != undefined) { if (this.$refs.resizeListener != undefined) {
this.updateNode(id, this.$refs.resizeListener.getBoundingClientRect()); this.updateNode(
id,
(this.$refs.resizeListener as HTMLElement).getBoundingClientRect()
);
} }
}); });
}, },
unregisterNode(id) { unregisterNode(id: string) {
delete this.nodes[id]; delete this.nodes[id];
}, },
registerBranch(start, options) { registerBranch(start: string, options: string | BranchOptions) {
const end = typeof options === 'string' ? options : options.target; const end = typeof options === "string" ? options : options.target;
this.links.push({ start, end, options }); this.links.push({ start, end: end!, options });
}, },
unregisterBranch(start, options) { unregisterBranch(start: string, options: string | BranchOptions) {
const index = this.links.findIndex(l => l.start === start && l.options === options); const index = this.links.findIndex(l => l.start === start && l.options === options);
this.links.splice(index, 1); this.links.splice(index, 1);
} }
} }
}; });
</script> </script>
<style scoped> <style scoped>

67
src/components/tree/Tree.vue
View file

@ -1,62 +1,89 @@
<template> <template>
<span class="row" v-for="(row, index) in rows" :key="index"> <span class="row" v-for="(row, index) in rows" :key="index">
<tree-node v-for="(node, nodeIndex) in row" :key="nodeIndex" :id="node" @show-modal="openModal" :append="append" /> <tree-node
v-for="(node, nodeIndex) in row"
:key="nodeIndex"
:id="node"
@show-modal="openModal"
:append="append"
/>
</span> </span>
<span class="side-nodes" v-if="rows.side"> <span class="side-nodes" v-if="rows.side">
<tree-node v-for="(node, nodeIndex) in rows.side" :key="nodeIndex" :id="node" @show-modal="openModal" :append="append" small /> <tree-node
v-for="(node, nodeIndex) in rows.side"
:key="nodeIndex"
:id="node"
@show-modal="openModal"
:append="append"
small
/>
</span> </span>
<modal :show="showModal" @close="closeModal"> <modal :show="showModal" @close="closeModal">
<template v-slot:header><h2 v-if="modalHeader">{{ modalHeader }}</h2></template> <template v-slot:header
<template v-slot:body><layer-tab v-if="modal" :layer="modal" :index="tab.index" :forceFirstTab="true" /></template> ><h2 v-if="modalHeader">{{ modalHeader }}</h2></template
>
<template v-slot:body
><layer-tab v-if="modal" :layer="modal" :index="tab.index" :forceFirstTab="true"
/></template>
</modal> </modal>
</template> </template>
<script> <script lang="ts">
import { layers } from '../../game/layers'; import { layers } from "@/game/layers";
import { defineComponent, PropType } from "vue";
export default { export default defineComponent({
name: 'tree', name: "tree",
data() { data() {
return { return {
showModal: false, showModal: false,
modal: null modal: null
} as {
showModal: boolean;
modal: string | null;
}; };
}, },
props: { props: {
nodes: Array, nodes: Object as PropType<Record<string, Array<string | number>>>,
append: Boolean append: Boolean
}, },
inject: [ 'tab' ], inject: ["tab"],
computed: { computed: {
modalHeader() { modalHeader(): string | null {
if (this.modal == null) { if (this.modal == null) {
return null; return null;
} }
return layers[this.modal].name; return layers[this.modal].name || this.modal;
}, },
rows() { rows(): Record<string | number, Array<string | number>> {
if (this.nodes != undefined) { if (this.nodes != undefined) {
return this.nodes; return this.nodes;
} }
const rows = Object.keys(layers).reduce((acc, curr) => { const rows = Object.keys(layers).reduce(
(acc: Record<string | number, Array<string | number>>, curr) => {
if (!(layers[curr].displayRow in acc)) { if (!(layers[curr].displayRow in acc)) {
acc[layers[curr].displayRow] = []; acc[layers[curr].displayRow] = [];
} }
if (layers[curr].position != undefined) { if (layers[curr].position != undefined) {
acc[layers[curr].displayRow][layers[curr].position] = curr; acc[layers[curr].displayRow][layers[curr].position!] = curr;
} else { } else {
acc[layers[curr].displayRow].push(curr); acc[layers[curr].displayRow].push(curr);
} }
return acc; return acc;
}, []); },
return Object.keys(rows).reduce((acc, curr) => { {}
);
return Object.keys(rows).reduce(
(acc: Record<string | number, Array<string | number>>, curr) => {
acc[curr] = rows[curr].filter(layer => layer); acc[curr] = rows[curr].filter(layer => layer);
return acc; return acc;
}, []); },
{}
);
} }
}, },
methods: { methods: {
openModal(id) { openModal(id: string) {
this.showModal = true; this.showModal = true;
this.modal = id; this.modal = id;
}, },
@ -64,7 +91,7 @@ export default {
this.showModal = false; this.showModal = false;
} }
} }
}; });
</script> </script>
<style scoped> <style scoped>

100
src/components/tree/TreeNode.vue
View file

@ -1,5 +1,8 @@
<template> <template>
<tooltip :display="tooltip" :force="forceTooltip" :class="{ <tooltip
:display="tooltip"
:force="forceTooltip"
:class="{
ghost: layer.layerShown === 'ghost', ghost: layer.layerShown === 'ghost',
treeNode: true, treeNode: true,
[id]: true, [id]: true,
@ -9,7 +12,8 @@
resetNotify: layer.resetNotify, resetNotify: layer.resetNotify,
can: unlocked, can: unlocked,
small small
}"> }"
>
<LayerProvider :index="tab.index" :layer="id"> <LayerProvider :index="tab.index" :layer="id">
<button v-if="layer.shown" @click="clickTab" :style="style" :disabled="!unlocked"> <button v-if="layer.shown" @click="clickTab" :style="style" :disabled="!unlocked">
<component :is="display" /> <component :is="display" />
@ -20,39 +24,48 @@
</tooltip> </tooltip>
</template> </template>
<script> <script lang="ts">
import { layers } from '../../game/layers'; import { layers } from "@/game/layers";
import player from '../../game/player'; import player from "@/game/player";
import { coerceComponent } from '../../util/vue'; import { CoercableComponent } from "@/typings/component";
import { Layer } from "@/typings/layer";
import { coerceComponent } from "@/util/vue";
import { Component, defineComponent } from "vue";
export default { export default defineComponent({
name: 'tree-node', name: "tree-node",
props: { props: {
id: [ String, Number ], id: {
type: [String, Number],
required: true
},
small: Boolean, small: Boolean,
append: Boolean append: Boolean
}, },
emits: [ 'show-modal' ], emits: ["show-modal"],
inject: [ 'tab' ], inject: ["tab"],
computed: { computed: {
layer() { layer(): Layer {
return layers[this.id]; return layers[this.id];
}, },
unlocked() { unlocked(): boolean {
if (this.layer.canClick != undefined) { if (this.layer.canClick != undefined) {
return this.layer.canClick; return this.layer.canClick;
} }
return this.layer.unlocked; return this.layer.unlocked;
}, },
style() { style(): Array<Partial<CSSStyleDeclaration> | undefined> {
return [ return [
this.unlocked ? { backgroundColor: this.layer.color } : null, this.unlocked ? { backgroundColor: this.layer.color } : undefined,
this.layer.notify && this.unlocked ? this.layer.notify && this.unlocked
{ boxShadow: `-4px -4px 4px rgba(0, 0, 0, 0.25) inset, 0 0 20px ${this.layer.trueGlowColor}` } : null, ? {
boxShadow: `-4px -4px 4px rgba(0, 0, 0, 0.25) inset, 0 0 20px ${this.layer.trueGlowColor}`
}
: undefined,
this.layer.nodeStyle this.layer.nodeStyle
]; ];
}, },
display() { display(): Component | string {
if (this.layer.display != undefined) { if (this.layer.display != undefined) {
return coerceComponent(this.layer.display); return coerceComponent(this.layer.display);
} else if (this.layer.image != undefined) { } else if (this.layer.image != undefined) {
@ -61,52 +74,57 @@ export default {
return coerceComponent(this.layer.symbol); return coerceComponent(this.layer.symbol);
} }
}, },
forceTooltip() { forceTooltip(): boolean {
return player[this.id].forceTooltip; return player.layers[this.id].forceTooltip === true;
}, },
tooltip() { tooltip(): CoercableComponent {
if (this.layer.canClick != undefined) { if (this.layer.canClick != undefined) {
if (this.layer.canClick) { if (this.layer.canClick) {
return this.layer.tooltip || 'I am a button!'; return this.layer.tooltip || "I am a button!";
} else { } else {
return this.layer.tooltipLocked || this.layer.tooltip || 'I am a button!'; return this.layer.tooltipLocked || this.layer.tooltip || "I am a button!";
} }
} }
if (player[this.id].unlocked) { if (player.layers[this.id].unlocked) {
return this.layer.tooltip || `{{ formatWhole(player.${this.id}.points) }} {{ layers.${this.id}.resource }}`; return (
this.layer.tooltip ||
`{{ formatWhole(player.${this.id}.points) }} {{ layers.${this.id}.resource }}`
);
} else { } else {
return this.layer.tooltipLocked || return (
`Reach {{ formatWhole(layers.${this.id}.requires) }} {{ layers.${this.id}.baseResource }} to unlock (You have {{ formatWhole(layers.${this.id}.baseAmount) }} {{ layers.${this.id}.baseResource }})`; this.layer.tooltipLocked ||
`Reach {{ formatWhole(layers.${this.id}.requires) }} {{ layers.${this.id}.baseResource }} to unlock (You have {{ formatWhole(layers.${this.id}.baseAmount) }} {{ layers.${this.id}.baseResource }})`
);
} }
},
components() {
return Object.keys(layers).reduce((acc, curr) => {
acc[curr] = layers[curr].component || false;
return acc;
}, {});
} }
}, },
methods: { methods: {
clickTab(e) { clickTab(e: MouseEvent) {
if (e.shiftKey) { if (e.shiftKey) {
player[this.id].forceTooltip = !player[this.id].forceTooltip; player.layers[this.id].forceTooltip = !player.layers[this.id].forceTooltip;
} else if (this.layer.click != undefined) { } else if (this.layer.click != undefined) {
this.layer.click(); this.layer.click();
} else if (this.layer.modal) { } else if (this.layer.modal) {
this.$emit('show-modal', this.id); this.$emit("show-modal", this.id);
} else if (this.append) { } else if (this.append) {
if (player.tabs.includes(this.id)) { if (player.tabs.includes(this.id.toString())) {
const index = player.tabs.lastIndexOf(this.id); const index = player.tabs.lastIndexOf(this.id.toString());
player.tabs = [...player.tabs.slice(0, index), ...player.tabs.slice(index + 1)]; player.tabs = [...player.tabs.slice(0, index), ...player.tabs.slice(index + 1)];
} else { } else {
player.tabs = [...player.tabs, this.id]; player.tabs = [...player.tabs, this.id.toString()];
} }
} else { } else {
player.tabs = [...player.tabs.slice(0, this.tab.index + 1), this.id]; player.tabs = [
...player.tabs.slice(
0,
((this as unknown) as { tab: { index: number } }).tab.index + 1
),
this.id.toString()
];
} }
} }
} }
}; });
</script> </script>
<style scoped> <style scoped>

82
src/data/layers/aca/a.js
View file

@ -1,82 +0,0 @@
import Decimal from '../../../util/bignum';
import player from '../../../game/player';
export default {
id: "a",
startData() { return {
unlocked: true,
points: new Decimal(0),
}},
color: "yellow",
modal: true,
name: "Achievements",
resource: "achievement power",
row: "side",
tooltip() { // Optional, tooltip displays when the layer is locked
return ("Achievements")
},
achievementPopups: true,
achievements: {
11: {
image: "https://unsoftcapped2.github.io/The-Modding-Tree-2/discord.png",
name: "Get me!",
done() {return true}, // This one is a freebie
goalTooltip: "How did this happen?", // Shows when achievement is not completed
doneTooltip: "You did it!", // Showed when the achievement is completed
},
12: {
name: "Impossible!",
done() {return false},
goalTooltip: "Mwahahaha!", // Shows when achievement is not completed
doneTooltip: "HOW????", // Showed when the achievement is completed
style: {'color': '#04e050'},
},
13: {
name: "EIEIO",
done() {return player.f.points.gte(1)},
tooltip: "Get a farm point.\n\nReward: The dinosaur is now your friend (you can max Farm Points).", // Showed when the achievement is completed
onComplete() {console.log("Bork bork bork!")}
},
},
midsection: "<grid id='test' />",
grids: {
test: {
maxRows: 3,
rows: 2,
cols: 2,
getStartData(cell) {
return cell
},
getUnlocked() { // Default
return true
},
getCanClick() {
return player.points.eq(10)
},
getStyle(cell, data) {
return {'background-color': '#'+ (data*1234%999999)}
},
click() { // Don't forget onHold
this.data++
},
getTitle(cell) {
let direction;
if (cell === '101') {
direction = 'top';
} else if (cell === '102') {
direction = 'bottom';
} else if (cell === '201') {
direction = 'left';
} else if (cell === '202') {
direction = 'right';
}
return `<tooltip display='${JSON.stringify(this.style)}' ${direction}>
<h3>Gridable #${cell}</h3>
</tooltip>`
},
getDisplay(cell, data) {
return data
},
}
},
}

103
src/data/layers/aca/a.ts Normal file
View file

@ -0,0 +1,103 @@
/* eslint-disable */
import player from "@/game/player";
import { GridCell } from "@/typings/features/grid";
import { RawLayer } from "@/typings/layer";
import Decimal from "@/util/bignum";
export default {
id: "a",
startData() {
return {
unlocked: true,
points: new Decimal(0)
};
},
color: "yellow",
modal: true,
name: "Achievements",
resource: "achievement power",
row: "side",
tooltip() {
// Optional, tooltip displays when the layer is locked
return "Achievements";
},
achievementPopups: true,
achievements: {
data: {
11: {
image: "https://unsoftcapped2.github.io/The-Modding-Tree-2/discord.png",
name: "Get me!",
done() {
return true;
}, // This one is a freebie
goalTooltip: "How did this happen?", // Shows when achievement is not completed
doneTooltip: "You did it!" // Showed when the achievement is completed
},
12: {
name: "Impossible!",
done() {
return false;
},
goalTooltip: "Mwahahaha!", // Shows when achievement is not completed
doneTooltip: "HOW????", // Showed when the achievement is completed
style: { color: "#04e050" }
},
13: {
name: "EIEIO",
done() {
return player.layers.f.points.gte(1);
},
tooltip:
"Get a farm point.\n\nReward: The dinosaur is now your friend (you can max Farm Points).", // Showed when the achievement is completed
onComplete() {
console.log("Bork bork bork!");
}
}
}
},
midsection: "<grid id='test' />",
grids: {
data: {
test: {
maxRows: 3,
rows: 2,
cols: 2,
getStartData(cell: string) {
return cell;
},
getUnlocked() {
// Default
return true;
},
getCanClick() {
return player.points.eq(10);
},
getStyle(cell) {
return { backgroundColor: "#" + ((Number((this[cell] as GridCell).data) * 1234) % 999999) };
},
click(cell) {
// Don't forget onHold
(this[cell] as GridCell).data = ((this[cell] as GridCell).data as number) + 1;
},
getTitle(cell) {
let direction;
if (cell === "101") {
direction = "top";
} else if (cell === "102") {
direction = "bottom";
} else if (cell === "201") {
direction = "left";
} else if (cell === "202") {
direction = "right";
}
return `<tooltip display='${JSON.stringify(this.style)}' ${direction}>
<h3>Gridable #${cell}</h3>
</tooltip>`;
},
getDisplay(cell) {
return (this[cell] as GridCell).data;
}
}
}
}
} as RawLayer;

399
src/data/layers/aca/c.js
View file

@ -1,399 +0,0 @@
import Decimal, { format, formatWhole } from '../../../util/bignum';
import player from '../../../game/player';
import { layers } from '../../../game/layers';
import { hasUpgrade, hasMilestone, getBuyableAmount, setBuyableAmount, upgradeEffect, buyableEffect, challengeCompletions } from '../../../util/features';
import { resetLayer, resetLayerData } from '../../../util/layers';
import { UP, RIGHT } from '../../../util/vue';
const tmp = layers;
export default {
id: "c", // This is assigned automatically, both to the layer and all upgrades, etc. Shown here so you know about it
name: "Candies", // This is optional, only used in a few places, If absent it just uses the layer id.
symbol: "C", // This appears on the layer's node. Default is the id with the first letter capitalized
position: 0, // Horizontal position within a row. By default it uses the layer id and sorts in alphabetical order
startData() { return {
unlocked: true,
points: new Decimal(0),
best: new Decimal(0),
total: new Decimal(0),
beep: false,
thingy: "pointy",
otherThingy: 10,
spentOnBuyables: new Decimal(0)
}},
minWidth: 800,
color: "#4BDC13",
requires: new Decimal(10), // Can be a function that takes requirement increases into account
resource: "lollipops", // Name of prestige currency
baseResource: "points", // Name of resource prestige is based on
baseAmount() {return player.points}, // Get the current amount of baseResource
type: "normal", // normal: cost to gain currency depends on amount gained. static: cost depends on how much you already have
exponent: 0.5, // Prestige currency exponent
base: 5, // Only needed for static layers, base of the formula (b^(x^exp))
roundUpCost: false, // True if the cost needs to be rounded up (use when baseResource is static?)
// For normal layers, gain beyond [softcap] points is put to the [softcapPower]th power
softcap: new Decimal(1e100),
softcapPower: new Decimal(0.5),
canBuyMax() {}, // Only needed for static layers with buy max
gainMult() { // Calculate the multiplier for main currency from bonuses
let mult = new Decimal(1)
if (hasUpgrade(this.layer, 166)) mult = mult.times(2) // These upgrades don't exist
if (hasUpgrade(this.layer, 120)) mult = mult.times(upgradeEffect(this.layer, 120))
return mult
},
gainExp() { // Calculate the exponent on main currency from bonuses
return new Decimal(1)
},
row: 0, // Row the layer is in on the tree (0 is the first row)
effect() {
return { // Formulas for any boosts inherent to resources in the layer. Can return a single value instead of an object if there is just one effect
waffleBoost: Decimal.pow(player[this.layer].points, 0.2),
icecreamCap: (player[this.layer].points * 10)
}},
effectDisplay() { // Optional text to describe the effects
let eff = this.effect;
const waffleBoost = eff.waffleBoost.times(buyableEffect(this.layer, 11).first)
return "which are boosting waffles by "+format(waffleBoost)+" and increasing the Ice Cream cap by "+format(eff.icecreamCap)
},
infoboxes:{
coolInfo: {
title: "Lore",
titleStyle: {'color': '#FE0000'},
body: "DEEP LORE!",
bodyStyle: {'background-color': "#0000EE"}
}
},
milestones: {
0: {requirementDisplay: "3 Lollipops",
done() {return player[this.layer].best.gte(3)}, // Used to determine when to give the milestone
effectDisplay: "Unlock the next milestone",
},
1: {requirementDisplay: "4 Lollipops",
unlocked() {return hasMilestone(this.layer, 0)},
done() {return player[this.layer].best.gte(4)},
effectDisplay: "You can toggle beep and boop (which do nothing)",
optionsDisplay: `
<div style="display: flex; justify-content: center">
<Toggle :value="player.c.beep" @change="value => player.c.beep = value" />
<Toggle :value="player.f.boop" @change="value => player.f.boop = value" />
</div>
`,
style() {
if(hasMilestone(this.layer, this.id)) return {
'background-color': '#1111DD'
}},
},
},
challenges: {
11: {
name: "Fun",
completionLimit: 3,
challengeDescription() {return "Makes the game 0% harder<br>"+challengeCompletions(this.layer, this.id) + "/" + this.completionLimit + " completions"},
unlocked() { return player[this.layer].best.gt(0) },
goalDescription: 'Have 20 points I guess',
canComplete() {
return player.points.gte(20)
},
rewardEffect() {
let ret = player[this.layer].points.add(1).tetrate(0.02)
return ret;
},
rewardDisplay() { return format(this.rewardEffect)+"x" },
countsAs: [12, 21], // Use this for if a challenge includes the effects of other challenges. Being in this challenge "counts as" being in these.
rewardDescription: "Says hi",
onComplete() {console.log("hiii")}, // Called when you successfully complete the challenge
onEnter() {console.log("So challenging")},
onExit() {console.log("Sweet freedom!")},
},
},
upgrades: {
11: {
title: "Generator of Genericness",
description: "Gain 1 Point every second.",
cost: new Decimal(1),
unlocked() { return player[this.layer].unlocked }, // The upgrade is only visible when this is true
},
12: {
description: "Point generation is faster based on your unspent Lollipops.",
cost: new Decimal(1),
unlocked() { return (hasUpgrade(this.layer, 11))},
effect() { // Calculate bonuses from the upgrade. Can return a single value or an object with multiple values
let ret = player[this.layer].points.add(1).pow(player[this.layer].upgrades.includes(24)?1.1:(player[this.layer].upgrades.includes(14)?0.75:0.5))
if (ret.gte("1e20000000")) ret = ret.sqrt().times("1e10000000")
return ret;
},
effectDisplay() { return format(this.effect)+"x" }, // Add formatting to the effect
},
13: {
unlocked() { return (hasUpgrade(this.layer, 12))},
onPurchase() { // This function triggers when the upgrade is purchased
player[this.layer].unlockOrder = 0
},
style() {
if (hasUpgrade(this.layer, this.id)) return {
'background-color': '#1111dd'
}
else if (!this.canAfford) {
return {
'background-color': '#dd1111'
}
} // Otherwise use the default
},
canAfford(){return player.points.lte(7)},
pay(){player.points = player.points.add(7)},
fullDisplay: "Only buyable with less than 7 points, and gives you 7 more. Unlocks a secret subtab."
},
22: {
title: "This upgrade doesn't exist",
description: "Or does it?.",
currencyLocation() {return player[this.layer].buyables}, // The object in player data that the currency is contained in
currencyDisplayName: "exhancers", // Use if using a nonstandard currency
currencyInternalName: 11, // Use if using a nonstandard currency
cost: new Decimal(3),
unlocked() { return player[this.layer].unlocked }, // The upgrade is only visible when this is true
},
},
buyables: {
showRespec: true,
respec() { // Optional, reset things and give back your currency. Having this function makes a respec button appear
player[this.layer].points = player[this.layer].points.add(player[this.layer].spentOnBuyables) // A built-in thing to keep track of this but only keeps a single value
this.reset();
resetLayer(this.layer, true) // Force a reset
},
respecText: "Respec Thingies", // Text on Respec button, optional
respecMessage: "Are you sure? Respeccing these doesn't accomplish much.",
11: {
title: "Exhancers", // Optional, displayed at the top in a larger font
cost() { // cost for buying xth buyable, can be an object if there are multiple currencies
let x = this.amount;
if (x.gte(25)) x = x.pow(2).div(25)
let cost = Decimal.pow(2, x.pow(1.5))
return cost.floor()
},
effect() { // Effects of owning x of the items, x is a decimal
let x = this.amount;
let eff = {}
if (x.gte(0)) eff.first = Decimal.pow(25, x.pow(1.1))
else eff.first = Decimal.pow(1/25, x.times(-1).pow(1.1))
if (x.gte(0)) eff.second = x.pow(0.8)
else eff.second = x.times(-1).pow(0.8).times(-1)
return eff;
},
display() { // Everything else displayed in the buyable button after the title
let data = tmp[this.layer].buyables[this.id]
return "Cost: " + format(data.cost) + " lollipops\n\
Amount: " + player[this.layer].buyables[this.id] + "/4\n\
Adds + " + format(data.effect.first) + " things and multiplies stuff by " + format(data.effect.second)
},
unlocked() { return player[this.layer].unlocked },
canAfford() {
return player[this.layer].points.gte(tmp[this.layer].buyables[this.id].cost)},
buy() {
let cost = tmp[this.layer].buyables[this.id].cost
player[this.layer].points = player[this.layer].points.sub(cost)
player[this.layer].buyables[this.id] = player[this.layer].buyables[this.id].add(1)
player[this.layer].spentOnBuyables = player[this.layer].spentOnBuyables.add(cost) // This is a built-in system that you can use for respeccing but it only works with a single Decimal value
},
buyMax() {}, // You'll have to handle this yourself if you want
style: {'height':'222px'},
purchaseLimit: new Decimal(4),
sellOne() {
let amount = getBuyableAmount(this.layer, this.id)
if (amount.lte(0)) return // Only sell one if there is at least one
setBuyableAmount(this.layer, this.id, amount.sub(1))
player[this.layer].points = player[this.layer].points.add(this.cost)
},
},
},
doReset(resettingLayer){ // Triggers when this layer is being reset, along with the layer doing the resetting. Not triggered by lower layers resetting, but is by layers on the same row.
if(layers[resettingLayer].row > this.row) resetLayerData(this.layer, ["points"]) // This is actually the default behavior
},
automate() {
}, // Do any automation inherent to this layer if appropriate
resetsNothing() {return false},
onPrestige() {
return
}, // Useful for if you gain secondary resources or have other interesting things happen to this layer when you reset it. You gain the currency after this function ends.
hotkeys: [
{key: "c", description: "reset for lollipops or whatever", press(){if (layers[this.layer].canReset) resetLayer(this.layer)}},
{key: "ctrl+c", description: "respec things", press(){layers[this.layer].buyables.respec()}, unlocked() {return hasUpgrade('c', '22')}} ,
],
increaseUnlockOrder: [], // Array of layer names to have their order increased when this one is first unlocked
microtabs: {
stuff: {
first: {
display: `
<upgrades />
<div>confirmed</div>`
},
second: {
embedLayer: "f"
},
},
otherStuff: {
// There could be another set of microtabs here
}
},
bars: {
longBoi: {
fillStyle: {'background-color' : "#FFFFFF"},
baseStyle: {'background-color' : "#696969"},
textStyle: {'color': '#04e050'},
borderStyle() {return {}},
direction: RIGHT,
width: 300,
height: 30,
progress() {
return (player.points.add(1).log(10).div(10)).toNumber()
},
display() {
return format(player.points) + " / 1e10 points"
},
unlocked: true,
},
tallBoi: {
fillStyle: {'background-color' : "#4BEC13"},
baseStyle: {'background-color' : "#000000"},
textStyle: {'text-shadow': '0px 0px 2px #000000'},
borderStyle() {return {'border-width': "7px"}},
direction: UP,
width: 50,
height: 200,
progress() {
return player.points.div(100)
},
display() {
return formatWhole((player.points.div(1)).min(100)) + "%"
},
unlocked: true,
},
flatBoi: {
fillStyle: {'background-color' : "#FE0102"},
baseStyle: {'background-color' : "#222222"},
textStyle: {'text-shadow': '0px 0px 2px #000000'},
borderStyle() {return {}},
direction: UP,
width: 100,
height: 30,
progress() {
return player.c.points.div(50)
},
unlocked: true,
},
},
// Optional, lets you format the tab yourself by listing components. You can create your own components in v.js.
subtabs: {
"main tab": {
buttonStyle() {return {'color': 'orange'}},
notify: true,
display: `
<main-display />
<sticky><prestige-button /></sticky>
<resource-display />
<spacer height="5px" />
<button onclick='console.log("yeet")'>'HI'</button>
<div>Name your points!</div>
<TextField :value="player.c.thingy" @input="value => player.c.thingy = value" :field="false" />
<sticky style="color: red; font-size: 32px; font-family: Comic Sans MS;">I have {{ format(player.points) }} {{ player.c.thingy }} points!</sticky>
<hr />
<milestones />
<spacer />
<upgrades />
<challenges />`,
glowColor: "blue",
},
thingies: {
resetNotify: true,
style() {return {'background-color': '#222222', '--background': '#222222'}},
buttonStyle() {return {'border-color': 'orange'}},
display: `
<buyables />
<spacer />
<row style="width: 600px; height: 350px; background-color: green; border-style: solid;">
<Toggle :value="player.c.beep" @change="value => player.c.beep = value" />
<spacer width="30px" height="10px" />
<div>Beep</div>
<spacer />
<vr height="200px"/>
<column>
<prestige-button style="width: 150px; height: 80px" />
<prestige-button style="width: 100px; height: 150px" />
</column>
</row>
<spacer />
<img src="https://unsoftcapped2.github.io/The-Modding-Tree-2/discord.png" />`
},
jail: {
display: `
<infobox id="coolInfo" />
<bar id="longBoi" />
<spacer />
<row>
<column style="background-color: #555555; padding: 15px">
<div style="color: teal">Sugar level:</div><spacer /><bar id="tallBoi" />
</column>
<spacer />
<column>
<div>idk</div>
<spacer width="0" height="50px" />
<bar id="flatBoi" />
</column>
</row>
<spacer />
<div>It's jail because "bars"! So funny! Ha ha!</div>
<tree :nodes="[['f', 'c'], ['g', 'spook', 'h']]" />`
},
illuminati: {
unlocked() {return (hasUpgrade("c", 13))},
display: `
<h1> C O N F I R M E D </h1>
<spacer />
<microtab family="stuff" style="width: 660px; height: 370px; background-color: brown; --background: brown; border: solid white; margin: auto" />
<div>Adjust how many points H gives you!</div>
<Slider :value="player.c.otherThingy" @change="value => player.c.otherThingy = value" :min="1" :max="30" />`
}
},
style() {return {
//'background-color': '#3325CC'
}},
nodeStyle() {return { // Style on the layer node
'color': '#3325CC',
'text-decoration': 'underline'
}},
glowColor: "orange", // If the node is highlighted, it will be this color (default is red)
componentStyles: {
"challenge"() {return {'height': '200px'}},
"prestige-button"() {return {'color': '#AA66AA'}},
},
tooltip() { // Optional, tooltip displays when the layer is unlocked
let tooltip = "{{ formatWhole(player.c.points) }} {{ layers.c.resource }}";
if (player[this.layer].buyables[11].gt(0)) tooltip += "<br><i><br><br><br>{{ formatWhole(player.c.buyables[11]) }} Exhancers</i>"
return tooltip
},
shouldNotify() { // Optional, layer will be highlighted on the tree if true.
// Layer will automatically highlight if an upgrade is purchasable.
return (player.c.buyables[11] == 1)
},
mark: "https://unsoftcapped2.github.io/The-Modding-Tree-2/discord.png",
resetDescription: "Melt your points into ",
};

573
src/data/layers/aca/c.ts Normal file
View file

@ -0,0 +1,573 @@
/* eslint-disable */
import { Direction } from "@/game/enums";
import { layers } from "@/game/layers";
import player from "@/game/player";
import { DecimalSource } from "@/lib/break_eternity";
import { RawLayer } from "@/typings/layer";
import Decimal, { format, formatWhole } from "@/util/bignum";
import {
buyableEffect,
challengeCompletions,
getBuyableAmount,
hasMilestone,
hasUpgrade,
setBuyableAmount,
upgradeEffect
} from "@/util/features";
import { resetLayer, resetLayerData } from "@/util/layers";
export default {
id: "c", // This is assigned automatically, both to the layer and all upgrades, etc. Shown here so you know about it
name: "Candies", // This is optional, only used in a few places, If absent it just uses the layer id.
symbol: "C", // This appears on the layer's node. Default is the id with the first letter capitalized
position: 0, // Horizontal position within a row. By default it uses the layer id and sorts in alphabetical order
startData() {
return {
unlocked: true,
points: new Decimal(0),
best: new Decimal(0),
total: new Decimal(0),
beep: false,
thingy: "pointy",
otherThingy: 10,
spentOnBuyables: new Decimal(0)
};
},
minWidth: 800,
color: "#4BDC13",
requires: new Decimal(10), // Can be a function that takes requirement increases into account
resource: "lollipops", // Name of prestige currency
baseResource: "points", // Name of resource prestige is based on
baseAmount() {
return player.points;
}, // Get the current amount of baseResource
type: "normal", // normal: cost to gain currency depends on amount gained. static: cost depends on how much you already have
exponent: 0.5, // Prestige currency exponent
base: 5, // Only needed for static layers, base of the formula (b^(x^exp))
roundUpCost: false, // True if the cost needs to be rounded up (use when baseResource is static?)
// For normal layers, gain beyond [softcap] points is put to the [softcapPower]th power
softcap: new Decimal(1e100),
softcapPower: new Decimal(0.5),
canBuyMax() {}, // Only needed for static layers with buy max
gainMult() {
// Calculate the multiplier for main currency from bonuses
let mult = new Decimal(1);
/*
if (hasUpgrade(this.layer, 166)) mult = mult.times(2); // These upgrades don't exist
if (hasUpgrade(this.layer, 120))
mult = mult.times(upgradeEffect(this.layer, 120) as DecimalSource);
*/
return mult;
},
gainExp() {
// Calculate the exponent on main currency from bonuses
return new Decimal(1);
},
row: 0, // Row the layer is in on the tree (0 is the first row)
effect() {
return {
// Formulas for any boosts inherent to resources in the layer. Can return a single value instead of an object if there is just one effect
waffleBoost: Decimal.pow(player.layers[this.layer].points, 0.2),
icecreamCap: player.layers[this.layer].points.times(10)
};
},
effectDisplay() {
// Optional text to describe the effects
const eff = this.effect as { waffleBoost: Decimal; icecreamCap: Decimal };
const waffleBoost = eff.waffleBoost.times(
(buyableEffect(this.layer, 11) as { first: Decimal, second: Decimal }).first
);
return (
"which are boosting waffles by " +
format(waffleBoost) +
" and increasing the Ice Cream cap by " +
format(eff.icecreamCap)
);
},
infoboxes: {
data: {
coolInfo: {
title: "Lore",
titleStyle: { color: "#FE0000" },
body: "DEEP LORE!",
bodyStyle: { "background-color": "#0000EE" }
}
}
},
milestones: {
data: {
0: {
requirementDisplay: "3 Lollipops",
done() {
return (player.layers[this.layer].best as Decimal).gte(3);
}, // Used to determine when to give the milestone
effectDisplay: "Unlock the next milestone"
},
1: {
requirementDisplay: "4 Lollipops",
unlocked() {
return hasMilestone(this.layer, 0);
},
done() {
return (player.layers[this.layer].best as Decimal).gte(4);
},
effectDisplay: "You can toggle beep and boop (which do nothing)",
optionsDisplay: `
<div style="display: flex; justify-content: center">
<Toggle :value="player.layers.c.beep" @change="value => player.layers.c.beep = value" />
<Toggle :value="player.layers.f.boop" @change="value => player.layers.f.boop = value" />
</div>
`,
style() {
if (hasMilestone(this.layer, this.id))
return {
backgroundColor: "#1111DD"
};
}
}
}
},
challenges: {
data: {
11: {
name: "Fun",
completionLimit: 3,
challengeDescription() {
return (
"Makes the game 0% harder<br>" +
challengeCompletions(this.layer, this.id) +
"/" +
this.completionLimit +
" completions"
);
},
unlocked() {
return (player.layers[this.layer].best as Decimal).gt(0);
},
goalDescription: "Have 20 points I guess",
canComplete() {
return player.points.gte(20);
},
effect() {
const ret = player.layers[this.layer].points.add(1).tetrate(0.02);
return ret;
},
rewardDisplay() {
return format(this.effect as Decimal) + "x";
},
countsAs: [12, 21], // Use this for if a challenge includes the effects of other challenges. Being in this challenge "counts as" being in these.
rewardDescription: "Says hi",
onComplete() {
console.log("hiii");
}, // Called when you successfully complete the challenge
onEnter() {
console.log("So challenging");
},
onExit() {
console.log("Sweet freedom!");
}
}
}
},
upgrades: {
data: {
11: {
title: "Generator of Genericness",
description: "Gain 1 Point every second.",
cost: new Decimal(1),
unlocked() {
return player.layers[this.layer].unlocked;
} // The upgrade is only visible when this is true
},
12: {
description:
"Point generation is faster based on your unspent Lollipops.",
cost: new Decimal(1),
unlocked() {
return hasUpgrade(this.layer, 11);
},
effect() {
// Calculate bonuses from the upgrade. Can return a single value or an object with multiple values
let ret = player.layers[this.layer].points
.add(1)
.pow(
player.layers[this.layer].upgrades!.includes(24)
? 1.1
: player.layers[this.layer].upgrades!.includes(14)
? 0.75
: 0.5
);
if (ret.gte("1e20000000")) ret = ret.sqrt().times("1e10000000");
return ret;
},
effectDisplay() {
return format(this.effect as Decimal) + "x";
} // Add formatting to the effect
},
13: {
unlocked() {
return hasUpgrade(this.layer, 12);
},
onPurchase() {
// This function triggers when the upgrade is purchased
player.layers[this.layer].unlockOrder = 0;
},
style() {
if (hasUpgrade(this.layer, this.id))
return {
"background-color": "#1111dd"
};
else if (!this.canAfford) {
return {
"background-color": "#dd1111"
};
} // Otherwise use the default
},
canAfford() {
return player.points.lte(7);
},
pay() {
player.points = player.points.add(7);
},
fullDisplay:
"Only buyable with less than 7 points, and gives you 7 more. Unlocks a secret subtab."
},
22: {
title: "This upgrade doesn't exist",
description: "Or does it?.",
currencyLocation() {
return player.layers[this.layer].buyables;
}, // The object in player data that the currency is contained in
currencyDisplayName: "exhancers", // Use if using a nonstandard currency
currencyInternalName: 11, // Use if using a nonstandard currency
cost: new Decimal(3),
unlocked() {
return player.layers[this.layer].unlocked;
} // The upgrade is only visible when this is true
}
}
},
buyables: {
showBRespecButton: true,
respec() {
// Optional, reset things and give back your currency. Having this function makes a respec button appear
player.layers[this.layer].points = player.layers[this.layer].points.add(
player.layers[this.layer].spentOnBuyables as Decimal
); // A built-in thing to keep track of this but only keeps a single value
this.reset();
resetLayer(this.layer, true); // Force a reset
},
respecButtonDisplay: "Respec Thingies", // Text on Respec button, optional
respecWarningDisplay:
"Are you sure? Respeccing these doesn't accomplish much.",
data: {
11: {
title: "Exhancers", // Optional, displayed at the top in a larger font
cost() {
// cost for buying xth buyable, can be an object if there are multiple currencies
let x = this.amount;
if (x.gte(25)) x = x.pow(2).div(25);
const cost = Decimal.pow(2, x.pow(1.5));
return cost.floor();
},
effect() {
// Effects of owning x of the items, x is a decimal
const x = this.amount;
const eff = {} as { first?: Decimal; second?: Decimal };
if (x.gte(0)) eff.first = Decimal.pow(25, x.pow(1.1));
else eff.first = Decimal.pow(1 / 25, x.times(-1).pow(1.1));
if (x.gte(0)) eff.second = x.pow(0.8);
else
eff.second = x
.times(-1)
.pow(0.8)
.times(-1);
return eff;
},
display() {
// Everything else displayed in the buyable button after the title
return (
"Cost: " +
format(this.cost!) +
" lollipops\n\
Amount: " +
player.layers[this.layer].buyables![this.id] +
"/4\n\
Adds + " +
format((this.effect as { first: Decimal; second: Decimal }).first) +
" things and multiplies stuff by " +
format((this.effect as { first: Decimal; second: Decimal }).second)
);
},
unlocked() {
return player.layers[this.layer].unlocked;
},
canAfford() {
return player.layers[this.layer].points.gte(this.cost!);
},
buy() {
const cost = this.cost!;
player.layers[this.layer].points = player.layers[
this.layer
].points.sub(cost);
player.layers[this.layer].buyables![this.id] = player.layers[
this.layer
].buyables![this.id].add(1);
player.layers[this.layer].spentOnBuyables = (player.layers[
this.layer
].spentOnBuyables as Decimal).add(cost); // This is a built-in system that you can use for respeccing but it only works with a single Decimal value
},
buyMax() {}, // You'll have to handle this yourself if you want
style: { height: "222px" },
purchaseLimit: new Decimal(4),
sellOne() {
const amount = getBuyableAmount(this.layer, this.id)!;
if (amount.lte(0)) return; // Only sell one if there is at least one
setBuyableAmount(this.layer, this.id, amount.sub(1));
player.layers[this.layer].points = player.layers[
this.layer
].points.add(this.cost!);
}
}
}
},
onReset(resettingLayer: string) {
// Triggers when this layer is being reset, along with the layer doing the resetting. Not triggered by lower layers resetting, but is by layers on the same row.
if (
layers[resettingLayer].row != undefined &&
this.row != undefined &&
layers[resettingLayer].row! > this.row!
)
resetLayerData(this.layer, ["points"]); // This is actually the default behavior
},
automate() {}, // Do any automation inherent to this layer if appropriate
resetsNothing() {
return false;
},
onPrestige() {
return;
}, // Useful for if you gain secondary resources or have other interesting things happen to this layer when you reset it. You gain the currency after this function ends.
hotkeys: [
{
key: "c",
description: "reset for lollipops or whatever",
press() {
if (layers[this.layer].canReset) resetLayer(this.layer);
}
},
{
key: "ctrl+c",
description: "respec things",
press() {
layers[this.layer].buyables!.respec!();
},
unlocked() {
return hasUpgrade("c", "22");
}
}
],
increaseUnlockOrder: [], // Array of layer names to have their order increased when this one is first unlocked
microtabs: {
stuff: {
data: {
first: {
display: `
<upgrades />
<div>confirmed</div>`
},
second: {
embedLayer: "f"
}
}
},
otherStuff: {
// There could be another set of microtabs here
data: {}
}
},
bars: {
data: {
longBoi: {
fillStyle: { "background-color": "#FFFFFF" },
baseStyle: { "background-color": "#696969" },
textStyle: { color: "#04e050" },
borderStyle() {
return {};
},
direction: Direction.Right,
width: 300,
height: 30,
progress() {
return player.points
.add(1)
.log(10)
.div(10)
.toNumber();
},
display() {
return format(player.points) + " / 1e10 points";
},
unlocked: true
},
tallBoi: {
fillStyle: { "background-color": "#4BEC13" },
baseStyle: { "background-color": "#000000" },
textStyle: { "text-shadow": "0px 0px 2px #000000" },
borderStyle() {
return { "border-width": "7px" };
},
direction: Direction.Up,
width: 50,
height: 200,
progress() {
return player.points.div(100);
},
display() {
return formatWhole(player.points.div(1).min(100)) + "%";
},
unlocked: true
},
flatBoi: {
fillStyle: { "background-color": "#FE0102" },
baseStyle: { "background-color": "#222222" },
textStyle: { "text-shadow": "0px 0px 2px #000000" },
borderStyle() {
return {};
},
direction: Direction.Up,
width: 100,
height: 30,
progress() {
return player.layers.c.points.div(50);
},
unlocked: true
}
}
},
// Optional, lets you format the tab yourself by listing components. You can create your own components in v.js.
subtabs: {
"main tab": {
buttonStyle() {
return { color: "orange" };
},
notify: true,
display: `
<main-display />
<sticky><prestige-button /></sticky>
<resource-display />
<spacer height="5px" />
<button onclick='console.log("yeet")'>'HI'</button>
<div>Name your points!</div>
<TextField :value="player.layers.c.thingy" @input="value => player.layers.c.thingy = value" :field="false" />
<sticky style="color: red; font-size: 32px; font-family: Comic Sans MS;">I have {{ format(player.points) }} {{ player.layers.c.thingy }} points!</sticky>
<hr />
<milestones />
<spacer />
<upgrades />
<challenges />`,
glowColor: "blue"
},
thingies: {
resetNotify: true,
style() {
return { "background-color": "#222222", "--background": "#222222" };
},
buttonStyle() {
return { "border-color": "orange" };
},
display: `
<buyables />
<spacer />
<row style="width: 600px; height: 350px; background-color: green; border-style: solid;">
<Toggle :value="player.layers.c.beep" @change="value => player.layers.c.beep = value" />
<spacer width="30px" height="10px" />
<div>Beep</div>
<spacer />
<vr height="200px"/>
<column>
<prestige-button style="width: 150px; height: 80px" />
<prestige-button style="width: 100px; height: 150px" />
</column>
</row>
<spacer />
<img src="https://unsoftcapped2.github.io/The-Modding-Tree-2/discord.png" />`
},
jail: {
display: `
<infobox id="coolInfo" />
<bar id="longBoi" />
<spacer />
<row>
<column style="background-color: #555555; padding: 15px">
<div style="color: teal">Sugar level:</div><spacer /><bar id="tallBoi" />
</column>
<spacer />
<column>
<div>idk</div>
<spacer width="0" height="50px" />
<bar id="flatBoi" />
</column>
</row>
<spacer />
<div>It's jail because "bars"! So funny! Ha ha!</div>
<tree :nodes="[['f', 'c'], ['g', 'spook', 'h']]" />`
},
illuminati: {
unlocked() {
return hasUpgrade("c", 13);
},
display: `
<h1> C O N F I R M E D </h1>
<spacer />
<microtab family="stuff" style="width: 660px; height: 370px; background-color: brown; --background: brown; border: solid white; margin: auto" />
<div>Adjust how many points H gives you!</div>
<Slider :value="player.layers.c.otherThingy" @change="value => player.c.otherThingy = value" :min="1" :max="30" />`
}
},
style() {
return {
//'background-color': '#3325CC'
};
},
nodeStyle() {
return {
// Style on the layer node
color: "#3325CC",
"text-decoration": "underline"
};
},
glowColor: "orange", // If the node is highlighted, it will be this color (default is red)
componentStyles: {
challenge() {
return { height: "200px" };
},
"prestige-button"() {
return { color: "#AA66AA" };
}
},
tooltip() {
// Optional, tooltip displays when the layer is unlocked
let tooltip = "{{ formatWhole(player.layers.c.points) }} {{ layers.c.resource }}";
if (player.layers[this.layer].buyables![11].gt(0))
tooltip +=
"<br><i><br><br><br>{{ formatWhole(player.layers.c.buyables![11]) }} Exhancers</i>";
return tooltip;
},
shouldNotify() {
// Optional, layer will be highlighted on the tree if true.
// Layer will automatically highlight if an upgrade is purchasable.
return player.layers.c.buyables![11] == new Decimal(1);
},
mark: "https://unsoftcapped2.github.io/The-Modding-Tree-2/discord.png",
resetDescription: "Melt your points into "
} as RawLayer;

107
src/data/layers/aca/f.js
View file

@ -1,107 +0,0 @@
import Decimal, { formatWhole } from '../../../util/bignum';
import player from '../../../game/player';
import { layers as tmp } from '../../../game/layers';
import { getClickableState } from '../../../util/features';
export default {
id: "f",
infoboxes:{
coolInfo: {
title: "Lore",
titleStyle: {'color': '#FE0000'},
body: "DEEP LORE!",
bodyStyle: {'background-color': "#0000EE"}
}
},
startData() { return {
unlocked: false,
points: new Decimal(0),
boop: false,
clickables: {[11]: "Start"}, // Optional default Clickable state
}},
color: "#FE0102",
requires() {return new Decimal(10)},
resource: "farm points",
baseResource: "points",
baseAmount() {return player.points},
type: "static",
exponent: 0.5,
base: 3,
roundUpCost: true,
canBuyMax() {return false},
name: "Farms",
//directMult() {return new Decimal(player.c.otherThingy)},
row: 1,
branches: [{ target: "c", 'stroke-width': '25px', 'stroke': 'blue', style: 'filter: blur(5px)' }], // When this layer appears, a branch will appear from this layer to any layers here. Each entry can be a pair consisting of a layer id and a color.
tooltipLocked() { // Optional, tooltip displays when the layer is locked
return ("This weird farmer dinosaur will only see you if you have at least {{layers.f.requires}} points. You only have {{ formatWhole(player.points) }}")
},
midsection: '<div><br/><img src="https://images.beano.com/store/24ab3094eb95e5373bca1ccd6f330d4406db8d1f517fc4170b32e146f80d?auto=compress%2Cformat&dpr=1&w=390" /><div>Bork Bork!</div></div>',
// The following are only currently used for "custom" Prestige type:
prestigeButtonDisplay() { //Is secretly HTML
if (!this.canBuyMax) return "Hi! I'm a <u>weird dinosaur</u> and I'll give you a Farm Point in exchange for all of your points and lollipops! (At least " + formatWhole(tmp[this.layer].nextAt) + " points)"
if (this.canBuyMax) return "Hi! I'm a <u>weird dinosaur</u> and I'll give you <b>" + formatWhole(tmp[this.layer].resetGain) + "</b> Farm Points in exchange for all of your points and lollipops! (You'll get another one at " + formatWhole(tmp[this.layer].nextAtDisp) + " points)"
},
canReset() {
return tmp[this.layer].baseAmount.gte(tmp[this.layer].nextAt)
},
// This is also non minimal, a Clickable!
clickables: {
masterButtonClick() {
if (getClickableState(this.layer, 11) == "Borkened...")
player[this.layer].clickables[11] = "Start"
},
masterButtonDisplay() {return (getClickableState(this.layer, 11) == "Borkened...") ? "Fix the clickable!" : "Does nothing"}, // Text on Respec button, optional
11: {
title: "Clicky clicky!", // Optional, displayed at the top in a larger font
display() { // Everything else displayed in the buyable button after the title
let data = getClickableState(this.layer, this.id)
return "Current state:<br>" + data
},
unlocked() { return player[this.layer].unlocked },
canClick() {
return getClickableState(this.layer, this.id) !== "Borkened..."},
click() {
switch(getClickableState(this.layer, this.id)){
case "Start":
player[this.layer].clickables[this.id] = "A new state!"
break;
case "A new state!":
player[this.layer].clickables[this.id] = "Keep going!"
break;
case "Keep going!":
player[this.layer].clickables[this.id] = "Maybe that's a bit too far..."
break;
case "Maybe that's a bit too far...":
//makeParticles(coolParticle, 4)
player[this.layer].clickables[this.id] = "Borkened..."
break;
default:
player[this.layer].clickables[this.id] = "Start"
break;
}
},
hold(){
console.log("Clickkkkk...")
},
style() {
switch(getClickableState(this.layer, this.id)){
case "Start":
return {'background-color': 'green'}
case "A new state!":
return {'background-color': 'yellow'}
case "Keep going!":
return {'background-color': 'orange'}
case "Maybe that's a bit too far...":
return {'background-color': 'red'}
default:
return {}
}},
},
},
}

151
src/data/layers/aca/f.ts Normal file
View file

@ -0,0 +1,151 @@
/* eslint-disable */
import { layers as tmp } from "@/game/layers";
import player from "@/game/player";
import { RawLayer } from "@/typings/layer";
import Decimal, { formatWhole } from "@/util/bignum";
import { getClickableState } from "@/util/features";
export default {
id: "f",
infoboxes: {
data: {
coolInfo: {
title: "Lore",
titleStyle: { color: "#FE0000" },
body: "DEEP LORE!",
bodyStyle: { "background-color": "#0000EE" }
}
}
},
startData() {
return {
unlocked: false,
points: new Decimal(0),
boop: false,
clickables: { [11]: "Start" } // Optional default Clickable state
};
},
color: "#FE0102",
requires() {
return new Decimal(10);
},
resource: "farm points",
baseResource: "points",
baseAmount() {
return player.points;
},
type: "static",
exponent: 0.5,
base: 3,
roundUpCost: true,
canBuyMax() {
return false;
},
name: "Farms",
//directMult() {return new Decimal(player.c.otherThingy)},
row: 1,
branches: [
{
target: "c",
"stroke-width": "25px",
stroke: "blue",
style: "filter: blur(5px)"
}
], // When this layer appears, a branch will appear from this layer to any layers here. Each entry can be a pair consisting of a layer id and a color.
tooltipLocked() {
// Optional, tooltip displays when the layer is locked
return "This weird farmer dinosaur will only see you if you have at least {{layers.f.requires}} points. You only have {{ formatWhole(player.points) }}";
},
midsection:
'<div><br/><img src="https://images.beano.com/store/24ab3094eb95e5373bca1ccd6f330d4406db8d1f517fc4170b32e146f80d?auto=compress%2Cformat&dpr=1&w=390" /><div>Bork Bork!</div></div>',
// The following are only currently used for "custom" Prestige type:
prestigeButtonDisplay() {
//Is secretly HTML
if (!this.canBuyMax)
return (
"Hi! I'm a <u>weird dinosaur</u> and I'll give you a Farm Point in exchange for all of your points and lollipops! (At least " +
formatWhole(tmp[this.layer].nextAt) +
" points)"
);
if (this.canBuyMax)
return (
"Hi! I'm a <u>weird dinosaur</u> and I'll give you <b>" +
formatWhole(tmp[this.layer].resetGain) +
"</b> Farm Points in exchange for all of your points and lollipops! (You'll get another one at " +
formatWhole(tmp[this.layer].nextAt) +
" points)"
);
},
canReset() {
return Decimal.gte(tmp[this.layer].baseAmount!, tmp[this.layer].nextAt);
},
// This is also non minimal, a Clickable!
clickables: {
masterButtonClick() {
if (getClickableState(this.layer, 11) == "Borkened...")
player.layers[this.layer].clickables![11] = "Start";
},
masterButtonDisplay() {
return getClickableState(this.layer, 11) == "Borkened..."
? "Fix the clickable!"
: "Does nothing";
}, // Text on Respec button, optional
data: {
11: {
title: "Clicky clicky!", // Optional, displayed at the top in a larger font
display() {
// Everything else displayed in the buyable button after the title
const data = getClickableState(this.layer, this.id);
return "Current state:<br>" + data;
},
unlocked() {
return player.layers[this.layer].unlocked;
},
canClick() {
return getClickableState(this.layer, this.id) !== "Borkened...";
},
click() {
switch (getClickableState(this.layer, this.id)) {
case "Start":
player.layers[this.layer].clickables![this.id] = "A new state!";
break;
case "A new state!":
player.layers[this.layer].clickables![this.id] = "Keep going!";
break;
case "Keep going!":
player.layers[this.layer].clickables![this.id] =
"Maybe that's a bit too far...";
break;
case "Maybe that's a bit too far...":
//makeParticles(coolParticle, 4)
player.layers[this.layer].clickables![this.id] = "Borkened...";
break;
default:
player.layers[this.layer].clickables![this.id] = "Start";
break;
}
},
hold() {
console.log("Clickkkkk...");
},
style() {
switch (getClickableState(this.layer, this.id)) {
case "Start":
return { "background-color": "green" };
case "A new state!":
return { "background-color": "yellow" };
case "Keep going!":
return { "background-color": "orange" };
case "Maybe that's a bit too far...":
return { "background-color": "red" };
default:
return {};
}
}
}
}
}
} as RawLayer;

153
src/data/layers/demo-infinity.js
View file

@ -1,153 +0,0 @@
import Decimal, { format } from '../../util/bignum';
import player from '../../game/player';
import { layers } from '../../game/layers';
import { hasUpgrade, hasMilestone, getBuyableAmount, setBuyableAmount, hasChallenge } from '../../util/features';
import { resetLayer } from '../../util/layers';
export default {
id: "i",
position: 2, // Horizontal position within a row. By default it uses the layer id and sorts in alphabetical order
startData() { return {
unlocked: false,
points: new Decimal(0),
}},
branches: ["p"],
color: "#964B00",
requires(){
let require = new Decimal(8).plus(player.i.points.div(10).floor().times(2))
return require
} , // Can be a function that takes requirement increases into account
effectDisplay(){return "Multiplying points and prestige points by "+format(player[this.layer].points.plus(1).pow(hasUpgrade("p",235)?6.9420:1))},
resource: "Infinity", // Name of prestige currency
baseResource: "pointy points", // Name of resource prestige is based on
baseAmount() {return player.p.buyables[21]}, // Get the current amount of baseResource
type: "custom", // normal: cost to gain currency depends on amount gained. static: cost depends on how much you already have
resetGain(){
if (hasMilestone("p",12)){return getBuyableAmount("p",21).div(2).floor().times(2).times(5).sub(30).sub(player.i.points)}
return (player.p.buyables[21].gte(layers.i.requires)?1:0)}, // Prestige currency exponent
getNextAt(){return new Decimal(100)},
canReset(){return player.p.buyables[21].gte(layers.i.requires)},
prestigeButtonDisplay(){return "Reset everything for +"+format(layers.i.resetGain)+" Infinity.<br>You need "+format(layers.i.requires)+" pointy points to reset."},
row: 1, // Row the layer is in on the tree (0 is the first row)
hotkeys: [
{key: "i", description: "I: Infinity", press(){if (layers.i.canReset) resetLayer(this.layer)}},
],
layerShown(){return player[this.layer].unlocked||new Decimal(player.p.buyables[21]).gte(8)},
milestones: {
0: {
requirementDisplay: "2 Infinity points",
effectDisplay: "Keep ALL milestones on reset",
done() { return player[this.layer].points.gte(2) },
},
1: {
requirementDisplay: "3 Infinity points",
effectDisplay: "Pointy points don't reset generators",
done() { return player[this.layer].points.gte(3) },
unlocked(){return hasMilestone(this.layer,this.id-1)}
},
2: {
requirementDisplay: "4 Infinity points",
effectDisplay: "Start with 6 <b>Time Dilation</b>, 3 <b>Point</b>, and 1 of the other 2 challenges",
done() { return player[this.layer].points.gte(4) },
unlocked(){return hasMilestone(this.layer,this.id-1)}
},
3: {
requirementDisplay: "5 Infinity points",
effectDisplay: "Start with 40 upgrades and 6 boosts",
done() { return player[this.layer].points.gte(5) },
unlocked(){return hasMilestone(this.layer,this.id-1)}
},
4: {
requirementDisplay: "6 Infinity points",
effectDisplay: "You can choose all of the 14th row upgrades, and remove the respec button",
done() { return player[this.layer].points.gte(6) },
unlocked(){return hasMilestone(this.layer,this.id-1)}
},
5: {
requirementDisplay: "8 Infinity points",
effectDisplay: "Keep all upgrades and 7 Time dilation",
done() { return player[this.layer].points.gte(8) },
unlocked(){return hasMilestone(this.layer,this.id-1)}
},
6: {
requirementDisplay: "10 Infinity points",
effectDisplay: "Infinity reset nothing and auto prestige",
done() { return player[this.layer].points.gte(10) },
unlocked(){return hasMilestone(this.layer,this.id-1)}
},
},
resetsNothing(){return hasMilestone(this.layer,6)},
update(){
if (hasMilestone(this.layer,0)){
if (!hasMilestone("p",0)){
player.p.milestones.push(0)
player.p.milestones.push(1)
player.p.milestones.push(2)
player.p.milestones.push(3)
player.p.milestones.push(4)
player.p.milestones.push(5)
player.p.milestones.push(6)
player.p.milestones.push(7)
player.p.milestones.push(8)
}
}
if (hasMilestone(this.layer,2)){
if (!hasChallenge("p",11)){
player.p.challenges[11]=new Decimal(hasMilestone(this.layer,5)?7:6)
player.p.challenges[12]=new Decimal(3)
player.p.challenges[21]=new Decimal(1)
player.p.challenges[22]=new Decimal(1)
}
}
if (hasMilestone(this.layer,3)){
if (!hasUpgrade("p",71)){
player.p.upgrades=[11,12,13,14,21,22,23,24,31,32,33,34,41,42,43,44,51,52,53,54,61,62,63,64,71,72,73,74,81,82,83,84,91,92,93,94,101,102,103,104]
}
if (getBuyableAmount("p",11).lt(6)){setBuyableAmount("p",11,new Decimal(6))}
}
if (hasUpgrade(this.layer,13)){
for (let i=0;i<(hasUpgrade("p",222)?100:hasUpgrade("p",215)?10:1);i++){
if (layers.p.buyables[12].canAfford)layers.p.buyables[12].buy()
if (layers.p.buyables[13].canAfford)layers.p.buyables[13].buy()
if (layers.p.buyables[14].canAfford&&layers.p.buyables[14].unlocked())layers.p.buyables[14].buy()
if (layers.p.buyables[21].canAfford)layers.p.buyables[21].buy()}
}
if (hasUpgrade("p",223)){
if (hasMilestone("p",14))player.p.buyables[22]=player.p.buyables[22].max(player.p.buyables[21].sub(7))
else if (layers.p.buyables[22].canAfford)layers.p.buyables[22].buy()
}
if (hasMilestone(this.layer,5)&&!hasUpgrade("p",111)){player.p.upgrades=[11,12,13,14,21,22,23,24,31,32,33,34,41,42,43,44,51,52,53,54,61,62,63,64,71,72,73,74,81,82,83,84,91,92,93,94,101,102,103,104,111,121,122,131,132,141,142,143]}
if (hasMilestone(this.layer,6)) {
this.reset();
}
},
upgrades:{
rows: 999,
cols: 5,
11:{
title: "Prestige",
description: "Gain 100% of prestige points per second",
cost(){
return new Decimal(1)},
unlocked(){return hasMilestone(this.layer,4)}
},
12:{
title: "Automation",
description: "Remove the nerf of upgrade <b>Active</b>",
cost(){
return new Decimal(2)},
unlocked(){return hasUpgrade(this.layer,11)}
},
13:{
title: "Pointy",
description: "Automatically buy generators and pointy points",
cost(){
return new Decimal(5)},
unlocked(){return hasUpgrade(this.layer,11)}
},
}
}

354
src/data/layers/demo-infinity.ts Normal file
View file

@ -0,0 +1,354 @@
/* eslint-disable */
import { layers } from "@/game/layers";
import player from "@/game/player";
import { Layer, RawLayer } from "@/typings/layer";
import Decimal, { format } from "@/util/bignum";
import {
getBuyableAmount, hasChallenge, hasMilestone, hasUpgrade, setBuyableAmount
} from "@/util/features";
import { resetLayer } from "@/util/layers";
export default {
id: "i",
position: 2, // Horizontal position within a row. By default it uses the layer id and sorts in alphabetical order
startData() {
return {
unlocked: false,
points: new Decimal(0)
};
},
branches: ["p"],
color: "#964B00",
requires() {
const require = new Decimal(8).plus(
player.layers.i.points
.div(10)
.floor()
.times(2)
);
return require;
}, // Can be a function that takes requirement increases into account
effectDisplay() {
return (
"Multiplying points and prestige points by " +
format(
player.layers[this.layer].points
.plus(1)
.pow(hasUpgrade("p", 235) ? 6.942 : 1)
)
);
},
resource: "Infinity", // Name of prestige currency
baseResource: "pointy points", // Name of resource prestige is based on
baseAmount() {
return player.layers.p.buyables![21];
}, // Get the current amount of baseResource
type: "custom", // normal: cost to gain currency depends on amount gained. static: cost depends on how much you already have
resetGain() {
if (hasMilestone("p", 12)) {
return getBuyableAmount("p", 21)!
.div(2)
.floor()
.times(2)
.times(5)
.sub(30)
.sub(player.layers.i.points);
}
return player.layers.p.buyables![21].gte(layers.i.requires!) ? 1 : 0;
}, // Prestige currency exponent
getNextAt() {
return new Decimal(100);
},
canReset() {
return player.layers.p.buyables![21].gte(layers.i.requires!);
},
prestigeButtonDisplay() {
return (
"Reset everything for +" +
format(layers.i.resetGain) +
" Infinity.<br>You need " +
format(layers.i.requires!) +
" pointy points to reset."
);
},
row: 1, // Row the layer is in on the tree (0 is the first row)
hotkeys: [
{
key: "i",
description: "I: Infinity",
press() {
if (layers.i.canReset) resetLayer(this.layer);
}
}
],
layerShown() {
return (
player.layers[this.layer].unlocked ||
new Decimal(player.layers.p.buyables[21]).gte(8)
);
},
milestones: {
data: {
0: {
requirementDisplay: "2 Infinity points",
effectDisplay: "Keep ALL milestones on reset",
done() {
return player.layers[this.layer].points.gte(2);
}
},
1: {
requirementDisplay: "3 Infinity points",
effectDisplay: "Pointy points don't reset generators",
done() {
return player.layers[this.layer].points.gte(3);
},
unlocked() {
return hasMilestone(this.layer, Number(this.id) - 1);
}
},
2: {
requirementDisplay: "4 Infinity points",
effectDisplay:
"Start with 6 <b>Time Dilation</b>, 3 <b>Point</b>, and 1 of the other 2 challenges",
done() {
return player.layers[this.layer].points.gte(4);
},
unlocked() {
return hasMilestone(this.layer, Number(this.id) - 1);
}
},
3: {
requirementDisplay: "5 Infinity points",
effectDisplay: "Start with 40 upgrades and 6 boosts",
done() {
return player.layers[this.layer].points.gte(5);
},
unlocked() {
return hasMilestone(this.layer, Number(this.id) - 1);
}
},
4: {
requirementDisplay: "6 Infinity points",
effectDisplay:
"You can choose all of the 14th row upgrades, and remove the respec button",
done() {
return player.layers[this.layer].points.gte(6);
},
unlocked() {
return hasMilestone(this.layer, Number(this.id) - 1);
}
},
5: {
requirementDisplay: "8 Infinity points",
effectDisplay: "Keep all upgrades and 7 Time dilation",
done() {
return player.layers[this.layer].points.gte(8);
},
unlocked() {
return hasMilestone(this.layer, Number(this.id) - 1);
}
},
6: {
requirementDisplay: "10 Infinity points",
effectDisplay: "Infinity reset nothing and auto prestige",
done() {
return player.layers[this.layer].points.gte(10);
},
unlocked() {
return hasMilestone(this.layer, Number(this.id) - 1);
}
}
}
},
resetsNothing() {
return hasMilestone(this.layer, 6);
},
update(this: Layer) {
if (hasMilestone(this.layer, 0)) {
if (!hasMilestone("p", 0)) {
player.layers.p.milestones!.push(0);
player.layers.p.milestones!.push(1);
player.layers.p.milestones!.push(2);
player.layers.p.milestones!.push(3);
player.layers.p.milestones!.push(4);
player.layers.p.milestones!.push(5);
player.layers.p.milestones!.push(6);
player.layers.p.milestones!.push(7);
player.layers.p.milestones!.push(8);
}
}
if (hasMilestone(this.layer, 2)) {
if (!hasChallenge("p", 11)) {
player.layers.p.challenges![11] = new Decimal(
hasMilestone(this.layer, 5) ? 7 : 6
);
player.layers.p.challenges![12] = new Decimal(3);
player.layers.p.challenges![21] = new Decimal(1);
player.layers.p.challenges![22] = new Decimal(1);
}
}
if (hasMilestone(this.layer, 3)) {
if (!hasUpgrade("p", 71)) {
player.layers.p.upgrades = [
11,
12,
13,
14,
21,
22,
23,
24,
31,
32,
33,
34,
41,
42,
43,
44,
51,
52,
53,
54,
61,
62,
63,
64,
71,
72,
73,
74,
81,
82,
83,
84,
91,
92,
93,
94,
101,
102,
103,
104
];
}
if (getBuyableAmount("p", 11)!.lt(6)) {
setBuyableAmount("p", 11, new Decimal(6));
}
}
if (hasUpgrade(this.layer, 13)) {
for (
let i = 0;
i < (hasUpgrade("p", 222) ? 100 : hasUpgrade("p", 215) ? 10 : 1);
i++
) {
if (layers.p.buyables!.data[12].canAfford) layers.p.buyables!.data[12].buy();
if (layers.p.buyables!.data[13].canAfford) layers.p.buyables!.data[13].buy();
if (
layers.p.buyables!.data[14].canAfford &&
layers.p.buyables!.data[14].unlocked
)
layers.p.buyables!.data[14].buy();
if (layers.p.buyables!.data[21].canAfford) layers.p.buyables!.data[21].buy();
}
}
if (hasUpgrade("p", 223)) {
if (hasMilestone("p", 14))
player.layers.p.buyables![22] = player.layers.p.buyables![22].max(
player.layers.p.buyables![21].sub(7)
);
else if (layers.p.buyables!.data[22].canAfford) layers.p.buyables!.data[22].buy();
}
if (hasMilestone(this.layer, 5) && !hasUpgrade("p", 111)) {
player.layers.p.upgrades = [
11,
12,
13,
14,
21,
22,
23,
24,
31,
32,
33,
34,
41,
42,
43,
44,
51,
52,
53,
54,
61,
62,
63,
64,
71,
72,
73,
74,
81,
82,
83,
84,
91,
92,
93,
94,
101,
102,
103,
104,
111,
121,
122,
131,
132,
141,
142,
143
];
}
if (hasMilestone(this.layer, 6)) {
this.reset();
}
},
upgrades: {
rows: 999,
cols: 5,
data: {
11: {
title: "Prestige",
description: "Gain 100% of prestige points per second",
cost() {
return new Decimal(1);
},
unlocked() {
return hasMilestone(this.layer, 4);
}
},
12: {
title: "Automation",
description: "Remove the nerf of upgrade <b>Active</b>",
cost() {
return new Decimal(2);
},
unlocked() {
return hasUpgrade(this.layer, 11);
}
},
13: {
title: "Pointy",
description: "Automatically buy generators and pointy points",
cost() {
return new Decimal(5);
},
unlocked() {
return hasUpgrade(this.layer, 11);
}
}
}
}
} as RawLayer;

940
src/data/layers/demo.js
View file

@ -1,940 +0,0 @@
import Decimal, { format } from '../../util/bignum';
import player from '../../game/player';
import { layers } from '../../game/layers';
import { hasUpgrade, hasMilestone, getBuyableAmount, setBuyableAmount, hasChallenge } from '../../util/features';
import { resetLayer } from '../../util/layers';
export default {
id: "p",
position: 2,
startData() { return {
unlocked: true,
points: new Decimal(0),
gp: new Decimal(0),
g: new Decimal(0),
geff: new Decimal(1),
cmult: new Decimal(1),
}},
color: "#4BDC13",
requires(){
let require = new Decimal(68.99)
if (hasMilestone(this.layer,0))require=require.plus(0.01)
if (hasUpgrade(this.layer,21))require=require.tetrate(hasUpgrade("p",34)?(new Decimal(1).div(new Decimal(1).plus(layers.p.upgrades[34].effect))):1)
if (hasUpgrade(this.layer,22))require=require.pow(hasUpgrade("p",34)?(new Decimal(1).div(new Decimal(1).plus(layers.p.upgrades[34].effect))):1)
if (hasUpgrade(this.layer,23))require=require.div(hasUpgrade("p",34)?(new Decimal(1).plus(layers.p.upgrades[34].effect)):1)
if (hasUpgrade(this.layer,24))require=require.sub(hasUpgrade("p",34)?(new Decimal(1).plus(layers.p.upgrades[34].effect)):1)
return require.max(1)
},
resource: "prestige points",
baseResource: "points",
baseAmount() {return player.points}, // Get the current amount of baseResource
type: "normal", // normal: cost to gain currency depends on amount gained. static: cost depends on how much you already have
exponent: 0.5, // Prestige currency exponent
gainMult() { // Calculate the multiplier for main currency from bonuses
let mult = new Decimal(1)
if (hasUpgrade(this.layer,131))mult=mult.times(10)
if (player.i.unlocked)mult=mult.times(player.i.points.plus(1).pow(hasUpgrade("p",235)?6.9420:1))
if (hasUpgrade(this.layer,222))mult=mult.times(getBuyableAmount(this.layer,22).plus(1))
if (hasUpgrade("p",231)){
let asdf = (hasUpgrade("p",132)?player.p.gp.plus(1).pow(new Decimal(1).div(2)):hasUpgrade("p",101)?player.p.gp.plus(1).pow(new Decimal(1).div(3)):hasUpgrade("p",93)?player.p.gp.plus(1).pow(0.2):player.p.gp.plus(1).log10())
mult=mult.mul(asdf.plus(1))
}
if (hasMilestone(this.layer,13))mult=mult.mul(new Decimal(2).plus(layers.p.buyables[33].effect).pow(getBuyableAmount(this.layer,32)))
return mult
},
gainExp() { // Calculate the exponent on main currency from bonuses
return new Decimal(1)
},
row: 0, // Row the layer is in on the tree (0 is the first row)
hotkeys: [
{key: "p", description: "P: Reset for prestige points", press(){if (layers.p.canReset) resetLayer(this.layer)}},
],
layerShown(){return true},
upgrades:{
rows: 999,
cols: 5,
11:{
title: "Gain points",
description: "Point generation is increased by 1",
cost(){
if (hasMilestone(this.layer,2))return new Decimal(1)
return new Decimal(1.00001)},
unlocked(){return true}
},
12:{
title: "Gain more points",
description: "Point generation is singled",
cost(){return new Decimal(1)},
unlocked(){return hasUpgrade(this.layer,11)}
},
13:{
title: "Gain more points",
description: "Point generation is lined",
cost(){return new Decimal(1)},
unlocked(){return hasUpgrade(this.layer,12)}
},
14:{
title: "Gain more points",
description: "Point generation is tetrated by 1",
cost(){return new Decimal(1)},
unlocked(){return hasUpgrade(this.layer,13)}
},
21:{
title: "Lower prestige requirement",
description: "Prestige point requirement is superrooted by 1",
cost(){return new Decimal(1)},
unlocked(){return hasUpgrade(this.layer,14)}
},
22:{
title: "Lower prestige requirement more",
description: "Prestige point requirement is line rooted",
cost(){return new Decimal(1)},
unlocked(){return hasUpgrade(this.layer,21)}
},
23:{
title: "Lower prestige requirement more",
description: "Prestige point requirement is wholed",
cost(){return new Decimal(1)},
unlocked(){return hasUpgrade(this.layer,22)}
},
24:{
title: "Lower prestige requirement more",
description: "Prestige point requirement is decreased by 1",
cost(){return new Decimal(1)},
unlocked(){return hasUpgrade(this.layer,23)}
},
31:{
title: "Unlock",
description: "Unlock an upgrade",
cost(){return new Decimal(1)},
unlocked(){return hasUpgrade(this.layer,24)}
},
32:{
title: "An",
description: "Unlock an upgrade",
cost(){return new Decimal(1)},
unlocked(){return hasUpgrade(this.layer,31)}
},
33:{
title: "Upgrade",
description: "Unlock an upgrade",
cost(){return new Decimal(1)},
unlocked(){return hasUpgrade(this.layer,32)}
},
34:{
title: "Increase",
description(){return "Add 0.01 to all above upgrades. Currently: +"+format(this.effect)},
cost(){return new Decimal(1)},
unlocked(){return hasUpgrade(this.layer,33)},
effect(){
let r = (hasUpgrade("p",41)?new Decimal(0.01).times(layers.p.upgrades[41].effect):new Decimal(0.01))
r=r.times(new Decimal(1).plus(new Decimal(player[this.layer].challenges[11]).add(1).pow(hasUpgrade(this.layer,121)?1.2:1)))
if (hasUpgrade(this.layer,92)) r=r.plus(new Decimal(0.001).times(player[this.layer].g.plus(1)).min(0.05))
return r
}
},
41:{
title: "Increase again",
description(){return "Multiply the previous upgrade by 1.01. Currently: x"+format(this.effect)},
cost(){return new Decimal(1)},
unlocked(){return hasUpgrade(this.layer,34)},
effect(){return new Decimal(1.01).pow(hasUpgrade("p",42)?layers.p.upgrades[42].effect:1).times(hasUpgrade("p",63)?2:1)}
},
42:{
title: "Increase again",
description(){return "Exponentiate the previous upgrade by 1.01. Currently: ^"+format(this.effect)},
cost(){return new Decimal(1)},
unlocked(){return hasUpgrade(this.layer,41)},
effect(){return new Decimal(1.01).tetrate(hasUpgrade("p",43)?layers.p.upgrades[43].effect:1).times(hasUpgrade("p",63)?2:1).times(hasUpgrade("p",64)?2:1)}
},
43:{
title: "Increase again",
description(){return "Tetrate the previous upgrade by 1.01. Currently: ^^"+format(this.effect)},
cost(){return new Decimal(1)},
unlocked(){return hasUpgrade(this.layer,42)},
effect(){return new Decimal(1.01).pentate(hasUpgrade("p",44)?layers.p.upgrades[44].effect:1).times(hasUpgrade("p",63)?2:1).times(hasUpgrade("p",64)?2:1)}
},
44:{
title: "Increase again",
description(){return "Pentate the previous upgrade by 1.01. Currently: ^^^"+format(this.effect)},
cost(){return new Decimal(1)},
unlocked(){return hasUpgrade(this.layer,43)},
effect(){return new Decimal(1.01).times(hasUpgrade("p",63)?2:1).times(hasUpgrade("p",64)?2:1)}
},
51:{
title: "Challenging",
description: "This upgrade doesn't unlock a challenge",
cost(){return new Decimal(1)},
unlocked(){return hasUpgrade(this.layer,44)},
},
52:{
title: "Not challenging",
description: "This upgrade doesn't add 1 to the completion limit",
cost(){return new Decimal(1)},
unlocked(){return hasUpgrade(this.layer,51)},
},
53:{
title: "Not not challenging",
description: "This upgrade doesn't add 1 to the completion limit",
cost(){return new Decimal(1)},
unlocked(){return hasUpgrade(this.layer,52)},
},
54:{
title: "(not^3) challenging",
description: "Fix the bug where you can't buy upgrades when you have 1 prestige point",
cost(){return new Decimal(0.99999)},
unlocked(){return hasUpgrade(this.layer,53)},
onPurchase(){player.p.points=player.p.points.round()},
},
61:{
title: "(not^4) challenging",
description: "Doesn't unlock a second challenge",
cost(){return new Decimal(1)},
unlocked(){return hasUpgrade(this.layer,54)&&hasUpgrade(this.layer,53)},
},
62:{
title: "Infinity points",
description: "You can now complete Time Dilation 4 more times",
cost(){return new Decimal(1)},
unlocked(){return hasUpgrade(this.layer,61)},
},
63:{
title: "Eternity points",
description: "Double all fourth row upgrade effects",
cost(){return new Decimal(1)},
unlocked(){return hasUpgrade(this.layer,62)},
},
64:{
title: "Reality points",
description: "Previous upgrade, but only to the last 3 upgrades",
cost(){return new Decimal(1)},
unlocked(){return hasUpgrade(this.layer,63)},
},
71:{
title: "1",
description: "Add 1.1 to point gain, but reset all above upgrades",
cost(){return new Decimal(1)},
unlocked(){return hasUpgrade(this.layer,64)},
onPurchase(){if (!hasMilestone(this.layer,0)) player[this.layer].upgrades=[71]}
},
72:{
title: "2",
description: "Multiply point gain by 1.1, but reset all above upgrades",
cost(){return new Decimal(2)},
unlocked(){return hasUpgrade(this.layer,64)&&hasUpgrade(this.layer, this.id-1)},
onPurchase(){if (!hasMilestone(this.layer,1))player[this.layer].upgrades=[71,72]}
},
73:{
title: "3",
description: "Raise point gain by ^1.1, but reset all above upgrades",
cost(){return new Decimal(4)},
unlocked(){return hasUpgrade(this.layer,64)&&hasUpgrade(this.layer, this.id-1)},
onPurchase(){if (!hasMilestone(this.layer,1))player[this.layer].upgrades=[71,72,73]}
},
74:{
title: "4",
description: "Tetrate point gain by 1.1, but reset all above upgrades",
cost(){return new Decimal(8)},
unlocked(){return hasUpgrade(this.layer,64)&&hasUpgrade(this.layer, this.id-1)},
onPurchase(){if (!hasMilestone(this.layer,2))player[this.layer].upgrades=[71,72,73,74]
if (hasMilestone(this.layer,1)&&!hasMilestone(this.layer,2)) {player[this.layer].upgrades=[11,12,13,14,21,22,23,24,71,72,73,74]}}
},
81:{
title: "5",
description: "Generator efficiency is increased by 2",
cost(){return new Decimal(1)},
unlocked(){return hasUpgrade(this.layer,74)&&(player[this.layer].buyables[12].gt(0)||player[this.layer].buyables[21].gt(0))},
},
82:{
title: "6",
description: "Unlock another way to buy generators",
cost(){return new Decimal(1)},
unlocked(){return hasUpgrade(this.layer,81)&&(player[this.layer].buyables[12].gt(0)||player[this.layer].buyables[21].gt(0))},
},
83:{
title: "7",
description: "Generator efficiency is boosted by prestige points",
cost(){return new Decimal(3)},
unlocked(){return hasUpgrade(this.layer,82)},
},
84:{
title: "8",
description: "You can complete <b>Point</b> one more time",
cost(){return new Decimal(3)},
unlocked(){return hasUpgrade(this.layer,83)},
},
91:{
title: "9",
description: "New Challenge Time",
cost(){return new Decimal(20)},
unlocked(){return hasUpgrade(this.layer,84)&&new Decimal(player[this.layer].challenges[12]).gte(3)},
},
92:{
title: "10",
description: "Each of the first 50 generators adds 0.001 to <b>Increase</b>",
cost(){return new Decimal(5)},
unlocked(){return hasUpgrade(this.layer,91)&&hasChallenge(this.layer,21)},
},
93:{
title: "11",
description: "Change the tree trunk in generator effect to a hypertessaract root",
cost(){return new Decimal(7)},
unlocked(){return hasUpgrade(this.layer,92)},
},
94:{
title: "12",
description: "Unlock a clickable in generators",
cost(){return new Decimal(50)},
unlocked(){return hasUpgrade(this.layer,93)},
},
101:{
title: "10th row????",
description: "Decrease the dimensions of <b>11</b> by 2",
cost(){return new Decimal(10)},
unlocked(){return hasUpgrade(this.layer,94)},
},
102:{
title: "2 Tree Trunks",
description: "Double log of generator points adds to generator efficiency",
cost(){return new Decimal(25)},
unlocked(){return hasUpgrade(this.layer,101)},
},
103:{
title: "(not^5) challenging",
description: "Unlock the last challenge",
cost(){return new Decimal(103)},
unlocked(){return hasUpgrade(this.layer,102)},
},
104:{
title: "2 layers tree",
description: "Prestige points boost points, and unlock another tab",
cost(){return new Decimal(100)},
unlocked(){return hasUpgrade(this.layer,103)&&hasChallenge(this.layer,22)},
},
111:{
title: "not (hardcapped)",
description: "Remove the generator clickable hardcap, and you can only pick one upgrade on each row below this",
cost(){return new Decimal(110)},
unlocked(){return hasUpgrade(this.layer,104)&&hasMilestone(this.layer,6)},
},
112:{
title: "Respec button",
description: "Respec all lower upgrades, but you don't get points back",
cost(){return new Decimal(100)},
unlocked(){return hasUpgrade(this.layer,111)&&(hasUpgrade(this.layer,121)||hasUpgrade(this.layer,122))&&!hasMilestone("i",4)},
onPurchase(){
player.p.upgrades=player.p.upgrades.filter(function x(i){return i<112})
}
},
121:{
title: "Timers",
description: "Raise the <b>Time Dilation</b> reward effect to the 1.2",
cost(){return new Decimal(500)},
unlocked(){return hasUpgrade(this.layer,111)&&(!hasUpgrade(this.layer,122)||hasMilestone(this.layer,7))},
},
122:{
title: "Generators",
description: "Decrease the first generator buyable cost scaling base by 2",
cost(){return new Decimal(500)},
unlocked(){return hasUpgrade(this.layer,111)&&(!hasUpgrade(this.layer,121)||hasMilestone(this.layer,7))},
},
131:{
title: "Prestige",
description: "Gain 10x more prestige points",
cost(){return new Decimal(5000)},
unlocked(){return (hasUpgrade(this.layer,121)||hasUpgrade(this.layer,122))&&(!hasUpgrade(this.layer,132)||hasMilestone(this.layer,7))},
},
132:{
title: "One and a half",
description: "Raise generator effect to the 1.5",
cost(){return new Decimal(5000)},
unlocked(){return (hasUpgrade(this.layer,121)||hasUpgrade(this.layer,122))&&(!hasUpgrade(this.layer,131)||hasMilestone(this.layer,7))},
},
141:{
title: "Active",
description: "Multiply generator efficiency now increases by 1, but it doesn't automatically click.",
cost(){return new Decimal(50000)},
unlocked(){return (hasUpgrade(this.layer,131)||hasUpgrade(this.layer,132))&&((!hasUpgrade(this.layer,142)&&!hasUpgrade(this.layer,143))||hasMilestone("i",4))},
},
142:{
title: "Passive",
description: "Gain 5x more points",
cost(){return new Decimal(50000)},
unlocked(){return (hasUpgrade(this.layer,131)||hasUpgrade(this.layer,132))&&((!hasUpgrade(this.layer,141)&&!hasUpgrade(this.layer,143))||hasMilestone("i",4))},
},
143:{
title: "Idle",
description: "Hours played multiply generator power",
cost(){return new Decimal(50000)},
unlocked(){return (hasUpgrade(this.layer,131)||hasUpgrade(this.layer,132))&&((!hasUpgrade(this.layer,142)&&!hasUpgrade(this.layer,141))||hasMilestone("i",4))},
},
211:{
title: "Prestige",
description: "Pointy points multiply points",
cost(){return new Decimal(1)},
canAfford(){return getBuyableAmount(this.layer,22).gte(this.cost)},
pay(){setBuyableAmount(this.layer,22,getBuyableAmount(this.layer,22).sub(this.cost))},
unlocked(){return (hasMilestone("i",5)&&layers.p.activeSubtab!="Upgrades")},
},
212:{
title: "Pointy",
description: "Pointy prestige points reduce the cost scaling of pointy points",
cost(){return new Decimal(2)},
canAfford(){return getBuyableAmount(this.layer,22).gte(this.cost)},
pay(){setBuyableAmount(this.layer,22,getBuyableAmount(this.layer,22).sub(this.cost))},
unlocked(){return (hasMilestone("i",5)&&layers.p.activeSubtab!="Upgrades"&&hasUpgrade(this.layer,211))},
},
213:{
title: "Time",
description: "Generator power also multiplies point gain",
cost(){return new Decimal(6)},
canAfford(){return getBuyableAmount(this.layer,22).gte(this.cost)},
pay(){setBuyableAmount(this.layer,22,getBuyableAmount(this.layer,22).sub(this.cost))},
unlocked(){return (hasMilestone("i",5)&&layers.p.activeSubtab!="Upgrades"&&hasUpgrade(this.layer,212))},
},
214:{
title: "^0",
description: "Further reduce the pointy point scaling",
cost(){return new Decimal(11)},
canAfford(){return getBuyableAmount(this.layer,22).gte(this.cost)},
pay(){setBuyableAmount(this.layer,22,getBuyableAmount(this.layer,22).sub(this.cost))},
unlocked(){return (hasMilestone("i",5)&&layers.p.activeSubtab!="Upgrades"&&hasUpgrade(this.layer,213))},
},
215:{
title: "bulk",
description: "Auto-pointy points now buys 10 per tick",
cost(){return new Decimal(27)},
canAfford(){return getBuyableAmount(this.layer,22).gte(this.cost)},
pay(){setBuyableAmount(this.layer,22,getBuyableAmount(this.layer,22).sub(this.cost))},
unlocked(){return (hasMilestone("i",5)&&layers.p.activeSubtab!="Upgrades"&&hasUpgrade(this.layer,214))},
},
221:{
title: "^-1",
description: "^0 is even more powerful",
cost(){return new Decimal(28)},
canAfford(){return getBuyableAmount(this.layer,22).gte(this.cost)},
pay(){setBuyableAmount(this.layer,22,getBuyableAmount(this.layer,22).sub(this.cost))},
unlocked(){return (hasMilestone("i",5)&&layers.p.activeSubtab!="Upgrades"&&hasUpgrade(this.layer,215))},
},
222:{
title: "???",
description: "square <b>bulk</b> and pointy prestige points multiply prestige points",
cost(){return new Decimal(90)},
canAfford(){return getBuyableAmount(this.layer,22).gte(this.cost)},
pay(){setBuyableAmount(this.layer,22,getBuyableAmount(this.layer,22).sub(this.cost))},
unlocked(){return (hasMilestone("i",5)&&layers.p.activeSubtab!="Upgrades"&&hasUpgrade(this.layer,221))},
},
223:{
title: "more automation",
description: "Automatically gain pointy prestige points",
cost(){return new Decimal(96)},
canAfford(){return getBuyableAmount(this.layer,22).gte(this.cost)},
pay(){setBuyableAmount(this.layer,22,getBuyableAmount(this.layer,22).sub(this.cost))},
unlocked(){return (hasMilestone("i",5)&&layers.p.activeSubtab!="Upgrades"&&hasUpgrade(this.layer,222))},
},
224:{
title: "Generation",
description: "Generator costs are divided by generator effect",
cost(){return new Decimal(100)},
canAfford(){return getBuyableAmount(this.layer,22).gte(this.cost)},
pay(){setBuyableAmount(this.layer,22,getBuyableAmount(this.layer,22).sub(this.cost))},
unlocked(){return (hasMilestone("i",5)&&layers.p.activeSubtab!="Upgrades"&&hasUpgrade(this.layer,223))},
},
225:{
title: "Boosters",
description: "Unlock boosters (next update)",
cost(){return new Decimal(135)},
canAfford(){return getBuyableAmount(this.layer,22).gte(this.cost)},
pay(){setBuyableAmount(this.layer,22,getBuyableAmount(this.layer,22).sub(this.cost))},
unlocked(){return (hasMilestone("i",5)&&layers.p.activeSubtab!="Upgrades"&&hasUpgrade(this.layer,224))},
},
231:{
title: "Blue",
description: "The generator effect also affects prestige points",
cost(){return new Decimal(4)},
canAfford(){return getBuyableAmount(this.layer,23).gte(this.cost)},
pay(){setBuyableAmount(this.layer,23,getBuyableAmount(this.layer,23).sub(this.cost))},
unlocked(){return (layers.p.activeSubtab!="Upgrades"&&hasMilestone(this.layer,11))},
currencyDisplayName: "pointy boosters"
},
232:{
title: "Red",
description: "Unlock a third way to buy generators",
cost(){return new Decimal(5)},
canAfford(){return getBuyableAmount(this.layer,23).gte(this.cost)},
pay(){setBuyableAmount(this.layer,23,getBuyableAmount(this.layer,23).sub(this.cost))},
unlocked(){return (layers.p.activeSubtab!="Upgrades"&&hasMilestone(this.layer,12))},
currencyDisplayName: "pointy boosters"
},
233:{
title: "Green",
description: "Prestige points do not reset your pointy points and boosters don't reset generators",
cost(){return new Decimal(5)},
canAfford(){return getBuyableAmount(this.layer,23).gte(this.cost)},
pay(){setBuyableAmount(this.layer,23,getBuyableAmount(this.layer,23).sub(this.cost))},
unlocked(){return (layers.p.activeSubtab!="Upgrades"&&hasMilestone(this.layer,12))},
currencyDisplayName: "pointy boosters"
},
234:{
title: "Yellow",
description: "Divide the cost of the third generator buyable based on boosters",
cost(){return new Decimal(6)},
canAfford(){return getBuyableAmount(this.layer,23).gte(this.cost)},
pay(){setBuyableAmount(this.layer,23,getBuyableAmount(this.layer,23).sub(this.cost))},
unlocked(){return (layers.p.activeSubtab!="Upgrades"&&hasMilestone(this.layer,12))},
currencyDisplayName: "pointy boosters"
},
235:{
title: "Orange",
description: "Raise the Infinity effect to the 6.9420th power",
cost(){return new Decimal(8)},
canAfford(){return getBuyableAmount(this.layer,23).gte(this.cost)},
pay(){setBuyableAmount(this.layer,23,getBuyableAmount(this.layer,23).sub(this.cost))},
unlocked(){return (layers.p.activeSubtab!="Upgrades"&&hasMilestone(this.layer,12))},
currencyDisplayName: "pointy boosters"
},
},
clickables: {
rows: 1,
cols: 1,
11: {
display() {return "Multiply generator efficiency by "+format(player.p.cmult)+((player.p.cmult.min(100).eq(100)&&!hasUpgrade(this.layer,111))?" (hardcapped)":"")},
unlocked(){return hasUpgrade("p",94)},
click(){player.p.cmult=player.p.cmult.plus(hasUpgrade("p",141)?1:0.01)
if (!hasUpgrade(this.layer,111))player.p.cmult=player.p.cmult.min(100)
},
canClick(){return player.p.cmult.lt(100)||hasUpgrade(this.layer,111)},
},
},
challenges:{
rows: 99,
cols: 2,
11:{
name: "Time dilation",
challengeDescription(){return "Point gain exponent is raised to the ^0.75"},
goal(){return new Decimal(100).times(new Decimal(10).pow(new Decimal(player[this.layer].challenges[this.id]).times(new Decimal(1).sub(new Decimal(layers[this.layer].challenges[12].effect).div(100))).pow(2)))},
rewardDescription(){return "You have completed this challenge "+player[this.layer].challenges[this.id]+"/"+this.completionLimit+" times. Multiply <b>Increase</b>'s effect by challenge completions+1. Currently: x"+format(new Decimal(player[this.layer].challenges[this.id]).add(1).pow(hasUpgrade(this.layer,121)?1.2:1))},
unlocked(){return hasUpgrade("p",51)||hasChallenge(this.layer,this.id)},
completionLimit(){
if (hasUpgrade("p",62))return 7
if (hasUpgrade("p",53))return 3
if (hasUpgrade("p",52))return 2
return 1
}
},
12:{
name: "Point",
challengeDescription: "Points are pointed",
goal(){return new Decimal(100)},
rewardDescription(){return "You have completed this challenge "+player[this.layer].challenges[this.id]+"/"+this.completionLimit+" times, making previous challenge goal scale "+(layers[this.layer].challenges[this.id].effect)+"% slower."},
unlocked(){return hasUpgrade("p",61)||hasChallenge(this.layer,this.id)},
effect(){
if (!hasChallenge(this.layer,this.id)) return 0
if (player[this.layer].challenges[this.id]==1) return 50
if (player[this.layer].challenges[this.id]==2) return 60
if (player[this.layer].challenges[this.id]==3) return 70
},
completionLimit(){
let l=new Decimal(1)
if (hasUpgrade("p",84)) l=l.plus(1)
if (hasMilestone("p",3))l=l.plus(1)
return l
}
},
21:{
name: "Time Points",
challengeDescription: "You are stuck in all above challenges",
goal(){return new Decimal(308.25)},
rewardDescription(){return "Lower the first generator buyable cost base by 6"},
unlocked(){return hasUpgrade("p",91)||hasChallenge(this.layer,this.id)},
},
22:{
name: "Last Challenge",
challengeDescription: "Generator points do nothing",
goal(){return new Decimal(9999)},
rewardDescription(){return "Autoclick the clickable and reduce <b>2 Tree Trunks</b> by 1"},
unlocked(){return hasUpgrade("p",103)||hasChallenge(this.layer,this.id)},
}
},
buyables: {
rows: 99,
cols: 4,
11: {
cost() { return new Decimal(0)},
display() { return "Reset all upgrades and challenges, but get a boost. You have reset "+getBuyableAmount(this.layer,this.id)+" times.<br>"+(getBuyableAmount(this.layer,this.id).eq(6)?"You can't buy more than 6 boosts!":"You need all upgrades to reset.") },
canAfford() { return (player[this.layer].points.gte(this.cost)&&hasUpgrade(this.layer,74)&&hasUpgrade(this.layer,64))&&getBuyableAmount(this.layer,this.id).lt(6) },
buy() {
player[this.layer].points = player[this.layer].points.sub(this.cost)
setBuyableAmount(this.layer, this.id, getBuyableAmount(this.layer, this.id).add(1))
player[this.layer].points=new Decimal(0)
player[this.layer].upgrades=[]
if (hasMilestone(this.layer,1))player[this.layer].upgrades=[11,12,13,14,21,22,23,24]
if (hasMilestone(this.layer,3))player[this.layer].upgrades=[11,12,13,14,21,22,23,24,31,32,33,34,41,42,43,44,51,52,53,54,61,62,63,64]
if (!hasMilestone(this.layer,2)){
for (let c in layers[this.layer].challenges){
player[this.layer].challenges[c]=new Decimal(0)
}
}
},
unlocked(){return (hasUpgrade(this.layer,74)&&hasUpgrade(this.layer,64))||hasMilestone(this.layer,0)}
},
12: {
cost() { return new Decimal(1).times(new Decimal(hasChallenge(this.layer,21)?4:10).sub(hasUpgrade(this.layer,122)?2:0).pow(player.p.buyables[this.id])).div(hasUpgrade(this.layer,224)?(hasUpgrade("p",132)?player.p.gp.plus(1).pow(new Decimal(1).div(2)):hasUpgrade("p",101)?player.p.gp.plus(1).pow(new Decimal(1).div(3)):hasUpgrade("p",93)?player.p.gp.plus(1).pow(0.2):player.p.gp.plus(1).log10()):1)},
display() { return "Buy a generator for "+format(this.cost)+" points" },
canAfford() { return (player.points.gte(this.cost)&&hasMilestone(this.layer,5)) },
buy() {
if (!hasMilestone("p",13))player.points = player.points.sub(this.cost)
setBuyableAmount(this.layer, this.id, getBuyableAmount(this.layer, this.id).add(1))
player[this.layer].g=player[this.layer].g.plus(1)
},
unlocked(){return (hasMilestone(this.layer,5))}
},
13: {
cost() { return new Decimal(1).times(new Decimal(2).pow(player.p.buyables[this.id])).div(hasUpgrade(this.layer,224)?(hasUpgrade("p",132)?player.p.gp.plus(1).pow(new Decimal(1).div(2)):hasUpgrade("p",101)?player.p.gp.plus(1).pow(new Decimal(1).div(3)):hasUpgrade("p",93)?player.p.gp.plus(1).pow(0.2):player.p.gp.plus(1).log10()):1)},
display() { return "Buy a generator for "+format(this.cost)+" prestige points" },
canAfford() { return (player.p.points.gte(this.cost)&&hasUpgrade("p",82)) },
buy() {
if (!hasMilestone("p",13))player.p.points = player.p.points.sub(this.cost)
setBuyableAmount(this.layer, this.id, getBuyableAmount(this.layer, this.id).add(1))
player[this.layer].g=player[this.layer].g.plus(1)
},
unlocked(){return (hasUpgrade(this.layer,82))}
},
14: {
cost() { return new Decimal(900).mul(new Decimal(1.01).pow(getBuyableAmount(this.layer,this.id))).round().div(hasUpgrade(this.layer,234)?getBuyableAmount(this.layer,23).pow(0.3).plus(1):1)},
display() { return "Buy a generator for "+format(this.cost)+" Infinity points" },
canAfford() { return (player.i.points.gte(this.cost)&&hasUpgrade("p",232)) },
buy() {
if (!hasMilestone("p",13))player.i.points = player.i.points.sub(this.cost).round()
setBuyableAmount(this.layer, this.id, getBuyableAmount(this.layer, this.id).add(1))
player[this.layer].g=player[this.layer].g.plus(1)
},
unlocked(){return (hasUpgrade(this.layer,232))}
},
21: {
cost() { return new Decimal(20).plus(getBuyableAmount(this.layer, this.id).pow(new Decimal(2).sub(new Decimal(hasUpgrade(this.layer,221)?0.9:hasUpgrade(this.layer,214)?0.6:0.3).times(hasUpgrade(this.layer,212)?(new Decimal(1).sub(new Decimal(0.75).pow(getBuyableAmount(this.layer,22)))):0))))},
display() { return "Reset your generators for +1 pointy point! Cost: "+format(this.cost)+" Generators" },
canAfford() { return (player.p.g.gte(this.cost)&&hasUpgrade("p",104)) },
buy() {
if (!hasMilestone("i",1))player.p.g = new Decimal(0)
setBuyableAmount(this.layer, this.id, getBuyableAmount(this.layer, this.id).add(1))
if (!hasMilestone("i",1))setBuyableAmount(this.layer,12, new Decimal(0))
if (!hasMilestone("i",1))setBuyableAmount(this.layer,13, new Decimal(0))
if (!hasMilestone("i",1))player.p.gp=new Decimal(0)
},
unlocked(){return (hasUpgrade(this.layer,104))}
},
22: {
cost() { return new Decimal(8).plus(getBuyableAmount(this.layer,this.id))},
display() { return "Gain a pointy prestige point. Cost: "+format(this.cost)+" Pointy Points" },
canAfford() { return (getBuyableAmount(this.layer,21).gte(this.cost)&&(hasMilestone("i",5))) },
buy() {
if (!hasUpgrade(this.layer,233))setBuyableAmount(this.layer,21, getBuyableAmount(this.layer,21).sub(this.cost))
setBuyableAmount(this.layer, this.id, getBuyableAmount(this.layer, this.id).add(1))
},
unlocked(){return (hasMilestone("i",5))}
},
23: {
cost() { return new Decimal(124).plus(getBuyableAmount(this.layer,this.id).times(2).pow(2))},
display() { return "Gain a booster. Cost: "+format(this.cost)+" Pointy Points" },
canAfford() { return (getBuyableAmount(this.layer,21).gte(this.cost)&&(hasMilestone("i",5))) },
buy() {
if (!hasMilestone(this.layer,15))setBuyableAmount(this.layer,21, getBuyableAmount(this.layer,21).sub(this.cost))
setBuyableAmount(this.layer, this.id, getBuyableAmount(this.layer, this.id).add(1))
if (!hasMilestone(this.layer,15)){
if (!hasMilestone(this.layer,12)){player.p.upgrades=player.p.upgrades.filter((x)=>{return (x<200||x>230)})
if (hasMilestone(this.layer,11)){player.p.upgrades.push(215);player.p.upgrades.push(225);player.p.upgrades.push(223);player.p.upgrades.push(222)}}
setBuyableAmount("p",21,new Decimal(0))
setBuyableAmount("p",22,new Decimal(0))
if (!hasUpgrade("p",233)){
setBuyableAmount("p",12,new Decimal(0))
setBuyableAmount("p",13,new Decimal(0))
setBuyableAmount("p",14,new Decimal(0))
player.p.g = new Decimal(0)}
player.p.gp=new Decimal(0)}
},
unlocked(){return (hasUpgrade("p",225)||getBuyableAmount("p",23).gt(0))}
},
31: {
cost() { return new Decimal(1e93).times(new Decimal(1.5).pow(getBuyableAmount(this.layer,this.id))).times(new Decimal(1.1).pow(getBuyableAmount(this.layer,this.id).pow(2)))},
effect(){return new Decimal(2).plus(layers.p.buyables[33].effect).pow(getBuyableAmount(this.layer,this.id).plus(layers.p.buyables[51].effect))},
display() { return "Double point gain. \nCurrently: x"+format(this.effect)+"\nCost: "+format(this.cost)+" Prestige points" },
canAfford() { return (player.p.points.gte(this.cost)&&(hasMilestone("p",13))) },
buy() {
player.p.points=player.p.points.sub(this.cost)
setBuyableAmount(this.layer, this.id, getBuyableAmount(this.layer, this.id).add(1))
},
unlocked(){return (hasMilestone("p",13))}
},
32: {
cost() { return new Decimal(1e95).times(new Decimal(2).pow(getBuyableAmount(this.layer,this.id))).times(new Decimal(1.01).pow(getBuyableAmount(this.layer,this.id).pow(2)))},
display() { return "Double prestige point gain. \nCurrently: x"+format(new Decimal(2).plus(layers.p.buyables[33].effect).pow(getBuyableAmount(this.layer,this.id)))+"\nCost: "+format(this.cost)+" Prestige points" },
canAfford() { return (player.p.points.gte(this.cost)&&(hasMilestone("p",13))) },
buy() {
player.p.points=player.p.points.sub(this.cost)
setBuyableAmount(this.layer, this.id, getBuyableAmount(this.layer, this.id).add(1))
},
unlocked(){return (hasMilestone("p",13)&&getBuyableAmount(this.layer,31).gte(5))}
},
33: {
cost() { return new Decimal(1e100).times(new Decimal(10).pow(getBuyableAmount(this.layer,this.id))).times(new Decimal(1.01).pow(getBuyableAmount(this.layer,this.id).pow(2)))},
effect(){return new Decimal(0.01).mul(getBuyableAmount(this.layer,this.id)).times(layers.p.buyables[43].effect)},
display() { return "Add 0.01 to the previous 2 buyable bases. \nCurrently: +"+format(this.effect)+"\nCost: "+format(this.cost)+" Prestige points" },
canAfford() { return (player.p.points.gte(this.cost)&&(hasMilestone("p",13))) },
buy() {
player.p.points=player.p.points.sub(this.cost)
setBuyableAmount(this.layer, this.id, getBuyableAmount(this.layer, this.id).add(1))
},
unlocked(){return (hasMilestone("p",13)&&(getBuyableAmount(this.layer,this.id).gt(0)||player.p.points.gte(1e100)))}
},
41: {
cost() { return new Decimal(1e110).times(new Decimal(10).pow(getBuyableAmount(this.layer,this.id))).times(new Decimal(10).pow(getBuyableAmount(this.layer,this.id).pow(2)))},
effect(){return new Decimal(0.01).mul(getBuyableAmount(this.layer,this.id).plus(layers.p.buyables[51].effect))},
display() { return "Add 0.01 to the booster effect base. \nCurrently: +"+format(this.effect)+"\nCost: "+format(this.cost)+" Prestige points" },
canAfford() { return (player.p.points.gte(this.cost)&&(hasMilestone("p",13))) },
buy() {
player.p.points=player.p.points.sub(this.cost)
setBuyableAmount(this.layer, this.id, getBuyableAmount(this.layer, this.id).add(1))
},
unlocked(){return (hasMilestone("p",13)&&(getBuyableAmount(this.layer,this.id).gt(0)||player.p.points.gte(1e110)))}
},
42: {
cost() { let c = new Decimal(1e270).times(new Decimal(2).pow(getBuyableAmount(this.layer,this.id))).times(new Decimal(1.01).pow(getBuyableAmount(this.layer,this.id).pow(2)))
return c
},
effect(){
let f= new Decimal(1.001).pow(getBuyableAmount(this.layer,this.id))
if (f.gte(1.1))f=f.pow(0.8).times(new Decimal(1.1).pow(0.2))
if (f.gte(1.35))f=f.pow(0.5).times(new Decimal(1.35).pow(0.5))
if (f.gte(3))f=new Decimal(3)
return f
},
display() { return "Raise point gain to the 1.001 \nCurrently: ^"+format(this.effect)+(this.effect.eq(3)?"(hardcapped)":"")+"\nCost: "+format(this.cost)+" Prestige points" },
canAfford() { return (player.p.points.gte(this.cost)&&(hasMilestone("p",13)))&&this.effect.lt(3) },
buy() {
player.p.points=player.p.points.sub(this.cost)
setBuyableAmount(this.layer, this.id, getBuyableAmount(this.layer, this.id).add(1))
},
unlocked(){return (hasMilestone("p",13)&&(getBuyableAmount(this.layer,this.id).gt(0)||player.p.points.gte(1e270)))}
},
43: {
cost() { return new Decimal("1e375").times(new Decimal(10).pow(getBuyableAmount(this.layer,this.id))).times(new Decimal(10).pow(getBuyableAmount(this.layer,this.id).pow(2)))},
effect(){return new Decimal(0.01).mul(getBuyableAmount(this.layer,this.id)).plus(1)},
display() { return "Multiply the above buyable effect. \nCurrently: *"+format(this.effect)+"\nCost: "+format(this.cost)+" Prestige points" },
canAfford() { return (player.p.points.gte(this.cost)&&(hasMilestone("p",13))) },
buy() {
player.p.points=player.p.points.sub(this.cost)
setBuyableAmount(this.layer, this.id, getBuyableAmount(this.layer, this.id).add(1))
},
unlocked(){return (hasMilestone("p",13)&&(getBuyableAmount(this.layer,this.id).gt(0)||player.p.points.gte("1e375")))}
},
51: {
cost() { return new Decimal("1e1740").times(new Decimal(10).pow(getBuyableAmount(this.layer,this.id))).times(new Decimal(1e10).pow(getBuyableAmount(this.layer,this.id).pow(2)))},
effect(){return getBuyableAmount(this.layer,this.id).pow(0.55)},
display() { return "Add free levels to the above 2 buyables \nCurrently: "+format(this.effect)+"\nCost: "+format(this.cost)+" Prestige points" },
canAfford() { return (player.p.points.gte(this.cost)&&(hasMilestone("p",13))) },
buy() {
player.p.points=player.p.points.sub(this.cost)
setBuyableAmount(this.layer, this.id, getBuyableAmount(this.layer, this.id).add(1))
},
unlocked(){return (hasMilestone("p",15)&&(getBuyableAmount(this.layer,this.id).gt(0)||player.p.points.gte("1e1700")))}
},
},
milestones: {
0: {
requirementDisplay: "1 reset",
effectDisplay: "Add 0.01 to base point gain and prestige requirement, and <b>1</b> doesn't reset upgrades",
done() { return getBuyableAmount("p",11).gte(1) },
unlocked(){return layers.p.activeSubtab!="Pointy points"}
},
1: {
requirementDisplay: "2 resets",
effectDisplay: "<div><b>2</b> and <b>3</b> don't reset upgrades, and start with the first 8 upgrades on reset</div>",
done() { return getBuyableAmount("p",11).gte(2) },
unlocked(){return hasMilestone(this.layer,this.id-1)&&layers.p.activeSubtab!="Pointy points"}
},
2: {
requirementDisplay: "3 resets",
effectDisplay: "<div><b>4</b> doesn't reset upgrades, and permanently fix the bug where you can't buy upgrades when you have 1 prestige point</div>",
done() { return getBuyableAmount("p",11).gte(3) },
unlocked(){return hasMilestone(this.layer,this.id-1)&&layers.p.activeSubtab!="Pointy points"}
},
3: {
requirementDisplay: "4 resets",
effectDisplay: "Don't reset challenges, add 1 to <b>Point</b> maximum completions, and start with 24 upgrades",
done() { return getBuyableAmount("p",11).gte(4) },
unlocked(){return hasMilestone(this.layer,this.id-1)&&layers.p.activeSubtab!="Pointy points"}
},
4: {
requirementDisplay: "5 resets",
effectDisplay: "Each useless upgrade adds 0.1 to base point gain",
done() { return getBuyableAmount("p",11).gte(5) },
unlocked(){return hasMilestone(this.layer,this.id-1)&&layers.p.activeSubtab!="Pointy points"}
},
5: {
requirementDisplay: "6 resets",
effectDisplay: "Unlock something",
done() { return getBuyableAmount("p",11).gte(6) },
unlocked(){return hasMilestone(this.layer,this.id-1)&&layers.p.activeSubtab!="Pointy points"}
},
6: {
requirementDisplay: "1 pointy point",
effectDisplay: "Unlock the upgrade tree",
done() { return getBuyableAmount("p",21).gte(1) },
unlocked(){return hasMilestone(this.layer,this.id-1)&&(hasUpgrade(this.layer,104)||player.i.unlocked)&&layers.p.activeSubtab!="Pointy points"}
},
7: {
requirementDisplay: "7 pointy points",
effectDisplay: "You can now buy both first and second row upgrade tree upgrades",
done() { return getBuyableAmount("p",21).gte(7) },
unlocked(){return hasMilestone(this.layer,this.id-1)&&(hasUpgrade(this.layer,111)||player.i.unlocked)&&layers.p.activeSubtab!="Pointy points"}
},
8: {
requirementDisplay: "8 pointy points",
effectDisplay: "Unlock another layer",
done() { return getBuyableAmount("p",21).gte(8) },
unlocked(){return hasMilestone(this.layer,this.id-1)&&(hasUpgrade(this.layer,141)||hasUpgrade(this.layer,143)||hasUpgrade(this.layer,142)||player.i.unlocked)&&layers.p.activeSubtab!="Pointy points"}
},
11: {
requirementDisplay: "3 boosters",
effectDisplay: "Keep automation on booster reset",
done() { return getBuyableAmount("p",23).gte(3) },
unlocked(){return (getBuyableAmount("p",23).gt(0)||hasMilestone(this.layer,this.id))}
},
12: {
requirementDisplay: "5 boosters",
effectDisplay: "Keep all prestige upgrades on booster reset and buy max infinity points",
done() { return getBuyableAmount("p",23).gte(5) },
unlocked(){return (getBuyableAmount("p",23).gt(0)||hasMilestone(this.layer,this.id))}
},
13: {
requirementDisplay: "10 boosters",
effectDisplay: "Generators cost nothing",
done() { return getBuyableAmount("p",23).gte(10) },
unlocked(){return (getBuyableAmount("p",23).gt(0)||hasMilestone(this.layer,this.id))}
},
14: {
requirementDisplay: "15 boosters",
effectDisplay: "Auto buy the first 3 buyables and buy max pointy prestige points",
done() { return getBuyableAmount("p",23).gte(15) },
unlocked(){return (getBuyableAmount("p",41).gt(0)||hasMilestone(this.layer,this.id))}
},
15: {
requirementDisplay: "20 boosters",
effectDisplay: "Boosters reset nothing and auto booster",
done() { return getBuyableAmount("p",23).gte(16) },
unlocked(){return (getBuyableAmount("p",41).gt(0)||hasMilestone(this.layer,this.id))}
},
},
passiveGeneration(){return (hasUpgrade("i",11)?1:0)},
update(diff){
if (hasMilestone(this.layer,2)&&!hasUpgrade(this.layer,54)){
player[this.layer].upgrades.push(54)
}
if (hasMilestone(this.layer,1)&&!hasUpgrade(this.layer,11)&&!hasMilestone(this.layer,3)){
player[this.layer].upgrades=[11,12,13,14,21,22,23,24]
}
if (hasMilestone(this.layer,3)&&!hasUpgrade(this.layer,31)){
player[this.layer].upgrades=[11,12,13,14,21,22,23,24,31,32,33,34,41,42,43,44,51,52,53,54,61,62,63,64]
}
if (hasMilestone(this.layer,5)){
player[this.layer].gp=player[this.layer].gp.plus(player.p.g.times(diff).times(player.p.geff))
}
let geff=new Decimal(1)
if (hasUpgrade("p",81)) geff=geff.plus(2)
if (hasUpgrade("p",102)) geff=geff.plus(hasChallenge("p",22)?player.p.gp.plus(1).log(10):player.p.gp.plus(1).log(10).plus(1).log(10))
if (hasUpgrade("p",83)) geff=geff.times(player.p.points.plus(1).log(10).plus(1))
if (hasUpgrade("p",94)) geff=geff.times(player.p.cmult)
if (hasUpgrade("p",104)) geff=geff.times(new Decimal(player.p.buyables[21]).plus(1))
if (hasUpgrade("p",143)) geff=geff.times(new Decimal(player.timePlayed).div(3600).max(1))
if (hasUpgrade("p",225)) geff=geff.pow(new Decimal(player.p.buyables[23]).div(10).mul(new Decimal(0.1).plus(layers.p.buyables[41].effect).times(10)).plus(1))
player.p.geff=geff
if (hasChallenge("p",22)&&(!hasUpgrade("p",141)||hasUpgrade("i",12)))player.p.cmult=player.p.cmult.plus(hasUpgrade("p",141)?1:0.01)
if (!hasUpgrade("p",111)) player.p.cmult=player.p.cmult.min(100)
if (hasMilestone(this.layer,14)){
if (layers.p.buyables[31].canAfford())layers.p.buyables[31].buy()
if (layers.p.buyables[32].canAfford())layers.p.buyables[32].buy()
if (layers.p.buyables[33].canAfford())layers.p.buyables[33].buy()
}
if (hasMilestone(this.layer,15)){
if (layers.p.buyables[23].canAfford())layers.p.buyables[23].buy()
}
},
subtabs: {
"Upgrades": {
display: `
<main-display />
<spacer />
<prestige-button display="" />
<spacer />
<spacer />
<upgrades />`
},
"Challenges": {
unlocked() { return hasUpgrade("p", 51) || hasMilestone("p", 0); },
display: `
<spacer />
<spacer />
<challenges />`
},
"Buyables and Milestones": {
unlocked(){return hasUpgrade("p",74)||hasMilestone("p",0)},
display: `
<spacer />
<spacer />
<row><buyable id="11" /></row>
<spacer />
<div v-if="hasMilestone('p', 0)">Your boosts are making the point challenge {{ getBuyableAmount('p', 11).plus(1) }}x less pointy</div>
<spacer />
<milestones />`
},
"Generators": {
unlocked(){return hasMilestone("p",5)||player.i.points.gte(1)},
display: `
<spacer />
<div>You have {{ format(player.p.gp) }} generator points, adding {{ format(hasUpgrade("p",132)?player.p.gp.plus(1).pow(new Decimal(1).div(2)):hasUpgrade("p",101)?player.p.gp.plus(1).pow(new Decimal(1).div(3)):hasUpgrade("p",93)?player.p.gp.plus(1).pow(0.2):player.p.gp.plus(1).log10()) }} to point gain</div>
<div>You have {{ format(player.p.g) }} generators, generating {{ format(player.p.g.times(player.p.geff)) }} generator points per second</div>
<div>Generator efficiency is {{ format(player.p.geff) }}</div>
<spacer />
<spacer />
<buyables :buyables="[12, 13, 14]" />
<row><clickable id="11" /></row>`
},
"Pointy Points": {
unlocked(){return hasUpgrade("p",104)||player.i.points.gte(1)},
display: `
<div style="color: red; font-size: 32px; font-family: Comic Sans MS">{{ format(player.p.buyables[21]) }} pointy points</div>
<div style="color: red; font-size: 32px; font-family: Comic Sans MS">My pointy points are multiplying generator efficiency by {{ format(new Decimal(player.p.buyables[21]).plus(1)) }}</div>
<spacer />
<spacer />
<row><buyable id="21" /></row>
<div v-if="hasMilestone('i', 5)" style="color: red; font-size: 32px; font-family: Comic Sans MS">I have {{ format(player.p.buyables[22]) }} pointy prestige points</div>
<row><buyable id="22" /></row>
<spacer />
<upgrades :upgrades="[211, 212, 213, 214, 215]" />
<upgrades :upgrades="[221, 222, 223, 224, 225]" />
<div v-if="hasMilestone('p', 225)" style="color: red; font-size: 32px; font-family: Comic Sans MS">I have {{ format(player.p.buyables[23]) }} pointy boosters!</div>
<row><buyable id="23" /></row>
<div v-if="hasMilestone('p', 225) || getBuyableAmount('p', 23).gt(0)" style="color: red; font-size: 32px; font-family: Comic Sans MS">My pointy boosters are raising generator efficiency to the ^{{ format(new Decimal(player.p.buyables[23]).div(10).mul(new Decimal(0.1).plus(layers.p.buyables[41].effect).times(10)).plus(1)) }}</div>
<spacer />
<spacer />
<div v-if="hasMilestone('p', 11)" style="font-size: 24px">Booster upgrades</div>
<upgrades :upgrades="[231, 232, 233, 234, 235]" />`
},
"Buyables": {
unlocked(){return hasMilestone("p",13)},
display: `
<buyables :buyables="[31, 32, 33]" />
<buyables :buyables="[41, 42, 43]" />`
}
}
}

2301
src/data/layers/demo.ts Normal file
View file

File diff suppressed because it is too large Load diff

120
src/data/mod.js
View file

@ -1,120 +0,0 @@
import { computed } from 'vue';
import { hasUpgrade, upgradeEffect, hasMilestone, inChallenge, getBuyableAmount } from '../util/features';
import { layers } from '../game/layers';
import player from '../game/player';
import Decimal from '../util/bignum';
// Import initial layers
import f from './layers/aca/f.js';
import c from './layers/aca/c.js';
import a from './layers/aca/a.js';
import demoLayer from './layers/demo.js';
import demoInfinityLayer from './layers/demo-infinity.js';
const g = {
id: "g",
symbol: "TH",
branches: ["c"],
color: '#6d3678',
shown: true,
canClick() {return player.points.gte(10)},
tooltip: "Thanos your points",
click() {
player.points = player.points.div(2);
console.log(this.layer);
}
};
const h = {
id: "h",
branches: ["g", () => ({ target: 'flatBoi', featureType: 'bar', endOffset: { x: -50 + 100 * layers.c.bars.flatBoi.progress.toNumber() } })],
tooltip() {return "Restore your points to {{ player.c.otherThingy }}"},
row: "side",
position: 3,
canClick() {return player.points.lt(player.c.otherThingy)},
click() {player.points = new Decimal(player.c.otherThingy)}
};
const spook = {
id: "spook",
row: 1,
layerShown: "ghost",
};
const main = {
id: 'main',
display: `
<div v-if="player.devSpeed === 0">Game Paused</div>
<div v-else-if="player.devSpeed && player.devSpeed !== 1">Dev Speed: {{ format(player.devSpeed) }}x</div>
<div v-if="player.offTime != undefined">Offline Time: {{ formatTime(player.offTime.remain) }}</div>
<div>
<span v-if="player.points.lt('1e1000')">You have </span>
<h2>{{ format(player.points) }}</h2>
<span v-if="player.points.lt('1e1e6')"> points</span>
</div>
<div v-if="Decimal.gt(pointGain, 0)">
({{ player.oompsMag != 0 ? format(player.oomps) + " OOM" + (player.oompsMag < 0 ? "^OOM" : player.oompsMag > 1 ? "^" + player.oompsMag : "") + "s" : formatSmall(pointGain) }}/sec)
</div>
<spacer />
<tree :append="true" />`,
name: "Tree"
};
export const getInitialLayers = () => [ main, f, c, a, g, h, spook, demoLayer, demoInfinityLayer ];
export function getStartingData() {
return {
points: new Decimal(10),
}
}
export const hasWon = computed(() => {
return false;
});
export const pointGain = computed(() => {
if(!hasUpgrade("c", 11))
return new Decimal(0);
let gain = new Decimal(3.19)
if (hasUpgrade("c", 12)) gain = gain.times(upgradeEffect("c", 12))
if (hasMilestone("p",0))gain=gain.plus(0.01)
if (hasMilestone("p",4)){
if (hasUpgrade("p",12))gain=gain.plus(0.1)
if (hasUpgrade("p",13))gain=gain.plus(0.1)
if (hasUpgrade("p",14))gain=gain.plus(0.1)
if (hasUpgrade("p",21))gain=gain.plus(0.1)
if (hasUpgrade("p",22))gain=gain.plus(0.1)
if (hasUpgrade("p",23))gain=gain.plus(0.1)
if (hasUpgrade("p",31))gain=gain.plus(0.1)
if (hasUpgrade("p",32))gain=gain.plus(0.1)
if (hasUpgrade("p",33))gain=gain.plus(0.1)
}
if (hasUpgrade("p",11))gain=gain.plus(hasUpgrade("p",34)?(new Decimal(1).plus(layers.p.upgrades[34].effect)):1)
if (hasUpgrade("p",12))gain=gain.times(hasUpgrade("p",34)?(new Decimal(1).plus(layers.p.upgrades[34].effect)):1)
if (hasUpgrade("p",13))gain=gain.pow(hasUpgrade("p",34)?(new Decimal(1).plus(layers.p.upgrades[34].effect)):1)
if (hasUpgrade("p",14))gain=gain.tetrate(hasUpgrade("p",34)?(new Decimal(1).plus(layers.p.upgrades[34].effect)):1)
if (hasUpgrade("p",71)) gain=gain.plus(1.1)
if (hasUpgrade("p",72)) gain=gain.times(1.1)
if (hasUpgrade("p",73)) gain=gain.pow(1.1)
if (hasUpgrade("p",74)) gain=gain.tetrate(1.1)
if (hasMilestone("p",5)&&!inChallenge("p",22)){
let asdf = (hasUpgrade("p",132)?player.p.gp.plus(1).pow(new Decimal(1).div(2)):hasUpgrade("p",101)?player.p.gp.plus(1).pow(new Decimal(1).div(3)):hasUpgrade("p",93)?player.p.gp.plus(1).pow(0.2):player.p.gp.plus(1).log10())
gain=gain.plus(asdf)
if (hasUpgrade("p",213))gain=gain.mul(asdf.plus(1))
}
if (hasUpgrade("p",104)) gain=gain.times(player.p.points.plus(1).pow(0.5))
if (hasUpgrade("p",142))gain=gain.times(5)
if (player.i.unlocked)gain=gain.times(player.i.points.plus(1).pow(hasUpgrade("p",235)?6.9420:1))
if (inChallenge("p",11)||inChallenge("p",21))gain=new Decimal(10).pow(gain.log10().pow(0.75))
if (inChallenge("p",12)||inChallenge("p",21))gain=gain.pow(new Decimal(1).sub(new Decimal(1).div(getBuyableAmount("p",11).plus(1))))
if (hasUpgrade("p",211))gain=gain.times(getBuyableAmount("p",21).plus(1))
if (hasMilestone("p",13))gain=gain.times(layers.p.buyables[31].effect)
if (hasMilestone("p",13))gain=gain.pow(layers.p.buyables[42].effect)
return gain;
});
/* eslint-disable-next-line no-unused-vars */
export function update(delta) {
}
/* eslint-disable-next-line no-unused-vars */
export function fixOldSave(oldVersion, playerData) {
}

187
src/data/mod.ts Normal file
View file

@ -0,0 +1,187 @@
import { layers } from "@/game/layers";
import player from "@/game/player";
import { RawLayer } from "@/typings/layer";
import { PlayerData } from "@/typings/player";
import Decimal from "@/util/bignum";
import {
getBuyableAmount,
hasMilestone,
hasUpgrade,
inChallenge,
upgradeEffect
} from "@/util/features";
import { computed } from "vue";
import a from "./layers/aca/a";
import c from "./layers/aca/c";
import f from "./layers/aca/f";
import demoLayer from "./layers/demo";
import demoInfinityLayer from "./layers/demo-infinity";
// Import initial layers
const g = {
id: "g",
symbol: "TH",
branches: ["c"],
color: "#6d3678",
shown: true,
canClick() {
return player.points.gte(10);
},
tooltip: "Thanos your points",
click() {
player.points = player.points.div(2);
console.log(this.layer);
}
} as RawLayer;
const h = {
id: "h",
branches: [
"g",
() => ({
target: "flatBoi",
featureType: "bar",
endOffset: {
x:
-50 +
100 *
(layers.c.bars!.data.flatBoi.progress instanceof Number
? (layers.c.bars!.data.flatBoi.progress as number)
: (layers.c.bars!.data.flatBoi.progress as Decimal).toNumber())
}
})
],
tooltip() {
return "Restore your points to {{ player.c.otherThingy }}";
},
row: "side",
position: 3,
canClick() {
return player.points.lt(player.layers.c.otherThingy as Decimal);
},
click() {
player.points = new Decimal(player.layers.c.otherThingy as Decimal);
}
} as RawLayer;
const spook = {
id: "spook",
row: 1,
layerShown: "ghost"
} as RawLayer;
const main = {
id: "main",
display: `
<div v-if="player.devSpeed === 0">Game Paused</div>
<div v-else-if="player.devSpeed && player.devSpeed !== 1">Dev Speed: {{ format(player.devSpeed) }}x</div>
<div v-if="player.offTime != undefined">Offline Time: {{ formatTime(player.offTime.remain) }}</div>
<div>
<span v-if="player.points.lt('1e1000')">You have </span>
<h2>{{ format(player.points) }}</h2>
<span v-if="player.points.lt('1e1e6')"> points</span>
</div>
<div v-if="Decimal.gt(pointGain, 0)">
({{ player.oompsMag != 0 ? format(player.oomps) + " OOM" + (player.oompsMag < 0 ? "^OOM" : player.oompsMag > 1 ? "^" + player.oompsMag : "") + "s" : formatSmall(pointGain) }}/sec)
</div>
<spacer />
<tree :append="true" />`,
name: "Tree"
} as RawLayer;
export const getInitialLayers = (
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
playerData: Partial<PlayerData>
): Array<RawLayer> => [main, f, c, a, g, h, spook, demoLayer, demoInfinityLayer];
export function getStartingData(): Record<string, unknown> {
return {
points: new Decimal(10)
};
}
export const hasWon = computed(() => {
return false;
});
export const pointGain = computed(() => {
if (!hasUpgrade("c", 11)) return new Decimal(0);
let gain = new Decimal(3.19);
if (hasUpgrade("c", 12)) gain = gain.times(upgradeEffect("c", 12) as Decimal);
if (hasMilestone("p", 0)) gain = gain.plus(0.01);
if (hasMilestone("p", 4)) {
if (hasUpgrade("p", 12)) gain = gain.plus(0.1);
if (hasUpgrade("p", 13)) gain = gain.plus(0.1);
if (hasUpgrade("p", 14)) gain = gain.plus(0.1);
if (hasUpgrade("p", 21)) gain = gain.plus(0.1);
if (hasUpgrade("p", 22)) gain = gain.plus(0.1);
if (hasUpgrade("p", 23)) gain = gain.plus(0.1);
if (hasUpgrade("p", 31)) gain = gain.plus(0.1);
if (hasUpgrade("p", 32)) gain = gain.plus(0.1);
if (hasUpgrade("p", 33)) gain = gain.plus(0.1);
}
if (hasUpgrade("p", 11))
gain = gain.plus(
hasUpgrade("p", 34)
? new Decimal(1).plus(layers.p.upgrades!.data[34].effect as Decimal)
: 1
);
if (hasUpgrade("p", 12))
gain = gain.times(
hasUpgrade("p", 34)
? new Decimal(1).plus(layers.p.upgrades!.data[34].effect as Decimal)
: 1
);
if (hasUpgrade("p", 13))
gain = gain.pow(
hasUpgrade("p", 34)
? new Decimal(1).plus(layers.p.upgrades!.data[34].effect as Decimal)
: 1
);
if (hasUpgrade("p", 14))
gain = gain.tetrate(
hasUpgrade("p", 34)
? new Decimal(1).plus(layers.p.upgrades!.data[34].effect as Decimal).toNumber()
: 1
);
if (hasUpgrade("p", 71)) gain = gain.plus(1.1);
if (hasUpgrade("p", 72)) gain = gain.times(1.1);
if (hasUpgrade("p", 73)) gain = gain.pow(1.1);
if (hasUpgrade("p", 74)) gain = gain.tetrate(1.1);
if (hasMilestone("p", 5) && !inChallenge("p", 22)) {
const asdf = hasUpgrade("p", 132)
? (player.layers.p.gp as Decimal).plus(1).pow(new Decimal(1).div(2))
: hasUpgrade("p", 101)
? (player.layers.p.gp as Decimal).plus(1).pow(new Decimal(1).div(3))
: hasUpgrade("p", 93)
? (player.layers.p.gp as Decimal).plus(1).pow(0.2)
: (player.layers.p.gp as Decimal).plus(1).log10();
gain = gain.plus(asdf);
if (hasUpgrade("p", 213)) gain = gain.mul(asdf.plus(1));
}
if (hasUpgrade("p", 104)) gain = gain.times(player.layers.p.points.plus(1).pow(0.5));
if (hasUpgrade("p", 142)) gain = gain.times(5);
if (player.layers.i.unlocked)
gain = gain.times(player.layers.i.points.plus(1).pow(hasUpgrade("p", 235) ? 6.942 : 1));
if (inChallenge("p", 11) || inChallenge("p", 21))
gain = new Decimal(10).pow(gain.log10().pow(0.75));
if (inChallenge("p", 12) || inChallenge("p", 21))
gain = gain.pow(new Decimal(1).sub(new Decimal(1).div(getBuyableAmount("p", 11)!.plus(1))));
if (hasUpgrade("p", 211)) gain = gain.times(getBuyableAmount("p", 21)!.plus(1));
if (hasMilestone("p", 13)) gain = gain.times(layers.p.buyables!.data[31].effect as Decimal);
if (hasMilestone("p", 13)) gain = gain.pow(layers.p.buyables!.data[42].effect as Decimal);
return gain;
});
/* eslint-disable @typescript-eslint/no-unused-vars */
// eslint-disable-next-line @typescript-eslint/no-empty-function
export function update(delta: Decimal): void {}
/* eslint-enable @typescript-eslint/no-unused-vars */
/* eslint-disable @typescript-eslint/no-unused-vars */
export function fixOldSave(
oldVersion: string | undefined,
playerData: Partial<PlayerData>
// eslint-disable-next-line @typescript-eslint/no-empty-function
): void {}
/* eslint-enable @typescript-eslint/no-unused-vars */

52
src/data/themes.js
View file

@ -1,52 +0,0 @@
const defaultTheme = {
variables: {
"--background": "#0f0f0f",
"--background-tooltip": "rgba(0, 0, 0, 0.75)",
"--secondary-background": "#0f0f0f",
"--color": "#dfdfdf",
"--points": "#ffffff",
"--locked": "#bf8f8f",
"--bought": "#77bf5f",
"--link": "#02f2f2",
"--separator": "#dfdfdf",
"--border-radius": "25%",
"--danger": "rgb(220, 53, 69)",
"--modal-border": "solid 2px var(--color)",
"--feature-margin": "0px",
},
stackedInfoboxes: false,
floatingTabs: true
};
export default {
classic: defaultTheme,
paper: {
...defaultTheme,
variables: {
...defaultTheme.variables,
"--background": "#2a323d",
"--secondary-background": "#333c4a",
"--locked": "#3a3e45",
"--bought": "#5C8A58",
"--separator": "#333c4a",
"--border-radius": "4px",
"--modal-border": "",
"--feature-margin": "5px",
},
stackedInfoboxes: true,
floatingTabs: false
},
aqua: {
...defaultTheme,
variables: {
...defaultTheme.variables,
"--background": "#001f3f",
"--background-tooltip": "rgba(0, 15, 31, 0.75)",
"--secondary-background": "#001f3f",
"--color": "#bfdfff",
"--points": "#dfefff",
"--locked": "#c4a7b3",
"--separator": "#bfdfff"
}
}
};

60
src/data/themes.ts Normal file
View file

@ -0,0 +1,60 @@
import { Theme } from "@/typings/theme";
const defaultTheme: Theme = {
variables: {
"--background": "#0f0f0f",
"--background-tooltip": "rgba(0, 0, 0, 0.75)",
"--secondary-background": "#0f0f0f",
"--color": "#dfdfdf",
"--points": "#ffffff",
"--locked": "#bf8f8f",
"--bought": "#77bf5f",
"--link": "#02f2f2",
"--separator": "#dfdfdf",
"--border-radius": "25%",
"--danger": "rgb(220, 53, 69)",
"--modal-border": "solid 2px var(--color)",
"--feature-margin": "0px"
},
stackedInfoboxes: false,
floatingTabs: true
};
export enum Themes {
Classic = "classic",
Paper = "paper",
Aqua = "aqua"
}
export default {
classic: defaultTheme,
paper: {
...defaultTheme,
variables: {
...defaultTheme.variables,
"--background": "#2a323d",
"--secondary-background": "#333c4a",
"--locked": "#3a3e45",
"--bought": "#5C8A58",
"--separator": "#333c4a",
"--border-radius": "4px",
"--modal-border": "",
"--feature-margin": "5px"
},
stackedInfoboxes: true,
floatingTabs: false
} as Theme,
aqua: {
...defaultTheme,
variables: {
...defaultTheme.variables,
"--background": "#001f3f",
"--background-tooltip": "rgba(0, 15, 31, 0.75)",
"--secondary-background": "#001f3f",
"--color": "#bfdfff",
"--points": "#dfefff",
"--locked": "#c4a7b3",
"--separator": "#bfdfff"
}
} as Theme
} as Record<Themes, Theme>;

30
src/game/enums.ts Normal file
View file

@ -0,0 +1,30 @@
export enum LayerType {
Static = "static",
Normal = "normal",
Custom = "custom",
None = "none"
}
export enum Direction {
Up = "Up",
Down = "Down",
Left = "Left",
Right = "Right",
Default = "Up"
}
export enum MilestoneDisplay {
All = "all",
Last = "last",
Configurable = "configurable",
Incomplete = "incomplete",
None = "none"
}
export enum ImportingStatus {
NotImporting = "NOT_IMPORTING",
Importing = "IMPORTING",
Failed = "FAILED",
WrongID = "WRONG_ID",
Force = "FORCE"
}

156
src/game/gameLoop.js
View file

@ -1,156 +0,0 @@
import { update as modUpdate, hasWon, pointGain } from '../data/mod';
import Decimal from '../util/bignum';
import modInfo from '../data/modInfo.json';
import { layers } from './layers';
import player from './player';
function updatePopups(/* diff */) {
// TODO
}
function updateParticles(/* diff */) {
// TODO
}
function updateOOMPS(diff) {
if (player.points != undefined) {
player.oompsMag = 0;
if (player.points.lte(new Decimal(1e100))) {
player.lastPoints = player.points;
return;
}
let curr = player.points;
let prev = player.lastPoints || new Decimal(0);
player.lastPoints = curr;
if (curr.gt(prev)) {
if (curr.gte("10^^8")) {
curr = curr.slog(1e10);
prev = prev.slog(1e10);
player.oomps = curr.sub(prev).div(diff);
player.oompsMag = -1;
} else {
while (curr.div(prev).log(10).div(diff).gte("100") && player.oompsMag <= 5 && prev.gt(0)) {
curr = curr.log(10);
prev = prev.log(10);
player.oomps = curr.sub(prev).div(diff);
player.oompsMag++;
}
}
}
}
}
function updateLayers(diff) {
// Update each active layer
const activeLayers = Object.keys(layers).filter(layer => !layers[layer].deactivated);
activeLayers.forEach(layer => {
if (player[layer].resetTime != undefined) {
player[layer].resetTime = player[layer].resetTime.add(diff);
}
if (layers[layer].passiveGeneration) {
player[layer].points =
player[layer].points.add(Decimal.times(layers[layer].resetGain, layers[layer].passiveGeneration).times(diff));
}
layers[layer].update?.(diff);
});
// Automate each active layer
activeLayers.forEach(layer => {
if (layers[layer].autoReset && layers[layer].canReset) {
layers[layer].reset();
}
layers[layer].automate?.();
if (layers[layer].upgrades && layers[layer].autoUpgrade) {
Object.values(layers[layer].upgrades).forEach(upgrade => upgrade.buy());
}
});
// Check each active layer for newly unlocked achievements or milestones
activeLayers.forEach(layer => {
if (layers[layer].milestones) {
Object.values(layers[layer].milestones).forEach(milestone => {
if (milestone.unlocked !== false && !milestone.earned && milestone.done) {
player[layer].milestones.push(milestone.id);
milestone.onComplete?.();
// TODO popup notification
player[layer].lastMilestone = milestone.id;
}
});
}
if (layers[layer].achievements) {
Object.values(layers[layer].achievements).forEach(achievement => {
if (achievement.unlocked !== false && !achievement.earned && achievement.done) {
player[layer].achievements.push(achievement.id);
achievement.onComplete?.();
// TODO popup notification
}
});
}
});
}
function update() {
let now = Date.now();
let diff = (now - player.time) / 1e3;
player.time = now;
let trueDiff = diff;
// Always update UI
updatePopups(trueDiff);
updateParticles(trueDiff);
player.lastTenTicks.push(trueDiff);
if (player.lastTenTicks.length > 10) {
player.lastTenTicks = player.lastTenTicks.slice(1);
}
// Stop here if the game is paused on the win screen
if (hasWon.value && !player.keepGoing) {
return;
}
// Stop here if the player had a NaN value
if (player.hasNaN) {
return;
}
diff = new Decimal(diff).max(0);
// Add offline time if any
if (player.offTime != undefined) {
if (player.offTime.remain > modInfo.offlineLimit * 3600) {
player.offTime.remain = modInfo.offlineLimit * 3600;
}
if (player.offTime.remain > 0 && player.devSpeed !== 0) {
let offlineDiff = Math.max(player.offTime.remain / 10, diff);
player.offTime.remain -= offlineDiff;
diff = diff.add(offlineDiff);
} else if (player.devSpeed === 0) {
player.offTime.remain += diff.toNumber();
}
if (!player.offlineProd || player.offTime.remain <= 0) {
player.offTime = undefined;
}
}
// Cap at max tick length
diff = Decimal.min(diff, modInfo.maxTickLength);
// Apply dev speed
if (player.devSpeed != undefined) {
diff = diff.times(player.devSpeed);
}
// Update
if (diff.eq(0)) {
return;
}
player.timePlayed = player.timePlayed.add(diff);
if (player.points != undefined) {
player.points = player.points.add(Decimal.times(pointGain.value, diff));
}
modUpdate(diff);
updateOOMPS(trueDiff);
updateLayers(diff);
}
export default function startGameLoop() {
setInterval(update, 50);
}

171
src/game/gameLoop.ts Normal file
View file

@ -0,0 +1,171 @@
import { hasWon, pointGain, update as modUpdate } from "@/data/mod";
import modInfo from "@/data/modInfo.json";
import Decimal, { DecimalSource } from "@/util/bignum";
import { layers } from "./layers";
import player from "./player";
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
function updatePopups(diff: number) {
// TODO
}
/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
function updateParticles(diff: number) {
// TODO
}
function updateOOMPS(diff: DecimalSource) {
if (player.points != undefined) {
player.oompsMag = 0;
if (player.points.lte(new Decimal(1e100))) {
player.lastPoints = player.points;
return;
}
let curr = player.points;
let prev = (player.lastPoints as Decimal) || new Decimal(0);
player.lastPoints = curr;
if (curr.gt(prev)) {
if (curr.gte("10^^8")) {
curr = curr.slog(1e10);
prev = prev.slog(1e10);
player.oomps = curr.sub(prev).div(diff);
player.oompsMag = -1;
} else {
while (
curr
.div(prev)
.log(10)
.div(diff)
.gte("100") &&
player.oompsMag <= 5 &&
prev.gt(0)
) {
curr = curr.log(10);
prev = prev.log(10);
player.oomps = curr.sub(prev).div(diff);
player.oompsMag++;
}
}
}
}
}
function updateLayers(diff: DecimalSource) {
// Update each active layer
const activeLayers = Object.keys(layers).filter(layer => !layers[layer].deactivated);
activeLayers.forEach(layer => {
if (player.layers[layer].resetTime != undefined) {
player.layers[layer].resetTime = player.layers[layer].resetTime.add(diff);
}
if (layers[layer].passiveGeneration) {
const passiveGeneration =
typeof layers[layer].passiveGeneration == "boolean"
? 1
: (layers[layer].passiveGeneration as DecimalSource);
player.layers[layer].points = player.layers[layer].points.add(
Decimal.times(layers[layer].resetGain, passiveGeneration).times(diff)
);
}
layers[layer].update?.(diff);
});
// Automate each active layer
activeLayers.forEach(layer => {
if (layers[layer].autoReset && layers[layer].canReset) {
layers[layer].reset();
}
layers[layer].automate?.();
if (layers[layer].upgrades && layers[layer].autoUpgrade) {
Object.values(layers[layer].upgrades!.data).forEach(upgrade => upgrade.buy());
}
});
// Check each active layer for newly unlocked achievements or milestones
activeLayers.forEach(layer => {
if (layers[layer].milestones) {
Object.values(layers[layer].milestones!.data).forEach(milestone => {
if (milestone.unlocked !== false && !milestone.earned && milestone.done) {
player.layers[layer].milestones.push(milestone.id);
milestone.onComplete?.();
// TODO popup notification
player.layers[layer].lastMilestone = milestone.id;
}
});
}
if (layers[layer].achievements) {
Object.values(layers[layer].achievements!.data).forEach(achievement => {
if (achievement.unlocked !== false && !achievement.earned && achievement.done) {
player.layers[layer].achievements.push(achievement.id);
achievement.onComplete?.();
// TODO popup notification
}
});
}
});
}
function update() {
const now = Date.now();
let diff: DecimalSource = (now - player.time) / 1e3;
player.time = now;
const trueDiff = diff;
// Always update UI
updatePopups(trueDiff);
updateParticles(trueDiff);
player.lastTenTicks.push(trueDiff);
if (player.lastTenTicks.length > 10) {
player.lastTenTicks = player.lastTenTicks.slice(1);
}
// Stop here if the game is paused on the win screen
if (hasWon.value && !player.keepGoing) {
return;
}
// Stop here if the player had a NaN value
if (player.hasNaN) {
return;
}
diff = new Decimal(diff).max(0);
// Add offline time if any
if (player.offlineTime != undefined) {
if (player.offlineTime.gt(modInfo.offlineLimit * 3600)) {
player.offlineTime = new Decimal(modInfo.offlineLimit * 3600);
}
if (player.offlineTime.gt(0) && player.devSpeed !== 0) {
const offlineDiff = Decimal.max(player.offlineTime.div(10), diff);
player.offlineTime = player.offlineTime.sub(offlineDiff);
diff = diff.add(offlineDiff);
} else if (player.devSpeed === 0) {
player.offlineTime = player.offlineTime.add(diff);
}
if (!player.offlineProd || player.offlineTime.lt(0)) {
player.offlineTime = null;
}
}
// Cap at max tick length
diff = Decimal.min(diff, modInfo.maxTickLength);
// Apply dev speed
if (player.devSpeed != undefined) {
diff = diff.times(player.devSpeed);
}
// Update
if (diff.eq(0)) {
return;
}
player.timePlayed = player.timePlayed.add(diff);
if (player.points != undefined) {
player.points = player.points.add(Decimal.times(pointGain.value, diff));
}
modUpdate(diff);
updateOOMPS(trueDiff);
updateLayers(diff);
}
export default function startGameLoop(): void {
setInterval(update, 50);
}

452
src/game/layers.js
View file

@ -1,452 +0,0 @@
import clone from 'lodash.clonedeep';
import { isFunction, isPlainObject } from '../util/common';
import { createProxy, createGridProxy } from '../util/proxies';
import playerProxy from './player';
import Decimal from '../util/bignum';
import { noCache, getStartingBuyables, getStartingClickables, getStartingChallenges, defaultLayerProperties } from '../util/layers';
import { applyPlayerData } from '../util/save';
import { isRef } from 'vue';
export const layers = {};
export const hotkeys = [];
window.layers = layers;
export function addLayer(layer, player = null) {
player = player || playerProxy;
// Check for required properties
if (!('id' in layer)) {
console.error(`Cannot add layer without a "id" property!`, layer);
return;
}
if (layer.type === "static" || layer.type === "normal") {
const missingProperty = [ 'baseAmount', 'requires' ].find(prop => !(prop in layer));
if (missingProperty) {
console.error(`Cannot add layer without a "${missingProperty}" property!`, layer);
return;
}
}
// Clone object to prevent modifying the original
layer = clone(layer);
player[layer.id] = applyPlayerData({
upgrades: [],
achievements: [],
milestones: [],
infoboxes: {},
buyables: getStartingBuyables(layer),
clickables: getStartingClickables(layer),
challenges: getStartingChallenges(layer),
grids: {},
...layer.startData?.()
}, player[layer.id]);
// Set default property values
layer = Object.assign({}, defaultLayerProperties, layer);
layer.layer = layer.id;
if (layer.type === "static" && (layer.base == undefined || Decimal.lte(layer.base, 1))) {
layer.base = 2;
}
// Process each feature
for (let property of uncachedProperties) {
if (layer[property] && !isRef(layer.property)) {
layer[property].forceCached = false;
}
}
for (let property of gridProperties) {
if (layer[property]) {
setRowCol(layer[property]);
}
}
for (let property of featureProperties) {
if (layer[property]) {
setupFeature(layer.id, layer[property]);
}
}
if (layer.upgrades) {
for (let id in layer.upgrades) {
if (isPlainObject(layer.upgrades[id])) {
layer.upgrades[id].bought = function() {
return !layer.deactivated && playerProxy[layer.id].upgrades.some(upgrade => upgrade == id);
}
setDefault(layer.upgrades[id], 'canAfford', function() {
if (this.currencyInternalName) {
let name = this.currencyInternalName;
if (this.currencyLocation) {
return !(this.currencyLocation[name].lt(this.cost));
} else if (this.currencyLayer) {
let lr = this.currencyLayer;
return !(playerProxy[lr][name].lt(this.cost));
} else {
return !(playerProxy[name].lt(this.cost));
}
} else {
return !(playerProxy[this.layer].points.lt(this.cost))
}
});
setDefault(layer.upgrades[id], 'pay', function() {
if (this.bought || !this.canAfford) {
return;
}
if (this.currencyInternalName) {
let name = this.currencyInternalName
if (this.currencyLocation) {
if (this.currencyLocation[name].lt(this.cost)) {
return;
}
this.currencyLocation[name] = this.currencyLocation[name].sub(this.cost);
} else if (this.currencyLayer) {
let lr = this.currencyLayer;
if (playerProxy[lr][name].lt(this.cost)) {
return;
}
playerProxy[lr][name] = playerProxy[lr][name].sub(this.cost);
} else {
if (playerProxy[name].lt(this.cost)) {
return;
}
playerProxy[name] = playerProxy[name].sub(this.cost);
}
} else {
if (playerProxy[this.layer].points.lt(this.cost)) {
return;
}
playerProxy[this.layer].points = playerProxy[this.layer].points.sub(this.cost);
}
}, false);
setDefault(layer.upgrades[id], 'buy', function() {
if (this.bought || !this.canAfford) {
return;
}
this.pay();
playerProxy[this.layer].upgrades.push(this.id);
this.onPurchase?.();
}, false);
}
}
}
if (layer.achievements) {
for (let id in layer.achievements) {
if (isPlainObject(layer.achievements[id])) {
layer.achievements[id].earned = function() {
return !layer.deactivated && playerProxy[layer.id].achievements.some(achievement => achievement == id);
}
setDefault(layer.achievements[id], 'onComplete', null, false);
}
}
}
if (layer.challenges) {
layer.activeChallenge = function() {
return Object.values(this.challenges).find(challenge => challenge.active);
}
for (let id in layer.challenges) {
if (isPlainObject(layer.challenges[id])) {
layer.challenges[id].shown = function() {
return this.unlocked !== false && (playerProxy.hideChallenges === false || !this.maxed);
}
layer.challenges[id].completed = function() {
return !layer.deactivated && playerProxy[layer.id].challenges[id]?.gt(0);
}
layer.challenges[id].completions = function() {
return playerProxy[layer.id].challenges[id];
}
layer.challenges[id].maxed = function() {
return !layer.deactivated && Decimal.gte(playerProxy[layer.id].challenges[id], this.completionLimit);
}
layer.challenges[id].active = function() {
return !layer.deactivated && playerProxy[layer.id].activeChallenge === id;
}
layer.challenges[id].toggle = noCache(function() {
let exiting = playerProxy[layer.id].activeChallenge === id;
if (exiting) {
if (this.canComplete && !this.maxed) {
let completions = this.canComplete;
if (completions === true) {
completions = 1;
}
playerProxy[layer.id].challenges[id] =
Decimal.min(playerProxy[layer.id].challenges[id].add(completions), this.completionLimit);
this.onComplete?.();
}
playerProxy[layer.id].activeChallenge = null;
this.onExit?.();
layer.reset(true);
} else if (!exiting && this.canStart) {
layer.reset(true);
playerProxy[layer.id].activeChallenge = id;
this.onEnter?.();
}
});
setDefault(layer.challenges[id], 'onComplete', null, false);
setDefault(layer.challenges[id], 'onEnter', null, false);
setDefault(layer.challenges[id], 'onExit', null, false);
setDefault(layer.challenges[id], 'canStart', true);
setDefault(layer.challenges[id], 'completionLimit', new Decimal(1));
setDefault(layer.challenges[id], 'mark', function() {
return Decimal.gt(this.completionLimit, 1) && this.maxed;
});
setDefault(layer.challenges[id], 'canComplete', function() {
if (!this.active) {
return false;
}
if (this.currencyInternalName) {
let name = this.currencyInternalName;
if (this.currencyLocation) {
return !(this.currencyLocation[name].lt(this.goal));
} else if (this.currencyLayer) {
let lr = this.currencyLayer;
return !(playerProxy[lr][name].lt(this.goal));
} else {
return !(playerProxy[name].lt(this.goal));
}
} else {
return !(playerProxy.points.lt(this.goal));
}
});
}
}
}
if (layer.buyables) {
setDefault(layer.buyables, 'respec', null, false);
setDefault(layer.buyables, 'reset', function() {
playerProxy[this.layer].buyables = getStartingBuyables(layer);
}, false);
for (let id in layer.buyables) {
if (isPlainObject(layer.buyables[id])) {
layer.buyables[id].amount = function() {
return playerProxy[layer.id].buyables[id];
}
layer.buyables[id].amountSet = function(amount) {
playerProxy[layer.id].buyables[id] = amount;
}
layer.buyables[id].canBuy = function() {
return !layer.deactivated && this.unlocked !== false && this.canAfford !== false &&
Decimal.lt(playerProxy[layer.id].buyables[id], this.purchaseLimit);
}
setDefault(layer.buyables[id], 'purchaseLimit', new Decimal(Infinity));
setDefault(layer.buyables[id], 'sellOne', null, false);
setDefault(layer.buyables[id], 'sellAll', null, false);
if (layer.buyables[id].cost != undefined) {
setDefault(layer.buyables[id], 'buy', function() {
if (this.canBuy) {
playerProxy[this.layer].points = playerProxy[this.layer].points.sub(this.cost());
this.amount = this.amount.add(1);
}
}, false);
}
}
}
}
if (layer.clickables) {
layer.clickables.layer = layer.id;
setDefault(layer.clickables, 'masterButtonClick', null, false);
if (layer.clickables.masterButtonDisplay != undefined) {
setDefault(layer.clickables, 'showMaster', true);
}
for (let id in layer.clickables) {
if (isPlainObject(layer.clickables[id])) {
layer.clickables[id].state = function() {
return playerProxy[layer.id].clickables[id];
}
layer.clickables[id].stateSet = function(state) {
playerProxy[layer.id].clickables[id] = state;
}
setDefault(layer.clickables[id], 'click', null, false);
setDefault(layer.clickables[id], 'hold', null, false);
}
}
}
if (layer.milestones) {
for (let id in layer.milestones) {
if (isPlainObject(layer.milestones[id])) {
layer.milestones[id].earned = function() {
return !layer.deactivated && playerProxy[layer.id].milestones.some(milestone => milestone == id);
}
layer.milestones[id].shown = function() {
if (!this.unlocked) {
return false;
}
switch (playerProxy.msDisplay) {
default:
case "all":
return true;
case "last":
return this.optionsDisplay || !this.earned ||
playerProxy[this.layer].milestones[playerProxy[this.layer].milestones.length - 1] === this.id;
case "configurable":
return this.optionsDisplay || !this.earned;
case "incomplete":
return !this.earned;
case "none":
return false;
}
}
}
}
}
if (layer.grids) {
for (let id in layer.grids) {
if (isPlainObject(layer.grids[id])) {
setDefault(player[layer.id].grids, id, {});
layer.grids[id].getData = function(cell) {
if (playerProxy[layer.id].grids[id][cell] != undefined) {
return playerProxy[layer.id].grids[id][cell];
}
if (isFunction(this.getStartData)) {
return this.getStartData(cell);
}
return this.getStartData;
}
layer.grids[id].dataSet = function(cell, data) {
playerProxy[layer.id].grids[id][cell] = data;
}
setDefault(layer.grids[id], 'getUnlocked', true, false);
setDefault(layer.grids[id], 'getCanClick', true, false);
setDefault(layer.grids[id], 'getStartData', "", false);
setDefault(layer.grids[id], 'getStyle', null, false);
setDefault(layer.grids[id], 'click', null, false);
setDefault(layer.grids[id], 'hold', null, false);
setDefault(layer.grids[id], 'getTitle', null, false);
setDefault(layer.grids[id], 'getDisplay', null, false);
layer.grids[id] = createGridProxy(layer.grids[id]);
}
}
}
if (layer.subtabs) {
layer.activeSubtab = function() {
if (layer.subtabs[playerProxy.subtabs[layer.id].mainTabs] &&
layer.subtabs[playerProxy.subtabs[layer.id].mainTabs].unlocked !== false) {
return layer.subtabs[playerProxy.subtabs[layer.id].mainTabs];
}
// Default to first unlocked tab
return Object.values(layer.subtabs).find(subtab => subtab.unlocked !== false);
}
setDefault(player, 'subtabs', {});
setDefault(player.subtabs, layer.id, {});
setDefault(player.subtabs[layer.id], 'mainTabs', Object.keys(layer.subtabs)[0]);
for (let id in layer.subtabs) {
if (isPlainObject(layer.subtabs[id])) {
layer.subtabs[id].active = function() {
return playerProxy.subtabs[this.layer].mainTabs === this.id;
}
}
}
}
if (layer.microtabs) {
setDefault(player, 'subtabs', {});
setDefault(player.subtabs, layer.id, {});
for (let family in layer.microtabs) {
layer.microtabs[family].activeMicrotab = function() {
if (this[playerProxy.subtabs[this.layer][family]] && this[playerProxy.subtabs[this.layer][family]].unlocked !== false) {
return this[playerProxy.subtabs[this.layer][family]];
}
// Default to first unlocked tab
return this[Object.keys(this).find(microtab => microtab !== 'activeMicrotab' && this[microtab].unlocked !== false)];
}
setDefault(player.subtabs[layer.id], family, Object.keys(layer.microtabs[family]).find(tab => tab !== 'activeMicrotab'));
layer.microtabs[family].layer = layer.id;
layer.microtabs[family].family = family;
for (let id in layer.microtabs[family]) {
if (isPlainObject(layer.microtabs[family][id])) {
layer.microtabs[family][id].layer = layer.id;
layer.microtabs[family][id].family = family;
layer.microtabs[family][id].id = id;
layer.microtabs[family][id].active = function() {
return playerProxy.subtabs[this.layer][this.family] === this.id;
}
}
}
}
}
if (layer.hotkeys) {
for (let id in layer.hotkeys) {
if (isPlainObject(layer.hotkeys[id])) {
setDefault(layer.hotkeys[id], 'press', null, false);
setDefault(layer.hotkeys[id], 'unlocked', function() {
return layer.unlocked;
});
}
}
}
// Create layer proxy
layer = createProxy(layer);
// Register layer
layers[layer.id] = layer;
// Register hotkeys
if (layer.hotkeys) {
for (let id in layer.hotkeys) {
hotkeys[layer.hotkeys[id].key] = layer.hotkeys[id];
}
}
}
export function removeLayer(layer) {
// Un-set hotkeys
if (layers[layer].hotkeys) {
for (let id in layers[layer].hotkeys) {
delete hotkeys[id];
}
}
delete layers[layer];
}
export function reloadLayer(layer) {
removeLayer(layer.id);
// Re-create layer
addLayer(layer);
}
const uncachedProperties = [ 'startData', 'click', 'update', 'reset', 'hardReset' ];
const gridProperties = [ 'upgrades', 'achievements', 'challenges', 'buyables', 'clickables' ];
const featureProperties = [ 'upgrades', 'achievements', 'challenges', 'buyables', 'clickables', 'milestones', 'bars',
'infoboxes', 'grids', 'hotkeys', 'subtabs' ];
function setRowCol(features) {
if (features.rows && features.cols) {
return
}
let maxRow = 0;
let maxCol = 0;
for (let id in features) {
if (!isNaN(id)) {
if (Math.floor(id / 10) > maxRow) {
maxRow = Math.floor(id / 10);
}
if (id % 10 > maxCol) {
maxCol = id % 10;
}
}
}
features.rows = maxRow;
features.cols = maxCol;
}
function setupFeature(layer, features) {
features.layer = layer;
for (let id in features) {
const feature = features[id];
if (isPlainObject(feature)) {
feature.id = id;
feature.layer = layer;
if (feature.unlocked == undefined) {
feature.unlocked = true;
}
}
}
}
function setDefault(object, key, value, forceCached) {
if (object[key] == undefined && value != undefined) {
object[key] = value;
}
if (object[key] != undefined && isFunction(object[key]) && forceCached != undefined) {
object[key].forceCached = forceCached;
}
}

604
src/game/layers.ts Normal file
View file

@ -0,0 +1,604 @@
import { CacheableFunction } from "@/typings/cacheableFunction";
import { Achievement } from "@/typings/features/achievement";
import { Buyable } from "@/typings/features/buyable";
import { Challenge } from "@/typings/features/challenge";
import { Clickable } from "@/typings/features/clickable";
import {
Feature,
Features,
GridFeatures,
RawFeature,
RawFeatures,
RawGridFeatures
} from "@/typings/features/feature";
import { Grid } from "@/typings/features/grid";
import { Hotkey } from "@/typings/features/hotkey";
import { Milestone } from "@/typings/features/milestone";
import { Microtab, Subtab } from "@/typings/features/subtab";
import { Upgrade } from "@/typings/features/upgrade";
import { Layer, RawLayer } from "@/typings/layer";
import { PlayerData } from "@/typings/player";
import { State } from "@/typings/state";
import Decimal, { DecimalSource } from "@/util/bignum";
import { isFunction } from "@/util/common";
import {
defaultLayerProperties,
getStartingBuyables,
getStartingChallenges,
getStartingClickables,
noCache
} from "@/util/layers";
import { createGridProxy, createLayerProxy } from "@/util/proxies";
import { applyPlayerData } from "@/util/save";
import clone from "lodash.clonedeep";
import { isRef } from "vue";
import { default as playerProxy } from "./player";
export const layers: Record<string, Readonly<Layer>> = {};
export const hotkeys: Hotkey[] = [];
window.layers = layers;
export function addLayer(layer: RawLayer, player?: Partial<PlayerData>): void {
player = player || playerProxy;
// Check for required properties
if (!("id" in layer)) {
console.error(`Cannot add layer without a "id" property!`, layer);
return;
}
if (layer.type === "static" || layer.type === "normal") {
const missingProperty = ["baseAmount", "requires"].find(prop => !(prop in layer));
if (missingProperty) {
console.error(`Cannot add layer without a "${missingProperty}" property!`, layer);
return;
}
}
// Clone object to prevent modifying the original
layer = clone(layer);
setDefault(player, "layers", {});
player.layers![layer.id] = applyPlayerData(
{
points: new Decimal(0),
unlocked: false,
resetTime: new Decimal(0),
upgrades: [],
achievements: [],
milestones: [],
infoboxes: {},
buyables: getStartingBuyables(layer.buyables?.data),
clickables: getStartingClickables(layer.clickables?.data),
challenges: getStartingChallenges(layer.challenges?.data),
grids: {},
confirmRespecBuyables: false,
...(layer.startData?.() || {})
},
player.layers![layer.id]
);
// Set default property values
layer = Object.assign({}, defaultLayerProperties, layer);
layer.layer = layer.id;
if (layer.type === "static" && layer.base == undefined) {
layer.base = 2;
}
// Process each feature
const uncachedProperties = ["startData", "click", "update", "reset", "hardReset"];
for (const property of uncachedProperties) {
if (layer[property] && !isRef(layer.property) && isFunction(layer[property])) {
(layer[property] as CacheableFunction).forceCached = false;
}
}
if (layer.upgrades) {
setupFeatures<
RawGridFeatures<GridFeatures<Upgrade>, Upgrade>,
GridFeatures<Upgrade>,
Upgrade
>(layer.id, layer.upgrades!);
setRowCol(layer.upgrades);
for (const id in layer.upgrades.data) {
layer.upgrades.data[id].bought = function() {
return (
!layers[this.layer].deactivated &&
playerProxy.layers[this.layer].upgrades.some(
(upgrade: string | number) => upgrade == id
)
);
};
setDefault(layer.upgrades.data[id], "canAfford", function() {
if (this.currencyInternalName) {
const name = this.currencyInternalName;
if (this.currencyLocation) {
return !Decimal.lt(this.currencyLocation[name], this.cost);
} else if (this.currencyLayer) {
return !Decimal.lt(
playerProxy.layers[this.currencyLayer][name] as DecimalSource,
this.cost
);
} else {
return !Decimal.lt(playerProxy[name] as DecimalSource, this.cost);
}
} else {
return !playerProxy.layers[this.layer].points.lt(this.cost);
}
});
setDefault(
layer.upgrades.data[id],
"pay",
function() {
if (this.bought || !this.canAfford) {
return;
}
if (this.currencyInternalName) {
const name = this.currencyInternalName;
if (this.currencyLocation) {
if (Decimal.lt(this.currencyLocation[name], this.cost)) {
return;
}
this.currencyLocation[name] = Decimal.sub(
this.currencyLocation[name],
this.cost
);
} else if (this.currencyLayer) {
const lr = this.currencyLayer;
if (
Decimal.lt(playerProxy.layers[lr][name] as DecimalSource, this.cost)
) {
return;
}
playerProxy.layers[lr][name] = Decimal.sub(
playerProxy.layers[lr][name] as DecimalSource,
this.cost
);
} else {
if (Decimal.lt(playerProxy[name] as DecimalSource, this.cost)) {
return;
}
playerProxy[name] = Decimal.sub(
playerProxy[name] as DecimalSource,
this.cost
);
}
} else {
if (playerProxy.layers[this.layer].points.lt(this.cost)) {
return;
}
playerProxy.layers[this.layer].points = playerProxy.layers[
this.layer
].points.sub(this.cost);
}
},
false
);
setDefault(
layer.upgrades.data[id],
"buy",
function() {
if (this.bought || !this.canAfford) {
return;
}
this.pay();
playerProxy.layers[this.layer].upgrades.push(this.id);
this.onPurchase?.();
},
false
);
setDefault(layer.upgrades.data[id], "onPurchase", undefined, false);
}
}
if (layer.achievements) {
setupFeatures<
RawGridFeatures<GridFeatures<Achievement>, Achievement>,
GridFeatures<Achievement>,
Achievement
>(layer.id, layer.achievements!);
setRowCol(layer.achievements);
for (const id in layer.achievements.data) {
layer.achievements.data[id].earned = function() {
return (
!layers[this.layer].deactivated &&
playerProxy.layers[this.layer].achievements.some(
(achievement: string | number) => achievement == id
)
);
};
setDefault(layer.achievements.data[id], "onComplete", undefined, false);
}
}
if (layer.challenges) {
setupFeatures<
RawGridFeatures<GridFeatures<Challenge>, Challenge>,
GridFeatures<Challenge>,
Challenge
>(layer.id, layer.challenges);
setRowCol(layer.challenges);
layer.activeChallenge = function() {
return Object.values(this.challenges!.data).find(
(challenge: Challenge) => challenge.active
);
};
for (const id in layer.challenges.data) {
layer.challenges.data[id].shown = function() {
return (
this.unlocked !== false && (playerProxy.hideChallenges === false || !this.maxed)
);
};
layer.challenges.data[id].completed = function() {
return (
!layers[this.layer].deactivated &&
playerProxy.layers[this.layer].challenges[id]?.gt(0)
);
};
layer.challenges.data[id].completions = function() {
return playerProxy.layers[this.layer].challenges[id];
};
layer.challenges.data[id].maxed = function() {
return (
!layers[this.layer].deactivated &&
Decimal.gte(playerProxy.layers[this.layer].challenges[id], this.completionLimit)
);
};
layer.challenges.data[id].active = function() {
return (
!layers[this.layer].deactivated &&
playerProxy.layers[this.layer].activeChallenge === id
);
};
layer.challenges.data[id].toggle = noCache(function(this: Challenge) {
const exiting = playerProxy.layers[this.layer].activeChallenge === id;
if (exiting) {
if (this.canComplete && !this.maxed) {
let completions: boolean | DecimalSource = this.canComplete;
if (completions === true) {
completions = 1;
}
playerProxy.layers[this.layer].challenges[id] = Decimal.min(
playerProxy.layers[this.layer].challenges[id].add(completions),
this.completionLimit
);
this.onComplete?.();
}
playerProxy.layers[this.layer].activeChallenge = null;
this.onExit?.();
layers[this.layer].reset(true);
} else if (!exiting && this.canStart) {
layers[this.layer].reset(true);
playerProxy.layers[this.layer].activeChallenge = id;
this.onEnter?.();
}
});
setDefault(layer.challenges.data[id], "onComplete", undefined, false);
setDefault(layer.challenges.data[id], "onEnter", undefined, false);
setDefault(layer.challenges.data[id], "onExit", undefined, false);
setDefault(layer.challenges.data[id], "canStart", true);
setDefault(layer.challenges.data[id], "completionLimit", new Decimal(1));
setDefault(layer.challenges.data[id], "mark", function() {
return Decimal.gt(this.completionLimit, 1) && this.maxed;
});
setDefault(layer.challenges.data[id], "canComplete", function() {
if (!this.active) {
return false;
}
if (this.currencyInternalName) {
const name = this.currencyInternalName;
if (this.currencyLocation) {
return !Decimal.lt(this.currencyLocation[name], this.goal);
} else if (this.currencyLayer) {
const lr = this.currencyLayer;
return !Decimal.lt(
playerProxy.layers[lr][name] as DecimalSource,
this.goal
);
} else {
return !Decimal.lt(playerProxy[name] as DecimalSource, this.goal);
}
} else {
return !playerProxy.points.lt(this.goal);
}
});
}
}
if (layer.buyables) {
setupFeatures<
RawGridFeatures<GridFeatures<Buyable>, Buyable>,
GridFeatures<Buyable>,
Buyable
>(layer.id, layer.buyables);
setRowCol(layer.buyables);
setDefault(layer.buyables, "respec", undefined, false);
setDefault(
layer.buyables,
"reset",
function(this: NonNullable<Layer["buyables"]>) {
playerProxy.layers[this.layer].buyables = getStartingBuyables(layer.buyables?.data);
},
false
);
for (const id in layer.buyables.data) {
layer.buyables.data[id].amount = function() {
return playerProxy.layers[this.layer].buyables[id];
};
layer.buyables.data[id].amountSet = function(amount: Decimal) {
playerProxy.layers[this.layer].buyables[id] = amount;
};
layer.buyables.data[id].canBuy = function() {
return (
!layers[this.layer].deactivated &&
this.unlocked !== false &&
this.canAfford !== false &&
Decimal.lt(playerProxy.layers[this.layer].buyables[id], this.purchaseLimit)
);
};
setDefault(layer.buyables.data[id], "purchaseLimit", new Decimal(Infinity));
setDefault(layer.buyables.data[id], "sellOne", undefined, false);
setDefault(layer.buyables.data[id], "sellAll", undefined, false);
if (layer.buyables.data[id].cost != undefined) {
setDefault(
layer.buyables.data[id],
"buy",
function() {
if (this.canBuy) {
playerProxy.layers[this.layer].points = playerProxy.layers[
this.layer
].points.sub(this.cost!);
this.amount = this.amount.add(1);
}
},
false
);
}
}
}
if (layer.clickables) {
setupFeatures<
RawGridFeatures<GridFeatures<Clickable>, Clickable>,
GridFeatures<Clickable>,
Clickable
>(layer.id, layer.clickables);
setRowCol(layer.clickables);
setDefault(layer.clickables, "masterButtonClick", undefined, false);
if (layer.clickables.masterButtonDisplay != undefined) {
setDefault(layer.clickables, "showMasterButton", true);
}
for (const id in layer.clickables.data) {
layer.clickables.data[id].state = function() {
return playerProxy.layers[this.layer].clickables[id];
};
layer.clickables.data[id].stateSet = function(state: State) {
playerProxy.layers[this.layer].clickables[id] = state;
};
setDefault(layer.clickables.data[id], "canClick", true);
setDefault(layer.clickables.data[id], "click", undefined, false);
setDefault(layer.clickables.data[id], "hold", undefined, false);
}
}
if (layer.milestones) {
setupFeatures<RawFeatures<Features<Milestone>, Milestone>, Features<Milestone>, Milestone>(
layer.id,
layer.milestones
);
for (const id in layer.milestones.data) {
layer.milestones.data[id].earned = function() {
return (
!layer.deactivated &&
playerProxy.layers[this.layer].milestones.some(
(milestone: string | number) => milestone == id
)
);
};
layer.milestones.data[id].shown = function() {
if (!this.unlocked) {
return false;
}
switch (playerProxy.msDisplay) {
default:
case "all":
return true;
case "last":
return (
this.optionsDisplay ||
!this.earned ||
playerProxy.layers[this.layer].milestones[
playerProxy.layers[this.layer].milestones.length - 1
] === this.id
);
case "configurable":
return this.optionsDisplay || !this.earned;
case "incomplete":
return !this.earned;
case "none":
return false;
}
};
setDefault(layer.milestones.data[id], "done", false);
}
}
if (layer.grids) {
setupFeatures<RawFeatures<Features<Grid>, Grid>, Features<Grid>, Grid>(
layer.id,
layer.grids
);
for (const id in layer.grids.data) {
setDefault(player.layers![layer.id].grids, id, {});
layer.grids.data[id].getData = function(cell): State {
if (playerProxy.layers[this.layer].grids[id][cell] != undefined) {
return playerProxy.layers[this.layer].grids[id][cell];
}
if (isFunction(this.getStartData)) {
return (this.getStartData as (this: Grid, cell: string | number) => State)(
cell
);
}
return this.getStartData;
};
layer.grids.data[id].setData = function(cell, data) {
playerProxy.layers[this.layer].grids[id][cell] = data;
};
setDefault(layer.grids.data[id], "getUnlocked", true, false);
setDefault(layer.grids.data[id], "getCanClick", true, false);
setDefault(layer.grids.data[id], "getStartData", "", false);
setDefault(layer.grids.data[id], "getStyle", undefined, false);
setDefault(layer.grids.data[id], "click", undefined, false);
setDefault(layer.grids.data[id], "hold", undefined, false);
setDefault(layer.grids.data[id], "getTitle", undefined, false);
layer.grids.data[id] = createGridProxy(layer.grids.data[id]) as Grid;
}
}
if (layer.subtabs) {
layer.activeSubtab = function() {
if (
layers[this.layer].subtabs![playerProxy.subtabs[this.layer].mainTabs!] &&
layers[this.layer].subtabs![playerProxy.subtabs[this.layer].mainTabs!].unlocked !==
false
) {
return layers[this.layer].subtabs![playerProxy.subtabs[this.layer].mainTabs!];
}
// Default to first unlocked tab
return Object.values(layers[this.layer].subtabs!).find(
(subtab: Subtab) => subtab.unlocked !== false
);
};
setDefault(player, "subtabs", {});
setDefault(player.subtabs!, layer.id, {});
setDefault(player.subtabs![layer.id], "mainTabs", Object.keys(layer.subtabs)[0]);
for (const id in layer.subtabs) {
layer.subtabs[id].active = function() {
return playerProxy.subtabs[this.layer].mainTabs === this.id;
};
}
}
if (layer.microtabs) {
setDefault(player, "subtabs", {});
setDefault(player.subtabs!, layer.id, {});
for (const family in layer.microtabs) {
if (Object.keys(layer.microtabs[family]).length === 0) {
console.warn(
"Cannot create microtab family with 0 tabs",
layer.id,
family,
layer.microtabs[family]
);
continue;
}
layer.microtabs[family].activeMicrotab = function() {
if (
this.data[playerProxy.subtabs[this.layer as string][family]] &&
this.data[playerProxy.subtabs[this.layer as string][family]].unlocked !== false
) {
return this[playerProxy.subtabs[this.layer as string][family]];
}
// Default to first unlocked tab
const firstUnlocked: string | undefined = Object.keys(this).find(
microtab =>
microtab !== "activeMicrotab" && this.data[microtab].unlocked !== false
);
return firstUnlocked != undefined ? this[firstUnlocked] : undefined;
};
setDefault(
player.subtabs![layer.id],
family,
Object.keys(layer.microtabs[family]).find(tab => tab !== "activeMicrotab")!
);
layer.microtabs[family].layer = layer.id;
layer.microtabs[family].family = family;
for (const id in layer.microtabs[family].data) {
const microtab: RawFeature<Microtab> = layer.microtabs[family].data[id];
microtab.layer = layer.id;
microtab.family = family;
microtab.id = id;
microtab.active = function() {
return playerProxy.subtabs[this.layer][this.family] === this.id;
};
}
}
}
if (layer.hotkeys) {
for (const id in layer.hotkeys) {
setDefault(layer.hotkeys[id], "press", undefined, false);
setDefault(layer.hotkeys[id], "unlocked", function() {
return layers[this.layer].unlocked;
});
}
}
// Create layer proxy
layer = createLayerProxy(layer) as Layer;
// Register layer
layers[layer.id] = layer as Layer;
// Register hotkeys
if (layers[layer.id].hotkeys) {
for (const hotkey of layers[layer.id].hotkeys!) {
hotkeys.push(hotkey);
}
}
}
export function removeLayer(layer: string): void {
// Un-set hotkeys
if (layers[layer].hotkeys) {
for (const hotkey of Object.values(layers[layer].hotkeys!)) {
const index = hotkeys.indexOf(hotkey);
if (index >= 0) {
hotkeys.splice(index, 1);
}
}
}
delete layers[layer];
}
export function reloadLayer(layer: Layer): void {
removeLayer(layer.id);
// Re-create layer
addLayer(layer);
}
function setRowCol<T extends GridFeatures<S>, S extends Feature>(features: RawGridFeatures<T, S>) {
if (features.rows && features.cols) {
return;
}
let maxRow = 0;
let maxCol = 0;
for (const id in features) {
const index = Number(id);
if (!isNaN(index)) {
if (Math.floor(index / 10) > maxRow) {
maxRow = Math.floor(index / 10);
}
if (index % 10 > maxCol) {
maxCol = index % 10;
}
}
}
features.rows = maxRow;
features.cols = maxCol;
}
function setupFeatures<T extends RawFeatures<R, S>, R extends Features<S>, S extends Feature>(
layer: string,
features: T
) {
features.layer = layer;
for (const id in features.data) {
const feature = features.data[id];
(feature as Feature).id = id;
(feature as Feature).layer = layer;
if (feature.unlocked == undefined) {
(feature as Feature).unlocked = true;
}
}
}
function setDefault<T, K extends keyof T>(object: T, key: K, value: T[K], forceCached?: boolean) {
if (object[key] == undefined && value != undefined) {
object[key] = value;
}
if (object[key] != undefined && isFunction(object[key]) && forceCached != undefined) {
Object.assign(object[key], { forceCached });
}
}

52
src/game/player.js
View file

@ -1,52 +0,0 @@
import { reactive } from 'vue';
import { isPlainObject } from '../util/common';
import Decimal from '../util/bignum';
const state = reactive({});
const playerHandler = {
get(target, key) {
if (key === '__state' || key === '__path') {
return target[key];
}
if (target.__state[key] == undefined) {
return;
}
if (isPlainObject(target.__state[key]) && !(target.__state[key] instanceof Decimal)) {
if (target.__state[key] !== target[key]?.__state) {
const path = [ ...target.__path, key ];
target[key] = new Proxy({ __state: target.__state[key], __path: path }, playerHandler);
}
return target[key];
}
return target.__state[key];
},
set(target, property, value, receiver) {
if (!state.hasNaN && ((typeof value === 'number' && isNaN(value)) || (value instanceof Decimal && (isNaN(value.sign) || isNaN(value.layer) || isNaN(value.mag))))) {
const currentValue = target.__state[property];
if (!((typeof currentValue === 'number' && isNaN(currentValue)) || (currentValue instanceof Decimal && (isNaN(currentValue.sign) || isNaN(currentValue.layer) || isNaN(currentValue.mag))))) {
state.autosave = false;
state.hasNaN = true;
state.NaNPath = [ ...target.__path, property ];
state.NaNReceiver = receiver;
console.error(`Attempted to set NaN value`, [ ...target.__path, property ], target.__state);
throw 'Attempted to set NaN value. See above for details';
}
}
target.__state[property] = value;
if (property === 'points') {
if (target.__state.best != undefined) {
target.__state.best = Decimal.max(target.__state.best, value);
}
if (target.__state.total != undefined) {
const diff = Decimal.sub(value, target.__state.points);
if (diff.gt(0)) {
target.__state.total = target.__state.total.add(diff);
}
}
}
return true;
}
};
export default window.player = new Proxy({ __state: state, __path: [ 'player' ] }, playerHandler);

112
src/game/player.ts Normal file
View file

@ -0,0 +1,112 @@
import { Themes } from "@/data/themes";
import { PlayerData } from "@/typings/player";
import Decimal from "@/util/bignum";
import { isPlainObject } from "@/util/common";
import { reactive } from "vue";
import { ImportingStatus, MilestoneDisplay } from "./enums";
const state = reactive<PlayerData>({
id: "",
points: new Decimal(0),
oomps: new Decimal(0),
oompsMag: 0,
name: "",
tabs: [],
time: -1,
autosave: true,
offlineProd: true,
offlineTime: null,
timePlayed: new Decimal(0),
keepGoing: false,
lastTenTicks: [],
showTPS: true,
msDisplay: MilestoneDisplay.All,
hideChallenges: false,
theme: Themes.Paper,
subtabs: {},
minimized: {},
modID: "",
modVersion: "",
hasNaN: false,
NaNPath: [],
NaNReceiver: null,
importing: ImportingStatus.NotImporting,
saveToImport: "",
saveToExport: "",
layers: {}
});
const playerHandler: ProxyHandler<Record<string, any>> = {
get(target: Record<string, any>, key: string): any {
if (key === "__state" || key === "__path") {
return target[key];
}
if (target.__state[key] == undefined) {
return;
}
if (isPlainObject(target.__state[key]) && !(target.__state[key] instanceof Decimal)) {
if (target.__state[key] !== target[key]?.__state) {
const path = [...target.__path, key];
target[key] = new Proxy(
{ __state: target.__state[key], __path: path },
playerHandler
);
}
return target[key];
}
return target.__state[key];
},
set(
target: Record<string, any>,
property: string,
value: any,
receiver: ProxyConstructor
): boolean {
if (
!state.hasNaN &&
((typeof value === "number" && isNaN(value)) ||
(value instanceof Decimal &&
(isNaN(value.sign) || isNaN(value.layer) || isNaN(value.mag))))
) {
const currentValue = target.__state[property];
if (
!(
(typeof currentValue === "number" && isNaN(currentValue)) ||
(currentValue instanceof Decimal &&
(isNaN(currentValue.sign) ||
isNaN(currentValue.layer) ||
isNaN(currentValue.mag)))
)
) {
state.autosave = false;
state.hasNaN = true;
state.NaNPath = [...target.__path, property];
state.NaNReceiver = (receiver as unknown) as Record<string, unknown>;
console.error(
`Attempted to set NaN value`,
[...target.__path, property],
target.__state
);
throw "Attempted to set NaN value. See above for details";
}
}
target.__state[property] = value;
if (property === "points") {
if (target.__state.best != undefined) {
target.__state.best = Decimal.max(target.__state.best, value);
}
if (target.__state.total != undefined) {
const diff = Decimal.sub(value, target.__state.points);
if (diff.gt(0)) {
target.__state.total = target.__state.total.add(diff);
}
}
}
return true;
}
};
export default window.player = new Proxy(
{ __state: state, __path: ["player"] },
playerHandler
) as PlayerData;

2
src/lib/break_eternity.js
View file

File diff suppressed because one or more lines are too long

2717
src/lib/break_eternity.ts Normal file
View file

File diff suppressed because it is too large Load diff

22
src/main.js
View file

@ -1,22 +0,0 @@
import { createApp } from 'vue';
import App from './App';
import { load } from './util/save';
import { setVue } from './util/vue';
import gameLoop from './game/gameLoop';
import { registerComponents } from './components/index';
import modInfo from './data/modInfo.json';
requestAnimationFrame(async () => {
await load();
// Create Vue
const vue = window.vue = createApp({
...App
});
setVue(vue);
registerComponents(vue);
vue.mount('#app');
document.title = modInfo.title;
gameLoop();
});

22
src/main.ts Normal file
View file

@ -0,0 +1,22 @@
import { createApp } from "vue";
import App from "./App.vue";
import { load } from "./util/save";
import { setVue } from "./util/vue";
import gameLoop from "./game/gameLoop";
import { registerComponents } from "./components/index";
import modInfo from "./data/modInfo.json";
requestAnimationFrame(async () => {
await load();
// Create Vue
const vue = (window.vue = createApp({
...App
}));
setVue(vue);
registerComponents(vue);
vue.mount("#app");
document.title = modInfo.title;
gameLoop();
});

6
src/shims-vue.d.ts vendored Normal file
View file

@ -0,0 +1,6 @@
/* eslint-disable */
declare module '*.vue' {
import type { defineComponent } from 'vue';
const component: ReturnType<typeof defineComponent>;
export default component;
}

28
src/typings/branches.d.ts vendored Normal file
View file

@ -0,0 +1,28 @@
import { ComponentPublicInstance } from "vue";
export interface BranchLink {
start: string;
end: string;
options: string | BranchOptions;
}
export interface BranchNode {
x?: number;
y?: number;
component: ComponentPublicInstance;
element: HTMLElement;
}
export interface BranchOptions {
target?: string;
featureType?: string;
stroke?: string;
"stroke-width"?: string;
startOffset?: Position;
endOffset?: Position;
}
export interface Position {
x: number;
y: number;
}

3
src/typings/cacheableFunction.d.ts vendored Normal file
View file

@ -0,0 +1,3 @@
export interface CacheableFunction extends Function {
forceCached?: boolean;
}

3
src/typings/component.d.ts vendored Normal file
View file

@ -0,0 +1,3 @@
import { ComponentOptions } from "vue";
export type CoercableComponent = string | ComponentOptions;

5
src/typings/computable.d.ts vendored Normal file
View file

@ -0,0 +1,5 @@
export type Computable<T> = {
[K in keyof T]:
| ((this: T) => T[K])
| (NonNullable<T[K]> extends (..._: infer A) => infer R ? (this: T, ..._: A) => R : T[K]);
};

Some files were not shown because too many files have changed in this diff Show more