Use locally stored images for cards when possible
This commit is contained in:
parent
e0bf8c39df
commit
916af31051
5 changed files with 87 additions and 16 deletions
|
@ -28,9 +28,8 @@ h1.loading-message {
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Component, Vue } from "vue-property-decorator";
|
import { Component, Vue } from "vue-property-decorator";
|
||||||
import { Action, Getter } from "vuex-class";
|
import { Action, Getter } from "vuex-class";
|
||||||
import { loadSets } from "@/mlpccg/set";
|
import { AppState } from "@/store/types";
|
||||||
import { AppState } from "./store/types";
|
import { refreshCardSource, loadSets, getCards } from "@/mlpccg";
|
||||||
import { getCards } from "./mlpccg/database";
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
components: {}
|
components: {}
|
||||||
|
@ -54,6 +53,7 @@ export default class App extends Vue {
|
||||||
private async loadCards() {
|
private async loadCards() {
|
||||||
this.showLoading("Downloading data for all sets");
|
this.showLoading("Downloading data for all sets");
|
||||||
await loadSets();
|
await loadSets();
|
||||||
|
await refreshCardSource();
|
||||||
this.hideLoading();
|
this.hideLoading();
|
||||||
this.setLoaded(true);
|
this.setLoaded(true);
|
||||||
}
|
}
|
||||||
|
|
50
src/components/Cards/CardImage.vue
Normal file
50
src/components/Cards/CardImage.vue
Normal file
|
@ -0,0 +1,50 @@
|
||||||
|
<template>
|
||||||
|
<img :src="imageURL" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { Component, Vue, Prop } from "vue-property-decorator";
|
||||||
|
import { cardImageURL } from "../../mlpccg";
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
components: {}
|
||||||
|
})
|
||||||
|
export default class CardImage extends Vue {
|
||||||
|
@Prop()
|
||||||
|
private id!: string;
|
||||||
|
|
||||||
|
private loaded!: boolean;
|
||||||
|
private loadedURL!: string;
|
||||||
|
|
||||||
|
private data() {
|
||||||
|
return {
|
||||||
|
loaded: false,
|
||||||
|
loadedURL: ""
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
private mounted() {
|
||||||
|
this.fetchImage();
|
||||||
|
this.$watch("id", () => {
|
||||||
|
this.loaded = false;
|
||||||
|
this.fetchImage();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private async fetchImage() {
|
||||||
|
const url = await cardImageURL(this.id);
|
||||||
|
this.loaded = true;
|
||||||
|
this.loadedURL = url;
|
||||||
|
}
|
||||||
|
|
||||||
|
private get imageURL(): string {
|
||||||
|
if (this.loaded) {
|
||||||
|
return this.loadedURL;
|
||||||
|
}
|
||||||
|
return require("@/assets/images/cardback.webp");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
|
@ -6,7 +6,7 @@
|
||||||
v-for="(card, i) in cards"
|
v-for="(card, i) in cards"
|
||||||
:key="i + card.data.ID"
|
:key="i + card.data.ID"
|
||||||
>
|
>
|
||||||
<img :src="imageURL(card.data.ID)" />
|
<CardImage :id="card.data.ID" />
|
||||||
</article>
|
</article>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
@ -45,9 +45,12 @@ $padding: 10px;
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Component, Vue, Prop } from "vue-property-decorator";
|
import { Component, Vue, Prop } from "vue-property-decorator";
|
||||||
import { Card, CardSlot, cardImageURL } from "@/mlpccg";
|
import { Card, CardSlot, cardImageURL } from "@/mlpccg";
|
||||||
|
import CardImage from "@/components/Cards/CardImage.vue";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
components: {}
|
components: {
|
||||||
|
CardImage
|
||||||
|
}
|
||||||
})
|
})
|
||||||
export default class CardPicker extends Vue {
|
export default class CardPicker extends Vue {
|
||||||
@Prop()
|
@Prop()
|
||||||
|
|
|
@ -1,15 +1,37 @@
|
||||||
import { Database } from "./database";
|
import { Database } from "./database";
|
||||||
|
|
||||||
const imgBaseURL = "https://mcg.zyg.ovh/images/cards/";
|
const imgBaseURL = "https://mcg.zyg.ovh/images/cards/";
|
||||||
|
let imageSource: "local" | "remote" = "remote";
|
||||||
|
|
||||||
export function cardImageURL(cardid: string): string {
|
export function remoteImageURL(cardid: string): string {
|
||||||
return `${imgBaseURL}${cardid}.webp`;
|
return `${imgBaseURL}${cardid}.webp`;
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function cardImageSource() {
|
export async function cardImageURL(cardid: string): Promise<string> {
|
||||||
if (!Database) {
|
if (!Database) {
|
||||||
return "remote";
|
return remoteImageURL(cardid);
|
||||||
|
}
|
||||||
|
switch (cardImageSource()) {
|
||||||
|
case "local":
|
||||||
|
const card = await Database.images.get(`${cardid}.webp`);
|
||||||
|
if (!card) {
|
||||||
|
return remoteImageURL(cardid);
|
||||||
|
}
|
||||||
|
return URL.createObjectURL(card.image);
|
||||||
|
//TODO
|
||||||
|
case "remote":
|
||||||
|
return remoteImageURL(cardid);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function cardImageSource() {
|
||||||
|
return imageSource;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function refreshCardSource() {
|
||||||
|
if (!Database) {
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
const count = await Database.images.count();
|
const count = await Database.images.count();
|
||||||
return count > 1900 ? "local" : "remote";
|
imageSource = count > 1900 ? "local" : "remote";
|
||||||
}
|
}
|
||||||
|
|
|
@ -98,7 +98,7 @@
|
||||||
import { Component, Vue } from "vue-property-decorator";
|
import { Component, Vue } from "vue-property-decorator";
|
||||||
import TopNav from "@/components/Navigation/TopNav.vue";
|
import TopNav from "@/components/Navigation/TopNav.vue";
|
||||||
import { TaskRunner } from "@/workers";
|
import { TaskRunner } from "@/workers";
|
||||||
import { cardImageSource } from "@/mlpccg";
|
import { cardImageSource, refreshCardSource } from "@/mlpccg";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
components: { TopNav }
|
components: { TopNav }
|
||||||
|
@ -125,22 +125,18 @@ export default class SettingsView extends Vue {
|
||||||
});
|
});
|
||||||
worker.on("finish", async _ => {
|
worker.on("finish", async _ => {
|
||||||
this.downloadState = null;
|
this.downloadState = null;
|
||||||
this.cardImageSource = await cardImageSource();
|
await refreshCardSource();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
private data() {
|
private data() {
|
||||||
return {
|
return {
|
||||||
cardImageSource: "remote",
|
cardImageSource: cardImageSource(),
|
||||||
downloadState: null,
|
downloadState: null,
|
||||||
downloadProgress: null
|
downloadProgress: null
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
private async mounted() {
|
|
||||||
this.cardImageSource = await cardImageSource();
|
|
||||||
}
|
|
||||||
|
|
||||||
private get imageSource() {
|
private get imageSource() {
|
||||||
switch (this.cardImageSource) {
|
switch (this.cardImageSource) {
|
||||||
case "local":
|
case "local":
|
||||||
|
|
Loading…
Reference in a new issue