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

View file

@ -49,7 +49,7 @@
<div v-if="time">Last played {{ dateFormat.format(time) }}</div> <div v-if="time">Last played {{ dateFormat.format(time) }}</div>
</div> </div>
<div class="details" v-else-if="save.error == undefined && editing"> <div class="details" v-else-if="save.error == undefined && editing">
<TextField v-model="newName" class="editname" @submit="changeName" /> <TextField v-model="newName" class="editname" @submit="changeName" @blur="changeName" />
</div> </div>
<div v-else class="details error">Error: Failed to load save with id {{ save.id }}</div> <div v-else class="details error">Error: Failed to load save with id {{ save.id }}</div>
</div> </div>

View file

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

View file

@ -468,7 +468,7 @@ export default {
<spacer height="5px" /> <spacer height="5px" />
<button onclick='console.log("yeet")'>'HI'</button> <button onclick='console.log("yeet")'>'HI'</button>
<div>Name your points!</div> <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> <sticky style="color: red; font-size: 32px; font-family: Comic Sans MS;">I have {{ format(player.points) }} {{ player.layers.c.thingy }} points!</sticky>
<hr /> <hr />
<milestones /> <milestones />

View file

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

View file

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