2021-06-12 04:38:16 +00:00
|
|
|
<template>
|
First pass at typescript support
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 :)
2021-08-17 04:30:54 +00:00
|
|
|
<div
|
2022-02-27 19:49:34 +00:00
|
|
|
v-if="unref(visibility) !== Visibility.None"
|
|
|
|
:style="[
|
|
|
|
{
|
|
|
|
visibility: unref(visibility) === Visibility.Hidden ? 'hidden' : undefined
|
|
|
|
},
|
|
|
|
unref(style) ?? {}
|
|
|
|
]"
|
|
|
|
:class="{ feature: true, milestone: true, done: unref(earned), ...unref(classes) }"
|
First pass at typescript support
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 :)
2021-08-17 04:30:54 +00:00
|
|
|
>
|
2022-02-27 19:49:34 +00:00
|
|
|
<component :is="unref(comp)" />
|
2022-01-14 04:25:47 +00:00
|
|
|
<LinkNode :id="id" />
|
First pass at typescript support
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 :)
2021-08-17 04:30:54 +00:00
|
|
|
</div>
|
2021-06-12 04:38:16 +00:00
|
|
|
</template>
|
|
|
|
|
2022-01-25 04:25:34 +00:00
|
|
|
<script lang="tsx">
|
2022-02-27 19:49:34 +00:00
|
|
|
import { jsx, StyleValue, Visibility } from "@/features/feature";
|
2022-01-14 04:25:47 +00:00
|
|
|
import { GenericMilestone } from "@/features/milestone";
|
2022-02-27 19:49:34 +00:00
|
|
|
import { coerceComponent, isCoercableComponent, processedPropType, unwrapRef } from "@/util/vue";
|
|
|
|
import { Component, defineComponent, shallowRef, toRefs, unref, UnwrapRef, watchEffect } from "vue";
|
2022-01-14 04:25:47 +00:00
|
|
|
import LinkNode from "../system/LinkNode.vue";
|
2022-02-27 19:49:34 +00:00
|
|
|
import "@/components/common/features.css";
|
2021-06-12 04:38:16 +00:00
|
|
|
|
2022-01-25 04:25:34 +00:00
|
|
|
export default defineComponent({
|
|
|
|
props: {
|
|
|
|
visibility: {
|
2022-02-27 19:49:34 +00:00
|
|
|
type: processedPropType<Visibility>(Number),
|
2022-01-25 04:25:34 +00:00
|
|
|
required: true
|
|
|
|
},
|
|
|
|
display: {
|
2022-02-27 19:49:34 +00:00
|
|
|
type: processedPropType<UnwrapRef<GenericMilestone["display"]>>(
|
|
|
|
String,
|
|
|
|
Object,
|
|
|
|
Function
|
|
|
|
),
|
2022-01-25 04:25:34 +00:00
|
|
|
required: true
|
|
|
|
},
|
2022-02-27 19:49:34 +00:00
|
|
|
style: processedPropType<StyleValue>(String, Object, Array),
|
|
|
|
classes: processedPropType<Record<string, boolean>>(Object),
|
2022-01-25 04:25:34 +00:00
|
|
|
earned: {
|
2022-02-27 19:49:34 +00:00
|
|
|
type: processedPropType<boolean>(Boolean),
|
2022-01-25 04:25:34 +00:00
|
|
|
required: true
|
|
|
|
},
|
|
|
|
id: {
|
|
|
|
type: String,
|
|
|
|
required: true
|
|
|
|
}
|
|
|
|
},
|
2022-02-27 19:49:34 +00:00
|
|
|
components: {
|
|
|
|
LinkNode
|
|
|
|
},
|
2022-01-25 04:25:34 +00:00
|
|
|
setup(props) {
|
|
|
|
const { display } = toRefs(props);
|
2022-01-14 04:25:47 +00:00
|
|
|
|
2022-02-27 19:49:34 +00:00
|
|
|
const comp = shallowRef<Component | string>("");
|
|
|
|
|
|
|
|
watchEffect(() => {
|
|
|
|
const currDisplay = unwrapRef(display);
|
2022-01-25 04:25:34 +00:00
|
|
|
if (currDisplay == null) {
|
2022-02-27 19:49:34 +00:00
|
|
|
comp.value = "";
|
|
|
|
return;
|
2022-01-25 04:25:34 +00:00
|
|
|
}
|
|
|
|
if (isCoercableComponent(currDisplay)) {
|
2022-02-27 19:49:34 +00:00
|
|
|
comp.value = coerceComponent(currDisplay);
|
|
|
|
return;
|
2022-01-25 04:25:34 +00:00
|
|
|
}
|
2022-02-27 19:49:34 +00:00
|
|
|
const Requirement = coerceComponent(currDisplay.requirement, "h3");
|
|
|
|
const EffectDisplay = coerceComponent(currDisplay.effectDisplay || "", "b");
|
|
|
|
const OptionsDisplay = coerceComponent(currDisplay.optionsDisplay || "", "span");
|
|
|
|
comp.value = coerceComponent(
|
|
|
|
jsx(() => (
|
|
|
|
<span>
|
|
|
|
<Requirement />
|
|
|
|
{currDisplay.effectDisplay ? (
|
|
|
|
<div>
|
|
|
|
<EffectDisplay />
|
|
|
|
</div>
|
|
|
|
) : null}
|
|
|
|
{currDisplay.optionsDisplay ? (
|
|
|
|
<div class="equal-spaced">
|
|
|
|
<OptionsDisplay />
|
|
|
|
</div>
|
|
|
|
) : null}
|
|
|
|
</span>
|
|
|
|
))
|
2022-01-25 04:25:34 +00:00
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
return {
|
2022-02-27 19:49:34 +00:00
|
|
|
comp,
|
|
|
|
unref,
|
2022-01-25 04:25:34 +00:00
|
|
|
Visibility
|
|
|
|
};
|
First pass at typescript support
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 :)
2021-08-17 04:30:54 +00:00
|
|
|
}
|
|
|
|
});
|
2021-06-12 04:38:16 +00:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
.milestone {
|
|
|
|
width: calc(100% - 10px);
|
|
|
|
min-width: 120px;
|
|
|
|
padding-left: 5px;
|
|
|
|
padding-right: 5px;
|
|
|
|
min-height: 75px;
|
|
|
|
background-color: var(--locked);
|
|
|
|
border-width: 4px;
|
|
|
|
border-radius: 5px;
|
|
|
|
color: rgba(0, 0, 0, 0.5);
|
2022-02-27 19:49:34 +00:00
|
|
|
margin-top: 0;
|
|
|
|
margin-bottom: 0;
|
2021-06-16 04:07:32 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.milestone.done {
|
|
|
|
background-color: var(--bought);
|
|
|
|
cursor: default;
|
2021-06-12 04:38:16 +00:00
|
|
|
}
|
2022-02-27 19:49:34 +00:00
|
|
|
|
|
|
|
.milestone >>> .equal-spaced {
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
.milestone >>> .equal-spaced > * {
|
|
|
|
margin: auto;
|
|
|
|
}
|
2021-06-12 04:38:16 +00:00
|
|
|
</style>
|