thepaperpilot/Planar-Pioneers
1
0
Fork 0
mirror of https://github.com/thepaperpilot/Planar-Pioneers.git synced 2024-11-24 17:31:47 +00:00
Code Issues Releases 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 = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
presets: ["@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

45
package.json
View file

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

79
src/App.vue
View file

@ -1,53 +1,54 @@
<template>
<div id="modal-root" :style="theme" />
<div class="app" @mousemove="updateMouse" :style="theme" :class="{ useHeader }">
<Nav v-if="useHeader" />
<Tabs />
<TPS v-if="showTPS" />
<GameOverScreen />
<NaNScreen />
</div>
<div id="modal-root" :style="theme" />
<div class="app" @mousemove="updateMouse" :style="theme" :class="{ useHeader }">
<Nav v-if="useHeader" />
<Tabs />
<TPS v-if="showTPS" />
<GameOverScreen />
<NaNScreen />
</div>
</template>
<script>
import themes from './data/themes';
import player from './game/player';
import modInfo from './data/modInfo.json';
import { mapState } from './util/vue';
import './main.css';
<script lang="ts">
import { defineComponent } from "vue";
import themes from "./data/themes";
import player from "./game/player";
import modInfo from "./data/modInfo.json";
import { mapState } from "./util/vue";
import "./main.css";
export default {
name: 'App',
data() {
return { useHeader: modInfo.useHeader };
},
computed: {
...mapState([ 'showTPS' ]),
theme() {
return themes[player.theme].variables;
}
},
methods: {
updateMouse(/* event */) {
// TODO use event to update mouse position for particles
}
}
};
export default defineComponent({
name: "App",
data() {
return { useHeader: modInfo.useHeader };
},
computed: {
...mapState(["showTPS"]),
theme() {
return themes[player.theme].variables;
}
},
methods: {
updateMouse(/* event */) {
// TODO use event to update mouse position for particles
}
}
});
</script>
<style scoped>
.app {
background-color: var(--background);
color: var(--color);
display: flex;
flex-flow: column;
min-height: 100%;
height: 100%;
background-color: var(--background);
color: var(--color);
display: flex;
flex-flow: column;
min-height: 100%;
height: 100%;
}
#modal-root {
position: absolute;
min-height: 100%;
height: 100%;
min-height: 100%;
height: 100%;
}
</style>

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

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

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

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

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

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

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

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

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

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

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

@ -1,79 +1,84 @@
<template>
<div v-if="challenge.shown" :style="style"
:class="{
feature: true,
challenge: true,
resetNotify: challenge.active,
notify: challenge.active && challenge.canComplete,
done: challenge.completed,
maxed: challenge.maxed
}">
<div v-if="title"><component :is="title" /></div>
<button :style="{ backgroundColor: challenge.maxed ? null : buttonColor }" @click="toggle">
{{ buttonText }}
</button>
<component v-if="fullDisplay" :is="fullDisplay" />
<default-challenge-display v-else :id="id" />
<mark-node :mark="challenge.mark" />
<branch-node :branches="challenge.branches" :id="id" featureType="challenge" />
</div>
<div
v-if="challenge.shown"
:style="style"
:class="{
feature: true,
[layer]: true,
challenge: true,
resetNotify: challenge.active,
notify: challenge.active && challenge.canComplete,
done: challenge.completed,
maxed: challenge.maxed
}"
>
<div v-if="title"><component :is="title" /></div>
<button :style="{ backgroundColor: challenge.maxed ? null : buttonColor }" @click="toggle">
{{ buttonText }}
</button>
<component v-if="fullDisplay" :is="fullDisplay" />
<default-challenge-display v-else :id="id" />
<mark-node :mark="challenge.mark" />
<branch-node :branches="challenge.branches" :id="id" featureType="challenge" />
</div>
</template>
<script>
import { layers } from '../../game/layers';
import { coerceComponent } from '../../util/vue';
<script lang="ts">
import { layers } from "@/game/layers";
import { Challenge } from "@/typings/features/challenge";
import { coerceComponent, InjectLayerMixin } from "@/util/vue";
import { Component, defineComponent } from "vue";
export default {
name: 'challenge',
inject: [ 'tab' ],
props: {
layer: String,
id: [ Number, String ]
},
computed: {
challenge() {
return layers[this.layer || this.tab.layer].challenges[this.id];
},
style() {
return [
layers[this.layer || this.tab.layer].componentStyles?.challenge,
this.challenge.style
];
},
title() {
if (this.challenge.titleDisplay) {
return coerceComponent(this.challenge.titleDisplay, 'div');
}
if (this.challenge.name) {
return coerceComponent(this.challenge.name, 'h3');
}
return null;
},
buttonColor() {
return layers[this.layer || this.tab.layer].color;
},
buttonText() {
if (this.challenge.active) {
return this.challenge.canComplete ? "Finish" : "Exit Early";
}
if (this.challenge.maxed) {
return "Completed";
}
return "Start";
},
fullDisplay() {
if (this.challenge.fullDisplay) {
return coerceComponent(this.challenge.fullDisplay, 'div');
}
return null;
}
},
methods: {
toggle() {
this.challenge.toggle();
}
}
};
export default defineComponent({
name: "challenge",
mixins: [InjectLayerMixin],
props: {
id: {
type: [Number, String],
required: true
}
},
computed: {
challenge(): Challenge {
return layers[this.layer].challenges!.data[this.id];
},
style(): Array<Partial<CSSStyleDeclaration> | undefined> {
return [layers[this.layer].componentStyles?.challenge, this.challenge.style];
},
title(): Component | string | null {
if (this.challenge.titleDisplay) {
return coerceComponent(this.challenge.titleDisplay, "div");
}
if (this.challenge.name) {
return coerceComponent(this.challenge.name, "h3");
}
return null;
},
buttonColor(): string {
return layers[this.layer].color;
},
buttonText(): string {
if (this.challenge.active) {
return this.challenge.canComplete ? "Finish" : "Exit Early";
}
if (this.challenge.maxed) {
return "Completed";
}
return "Start";
},
fullDisplay(): Component | string | null {
if (this.challenge.fullDisplay) {
return coerceComponent(this.challenge.fullDisplay, "div");
}
return null;
}
},
methods: {
toggle() {
this.challenge.toggle();
}
}
});
</script>
<style scoped>
@ -102,6 +107,6 @@ export default {
}
.challenge.maxed button {
cursor: unset;
cursor: unset;
}
</style>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,93 +1,96 @@
<template>
<div class="infobox" v-if="infobox.unlocked" :style="style" :class="{ collapsed, stacked }">
<button class="title" :style="titleStyle" @click="toggle">
<span class="toggle">▼</span>
<component :is="title" />
</button>
<collapse-transition>
<div v-if="!collapsed" class="body" :style="{ backgroundColor: borderColor }">
<component :is="body" :style="bodyStyle" />
</div>
</collapse-transition>
<branch-node :branches="infobox.branches" :id="id" featureType="infobox" />
</div>
<div class="infobox" v-if="infobox.unlocked" :style="style" :class="{ collapsed, stacked }">
<button class="title" :style="titleStyle" @click="toggle">
<span class="toggle">▼</span>
<component :is="title" />
</button>
<collapse-transition>
<div v-if="!collapsed" class="body" :style="{ backgroundColor: borderColor }">
<component :is="body" :style="bodyStyle" />
</div>
</collapse-transition>
<branch-node :branches="infobox.branches" :id="id" featureType="infobox" />
</div>
</template>
<script>
import { layers } from '../../game/layers';
import player from '../../game/player';
import { coerceComponent } from '../../util/vue';
import themes from '../../data/themes';
<script lang="ts">
import themes from "@/data/themes";
import { layers } from "@/game/layers";
import player from "@/game/player";
import { Infobox } from "@/typings/features/infobox";
import { coerceComponent, InjectLayerMixin } from "@/util/vue";
import { Component, defineComponent } from "vue";
export default {
name: 'infobox',
inject: [ 'tab' ],
props: {
layer: String,
id: [ Number, String ]
},
computed: {
infobox() {
return layers[this.layer || this.tab.layer].infoboxes[this.id];
},
borderColor() {
return this.infobox.borderColor || layers[this.layer || this.tab.layer].color;
},
style() {
return [
{ borderColor: this.borderColor },
layers[this.layer || this.tab.layer].componentStyles?.infobox,
this.infobox.style
];
},
titleStyle() {
return [
{ backgroundColor: layers[this.layer || this.tab.layer].color },
layers[this.layer || this.tab.layer].componentStyles?.['infobox-title'],
this.infobox.titleStyle
];
},
bodyStyle() {
return [
layers[this.layer || this.tab.layer].componentStyles?.['infobox-body'],
this.infobox.bodyStyle
];
},
title() {
if (this.infobox.title) {
return coerceComponent(this.infobox.title);
}
return coerceComponent(layers[this.layer || this.tab.layer].name);
},
body() {
return coerceComponent(this.infobox.body);
},
collapsed() {
return player[this.layer || this.tab.layer].infoboxes[this.id];
},
stacked() {
return themes[player.theme].stackedInfoboxes;
}
},
methods: {
toggle() {
player[this.layer || this.tab.layer].infoboxes[this.id] = !player[this.layer || this.tab.layer].infoboxes[this.id];
}
}
};
export default defineComponent({
name: "infobox",
mixins: [InjectLayerMixin],
props: {
id: {
type: [Number, String],
required: true
}
},
computed: {
infobox(): Infobox {
return layers[this.layer].infoboxes!.data[this.id];
},
borderColor(): string {
return this.infobox.borderColor || layers[this.layer].color;
},
style(): Array<Partial<CSSStyleDeclaration> | undefined> {
return [
{ borderColor: this.borderColor },
layers[this.layer].componentStyles?.infobox,
this.infobox.style
];
},
titleStyle(): Array<Partial<CSSStyleDeclaration> | undefined> {
return [
{ backgroundColor: layers[this.layer].color },
layers[this.layer].componentStyles?.["infobox-title"],
this.infobox.titleStyle
];
},
bodyStyle(): Array<Partial<CSSStyleDeclaration> | undefined> {
return [layers[this.layer].componentStyles?.["infobox-body"], this.infobox.bodyStyle];
},
title(): Component | string {
if (this.infobox.title) {
return coerceComponent(this.infobox.title);
}
return coerceComponent(layers[this.layer].name || this.layer);
},
body(): Component | string {
return coerceComponent(this.infobox.body);
},
collapsed(): boolean {
return player.layers[this.layer].infoboxes[this.id];
},
stacked(): boolean {
return themes[player.theme].stackedInfoboxes;
}
},
methods: {
toggle() {
player.layers[this.layer].infoboxes[this.id] = !player.layers[this.layer].infoboxes[
this.id
];
}
}
});
</script>
<style scoped>
.infobox {
position: relative;
width: 600px;
max-width: 95%;
margin-top: 0;
text-align: left;
position: relative;
width: 600px;
max-width: 95%;
margin-top: 0;
text-align: left;
border-style: solid;
border-width: 0px;
box-sizing: border-box;
border-radius: 5px;
box-sizing: border-box;
border-radius: 5px;
}
.infobox.stacked {
@ -95,27 +98,27 @@ export default {
}
.infobox:not(.stacked) + .infobox:not(.stacked) {
margin-top: 20px;
margin-top: 20px;
}
.infobox + :not(.infobox) {
margin-top: 10px;
margin-top: 10px;
}
.title {
font-size: 24px;
color: black;
cursor: pointer;
border: none;
padding: 4px;
width: auto;
text-align: left;
padding-left: 30px;
font-size: 24px;
color: black;
cursor: pointer;
border: none;
padding: 4px;
width: auto;
text-align: left;
padding-left: 30px;
}
.infobox:not(.stacked) .title {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.infobox.stacked + .infobox.stacked {
@ -125,32 +128,32 @@ export default {
}
.stacked .title {
width: 100%;
width: 100%;
}
.collapsed:not(.stacked) .title::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 4px;
background-color: inherit;
background-color: inherit;
}
.toggle {
position: absolute;
left: 10px;
position: absolute;
left: 10px;
}
.collapsed .toggle {
transform: rotate(-90deg);
transform: rotate(-90deg);
}
.body {
transition-duration: .5s;
border-radius: 5px;
border-top-left-radius: 0;
transition-duration: 0.5s;
border-radius: 5px;
border-top-left-radius: 0;
}
.infobox:not(.stacked) .body {
@ -158,12 +161,12 @@ export default {
}
.body > * {
padding: 8px;
width: 100%;
padding: 8px;
width: 100%;
display: block;
box-sizing: border-box;
border-radius: 5px;
border-top-left-radius: 0;
background-color: var(--background);
border-radius: 5px;
border-top-left-radius: 0;
background-color: var(--background);
}
</style>

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

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

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

@ -1,28 +1,30 @@
<template>
<div v-if="mark">
<div v-if="mark === true" class="mark star"></div>
<img v-else class="mark" :src="mark" />
</div>
<div v-if="mark">
<div v-if="mark === true" class="mark star"></div>
<img v-else class="mark" :src="mark" />
</div>
</template>
<script>
export default {
name: 'mark-node',
props: {
mark: [ Boolean, String ]
}
};
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "mark-node",
props: {
mark: [Boolean, String]
}
});
</script>
<style scoped>
.mark {
position: absolute;
left: -25px;
top: -10px;
width: 30px;
height: 30px;
z-index: 1;
pointer-events: none;
position: absolute;
left: -25px;
top: -10px;
width: 30px;
height: 30px;
z-index: 1;
pointer-events: none;
margin-left: 0.9em;
margin-right: 0.9em;
margin-bottom: 1.2em;
@ -33,34 +35,34 @@ export default {
}
.star {
left: -10px;
width: 0;
height: 0;
margin-left: 0.9em;
margin-right: 0.9em;
margin-bottom: 1.2em;
border-right: 0.3em solid transparent;
border-bottom: 0.7em solid #ffcc00;
border-left: 0.3em solid transparent;
font-size: 10px;
pointer-events: none;
left: -10px;
width: 0;
height: 0;
margin-left: 0.9em;
margin-right: 0.9em;
margin-bottom: 1.2em;
border-right: 0.3em solid transparent;
border-bottom: 0.7em solid #ffcc00;
border-left: 0.3em solid transparent;
font-size: 10px;
pointer-events: none;
}
.star::before,
.star::after {
content: "";
width: 0;
height: 0;
position: absolute;
top: .6em;
left: -1em;
border-right: 1em solid transparent;
border-bottom: 0.7em solid #ffcc00;
border-left: 1em solid transparent;
transform: rotate(-35deg);
content: "";
width: 0;
height: 0;
position: absolute;
top: 0.6em;
left: -1em;
border-right: 1em solid transparent;
border-bottom: 0.7em solid #ffcc00;
border-left: 1em solid transparent;
transform: rotate(-35deg);
}
.star::after {
transform: rotate(35deg);
transform: rotate(35deg);
}
</style>

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

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

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

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

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

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

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

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

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

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

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

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

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>

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

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

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

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

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

@ -1,76 +1,78 @@
<template>
<span class="container" :class="{ confirming }">
<span v-if="confirming">Are you sure?</span>
<button @click.stop="click" class="button danger" :disabled="disabled">
<span v-if="confirming">Yes</span>
<slot v-else />
</button>
<button v-if="confirming" class="button" @click.stop="cancel">No</button>
</span>
<span class="container" :class="{ confirming }">
<span v-if="confirming">Are you sure?</span>
<button @click.stop="click" class="button danger" :disabled="disabled">
<span v-if="confirming">Yes</span>
<slot v-else />
</button>
<button v-if="confirming" class="button" @click.stop="cancel">No</button>
</span>
</template>
<script>
export default {
name: 'danger-button',
data() {
return {
confirming: false
}
},
props: {
disabled: Boolean,
skipConfirm: Boolean
},
emits: [ 'click', 'confirmingChanged' ],
watch: {
confirming(newValue) {
this.$emit('confirmingChanged', newValue);
}
},
methods: {
click() {
if (this.skipConfirm) {
this.$emit('click');
return;
}
if (this.confirming) {
this.$emit('click');
}
this.confirming = !this.confirming;
},
cancel() {
this.confirming = false;
}
}
};
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "danger-button",
data() {
return {
confirming: false
};
},
props: {
disabled: Boolean,
skipConfirm: Boolean
},
emits: ["click", "confirmingChanged"],
watch: {
confirming(newValue) {
this.$emit("confirmingChanged", newValue);
}
},
methods: {
click() {
if (this.skipConfirm) {
this.$emit("click");
return;
}
if (this.confirming) {
this.$emit("click");
}
this.confirming = !this.confirming;
},
cancel() {
this.confirming = false;
}
}
});
</script>
<style scoped>
.container {
display: flex;
display: flex;
align-items: center;
}
.container.confirming button {
font-size: 1em;
font-size: 1em;
}
.container > * {
margin: 0 4px;
margin: 0 4px;
}
</style>
<style>
.danger {
position: relative;
border: solid 2px var(--danger);
border: solid 2px var(--danger);
border-right-width: 16px;
}
.danger::after {
position: absolute;
content: "!";
color: white;
content: "!";
color: white;
right: -13px;
}
</style>

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

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

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

@ -1,32 +1,42 @@
<template>
<div class="field">
<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" />
</div>
<div class="field">
<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"
/>
</div>
</template>
<script>
export default {
name: 'Select',
props: {
title: String,
options: Array, // https://vue-select.org/guide/options.html#options-prop
value: [ String, Object ],
default: [ String, Object ],
placeholder: String,
closeOnSelect: Boolean
},
emits: [ 'change' ],
methods: {
setSelected(value) {
value = value || this.default;
this.$emit('change', value);
},
getValue(item) {
return item?.value;
}
}
};
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "Select",
props: {
title: String,
options: Array, // https://vue-select.org/guide/options.html#options-prop
value: [String, Object],
default: [String, Object],
placeholder: String,
closeOnSelect: Boolean
},
emits: ["change"],
methods: {
setSelected(value: any) {
value = value || this.default;
this.$emit("change", value);
},
getValue(item?: { value: any }) {
return item?.value;
}
}
});
</script>
<style>
@ -35,28 +45,28 @@ export default {
}
.field-buttons .vue-select {
width: unset;
width: unset;
}
.vue-select,
.vue-dropdown {
border-color: rgba(var(--color), .26);
border-color: rgba(var(--color), 0.26);
}
.vue-dropdown {
background: var(--secondary-background);
background: var(--secondary-background);
}
.vue-dropdown-item {
color: var(--color);
color: var(--color);
}
.vue-dropdown-item.highlighted {
background-color: var(--background-tooltip);
background-color: var(--background-tooltip);
}
.vue-dropdown-item.selected,
.vue-dropdown-item.highlighted.selected {
background-color: var(--bought);
background-color: var(--bought);
}
</style>

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

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

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

@ -1,47 +1,62 @@
<template>
<form @submit.prevent="$emit('submit')">
<div class="field">
<span class="field-title" v-if="title">{{ title }}</span>
<textarea-autosize v-if="textarea" :placeholder="placeholder" :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>
</form>
<form @submit.prevent="$emit('submit')">
<div class="field">
<span class="field-title" v-if="title">{{ title }}</span>
<textarea-autosize
v-if="textarea"
:placeholder="placeholder"
: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>
</form>
</template>
<script>
export default {
name: 'TextField',
props: {
title: String,
value: String,
textarea: Boolean,
placeholder: String,
maxHeight: Number
},
emits: [ 'change', 'submit', 'input' ],
mounted() {
this.$refs.field.focus();
}
};
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "TextField",
props: {
title: String,
value: String,
textarea: Boolean,
placeholder: String,
maxHeight: Number
},
emits: ["change", "submit"],
mounted() {
(this.$refs.field as HTMLElement).focus();
}
});
</script>
<style scoped>
form {
margin: 0;
width: 100%;
margin: 0;
width: 100%;
}
.field > * {
margin: 0;
margin: 0;
}
input {
width: 50%;
width: 50%;
}
.fullWidth {
width: 100%;
width: 100%;
}
</style>

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

@ -1,98 +1,101 @@
<template>
<label class="field">
<input type="checkbox" class="toggle" :checked="value" @input="handleInput" />
<span>{{ title }}</span>
</label>
<label class="field">
<input type="checkbox" class="toggle" :checked="value" @input="handleInput" />
<span>{{ title }}</span>
</label>
</template>
<script>
<script lang="ts">
import { defineComponent } from "vue";
// Reference: https://codepen.io/finnhvman/pen/pOeyjE
export default {
name: 'Toggle',
props: {
title: String,
value: Boolean
},
emits: [ 'change' ],
methods: {
handleInput(e) {
this.$emit('change', e.target.checked);
}
}
};
export default defineComponent({
name: "Toggle",
props: {
title: String,
value: Boolean
},
emits: ["change"],
methods: {
handleInput(e: InputEvent) {
this.$emit("change", (e.target as HTMLInputElement).checked);
}
}
});
</script>
<style scoped>
.field {
cursor: pointer;
cursor: pointer;
}
input {
appearance: none;
pointer-events: none;
appearance: none;
pointer-events: none;
}
span {
width: 100%;
width: 100%;
}
/* track */
span::before {
content: "";
float: right;
margin: 5px 0 5px 10px;
border-radius: 7px;
width: 36px;
height: 14px;
background-color: rgba(0, 0, 0, 0.38);
vertical-align: top;
transition: background-color 0.2s, opacity 0.2s;
content: "";
float: right;
margin: 5px 0 5px 10px;
border-radius: 7px;
width: 36px;
height: 14px;
background-color: rgba(0, 0, 0, 0.38);
vertical-align: top;
transition: background-color 0.2s, opacity 0.2s;
}
/* thumb */
span::after {
content: "";
position: absolute;
top: 6px;
right: 16px;
border-radius: 50%;
width: 20px;
height: 20px;
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);
transition: background-color 0.2s, transform 0.2s;
content: "";
position: absolute;
top: 6px;
right: 16px;
border-radius: 50%;
width: 20px;
height: 20px;
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);
transition: background-color 0.2s, transform 0.2s;
}
input:checked + span::before {
background-color: rgba(33, 150, 243, 0.6);
background-color: rgba(33, 150, 243, 0.6);
}
input:checked + span::after {
background-color: rgb(33, 150, 243);
transform: translateX(16px);
background-color: rgb(33, 150, 243);
transform: translateX(16px);
}
/* active */
input:active + span::before {
background-color: rgba(33, 150, 243, 0.6);
background-color: rgba(33, 150, 243, 0.6);
}
input:checked:active + span::before {
background-color: rgba(0, 0, 0, 0.38);
background-color: rgba(0, 0, 0, 0.38);
}
/* disabled */
input:disabled + span {
color: black;
opacity: 0.38;
cursor: default;
color: black;
opacity: 0.38;
cursor: default;
}
input:disabled + span::before {
background-color: rgba(0, 0, 0, 0.38);
background-color: rgba(0, 0, 0, 0.38);
}
input:checked:disabled + span::before {
background-color: rgba(33, 150, 243, 0.6);
background-color: rgba(33, 150, 243, 0.6);
}
</style>

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);
}

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

@ -1,13 +1,15 @@
<template>
<div class="table">
<div class="col">
<slot />
</div>
</div>
<div class="table">
<div class="col">
<slot />
</div>
</div>
</template>
<script>
export default {
name: 'column'
};
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "column"
});
</script>

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

@ -1,43 +1,42 @@
<template>
<infobox v-if="infobox != undefined" :id="infobox" />
<main-display />
<sticky v-if="showPrestigeButton"><prestige-button /></sticky>
<resource-display />
<milestones />
<component v-if="midsection" :is="midsection" />
<clickables />
<buyables />
<upgrades />
<challenges />
<achievements />
<infobox v-if="infobox != undefined" :id="infobox" />
<main-display />
<sticky v-if="showPrestigeButton"><prestige-button /></sticky>
<resource-display />
<milestones />
<component v-if="midsection" :is="midsection" />
<clickables />
<buyables />
<upgrades />
<challenges />
<achievements />
</template>
<script>
import { layers } from '../../game/layers';
import { coerceComponent } from '../../util/vue';
<script lang="ts">
import { layers } from "@/game/layers";
import { coerceComponent, InjectLayerMixin } from "@/util/vue";
import { Component, defineComponent } from "vue";
export default {
name: 'default-layer-tab',
inject: [ 'tab' ],
props: {
layer: String
},
computed: {
infobox() {
return layers[this.layer || this.tab.layer].infoboxes && Object.keys(layers[this.layer || this.tab.layer].infoboxes)[0];
},
midsection() {
if (layers[this.layer || this.tab.layer].midsection) {
return coerceComponent(layers[this.layer || this.tab.layer].midsection);
}
return null;
},
showPrestigeButton() {
return layers[this.layer || this.tab.layer].type !== "none";
},
}
};
export default defineComponent({
name: "default-layer-tab",
mixins: [InjectLayerMixin],
computed: {
infobox(): string | undefined {
return (
layers[this.layer].infoboxes && Object.keys(layers[this.layer].infoboxes!.data)[0]
);
},
midsection(): Component | string | null {
if (layers[this.layer].midsection) {
return coerceComponent(layers[this.layer].midsection!);
}
return null;
},
showPrestigeButton(): boolean {
return layers[this.layer].type !== "none";
}
}
});
</script>
<style scoped>
</style>
<style scoped></style>

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

@ -1,66 +1,77 @@
<template>
<Modal :show="show">
<template v-slot:header>
<div class="game-over-modal-header">
<img class="game-over-modal-logo" v-if="logo" :src="logo" :alt="modInfo" />
<div class="game-over-modal-title">
<h2>Congratulations!</h2>
<h4>You've beaten {{ title }} v{{ versionNumber }}: {{ versionTitle }}</h4>
</div>
</div>
</template>
<template v-slot:body="{ shown }">
<div v-if="shown">
<div>It took you {{ timePlayed }} to beat the game.</div>
<br>
<div>Please check the Discord to discuss the game or to check for new content updates!</div>
<br>
<div>
<a :href="discordLink">
<img src="images/discord.png" class="game-over-modal-discord" />
{{ discordName }}
</a>
</div>
</div>
</template>
<template v-slot:footer>
<div class="game-over-footer">
<button @click="keepGoing" class="button">Keep Going</button>
<button @click="playAgain" class="button danger">Play Again</button>
</div>
</template>
</Modal>
<Modal :show="show">
<template v-slot:header>
<div class="game-over-modal-header">
<img class="game-over-modal-logo" v-if="logo" :src="logo" :alt="modInfo" />
<div class="game-over-modal-title">
<h2>Congratulations!</h2>
<h4>You've beaten {{ title }} v{{ versionNumber }}: {{ versionTitle }}</h4>
</div>
</div>
</template>
<template v-slot:body="{ shown }">
<div v-if="shown">
<div>It took you {{ timePlayed }} to beat the game.</div>
<br />
<div>
Please check the Discord to discuss the game or to check for new content
updates!
</div>
<br />
<div>
<a :href="discordLink">
<img src="images/discord.png" class="game-over-modal-discord" />
{{ discordName }}
</a>
</div>
</div>
</template>
<template v-slot:footer>
<div class="game-over-footer">
<button @click="keepGoing" class="button">Keep Going</button>
<button @click="playAgain" class="button danger">Play Again</button>
</div>
</template>
</Modal>
</template>
<script>
import modInfo from '../../data/modInfo.json';
import { hasWon } from '../../data/mod';
import { formatTime } from '../../util/bignum';
import player from '../../game/player';
<script lang="ts">
import { hasWon } from "@/data/mod";
import modInfo from "@/data/modInfo.json";
import player from "@/game/player";
import { formatTime } from "@/util/bignum";
import { defineComponent } from "vue";
export default {
name: 'GameOverScreen',
data() {
const { title, logo, discordName, discordLink, versionNumber, versionTitle } = modInfo;
return { title, logo, discordName, discordLink, versionNumber, versionTitle };
},
computed: {
timePlayed() {
return formatTime(player.timePlayed);
},
show() {
return hasWon.value && !player.keepGoing;
}
},
methods: {
keepGoing() {
player.keepGoing = true;
},
playAgain() {
console.warn("Not yet implemented!");
}
}
};
export default defineComponent({
name: "GameOverScreen",
data() {
const { title, logo, discordName, discordLink, versionNumber, versionTitle } = modInfo;
return {
title,
logo,
discordName,
discordLink,
versionNumber,
versionTitle
};
},
computed: {
timePlayed() {
return formatTime(player.timePlayed);
},
show() {
return hasWon.value && !player.keepGoing;
}
},
methods: {
keepGoing() {
player.keepGoing = true;
},
playAgain() {
console.warn("Not yet implemented!");
}
}
});
</script>
<style scoped>
@ -71,36 +82,36 @@ export default {
}
.game-over-modal-header * {
margin: 0;
margin: 0;
}
.game-over-modal-logo {
height: 4em;
height: 4em;
width: 4em;
}
.game-over-modal-title {
padding: 10px 0;
padding: 10px 0;
margin-left: 10px;
}
.game-over-footer {
display: flex;
display: flex;
justify-content: flex-end;
}
.game-over-footer button {
margin: 0 10px;
margin: 0 10px;
}
.game-over-modal-discord-link {
display: flex;
align-items: center;
display: flex;
align-items: center;
}
.game-over-modal-discord {
height: 2em;
margin: 0;
margin-right: 4px;
height: 2em;
margin: 0;
margin-right: 4px;
}
</style>

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

@ -1,98 +1,115 @@
<template>
<Modal :show="show" @close="$emit('closeDialog', 'Info')">
<template v-slot:header>
<div class="info-modal-header">
<img class="info-modal-logo" v-if="logo" :src="logo" :alt="title" />
<div class="info-modal-title">
<h2>{{ title }}</h2>
<h4>v{{ versionNumber}}: {{ versionTitle }}</h4>
</div>
</div>
</template>
<template v-slot:body="{ shown }">
<div v-if="shown">
<div v-if="author">
By {{ author }}
</div>
<div>
Made in TMT-X, by thepaperpilot with inspiration from Acameada, Jacorb, and Aarex
</div>
<br/>
<div class="link" @click="$emit('openDialog', 'Changelog')">Changelog</div>
<br>
<div>
<a :href="discordLink" v-if="discordLink !== 'https://discord.gg/WzejVAx'" class="info-modal-discord-link">
<img src="images/discord.png" class="info-modal-discord" />
{{ discordName }}
</a>
</div>
<div>
<a href="https://discord.gg/WzejVAx" class="info-modal-discord-link">
<img src="images/discord.png" class="info-modal-discord" />
The Paper Pilot Community
</a>
</div>
<div>
<a href="https://discord.gg/F3xveHV" class="info-modal-discord-link">
<img src="images/discord.png" class="info-modal-discord" />
The Modding Tree
</a>
</div>
<div>
<a href="https://discord.gg/wwQfgPa" class="info-modal-discord-link">
<img src="images/discord.png" class="info-modal-discord" />
Jacorb's Games
</a>
</div>
<br>
<div>Time Played: {{ timePlayed }}</div>
<div v-if="hotkeys">
<br>
<h4>Hotkeys</h4>
<div v-for="key in hotkeys" :key="key.key">
{{ key.key }}: {{ key.description }}
</div>
</div>
</div>
</template>
</Modal>
<Modal :show="show" @close="$emit('closeDialog', 'Info')">
<template v-slot:header>
<div class="info-modal-header">
<img class="info-modal-logo" v-if="logo" :src="logo" :alt="title" />
<div class="info-modal-title">
<h2>{{ title }}</h2>
<h4>v{{ versionNumber }}: {{ versionTitle }}</h4>
</div>
</div>
</template>
<template v-slot:body="{ shown }">
<div v-if="shown">
<div v-if="author">By {{ author }}</div>
<div>
Made in TMT-X, by thepaperpilot with inspiration from Acameada, Jacorb, and
Aarex
</div>
<br />
<div class="link" @click="$emit('openDialog', 'Changelog')">
Changelog
</div>
<br />
<div>
<a
:href="discordLink"
v-if="discordLink !== 'https://discord.gg/WzejVAx'"
class="info-modal-discord-link"
>
<img src="images/discord.png" class="info-modal-discord" />
{{ discordName }}
</a>
</div>
<div>
<a href="https://discord.gg/WzejVAx" class="info-modal-discord-link">
<img src="images/discord.png" class="info-modal-discord" />
The Paper Pilot Community
</a>
</div>
<div>
<a href="https://discord.gg/F3xveHV" class="info-modal-discord-link">
<img src="images/discord.png" class="info-modal-discord" />
The Modding Tree
</a>
</div>
<div>
<a href="https://discord.gg/wwQfgPa" class="info-modal-discord-link">
<img src="images/discord.png" class="info-modal-discord" />
Jacorb's Games
</a>
</div>
<br />
<div>Time Played: {{ timePlayed }}</div>
<div v-if="hotkeys">
<br />
<h4>Hotkeys</h4>
<div v-for="key in hotkeys" :key="key.key">
{{ key.key }}: {{ key.description }}
</div>
</div>
</div>
</template>
</Modal>
</template>
<script>
import modInfo from '../../data/modInfo.json';
import { formatTime } from '../../util/bignum';
import { hotkeys } from '../../game/layers';
import player from '../../game/player';
<script lang="ts">
import modInfo from "@/data/modInfo.json";
import { hotkeys } from "@/game/layers";
import player from "@/game/player";
import { formatTime } from "@/util/bignum";
import { defineComponent } from "vue";
export default {
name: 'Info',
data() {
const { title, logo, author, discordName, discordLink, versionNumber, versionTitle } = modInfo;
return { title, logo, author, discordName, discordLink, versionNumber, versionTitle };
},
props: {
show: Boolean
},
emits: [ 'closeDialog', 'openDialog' ],
computed: {
timePlayed() {
return formatTime(player.timePlayed);
},
hotkeys() {
return Object.keys(hotkeys).reduce((acc, curr) => {
if (hotkeys[curr].unlocked !== false) {
acc[curr] = hotkeys[curr];
}
return acc;
}, {});
}
}
};
export default defineComponent({
name: "Info",
data() {
const {
title,
logo,
author,
discordName,
discordLink,
versionNumber,
versionTitle
} = modInfo;
return {
title,
logo,
author,
discordName,
discordLink,
versionNumber,
versionTitle
};
},
props: {
show: Boolean
},
emits: ["closeDialog", "openDialog"],
computed: {
timePlayed() {
return formatTime(player.timePlayed);
},
hotkeys() {
return hotkeys.filter(hotkey => hotkey.unlocked);
}
}
});
</script>
<style scoped>
.info-modal-header {
display: flex;
display: flex;
margin: -20px;
margin-bottom: 0;
background: var(--secondary-background);
@ -100,29 +117,29 @@ export default {
}
.info-modal-header * {
margin: 0;
margin: 0;
}
.info-modal-logo {
height: 4em;
height: 4em;
width: 4em;
}
.info-modal-title {
display: flex;
flex-direction: column;
padding: 10px 0;
display: flex;
flex-direction: column;
padding: 10px 0;
margin-left: 10px;
}
.info-modal-discord-link {
display: flex;
align-items: center;
display: flex;
align-items: center;
}
.info-modal-discord {
height: 2em;
margin: 0;
margin-right: 4px;
height: 2em;
margin: 0;
margin-right: 4px;
}
</style>

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

@ -1,24 +1,25 @@
<template>
<slot />
<slot />
</template>
<script>
export default {
name: 'LayerProvider',
provide() {
return {
'tab': {
layer: this.layer,
index: this.index
}
};
},
props: {
layer: String,
index: Number
}
};
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "LayerProvider",
provide() {
return {
tab: {
layer: this.layer,
index: this.index
}
};
},
props: {
layer: String,
index: Number
}
});
</script>
<style scoped>
</style>
<style scoped></style>

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

@ -1,175 +1,206 @@
<template>
<LayerProvider :layer="layer" :index="index">
<div class="layer-container">
<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>
<branches>
<sticky v-if="subtabs" class="subtabs-container" :class="{ floating, firstTab: firstTab || !allowGoBack, minimizable }">
<div class="subtabs">
<tab-button v-for="(subtab, id) in subtabs" @selectTab="selectSubtab(id)" :key="id"
:activeTab="id === activeSubtab" :options="subtab" :text="id" />
</div>
</sticky>
<component v-if="display" :is="display" />
<default-layer-tab v-else />
</branches>
</div>
<button v-if="minimizable" class="minimize" @click="toggleMinimized">▼</button>
</div>
</LayerProvider>
<LayerProvider :layer="layer" :index="index">
<div class="layer-container">
<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>
<branches>
<sticky
v-if="subtabs"
class="subtabs-container"
:class="{
floating,
firstTab: firstTab || !allowGoBack,
minimizable
}"
>
<div class="subtabs">
<tab-button
v-for="(subtab, id) in subtabs"
@selectTab="selectSubtab(id)"
:key="id"
:activeTab="id === activeSubtab"
:options="subtab"
:text="id"
/>
</div>
</sticky>
<component v-if="display" :is="display" />
<default-layer-tab v-else />
</branches>
</div>
<button v-if="minimizable" class="minimize" @click="toggleMinimized">
▼
</button>
</div>
</LayerProvider>
</template>
<script>
import { layers } from '../../game/layers';
import player from '../../game/player';
import { coerceComponent } from '../../util/vue';
import { isPlainObject } from '../../util/common';
import modInfo from '../../data/modInfo.json';
import themes from '../../data/themes';
<script lang="ts">
import modInfo from "@/data/modInfo.json";
import themes from "@/data/themes";
import { layers } from "@/game/layers";
import player from "@/game/player";
import { Subtab } from "@/typings/features/subtab";
import { coerceComponent } from "@/util/vue";
import { Component, defineComponent } from "vue";
export default {
name: 'layer-tab',
props: {
layer: String,
index: Number,
forceFirstTab: Boolean,
minimizable: Boolean,
tab: Function
},
data() {
return { allowGoBack: modInfo.allowGoBack };
},
computed: {
minimized() {
return this.minimizable && player.minimized[this.layer];
},
name() {
return layers[this.layer].name;
},
floating() {
return themes[player.theme].floatingTabs;
},
style() {
const style = [];
if (layers[this.layer].style) {
style.push(layers[this.layer].style);
}
if (layers[this.layer].activeSubtab?.style) {
style.push(layers[this.layer].activeSubtab.style);
}
return style;
},
display() {
if (layers[this.layer].activeSubtab?.display) {
return coerceComponent(layers[this.layer].activeSubtab.display);
}
if (layers[this.layer].display) {
return coerceComponent(layers[this.layer].display);
}
return null;
},
subtabs() {
if (layers[this.layer].subtabs) {
return Object.entries(layers[this.layer].subtabs)
.filter(subtab => isPlainObject(subtab[1]) && subtab[1].unlocked !== false)
.reduce((acc, curr) => {
acc[curr[0]] = curr[1];
return acc;
}, {});
}
return null;
},
activeSubtab() {
return layers[this.layer].activeSubtab?.id;
},
firstTab() {
if (this.forceFirstTab != undefined) {
return this.forceFirstTab;
}
return this.index === 0;
}
},
watch: {
minimized(newValue) {
if (this.tab == undefined) {
return;
}
const tab = this.tab();
if (tab != undefined) {
if (newValue) {
tab.style.flexGrow = 0;
tab.style.flexShrink = 0;
tab.style.width = "60px";
tab.style.minWidth = tab.style.flexBasis = null;
tab.style.margin = 0;
} else {
tab.style.flexGrow = null;
tab.style.flexShrink = null;
tab.style.width = null;
tab.style.minWidth = tab.style.flexBasis = `${layers[this.layer].minWidth}px`;
tab.style.margin = null;
}
}
}
},
mounted() {
if (this.tab == undefined) {
return;
}
const tab = this.tab();
if (tab != undefined) {
if (this.minimized) {
tab.style.flexGrow = 0;
tab.style.flexShrink = 0;
tab.style.width = "60px";
tab.style.minWidth = tab.style.flexBasis = null;
tab.style.margin = 0;
} else {
tab.style.flexGrow = null;
tab.style.flexShrink = null;
tab.style.width = null;
tab.style.minWidth = tab.style.flexBasis = `${layers[this.layer].minWidth}px`;
tab.style.margin = null;
}
} else {
this.$nextTick(this.mounted);
}
},
methods: {
selectSubtab(subtab) {
player.subtabs[this.layer].mainTabs = subtab;
},
toggleMinimized() {
player.minimized[this.layer] = !player.minimized[this.layer];
},
goBack(index) {
player.tabs = player.tabs.slice(0, index);
}
}
};
export default defineComponent({
name: "layer-tab",
props: {
layer: {
type: String,
required: true
},
index: Number,
forceFirstTab: Boolean,
minimizable: Boolean,
tab: Function
},
data() {
return { allowGoBack: modInfo.allowGoBack };
},
computed: {
minimized(): boolean {
return this.minimizable && player.minimized[this.layer];
},
name(): string {
return layers[this.layer].name || this.layer;
},
floating(): boolean {
return themes[player.theme].floatingTabs;
},
style(): Array<Partial<CSSStyleDeclaration> | undefined> {
const style = [];
if (layers[this.layer].style) {
style.push(layers[this.layer].style);
}
if (layers[this.layer].activeSubtab?.style) {
style.push(layers[this.layer].activeSubtab!.style);
}
return style;
},
display(): Component | string | null {
if (layers[this.layer].activeSubtab?.display) {
return coerceComponent(layers[this.layer].activeSubtab!.display!);
}
if (layers[this.layer].display) {
return coerceComponent(layers[this.layer].display!);
}
return null;
},
subtabs(): Record<string, Subtab> | null {
if (layers[this.layer].subtabs) {
return Object.entries(layers[this.layer].subtabs!)
.filter(subtab => subtab[1].unlocked !== false)
.reduce((acc: Record<string, Subtab>, curr: [string, Subtab]) => {
acc[curr[0]] = curr[1];
return acc;
}, {});
}
return null;
},
activeSubtab(): string | undefined {
return layers[this.layer].activeSubtab?.id;
},
firstTab(): boolean {
if (this.forceFirstTab != undefined) {
return this.forceFirstTab;
}
return this.index === 0;
}
},
watch: {
minimized(newValue) {
if (this.tab == undefined) {
return;
}
const tab = this.tab();
if (tab != undefined) {
if (newValue) {
tab.style.flexGrow = 0;
tab.style.flexShrink = 0;
tab.style.width = "60px";
tab.style.minWidth = tab.style.flexBasis = null;
tab.style.margin = 0;
} else {
tab.style.flexGrow = null;
tab.style.flexShrink = null;
tab.style.width = null;
tab.style.minWidth = tab.style.flexBasis = `${layers[this.layer].minWidth}px`;
tab.style.margin = null;
}
}
}
},
mounted() {
this.setup();
},
methods: {
setup() {
if (this.tab == undefined) {
return;
}
const tab = this.tab();
if (tab != undefined) {
if (this.minimized) {
tab.style.flexGrow = 0;
tab.style.flexShrink = 0;
tab.style.width = "60px";
tab.style.minWidth = tab.style.flexBasis = null;
tab.style.margin = 0;
} else {
tab.style.flexGrow = null;
tab.style.flexShrink = null;
tab.style.width = null;
tab.style.minWidth = tab.style.flexBasis = `${layers[this.layer].minWidth}px`;
tab.style.margin = null;
}
} else {
this.$nextTick(this.setup);
}
},
selectSubtab(subtab: string) {
player.subtabs[this.layer].mainTabs = subtab;
},
toggleMinimized() {
player.minimized[this.layer] = !player.minimized[this.layer];
},
goBack(index: number) {
player.tabs = player.tabs.slice(0, index);
}
}
});
</script>
<style scoped>
.layer-container {
min-width: 100%;
min-height: 100%;
margin: 0;
min-width: 100%;
min-height: 100%;
margin: 0;
flex-grow: 1;
display: flex;
}
.layer-tab:not(.minimized) {
padding-top: 20px;
padding-bottom: 20px;
min-height: 100%;
padding-top: 20px;
padding-bottom: 20px;
min-height: 100%;
flex-grow: 1;
text-align: center;
position: relative;
}
.inner-tab > .layer-container > .layer-tab:not(.minimized) {
padding-top: 50px;
padding-top: 50px;
}
.layer-tab.minimized {
@ -191,18 +222,18 @@ export default {
.layer-tab.minimized div {
margin: 0;
writing-mode: vertical-rl;
writing-mode: vertical-rl;
padding-left: 10px;
width: 50px;
}
.inner-tab > .layer-container > .layer-tab:not(.minimized) {
margin: -50px -10px;
padding: 50px 10px;
margin: -50px -10px;
padding: 50px 10px;
}
.layer-tab .subtabs {
margin-bottom: 24px;
margin-bottom: 24px;
display: flex;
flex-flow: wrap;
padding-right: 60px;
@ -210,38 +241,38 @@ export default {
}
.subtabs-container:not(.floating) {
border-top: solid 4px var(--separator);
border-bottom: solid 4px var(--separator);
border-top: solid 4px var(--separator);
border-bottom: solid 4px var(--separator);
}
.subtabs-container:not(.floating) .subtabs {
width: calc(100% + 14px);
margin-left: -7px;
margin-right: -7px;
box-sizing: border-box;
text-align: left;
padding-left: 14px;
margin-bottom: -4px;
width: calc(100% + 14px);
margin-left: -7px;
margin-right: -7px;
box-sizing: border-box;
text-align: left;
padding-left: 14px;
margin-bottom: -4px;
}
.subtabs-container.floating .subtabs {
justify-content: center;
margin-top: -25px;
justify-content: center;
margin-top: -25px;
}
.modal-body .layer-tab {
padding-bottom: 0;
padding-bottom: 0;
}
.modal-body .layer-tab:not(.hasSubtabs) {
padding-top: 0;
padding-top: 0;
}
.modal-body .subtabs {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 0;
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 0;
}
.subtabs-container:not(.floating).firstTab .subtabs {
@ -250,7 +281,7 @@ export default {
}
.subtabs-container:not(.floating):first-child {
border-top: 0;
border-top: 0;
}
.subtabs-container.minimizable:not(.floating):first-child {
@ -258,11 +289,11 @@ export default {
}
.subtabs-container:not(.floating):first-child .subtabs {
margin-top: -50px;
margin-top: -50px;
}
.subtabs-container:not(.floating):not(.firstTab) .subtabs {
padding-left: 70px;
padding-left: 70px;
}
.minimize {
@ -283,7 +314,7 @@ export default {
}
.minimized + .minimize {
transform: rotate(-90deg);
transform: rotate(-90deg);
top: 10px;
}

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

@ -1,83 +1,104 @@
<template>
<div v-if="microtabs" class="microtabs">
<LayerProvider :layer="layer || tab.layer" :index="tab.index">
<div v-if="microtabs" class="tabs" :class="{ floating }">
<tab-button v-for="(microtab, id) in microtabs" @selectTab="selectMicrotab(id)" :key="id"
:activeTab="id === activeMicrotab.id" :options="microtab" :text="id" />
</div>
<layer-tab v-if="embed" :layer="embed" />
<component v-else :is="display" />
</LayerProvider>
</div>
<div v-if="microtabs" class="microtabs">
<LayerProvider :layer="layer" :index="tab.index">
<div v-if="microtabs" class="tabs" :class="{ floating }">
<tab-button
v-for="(microtab, id) in microtabs"
@selectTab="selectMicrotab(id)"
:key="id"
:activeTab="id === activeMicrotab?.id"
:options="microtab"
:text="id"
/>
</div>
<template v-if="activeMicrotab">
<layer-tab v-if="embed" :layer="embed" />
<component v-else :is="display" />
</template>
</LayerProvider>
</div>
</template>
<script>
import { layers } from '../../game/layers';
import player from '../../game/player';
import { coerceComponent } from '../../util/vue';
import themes from '../../data/themes';
<script lang="ts">
import themes from "@/data/themes";
import { layers } from "@/game/layers";
import player from "@/game/player";
import { Microtab, MicrotabFamily } from "@/typings/features/subtab";
import { coerceComponent, InjectLayerMixin } from "@/util/vue";
import { Component, defineComponent } from "vue";
export default {
name: 'microtab',
inject: [ 'tab' ],
props: {
layer: String,
family: String,
id: String
},
computed: {
floating() {
return themes[player.theme].floatingTabs;
},
tabFamily() {
return layers[this.layer || this.tab.layer].microtabs[this.family];
},
microtabs() {
return Object.keys(this.tabFamily)
.filter(microtab =>
microtab !== 'activeMicrotab' && this.tabFamily[microtab].isProxy && this.tabFamily[microtab].unlocked !== false)
.reduce((acc, curr) => {
acc[curr] = this.tabFamily[curr];
return acc;
}, {});
},
activeMicrotab() {
return this.id != undefined ? this.tabFamily[this.id] : this.tabFamily.activeMicrotab;
},
embed() {
return this.activeMicrotab.embedLayer;
},
display() {
return coerceComponent(this.activeMicrotab.display);
}
},
methods: {
selectMicrotab(tab) {
player.subtabs[this.layer || this.tab.layer][this.family] = tab;
}
}
};
export default defineComponent({
name: "microtab",
mixins: [InjectLayerMixin],
props: {
family: {
type: String,
required: true
},
id: {
type: String,
required: true
}
},
computed: {
floating() {
return themes[player.theme].floatingTabs;
},
tabFamily(): MicrotabFamily {
return layers[this.layer].microtabs![this.family];
},
microtabs(): Record<string, Microtab> {
return Object.keys(this.tabFamily.data)
.filter(
microtab =>
microtab !== "activeMicrotab" &&
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;
}, {});
},
activeMicrotab(): Microtab | undefined {
return this.id != undefined
? this.tabFamily.data[this.id]
: this.tabFamily.activeMicrotab;
},
embed(): string | undefined {
return this.activeMicrotab!.embedLayer;
},
display(): Component | string | undefined {
return this.activeMicrotab!.display && coerceComponent(this.activeMicrotab!.display!);
}
},
methods: {
selectMicrotab(tab: string) {
player.subtabs[this.layer][this.family] = tab;
}
}
});
</script>
<style scoped>
.microtabs {
margin: var(--feature-margin) -11px;
position: relative;
border: solid 4px var(--separator);
margin: var(--feature-margin) -11px;
position: relative;
border: solid 4px var(--separator);
}
.tabs:not(.floating) {
text-align: left;
border-bottom: inherit;
border-width: 4px;
box-sizing: border-box;
height: 50px;
text-align: left;
border-bottom: inherit;
border-width: 4px;
box-sizing: border-box;
height: 50px;
}
</style>
<style>
.microtabs .sticky {
margin-left: unset !important;
margin-right: unset !important;
margin-left: unset !important;
margin-right: unset !important;
}
</style>

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

@ -1,92 +1,106 @@
<template>
<teleport to="#modal-root">
<transition 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-container">
<div class="modal-header">
<slot name="header" :shown="isVisible">
default header
</slot>
</div>
<div class="modal-body">
<branches>
<slot name="body" :shown="isVisible">
default body
</slot>
</branches>
</div>
<div class="modal-footer">
<slot name="footer" :shown="isVisible">
<div class="modal-default-footer">
<div class="modal-default-flex-grow"></div>
<button class="button modal-default-button" @click="$emit('close')">
Close
</button>
</div>
</slot>
</div>
</div>
</div>
</div>
</transition>
</teleport>
<teleport to="#modal-root">
<transition
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-container">
<div class="modal-header">
<slot name="header" :shown="isVisible">
default header
</slot>
</div>
<div class="modal-body">
<branches>
<slot name="body" :shown="isVisible">
default body
</slot>
</branches>
</div>
<div class="modal-footer">
<slot name="footer" :shown="isVisible">
<div class="modal-default-footer">
<div class="modal-default-flex-grow"></div>
<button
class="button modal-default-button"
@click="$emit('close')"
>
Close
</button>
</div>
</slot>
</div>
</div>
</div>
</div>
</transition>
</teleport>
</template>
<script>
export default {
name: 'Modal',
data() {
return {
isAnimating: false
}
},
props: {
show: Boolean
},
emits: [ 'close' ],
computed: {
isVisible() {
return this.show || this.isAnimating;
}
},
methods: {
setAnimating(isAnimating) {
this.isAnimating = isAnimating;
}
}
}
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "Modal",
data() {
return {
isAnimating: false
};
},
props: {
show: Boolean
},
emits: ["close"],
computed: {
isVisible(): boolean {
return this.show || this.isAnimating;
}
},
methods: {
setAnimating(isAnimating: boolean) {
this.isAnimating = isAnimating;
}
}
});
</script>
<style scoped>
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
transition: opacity 0.3s ease;
position: fixed;
z-index: 9998;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
transition: opacity 0.3s ease;
}
.modal-wrapper {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.modal-container {
width: 640px;
max-width: 95vw;
width: 640px;
max-width: 95vw;
max-height: 95vh;
background-color: var(--background);
padding: 20px;
border-radius: 5px;
transition: all 0.3s ease;
text-align: left;
border: var(--modal-border);
background-color: var(--background);
padding: 20px;
border-radius: 5px;
transition: all 0.3s ease;
text-align: left;
border: var(--modal-border);
box-sizing: border-box;
display: flex;
flex-direction: column;
@ -97,7 +111,7 @@ export default {
}
.modal-body {
margin: 20px 0;
margin: 20px 0;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
@ -108,24 +122,24 @@ export default {
}
.modal-default-footer {
display: flex;
display: flex;
}
.modal-default-flex-grow {
flex-grow: 1;
flex-grow: 1;
}
.modal-enter-from {
opacity: 0;
opacity: 0;
}
.modal-leave-active {
opacity: 0;
opacity: 0;
}
.modal-enter-from .modal-container,
.modal-leave-active .modal-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
</style>

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

@ -1,115 +1,137 @@
<template>
<Modal :show="hasNaN" v-bind="$attrs">
<template v-slot:header>
<div class="nan-modal-header">
<h2>NaN value detected!</h2>
</div>
</template>
<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>
<br>
<div>
<a :href="discordLink" class="nan-modal-discord-link">
<img src="images/discord.png" class="nan-modal-discord" />
{{ discordName }}
</a>
</div>
<br>
<Toggle title="Autosave" :value="autosave" @change="setAutosave" />
<Toggle title="Pause game" :value="paused" @change="togglePaused" />
</template>
<template v-slot:footer>
<div class="nan-footer">
<button @click="toggleSavesManager" class="button">Open Saves Manager</button>
<button @click="setZero" class="button">Set to 0</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="ignore" class="button danger">Ignore</button>
</div>
</template>
</Modal>
<SavesManager :show="showSaves" @closeDialog="toggleSavesManager" />
<Modal :show="hasNaN" v-bind="$attrs">
<template v-slot:header>
<div class="nan-modal-header">
<h2>NaN value detected!</h2>
</div>
</template>
<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>
<br />
<div>
<a :href="discordLink" class="nan-modal-discord-link">
<img src="images/discord.png" class="nan-modal-discord" />
{{ discordName }}
</a>
</div>
<br />
<Toggle title="Autosave" :value="autosave" @change="setAutosave" />
<Toggle title="Pause game" :value="paused" @change="togglePaused" />
</template>
<template v-slot:footer>
<div class="nan-footer">
<button @click="toggleSavesManager" class="button">
Open Saves Manager
</button>
<button @click="setZero" class="button">Set to 0</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="ignore" class="button danger">Ignore</button>
</div>
</template>
</Modal>
<SavesManager :show="showSaves" @closeDialog="toggleSavesManager" />
</template>
<script>
import modInfo from '../../data/modInfo.json';
import Decimal, { format } from '../../util/bignum';
import { mapState } from '../../util/vue';
import player from '../../game/player';
<script lang="ts">
import modInfo from "@/data/modInfo.json";
import player from "@/game/player";
import Decimal, { format } from "@/util/bignum";
import { mapState } from "@/util/vue";
import { defineComponent } from "vue";
export default {
name: 'NaNScreen',
data() {
const { discordName, discordLink } = modInfo;
return { discordName, discordLink, format, showSaves: false };
},
computed: {
...mapState([ 'hasNaN', 'autosave' ]),
path() {
return player.NaNPath.join('.');
},
previous() {
return player.NaNReceiver?.[this.property];
},
paused() {
return player.devSpeed === 0;
},
property() {
return player.NaNPath.slice(-1)[0];
}
},
methods: {
setZero() {
player.NaNReceiver[this.property] = new Decimal(0);
player.hasNaN = false;
},
setOne() {
player.NaNReceiver[this.property] = new Decimal(1);
player.hasNaN = false;
},
setPrev() {
player.hasNaN = false;
},
ignore() {
player.NaNReceiver[this.property] = new Decimal(NaN);
player.hasNaN = false;
},
setAutosave(autosave) {
player.autosave = autosave;
},
toggleSavesManager() {
this.showSaves = !this.showSaves;
},
togglePaused() {
player.devSpeed = this.paused ? 1 : 0;
}
}
};
export default defineComponent({
name: "NaNScreen",
data() {
const { discordName, discordLink } = modInfo;
return { discordName, discordLink, format, showSaves: false };
},
computed: {
...mapState(["hasNaN", "autosave"]),
path(): string | undefined {
return player.NaNPath?.join(".");
},
previous(): any {
if (player.NaNReceiver && this.property) {
return player.NaNReceiver[this.property];
}
return null;
},
paused() {
return player.devSpeed === 0;
},
property(): string | undefined {
return player.NaNPath?.slice(-1)[0];
}
},
methods: {
setZero() {
if (player.NaNReceiver && this.property) {
player.NaNReceiver[this.property] = new Decimal(0);
player.hasNaN = false;
}
},
setOne() {
if (player.NaNReceiver && this.property) {
player.NaNReceiver[this.property] = new Decimal(1);
player.hasNaN = false;
}
},
setPrev() {
player.hasNaN = false;
},
ignore() {
if (player.NaNReceiver && this.property) {
player.NaNReceiver[this.property] = new Decimal(NaN);
player.hasNaN = false;
}
},
setAutosave(autosave: boolean) {
player.autosave = autosave;
},
toggleSavesManager() {
this.showSaves = !this.showSaves;
},
togglePaused() {
player.devSpeed = this.paused ? 1 : 0;
}
}
});
</script>
<style scoped>
.nan-modal-header {
padding: 10px 0;
padding: 10px 0;
margin-left: 10px;
}
.nan-footer {
display: flex;
display: flex;
justify-content: flex-end;
}
.nan-footer button {
margin: 0 10px;
margin: 0 10px;
}
.nan-modal-discord-link {
display: flex;
align-items: center;
display: flex;
align-items: center;
}
.nan-modal-discord {
height: 2em;
margin: 0;
margin-right: 4px;
height: 2em;
margin: 0;
margin-right: 4px;
}
</style>

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

@ -1,146 +1,174 @@
<template>
<div class="nav" v-if="useHeader" v-bind="$attrs">
<img v-if="banner" :src="banner" height="100%" :alt="title" />
<div v-else class="title">{{ title }}</div>
<div @click="openDialog('Changelog')" class="version-container">
<tooltip display="Changelog" bottom class="version"><span>v{{ version }}</span></tooltip>
</div>
<div style="flex-grow: 1; cursor: unset;"></div>
<div class="discord">
<img src="images/discord.png" @click="window.open(discordLink, 'mywindow')" />
<ul class="discord-links">
<li v-if="discordLink !== 'https://discord.gg/WzejVAx'">
<a :href="discordLink" target="_blank">{{ discordName }}</a>
</li>
<li><a href="https://discord.gg/WzejVAx" target="_blank">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>
</div>
<div @click="openDialog('Info')">
<tooltip display="<span>Info</span>" bottom class="info"><span>i</span></tooltip>
</div>
<div @click="openDialog('Saves')">
<tooltip display="Saves" bottom class="saves" xoffset="-20px">
<span class="material-icons">library_books</span>
</tooltip>
</div>
<div @click="openDialog('Options')">
<tooltip display="<span>Options</span>" bottom class="options" xoffset="-70px">
<img src="images/options_wheel.png" />
</tooltip>
</div>
</div>
<div v-else class="overlay-nav" v-bind="$attrs">
<div @click="openDialog('Changelog')" class="version-container">
<tooltip display="Changelog" right xoffset="25%" class="version"><span>v{{ version }}</span></tooltip>
</div>
<div @click="openDialog('Saves')">
<tooltip display="Saves" right class="saves"><span class="material-icons">library_books</span></tooltip>
</div>
<div @click="openDialog('Options')">
<tooltip display="<span>Options</span>" right class="options"><img src="images/options_wheel.png" /></tooltip>
</div>
<div @click="openDialog('Info')">
<tooltip display="<span>Info</span>" right class="info"><span>i</span></tooltip>
</div>
<div class="discord">
<img src="images/discord.png" @click="openDiscord" />
<ul class="discord-links">
<li v-if="discordLink !== 'https://discord.gg/WzejVAx'">
<a :href="discordLink" target="_blank">{{ discordName }}</a>
</li>
<li><a href="https://discord.gg/WzejVAx" target="_blank">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>
</div>
</div>
<Info :show="showInfo" @openDialog="openDialog" @closeDialog="closeDialog" />
<SavesManager :show="showSaves" @closeDialog="closeDialog" />
<Options :show="showOptions" @closeDialog="closeDialog" />
<div class="nav" v-if="useHeader" v-bind="$attrs">
<img v-if="banner" :src="banner" height="100%" :alt="title" />
<div v-else class="title">{{ title }}</div>
<div @click="openDialog('Changelog')" class="version-container">
<tooltip display="Changelog" bottom class="version"
><span>v{{ version }}</span></tooltip
>
</div>
<div style="flex-grow: 1; cursor: unset;"></div>
<div class="discord">
<img src="images/discord.png" @click="window.open(discordLink, 'mywindow')" />
<ul class="discord-links">
<li v-if="discordLink !== 'https://discord.gg/WzejVAx'">
<a :href="discordLink" target="_blank">{{ discordName }}</a>
</li>
<li>
<a href="https://discord.gg/WzejVAx" target="_blank"
>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>
</div>
<div @click="openDialog('Info')">
<tooltip display="<span>Info</span>" bottom class="info"><span>i</span></tooltip>
</div>
<div @click="openDialog('Saves')">
<tooltip display="Saves" bottom class="saves" xoffset="-20px">
<span class="material-icons">library_books</span>
</tooltip>
</div>
<div @click="openDialog('Options')">
<tooltip display="<span>Options</span>" bottom class="options" xoffset="-70px">
<img src="images/options_wheel.png" />
</tooltip>
</div>
</div>
<div v-else class="overlay-nav" v-bind="$attrs">
<div @click="openDialog('Changelog')" class="version-container">
<tooltip display="Changelog" right xoffset="25%" class="version"
><span>v{{ version }}</span></tooltip
>
</div>
<div @click="openDialog('Saves')">
<tooltip display="Saves" right class="saves"
><span class="material-icons">library_books</span></tooltip
>
</div>
<div @click="openDialog('Options')">
<tooltip display="<span>Options</span>" right class="options"
><img src="images/options_wheel.png"
/></tooltip>
</div>
<div @click="openDialog('Info')">
<tooltip display="<span>Info</span>" right class="info"><span>i</span></tooltip>
</div>
<div class="discord">
<img src="images/discord.png" @click="openDiscord" />
<ul class="discord-links">
<li v-if="discordLink !== 'https://discord.gg/WzejVAx'">
<a :href="discordLink" target="_blank">{{ discordName }}</a>
</li>
<li>
<a href="https://discord.gg/WzejVAx" target="_blank"
>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>
</div>
</div>
<Info :show="showInfo" @openDialog="openDialog" @closeDialog="closeDialog" />
<SavesManager :show="showSaves" @closeDialog="closeDialog" />
<Options :show="showOptions" @closeDialog="closeDialog" />
</template>
<script>
import modInfo from '../../data/modInfo';
<script lang="ts">
import modInfo from "@/data/modInfo.json";
import { defineComponent } from "vue";
export default {
name: 'Nav',
data() {
return {
useHeader: modInfo.useHeader,
banner: modInfo.banner,
title: modInfo.title,
discordName: modInfo.discordName,
discordLink: modInfo.discordLink,
version: modInfo.versionNumber,
showInfo: false,
showSaves: false,
showOptions: false,
showChangelog: false
}
},
methods: {
openDiscord() {
window.open(this.discordLink, 'mywindow');
},
openDialog(dialog) {
this[`show${dialog}`] = true;
},
closeDialog(dialog) {
this[`show${dialog}`] = false;
}
}
};
type modals = "Info" | "Saves" | "Options" | "Changelog";
type showModals = "showInfo" | "showSaves" | "showOptions" | "showChangelog";
export default defineComponent({
name: "Nav",
data() {
return {
useHeader: modInfo.useHeader,
banner: modInfo.banner,
title: modInfo.title,
discordName: modInfo.discordName,
discordLink: modInfo.discordLink,
version: modInfo.versionNumber,
showInfo: false,
showSaves: false,
showOptions: false,
showChangelog: false
};
},
methods: {
openDiscord() {
window.open(this.discordLink, "mywindow");
},
openDialog(dialog: modals) {
this[`show${dialog}` as showModals] = true;
},
closeDialog(dialog: modals) {
this[`show${dialog}` as showModals] = false;
}
}
});
</script>
<style scoped>
.nav {
background-color: var(--secondary-background);
display: flex;
left: 0;
right: 0;
top: 0;
height: 46px;
width: 100%;
border-bottom: 4px solid var(--separator);
background-color: var(--secondary-background);
display: flex;
left: 0;
right: 0;
top: 0;
height: 46px;
width: 100%;
border-bottom: 4px solid var(--separator);
}
.nav > * {
height: 46px;
width: 46px;
display: flex;
cursor: pointer;
cursor: pointer;
}
.overlay-nav {
position: absolute;
top: 10px;
left: 10px;
display: flex;
flex-direction: column;
z-index: 1;
position: absolute;
top: 10px;
left: 10px;
display: flex;
flex-direction: column;
z-index: 1;
}
.overlay-nav > * {
height: 50px;
width: 50px;
display: flex;
cursor: pointer;
margin: 0;
cursor: pointer;
margin: 0;
align-items: center;
justify-content: center;
}
.title {
font-size: 36px;
text-align: left;
margin-left: 12px;
cursor: unset;
font-size: 36px;
text-align: left;
margin-left: 12px;
cursor: unset;
}
.nav > .title {
width: unset;
width: unset;
}
.nav .saves,
@ -149,36 +177,36 @@ export default {
}
.tooltip-container {
width: 100%;
height: 100%;
width: 100%;
height: 100%;
display: flex;
}
.overlay-nav .discord {
position: relative;
position: relative;
}
.discord img {
width: 100%;
height: 100%;
width: 100%;
height: 100%;
}
.discord-links {
position: fixed;
top: 45px;
padding: 20px;
right: -280px;
width: 200px;
transition: right .25s ease;
background: var(--secondary-background);
z-index: 10;
position: fixed;
top: 45px;
padding: 20px;
right: -280px;
width: 200px;
transition: right 0.25s ease;
background: var(--secondary-background);
z-index: 10;
}
.overlay-nav .discord-links {
position: absolute;
position: absolute;
left: -280px;
right: unset;
transition: left .25s ease;
transition: left 0.25s ease;
}
.overlay-nav .discord:hover .discord-links {
@ -186,7 +214,7 @@ export default {
}
.discord-links li {
margin-bottom: 4px;
margin-bottom: 4px;
}
.discord-links li:first-child {
@ -194,38 +222,36 @@ export default {
}
*:not(.overlay-nav) .discord:hover .discord-links {
right: 0;
right: 0;
}
.info {
font-size: 30px;
color: var(--link);
line-height: 14px;
font-size: 30px;
color: var(--link);
line-height: 14px;
}
.info:hover span {
transform: scale(1.2, 1.2);
text-shadow: 5px 0 10px var(--link),
-3px 0 12px var(--link);
transform: scale(1.2, 1.2);
text-shadow: 5px 0 10px var(--link), -3px 0 12px var(--link);
}
.saves span {
font-size: 36px;
font-size: 36px;
}
.saves:hover span {
transform: scale(1.2, 1.2);
text-shadow: 5px 0 10px var(--color),
-3px 0 12px var(--color);
transform: scale(1.2, 1.2);
text-shadow: 5px 0 10px var(--color), -3px 0 12px var(--color);
}
.options img {
width: 100%;
height: 100%;
width: 100%;
height: 100%;
}
.options:hover img {
transform: rotate(360deg);
transform: rotate(360deg);
}
.nav .version-container {
@ -236,17 +262,17 @@ export default {
}
.overlay-nav .version-container {
width: unset;
height: 25px;
width: unset;
height: 25px;
}
.version {
color: var(--points);
color: var(--points);
}
.version:hover span {
transform-origin: 0% 50%;
transform: scale(1.2, 1.2);
text-shadow: 5px 0 10px var(--points), -3px 0 12px var(--points);
transform-origin: 0% 50%;
transform: scale(1.2, 1.2);
text-shadow: 5px 0 10px var(--points), -3px 0 12px var(--points);
}
</style>

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

@ -1,66 +1,93 @@
<template>
<Modal :show="show" @close="$emit('closeDialog', 'Options')">
<template v-slot:header>
<div class="header">
<h2>Options</h2>
</div>
</template>
<template v-slot:body>
<Select title="Theme" :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="Pause game" :value="paused" @change="togglePaused" />
<Toggle title="Show TPS" :value="showTPS" @change="toggleOption('showTPS')" />
<Toggle title="Hide Maxed Challenges" :value="hideChallenges" @change="toggleOption('hideChallenges')" />
</template>
</Modal>
<Modal :show="show" @close="$emit('closeDialog', 'Options')">
<template v-slot:header>
<div class="header">
<h2>Options</h2>
</div>
</template>
<template v-slot:body>
<Select
title="Theme"
: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="Pause game" :value="paused" @change="togglePaused" />
<Toggle title="Show TPS" :value="showTPS" @change="toggleOption('showTPS')" />
<Toggle
title="Hide Maxed Challenges"
:value="hideChallenges"
@change="toggleOption('hideChallenges')"
/>
</template>
</Modal>
</template>
<script>
import themes from '../../data/themes';
import { camelToTitle } from '../../util/common';
import { mapState } from '../../util/vue';
import player from '../../game/player';
<script lang="ts">
import { defineComponent } from "vue";
import themes, { Themes } from "@/data/themes";
import { camelToTitle } from "@/util/common";
import { mapState } from "@/util/vue";
import player from "@/game/player";
import { MilestoneDisplay } from "@/game/enums";
export default {
name: 'Options',
props: {
show: Boolean
},
emits: [ 'closeDialog' ],
data() {
return {
themes: Object.keys(themes).map(theme => ({ label: camelToTitle(theme), value: theme })),
msDisplayOptions: [ "all", "last", "configurable", "incomplete", "none" ]
.map(option => ({ label: camelToTitle(option), value: option }))
}
},
computed: {
...mapState([ "autosave", "offlineProd", "showTPS", "hideChallenges", "theme", "msDisplay" ]),
paused() {
return player.devSpeed === 0;
}
},
methods: {
toggleOption(option) {
player[option] = !player[option];
},
setTheme(theme) {
player.theme = theme;
},
setMSDisplay(msDisplay) {
player.msDisplay = msDisplay;
},
togglePaused() {
player.devSpeed = this.paused ? 1 : 0;
}
}
};
export default defineComponent({
name: "Options",
props: {
show: Boolean
},
emits: ["closeDialog"],
data() {
return {
themes: Object.keys(themes).map(theme => ({
label: camelToTitle(theme),
value: theme
})),
msDisplayOptions: ["all", "last", "configurable", "incomplete", "none"].map(option => ({
label: camelToTitle(option),
value: option
}))
};
},
computed: {
...mapState(["autosave", "offlineProd", "showTPS", "hideChallenges", "theme", "msDisplay"]),
paused() {
return player.devSpeed === 0;
}
},
methods: {
toggleOption(option: string) {
player[option] = !player[option];
},
setTheme(theme: Themes) {
player.theme = theme;
},
setMSDisplay(msDisplay: MilestoneDisplay) {
player.msDisplay = msDisplay;
},
togglePaused() {
player.devSpeed = this.paused ? 1 : 0;
}
}
});
</script>
<style scoped>
.header {
margin-bottom: -10px;
margin-bottom: -10px;
}
</style>

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

@ -1,18 +1,19 @@
<template>
<h2 v-bind:style="{ color, 'text-shadow': '0px 0px 10px ' + color }">
{{ amount }}
</h2>
<h2 v-bind:style="{ color, 'text-shadow': '0px 0px 10px ' + color }">
{{ amount }}
</h2>
</template>
<script>
export default {
name: 'resource',
props: {
color: String,
amount: String
}
};
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "resource",
props: {
color: String,
amount: String
}
});
</script>
<style scoped>
</style>
<style scoped></style>

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

@ -1,13 +1,15 @@
<template>
<div class="table">
<div class="row">
<slot />
</div>
</div>
<div class="table">
<div class="row">
<slot />
</div>
</div>
</template>
<script>
export default {
name: 'row'
};
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "row"
});
</script>

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

@ -1,102 +1,127 @@
<template>
<div class="save" :class="{ active }">
<div class='handle material-icons'>drag_handle</div>
<div class="actions" v-if="!editing">
<feedback-button @click="$emit('export')" class="button" left v-if="save.error == undefined && !confirming">
<span class="material-icons">content_paste</span>
</feedback-button>
<button @click="$emit('duplicate')" class="button" v-if="save.error == undefined && !confirming">
<span class="material-icons">content_copy</span>
</button>
<button @click="toggleEditing" class="button" v-if="save.error == undefined && !confirming">
<span class="material-icons">edit</span>
</button>
<danger-button :disabled="active" @click="$emit('delete')" @confirmingChanged="confirmingChanged">
<span class="material-icons" style="margin: -2px">delete</span>
</danger-button>
</div>
<div class="actions" v-else>
<button @click="changeName" class="button">
<span class="material-icons">check</span>
</button>
<button @click="toggleEditing" class="button">
<span class="material-icons">close</span>
</button>
</div>
<div class="details" v-if="save.error == undefined && !editing">
<button class="button open" @click="$emit('open')">
<h3>{{ save.name }}</h3>
</button>
<span class="save-version">v{{ save.modVersion }}</span><br>
<div>Last played {{ dateFormat.format(time) }}</div>
</div>
<div class="details" v-else-if="save.error == undefined && editing">
<TextField v-model="newName" class="editname" @submit="changeName" />
</div>
<div v-else class="details error">
Error: Failed to load save with id {{ save.id }}
</div>
</div>
<div class="save" :class="{ active }">
<div class="handle material-icons">drag_handle</div>
<div class="actions" v-if="!editing">
<feedback-button
@click="$emit('export')"
class="button"
left
v-if="save.error == undefined && !confirming"
>
<span class="material-icons">content_paste</span>
</feedback-button>
<button
@click="$emit('duplicate')"
class="button"
v-if="save.error == undefined && !confirming"
>
<span class="material-icons">content_copy</span>
</button>
<button
@click="toggleEditing"
class="button"
v-if="save.error == undefined && !confirming"
>
<span class="material-icons">edit</span>
</button>
<danger-button
:disabled="active"
@click="$emit('delete')"
@confirmingChanged="confirmingChanged"
>
<span class="material-icons" style="margin: -2px">delete</span>
</danger-button>
</div>
<div class="actions" v-else>
<button @click="changeName" class="button">
<span class="material-icons">check</span>
</button>
<button @click="toggleEditing" class="button">
<span class="material-icons">close</span>
</button>
</div>
<div class="details" v-if="save.error == undefined && !editing">
<button class="button open" @click="$emit('open')">
<h3>{{ save.name }}</h3>
</button>
<span class="save-version">v{{ save.modVersion }}</span
><br />
<div v-if="time">Last played {{ dateFormat.format(time) }}</div>
</div>
<div class="details" v-else-if="save.error == undefined && editing">
<TextField v-model="newName" class="editname" @submit="changeName" />
</div>
<div v-else class="details error">Error: Failed to load save with id {{ save.id }}</div>
</div>
</template>
<script>
import player from '../../game/player';
<script lang="ts">
import player from "@/game/player";
import { PlayerData } from "@/typings/player";
import { defineComponent, PropType } from "vue";
export default {
name: 'save',
props: {
save: Object
},
emits: [ 'export', 'open', 'duplicate', 'delete', 'editSave' ],
data() {
return {
dateFormat: new Intl.DateTimeFormat('en-US', {
year: 'numeric', month: 'numeric', day: 'numeric',
hour: 'numeric', minute: 'numeric', second: 'numeric',
}),
editing: false,
confirming: false,
newName: ""
};
},
computed: {
active() {
return this.save.id === player.id;
},
time() {
return this.active ? player.time : this.save.time;
}
},
methods: {
confirmingChanged(confirming) {
this.confirming = confirming;
},
toggleEditing() {
this.newName = this.save.name;
this.editing = !this.editing;
},
changeName() {
this.$emit('editSave', this.newName);
this.editing = false;
}
}
};
export default defineComponent({
name: "save",
props: {
save: {
type: Object as PropType<Partial<PlayerData>>,
required: true
}
},
emits: ["export", "open", "duplicate", "delete", "editSave"],
data() {
return {
dateFormat: new Intl.DateTimeFormat("en-US", {
year: "numeric",
month: "numeric",
day: "numeric",
hour: "numeric",
minute: "numeric",
second: "numeric"
}),
editing: false,
confirming: false,
newName: ""
};
},
computed: {
active(): boolean {
return this.save.id === player.id;
},
time(): number | undefined {
return this.active ? player.time : this.save.time;
}
},
methods: {
confirmingChanged(confirming: boolean) {
this.confirming = confirming;
},
toggleEditing() {
this.newName = this.save.name || "";
this.editing = !this.editing;
},
changeName() {
this.$emit("editSave", this.newName);
this.editing = false;
}
}
});
</script>
<style scoped>
.save {
position: relative;
border: solid 4px var(--separator);
padding: 4px;
background: var(--secondary-background);
margin: var(--feature-margin);
display: flex;
position: relative;
border: solid 4px var(--separator);
padding: 4px;
background: var(--secondary-background);
margin: var(--feature-margin);
display: flex;
align-items: center;
min-height: 30px;
}
.save.active {
border-color: var(--bought);
border-color: var(--bought);
}
.open {
@ -106,66 +131,66 @@ export default {
}
.handle {
flex-grow: 0;
margin-right: 8px;
margin-left: 0;
cursor: pointer;
flex-grow: 0;
margin-right: 8px;
margin-left: 0;
cursor: pointer;
}
.details {
margin: 0;
margin: 0;
flex-grow: 1;
margin-right: 80px;
}
.error {
font-size: .8em;
font-size: 0.8em;
color: var(--danger);
}
.save-version {
margin-left: 4px;
font-size: .7em;
opacity: .7;
margin-left: 4px;
font-size: 0.7em;
opacity: 0.7;
}
.actions {
position: absolute;
top: 0;
bottom: 0;
right: 4px;
display: flex;
padding: 4px;
background: inherit;
position: absolute;
top: 0;
bottom: 0;
right: 4px;
display: flex;
padding: 4px;
background: inherit;
z-index: 1;
}
.editname {
margin: 0;
margin: 0;
}
</style>
<style>
.save button {
transition-duration: 0s;
transition-duration: 0s;
}
.save .actions button {
display: flex;
font-size: 1.2em;
display: flex;
font-size: 1.2em;
}
.save .actions button .material-icons {
font-size: unset;
font-size: unset;
}
.save .button.danger {
display: flex;
align-items: center;
padding: 4px;
display: flex;
align-items: center;
padding: 4px;
}
.save .field {
margin: 0;
margin: 0;
}
</style>

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

@ -1,204 +1,290 @@
<template>
<Modal :show="show" @close="$emit('closeDialog', 'Saves')">
<template v-slot:header>
<h2>Saves Manager</h2>
</template>
<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)"
@editSave="name => editSave(save.id, name)" @duplicate="duplicateSave(save.id)" @delete="deleteSave(save.id)" />
</template>
<template v-slot:footer>
<div class="modal-footer">
<TextField :value="saveToImport" @submit="importSave" @input="importSave"
title="Import Save" placeholder="Paste your save here!" :class="{ importingFailed }" />
<div class="field">
<span class="field-title">Create Save</span>
<div class="field-buttons">
<button class="button" @click="newSave">New Game</button>
<Select v-if="Object.keys(bank).length > 0" :options="bank" closeOnSelect
@change="newFromPreset" placeholder="Select preset" class="presets" :value="[]" />
</div>
</div>
<div class="footer">
<div style="flex-grow: 1"></div>
<button class="button modal-default-button" @click="$emit('closeDialog', 'Saves')">
Close
</button>
</div>
</div>
</template>
</Modal>
<Modal :show="show" @close="$emit('closeDialog', 'Saves')">
<template v-slot:header>
<h2>Saves Manager</h2>
</template>
<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)"
@editSave="name => editSave(save.id, name)"
@duplicate="duplicateSave(save.id)"
@delete="deleteSave(save.id)"
/>
</template>
<template v-slot:footer>
<div class="modal-footer">
<TextField
:value="saveToImport"
@submit="importSave"
@input="importSave"
title="Import Save"
placeholder="Paste your save here!"
:class="{ importingFailed }"
/>
<div class="field">
<span class="field-title">Create Save</span>
<div class="field-buttons">
<button class="button" @click="newSave">New Game</button>
<Select
v-if="Object.keys(bank).length > 0"
:options="bank"
closeOnSelect
@change="newFromPreset"
placeholder="Select preset"
class="presets"
:value="[]"
/>
</div>
</div>
<div class="footer">
<div style="flex-grow: 1"></div>
<button
class="button modal-default-button"
@click="$emit('closeDialog', 'Saves')"
>
Close
</button>
</div>
</div>
</template>
</Modal>
</template>
<script>
import { newSave, getUniqueID, loadSave, save } from '../../util/save';
import player from '../../game/player';
import modInfo from '../../data/modInfo.json';
<script lang="ts">
import modInfo from "@/data/modInfo.json";
import player from "@/game/player";
import { PlayerData } from "@/typings/player";
import { getUniqueID, loadSave, newSave, save } from "@/util/save";
import { defineComponent } from "vue";
export default {
name: 'SavesManager',
props: {
show: Boolean
},
emits: [ 'closeDialog' ],
data() {
let bankContext = require.context('raw-loader!../../../saves', true, /\.txt$/);
let bank = bankContext.keys().reduce((acc, curr) => {
// .slice(2, -4) strips the leading ./ and the trailing .txt
acc.push({ label: curr.slice(2, -4), value: bankContext(curr).default });
return acc;
}, []);
return {
importingFailed: false,
saves: {}, // Gets populated when the modal is opened
saveToImport: "",
bank
};
},
watch: {
show(newValue) {
if (newValue) {
this.loadSaveData();
}
}
},
methods: {
loadSaveData() {
try {
const { saves } = JSON.parse(decodeURIComponent(escape(atob(localStorage.getItem(modInfo.id)))));
this.saves = saves.reduce((acc, curr) => {
try {
acc[curr] = JSON.parse(decodeURIComponent(escape(atob(localStorage.getItem(curr)))));
acc[curr].id = curr;
} catch(error) {
console.warn(`Can't load save with id "${curr}"`, error);
acc[curr] = { error, id: curr };
}
return acc;
}, {});
} catch(e) {
this.saves = { [ player.id ]: player };
const modData = { active: player.id, saves: [ player.id ] };
localStorage.setItem(modInfo.id, btoa(unescape(encodeURIComponent(JSON.stringify(modData)))));
}
},
exportSave(id) {
let saveToExport;
if (player.id === id) {
save();
saveToExport = player.saveToExport;
} else {
saveToExport = btoa(unescape(encodeURIComponent(JSON.stringify(this.saves[id]))));
}
export default defineComponent({
name: "SavesManager",
props: {
show: Boolean
},
emits: ["closeDialog"],
data() {
let bankContext = require.context("raw-loader!../../../saves", true, /\.txt$/);
let bank = bankContext
.keys()
.reduce((acc: Array<{ label: string; value: string }>, curr) => {
// .slice(2, -4) strips the leading ./ and the trailing .txt
acc.push({
label: curr.slice(2, -4),
value: bankContext(curr).default
});
return acc;
}, []);
return {
importingFailed: false,
saves: {}, // Gets populated when the modal is opened
saveToImport: "",
bank
} as {
importingFailed: boolean;
saves: Record<string, Partial<PlayerData>>;
saveToImport: string;
bank: Array<{ label: string; value: string }>;
};
},
watch: {
show(newValue) {
if (newValue) {
this.loadSaveData();
}
}
},
methods: {
loadSaveData() {
try {
const { saves } = JSON.parse(
decodeURIComponent(escape(atob(localStorage.getItem(modInfo.id)!)))
);
this.saves = saves.reduce(
(acc: Record<string, Partial<PlayerData>>, curr: string) => {
try {
acc[curr] = JSON.parse(
decodeURIComponent(escape(atob(localStorage.getItem(curr)!)))
);
acc[curr].id = curr;
} catch (error) {
console.warn(`Can't load save with id "${curr}"`, error);
acc[curr] = { error, id: curr };
}
return acc;
},
{}
);
} catch (e) {
this.saves = { [player.id]: player };
const modData = { active: player.id, saves: [player.id] };
localStorage.setItem(
modInfo.id,
btoa(unescape(encodeURIComponent(JSON.stringify(modData))))
);
}
},
exportSave(id: string) {
let saveToExport;
if (player.id === id) {
save();
saveToExport = player.saveToExport;
} else {
saveToExport = btoa(unescape(encodeURIComponent(JSON.stringify(this.saves[id]))));
}
// Put on clipboard. Using the clipboard API asks for permissions and stuff
const el = document.createElement("textarea");
el.value = saveToExport;
document.body.appendChild(el);
el.select();
el.setSelectionRange(0, 99999);
document.execCommand("copy");
document.body.removeChild(el);
},
duplicateSave(id) {
if (player.id === id) {
save();
}
// Put on clipboard. Using the clipboard API asks for permissions and stuff
const el = document.createElement("textarea");
el.value = saveToExport;
document.body.appendChild(el);
el.select();
el.setSelectionRange(0, 99999);
document.execCommand("copy");
document.body.removeChild(el);
},
duplicateSave(id: string) {
if (player.id === id) {
save();
}
const playerData = { ...this.saves[id], id: getUniqueID() };
localStorage.setItem(playerData.id, btoa(unescape(encodeURIComponent(JSON.stringify(playerData)))));
const playerData = { ...this.saves[id], id: getUniqueID() };
localStorage.setItem(
playerData.id,
btoa(unescape(encodeURIComponent(JSON.stringify(playerData))))
);
const modData = JSON.parse(decodeURIComponent(escape(atob(localStorage.getItem(modInfo.id)))));
modData.saves.push(playerData.id);
localStorage.setItem(modInfo.id, btoa(unescape(encodeURIComponent(JSON.stringify(modData)))));
this.saves[playerData.id] = playerData;
},
deleteSave(id) {
const modData = JSON.parse(decodeURIComponent(escape(atob(localStorage.getItem(modInfo.id)))));
modData.saves = modData.saves.filter(save => save !== id);
localStorage.removeItem(id);
localStorage.setItem(modInfo.id, btoa(unescape(encodeURIComponent(JSON.stringify(modData)))));
delete this.saves[id];
},
openSave(id) {
this.saves[player.id].time = player.time;
loadSave(this.saves[id]);
const modData = JSON.parse(decodeURIComponent(escape(atob(localStorage.getItem(modInfo.id)))));
modData.active = id;
localStorage.setItem(modInfo.id, btoa(unescape(encodeURIComponent(JSON.stringify(modData)))));
},
async newSave() {
const playerData = await newSave();
this.saves[playerData.id] = playerData;
},
newFromPreset(preset) {
const playerData = JSON.parse(decodeURIComponent(escape(atob(preset))));
playerData.id = getUniqueID();
localStorage.setItem(playerData.id, btoa(unescape(encodeURIComponent(JSON.stringify(playerData)))));
const modData = JSON.parse(
decodeURIComponent(escape(atob(localStorage.getItem(modInfo.id)!)))
);
modData.saves.push(playerData.id);
localStorage.setItem(
modInfo.id,
btoa(unescape(encodeURIComponent(JSON.stringify(modData))))
);
this.saves[playerData.id] = playerData;
},
deleteSave(id: string) {
const modData = JSON.parse(
decodeURIComponent(escape(atob(localStorage.getItem(modInfo.id)!)))
);
modData.saves = modData.saves.filter((save: string) => save !== id);
localStorage.removeItem(id);
localStorage.setItem(
modInfo.id,
btoa(unescape(encodeURIComponent(JSON.stringify(modData))))
);
delete this.saves[id];
},
openSave(id: string) {
this.saves[player.id].time = player.time;
loadSave(this.saves[id]);
const modData = JSON.parse(
decodeURIComponent(escape(atob(localStorage.getItem(modInfo.id)!)))
);
modData.active = id;
localStorage.setItem(
modInfo.id,
btoa(unescape(encodeURIComponent(JSON.stringify(modData))))
);
},
newSave() {
const playerData = newSave();
this.saves[playerData.id] = playerData;
},
newFromPreset(preset: string) {
const playerData = JSON.parse(decodeURIComponent(escape(atob(preset))));
playerData.id = getUniqueID();
localStorage.setItem(
playerData.id,
btoa(unescape(encodeURIComponent(JSON.stringify(playerData))))
);
const modData = JSON.parse(decodeURIComponent(escape(atob(localStorage.getItem(modInfo.id)))));
modData.saves.push(playerData.id);
localStorage.setItem(modInfo.id, btoa(unescape(encodeURIComponent(JSON.stringify(modData)))));
this.saves[playerData.id] = playerData;
},
editSave(id, newName) {
this.saves[id].name = newName;
if (player.id === id) {
player.name = newName;
save();
} else {
localStorage.setItem(id, btoa(unescape(encodeURIComponent(JSON.stringify(this.saves[id])))));
}
},
importSave(text) {
this.saveToImport = text;
if (text) {
this.$nextTick(() => {
try {
const playerData = JSON.parse(decodeURIComponent(escape(atob(text))));
const id = getUniqueID();
playerData.id = id;
localStorage.setItem(id, btoa(unescape(encodeURIComponent(JSON.stringify(playerData)))));
this.saves[id] = playerData;
this.saveToImport = "";
this.importingFailed = false;
const modData = JSON.parse(
decodeURIComponent(escape(atob(localStorage.getItem(modInfo.id)!)))
);
modData.saves.push(playerData.id);
localStorage.setItem(
modInfo.id,
btoa(unescape(encodeURIComponent(JSON.stringify(modData))))
);
this.saves[playerData.id] = playerData;
},
editSave(id: string, newName: string) {
this.saves[id].name = newName;
if (player.id === id) {
player.name = newName;
save();
} else {
localStorage.setItem(
id,
btoa(unescape(encodeURIComponent(JSON.stringify(this.saves[id]))))
);
}
},
importSave(text: string) {
this.saveToImport = text;
if (text) {
this.$nextTick(() => {
try {
const playerData = JSON.parse(decodeURIComponent(escape(atob(text))));
const id = getUniqueID();
playerData.id = id;
localStorage.setItem(
id,
btoa(unescape(encodeURIComponent(JSON.stringify(playerData))))
);
this.saves[id] = playerData;
this.saveToImport = "";
this.importingFailed = false;
const modData = JSON.parse(decodeURIComponent(escape(atob(localStorage.getItem(modInfo.id)))));
modData.saves.push(id);
localStorage.setItem(modInfo.id, btoa(unescape(encodeURIComponent(JSON.stringify(modData)))));
} catch (e) {
this.importingFailed = true;
}
});
} else {
this.importingFailed = false;
}
},
update(e) {
this.saves.splice(e.newIndex, 0, this.saves.splive(e.oldIndex, 1)[0]);
const modData = JSON.parse(decodeURIComponent(escape(atob(localStorage.getItem(modInfo.id)))));
modData.saves.splice(e.newIndex, 0, modData.saves.splice(e.oldIndex, 1)[0]);
localStorage.setItem(modInfo.id, btoa(unescape(encodeURIComponent(JSON.stringify(modData)))));
}
}
};
const modData = JSON.parse(
decodeURIComponent(escape(atob(localStorage.getItem(modInfo.id)!)))
);
modData.saves.push(id);
localStorage.setItem(
modInfo.id,
btoa(unescape(encodeURIComponent(JSON.stringify(modData))))
);
} catch (e) {
this.importingFailed = true;
}
});
} else {
this.importingFailed = false;
}
},
update(e: { newIndex: number; oldIndex: number }) {
const modData = JSON.parse(
decodeURIComponent(escape(atob(localStorage.getItem(modInfo.id)!)))
);
modData.saves.splice(e.newIndex, 0, modData.saves.splice(e.oldIndex, 1)[0]);
localStorage.setItem(
modInfo.id,
btoa(unescape(encodeURIComponent(JSON.stringify(modData))))
);
}
}
});
</script>
<style scoped>
.field form,
.field .field-title,
.field .field-buttons {
margin: 0;
margin: 0;
}
.field-buttons {
display: flex;
display: flex;
}
.field-buttons .field {
margin: 0;
margin-left: 8px;
margin: 0;
margin-left: 8px;
}
.modal-footer {
@ -206,25 +292,21 @@ export default {
}
.footer {
display: flex;
margin-top: 20px;
display: flex;
margin-top: 20px;
}
</style>
<style>
.importingFailed input {
color: red;
color: red;
}
.field-buttons .v-select {
width: 220px;
width: 220px;
}
.presets .vue-dropdown {
}
.presets .vue-select[aria-expanded='true'] vue-dropdown {
visibility: hidden;
.presets .vue-select[aria-expanded="true"] vue-dropdown {
visibility: hidden;
}
</style>

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

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

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

@ -1,64 +1,73 @@
<template>
<div class="sticky" :style="{ top }" ref="sticky" data-v-sticky>
<slot />
</div>
<div class="sticky" :style="{ top }" ref="sticky" data-v-sticky>
<slot />
</div>
</template>
<script>
export default {
name: 'sticky',
data() {
return {
top: 0,
observer: null
};
},
mounted() {
this.$nextTick(() => {
if (this.$refs.sticky == undefined) {
this.$nextTick(this.mounted);
} else {
this.updateTop();
this.observer = new ResizeObserver(this.updateTop);
this.observer.observe(this.$refs.sticky.parentElement);
}
});
},
methods: {
updateTop() {
let el = this.$refs.sticky;
if (el == undefined) {
return;
}
<script lang="ts">
import { defineComponent } from "vue";
let top = 0;
while (el.previousSibling) {
if (el.previousSibling.dataset && 'vSticky' in el.previousSibling.dataset) {
top += el.previousSibling.offsetHeight;
}
el = el.previousSibling;
}
this.top = top + "px";
}
}
};
export default defineComponent({
name: "sticky",
data() {
return {
top: "0",
observer: null
} as {
top: string;
observer: ResizeObserver | null;
};
},
mounted() {
this.setup();
},
methods: {
setup() {
this.$nextTick(() => {
if (this.$refs.sticky == undefined) {
this.$nextTick(this.setup);
} else {
this.updateTop();
this.observer = new ResizeObserver(this.updateTop);
this.observer.observe((this.$refs.sticky as HTMLElement).parentElement!);
}
});
},
updateTop() {
let el = this.$refs.sticky as HTMLElement;
if (el == undefined) {
return;
}
let top = 0;
while (el.previousSibling) {
const sibling = el.previousSibling as HTMLElement;
if (sibling.dataset && "vSticky" in sibling.dataset) {
top += sibling.offsetHeight;
}
el = sibling;
}
this.top = top + "px";
}
}
});
</script>
<style scoped>
.sticky {
position: sticky;
background: var(--background);
margin-left: -7px;
margin-right: -7px;
padding-left: 7px;
padding-right: 7px;
z-index: 3;
position: sticky;
background: var(--background);
margin-left: -7px;
margin-right: -7px;
padding-left: 7px;
padding-right: 7px;
z-index: 3;
}
.modal-body .sticky {
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
</style>
</style>

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>

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

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

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

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

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

@ -1,45 +1,60 @@
<template>
<div class="tabs-container">
<div v-for="(tab, index) in tabs" :key="index" class="tab" :ref="`tab-${index}`">
<Nav v-if="index === 0 && !useHeader" />
<div class="inner-tab">
<LayerProvider :layer="tab" :index="index" v-if="tab in components && components[tab]">
<component :is="components[tab]" />
</LayerProvider>
<layer-tab :layer="tab" :index="index" v-else-if="tab in components" :minimizable="true"
:tab="() => $refs[`tab-${index}`]" />
<component :is="tab" :index="index" v-else />
</div>
<div class="separator" v-if="index !== tabs.length - 1"></div>
</div>
</div>
<div class="tabs-container">
<div v-for="(tab, index) in tabs" :key="index" class="tab" :ref="`tab-${index}`">
<Nav v-if="index === 0 && !useHeader" />
<div class="inner-tab">
<LayerProvider
:layer="tab"
:index="index"
v-if="tab in components && components[tab]"
>
<component :is="components[tab]" />
</LayerProvider>
<layer-tab
:layer="tab"
:index="index"
v-else-if="tab in components"
:minimizable="true"
:tab="() => $refs[`tab-${index}`]"
/>
<component :is="tab" :index="index" v-else />
</div>
<div class="separator" v-if="index !== tabs.length - 1"></div>
</div>
</div>
</template>
<script>
import modInfo from '../../data/modInfo.json';
import { layers } from '../../game/layers';
import { mapState } from '../../util/vue';
<script lang="ts">
import modInfo from "@/data/modInfo.json";
import { layers } from "@/game/layers";
import { coerceComponent, mapState } from "@/util/vue";
import { Component, defineComponent } from "vue";
export default {
name: 'Tabs',
data() {
return { useHeader: modInfo.useHeader };
},
computed: {
...mapState([ 'tabs' ]),
components() {
return Object.keys(layers).reduce((acc, curr) => {
acc[curr] = layers[curr].component || false;
return acc;
}, {});
}
}
};
export default defineComponent({
name: "Tabs",
data() {
return { useHeader: modInfo.useHeader };
},
computed: {
...mapState(["tabs"]),
components() {
return Object.keys(layers).reduce(
(acc: Record<string, Component | string | false>, curr) => {
acc[curr] =
(layers[curr].component && coerceComponent(layers[curr].component!)) ||
false;
return acc;
},
{}
);
}
}
});
</script>
<style scoped>
.tabs-container {
width: 100vw;
width: 100vw;
flex-grow: 1;
overflow-x: auto;
overflow-y: hidden;
@ -70,12 +85,12 @@ export default {
}
.separator {
position: absolute;
right: -3px;
top: 0;
bottom: 0;
width: 6px;
background: var(--separator);
position: absolute;
right: -3px;
top: 0;
bottom: 0;
width: 6px;
background: var(--separator);
z-index: 1;
}
</style>
@ -89,6 +104,6 @@ export default {
}
.tab .modal-body hr {
margin: 7px 0;
margin: 7px 0;
}
</style>

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

@ -1,66 +1,84 @@
<template>
<div class="tooltip-container" :class="{ shown }" @mouseenter="setHover(true)" @mouseleave="setHover(false)">
<slot />
<transition name="fade">
<div v-if="shown" class="tooltip" :class="{ top, left, right, bottom }"
:style="{ '--xoffset': xoffset || '0px', '--yoffset': yoffset || '0px' }">
<component :is="tooltipDisplay" />
</div>
</transition>
</div>
<div
class="tooltip-container"
:class="{ shown }"
@mouseenter="setHover(true)"
@mouseleave="setHover(false)"
>
<slot />
<transition name="fade">
<div
v-if="shown"
class="tooltip"
:class="{ top, left, right, bottom }"
:style="{
'--xoffset': xoffset || '0px',
'--yoffset': yoffset || '0px'
}"
>
<component :is="tooltipDisplay" />
</div>
</transition>
</div>
</template>
<script>
import { coerceComponent } from '../../util/vue';
<script lang="ts">
import { CoercableComponent } from "@/typings/component";
import { coerceComponent } from "@/util/vue";
import { Component, defineComponent, PropType } from "vue";
export default {
name: 'tooltip',
data() {
return {
hover: false
};
},
props: {
force: Boolean,
display: String,
top: Boolean,
left: Boolean,
right: Boolean,
bottom: Boolean,
xoffset: String,
yoffset: String
},
computed: {
tooltipDisplay() {
return coerceComponent(this.display);
},
shown() {
return this.force || this.hover;
}
},
provide: {
tab() {
return {};
}
},
methods: {
setHover(hover) {
this.hover = hover;
}
}
};
export default defineComponent({
name: "tooltip",
data() {
return {
hover: false
};
},
props: {
force: Boolean,
display: {
type: [String, Object] as PropType<CoercableComponent>,
required: true
},
top: Boolean,
left: Boolean,
right: Boolean,
bottom: Boolean,
xoffset: String,
yoffset: String
},
computed: {
tooltipDisplay(): Component | string {
return coerceComponent(this.display);
},
shown(): boolean {
return this.force || this.hover;
}
},
provide: {
tab() {
return {};
}
},
methods: {
setHover(hover: boolean) {
this.hover = hover;
}
}
});
</script>
<style scoped>
.tooltip-container {
position: relative;
--xoffset: 0px;
--yoffset: 0px;
--xoffset: 0px;
--yoffset: 0px;
}
.tooltip, .tooltip::after {
pointer-events: none;
position: absolute;
.tooltip,
.tooltip::after {
pointer-events: none;
position: absolute;
}
.tooltip {
@ -76,80 +94,81 @@ export default {
border-radius: 3px;
background-color: var(--background-tooltip);
color: var(--points);
z-index: 100 !important;
z-index: 100 !important;
}
.shown {
z-index: 10;
z-index: 10;
}
.fade-enter, .fade-leave-to {
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.tooltip::after {
content: " ";
position: absolute;
top: 100%;
bottom: 100%;
left: calc(50% - var(--xoffset));
width: 0;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: var(--background-tooltip) transparent transparent transparent;
content: " ";
position: absolute;
top: 100%;
bottom: 100%;
left: calc(50% - var(--xoffset));
width: 0;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: var(--background-tooltip) transparent transparent transparent;
}
.tooltip.left,
.side-nodes .tooltip:not(.right):not(.bottom):not(.top) {
bottom: calc(50% + var(--yoffset));
left: unset;
right: calc(100% + var(--xoffset));
margin-bottom: unset;
margin-right: 5px;
bottom: calc(50% + var(--yoffset));
left: unset;
right: calc(100% + var(--xoffset));
margin-bottom: unset;
margin-right: 5px;
transform: translateY(50%);
}
.tooltip.left::after,
.side-nodes .tooltip:not(.right):not(.bottom):not(.top)::after {
top: calc(50% + var(--yoffset));
bottom: unset;
left: 100%;
right: 100%;
margin-left: unset;
margin-top: -5px;
border-color: transparent transparent transparent var(--background-tooltip);
top: calc(50% + var(--yoffset));
bottom: unset;
left: 100%;
right: 100%;
margin-left: unset;
margin-top: -5px;
border-color: transparent transparent transparent var(--background-tooltip);
}
.tooltip.right {
bottom: calc(50% + var(--yoffset));
left: calc(100% + var(--xoffset));
margin-bottom: unset;
margin-left: 5px;
bottom: calc(50% + var(--yoffset));
left: calc(100% + var(--xoffset));
margin-bottom: unset;
margin-left: 5px;
transform: translateY(50%);
}
.tooltip.right::after {
top: calc(50% + var(--yoffset));
left: 0;
right: 100%;
margin-left: -10px;
margin-top: -5px;
border-color: transparent var(--background-tooltip) transparent transparent;
top: calc(50% + var(--yoffset));
left: 0;
right: 100%;
margin-left: -10px;
margin-top: -5px;
border-color: transparent var(--background-tooltip) transparent transparent;
}
.tooltip.bottom {
top: calc(100% + var(--yoffset));
bottom: unset;
left: calc(50% + var(--xoffset));
margin-bottom: unset;
margin-top: 5px;
top: calc(100% + var(--yoffset));
bottom: unset;
left: calc(50% + var(--xoffset));
margin-bottom: unset;
margin-top: 5px;
transform: translateX(-50%);
}
.tooltip.bottom::after {
top: 0;
margin-top: -10px;
border-color: transparent transparent var(--background-tooltip) transparent;
top: 0;
margin-top: -10px;
border-color: transparent transparent var(--background-tooltip) transparent;
}
</style>

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

@ -1,21 +1,23 @@
<template>
<div class="vr" :style="{ height }"></div>
<div class="vr" :style="{ height }"></div>
</template>
<script>
export default {
name: 'vr',
props: {
height: String
}
};
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "vr",
props: {
height: String
}
});
</script>
<style scoped>
.vr {
width: 4px;
background: var(--separator);
height: 100%;
margin: 0 7px;
width: 4px;
background: var(--separator);
height: 100%;
margin: 0 7px;
}
</style>

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

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

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

@ -1,67 +1,115 @@
<template>
<div class="branch"></div>
<div class="branch"></div>
</template>
<script>
export default {
name: 'branch-node',
props: {
featureType: String,
id: [ Number, String ],
branches: Array
},
inject: [ 'registerNode', 'unregisterNode', 'registerBranch', 'unregisterBranch' ],
mounted() {
const id = `${this.featureType}@${this.id}`;
if (this.registerNode) {
this.registerNode(id, this);
}
if (this.registerBranch) {
this.branches?.map(this.handleBranch).forEach(branch => this.registerBranch(id, branch));
}
},
beforeUnmount() {
const id = `${this.featureType}@${this.id}`;
if (this.unregisterNode) {
this.unregisterNode(id);
}
if (this.unregisterBranch) {
this.branches?.map(this.handleBranch).forEach(branch => this.unregisterBranch(id, branch));
}
},
watch: {
featureType(newValue, oldValue) {
if (this.registerNode && this.unregisterNode) {
this.unregisterNode(`${oldValue}@${this.id}`);
this.registerNode(`${newValue}@${this.id}`, this);
}
},
id(newValue, oldValue) {
if (this.registerNode && this.unregisterNode) {
this.unregisterNode(`${this.featureType}@${oldValue}`);
this.registerNode(`${this.featureType}@${newValue}`, this);
}
},
branches(newValue, oldValue) {
if (this.registerBranch && this.unregisterBranch) {
const id = `${this.featureType}@${this.id}`;
oldValue?.map(this.handleBranch).forEach(branch => this.unregisterBranch(id, branch));
newValue?.map(this.handleBranch).forEach(branch => this.registerBranch(id, branch));
}
}
},
methods: {
handleBranch(branch) {
if (typeof branch === 'string') {
return branch.includes('@') ? branch : `${this.featureType}@${branch}`;
}
if (!branch.target?.includes('@')) {
return { ...branch, target: `${branch.featureType || this.featureType}@${branch.target}` };
}
return branch;
}
}
};
<script lang="ts">
import { BranchOptions } from "@/typings/branches";
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: {
featureType: {
type: String,
required: true
},
id: {
type: [Number, String],
required: true
},
branches: Array as PropType<Array<string | BranchOptions>>
},
inject: ["registerNode", "unregisterNode", "registerBranch", "unregisterBranch"],
mounted() {
const id = `${this.featureType}@${this.id}`;
// eslint-disable-next-line @typescript-eslint/no-this-alias
const _this = this;
const injectedThis = this as BranchInjectedComponent<typeof _this>;
if (injectedThis.registerNode) {
injectedThis.registerNode(id, this);
}
if (injectedThis.registerBranch) {
this.branches
?.map(this.handleBranch)
.forEach(branch => injectedThis.registerBranch!(id, branch));
}
},
beforeUnmount() {
const id = `${this.featureType}@${this.id}`;
// eslint-disable-next-line @typescript-eslint/no-this-alias
const _this = this;
const injectedThis = this as BranchInjectedComponent<typeof _this>;
if (injectedThis.unregisterNode) {
injectedThis.unregisterNode(id);
}
if (injectedThis.unregisterBranch) {
this.branches
?.map(this.handleBranch)
.forEach(branch => injectedThis.unregisterBranch!(id, branch));
}
},
watch: {
featureType(newValue, oldValue) {
// eslint-disable-next-line @typescript-eslint/no-this-alias
const _this = 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) {
// eslint-disable-next-line @typescript-eslint/no-this-alias
const _this = 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) {
// 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}`;
oldValue
?.map(this.handleBranch)
.forEach((branch: string | BranchOptions) =>
injectedThis.unregisterBranch!(id, branch)
);
newValue
?.map(this.handleBranch)
.forEach((branch: string | BranchOptions) =>
injectedThis.registerBranch!(id, branch)
);
}
}
},
methods: {
handleBranch(branch: string | BranchOptions) {
if (typeof branch === "string") {
return branch.includes("@") ? branch : `${this.featureType}@${branch}`;
}
if (!branch.target?.includes("@")) {
return {
...branch,
target: `${branch.featureType || this.featureType}@${branch.target}`
};
}
return branch;
}
}
});
</script>
<style scoped>
@ -70,8 +118,8 @@ export default {
z-index: -10;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
width: 100%;
height: 100%;
pointer-events: none;
}
</style>

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

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

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

@ -1,75 +1,102 @@
<template>
<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" />
</span>
<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 />
</span>
<modal :show="showModal" @close="closeModal">
<template v-slot:header><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>
<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"
/>
</span>
<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
/>
</span>
<modal :show="showModal" @close="closeModal">
<template v-slot:header
><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>
</template>
<script>
import { layers } from '../../game/layers';
<script lang="ts">
import { layers } from "@/game/layers";
import { defineComponent, PropType } from "vue";
export default {
name: 'tree',
data() {
return {
showModal: false,
modal: null
};
},
props: {
nodes: Array,
append: Boolean
},
inject: [ 'tab' ],
computed: {
modalHeader() {
if (this.modal == null) {
return null;
}
return layers[this.modal].name;
},
rows() {
if (this.nodes != undefined) {
return this.nodes;
}
const rows = Object.keys(layers).reduce((acc, curr) => {
if (!(layers[curr].displayRow in acc)) {
acc[layers[curr].displayRow] = [];
}
if (layers[curr].position != undefined) {
acc[layers[curr].displayRow][layers[curr].position] = curr;
} else {
acc[layers[curr].displayRow].push(curr);
}
return acc;
}, []);
return Object.keys(rows).reduce((acc, curr) => {
acc[curr] = rows[curr].filter(layer => layer);
return acc;
}, []);
}
},
methods: {
openModal(id) {
this.showModal = true;
this.modal = id;
},
closeModal() {
this.showModal = false;
}
}
};
export default defineComponent({
name: "tree",
data() {
return {
showModal: false,
modal: null
} as {
showModal: boolean;
modal: string | null;
};
},
props: {
nodes: Object as PropType<Record<string, Array<string | number>>>,
append: Boolean
},
inject: ["tab"],
computed: {
modalHeader(): string | null {
if (this.modal == null) {
return null;
}
return layers[this.modal].name || this.modal;
},
rows(): Record<string | number, Array<string | number>> {
if (this.nodes != undefined) {
return this.nodes;
}
const rows = Object.keys(layers).reduce(
(acc: Record<string | number, Array<string | number>>, curr) => {
if (!(layers[curr].displayRow in acc)) {
acc[layers[curr].displayRow] = [];
}
if (layers[curr].position != undefined) {
acc[layers[curr].displayRow][layers[curr].position!] = curr;
} else {
acc[layers[curr].displayRow].push(curr);
}
return acc;
},
{}
);
return Object.keys(rows).reduce(
(acc: Record<string | number, Array<string | number>>, curr) => {
acc[curr] = rows[curr].filter(layer => layer);
return acc;
},
{}
);
}
},
methods: {
openModal(id: string) {
this.showModal = true;
this.modal = id;
},
closeModal() {
this.showModal = false;
}
}
});
</script>
<style scoped>
.row {
margin: 50px auto;
margin: 50px auto;
}
.side-nodes {

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

@ -1,112 +1,130 @@
<template>
<tooltip :display="tooltip" :force="forceTooltip" :class="{
ghost: layer.layerShown === 'ghost',
treeNode: true,
[id]: true,
hidden: !layer.layerShown,
locked: !unlocked,
notify: layer.notify && unlocked,
resetNotify: layer.resetNotify,
can: unlocked,
small
}">
<LayerProvider :index="tab.index" :layer="id">
<button v-if="layer.shown" @click="clickTab" :style="style" :disabled="!unlocked">
<component :is="display" />
<branch-node :branches="layer.branches" :id="id" featureType="tree-node" />
</button>
<mark-node :mark="layer.mark" />
</LayerProvider>
</tooltip>
<tooltip
:display="tooltip"
:force="forceTooltip"
:class="{
ghost: layer.layerShown === 'ghost',
treeNode: true,
[id]: true,
hidden: !layer.layerShown,
locked: !unlocked,
notify: layer.notify && unlocked,
resetNotify: layer.resetNotify,
can: unlocked,
small
}"
>
<LayerProvider :index="tab.index" :layer="id">
<button v-if="layer.shown" @click="clickTab" :style="style" :disabled="!unlocked">
<component :is="display" />
<branch-node :branches="layer.branches" :id="id" featureType="tree-node" />
</button>
<mark-node :mark="layer.mark" />
</LayerProvider>
</tooltip>
</template>
<script>
import { layers } from '../../game/layers';
import player from '../../game/player';
import { coerceComponent } from '../../util/vue';
<script lang="ts">
import { layers } from "@/game/layers";
import player from "@/game/player";
import { CoercableComponent } from "@/typings/component";
import { Layer } from "@/typings/layer";
import { coerceComponent } from "@/util/vue";
import { Component, defineComponent } from "vue";
export default {
name: 'tree-node',
props: {
id: [ String, Number ],
small: Boolean,
append: Boolean
},
emits: [ 'show-modal' ],
inject: [ 'tab' ],
computed: {
layer() {
return layers[this.id];
},
unlocked() {
if (this.layer.canClick != undefined) {
return this.layer.canClick;
}
return this.layer.unlocked;
},
style() {
return [
this.unlocked ? { backgroundColor: this.layer.color } : null,
this.layer.notify && this.unlocked ?
{ boxShadow: `-4px -4px 4px rgba(0, 0, 0, 0.25) inset, 0 0 20px ${this.layer.trueGlowColor}` } : null,
this.layer.nodeStyle
];
},
display() {
if (this.layer.display != undefined) {
return coerceComponent(this.layer.display);
} else if (this.layer.image != undefined) {
return coerceComponent(`<img src=${this.layer.image}/>`);
} else {
return coerceComponent(this.layer.symbol);
}
},
forceTooltip() {
return player[this.id].forceTooltip;
},
tooltip() {
if (this.layer.canClick != undefined) {
if (this.layer.canClick) {
return this.layer.tooltip || 'I am a button!';
} else {
return this.layer.tooltipLocked || this.layer.tooltip || 'I am a button!';
}
}
if (player[this.id].unlocked) {
return this.layer.tooltip || `{{ formatWhole(player.${this.id}.points) }} {{ layers.${this.id}.resource }}`;
} else {
return 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: {
clickTab(e) {
if (e.shiftKey) {
player[this.id].forceTooltip = !player[this.id].forceTooltip;
} else if (this.layer.click != undefined) {
this.layer.click();
} else if (this.layer.modal) {
this.$emit('show-modal', this.id);
} else if (this.append) {
if (player.tabs.includes(this.id)) {
const index = player.tabs.lastIndexOf(this.id);
player.tabs = [...player.tabs.slice(0, index), ...player.tabs.slice(index + 1)];
} else {
player.tabs = [...player.tabs, this.id];
}
} else {
player.tabs = [...player.tabs.slice(0, this.tab.index + 1), this.id];
}
}
}
};
export default defineComponent({
name: "tree-node",
props: {
id: {
type: [String, Number],
required: true
},
small: Boolean,
append: Boolean
},
emits: ["show-modal"],
inject: ["tab"],
computed: {
layer(): Layer {
return layers[this.id];
},
unlocked(): boolean {
if (this.layer.canClick != undefined) {
return this.layer.canClick;
}
return this.layer.unlocked;
},
style(): Array<Partial<CSSStyleDeclaration> | undefined> {
return [
this.unlocked ? { backgroundColor: this.layer.color } : undefined,
this.layer.notify && this.unlocked
? {
boxShadow: `-4px -4px 4px rgba(0, 0, 0, 0.25) inset, 0 0 20px ${this.layer.trueGlowColor}`
}
: undefined,
this.layer.nodeStyle
];
},
display(): Component | string {
if (this.layer.display != undefined) {
return coerceComponent(this.layer.display);
} else if (this.layer.image != undefined) {
return coerceComponent(`<img src=${this.layer.image}/>`);
} else {
return coerceComponent(this.layer.symbol);
}
},
forceTooltip(): boolean {
return player.layers[this.id].forceTooltip === true;
},
tooltip(): CoercableComponent {
if (this.layer.canClick != undefined) {
if (this.layer.canClick) {
return this.layer.tooltip || "I am a button!";
} else {
return this.layer.tooltipLocked || this.layer.tooltip || "I am a button!";
}
}
if (player.layers[this.id].unlocked) {
return (
this.layer.tooltip ||
`{{ formatWhole(player.${this.id}.points) }} {{ layers.${this.id}.resource }}`
);
} else {
return (
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 }})`
);
}
}
},
methods: {
clickTab(e: MouseEvent) {
if (e.shiftKey) {
player.layers[this.id].forceTooltip = !player.layers[this.id].forceTooltip;
} else if (this.layer.click != undefined) {
this.layer.click();
} else if (this.layer.modal) {
this.$emit("show-modal", this.id);
} else if (this.append) {
if (player.tabs.includes(this.id.toString())) {
const index = player.tabs.lastIndexOf(this.id.toString());
player.tabs = [...player.tabs.slice(0, index), ...player.tabs.slice(index + 1)];
} else {
player.tabs = [...player.tabs, this.id.toString()];
}
} else {
player.tabs = [
...player.tabs.slice(
0,
((this as unknown) as { tab: { index: number } }).tab.index + 1
),
this.id.toString()
];
}
}
}
});
</script>
<style scoped>
@ -119,8 +137,8 @@ export default {
}
.treeNode button {
width: 100%;
height: 100%;
width: 100%;
height: 100%;
border: 2px solid rgba(0, 0, 0, 0.125);
border-radius: inherit;
font-size: 40px;
@ -140,7 +158,7 @@ export default {
}
.ghost {
visibility: hidden;
pointer-events: none;
visibility: hidden;
pointer-events: none;
}
</style>

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