Ryan/drop-app
1
0
Fork 0
mirror of https://github.com/Drop-OSS/drop-app.git synced 2025-11-13 00:02:41 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat(download & db): combined db and download interface improvements

Browse Source
This commit is contained in:
DecDuck
2024-12-07 11:00:35 +11:00
parent 8670bca834
commit de52dac0ab
10 changed files with 186 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
components/GameStatusButton.vue
View File

@ -1,18 +1,18 @@
<template>
<button
type="button"
@click="() => buttonActions[props.status]()"
@click="() => buttonActions[props.status.type]()"
:class="[
styles[props.status],
styles[props.status.type],
'inline-flex uppercase font-display items-center gap-x-2 rounded-md px-4 py-3 text-md font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
]"
>
<component
:is="buttonIcons[props.status]"
:is="buttonIcons[props.status.type]"
class="-mr-0.5 size-5"
aria-hidden="true"
/>
{{ buttonNames[props.status] }}
{{ buttonNames[props.status.type] }}
</button>
</template>
@ -22,9 +22,10 @@ import {
PlayIcon,
QueueListIcon,
TrashIcon,
WrenchIcon,
} from "@heroicons/vue/20/solid";
import type { Component } from "vue";
import { GameStatus } from "~/types.js";
import { GameStatusEnum, type GameStatus } from "~/types.js";
const props = defineProps<{ status: GameStatus }>();
const emit = defineEmits<{
@ -33,43 +34,48 @@ const emit = defineEmits<{
(e: "play"): void;
}>();
const styles: { [key in GameStatus]: string } = {
[GameStatus.Remote]:
const styles: { [key in GameStatusEnum]: string } = {
[GameStatusEnum.Remote]:
"bg-blue-600 text-white hover:bg-blue-500 focus-visible:outline-blue-600",
[GameStatus.Queued]:
[GameStatusEnum.Queued]:
"bg-zinc-800 text-white hover:bg-zinc-700 focus-visible:outline-zinc-700",
[GameStatus.Downloading]:
[GameStatusEnum.Downloading]:
"bg-zinc-800 text-white hover:bg-zinc-700 focus-visible:outline-zinc-700",
[GameStatus.Installed]:
[GameStatusEnum.SetupRequired]:
"bg-yellow-600 text-white hover:bg-yellow-500 focus-visible:outline-yellow-600",
[GameStatusEnum.Installed]:
"bg-green-600 text-white hover:bg-green-500 focus-visible:outline-green-600",
[GameStatus.Updating]: "",
[GameStatus.Uninstalling]: "",
[GameStatusEnum.Updating]: "",
[GameStatusEnum.Uninstalling]: "",
};
const buttonNames: { [key in GameStatus]: string } = {
[GameStatus.Remote]: "Install",
[GameStatus.Queued]: "Queued",
[GameStatus.Downloading]: "Downloading",
[GameStatus.Installed]: "Play",
[GameStatus.Updating]: "Updating",
[GameStatus.Uninstalling]: "Uninstalling",
const buttonNames: { [key in GameStatusEnum]: string } = {
[GameStatusEnum.Remote]: "Install",
[GameStatusEnum.Queued]: "Queued",
[GameStatusEnum.Downloading]: "Downloading",
[GameStatusEnum.SetupRequired]: "Setup",
[GameStatusEnum.Installed]: "Play",
[GameStatusEnum.Updating]: "Updating",
[GameStatusEnum.Uninstalling]: "Uninstalling",
};
const buttonIcons: { [key in GameStatus]: Component } = {
[GameStatus.Remote]: ArrowDownTrayIcon,
[GameStatus.Queued]: QueueListIcon,
[GameStatus.Downloading]: ArrowDownTrayIcon,
[GameStatus.Installed]: PlayIcon,
[GameStatus.Updating]: ArrowDownTrayIcon,
[GameStatus.Uninstalling]: TrashIcon,
const buttonIcons: { [key in GameStatusEnum]: Component } = {
[GameStatusEnum.Remote]: ArrowDownTrayIcon,
[GameStatusEnum.Queued]: QueueListIcon,
[GameStatusEnum.Downloading]: ArrowDownTrayIcon,
[GameStatusEnum.SetupRequired]: WrenchIcon,
[GameStatusEnum.Installed]: PlayIcon,
[GameStatusEnum.Updating]: ArrowDownTrayIcon,
[GameStatusEnum.Uninstalling]: TrashIcon,
};
const buttonActions: { [key in GameStatus]: () => void } = {
[GameStatus.Remote]: () => emit("install"),
[GameStatus.Queued]: () => emit("cancel"),
[GameStatus.Downloading]: () => emit("cancel"),
[GameStatus.Installed]: () => emit("play"),
[GameStatus.Updating]: () => emit("cancel"),
[GameStatus.Uninstalling]: () => {},
const buttonActions: { [key in GameStatusEnum]: () => void } = {
[GameStatusEnum.Remote]: () => emit("install"),
[GameStatusEnum.Queued]: () => emit("cancel"),
[GameStatusEnum.Downloading]: () => emit("cancel"),
[GameStatusEnum.SetupRequired]: () => {},
[GameStatusEnum.Installed]: () => emit("play"),
[GameStatusEnum.Updating]: () => emit("cancel"),
[GameStatusEnum.Uninstalling]: () => {},
};
</script>