From ad83e89e526910e6a57269469a97747ca98cfcb5 Mon Sep 17 00:00:00 2001 From: Huakun Shen Date: Sun, 3 Nov 2024 19:34:07 -0500 Subject: [PATCH] feat: implement pixel dance animation component, page and command (#8) * feat: implement pixel dance animation component, page and command * feat: make entire dance page draggable * feat: add dance transition for ui-iframe extension loading --- .prettierrc | 36 +-- apps/desktop/.gitignore | 2 + apps/desktop/package.json | 4 + apps/desktop/setup.ts | 27 +++ apps/desktop/src/lib/cmds/builtin.ts | 18 +- apps/desktop/src/lib/cmds/ext.ts | 6 +- .../lib/components/context/AppContext.svelte | 7 +- apps/desktop/src/lib/components/dance.svelte | 18 ++ .../lib/components/main/CommandPalette.svelte | 13 +- apps/desktop/src/lib/stores/extensions.ts | 16 +- apps/desktop/src/routes/dance/+page.svelte | 22 ++ .../src/routes/extension/store/+page.svelte | 8 +- .../src/routes/extension/store/+page.ts | 7 +- .../routes/extension/ui-iframe/+page.svelte | 31 ++- packages/api/src/commands/db.ts | 13 +- packages/api/src/commands/extension.ts | 8 +- packages/api/src/commands/utils.ts | 4 +- packages/api/src/dev/index.ts | 4 +- .../api/src/permissions/permission-map.ts | 19 +- packages/api/src/ui/client.ts | 6 +- .../api/src/ui/worker/components/list-view.ts | 6 +- packages/ci/scripts/setup.ts | 8 + packages/ci/src/path.ts | 1 + .../permissions/autogenerated/reference.md | 2 + packages/typescript-config/base.json | 2 + packages/ui/package.json | 1 + .../components/animation/canvas-grid.svelte | 37 +++ .../animation/grid-animation.svelte | 60 +++++ .../extension/PermissionInspector.svelte | 5 +- .../ui/src/components/layouts/center.svelte | 8 +- packages/ui/src/index.ts | 1 + packages/utils/__tests__/compress.test.ts | 8 + packages/utils/package.json | 6 + packages/utils/src/index.ts | 1 + packages/utils/src/serde.ts | 33 +++ packages/utils/tsconfig.json | 45 ++-- pnpm-lock.yaml | 226 ++---------------- 37 files changed, 418 insertions(+), 301 deletions(-) create mode 100644 apps/desktop/setup.ts create mode 100644 apps/desktop/src/lib/components/dance.svelte create mode 100644 apps/desktop/src/routes/dance/+page.svelte create mode 100644 packages/ui/src/components/animation/canvas-grid.svelte create mode 100644 packages/ui/src/components/animation/grid-animation.svelte create mode 100644 packages/utils/__tests__/compress.test.ts create mode 100644 packages/utils/src/serde.ts diff --git a/.prettierrc b/.prettierrc index bc660d5..c995589 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,20 +1,20 @@ { - "printWidth": 100, - "tabWidth": 2, - "trailingComma": "none", - "semi": false, - "useTabs": true, - "plugins": [ - "prettier-plugin-svelte", - "@ianvs/prettier-plugin-sort-imports", - "prettier-plugin-tailwindcss" - ], - "overrides": [ - { - "files": "*.svelte", - "options": { - "parser": "svelte" - } - } - ] + "printWidth": 100, + "tabWidth": 2, + "trailingComma": "none", + "semi": false, + "useTabs": true, + "plugins": [ + "prettier-plugin-svelte", + "@ianvs/prettier-plugin-sort-imports", + "prettier-plugin-tailwindcss" + ], + "overrides": [ + { + "files": "*.svelte", + "options": { + "parser": "svelte" + } + } + ] } diff --git a/apps/desktop/.gitignore b/apps/desktop/.gitignore index 6635cf5..24acedb 100644 --- a/apps/desktop/.gitignore +++ b/apps/desktop/.gitignore @@ -8,3 +8,5 @@ node_modules !.env.example vite.config.js.timestamp-* vite.config.ts.timestamp-* +dance.json +dance.bin diff --git a/apps/desktop/package.json b/apps/desktop/package.json index 8384d98..af98d66 100644 --- a/apps/desktop/package.json +++ b/apps/desktop/package.json @@ -4,6 +4,7 @@ "description": "", "type": "module", "scripts": { + "prepare": "bun setup.ts", "dev": "vite dev", "build": "vite build", "preview": "vite preview", @@ -22,6 +23,8 @@ "@tauri-apps/plugin-shell": "^2", "bits-ui": "1.0.0-next.36", "lucide-svelte": "^0.454.0", + "lz-string": "^1.5.0", + "mode-watcher": "^0.4.1", "svelte-radix": "^2.0.1", "svelte-sonner": "^0.3.28", "sveltekit-superforms": "^2.20.0" @@ -36,6 +39,7 @@ "@tailwindcss/forms": "^0.5.9", "@tailwindcss/typography": "^0.5.15", "@tauri-apps/cli": "^2.0.4", + "@types/bun": "latest", "autoprefixer": "^10.4.20", "clsx": "^2.1.1", "embla-carousel-svelte": "^8.3.1", diff --git a/apps/desktop/setup.ts b/apps/desktop/setup.ts new file mode 100644 index 0000000..495d5b0 --- /dev/null +++ b/apps/desktop/setup.ts @@ -0,0 +1,27 @@ +import assert from "assert" +import { compressString, decompressString } from "@kksh/utils" +import { $ } from "bun" + +/* -------------------------------------------------------------------------- */ +/* Download Dance JSON */ +/* -------------------------------------------------------------------------- */ +console.log("Downloading Dance Data...") +const rawData = await fetch("https://dance.kunkun.sh/api/data").then((res) => res.text()) + +function formatFileSize(size: number) { + return `${(size / 1024).toFixed(2)} KB` +} +Bun.write("./src/data/dance.json", rawData) +console.log(`Raw Data Size: ${formatFileSize(rawData.length)}`) +const compressedDance = compressString(rawData) +const decompressedDance = decompressString(compressedDance) +assert(decompressedDance === rawData) +const filePath = "./src/data/dance.bin" + +Bun.write( + filePath, // has to be .txt in order to be imported as text + compressedDance +) +// get file size +const fileSize = Bun.file(filePath).size +console.log(`Dance Data Compressed File Size: ${formatFileSize(fileSize)}`) diff --git a/apps/desktop/src/lib/cmds/builtin.ts b/apps/desktop/src/lib/cmds/builtin.ts index a3bf77b..e6ee94e 100644 --- a/apps/desktop/src/lib/cmds/builtin.ts +++ b/apps/desktop/src/lib/cmds/builtin.ts @@ -74,7 +74,7 @@ export const builtinCmds: BuiltinCmd[] = [ appState.clearSearchTerm() goto("/settings/set-dev-ext-path") } - } + }, // { // name: "Extension Window Troubleshooter", // iconifyIcon: "material-symbols:window-outline", @@ -167,14 +167,14 @@ export const builtinCmds: BuiltinCmd[] = [ // location.reload() // } // }, - // { - // name: "Dance", - // iconifyIcon: "mdi:dance-pole", - // description: "Dance", - // function: async () => { - // goto("/dance") - // } - // }, + { + name: "Dance", + iconifyIcon: "mdi:dance-pole", + description: "Dance", + function: async () => { + goto("/dance") + } + } // { // name: "Quit Kunkun", // iconifyIcon: "emojione:cross-mark-button", diff --git a/apps/desktop/src/lib/cmds/ext.ts b/apps/desktop/src/lib/cmds/ext.ts index 5470804..68fb4b6 100644 --- a/apps/desktop/src/lib/cmds/ext.ts +++ b/apps/desktop/src/lib/cmds/ext.ts @@ -51,7 +51,11 @@ export async function onCustomUiCmdSelect( } else { console.log("Launch main window") return winExtMap - .registerExtensionWithWindow({ windowLabel: "main", extPath: ext.extPath, dist: cmd.dist }) + .registerExtensionWithWindow({ + windowLabel: "main", + extPath: ext.extPath, + dist: cmd.dist + }) .then(() => goto(url2)) } } diff --git a/apps/desktop/src/lib/components/context/AppContext.svelte b/apps/desktop/src/lib/components/context/AppContext.svelte index 11ac3e8..f5faa46 100644 --- a/apps/desktop/src/lib/components/context/AppContext.svelte +++ b/apps/desktop/src/lib/components/context/AppContext.svelte @@ -9,8 +9,11 @@ appConfig, appState, children - }: { appConfig: Writable; appState: Writable; children: Snippet<[]> } = - $props() + }: { + appConfig: Writable + appState: Writable + children: Snippet<[]> + } = $props() setAppConfigContext(appConfig) setAppStateContext(appState) diff --git a/apps/desktop/src/lib/components/dance.svelte b/apps/desktop/src/lib/components/dance.svelte new file mode 100644 index 0000000..ddb2f8f --- /dev/null +++ b/apps/desktop/src/lib/components/dance.svelte @@ -0,0 +1,18 @@ + + + diff --git a/apps/desktop/src/lib/components/main/CommandPalette.svelte b/apps/desktop/src/lib/components/main/CommandPalette.svelte index f608c2a..8e117e4 100644 --- a/apps/desktop/src/lib/components/main/CommandPalette.svelte +++ b/apps/desktop/src/lib/components/main/CommandPalette.svelte @@ -3,6 +3,7 @@ passing everything through props will be very complicated and hard to maintain. --> + + + + + + diff --git a/apps/desktop/src/routes/extension/store/+page.svelte b/apps/desktop/src/routes/extension/store/+page.svelte index 97e9379..8726781 100644 --- a/apps/desktop/src/routes/extension/store/+page.svelte +++ b/apps/desktop/src/routes/extension/store/+page.svelte @@ -36,7 +36,9 @@ async function onExtItemUpgrade(ext: SBExt) { const res = await supabaseAPI.getLatestExtPublish(ext.identifier) if (res.error) - return toast.error("Fail to get latest extension", { description: res.error.message }) + return toast.error("Fail to get latest extension", { + description: res.error.message + }) const tarballUrl = supabaseAPI.translateExtensionFilePathToUrl(res.data.tarball_path) return extensions.upgradeStoreExtension(ext.identifier, tarballUrl).then((newExt) => { toast.success(`${ext.name} Upgraded to ${newExt.version}`) @@ -47,7 +49,9 @@ console.log("onExtItemInstall", ext) const res = await supabaseAPI.getLatestExtPublish(ext.identifier) if (res.error) - return toast.error("Fail to get latest extension", { description: res.error.message }) + return toast.error("Fail to get latest extension", { + description: res.error.message + }) const tarballUrl = supabaseAPI.translateExtensionFilePathToUrl(res.data.tarball_path) const installDir = await getExtensionsFolder() diff --git a/apps/desktop/src/routes/extension/store/+page.ts b/apps/desktop/src/routes/extension/store/+page.ts index d002751..c737f8b 100644 --- a/apps/desktop/src/routes/extension/store/+page.ts +++ b/apps/desktop/src/routes/extension/store/+page.ts @@ -35,5 +35,10 @@ export const load: PageLoad = async (): Promise<{ ) console.log(get(upgradableExpsMap)) - return { storeExtList, installedStoreExts, installedExtsMap, upgradableExpsMap } + return { + storeExtList, + installedStoreExts, + installedExtsMap, + upgradableExpsMap + } } diff --git a/apps/desktop/src/routes/extension/ui-iframe/+page.svelte b/apps/desktop/src/routes/extension/ui-iframe/+page.svelte index ec59ab7..cd11af9 100644 --- a/apps/desktop/src/routes/extension/ui-iframe/+page.svelte +++ b/apps/desktop/src/routes/extension/ui-iframe/+page.svelte @@ -1,4 +1,5 @@ - + {#if uiControl.backBtnPosition}