Fixed issues with input fields in Saves Manager

This commit is contained in:
thepaperpilot 2021-09-04 17:15:48 -05:00
parent bb7db73eba
commit 4869f042a9
6 changed files with 31 additions and 8 deletions

View file

@ -5,16 +5,18 @@
<textarea-autosize
v-if="textarea"
:placeholder="placeholder"
:value="value"
:value="val"
:maxHeight="maxHeight"
@input="value => $emit('change', value)"
@input="change"
@blur="() => $emit('blur')"
ref="field"
/>
<input
v-else
type="text"
:value="value"
@input="e => $emit('change', e.target.value)"
:value="val"
@input="e => change(e.target.value)"
@blur="() => $emit('blur')"
:placeholder="placeholder"
ref="field"
:class="{ fullWidth: !title }"
@ -31,13 +33,25 @@ export default defineComponent({
props: {
title: String,
value: String,
modelValue: String,
textarea: Boolean,
placeholder: String,
maxHeight: Number
},
emits: ["change", "submit"],
emits: ["change", "submit", "blur", "update:modelValue"],
mounted() {
(this.$refs.field as HTMLElement).focus();
},
computed: {
val() {
return this.modelValue || this.value || "";
}
},
methods: {
change(value: string) {
this.$emit("change", value);
this.$emit("update:modelValue", value);
}
}
});
</script>

View file

@ -49,7 +49,7 @@
<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" />
<TextField v-model="newName" class="editname" @submit="changeName" @blur="changeName" />
</div>
<div v-else class="details error">Error: Failed to load save with id {{ save.id }}</div>
</div>

View file

@ -20,7 +20,7 @@
<TextField
:value="saveToImport"
@submit="importSave"
@input="importSave"
@change="importSave"
title="Import Save"
placeholder="Paste your save here!"
:class="{ importingFailed }"
@ -227,11 +227,16 @@ export default defineComponent({
}
},
importSave(text: string) {
console.log(text);
this.saveToImport = text;
if (text) {
this.$nextTick(() => {
try {
const playerData = JSON.parse(decodeURIComponent(escape(atob(text))));
if (typeof playerData !== "object") {
this.importingFailed = true;
return;
}
const id = getUniqueID();
playerData.id = id;
localStorage.setItem(

View file

@ -468,7 +468,7 @@ export default {
<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" />
<TextField :value="player.layers.c.thingy" @change="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 />

View file

@ -566,6 +566,7 @@ export function addLayer(layer: RawLayer, player?: Partial<PlayerData>): void {
}
if (layer.hotkeys) {
for (const id in layer.hotkeys) {
layer.hotkeys[id].layer = layer.id;
setDefault(layer.hotkeys[id], "press", undefined, false);
setDefault(layer.hotkeys[id], "unlocked", function() {
return layers[this.layer].unlocked;

View file

@ -395,6 +395,9 @@ export const defaultLayerProperties = {
} as Omit<RawLayer, "id"> & Partial<Pick<RawLayer, "id">> & ThisType<Layer>;
document.onkeydown = function(e) {
if ((e.target as HTMLElement | null)?.tagName === "INPUT") {
return;
}
if (player.hasWon && !player.keepGoing) {
return;
}