restore a little bit of loading data logic

This commit is contained in:
2024-11-21 20:57:02 +01:00
parent 7ab0bfbf67
commit dd92009cba
+54 -7
View File
@@ -32,23 +32,65 @@ import {version} from "../package.json"
<script lang="ts"> <script lang="ts">
import {defineComponent} from "vue"; import {defineComponent} from "vue";
import AdventurerIdentity from "@/models/AdventurerIdentity.ts";
import Adventurer from "@/models/Adventurer.ts";
export default defineComponent({ export default defineComponent({
name: "GuildView", name: "GuildMaster",
data: () => ({ data: () => ({
loading: true, loading: true,
screenWakeLock: null as null | WakeLockSentinel, screenWakeLock: null as null | WakeLockSentinel,
possibleRecruits: {} as { [key: string]: AdventurerIdentity },
adventurers: {} as { [key: string]: Adventurer },
}), }),
methods: { methods: {
async acquireScreenWakeLock(): Promise<void> {
}, if (!("wakeLock" in navigator)) {
async mounted() { return;
}
if (this.screenWakeLock !== null) {
return;
}
try { try {
this.screenWakeLock = await navigator.wakeLock.request("screen"); this.screenWakeLock = await navigator.wakeLock.request("screen");
} catch (e) { } catch (e) {
console.log("Failed to acquire screen wake lock", e); setTimeout(() => {
this.acquireScreenWakeLock();
}, 1000);
} }
},
async loadAdventurers(): Promise<void> {
await fetch("/data/adventurers.json")
.then(response => response.json())
.then(data => {
if (!Array.isArray(data)) throw new Error("Data was expected to be an array");
for (const rawData of data) {
if (typeof rawData.id !== "string" || typeof rawData.name !== "string" || typeof rawData.portrait !== "string") {
console.error("Failed to load one of the adventurer's data: invalid data");
continue;
}
this.possibleRecruits[rawData.id] = new AdventurerIdentity(
rawData.id,
rawData.name,
rawData.portrait,
);
}
// TODO load adventurers from save file and remove their data from possible recruits
})
.catch(error => {
console.error("Failed to load adventurer data:", error);
});
},
},
async mounted() {
await this.acquireScreenWakeLock();
await this.loadAdventurers();
this.loading = false; this.loading = false;
console.debug("Game loaded"); console.debug("Game loaded");
@@ -82,7 +124,7 @@ nav {
background-size: 100%; background-size: 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: bottom; background-position: bottom;
filter: drop-shadow(0 0 0.5rem rgba(0,0,0, 0.25)); filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.25));
.icon { .icon {
width: 2rem; width: 2rem;
@@ -135,6 +177,7 @@ nav {
width: 80px; width: 80px;
height: 80px; height: 80px;
} }
.lds-ring div { .lds-ring div {
box-sizing: border-box; box-sizing: border-box;
display: block; display: block;
@@ -147,15 +190,19 @@ nav {
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #000 transparent transparent transparent; border-color: #000 transparent transparent transparent;
} }
.lds-ring div:nth-child(1) { .lds-ring div:nth-child(1) {
animation-delay: -0.45s; animation-delay: -0.45s;
} }
.lds-ring div:nth-child(2) { .lds-ring div:nth-child(2) {
animation-delay: -0.3s; animation-delay: -0.3s;
} }
.lds-ring div:nth-child(3) { .lds-ring div:nth-child(3) {
animation-delay: -0.15s; animation-delay: -0.15s;
} }
@keyframes lds-ring { @keyframes lds-ring {
0% { 0% {
transform: rotate(0deg); transform: rotate(0deg);