feat(queue & game): queue and library UIs

This commit is contained in:
DecDuck
2024-12-17 20:29:54 +11:00
parent 3f71149289
commit 0a20139a7c
12 changed files with 255 additions and 26 deletions

View File

@ -18,6 +18,8 @@
"@tauri-apps/plugin-deep-link": "~2",
"@tauri-apps/plugin-dialog": "^2.0.1",
"@tauri-apps/plugin-shell": ">=2.0.0",
"markdown-it": "^14.1.0",
"moment": "^2.30.1",
"nuxt": "^3.13.0",
"scss": "^0.2.4",
"vue": "latest",
@ -26,7 +28,9 @@
},
"devDependencies": {
"@tailwindcss/forms": "^0.5.9",
"@tailwindcss/typography": "^0.5.15",
"@tauri-apps/cli": ">=2.0.0",
"@types/markdown-it": "^14.1.2",
"autoprefixer": "^10.4.20",
"postcss": "^8.4.47",
"sass-embedded": "^1.79.4",

View File

@ -1,6 +1,6 @@
<template>
<div class="flex flex-row h-full">
<div class="flex-none h-full w-64 bg-zinc-950 px-2 py-1">
<div class="flex-none max-h-full overflow-y-scroll w-64 bg-zinc-950 px-2 py-1">
<ul class="flex flex-col gap-y-1">
<NuxtLink
v-for="(nav, navIdx) in navigation"

View File

@ -6,7 +6,7 @@
<div class="absolute flex top-0 h-fit inset-x-0 z-[-20]">
<img :src="bannerUrl" class="w-full h-auto object-cover" />
<h1
class="absolute inset-x-0 w-full text-center top-32 -translate-y-[50%] text-4xl text-zinc-100 font-bold font-display z-50"
class="absolute inset-x-0 w-fit mx-auto text-center top-32 -translate-y-[50%] text-4xl text-zinc-100 font-bold font-display z-50 p-4 shadow-xl bg-zinc-900/80 rounded"
>
{{ game.mName }}
</h1>
@ -24,6 +24,34 @@
:status="status"
/>
</div>
<div class="flex flex-row">
<div>
<div
v-if="showPreview"
v-html="previewHTML"
class="mt-12 prose prose-invert prose-blue max-w-none"
/>
<div
v-else
v-html="descriptionHTML"
class="mt-12 prose prose-invert prose-blue max-w-none"
/>
<button
v-if="showReadMore"
class="mt-8 w-full inline-flex items-center gap-x-6"
@click="() => (showPreview = !showPreview)"
>
<div class="grow h-[1px] bg-zinc-700 rounded-full" />
<span
class="uppercase text-sm font-semibold font-display text-zinc-600"
>Click to read {{ showPreview ? "more" : "less" }}</span
>
<div class="grow h-[1px] bg-zinc-700 rounded-full" />
</button>
</div>
</div>
</div>
</div>
@ -323,8 +351,8 @@ import {
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
import { XCircleIcon } from "@heroicons/vue/24/solid";
import { invoke } from "@tauri-apps/api/core";
import { listen } from "@tauri-apps/api/event";
import type { Game, GameStatus } from "~/types";
import MarkdownIt from "markdown-it";
import moment from "moment";
const route = useRoute();
const id = route.params.id.toString();
@ -334,6 +362,32 @@ const game = ref(rawGame);
const bannerUrl = await useObject(game.value.mBannerId);
const md = MarkdownIt();
const showPreview = ref(true);
const gameDescriptionCharacters = game.value.mDescription.split("");
// First new line after x characters
const descriptionSplitIndex = gameDescriptionCharacters.findIndex(
(v, i, arr) => {
// If we're at the last element, we return true.
// So we don't have to handle a -1 from this findIndex
if (i + 1 == arr.length) return true;
if (i < 500) return false;
if (v != "\n") return false;
return true;
}
);
const previewDescription = gameDescriptionCharacters
.slice(0, descriptionSplitIndex + 1) // Slice a character after
.join("");
const previewHTML = md.render(previewDescription);
const descriptionHTML = md.render(game.value.mDescription);
const showReadMore = previewHTML != descriptionHTML;
const installFlowOpen = ref(false);
const versionOptions = ref<
undefined | Array<{ versionName: string; platform: string }>

View File

@ -1,24 +1,91 @@
<template>
<draggable v-model="queue.queue" @end="onEnd">
<template #item="{ element }: { element: (typeof queue.value.queue)[0] }">
<div class="text-white">
{{ element.id }}
</div>
</template>
</draggable>
{{ current }}
{{ rest }}
<div class="bg-zinc-950 p-4 min-h-full">
<draggable v-model="queue.queue" @end="onEnd">
<template #item="{ element }: { element: (typeof queue.value.queue)[0] }">
<li
v-if="games[element.id]"
:key="element.id"
class="mb-4 bg-zinc-900 rounded-lg relative flex justify-between gap-x-6 py-5 px-4"
>
<div class="flex items-center max-w-md gap-x-4">
<img
class="size-24 flex-none bg-zinc-800 object-cover rounded"
:src="games[element.id].cover"
alt=""
/>
<div class="min-w-0 flex-auto">
<p class="text-xl font-semibold text-zinc-100">
<NuxtLink :href="`/library/${element.id}`">
<span class="absolute inset-x-0 -top-px bottom-0" />
{{ games[element.id].game.mName }}
</NuxtLink>
</p>
<p class="mt-1 flex text-xs/5 text-gray-500">
{{ games[element.id].game.mShortDescription }}
</p>
</div>
</div>
<div class="flex shrink-0 items-center gap-x-4">
<div class="hidden sm:flex sm:flex-col sm:items-end">
<p class="text-md text-zinc-500 uppercase font-display font-bold">
{{ element.status }}
</p>
<div
v-if="element.progress"
class="mt-1 w-96 bg-zinc-800 rounded-lg overflow-hidden"
>
<div
class="h-2 bg-blue-600"
:style="{ width: `${element.progress * 100}%` }"
/>
</div>
</div>
<ChevronRightIcon
class="size-5 flex-none text-gray-400"
aria-hidden="true"
/>
</div>
</li>
<p v-else>Loading...</p>
</template>
</draggable>
</div>
</template>
<script setup lang="ts">
import { invoke } from "@tauri-apps/api/core";
import type { Game, GameStatus } from "~/types";
const queue = useQueueState();
const current = computed(() => queue.value.queue.at(0));
const rest = computed(() => queue.value.queue.slice(1));
const games: Ref<{
[key: string]: { game: Game; status: Ref<GameStatus>; cover: string };
}> = ref({});
watch(queue, (v) => {
loadGamesForQueue(v);
});
function loadGamesForQueue(v: typeof queue.value) {
for (const { id } of v.queue) {
if (games.value[id]) return;
(async () => {
const gameData = await useGame(id);
const cover = await useObject(gameData.game.mCoverId);
games.value[id] = { ...gameData, cover };
})();
}
}
loadGamesForQueue(queue.value);
async function onEnd(event: { oldIndex: number; newIndex: number }) {
await invoke("move_game_in_queue", { oldIndex: event.oldIndex, newIndex: event.newIndex });
await invoke("move_game_in_queue", {
oldIndex: event.oldIndex,
newIndex: event.newIndex,
});
}
</script>

View File

@ -26,9 +26,6 @@ pub struct DatabaseAuth {
#[serde(tag = "type")]
pub enum DatabaseGameStatus {
Remote {},
Queued {
version_name: String,
},
Downloading {
version_name: String,
},

View File

@ -11,6 +11,8 @@ use tauri::utils::acl::Permission;
use std::fs::{set_permissions, Permissions};
use std::io::Read;
use std::os::unix::fs::PermissionsExt;
use std::thread::sleep;
use std::time::Duration;
use std::{
fs::{File, OpenOptions},
io::{self, BufWriter, Seek, SeekFrom, Write},

View File

@ -51,7 +51,6 @@ pub enum DownloadManagerStatus {
pub enum GameDownloadStatus {
Queued,
Downloading,
Paused,
Error,
}
@ -143,6 +142,10 @@ impl DownloadManager {
.unwrap();
}
pub fn rearrange(&self, current_index: usize, new_index: usize) {
if current_index == new_index {
return;
};
let needs_pause = current_index == 0 || new_index == 0;
if needs_pause {
self.command_sender

View File

@ -257,7 +257,7 @@ impl DownloadManagerBuilder {
.insert(interface_data.id.clone(), download_agent);
self.download_queue.append(interface_data);
self.set_game_status(id, DatabaseGameStatus::Queued { version_name });
self.set_game_status(id, DatabaseGameStatus::Downloading { version_name });
self.sender.send(DownloadManagerSignal::Update).unwrap();
}
@ -309,9 +309,16 @@ impl DownloadManagerBuilder {
};
}));
// Set status for game
let mut status_handle = agent_data.status.lock().unwrap();
*status_handle = GameDownloadStatus::Downloading;
// Set status for games
for queue_game in self.download_queue.read() {
let mut status_handle = queue_game.status.lock().unwrap();
if queue_game.id == agent_data.id {
*status_handle = GameDownloadStatus::Downloading;
} else {
*status_handle = GameDownloadStatus::Queued;
}
drop(status_handle);
}
// Set flags for download manager
active_control_flag.set(DownloadThreadControlFlag::Go);
@ -320,6 +327,8 @@ impl DownloadManagerBuilder {
self.current_download_agent.as_ref().unwrap().id.clone(),
DatabaseGameStatus::Downloading { version_name },
);
self.sender.send(DownloadManagerSignal::Update).unwrap();
}
fn manage_error_signal(&mut self, error: GameDownloadError) {
let current_status = self.current_download_agent.clone().unwrap();

View File

@ -195,7 +195,7 @@ pub fn run() {
tauri::WebviewUrl::App("index.html".into()),
)
.title("Drop Desktop App")
.min_inner_size(900.0, 900.0)
.min_inner_size(1000.0, 500.0)
.inner_size(1536.0, 864.0)
.decorations(false)
.data_directory(DATA_ROOT_DIR.lock().unwrap().join(".webview"))

View File

@ -176,7 +176,10 @@ fn fetch_game_logic(
}
#[tauri::command]
pub fn fetch_game(id: String, app: tauri::AppHandle) -> Result<FetchGameStruct, String> {
pub fn fetch_game(
id: String,
app: tauri::AppHandle,
) -> Result<FetchGameStruct, String> {
let result = fetch_game_logic(id, app);
if result.is_err() {

View File

@ -16,5 +16,5 @@ export default {
},
},
},
plugins: [require("@tailwindcss/forms")],
plugins: [require("@tailwindcss/forms"), require('@tailwindcss/typography')],
};

View File

@ -1245,6 +1245,16 @@
dependencies:
mini-svg-data-uri "^1.2.3"
"@tailwindcss/typography@^0.5.15":
version "0.5.15"
resolved "https://registry.yarnpkg.com/@tailwindcss/typography/-/typography-0.5.15.tgz#007ab9870c86082a1c76e5b3feda9392c7c8d648"
integrity sha512-AqhlCXl+8grUz8uqExv5OTtgpjuVIwFTSXTrh8y9/pw6q2ek7fJ+Y8ZEVw7EB2DCcuCOtEjf9w3+J3rzts01uA==
dependencies:
lodash.castarray "^4.4.0"
lodash.isplainobject "^4.0.6"
lodash.merge "^4.6.2"
postcss-selector-parser "6.0.10"
"@tanstack/virtual-core@3.10.8":
version "3.10.8"
resolved "https://registry.yarnpkg.com/@tanstack/virtual-core/-/virtual-core-3.10.8.tgz#975446a667755222f62884c19e5c3c66d959b8b4"
@ -1366,6 +1376,24 @@
dependencies:
"@types/node" "*"
"@types/linkify-it@^5":
version "5.0.0"
resolved "https://registry.yarnpkg.com/@types/linkify-it/-/linkify-it-5.0.0.tgz#21413001973106cda1c3a9b91eedd4ccd5469d76"
integrity sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==
"@types/markdown-it@^14.1.2":
version "14.1.2"
resolved "https://registry.yarnpkg.com/@types/markdown-it/-/markdown-it-14.1.2.tgz#57f2532a0800067d9b934f3521429a2e8bfb4c61"
integrity sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==
dependencies:
"@types/linkify-it" "^5"
"@types/mdurl" "^2"
"@types/mdurl@^2":
version "2.0.0"
resolved "https://registry.yarnpkg.com/@types/mdurl/-/mdurl-2.0.0.tgz#d43878b5b20222682163ae6f897b20447233bdfd"
integrity sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==
"@types/node@*":
version "22.7.4"
resolved "https://registry.yarnpkg.com/@types/node/-/node-22.7.4.tgz#e35d6f48dca3255ce44256ddc05dee1c23353fcc"
@ -2496,7 +2524,7 @@ enhanced-resolve@^5.14.1:
graceful-fs "^4.2.4"
tapable "^2.2.0"
entities@^4.2.0, entities@^4.5.0:
entities@^4.2.0, entities@^4.4.0, entities@^4.5.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
@ -3346,6 +3374,13 @@ lines-and-columns@^1.1.6:
resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
linkify-it@^5.0.0:
version "5.0.0"
resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-5.0.0.tgz#9ef238bfa6dc70bd8e7f9572b52d369af569b421"
integrity sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==
dependencies:
uc.micro "^2.0.0"
listhen@^1.7.2:
version "1.9.0"
resolved "https://registry.yarnpkg.com/listhen/-/listhen-1.9.0.tgz#59355f7e4fc1eefda6bc494ae7e9ed13aa7658ef"
@ -3378,6 +3413,11 @@ local-pkg@^0.5.0:
mlly "^1.4.2"
pkg-types "^1.0.3"
lodash.castarray@^4.4.0:
version "4.4.0"
resolved "https://registry.yarnpkg.com/lodash.castarray/-/lodash.castarray-4.4.0.tgz#c02513515e309daddd4c24c60cfddcf5976d9115"
integrity sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==
lodash.defaults@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c"
@ -3388,11 +3428,21 @@ lodash.isarguments@^3.1.0:
resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
integrity sha512-chi4NHZlZqZD18a0imDHnZPrDeBbTtVN7GXMwuGdRH9qotxAjYs3aVLKc7zNOG9eddR5Ksd8rvFEBc9SsggPpg==
lodash.isplainobject@^4.0.6:
version "4.0.6"
resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
integrity sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==
lodash.memoize@^4.1.2:
version "4.1.2"
resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
integrity sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==
lodash.merge@^4.6.2:
version "4.6.2"
resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
lodash.uniq@^4.5.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
@ -3445,6 +3495,18 @@ make-dir@^3.1.0:
dependencies:
semver "^6.0.0"
markdown-it@^14.1.0:
version "14.1.0"
resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-14.1.0.tgz#3c3c5992883c633db4714ccb4d7b5935d98b7d45"
integrity sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==
dependencies:
argparse "^2.0.1"
entities "^4.4.0"
linkify-it "^5.0.0"
mdurl "^2.0.0"
punycode.js "^2.3.1"
uc.micro "^2.1.0"
mdn-data@2.0.28:
version "2.0.28"
resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.28.tgz#5ec48e7bef120654539069e1ae4ddc81ca490eba"
@ -3455,6 +3517,11 @@ mdn-data@2.0.30:
resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.30.tgz#ce4df6f80af6cfbe218ecd5c552ba13c4dfa08cc"
integrity sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==
mdurl@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-2.0.0.tgz#80676ec0433025dd3e17ee983d0fe8de5a2237e0"
integrity sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==
merge-stream@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
@ -3564,6 +3631,11 @@ mlly@^1.3.0, mlly@^1.4.2, mlly@^1.6.1, mlly@^1.7.1:
pkg-types "^1.2.0"
ufo "^1.5.4"
moment@^2.30.1:
version "2.30.1"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.30.1.tgz#f8c91c07b7a786e30c59926df530b4eac96974ae"
integrity sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==
mri@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/mri/-/mri-1.2.0.tgz#6721480fec2a11a4889861115a48b6cbe7cc8f0b"
@ -4262,6 +4334,14 @@ postcss-reduce-transforms@^7.0.0:
dependencies:
postcss-value-parser "^4.2.0"
postcss-selector-parser@6.0.10:
version "6.0.10"
resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
dependencies:
cssesc "^3.0.0"
util-deprecate "^1.0.2"
postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.1.1, postcss-selector-parser@^6.1.2:
version "6.1.2"
resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz#27ecb41fb0e3b6ba7a1ec84fff347f734c7929de"
@ -4327,6 +4407,11 @@ protocols@^2.0.0, protocols@^2.0.1:
resolved "https://registry.yarnpkg.com/protocols/-/protocols-2.0.1.tgz#8f155da3fc0f32644e83c5782c8e8212ccf70a86"
integrity sha512-/XJ368cyBJ7fzLMwLKv1e4vLxOju2MNAIokcr7meSaNcVbWz/CPcW22cP04mwxOErdA5mwjA8Q6w/cdAQxVn7Q==
punycode.js@^2.3.1:
version "2.3.1"
resolved "https://registry.yarnpkg.com/punycode.js/-/punycode.js-2.3.1.tgz#6b53e56ad75588234e79f4affa90972c7dd8cdb7"
integrity sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==
queue-microtask@^1.2.2:
version "1.2.3"
resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
@ -5165,6 +5250,11 @@ type-fest@^3.8.0:
resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-3.13.1.tgz#bb744c1f0678bea7543a2d1ec24e83e68e8c8706"
integrity sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==
uc.micro@^2.0.0, uc.micro@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-2.1.0.tgz#f8d3f7d0ec4c3dea35a7e3c8efa4cb8b45c9e7ee"
integrity sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==
ufo@^1.1.2, ufo@^1.5.3, ufo@^1.5.4:
version "1.5.4"
resolved "https://registry.yarnpkg.com/ufo/-/ufo-1.5.4.tgz#16d6949674ca0c9e0fbbae1fa20a71d7b1ded754"