forked from profectus/Profectus
Fix various issues from typescript update
This commit is contained in:
parent
c1ab09f0fb
commit
d56aa82297
13 changed files with 130 additions and 139 deletions
|
@ -1,47 +1,30 @@
|
|||
<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">
|
||||
<div v-if="filtered" class="table">
|
||||
<template v-if="rows && cols">
|
||||
<div v-for="row in rows" class="row" :key="row">
|
||||
<div v-for="col in cols" :key="col">
|
||||
<achievement
|
||||
v-if="filteredAchievements[row * 10 + col] !== undefined"
|
||||
v-if="filtered[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>
|
||||
<row v-else>
|
||||
<achievement v-for="(achievement, id) in filtered" :key="id" :id="id" />
|
||||
</row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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";
|
||||
import { FilteredFeaturesMixin, InjectLayerMixin } from "@/util/vue";
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
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 {};
|
||||
}
|
||||
}
|
||||
mixins: [InjectLayerMixin, FilteredFeaturesMixin<Achievement>("achievements")]
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div v-if="filteredBuyables" class="table">
|
||||
<div v-if="filtered" class="table">
|
||||
<respec-button
|
||||
v-if="showRespec"
|
||||
style="margin-bottom: 12px;"
|
||||
|
@ -8,11 +8,11 @@
|
|||
@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">
|
||||
<template v-if="rows && cols">
|
||||
<div v-for="row in rows" class="row" :key="row">
|
||||
<div v-for="col in cols" :key="col">
|
||||
<buyable
|
||||
v-if="filteredBuyables[row * 10 + col] !== undefined"
|
||||
v-if="filtered[row * 10 + col] !== undefined"
|
||||
class="align buyable-container"
|
||||
:style="{ height }"
|
||||
:id="row * 10 + col"
|
||||
|
@ -23,7 +23,7 @@
|
|||
</template>
|
||||
<row v-else>
|
||||
<buyable
|
||||
v-for="(buyable, id) in filteredBuyables"
|
||||
v-for="(buyable, id) in filtered"
|
||||
:key="id"
|
||||
class="align buyable-container"
|
||||
:style="{ height }"
|
||||
|
@ -39,28 +39,19 @@ 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";
|
||||
import { FilteredFeaturesMixin, InjectLayerMixin } from "@/util/vue";
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
export default defineComponent({
|
||||
name: "buyables",
|
||||
mixins: [InjectLayerMixin],
|
||||
mixins: [InjectLayerMixin, FilteredFeaturesMixin<Buyable>("buyables")],
|
||||
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;
|
||||
},
|
||||
|
|
|
@ -1,40 +1,26 @@
|
|||
<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 v-if="filtered" class="table">
|
||||
<template v-if="rows && cols">
|
||||
<div v-for="row in rows" class="row" :key="row">
|
||||
<div v-for="col in cols" :key="col">
|
||||
<challenge v-if="filtered[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" />
|
||||
<challenge v-for="(challenge, id) in filtered" :key="id" :id="id" />
|
||||
</row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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";
|
||||
import { FilteredFeaturesMixin, InjectLayerMixin } from "@/util/vue";
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
mixins: [InjectLayerMixin, FilteredFeaturesMixin<Challenge>("challenges")]
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<div v-if="filteredClickables" class="table">
|
||||
<div v-if="filtered != undefined" 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">
|
||||
<template v-if="rows && cols">
|
||||
<div v-for="row in rows" class="row" :key="row">
|
||||
<div v-for="col in cols" :key="col">
|
||||
<clickable
|
||||
v-if="filteredClickables[row * 10 + col] !== undefined"
|
||||
v-if="filtered[row * 10 + col] !== undefined"
|
||||
class="align clickable-container"
|
||||
:style="{ height }"
|
||||
:id="row * 10 + col"
|
||||
|
@ -16,7 +16,7 @@
|
|||
</template>
|
||||
<row v-else>
|
||||
<clickable
|
||||
v-for="(clickable, id) in filteredClickables"
|
||||
v-for="(clickable, id) in filtered"
|
||||
:key="id"
|
||||
class="align clickable-container"
|
||||
:style="{ height }"
|
||||
|
@ -28,18 +28,15 @@
|
|||
</template>
|
||||
|
||||
<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";
|
||||
import { Clickable } from "@/typings/features/clickable";
|
||||
import { FilteredFeaturesMixin, InjectLayerMixin } from "@/util/vue";
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
export default defineComponent({
|
||||
name: "clickables",
|
||||
mixins: [InjectLayerMixin],
|
||||
mixins: [InjectLayerMixin, FilteredFeaturesMixin<Clickable>("clickables")],
|
||||
props: {
|
||||
achievements: {
|
||||
type: Object as PropType<Array<string>>
|
||||
},
|
||||
showMasterButton: {
|
||||
type: Boolean,
|
||||
default: null
|
||||
|
@ -50,9 +47,6 @@ export default defineComponent({
|
|||
}
|
||||
},
|
||||
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;
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<button
|
||||
v-if="gridable.unlocked"
|
||||
v-if="gridCell.unlocked"
|
||||
:class="{ feature: true, tile: true, can: canClick, locked: !canClick }"
|
||||
:style="style"
|
||||
@click="gridable.click"
|
||||
@click="gridCell.click"
|
||||
@mousedown="start"
|
||||
@mouseleave="stop"
|
||||
@mouseup="stop"
|
||||
|
@ -14,7 +14,7 @@
|
|||
>
|
||||
<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" />
|
||||
<branch-node :branches="gridCell.branches" :id="id" featureType="gridCell" />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
|
|
|
@ -1,31 +1,17 @@
|
|||
<template>
|
||||
<div v-if="filteredMilestones" class="table">
|
||||
<milestone v-for="(milestone, id) in filteredMilestones" :key="id" :id="id" />
|
||||
<div v-if="filtered" class="table">
|
||||
<milestone v-for="(milestone, id) in filtered" :key="id" :id="id" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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";
|
||||
import { FilteredFeaturesMixin, InjectLayerMixin } from "@/util/vue";
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
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 {};
|
||||
}
|
||||
}
|
||||
mixins: [InjectLayerMixin, FilteredFeaturesMixin<Milestone>("milestones")]
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
@ -1,10 +1,10 @@
|
|||
<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">
|
||||
<div v-if="filtered" class="table">
|
||||
<template v-if="rows && cols">
|
||||
<div v-for="row in rows" class="row" :key="row">
|
||||
<div v-for="col in cols" :key="col">
|
||||
<upgrade
|
||||
v-if="filteredUpgrades[row * 10 + col] !== undefined"
|
||||
v-if="filtered[row * 10 + col] !== undefined"
|
||||
class="align"
|
||||
:id="row * 10 + col"
|
||||
/>
|
||||
|
@ -12,33 +12,19 @@
|
|||
</div>
|
||||
</template>
|
||||
<row v-else>
|
||||
<upgrade v-for="(upgrade, id) in filteredUpgrades" :key="id" class="align" :id="id" />
|
||||
<upgrade v-for="(upgrade, id) in filtered" :key="id" class="align" :id="id" />
|
||||
</row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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";
|
||||
import { FilteredFeaturesMixin, InjectLayerMixin } from "@/util/vue";
|
||||
import { defineComponent } from "vue";
|
||||
|
||||
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 {};
|
||||
}
|
||||
}
|
||||
mixins: [InjectLayerMixin, FilteredFeaturesMixin<Upgrade>("upgrades")]
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
@ -36,6 +36,7 @@ input {
|
|||
|
||||
span {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* track */
|
||||
|
@ -55,7 +56,7 @@ span::before {
|
|||
span::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
top: 2px;
|
||||
right: 16px;
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
|
|
|
@ -3,21 +3,29 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { defineComponent, reactive } from "vue";
|
||||
|
||||
export default defineComponent({
|
||||
name: "LayerProvider",
|
||||
provide() {
|
||||
return {
|
||||
tab: {
|
||||
tab: reactive({
|
||||
layer: this.layer,
|
||||
index: this.index
|
||||
}
|
||||
})
|
||||
};
|
||||
},
|
||||
props: {
|
||||
layer: String,
|
||||
index: Number
|
||||
},
|
||||
watch: {
|
||||
layer(layer) {
|
||||
this.$.provides.tab.layer = layer;
|
||||
},
|
||||
index(index) {
|
||||
this.$.provides.tab.index = index;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
@ -18,6 +18,6 @@ export default defineComponent({
|
|||
width: 4px;
|
||||
background: var(--separator);
|
||||
height: 100%;
|
||||
margin: 0 7px;
|
||||
margin: auto 7px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -84,6 +84,15 @@ const main = {
|
|||
({{ player.oompsMag != 0 ? format(player.oomps) + " OOM" + (player.oompsMag < 0 ? "^OOM" : player.oompsMag > 1 ? "^" + player.oompsMag : "") + "s" : formatSmall(pointGain) }}/sec)
|
||||
</div>
|
||||
<spacer />
|
||||
<modal :show="false">
|
||||
<svg style="height: 80vmin; width: 80vmin;">
|
||||
<path d="M 32 222 Q 128 222, 128 0 Q 128 222, 224 222 L 224 224 L 32 224"/>
|
||||
|
||||
<circle cx="64" cy="128" r="64" fill="#8da8b0"/>
|
||||
<circle cx="128" cy="64" r="64" fill="#71368a"/>
|
||||
<circle cx="192" cy="128" r="64" fill="#fa8508"/>
|
||||
</svg>
|
||||
</modal>
|
||||
<tree :append="true" />`,
|
||||
name: "Tree"
|
||||
} as RawLayer;
|
||||
|
|
6
src/typings/player.d.ts
vendored
6
src/typings/player.d.ts
vendored
|
@ -54,9 +54,9 @@ export interface LayerSaveData {
|
|||
unlockOrder?: number;
|
||||
forceTooltip?: boolean;
|
||||
resetTime: Decimal;
|
||||
upgrades: Array<string>;
|
||||
achievements: Array<string>;
|
||||
milestones: Array<string>;
|
||||
upgrades: Array<string | number>;
|
||||
achievements: Array<string | number>;
|
||||
milestones: Array<string | number>;
|
||||
infoboxes: Record<string, boolean>;
|
||||
buyables: Record<string, Decimal>;
|
||||
clickables: Record<string, State>;
|
||||
|
|
|
@ -1,7 +1,9 @@
|
|||
import { hasWon, pointGain } from "@/data/mod";
|
||||
import { layers } from "@/game/layers";
|
||||
import player from "@/game/player";
|
||||
import { App, Component, ComponentOptions, defineComponent, inject } from "vue";
|
||||
import { Feature, Features, GridFeatures } from "@/typings/features/feature";
|
||||
import { Layer } from "@/typings/layer";
|
||||
import { App, Component, ComponentOptions, defineComponent, inject, PropType } from "vue";
|
||||
import Decimal, * as numberUtils from "./bignum";
|
||||
import {
|
||||
achievementEffect,
|
||||
|
@ -112,3 +114,48 @@ export const InjectLayerMixin = {
|
|||
}
|
||||
}
|
||||
};
|
||||
|
||||
export function FilteredFeaturesMixin<T extends Feature>(
|
||||
feature: keyof Layer
|
||||
): {
|
||||
mixins: [typeof InjectLayerMixin];
|
||||
props: {
|
||||
[feature]: {
|
||||
type: PropType<Array<string>>;
|
||||
};
|
||||
};
|
||||
computed: {
|
||||
filtered: () => Record<string, T> | undefined;
|
||||
rows: () => number | undefined;
|
||||
cols: () => number | undefined;
|
||||
};
|
||||
} {
|
||||
return {
|
||||
mixins: [InjectLayerMixin],
|
||||
props: {
|
||||
[feature]: {
|
||||
type: Object as PropType<Array<string>>
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
filtered(this: { layer: string; [feature]: string[] }) {
|
||||
return (
|
||||
(layers[this.layer][feature] as Features<T> | undefined) &&
|
||||
getFiltered((layers[this.layer][feature] as Features<T>).data, this[feature])
|
||||
);
|
||||
},
|
||||
rows(this: { layer: string }) {
|
||||
return (
|
||||
(layers[this.layer][feature] as Features<T> | undefined) &&
|
||||
(layers[this.layer][feature] as Features<T> | GridFeatures<T>).rows
|
||||
);
|
||||
},
|
||||
cols(this: { layer: string }) {
|
||||
return (
|
||||
(layers[this.layer][feature] as Features<T> | undefined) &&
|
||||
(layers[this.layer][feature] as Features<T> | GridFeatures<T>).cols
|
||||
);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue