simeonradivoev/gameflow-deck
simeonradivoev/gameflow-deck
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: Made design more responsive

Browse source 
fix: Made blurring server side to help with performance
fix: Fixed shortcut useEffect loop
This commit is contained in:
Simeon Radivoev 2026-02-26 00:28:14 +02:00
parent b4a89385d0
commit 9e4b2a02c1
Signed by: simeonradivoev
GPG key ID: 7611A451D2A5D37A
38 changed files with 583 additions and 329 deletions
Download patch file Download diff file Expand all files Collapse all files

5
.vscode/settings.json vendored
View file

@ -35,5 +35,8 @@
"WAYLAND_DISPLAY": "wayland-0", "WAYLAND_DISPLAY": "wayland-0",
"XDG_RUNTIME_DIR": "/run/user/1000", "XDG_RUNTIME_DIR": "/run/user/1000",
"GPG_TTY": "/dev/tty" "GPG_TTY": "/dev/tty"
} },
"editor.suggest.preview": true,
"editor.suggest.snippetsPreventQuickSuggestions": false,
"editor.wordWrap": "on"
} }

4
.vscode/tasks.json vendored
View file

@ -39,6 +39,10 @@
"type": "shell", "type": "shell",
"command": "bun run dev:hmr", "command": "bun run dev:hmr",
"isBackground": true, "isBackground": true,
"options": {
"env": {
}
},
"problemMatcher": [], "problemMatcher": [],
"presentation": { "presentation": {
"echo": true, "echo": true,

55
bun.lock
View file

@ -21,6 +21,7 @@
"node-stream-zip": "^1.15.0", "node-stream-zip": "^1.15.0",
"open": "^11.0.0", "open": "^11.0.0",
"pathe": "^2.0.3", "pathe": "^2.0.3",
"sharp": "^0.34.5",
"systeminformation": "^5.31.1", "systeminformation": "^5.31.1",
"tough-cookie": "^6.0.0", "tough-cookie": "^6.0.0",
"tough-cookie-file-store": "^3.3.0", "tough-cookie-file-store": "^3.3.0",
@ -136,6 +137,8 @@
"@elysiajs/static": ["@elysiajs/static@1.4.7", "", { "peerDependencies": { "elysia": ">= 1.4.0" } }, "sha512-Go4kIXZ0G3iWfkAld07HmLglqIDMVXdyRKBQK/sVEjtpDdjHNb+rUIje73aDTWpZYg4PEVHUpi9v4AlNEwrQug=="], "@elysiajs/static": ["@elysiajs/static@1.4.7", "", { "peerDependencies": { "elysia": ">= 1.4.0" } }, "sha512-Go4kIXZ0G3iWfkAld07HmLglqIDMVXdyRKBQK/sVEjtpDdjHNb+rUIje73aDTWpZYg4PEVHUpi9v4AlNEwrQug=="],
"@emnapi/runtime": ["@emnapi/runtime@1.8.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg=="],
"@epic-web/invariant": ["@epic-web/invariant@1.0.0", "", {}, "sha512-lrTPqgvfFQtR/eY/qkIzp98OGdNJu0m5ji3q/nJI8v3SXkRKEnWiOxMmbvcSoAIzv/cGiuvRy57k4suKQSAdwA=="], "@epic-web/invariant": ["@epic-web/invariant@1.0.0", "", {}, "sha512-lrTPqgvfFQtR/eY/qkIzp98OGdNJu0m5ji3q/nJI8v3SXkRKEnWiOxMmbvcSoAIzv/cGiuvRy57k4suKQSAdwA=="],
"@esbuild-kit/core-utils": ["@esbuild-kit/core-utils@3.3.2", "", { "dependencies": { "esbuild": "~0.18.20", "source-map-support": "^0.5.21" } }, "sha512-sPRAnw9CdSsRmEtnsl2WXWdyquogVpB3yZ3dgwJfe8zrOzTsV7cJvmwrKVa+0ma5BoiGJ+BoqkMvawbayKUsqQ=="], "@esbuild-kit/core-utils": ["@esbuild-kit/core-utils@3.3.2", "", { "dependencies": { "esbuild": "~0.18.20", "source-map-support": "^0.5.21" } }, "sha512-sPRAnw9CdSsRmEtnsl2WXWdyquogVpB3yZ3dgwJfe8zrOzTsV7cJvmwrKVa+0ma5BoiGJ+BoqkMvawbayKUsqQ=="],
@ -204,6 +207,56 @@
"@hey-api/types": ["@hey-api/types@0.1.3", "", { "peerDependencies": { "typescript": ">=5.5.3" } }, "sha512-mZaiPOWH761yD4GjDQvtjS2ZYLu5o5pI1TVSvV/u7cmbybv51/FVtinFBeaE1kFQCKZ8OQpn2ezjLBJrKsGATw=="], "@hey-api/types": ["@hey-api/types@0.1.3", "", { "peerDependencies": { "typescript": ">=5.5.3" } }, "sha512-mZaiPOWH761yD4GjDQvtjS2ZYLu5o5pI1TVSvV/u7cmbybv51/FVtinFBeaE1kFQCKZ8OQpn2ezjLBJrKsGATw=="],
"@img/colour": ["@img/colour@1.0.0", "", {}, "sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw=="],
"@img/sharp-darwin-arm64": ["@img/sharp-darwin-arm64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-darwin-arm64": "1.2.4" }, "os": "darwin", "cpu": "arm64" }, "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w=="],
"@img/sharp-darwin-x64": ["@img/sharp-darwin-x64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-darwin-x64": "1.2.4" }, "os": "darwin", "cpu": "x64" }, "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw=="],
"@img/sharp-libvips-darwin-arm64": ["@img/sharp-libvips-darwin-arm64@1.2.4", "", { "os": "darwin", "cpu": "arm64" }, "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g=="],
"@img/sharp-libvips-darwin-x64": ["@img/sharp-libvips-darwin-x64@1.2.4", "", { "os": "darwin", "cpu": "x64" }, "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg=="],
"@img/sharp-libvips-linux-arm": ["@img/sharp-libvips-linux-arm@1.2.4", "", { "os": "linux", "cpu": "arm" }, "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A=="],
"@img/sharp-libvips-linux-arm64": ["@img/sharp-libvips-linux-arm64@1.2.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw=="],
"@img/sharp-libvips-linux-ppc64": ["@img/sharp-libvips-linux-ppc64@1.2.4", "", { "os": "linux", "cpu": "ppc64" }, "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA=="],
"@img/sharp-libvips-linux-riscv64": ["@img/sharp-libvips-linux-riscv64@1.2.4", "", { "os": "linux", "cpu": "none" }, "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA=="],
"@img/sharp-libvips-linux-s390x": ["@img/sharp-libvips-linux-s390x@1.2.4", "", { "os": "linux", "cpu": "s390x" }, "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ=="],
"@img/sharp-libvips-linux-x64": ["@img/sharp-libvips-linux-x64@1.2.4", "", { "os": "linux", "cpu": "x64" }, "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw=="],
"@img/sharp-libvips-linuxmusl-arm64": ["@img/sharp-libvips-linuxmusl-arm64@1.2.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw=="],
"@img/sharp-libvips-linuxmusl-x64": ["@img/sharp-libvips-linuxmusl-x64@1.2.4", "", { "os": "linux", "cpu": "x64" }, "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg=="],
"@img/sharp-linux-arm": ["@img/sharp-linux-arm@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-arm": "1.2.4" }, "os": "linux", "cpu": "arm" }, "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw=="],
"@img/sharp-linux-arm64": ["@img/sharp-linux-arm64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-arm64": "1.2.4" }, "os": "linux", "cpu": "arm64" }, "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg=="],
"@img/sharp-linux-ppc64": ["@img/sharp-linux-ppc64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-ppc64": "1.2.4" }, "os": "linux", "cpu": "ppc64" }, "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA=="],
"@img/sharp-linux-riscv64": ["@img/sharp-linux-riscv64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-riscv64": "1.2.4" }, "os": "linux", "cpu": "none" }, "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw=="],
"@img/sharp-linux-s390x": ["@img/sharp-linux-s390x@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-s390x": "1.2.4" }, "os": "linux", "cpu": "s390x" }, "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg=="],
"@img/sharp-linux-x64": ["@img/sharp-linux-x64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-x64": "1.2.4" }, "os": "linux", "cpu": "x64" }, "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ=="],
"@img/sharp-linuxmusl-arm64": ["@img/sharp-linuxmusl-arm64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linuxmusl-arm64": "1.2.4" }, "os": "linux", "cpu": "arm64" }, "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg=="],
"@img/sharp-linuxmusl-x64": ["@img/sharp-linuxmusl-x64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linuxmusl-x64": "1.2.4" }, "os": "linux", "cpu": "x64" }, "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q=="],
"@img/sharp-wasm32": ["@img/sharp-wasm32@0.34.5", "", { "dependencies": { "@emnapi/runtime": "^1.7.0" }, "cpu": "none" }, "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw=="],
"@img/sharp-win32-arm64": ["@img/sharp-win32-arm64@0.34.5", "", { "os": "win32", "cpu": "arm64" }, "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g=="],
"@img/sharp-win32-ia32": ["@img/sharp-win32-ia32@0.34.5", "", { "os": "win32", "cpu": "ia32" }, "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg=="],
"@img/sharp-win32-x64": ["@img/sharp-win32-x64@0.34.5", "", { "os": "win32", "cpu": "x64" }, "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw=="],
"@isaacs/balanced-match": ["@isaacs/balanced-match@4.0.1", "", {}, "sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ=="], "@isaacs/balanced-match": ["@isaacs/balanced-match@4.0.1", "", {}, "sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ=="],
"@isaacs/brace-expansion": ["@isaacs/brace-expansion@5.0.0", "", { "dependencies": { "@isaacs/balanced-match": "^4.0.1" } }, "sha512-ZT55BDLV0yv0RBm2czMiZ+SqCGO7AvmOM3G/w2xhVPH+te0aKgFjmBvGlL1dH+ql2tgGO3MVrbb3jCKyvpgnxA=="], "@isaacs/brace-expansion": ["@isaacs/brace-expansion@5.0.0", "", { "dependencies": { "@isaacs/balanced-match": "^4.0.1" } }, "sha512-ZT55BDLV0yv0RBm2czMiZ+SqCGO7AvmOM3G/w2xhVPH+te0aKgFjmBvGlL1dH+ql2tgGO3MVrbb3jCKyvpgnxA=="],
@ -896,6 +949,8 @@
"seroval-plugins": ["seroval-plugins@1.4.2", "", { "peerDependencies": { "seroval": "^1.0" } }, "sha512-X7p4MEDTi+60o2sXZ4bnDBhgsUYDSkQEvzYZuJyFqWg9jcoPsHts5nrg5O956py2wyt28lUrBxk0M0/wU8URpA=="], "seroval-plugins": ["seroval-plugins@1.4.2", "", { "peerDependencies": { "seroval": "^1.0" } }, "sha512-X7p4MEDTi+60o2sXZ4bnDBhgsUYDSkQEvzYZuJyFqWg9jcoPsHts5nrg5O956py2wyt28lUrBxk0M0/wU8URpA=="],
"sharp": ["sharp@0.34.5", "", { "dependencies": { "@img/colour": "^1.0.0", "detect-libc": "^2.1.2", "semver": "^7.7.3" }, "optionalDependencies": { "@img/sharp-darwin-arm64": "0.34.5", "@img/sharp-darwin-x64": "0.34.5", "@img/sharp-libvips-darwin-arm64": "1.2.4", "@img/sharp-libvips-darwin-x64": "1.2.4", "@img/sharp-libvips-linux-arm": "1.2.4", "@img/sharp-libvips-linux-arm64": "1.2.4", "@img/sharp-libvips-linux-ppc64": "1.2.4", "@img/sharp-libvips-linux-riscv64": "1.2.4", "@img/sharp-libvips-linux-s390x": "1.2.4", "@img/sharp-libvips-linux-x64": "1.2.4", "@img/sharp-libvips-linuxmusl-arm64": "1.2.4", "@img/sharp-libvips-linuxmusl-x64": "1.2.4", "@img/sharp-linux-arm": "0.34.5", "@img/sharp-linux-arm64": "0.34.5", "@img/sharp-linux-ppc64": "0.34.5", "@img/sharp-linux-riscv64": "0.34.5", "@img/sharp-linux-s390x": "0.34.5", "@img/sharp-linux-x64": "0.34.5", "@img/sharp-linuxmusl-arm64": "0.34.5", "@img/sharp-linuxmusl-x64": "0.34.5", "@img/sharp-wasm32": "0.34.5", "@img/sharp-win32-arm64": "0.34.5", "@img/sharp-win32-ia32": "0.34.5", "@img/sharp-win32-x64": "0.34.5" } }, "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg=="],
"shebang-command": ["shebang-command@2.0.0", "", { "dependencies": { "shebang-regex": "^3.0.0" } }, "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA=="], "shebang-command": ["shebang-command@2.0.0", "", { "dependencies": { "shebang-regex": "^3.0.0" } }, "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA=="],
"shebang-regex": ["shebang-regex@3.0.0", "", {}, "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="], "shebang-regex": ["shebang-regex@3.0.0", "", {}, "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="],

1
package.json
View file

@ -37,6 +37,7 @@
"node-stream-zip": "^1.15.0", "node-stream-zip": "^1.15.0",
"open": "^11.0.0", "open": "^11.0.0",
"pathe": "^2.0.3", "pathe": "^2.0.3",
"sharp": "^0.34.5",
"systeminformation": "^5.31.1", "systeminformation": "^5.31.1",
"tough-cookie": "^6.0.0", "tough-cookie": "^6.0.0",
"tough-cookie-file-store": "^3.3.0", "tough-cookie-file-store": "^3.3.0",

7
scripts/dev.ts
View file

@ -9,8 +9,11 @@ function spawnServer ()
return Bun.spawn(["bun", "run", "--inspect=127.0.0.1:9229/fixed-session", '--watch', "./src/bun/index.ts"], { return Bun.spawn(["bun", "run", "--inspect=127.0.0.1:9229/fixed-session", '--watch', "./src/bun/index.ts"], {
env: { env: {
...Bun.env, ...Bun.env,
HEADLESS: "true" HEADLESS: "true",
}, },
stdout: "inherit",
stderr: "inherit",
stdin: "inherit",
ipc (message, subprocess, handle) ipc (message, subprocess, handle)
{ {
if (message.type === 'exitapp') if (message.type === 'exitapp')
@ -25,7 +28,7 @@ function spawnBrowser ()
{ {
try try
{ {
return browser(events, false); return browser(events, !!Bun.env.FORCE_BROWSER);
} catch (error) } catch (error)
{ {
console.error(error); console.error(error);

110
src/bun/api/games/games.ts
View file

@ -1,11 +1,11 @@
import Elysia, { status } from "elysia"; import Elysia, { status } from "elysia";
import { activeGame, config, db, events, setActiveGame, taskQueue } from "../app"; import { config, db, taskQueue } from "../app";
import { and, eq, getTableColumns } from "drizzle-orm"; import { and, eq, getTableColumns, sql } from "drizzle-orm";
import z from "zod"; import z from "zod";
import * as schema from "../schema/app"; import * as schema from "../schema/app";
import fs from "node:fs/promises"; import fs from "node:fs/promises";
import { FrontEndGameType, FrontEndGameTypeDetailed, GameListFilterSchema } from "@shared/constants"; import { FrontEndGameType, FrontEndGameTypeDetailed, GameListFilterSchema } from "@shared/constants";
import { getRomApiRomsIdGet, getRomsApiRomsGet, updateRomUserApiRomsIdPropsPut } from "@clients/romm"; import { getRomApiRomsIdGet, getRomsApiRomsGet } from "@clients/romm";
import { InstallJob } from "../jobs/install-job"; import { InstallJob } from "../jobs/install-job";
import path from "node:path"; import path from "node:path";
import { calculateSize, checkInstalled, convertRomToFrontend, convertRomToFrontendDetailed, getLocalGameMatch } from "./services/utils"; import { calculateSize, checkInstalled, convertRomToFrontend, convertRomToFrontendDetailed, getLocalGameMatch } from "./services/utils";
@ -13,9 +13,10 @@ import buildStatusResponse, { getValidLaunchCommandsForGame } from "./services/s
import { errorToResponse } from "elysia/adapter/bun/handler"; import { errorToResponse } from "elysia/adapter/bun/handler";
import { launchCommand } from "./services/launchGameService"; import { launchCommand } from "./services/launchGameService";
import { getErrorMessage } from "@/bun/utils"; import { getErrorMessage } from "@/bun/utils";
import sharp from 'sharp';
export default new Elysia() export default new Elysia()
.get('/game/local/:id/cover', async ({ params: { id }, set }) => .get('/game/local/:id/cover', async ({ params: { id }, query: { blur, width, height }, set }) =>
{ {
const coverBlob = await db.query.games.findFirst({ columns: { cover: true, cover_type: true }, where: eq(schema.games.id, id) }); const coverBlob = await db.query.games.findFirst({ columns: { cover: true, cover_type: true }, where: eq(schema.games.id, id) });
if (!coverBlob || !coverBlob.cover) if (!coverBlob || !coverBlob.cover)
@ -26,9 +27,23 @@ export default new Elysia()
{ {
set.headers["content-type"] = coverBlob.cover_type; set.headers["content-type"] = coverBlob.cover_type;
} }
return status(200, coverBlob.cover);
}, { response: { 200: z.instanceof(Buffer<ArrayBufferLike>), 404: z.any() }, params: z.object({ id: z.coerce.number() }) }) return sharp(coverBlob.cover).resize({ width, height, withoutEnlargement: true }).blur(blur);
.get('/screenshot/:id', async ({ params: { id }, set }) => }, {
params: z.object({ id: z.coerce.number() }),
query: z.object({ blur: z.coerce.number().optional(), width: z.coerce.number().optional(), height: z.coerce.number().optional() })
})
.get('/image/:source/*', async ({ params: { source, "*": path }, query: { blur, width, height } }) =>
{
if (source === 'romm')
{
const rommAdress = config.get('rommAddress');
const rommFetch = await fetch(`${rommAdress}/${path}`);
return sharp(await rommFetch.arrayBuffer()).resize({ width, height, withoutEnlargement: true }).sharpen().blur(blur);
}
return status('Not Found');
}, { query: z.object({ blur: z.coerce.number().optional(), width: z.coerce.number().optional(), height: z.coerce.number().optional() }) })
.get('/screenshot/:id', async ({ params: { id }, query: { blur, width, height }, set }) =>
{ {
const screenshot = await db.query.screenshots.findFirst({ where: eq(schema.screenshots.id, id), columns: { content: true, type: true } }); const screenshot = await db.query.screenshots.findFirst({ where: eq(schema.screenshots.id, id), columns: { content: true, type: true } });
if (screenshot) if (screenshot)
@ -37,12 +52,15 @@ export default new Elysia()
{ {
set.headers["content-type"] = screenshot.type; set.headers["content-type"] = screenshot.type;
} }
return screenshot.content; return sharp(screenshot.content).resize({ width, height, withoutEnlargement: true }).blur(blur);
} }
return status(404); return status(404);
}, { params: z.object({ id: z.coerce.number() }) }) }, {
params: z.object({ id: z.coerce.number() }),
query: z.object({ blur: z.coerce.number().optional(), width: z.coerce.number().optional(), height: z.coerce.number().optional() })
})
.get("/game/local/:id/installed", async ({ params: { id } }) => .get("/game/local/:id/installed", async ({ params: { id } }) =>
{ {
const data = await db.query.games.findFirst({ where: eq(schema.games.id, id) }); const data = await db.query.games.findFirst({ where: eq(schema.games.id, id) });
@ -69,32 +87,34 @@ export default new Elysia()
if (!collection_id) if (!collection_id)
{ {
const localGames = await db.select({ const localGames = await db.select({
platform_display_name: schema.platforms.name, ...getTableColumns(schema.games),
id: schema.games.id, platform: schema.platforms,
last_played: schema.games.last_played, screenshotIds: sql<number[]>`coalesce(json_group_array(${schema.screenshots.id}),json('[]'))`.mapWith(d => JSON.parse(d) as number[]),
created_at: schema.games.created_at, })
platform_id: schema.games.platform_id, .from(schema.games)
slug: schema.games.slug, .leftJoin(schema.platforms, eq(schema.platforms.id, schema.games.platform_id))
name: schema.games.name, .leftJoin(schema.screenshots, eq(schema.screenshots.game_id, schema.games.id))
path_fs: schema.games.path_fs, .groupBy(schema.games.id)
source_id: schema.games.source_id,
source: schema.games.source
}).from(schema.games)
.leftJoin(schema.platforms, eq(schema.games.platform_id, schema.platforms.id))
.where(and(...where)); .where(and(...where));
localGamesSet = new Set(localGames.filter(g => !!g.source_id).map(g => g.source_id!)); localGamesSet = new Set(localGames.filter(g => !!g.source_id).map(g => g.source_id!));
games.push(...localGames.map(g => games.push(...localGames.map(g =>
{ {
const game: FrontEndGameType = { const game: FrontEndGameType = {
...g, platform_display_name: g.platform?.name ?? "Local",
platform_display_name: g.platform_display_name ?? "Local",
id: { id: g.id, source: 'local' }, id: { id: g.id, source: 'local' },
updated_at: g.created_at, updated_at: g.created_at,
path_cover: `/api/romm/game/local/${g.id}/cover`, path_cover: `/api/romm/game/local/${g.id}/cover`,
source_id: g.source_id, source_id: g.source_id,
source: g.source, source: g.source,
path_platform_cover: `/api/romm/platform/local/${g.platform_id}/cover` path_platform_cover: `/api/romm/platform/local/${g.platform_id}/cover`,
paths_screenshots: g.screenshotIds?.map(s => `/api/romm/screenshot/${s}`) ?? [],
path_fs: g.path_fs,
last_played: g.last_played,
slug: g.slug,
name: g.name,
platform_id: g.platform_id
}; };
return game; return game;
})); }));
@ -118,25 +138,35 @@ export default new Elysia()
{ {
async function getLocalGameDetailed (match: any) async function getLocalGameDetailed (match: any)
{ {
const localGames = await db.select({ const localGame = await db.query.games.findFirst({
platform_display_name: schema.platforms.name, where: match,
...getTableColumns(schema.games) with: {
}).from(schema.games).where(match).leftJoin(schema.platforms, eq(schema.games.platform_id, schema.platforms.id)); screenshots: { columns: { id: true } },
if (localGames.length > 0) platform: { columns: { name: true } }
}
});
if (localGame)
{ {
const screenshots = await db.query.screenshots.findMany({ where: eq(schema.screenshots.game_id, localGames[0].id), columns: { id: true } }); const exists = await checkInstalled(localGame.path_fs);
const exists = await checkInstalled(localGames[0].path_fs); const fileSize = await calculateSize(localGame.path_fs);
const fileSize = await calculateSize(localGames[0].path_fs);
const game: FrontEndGameTypeDetailed = { const game: FrontEndGameTypeDetailed = {
...localGames[0], path_cover: `/api/romm/game/local/${localGame.id}/cover`,
path_cover: `/api/romm/game/local/${localGames[0].id}/cover`, updated_at: localGame.created_at,
updated_at: localGames[0].created_at, id: { id: localGame.id, source: 'local' },
id: { id: localGames[0].id, source: 'local' }, path_platform_cover: `/api/romm/platform/local/${localGame.platform_id}/cover`,
path_platform_cover: `/api/romm/platform/local/${localGames[0].platform_id}/cover`,
fs_size_bytes: fileSize ?? null, fs_size_bytes: fileSize ?? null,
paths_screenshots: screenshots.map(s => `/api/romm/screenshot/${s.id}`), paths_screenshots: localGame.screenshots.map(s => `/api/romm/screenshot/${s.id}`),
local: true, local: true,
missing: !exists missing: !exists,
platform_display_name: localGame.platform.name,
summary: localGame.summary,
source: localGame.source,
source_id: localGame.source_id,
path_fs: localGame.path_fs,
last_played: localGame.last_played,
slug: localGame.slug,
name: localGame.name,
platform_id: localGame.platform_id
}; };
return game; return game;
} }
@ -146,14 +176,12 @@ export default new Elysia()
if (source === 'local') if (source === 'local')
{ {
const localGame = await getLocalGameDetailed(eq(schema.games.id, id)); const localGame = await getLocalGameDetailed(eq(schema.games.id, id));
if (localGame) return localGame; if (localGame) return localGame;
return status('Not Found'); return status('Not Found');
} }
else else
{ {
const localGame = await getLocalGameDetailed(getLocalGameMatch(id, source)); const localGame = await getLocalGameDetailed(getLocalGameMatch(id, source));
if (localGame) return localGame; if (localGame) return localGame;

2
src/bun/api/games/platforms.ts
View file

@ -28,7 +28,7 @@ export default new Elysia()
slug: p.slug, slug: p.slug,
name: p.display_name, name: p.display_name,
family_name: p.family_name, family_name: p.family_name,
path_cover: `/api/romm/assets/platforms/${p.slug}.svg`, path_cover: `/api/romm/image/romm/assets/platforms/${p.slug}.svg`,
game_count: p.rom_count, game_count: p.rom_count,
updated_at: new Date(p.updated_at), updated_at: new Date(p.updated_at),
id: { source: 'romm', id: p.id }, id: { source: 'romm', id: p.id },

8
src/bun/api/games/services/utils.ts
View file

@ -28,7 +28,7 @@ export function convertRomToFrontend (rom: SimpleRomSchema): FrontEndGameType
{ {
const game: FrontEndGameType = { const game: FrontEndGameType = {
id: { id: rom.id, source: 'romm' }, id: { id: rom.id, source: 'romm' },
path_cover: `/api/romm${rom.path_cover_large}`, path_cover: `/api/romm/image/romm${rom.path_cover_large}`,
last_played: rom.rom_user.last_played ? new Date(rom.rom_user.last_played) : null, last_played: rom.rom_user.last_played ? new Date(rom.rom_user.last_played) : null,
updated_at: new Date(rom.updated_at), updated_at: new Date(rom.updated_at),
slug: rom.slug, slug: rom.slug,
@ -36,9 +36,10 @@ export function convertRomToFrontend (rom: SimpleRomSchema): FrontEndGameType
platform_display_name: rom.platform_display_name, platform_display_name: rom.platform_display_name,
name: rom.name, name: rom.name,
path_fs: null, path_fs: null,
path_platform_cover: `/api/romm/assets/platforms/${rom.platform_slug}.svg`, path_platform_cover: `/api/romm/image/romm/assets/platforms/${rom.platform_slug}.svg`,
source: null, source: null,
source_id: null source_id: null,
paths_screenshots: rom.merged_screenshots.map(s => `/api/romm/image/romm/${s}`),
}; };
return game; return game;
@ -50,7 +51,6 @@ export function convertRomToFrontendDetailed (rom: DetailedRomSchema)
...convertRomToFrontend(rom), ...convertRomToFrontend(rom),
summary: rom.summary, summary: rom.summary,
fs_size_bytes: rom.fs_size_bytes, fs_size_bytes: rom.fs_size_bytes,
paths_screenshots: rom.merged_screenshots.map(s => `/api/romm${s}`),
local: false, local: false,
missing: rom.missing_from_fs missing: rom.missing_from_fs
}; };

19
src/bun/api/schema/app.ts
View file

@ -1,4 +1,4 @@
import { sql } from "drizzle-orm"; import { sql, relations } from "drizzle-orm";
import { integer, text, sqliteTable, blob } from "drizzle-orm/sqlite-core"; import { integer, text, sqliteTable, blob } from "drizzle-orm/sqlite-core";
export const games = sqliteTable('games', { export const games = sqliteTable('games', {
@ -19,6 +19,14 @@ export const games = sqliteTable('games', {
summary: text("summary") summary: text("summary")
}); });
export const gamesRelations = relations(games, ({ many, one }) => ({
screenshots: many(screenshots),
platform: one(platforms, {
fields: [games.id],
references: [platforms.id]
})
}));
export const platforms = sqliteTable('platforms', { export const platforms = sqliteTable('platforms', {
id: integer("id").primaryKey({ autoIncrement: true }), id: integer("id").primaryKey({ autoIncrement: true }),
igdb_id: integer("igdb_id").unique(), igdb_id: integer("igdb_id").unique(),
@ -35,6 +43,8 @@ export const platforms = sqliteTable('platforms', {
family_name: text("family_name") family_name: text("family_name")
}); });
export const platformsRelations = relations(platforms, ({ many }) => ({ games: many(games) }));
export const collections_games = sqliteTable('collections_games', { export const collections_games = sqliteTable('collections_games', {
collection_id: integer('collection_id').notNull().references(() => collections.id, { onDelete: 'cascade', onUpdate: 'cascade' }), collection_id: integer('collection_id').notNull().references(() => collections.id, { onDelete: 'cascade', onUpdate: 'cascade' }),
game_id: integer('game_id').notNull().references(() => games.id, { onDelete: 'cascade', onUpdate: 'cascade' }), game_id: integer('game_id').notNull().references(() => games.id, { onDelete: 'cascade', onUpdate: 'cascade' }),
@ -52,3 +62,10 @@ export const screenshots = sqliteTable('screenshots', {
content: blob('content', { mode: 'buffer' }).notNull(), content: blob('content', { mode: 'buffer' }).notNull(),
type: text('type') type: text('type')
}); });
export const screenshotsRelations = relations(screenshots, ({ one }) => ({
game: one(games, {
fields: [screenshots.game_id],
references: [games.id]
})
}));

2
src/bun/utils/browser-params.ts
View file

@ -10,7 +10,7 @@ import { host } from "./host";
export async function BuildParams (data: { configPath: string; }) export async function BuildParams (data: { configPath: string; })
{ {
const validBrowser = await getBrowserPath({ const validBrowser = await getBrowserPath({
browserOrder: ['chrome', 'chromium'] browserOrder: Bun.env.BROWSER_PRIORITY ? Bun.env.BROWSER_PRIORITY.split(',') as any : ['chrome', 'chromium']
}); });
if (!validBrowser) if (!validBrowser)

58
src/mainview/components/AnimatedBackground.tsx
View file

@ -1,5 +1,6 @@
import classNames from 'classnames'; import classNames from 'classnames';
import React, { createContext, JSX, Ref, useContext, useEffect, useState } from 'react'; import { createContext, JSX, Ref, useContext, useEffect, useState } from 'react';
import { twMerge } from 'tailwind-merge'; import { twMerge } from 'tailwind-merge';
import { useSessionStorage } from 'usehooks-ts'; import { useSessionStorage } from 'usehooks-ts';
@ -8,47 +9,48 @@ export const AnimatedBackgroundContext = createContext({} as { setBackground: (u
export function AnimatedBackground (data: { export function AnimatedBackground (data: {
children?: any; children?: any;
backgroundKey?: string; backgroundKey?: string;
backgroundUrl?: string; backgroundUrl?: string | URL;
ref?: Ref<HTMLDivElement>; ref?: Ref<HTMLDivElement>;
className?: string; className?: string;
animated?: boolean, animated?: boolean,
scrolling?: boolean;
}) })
{ {
const blurBackground = true;
const animateBackground = true; const animateBackground = true;
const [lastBackgroundUrl, setLastBackgroundUrl] = data.backgroundKey ? useSessionStorage<string | undefined>(
`${data.backgroundKey!}-last`,
data.backgroundUrl,
) : useState<string | undefined>();
const [backgroundUrl, setBackgroundUrl] = data.backgroundKey ? useSessionStorage<string | undefined>( const [backgroundUrl, setBackgroundUrl] = data.backgroundKey ? useSessionStorage<string | undefined>(
data.backgroundKey!, data.backgroundKey!,
data.backgroundUrl, data.backgroundUrl ? (data.backgroundUrl instanceof URL ? data.backgroundUrl.href : data.backgroundUrl) : undefined,
) : useState<string | undefined>(); ) : useState<string | undefined>();
useEffect(() => useEffect(() =>
{ {
setBackgroundUrl(data.backgroundUrl); setBackgroundUrl(data.backgroundUrl ? (data.backgroundUrl instanceof URL ? data.backgroundUrl.href : data.backgroundUrl) : undefined);
}, [data.backgroundUrl]); }, [data.backgroundUrl]);
const finalBackgroundUrl = backgroundUrl ? new URL(backgroundUrl) : undefined;
const blur = localStorage.getItem('background-blur') !== "false";
if (blur)
{
if (!finalBackgroundUrl?.searchParams.has('blur'))
{
finalBackgroundUrl?.searchParams.set('blur', String(24));
}
finalBackgroundUrl?.searchParams.set('height', String(320));
}
function handleSetBackground (url: string) function handleSetBackground (url: string)
{ {
setLastBackgroundUrl(backgroundUrl);
setBackgroundUrl(url); setBackgroundUrl(url);
} }
const bgColor = "bg-base-content"; const bgColor = "bg-base-content";
let backgroundStyle = (url: string) => `linear-gradient(
color-mix(in srgb, var(--color-base-300) 60%, transparent),
color-mix(in srgb, var(--color-base-100) 80%, transparent)
), url('${url}') center / cover`;
let backgroundElements: JSX.Element | undefined = undefined; let backgroundElements: JSX.Element | undefined = undefined;
if (true) if (true)
{ {
backgroundElements = <div id="container" className='md:visible sm:invisible'> backgroundElements = <div id="container" className='sm:invisible md:visible'>
<div id="container-inside"> <div id="container-inside">
<div className={bgColor} id="circle-small"></div> <div className={bgColor} id="circle-small"></div>
<div className={bgColor} id="circle-medium"></div> <div className={bgColor} id="circle-medium"></div>
@ -62,11 +64,25 @@ export function AnimatedBackground (data: {
return ( return (
<AnimatedBackgroundContext value={{ setBackground: handleSetBackground }}> <AnimatedBackgroundContext value={{ setBackground: handleSetBackground }}>
<div ref={data.ref} <div ref={data.ref}
className={twMerge("w-full h-full flex flex-col overflow-hidden", data.className)} className={twMerge("w-full h-full flex flex-col", data.scrolling ? "overflow-y-scroll animate-bg-zoom-scroll" : "overflow-hidden", data.className)}
style={data.scrolling ? {
backgroundImage: `url('${finalBackgroundUrl?.href}')`,
backgroundAttachment: 'local',
backgroundSize: '100%',
backgroundPositionY: 'bottom',
backgroundPositionX: 'center',
backgroundColor: "var(--color-base-300)",
} : {}}
> >
{!!lastBackgroundUrl && <div className='absolute w-full h-full' style={{ background: backgroundStyle(lastBackgroundUrl), zIndex: -4 }}></div>} {!data.scrolling && <div className='absolute top-0 left-0 overflow-hidden w-full h-full'>
{!!backgroundUrl && <div key={backgroundUrl} className='absolute w-full h-full animate__animated animate__fadeIn' style={{ background: backgroundStyle(backgroundUrl), zIndex: -3 }}></div>} {<img
{blurBackground && <div className={"absolute w-full h-full backdrop-blur-3xl md:visible sm:invisible"} style={{ zIndex: -2 }}></div>} key={finalBackgroundUrl?.href}
className={classNames('absolute w-full h-full object-cover object-center opacity-0 -z-3')}
src={finalBackgroundUrl?.href}
onLoad={e => e.currentTarget.classList.add(blur ? "animate-bg-zoom-big" : "animate-bg-zoom")}
></img>}
<div className='absolute w-full h-full bg-linear-to-b from-base-100/60 to-base-300/80 -z-2' />
</div>}
{data.animated && animateBackground && <div className="absolute overflow-hidden w-full h-full" style={{ zIndex: -1 }}> {data.animated && animateBackground && <div className="absolute overflow-hidden w-full h-full" style={{ zIndex: -1 }}>
{backgroundElements} {backgroundElements}
</div>} </div>}

5
src/mainview/components/CardList.tsx
View file

@ -74,8 +74,9 @@ export function CardList (data: {
id={`card-list-${data.id}`} id={`card-list-${data.id}`}
ref={ref} ref={ref}
save-child-focus="session" save-child-focus="session"
className={twMerge("my-6 items-center justify-center-safe h-(--game-card-height) ", className={twMerge("items-center justify-center-safe landscape:h-(--game-card-height) ",
data.grid ? "card-grid h-fit gap-5" : 'card-list md:gap-6 sm:gap-2', data.grid ? "grid h-fit sm:gap-2 md:gap-5 auto-rows-(--game-card-height) grid-cols-[repeat(auto-fill,var(--game-card-width))]" :
'landscape:flex sm:gap-2 md:gap-6 portrait:grid portrait:auto-rows-(--game-card-height) portrait:grid-cols-[repeat(auto-fill,var(--game-card-width))]',
data.className data.className
)} )}
onKeyDown={(e) => onKeyDown={(e) =>

2
src/mainview/components/CollectionList.tsx
View file

@ -46,7 +46,7 @@ export default function CollectionList (data: {
onGameFocus={(id, node, details) => onGameFocus={(id, node, details) =>
{ {
data.setBackground( data.setBackground(
`https://picsum.photos/id/${10 + (id ?? 0)}/1920/1080.webp`, `https://picsum.photos/id/${10 + (id ?? 0)}/100/100.webp?blur=10`,
); );
data.onFocus?.(id, node, details); data.onFocus?.(id, node, details);
}} }}

4
src/mainview/components/CollectionsDetail.tsx
View file

@ -57,8 +57,8 @@ export function CollectionsDetail (data: CollectionsDetailParams)
<div className="px-3 w-full pt-2"> <div className="px-3 w-full pt-2">
<HeaderUI title={data.headerTitle} buttons={[{ id: "search", icon: <Search /> }, { id: "filter", icon: <Settings2 /> }]} /> <HeaderUI title={data.headerTitle} buttons={[{ id: "search", icon: <Search /> }, { id: "filter", icon: <Settings2 /> }]} />
</div> </div>
<div className="w-full grow mt-4 rounded-2xl px-2 overflow-y-scroll justify-center mask-alpha mask-t-from-transparent mask-t-to-20 mask-t-to-black"> <div className="w-full grow mt-4 rounded-2xl px-2 overflow-y-scroll justify-center mask-alpha sm:portrait:mask-t-from-transparent md:landscape:mask-t-from-transparent mask-t-to-20 mask-t-to-black">
<div className="h-fit w-full px-6 pt-4 pb-32"> <div className="h-fit w-full md:px-6 pt-4 pb-32">
{data.title} {data.title}
<Suspense> <Suspense>
<GameList <GameList

8
src/mainview/components/ContextDialog.tsx
View file

@ -49,9 +49,9 @@ export function OptionElement (data: DialogEntry & { onFocus?: () => void; class
return <li ref={ref} return <li ref={ref}
onClick={handleAction} onClick={handleAction}
className={ className={
twMerge("flex cursor-pointer")}> twMerge("flex cursor-pointer sm:text-sm md:text-base")}>
<FocusContext value={focusKey}> <FocusContext value={focusKey}>
<div className={twMerge("flex w-full h-14 items-center px-4 rounded-2xl transition-all gap-2", <div className={twMerge("flex w-full sm:h-12 md:h-14 items-center px-4 rounded-2xl transition-all gap-2",
colors[data.type], colors[data.type],
classNames({ "font-semibold": focused || hasFocusedChild }), classNames({ "font-semibold": focused || hasFocusedChild }),
data.className)}> data.className)}>
@ -115,11 +115,11 @@ export function ContextDialog (data: {
<ContextDialogContext value={{ id: data.id, close: data.close }} > <ContextDialogContext value={{ id: data.id, close: data.close }} >
<div <div
className={twMerge( className={twMerge(
"bg-base-100/80 delay-200 rounded-4xl p-6 min-w-[30vw] cursor-auto", "bg-base-100/80 delay-200 rounded-4xl sm:p-4 md:p-6 sm:min-w-[80vw] md:min-w-[30vw] cursor-auto",
data.open ? "animate-scale-delayed" : "opacity-0", data.open ? "animate-scale-delayed" : "opacity-0",
data.className) data.className)
} }
style={{ backdropFilter: 'blur(24px)' }} style={{ backdropFilter: 'md:blur(24px)' }}
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
{data.children} {data.children}

16
src/mainview/components/FilePicker.tsx
View file

@ -45,7 +45,7 @@ function List (data: {
action: handleReturn, action: handleReturn,
id: `${data.id}...`, id: `${data.id}...`,
type: 'primary', type: 'primary',
content: <div className="flex justify-between w-full items-center">...<SvgIcon className="md:size-8 sm:size-6" icon={'steamdeck_button_l1_outline'} /> </div>, content: <div className="flex justify-between w-full items-center">...<SvgIcon className="sm:size-6 md:size-8" icon={'steamdeck_button_l1_outline'} /> </div>,
icon: <FolderOutput />, icon: <FolderOutput />,
shortcuts: [{ label: "Up", action: handleReturn, button: GamePadButtonCode.A }] shortcuts: [{ label: "Up", action: handleReturn, button: GamePadButtonCode.A }]
}, },
@ -149,10 +149,10 @@ function OptionButtons (data: {
}) })
{ {
const { ref, focusKey } = useFocusable({ focusKey: `options-${data.id}`, onEnterPress: data.onSelect }); const { ref, focusKey } = useFocusable({ focusKey: `options-${data.id}`, onEnterPress: data.onSelect });
return <div ref={ref} className="flex h-12 w-full justify-end gap-2"> return <div ref={ref} className="flex md:inline h-12 w-full justify-end gap-2">
<FocusContext value={focusKey}> <FocusContext value={focusKey}>
{data.showConfirm && <Button className="p-6 ring-accent-content" onAction={data.onSelect} id={`${data.id}-select`} focusClassName="ring-7" type="button" ><Check />Select</Button>} {data.showConfirm && <Button className="p-6 ring-accent-content" onAction={data.onSelect} id={`${data.id}-select`} focusClassName="ring-7" type="button" ><Check />Select</Button>}
<Button className="p-6 ring-warning-content" onAction={data.onCancel} id={`${data.id}-cancel`} type="button" focusClassName="ring-7 btn-warning" ><X />Cancel</Button> <Button className="md:p-6 ring-warning-content" onAction={data.onCancel} id={`${data.id}-cancel`} type="button" focusClassName="ring-7 btn-warning" ><X />Cancel</Button>
</FocusContext> </FocusContext>
</div>; </div>;
} }
@ -161,7 +161,7 @@ function DriveElement (data: { id: string, isActive: boolean, label: string; onS
{ {
const { ref, focused } = useFocusable({ focusKey: data.id, onEnterPress: data.onSelect }); const { ref, focused } = useFocusable({ focusKey: data.id, onEnterPress: data.onSelect });
return <li ref={ref} onClick={data.onSelect} className={twMerge( return <li ref={ref} onClick={data.onSelect} className={twMerge(
"flex bg-base-200 text-base-content rounded-full gap-2 items-center p-2 px-4 overflow-hidden max-w-xs cursor-pointer text-nowrap hover:bg-primary/40", "flex bg-base-200 text-base-content rounded-full gap-2 sm:min-h-10 items-center p-2 min-w-fit px-4 overflow-hidden max-w-xs cursor-pointer text-nowrap hover:bg-primary/40",
classNames({ classNames({
"bg-primary text-primary-content": data.isActive, "bg-primary text-primary-content": data.isActive,
"ring-7 ring-base-content": focused "ring-7 ring-base-content": focused
@ -185,7 +185,7 @@ function Drives (data: {
autoRestoreFocus: false autoRestoreFocus: false
}); });
return <ul className="flex flex-col gap-2" ref={ref} > return <ul className="flex not-portrait:flex-col sm:gap-1 md:gap-2 overflow-auto" ref={ref} >
<FocusContext value={focusKey}> <FocusContext value={focusKey}>
{drives?.filter(d => d.mountPoint) {drives?.filter(d => d.mountPoint)
.sort((a, b) => b.mountPoint!.length - a.mountPoint!.length) .sort((a, b) => b.mountPoint!.length - a.mountPoint!.length)
@ -208,7 +208,7 @@ function ListWithDrives (data: {
focusKey: `main-${data.id}`, focusKey: `main-${data.id}`,
preferredChildFocusKey: `list-${data.id}` preferredChildFocusKey: `list-${data.id}`
}); });
return <div ref={ref} className="flex grow min-h-0 gap-2"> return <div ref={ref} className="flex sm:portrait:flex-col grow min-h-0 gap-2">
<FocusContext value={focusKey}> <FocusContext value={focusKey}>
<div className="flex flex-col gap-1"> <div className="flex flex-col gap-1">
<Drives onSelect={p => setCurrentPath(p)} id={`drives-${data.id}`} /> <Drives onSelect={p => setCurrentPath(p)} id={`drives-${data.id}`} />
@ -264,7 +264,7 @@ export default function FilePicker (data: {
activeDrive activeDrive
}}> }}>
{!!fullPath && {!!fullPath &&
<div className="breadcrumbs flex items-center text-sm min-h-12 max-h-12 h-12 px-4 py-2 overflow-hidden bg-base-300 text-base-content rounded-full"> <div className="breadcrumbs flex items-center text-sm sm:min-h-10 sm:max-h-10 sm:h-10 md:min-h-12 md:max-h-12 md:h-12 px-4 py-2 overflow-hidden bg-base-300 text-base-content rounded-full">
<ul> <ul>
{fullPathElements.map((p, i) => <li> {fullPathElements.map((p, i) => <li>
<a onClick={() => <a onClick={() =>
@ -272,7 +272,7 @@ export default function FilePicker (data: {
}>{p}</a> }>{p}</a>
</li>)} </li>)}
</ul> </ul>
{(filesLoading || drivesLoading) && <span className="loading loading-spinner loading-lg"></span>} {(filesLoading || drivesLoading) && <span className="loading loading-spinner sm:loading-md md:loading-lg"></span>}
</div>} </div>}
<ListWithDrives <ListWithDrives

9
src/mainview/components/Filters.tsx
View file

@ -41,8 +41,8 @@ function FilterCat (
ref={ref} ref={ref}
onClick={focusSelf} onClick={focusSelf}
className={classNames( className={classNames(
"sm:text-sm sm:px-2",
"flex md:px-4 items-center justify-center rounded-full transition-all md:text-lg", "flex md:px-4 items-center justify-center rounded-full transition-all md:text-lg",
"sm:text-xs sm:px-2",
{ {
"bg-base-content px-3 text-base-300 drop-shadow cursor-default": "bg-base-content px-3 text-base-300 drop-shadow cursor-default":
focused || data.active, focused || data.active,
@ -74,13 +74,12 @@ export function FilterUI (data: {
return ( return (
<div <div
ref={ref} ref={ref}
className="flex items-center sm:justify-start md:justify-center sm:ml-[15%] md:ml-0 gap-2"
save-child-focus="session" save-child-focus="session"
> >
<FocusContext.Provider value={focusKey}> <FocusContext.Provider value={focusKey}>
<ul className="flex flex-row bg-base-100 rounded-full p-1 drop-shadow-sm md:h-14 sm:h-8"> <ul className="flex flex-row bg-base-100 rounded-full p-1 drop-shadow-sm sm:h-9 md:h-14">
<li className=" flex px-4 items-center justify-center rounded-full"> <li className=" flex px-4 items-center justify-center rounded-full">
<SvgIcon className="sm:size-4 md:size-8" icon="steamdeck_button_l1_outline" /> <SvgIcon className="sm:size-5 md:size-8" icon="steamdeck_button_l1_outline" />
</li> </li>
{Object.entries(data.options)?.map(([id, option]) => ( {Object.entries(data.options)?.map(([id, option]) => (
<FilterCat <FilterCat
@ -93,7 +92,7 @@ export function FilterUI (data: {
/> />
))} ))}
<li className="flex px-4 items-center justify-center rounded-full"> <li className="flex px-4 items-center justify-center rounded-full">
<SvgIcon className="sm:size-4 md:size-8" icon="steamdeck_button_r1_outline" /> <SvgIcon className="sm:size-5 md:size-8" icon="steamdeck_button_r1_outline" />
</li> </li>
</ul> </ul>
</FocusContext.Provider> </FocusContext.Provider>

12
src/mainview/components/GameCard.tsx
View file

@ -69,7 +69,7 @@ export default function GameCard (data: GameCardParams)
"overflow-hidden transition-all duration-200 drop-shadow-lg cursor-pointer", "overflow-hidden transition-all duration-200 drop-shadow-lg cursor-pointer",
classNames({ classNames({
"focused animate-wiggle ring-7 bg-base-content text-base-300 drop-shadow-xl drop-shadow-black/30 scale-102 z-10": focused && !isPointer, "focused animate-wiggle ring-7 bg-base-content text-base-300 drop-shadow-xl drop-shadow-black/30 scale-102 z-10": focused && !isPointer,
"group hover:focused hover:animate-wiggle hover:ring-7 hover:bg-base-content hover:text-base-300 hover:drop-shadow-xl hover:drop-shadow-black/30 hover:scale-102 hover:z-10": isPointer, "group hover:focused hover:animate-wiggle sm:hover:ring-4 md:hover:ring-7 hover:bg-base-content hover:text-base-300 hover:drop-shadow-xl hover:drop-shadow-black/30 hover:scale-102 hover:z-10": isPointer,
"h-(--game-card-height)": typeof data.preview === "string" "h-(--game-card-height)": typeof data.preview === "string"
}), }),
data.className data.className
@ -77,20 +77,20 @@ export default function GameCard (data: GameCardParams)
> >
<div className={twMerge( <div className={twMerge(
"overflow-hidden bg-base-400 h-full rounded-t-xl rounded-b-md transition-all", "overflow-hidden bg-base-400 h-full rounded-t-xl rounded-b-md transition-all",
focused ? "md:mt-2 md:mx-2" : "md:mt-2 md:mx-2",
focused ? "sm:mt-1 sm:mx-1" : "sm:mt-1 sm:mx-1", focused ? "sm:mt-1 sm:mx-1" : "sm:mt-1 sm:mx-1",
focused ? "md:mt-2 md:mx-2" : "md:mt-2 md:mx-2",
)}> )}>
{typeof data.preview === "string" ? ( {typeof data.preview === "string" ? (
<img className={classNames({ "animate-rotate-small": focused && !isPointer })} src={data.preview} ></img> <img className={classNames("object-cover w-full h-full", { "animate-rotate-small": focused && !isPointer })} src={data.preview} ></img>
) : ( ) : (
typeof data.preview === 'function' ? data.preview({ focused }) : data.preview typeof data.preview === 'function' ? data.preview({ focused }) : data.preview
)}</div> )}</div>
<div className="h-0 flex pr-2 justify-end items-center gap-2"> <div className="h-0 flex pr-2 justify-end items-center sm:gap-1 md:gap-2">
{data.badges?.map((b, i) => {data.badges?.map((b, i) =>
<div key={i} <div key={i}
className={ className={
twMerge("bg-base-100 text-base-content drop-shadow-lg overflow-hidden rounded-full p-1 md:last:mr-4 transition-colors", twMerge("bg-base-100 text-base-content drop-shadow-lg overflow-hidden rounded-full p-1 sm:last:mr-1 md:last:mr-4 transition-colors",
classNames({ classNames({
"bg-primary text-primary-content": focused && !isPointer, "bg-primary text-primary-content": focused && !isPointer,
"group-hover:bg-primary group-hover:text-primary-content": isPointer "group-hover:bg-primary group-hover:text-primary-content": isPointer
@ -100,7 +100,7 @@ export default function GameCard (data: GameCardParams)
</div>) </div>)
} }
</div> </div>
<div className="flex flex-col md:p-4 sm:p-2"> <div className="flex flex-col sm:p-2 md:p-4">
<div className="md:text-xl sm:text-sm font-bold text-nowrap text-ellipsis overflow-hidden"> <div className="md:text-xl sm:text-sm font-bold text-nowrap text-ellipsis overflow-hidden">
{data.title} {data.title}
</div> </div>

34
src/mainview/components/GameList.tsx
View file

@ -1,4 +1,4 @@
import { useSuspenseQuery } from "@tanstack/react-query"; import { useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
import { GameMetaExtra, CardList } from "./CardList"; import { GameMetaExtra, CardList } from "./CardList";
import { FrontEndId, GameListFilterType, RPC_URL } from "@shared/constants"; import { FrontEndId, GameListFilterType, RPC_URL } from "@shared/constants";
import { useNavigate } from "@tanstack/react-router"; import { useNavigate } from "@tanstack/react-router";
@ -7,6 +7,7 @@ import { rommApi } from "../scripts/clientApi";
import { HardDrive } from "lucide-react"; import { HardDrive } from "lucide-react";
import { JSX } from "react"; import { JSX } from "react";
import { GameCardFocusHandler } from "./GameCard"; import { GameCardFocusHandler } from "./GameCard";
import { gameQuery } from "../scripts/queries";
export interface GameListParams export interface GameListParams
{ {
@ -28,15 +29,25 @@ export function GameList (data: GameListParams)
}).then(d => d.data) }).then(d => d.data)
}); });
const navigator = useNavigate(); const navigator = useNavigate();
const queryClient = useQueryClient();
const handleFocus = (id: FrontEndId) => const handleFocus = (id: FrontEndId, source: string | null, sourceId: number | null) =>
{ {
const game = games.data?.games.find((g) => g.id === id); const game = games.data?.games.find((g) => g.id === id);
if (game) if (game)
{ {
data.setBackground?.( try
`${RPC_URL(__HOST__)}${game.path_cover}`, {
); const screenshotUrl = new URL(`${RPC_URL(__HOST__)}${game.paths_screenshots[new Date().getMinutes() % game.paths_screenshots.length]}`);
const coverUrl = new URL(`${RPC_URL(__HOST__)}${game.path_cover}`);
const previewUrl = localStorage.getItem('background-blur') !== "false" ? coverUrl : screenshotUrl;
previewUrl.searchParams.delete('ts');
data.setBackground?.(previewUrl.href);
queryClient.prefetchQuery(gameQuery(source ?? id.source, sourceId ?? id.id));
} catch
{
}
} }
}; };
@ -61,8 +72,13 @@ export function GameList (data: GameListParams)
const badges: JSX.Element[] = []; const badges: JSX.Element[] = [];
if (g.id.source === 'local') if (g.id.source === 'local')
{ {
badges.push(<HardDrive className="size-8 m-1" />); badges.push(<HardDrive className="sm:size-4 md:size-8 m-1" />);
} }
const previewUrl = new URL(`${RPC_URL(__HOST__)}${g.path_cover}`);
previewUrl.searchParams.delete('ts');
previewUrl.searchParams.set('width', "640");
const platformUrl = new URL(`${RPC_URL(__HOST__)}${g.path_platform_cover}`);
platformUrl.searchParams.set('width', "64");
return { return {
id: `game-${g.id.source}-${g.id.id}`, id: `game-${g.id.source}-${g.id.id}`,
@ -70,14 +86,14 @@ export function GameList (data: GameListParams)
title: g.name ?? "", title: g.name ?? "",
subtitle: ( subtitle: (
<div className="flex gap-1 items-center"> <div className="flex gap-1 items-center">
{!!g.path_platform_cover && <img className="sm:hidden md:inline size-4" src={`${RPC_URL(__HOST__)}${g.path_platform_cover}`} />} {!!g.path_platform_cover && <img className="sm:hidden md:inline size-4" src={platformUrl.href} />}
<p className="opacity-80">{g.platform_display_name}</p> <p className="opacity-80">{g.platform_display_name}</p>
</div> </div>
), ),
previewUrl: `${RPC_URL(__HOST__)}${g.path_cover}`, previewUrl: previewUrl.href,
badges: badges, badges: badges,
onSelect: () => data.onGameSelect ? data.onGameSelect(g.id) : handleDefaultSelect(g.id, g.source, g.source_id), onSelect: () => data.onGameSelect ? data.onGameSelect(g.id) : handleDefaultSelect(g.id, g.source, g.source_id),
onFocus: () => handleFocus(g.id) onFocus: () => handleFocus(g.id, g.source, g.source_id)
} satisfies GameMetaExtra; } satisfies GameMetaExtra;
}, },
) ?? []} ) ?? []}

59
src/mainview/components/Header.tsx
View file

@ -25,10 +25,9 @@ import { useQuery } from "@tanstack/react-query";
import { getCurrentUserApiUsersMeGetOptions, statsApiStatsGetOptions } from "../../clients/romm/@tanstack/react-query.gen"; import { getCurrentUserApiUsersMeGetOptions, statsApiStatsGetOptions } from "../../clients/romm/@tanstack/react-query.gen";
import { RPC_URL } from "../../shared/constants"; import { RPC_URL } from "../../shared/constants";
import { JSX, useEffect, useRef } from "react"; import { JSX, useEffect, useRef } from "react";
import { useNavigate } from "@tanstack/react-router";
import { SaveSource } from "../scripts/spatialNavigation"; import { SaveSource } from "../scripts/spatialNavigation";
import { systemApi } from "../scripts/clientApi"; import { systemApi } from "../scripts/clientApi";
import { twMerge } from "tailwind-merge"; import { Router } from "..";
function HeaderAvatar (data: { function HeaderAvatar (data: {
id: string; id: string;
@ -56,13 +55,13 @@ function HeaderAvatar (data: {
ref={ref} ref={ref}
onClick={data.onSelect} onClick={data.onSelect}
className={classNames( className={classNames(
`avatar indicator ring-base-100 ring-offset-base-100 size-14 rounded-full flex items-center justify-center`, `avatar indicator ring-base-100 ring-offset-base-100 sm:size-8 md:size-14 rounded-full flex items-center justify-center`,
bgColors[data.type ?? "none"], bgColors[data.type ?? "none"],
"text-base-content cursor-pointer transition-all drop-shadow-md", "text-base-content cursor-pointer transition-all drop-shadow-md",
"hover:ring-primary hover:ring-7", "hover:ring-primary hover:ring-7",
{ {
"ring-5 hover:ring-offset-5": data.active, "ring-5 hover:ring-offset-5": data.active,
"ring-7 ring-primary ring-offset-base-100": focused, "sm:ring-4 md:ring-7 ring-primary ring-offset-base-100": focused,
"ring-offset-5": focused && data.active, "ring-offset-5": focused && data.active,
}, },
data.className, data.className,
@ -85,7 +84,7 @@ function HeaderAvatar (data: {
) : ( ) : (
<User /> <User />
)} )}
<span className={classNames("indicator-item status left-1 top-1 ring-3 ring-base-100 z-1", data.status)}></span> <span className={classNames("indicator-item status md:left-1 top-1 sm:ring-2 md:ring-3 ring-base-100 z-1", data.status)}></span>
</div> </div>
); );
@ -113,7 +112,7 @@ function NotificationStatus ()
{ {
const hasUnread = false; const hasUnread = false;
return <div className={classNames("p-2 rounded-full", { "bg-warning text-warning-content": hasUnread })}> return <div className={classNames("p-2 rounded-full", { "bg-warning text-warning-content": hasUnread })}>
<Bell className="md:size-6 sm:size-4" /> <Bell className="sm:size-4 md:size-8" />
</div>; </div>;
} }
@ -150,7 +149,7 @@ function ClockStatus ()
return () => clearTimeout(timeout); return () => clearTimeout(timeout);
}, []); }, []);
return <div className="flex gap-3"><span ref={ref}></span><Clock /></div>; return <div className="flex gap-3 sm:text-xs md:text-2xl items-center"><span ref={ref}></span><Clock className="sm:size-4 md:size-8" /></div>;
} }
function BluetoothStatus () function BluetoothStatus ()
@ -227,10 +226,8 @@ function BatteryStatus ()
</div>; </div>;
} }
export function HeaderUI (data: { buttons?: HeaderButton[]; accounts?: HeaderAccount[], buttonElements?: JSX.Element[] | JSX.Element; title?: JSX.Element; }) export function HeaderAccounts (data: { accounts?: HeaderAccount[]; })
{ {
const { ref, focusKey } = useFocusable({ focusKey: "header-elements" });
const navigate = useNavigate();
const rommOnline = useQuery({ const rommOnline = useQuery({
...statsApiStatsGetOptions(), ...statsApiStatsGetOptions(),
refetchInterval: 30000, refetchInterval: 30000,
@ -250,7 +247,6 @@ export function HeaderUI (data: { buttons?: HeaderButton[]; accounts?: HeaderAcc
{ {
indicator = "status-success"; indicator = "status-success";
} }
const accounts: HeaderAccount[] = [{ const accounts: HeaderAccount[] = [{
id: 'romm', previewUrl: [ id: 'romm', previewUrl: [
`${RPC_URL(__HOST__)}/api/romm/assets/logos/romm_logo_xbox_one_square.svg`, `${RPC_URL(__HOST__)}/api/romm/assets/logos/romm_logo_xbox_one_square.svg`,
@ -258,21 +254,13 @@ export function HeaderUI (data: { buttons?: HeaderButton[]; accounts?: HeaderAcc
action: () => action: () =>
{ {
SaveSource('settings'); SaveSource('settings');
navigate({ to: '/settings/accounts', viewTransition: { types: ['zoom-in'] }, search: { focus: 'rommAddress' } }); Router.navigate({ to: '/settings/accounts', viewTransition: { types: ['zoom-in'] }, search: { focus: 'rommAddress' } });
}, },
status: user.data ? "status-success" : 'status-error', status: user.data ? "status-success" : 'status-error',
type: 'secondary' type: 'secondary'
}, ...data.accounts ?? []]; }, ...data.accounts ?? []];
return ( return <div className="flex items-center gap-2 drop-shadow-sm">
<FocusContext.Provider value={focusKey}>
<header
ref={ref}
className={twMerge("md:relative md:h-14 md:mt-2 flex items-center justify-between text-white",
"sm:absolute sm:top-0 sm:right-0 sm:left-0"
)}
>
<div className="flex items-center gap-2 drop-shadow-sm">
{accounts?.map(a => <HeaderAvatar {accounts?.map(a => <HeaderAvatar
key={`header-avatar-${a.id}`} key={`header-avatar-${a.id}`}
type={a.type} type={a.type}
@ -282,10 +270,13 @@ export function HeaderUI (data: { buttons?: HeaderButton[]; accounts?: HeaderAcc
imageSrc={a.previewUrl} imageSrc={a.previewUrl}
onSelect={a.action} onSelect={a.action}
/>)} />)}
{data.title} </div>;
</div> }
<div className="flex items-center md:gap-2 sm:gap-1 text drop-shadow-sm">
<div className="flex md:gap-5 sm:gap-2 items-center"> export function HeaderStatusBar (data: { buttons?: HeaderButton[]; buttonElements?: JSX.Element[] | JSX.Element; })
{
return <div className="flex items-center sm:gap-1 md:gap-2 text drop-shadow-sm">
<div className="flex sm:gap-2 md:gap-5 items-center">
<ClockStatus /> <ClockStatus />
<WiFiStatus /> <WiFiStatus />
<BluetoothStatus /> <BluetoothStatus />
@ -296,14 +287,28 @@ export function HeaderUI (data: { buttons?: HeaderButton[]; accounts?: HeaderAcc
<div className="flex gap-2"> <div className="flex gap-2">
{data.buttonElements ?? data.buttons?.map(b => <RoundButton {data.buttonElements ?? data.buttons?.map(b => <RoundButton
key={b.id} key={b.id}
className="header-icon md:size-16 sm:size-10" className="header-icon sm:size-10 md:size-16"
id={b.id} id={b.id}
icon={b.icon} icon={b.icon}
external={b.external} external={b.external}
action={b.action} action={b.action}
/>)} />)}
</div> </div>
</div> </div>;
}
export function HeaderUI (data: { buttons?: HeaderButton[]; accounts?: HeaderAccount[]; buttonElements?: JSX.Element[] | JSX.Element; title?: JSX.Element; })
{
const { ref, focusKey } = useFocusable({ focusKey: "header-elements" });
return (
<FocusContext.Provider value={focusKey}>
<header
ref={ref}
className={`flex items-center justify-between text-base-content`}
>
<HeaderAccounts accounts={data.accounts} />
{data.title}
<HeaderStatusBar buttonElements={data.buttonElements} buttons={data.buttons} />
</header> </header>
</FocusContext.Provider> </FocusContext.Provider>
); );

39
src/mainview/components/PlatformsList.tsx
View file

@ -5,11 +5,11 @@ import { CardList, GameMetaExtra } from "./CardList";
import classNames from "classnames"; import classNames from "classnames";
import { rommApi } from "../scripts/clientApi"; import { rommApi } from "../scripts/clientApi";
import { SaveSource } from "../scripts/spatialNavigation"; import { SaveSource } from "../scripts/spatialNavigation";
import { JSX } from "react"; import { JSX, useMemo } from "react";
import { HardDrive } from "lucide-react"; import { HardDrive } from "lucide-react";
import { GameCardFocusHandler } from "./GameCard"; import { GameCardFocusHandler } from "./GameCard";
export function PlatformsList (data: { id: string, setBackground: (url: string) => void; className?: string; onFocus?: GameCardFocusHandler; }) export function PlatformsList (data: { id: string, setBackground: (url: string) => void; className?: string; onFocus?: GameCardFocusHandler; grid?: boolean; })
{ {
const navigate = useNavigate(); const navigate = useNavigate();
const { data: platforms } = useSuspenseQuery( const { data: platforms } = useSuspenseQuery(
@ -25,19 +25,15 @@ export function PlatformsList (data: { id: string, setBackground: (url: string)
staleTime: DefaultRommStaleTime, staleTime: DefaultRommStaleTime,
}); });
return ( const platformsMapped = useMemo(() => platforms.sort((a, b) => a.updated_at.getTime() - b.updated_at.getTime())
<CardList .map((g, i) =>
type="platform"
id={data.id}
className={data.className}
onGameFocus={data.onFocus}
games={platforms.sort((a, b) => a.updated_at.getTime() - b.updated_at.getTime())
.map((g) =>
{ {
const badges: JSX.Element[] = []; const badges: JSX.Element[] = [];
badges.push(<span className="flex items-center justify-center size-6 m-1 text-2xl font-semibold font-boldrounded-full">{g.game_count}</span>); badges.push(<span className="flex items-center justify-center sm:size-3 md:size-6 m-1 md:text-2xl font-semibold font-boldrounded-full">{g.game_count}</span>);
if (g.hasLocal) if (g.hasLocal)
badges.push(<HardDrive className="size-8 m-1" />); badges.push(<HardDrive className="sm:size-4 md:size-8 m-1" />);
const coverUrl = new URL(`${RPC_URL(__HOST__)}${g.path_cover}`);
coverUrl.searchParams.set('width', "320");
const entry: GameMetaExtra = { const entry: GameMetaExtra = {
id: g.slug, id: g.slug,
focusKey: g.slug, focusKey: g.slug,
@ -46,7 +42,7 @@ export function PlatformsList (data: { id: string, setBackground: (url: string)
previewUrl: "", previewUrl: "",
badges, badges,
onFocus: () => data.setBackground( onFocus: () => data.setBackground(
`https://picsum.photos/id/${10 + g.slug.length}/1920/1080.webp`, `https://picsum.photos/id/${10 + i}/100/100.webp?blur=10`,
), ),
onSelect: () => onSelect: () =>
{ {
@ -55,25 +51,34 @@ export function PlatformsList (data: { id: string, setBackground: (url: string)
}, },
preview: preview:
({ focused }) => <div ({ focused }) => <div
className="flex h-60 p-6 bg-base-100 justify-center" className="flex p-6 bg-base-100 justify-center"
style={{ style={{
background: `linear-gradient( background: `linear-gradient(
color-mix(in srgb, var(--color-base-content) 60%, transparent), color-mix(in srgb, var(--color-base-content) 60%, transparent),
color-mix(in srgb, var(--color-base-300) 60%, transparent) color-mix(in srgb, var(--color-base-300) 60%, transparent)
), url(https://picsum.photos/id/${8 + g.slug.length}/300/300.webp?blur=10) center / cover`, ), url(https://picsum.photos/id/${10 + i}/100/100.webp?blur=10) center / cover`,
backgroundBlendMode: "screen", backgroundBlendMode: "screen",
boxShadow: 'inset 0 0 32px rgba(0,0,0,0.6)' boxShadow: 'inset 0 0 32px rgba(0,0,0,0.6)'
}} }}
> >
<img className={classNames("drop-shadow-2xl", { "animate-rotate": focused })} <img className={classNames("drop-shadow-2xl", { "animate-rotate": focused })}
src={`${RPC_URL(__HOST__)}${g.path_cover}`} src={coverUrl.href}
></img> ></img>
</div> </div>
, ,
}; };
return entry; return entry;
})} }), [platforms]);
return (
<CardList
type="platform"
id={data.id}
grid={data.grid}
className={data.className}
onGameFocus={data.onFocus}
games={platformsMapped}
onSelectGame={(id) => onSelectGame={(id) =>
{ {

6
src/mainview/components/ShortcutPrompt.tsx
View file

@ -15,17 +15,15 @@ export default function ShortcutPrompt (data: {
<div <div
onClick={data.onClick} onClick={data.onClick}
style={{ viewTransitionName: data.id }} style={{ viewTransitionName: data.id }}
className={twMerge( className={twMerge("xs:text-xs sm:p-1 sm:text-sm",
"flex md:gap-2 bg-base-100 text-base-content neutral-content md:pl-2 md:pr-3 md:py-1.5 rounded-full items-center md:text-lg drop-shadow-sm ring-[1px] ring-base-content/10 drop-shadow-black/30", "flex md:gap-2 bg-base-100 text-base-content neutral-content md:pl-2 md:pr-3 md:py-1.5 rounded-full items-center md:text-lg drop-shadow-sm ring-[1px] ring-base-content/10 drop-shadow-black/30",
"sm:text-sm sm:p-1",
"xs:text-xs sm:p-1",
data.className, data.className,
classNames({ classNames({
"hover:bg-base-300 cursor-pointer": !!data.onClick, "hover:bg-base-300 cursor-pointer": !!data.onClick,
}) })
)} )}
> >
{data.icon && <SvgIcon className="md:size-8 sm:size-6 xs:size-2" icon={data.icon} />} {data.icon && <SvgIcon className="size-6 portrait:size-6 md:size-8" icon={data.icon} />}
{data.label} {data.label}
</div> </div>
); );

2
src/mainview/components/Shortcuts.tsx
View file

@ -48,7 +48,7 @@ export default function Shortcuts (data: { shortcuts?: Shortcut[]; })
const { control } = useActiveControl(); const { control } = useActiveControl();
const showKeyboard = control === 'keyboard' || control === 'mouse'; const showKeyboard = control === 'keyboard' || control === 'mouse';
return ( return (
<div className="flex gap-2 z-1000"> <div className="flex gap-2 z-1000 h-10">
{data.shortcuts?.filter(s => !!s.label).map((s, i) => <ShortcutPrompt {data.shortcuts?.filter(s => !!s.label).map((s, i) => <ShortcutPrompt
key={s.button} key={s.button}
id={`shortcut-${s.button}`} id={`shortcut-${s.button}`}

4
src/mainview/components/options/OptionSpace.tsx
View file

@ -67,7 +67,7 @@ export function OptionSpace (data: {
<OptionContext value={{ focused, focus: focusSelf, eventTarget }}> <OptionContext value={{ focused, focus: focusSelf, eventTarget }}>
<li <li
ref={ref} ref={ref}
className={twMerge("flex sm:p-2 md:p-4 pl-8! rounded-full bg-base-content/1", classNames( className={twMerge("flex portrait:flex-col portrait:gap-2 portrait:p-4 md:flex-row sm:p-2 md:p-4 md:pl-8! portrait:rounded-3xl landscape:rounded-full bg-base-content/1", classNames(
{ {
"text-primary-content bg-primary ": focused || hasFocusedChild, "text-primary-content bg-primary ": focused || hasFocusedChild,
}), }),
@ -87,7 +87,9 @@ export function OptionSpace (data: {
data.label data.label
)} )}
</div> </div>
<div className="flex">
{data.children} {data.children}
</div>
</li> </li>
</OptionContext> </OptionContext>
</FocusContext> </FocusContext>

79
src/mainview/index.css
View file

@ -3,7 +3,8 @@
@plugin "daisyui"; @plugin "daisyui";
@theme { @theme {
--breakpoint-xs: 20rem; --breakpoint-sm: 0px;
--breakpoint-md: 1280px;
--animate-wiggle: wiggle 0.3s ease-in-out 1; --animate-wiggle: wiggle 0.3s ease-in-out 1;
--animate-rotate: rotate 0.3s ease-in-out 1 0.2s; --animate-rotate: rotate 0.3s ease-in-out 1 0.2s;
@ -13,6 +14,33 @@
--animate-scale-delayed: scale 0.3s ease-in-out 1 100ms; --animate-scale-delayed: scale 0.3s ease-in-out 1 100ms;
--animate-scale-small: scale-small 0.3s ease-in-out 1; --animate-scale-small: scale-small 0.3s ease-in-out 1;
--animate-fade-out: fade-out 0.3s ease-out 1; --animate-fade-out: fade-out 0.3s ease-out 1;
--animate-bg-zoom: zoom-in-scale 0.6s ease-out 1 forwards;
--animate-bg-zoom-big: zoom-in-scale-big 0.6s ease-out 1 forwards;
--animate-bg-zoom-scroll: zoom-in-bg 0.6s ease-out 1 forwards;
@keyframes zoom-in-scale-big {
0% {
scale: 150%;
opacity: 0;
}
100% {
scale: 100%;
opacity: 1;
}
}
@keyframes zoom-in-scale {
0% {
scale: 105%;
opacity: 0;
}
100% {
scale: 100%;
opacity: 1;
}
}
@keyframes slide-up { @keyframes slide-up {
0% { 0% {
@ -109,16 +137,44 @@
@layer base { @layer base {
@variant sm { @variant sm {
:root { :root {
--game-card-height: calc(var(--spacing) * 55); --game-card-height: calc(var(--spacing) * 52);
--game-card-width: calc(var(--spacing) * 35.2); --game-card-height-safe: calc(var(--spacing) * 52);
--game-card-width: calc(var(--spacing) * 33.28);
}
}
@variant landscape {
@keyframes zoom-in-bg {
0% {
background-size: 125% auto;
background-color: var(--color-base-100);
}
100% {
background-size: 120% auto;
background-color: var(--color-base-300);
}
}
}
@variant portrait {
@keyframes zoom-in-bg {
0% {
background-size: auto 125%;
background-color: var(--color-base-100);
}
100% {
background-size: auto 120%;
background-color: var(--color-base-300);
} }
} }
} }
@layer base {
@variant md { @variant md {
:root { :root {
--game-card-height: calc(var(--spacing) * 100); --game-card-height: calc(var(--spacing) * 100);
--game-card-height-safe: calc(var(--spacing) * 100 + 3.5rem);
--game-card-width: calc(var(--spacing) * 64); --game-card-width: calc(var(--spacing) * 64);
} }
} }
@ -134,6 +190,10 @@ html {
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
} }
body {
font-family: 'Alan Sans', sans-serif;
}
@layer components { @layer components {
.background { .background {
@ -160,8 +220,7 @@ html {
} }
.header-icon svg { .header-icon svg {
@apply md:w-8 md:h-8 md:min-w-8 md:min-h-8; @apply md:w-8 md:h-8 md:min-w-8 md:min-h-8 sm:w-5 sm:h-5 sm:min-w-5 sm:min-h-5;
@apply sm:w-5 sm:h-5 sm:min-w-5 sm:min-h-5;
} }
.header-icon-small svg { .header-icon-small svg {
@ -172,11 +231,15 @@ html {
display: flex; display: flex;
} }
.card-grid { .test {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, var(--game-card-width)); grid-template-columns: repeat(auto-fill, var(--game-card-width));
grid-auto-rows: var(--game-card-height); grid-auto-rows: var(--game-card-height);
padding-bottom: 16px; }
.card-grid {
@apply grid pb-4;
} }
.no-scrollbar { .no-scrollbar {

4
src/mainview/index.html
View file

@ -4,6 +4,10 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="./assets/favicon.ico" /> <link rel="icon" href="./assets/favicon.ico" />
<link
href="https://fonts.googleapis.com/css2?family=Alan+Sans:wght@300..900&display=swap"
rel="stylesheet"
/>
<title>GameFlow</title> <title>GameFlow</title>
</head> </head>
<body> <body>

5
src/mainview/routes/__root.tsx
View file

@ -4,6 +4,7 @@ import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { RouterContext } from ".."; import { RouterContext } from "..";
import Notifications from "../components/Notifications"; import Notifications from "../components/Notifications";
import { Toaster } from "react-hot-toast"; import { Toaster } from "react-hot-toast";
import { mobileCheck } from "../scripts/utils";
export const Route = createRootRouteWithContext<RouterContext>()({ export const Route = createRootRouteWithContext<RouterContext>()({
component: RootComponent, component: RootComponent,
@ -11,12 +12,14 @@ export const Route = createRootRouteWithContext<RouterContext>()({
function RootComponent () function RootComponent ()
{ {
const isMobile = mobileCheck();
return ( return (
<div className="w-screen h-screen overflow-hidden"> <div className="w-screen h-screen overflow-hidden">
<Outlet /> <Outlet />
<Notifications /> <Notifications />
<Toaster containerStyle={{ viewTimelineName: 'toasters' }} /> <Toaster containerStyle={{ viewTimelineName: 'toasters' }} />
{import.meta.env.DEV && {import.meta.env.DEV && !isMobile &&
<> <>
<TanStackRouterDevtools position="top-left" /> <TanStackRouterDevtools position="top-left" />
<ReactQueryDevtools buttonPosition="top-right" /> <ReactQueryDevtools buttonPosition="top-right" />

91
src/mainview/routes/game/$source.$id.tsx
View file

@ -4,29 +4,19 @@ import { twJoin, twMerge } from "tailwind-merge";
import { JSX, RefObject, useEffect, useRef, useState } from "react"; import { JSX, RefObject, useEffect, useRef, useState } from "react";
import { FocusContext, setFocus, useFocusable } from "@noriginmedia/norigin-spatial-navigation"; import { FocusContext, setFocus, useFocusable } from "@noriginmedia/norigin-spatial-navigation";
import classNames from "classnames"; import classNames from "classnames";
import { Clock, CloudDownload, Download, Folder, HardDrive, Image, PackageOpen, Play, Settings, Store, Trash, TriangleAlert, Trophy } from "lucide-react"; import { Clock, CloudDownload, Download, HardDrive, Image, PackageOpen, Play, Settings, Store, Trash, TriangleAlert, Trophy } from "lucide-react";
import { HeaderUI } from "../../components/Header"; import { HeaderUI } from "../../components/Header";
import prettyBytes from 'pretty-bytes'; import prettyBytes from 'pretty-bytes';
import { useEventListener } from "usehooks-ts";
import { PopSource, SaveSource, useFocusEventListener } from "../../scripts/spatialNavigation"; import { PopSource, SaveSource, useFocusEventListener } from "../../scripts/spatialNavigation";
import { AnimatedBackground } from "../../components/AnimatedBackground"; import { AnimatedBackground } from "../../components/AnimatedBackground";
import { rommApi } from "../../scripts/clientApi"; import { rommApi } from "../../scripts/clientApi";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import { queryOptions, useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { Router } from "../.."; import { Router } from "../..";
import { ContextDialog, ContextList, DialogEntry } from "../../components/ContextDialog"; import { ContextDialog, ContextList, DialogEntry } from "../../components/ContextDialog";
import Shortcuts from "../../components/Shortcuts"; import Shortcuts from "../../components/Shortcuts";
import { GamePadButtonCode, useShortcutContext, useShortcuts } from "@/mainview/scripts/shortcuts"; import { GamePadButtonCode, useShortcutContext, useShortcuts } from "@/mainview/scripts/shortcuts";
import { gameQuery } from "@/mainview/scripts/queries";
const gameQuery = (source: string, id: number) => queryOptions({
queryKey: ['game', source, id],
queryFn: async () =>
{
const { data, error } = await rommApi.api.romm.game({ source })({ id }).get();
if (error) throw error;
return data;
}
});
export const Route = createFileRoute("/game/$source/$id")({ export const Route = createFileRoute("/game/$source/$id")({
loader: ({ params, context }) => loader: ({ params, context }) =>
@ -66,7 +56,8 @@ function Details (data: { mainAreaRef: RefObject<HTMLDivElement | null>, game?:
saveLastFocusedChild: false saveLastFocusedChild: false
}); });
const platformCoverImg = `${RPC_URL(__HOST__)}${data.game?.path_platform_cover}`; const platformCoverImg = new URL(`${RPC_URL(__HOST__)}${data.game?.path_platform_cover ?? ''}`);
platformCoverImg.searchParams.set("width", "64");
const gameCoverImg = data.game?.path_cover ? `${RPC_URL(__HOST__)}${data.game?.path_cover}` : undefined; const gameCoverImg = data.game?.path_cover ? `${RPC_URL(__HOST__)}${data.game?.path_cover}` : undefined;
let fileSizeIcon: JSX.Element | undefined; let fileSizeIcon: JSX.Element | undefined;
@ -84,17 +75,17 @@ function Details (data: { mainAreaRef: RefObject<HTMLDivElement | null>, game?:
fileSizeIcon = <CloudDownload />; fileSizeIcon = <CloudDownload />;
} }
return <main ref={ref} className="flex p-3 flex-col h-[75vh]"> return <main ref={ref} className="flex p-3 flex-col flex-1 min-h-0">
<FocusContext value={focusKey}> <FocusContext value={focusKey}>
<section className="flex my-4 p-12 pt-4 gap-12 h-full rounded-4xl z-0"> <section className="flex portrait:flex-col my-4 sm:p-0 md:p-12 pt-4 sm:gap-8 md:gap-12 portrait:w-full h-full min-h-0 rounded-4xl flex-1 z-0 sm:text-sm md:text-base">
<div className="flex gap-6 overflow-hidden bg-base-300 justify-end h-full rounded-3xl aspect-3/4"> <div className="flex gap-6 overflow-hidden bg-base-300 justify-end portrait:w-full rounded-3xl aspect-3/4 portrait:h-24">
{gameCoverImg ? {gameCoverImg ?
<img className="drop-shadow-2xl drop-shadow-base-300/40 h-full" src={gameCoverImg}></img> : <img className="drop-shadow-2xl drop-shadow-base-300/40 w-full object-cover" src={gameCoverImg}></img> :
<div className="skeleton w-full h-full"></div> <div className="skeleton w-full h-full"></div>
} }
</div> </div>
<div className="flex-2 flex flex-col gap-6 pt-16"> <div className="flex-2 flex flex-col sm:gap-1 md:gap-6 sm:pt-2 md:pt-16 min-h-0">
<div className="flex gap-6"> <div className="flex flex-wrap sm:gap-4 md:gap-6 shrink-0">
<Detail icon={<Clock />} >{data.game?.last_played ? new Date(data.game.last_played).toDateString() : "Never"}</Detail> <Detail icon={<Clock />} >{data.game?.last_played ? new Date(data.game.last_played).toDateString() : "Never"}</Detail>
{!!data.game && (data.game.fs_size_bytes !== null || data.game.missing) && {!!data.game && (data.game.fs_size_bytes !== null || data.game.missing) &&
<div className={classNames({ "text-error": data.game.missing })}> <div className={classNames({ "text-error": data.game.missing })}>
@ -102,14 +93,15 @@ function Details (data: { mainAreaRef: RefObject<HTMLDivElement | null>, game?:
<Detail icon={fileSizeIcon} >{data.game.missing ? 'Missing' : prettyBytes(data.game.fs_size_bytes!)}</Detail> <Detail icon={fileSizeIcon} >{data.game.missing ? 'Missing' : prettyBytes(data.game.fs_size_bytes!)}</Detail>
</div> </div>
</div>} </div>}
<Detail icon={<img className="size-6" src={platformCoverImg}></img>} >{data.game?.platform_display_name ?? <div className="skeleton h-4 w-32"></div>}</Detail> <Detail icon={<img className="size-6" src={platformCoverImg.href}></img>} >{data.game?.platform_display_name ?? <div className="skeleton h-4 w-32"></div>}</Detail>
<Detail icon={ <Detail icon={
<Store /> <Store />
} > } >
{data.game?.source ?? data.game?.id.source} {data.game?.source ?? data.game?.id.source}
{data.game?.local && <small className="text-base-content/60 font-semibold">local</small>}</Detail> {data.game?.local && <small className="text-base-content/60 font-semibold">local</small>}</Detail>
</div> </div>
<div className="text-base-content/80 leading-relaxed grow text-wrap whitespace-break-spaces text-ellipsis overflow-hidden"> <div className="md:hidden divider divider-vertical m-0"></div>
<div className="text-base-content/80 flex-1 min-h-0 leading-relaxed grow text-wrap whitespace-break-spaces text-ellipsis overflow-hidden ">
{data.game?.summary ?? <div className="flex flex-col gap-4 w-full"> {data.game?.summary ?? <div className="flex flex-col gap-4 w-full">
<div className="skeleton h-4 w-[30%]"></div> <div className="skeleton h-4 w-[30%]"></div>
<div className="skeleton h-4 w-[80%]"></div> <div className="skeleton h-4 w-[80%]"></div>
@ -130,16 +122,18 @@ function Screenshot (data: { path: string; index: number; setFocused?: (index: n
{ {
const { ref, focused, focusSelf } = useFocusable({ const { ref, focused, focusSelf } = useFocusable({
focusKey: `screenshot-${data.index}`, focusKey: `screenshot-${data.index}`,
onFocus: () => onFocus: (e, p, details) =>
{ {
(ref.current as HTMLElement).scrollIntoView({ inline: 'center', behavior: 'smooth' });
data.setFocused?.(data.index); data.setFocused?.(data.index);
(ref.current as HTMLElement).scrollIntoView({ inline: 'center', block: 'nearest', behavior: 'smooth' });
} }
}); 4096; }); 4096;
return <img className={twJoin("h-[60vh] rounded-3xl", classNames({ return <img className={twJoin("max-h-[60vh] rounded-3xl", classNames({
"ring-7 ring-primary": focused, "sm:ring-4 md:ring-7 ring-primary": focused,
"cursor-pointer": !focused "cursor-pointer": !focused
}))} onClick={focusSelf} ref={ref} src={`${RPC_URL(__HOST__)}${data.path}`} loading="lazy" />; }))} onClick={e => focusSelf({ nativeEvent: e.nativeEvent })} ref={ref} src={`${RPC_URL(__HOST__)}${data.path}`} loading="lazy" />;
} }
function Screenshots (data: { screenshots: string[]; }) function Screenshots (data: { screenshots: string[]; })
@ -148,22 +142,29 @@ function Screenshots (data: { screenshots: string[]; })
const [focusedScreenshot, setFocusedScreenshot] = useState(-1); const [focusedScreenshot, setFocusedScreenshot] = useState(-1);
const { ref, focusKey } = useFocusable({ const { ref, focusKey } = useFocusable({
focusKey: 'screenshot-list', focusKey: 'screenshot-list',
onFocus: () => (ref.current as HTMLElement).scrollIntoView({ block: 'center', behavior: 'smooth' }), onFocus: (e, p, details) =>
{
if (!(details.nativeEvent instanceof TouchEvent))
{
(ref.current as HTMLElement).scrollIntoView({ block: 'center', behavior: 'smooth' });
}
},
onBlur: () => setFocusedScreenshot(-1) onBlur: () => setFocusedScreenshot(-1)
}); });
return <div ref={ref} className="flex flex-col p-16 pt-2 w-full z-0"> return <div ref={ref} className="flex flex-col w-full z-0">
<FocusContext value={focusKey}> <FocusContext value={focusKey}>
<div <div
ref={scrollRef} ref={scrollRef}
className="flex gap-6 px-16 py-2 overflow-hidden justify-center-safe" className="flex gap-6 px-16 py-2 sm:overflow-scroll md:overflow-hidden no-scrollbar justify-center-safe"
> >
{data.screenshots.map((s, i) => <Screenshot key={s} setFocused={setFocusedScreenshot} index={i} path={s} />)} {data.screenshots.map((s, i) => <Screenshot key={s} setFocused={setFocusedScreenshot} index={i} path={s} />)}
</div> </div>
<div className="flex gap-2 py-6 justify-center items-center h-3">{data.screenshots.map((s, i) => <div className="flex gap-2 py-6 justify-center items-center h-3">{data.screenshots.map((s, i) =>
{ {
const focused = i === focusedScreenshot; const focused = i === focusedScreenshot;
return <button key={i} onClick={() => setFocus(`screenshot-${i}`)} className={twMerge("cursor-pointer rounded-full size-2 bg-base-content/40 transition-all", classNames({ return <button key={i} onClick={(e) => setFocus(`screenshot-${i}`, { nativeEvent: e.nativeEvent })}
className={twMerge("cursor-pointer rounded-full size-2 bg-base-content/40 transition-all", classNames({
"size-3 bg-base-content drop-shadow-lg drop-shadow-base-300/40": focused "size-3 bg-base-content drop-shadow-lg drop-shadow-base-300/40": focused
}))}></button>; }))}></button>;
})}</div> })}</div>
@ -388,7 +389,7 @@ function ActionButtons (data: { game: FrontEndGameTypeDetailed; })
error: 'bg-error text-error-content' error: 'bg-error text-error-content'
}; };
return <div ref={ref} className="flex overflow-hidden p-2 gap-4 min-h-32 items-center"> return <div ref={ref} className="flex sm:gap-2 md:gap-4 sm:h-16 md:h-32 overflow-hidden p-2 items-center shrink-0">
<FocusContext value={focusKey}> <FocusContext value={focusKey}>
<MainActions game={data.game} /> <MainActions game={data.game} />
<AchievementsInfo game={data.game} /> <AchievementsInfo game={data.game} />
@ -402,7 +403,7 @@ function ActionButtons (data: { game: FrontEndGameTypeDetailed; })
}}> }}>
<ContextList options={contextOptions} /> <ContextList options={contextOptions} />
</ContextDialog> </ContextDialog>
{!!hoverText && <p className={twMerge("flex py-2 px-4 rounded-4xl text-wrap wrap-anywhere", (tooltipStyles as any)[hoverTextType])}>{hoverText}</p>} {!!hoverText && <p className={twMerge("flex sm:hidden md:inline py-1 md:py-2 md:px-4 rounded-4xl text-wrap wrap-anywhere text-base", (tooltipStyles as any)[hoverTextType])}>{hoverText}</p>}
</FocusContext> </FocusContext>
</div>; </div>;
} }
@ -435,16 +436,16 @@ function ActionButton (data: {
const styles = { const styles = {
primary: twMerge("bg-primary text-primary-content", primary: twMerge("bg-primary text-primary-content",
classNames({ classNames({
"bg-base-content text-base-300 ring-7 ring-primary": focused "bg-base-content text-base-300 sm:ring-4 md:ring-7 ring-primary": focused
})), })),
base: twMerge(" text-base-content border-dashed border-base-content/20 border-2", classNames({ base: twMerge(" text-base-content border-dashed border-base-content/20 border-2", classNames({
"bg-base-content text-base-300 ring-7 ring-primary": focused "bg-base-content text-base-300 sm:ring-4 md:ring-7 ring-primary": focused
})), })),
accent: twMerge("bg-primary text-primary-content ", classNames({ accent: twMerge("bg-primary text-primary-content ", classNames({
"bg-base-content text-base-300 ring-7 ring-primary": focused "bg-base-content text-base-300 sm:ring-4 md:ring-7 ring-primary": focused
})), })),
error: twMerge("bg-error text-error-content ", classNames({ error: twMerge("bg-error text-error-content ", classNames({
"bg-error text-error-content ring-7 ring-primary": focused "bg-error text-error-content sm:ring-4 md:ring-7 ring-primary": focused
})), })),
}; };
return ( return (
@ -454,8 +455,8 @@ function ActionButton (data: {
onClick={data.onAction} onClick={data.onAction}
data-tooltip={data.tooltip} data-tooltip={data.tooltip}
data-tooltip_type={data.tooltip_type} data-tooltip_type={data.tooltip_type}
className={twMerge("header-icon flex flex-col gap-2 px-5 py-4 rounded-3xl text-2xl justify-center items-center cursor-pointer disabled:opacity-30", className={twMerge("header-icon flex flex-col gap-2 md:px-5 md:py-4 rounded-3xl md:text-2xl justify-center items-center cursor-pointer disabled:opacity-30",
"hover:ring-7 hover:ring-primary", styles[data.type], classNames({ "rounded-full size-21 hover:bg-base-content hover:text-base-300 hover:ring-7 hover:ring-primary": !data.square }), data.className)}> "hover:ring-7 hover:ring-primary", styles[data.type], classNames({ "rounded-full sm:size-14 md:size-21 hover:bg-base-content hover:text-base-300 hover:ring-7 hover:ring-primary": !data.square }), data.className)}>
{data.icon} {data.icon}
{data.children} {data.children}
</button> </button>
@ -467,7 +468,7 @@ export default function GameDetailsUI ()
const { source, id } = Route.useParams(); const { source, id } = Route.useParams();
const { data, isSuccess } = useQuery(gameQuery(source, Number(id))); const { data, isSuccess } = useQuery(gameQuery(source, Number(id)));
const { ref, focusKey, focusSelf } = useFocusable({ focusKey: "game-details", preferredChildFocusKey: "main-details" }); const { ref, focusKey, focusSelf } = useFocusable({ focusKey: "game-details", preferredChildFocusKey: "main-details" });
const backgroundImage = data?.path_cover ? `${RPC_URL(__HOST__)}${data?.path_cover}` : undefined; const backgroundImage = data?.path_cover ? new URL(`${RPC_URL(__HOST__)}${data?.path_cover}`) : undefined;
const mainAreaRef = useRef<HTMLDivElement>(null); const mainAreaRef = useRef<HTMLDivElement>(null);
useShortcuts(focusKey, () => [{ label: "Back", button: GamePadButtonCode.B, action: HandleGoBack }]); useShortcuts(focusKey, () => [{ label: "Back", button: GamePadButtonCode.B, action: HandleGoBack }]);
@ -483,20 +484,22 @@ export default function GameDetailsUI ()
}, [isSuccess]); }, [isSuccess]);
return ( return (
<AnimatedBackground ref={ref} backgroundKey="game-details" backgroundUrl={backgroundImage}> <AnimatedBackground ref={ref} backgroundKey="game-details" backgroundUrl={backgroundImage} scrolling>
<div className="z-0 overflow-y-scroll"> <div className="z-0">
<FocusContext value={focusKey}> <FocusContext value={focusKey}>
<div className="px-3 py-2" ref={mainAreaRef}> <div className="flex flex-col px-3 py-2 h-[90vh] overflow-hidden bg-linear-to-t from-base-100 to-base-100/40" ref={mainAreaRef}>
<HeaderUI /> <HeaderUI />
<Details mainAreaRef={mainAreaRef} game={data} /> <Details mainAreaRef={mainAreaRef} game={data} />
</div> </div>
<div className="divider"><div className="flex items-center gap-3 opacity-60"><Image className="size-6" />Screenshots</div></div> <div className="bg-base-200">
<div className="divider m-0 pb-12"><div className="flex items-center gap-3 opacity-60"><Image className="sm:size-4 md:size-6" />Screenshots</div></div>
{!!data && <Screenshots screenshots={data.paths_screenshots} />} {!!data && <Screenshots screenshots={data.paths_screenshots} />}
<footer className="absolute left-0 bottom-0 w-full p-2 flex items-center justify-between z-10"> <footer className="absolute left-0 bottom-0 w-full p-2 flex items-center justify-between z-10">
<div className="flex gap-2 text-sm"> <div className="flex gap-2 text-sm">
</div> </div>
<Shortcuts shortcuts={shortcuts} /> <Shortcuts shortcuts={shortcuts} />
</footer> </footer>
</div>
</FocusContext> </FocusContext>
</div> </div>
</AnimatedBackground> </AnimatedBackground>

64
src/mainview/routes/index.tsx
View file

@ -25,7 +25,7 @@ import
} from "@noriginmedia/norigin-spatial-navigation"; } from "@noriginmedia/norigin-spatial-navigation";
import classNames from "classnames"; import classNames from "classnames";
import { useEventListener } from "usehooks-ts"; import { useEventListener } from "usehooks-ts";
import { HeaderUI } from "../components/Header"; import { HeaderAccounts, HeaderStatusBar, HeaderUI } from "../components/Header";
import { FilterUI } from "../components/Filters"; import { FilterUI } from "../components/Filters";
import { AnimatedBackground, AnimatedBackgroundContext } from "../components/AnimatedBackground"; import { AnimatedBackground, AnimatedBackgroundContext } from "../components/AnimatedBackground";
import { GameList } from "../components/GameList"; import { GameList } from "../components/GameList";
@ -43,6 +43,7 @@ import z from "zod";
import { Router } from ".."; import { Router } from "..";
import CollectionList from "../components/CollectionList"; import CollectionList from "../components/CollectionList";
import { zodValidator } from '@tanstack/zod-adapter'; import { zodValidator } from '@tanstack/zod-adapter';
import { mobileCheck } from "../scripts/utils";
export const Route = createFileRoute("/")({ export const Route = createFileRoute("/")({
component: ConsoleHomeUI, component: ConsoleHomeUI,
@ -61,6 +62,22 @@ const filters = {
}, },
}; };
let screenLock: WakeLockSentinel | undefined = undefined;
async function handleFullscreen ()
{
if (document.fullscreenElement)
{
await document.exitFullscreen();
if (screenLock)
screenLock.release();
} else
{
await document.documentElement.requestFullscreen();
screenLock = await navigator.wakeLock.request('screen');
return screenLock;
}
}
function HomeListError (data: { focused: boolean; }) function HomeListError (data: { focused: boolean; })
{ {
const error = useErrorBoundary(); const error = useErrorBoundary();
@ -123,10 +140,10 @@ function HomeList (data: {
return ( return (
<FocusContext value={focusKey}> <FocusContext value={focusKey}>
<div ref={ref} className="flex overflow-x-scroll no-scrollbar pb-3 mb-1 justify-center-safe" style={{ <div ref={ref} className="flex h-full w-full landscape:overflow-x-scroll portrait:overflow-y-scroll overflow-hidden no-scrollbar justify-center-safe sm:pt-2 md:py-6 md:pb-3 md:mb-1" style={{
mask: `linear-gradient(to right, rgba(0,0,0,0.8) 0%, black 10%, black 90%, rgba(0,0,0,0.8) 100%)` mask: `linear-gradient(to right, rgba(0,0,0,0.8) 0%, black 10%, black 90%, rgba(0,0,0,0.8) 100%)`
}}> }}>
<div className="flex px-16"> <div className="landscape:px-16 portrait:min-h-fit portrait:h-fit portrait:pb-32 portrait:w-full landscape:h-full">
<ErrorBoundary fallback={<HomeListError focused={focused} />}> <ErrorBoundary fallback={<HomeListError focused={focused} />}>
<Suspense key={data.selectedFilter} fallback={<LoadingCardList placeholderCount={8} />}> <Suspense key={data.selectedFilter} fallback={<LoadingCardList placeholderCount={8} />}>
{lists[data.selectedFilter]} {lists[data.selectedFilter]}
@ -152,9 +169,7 @@ function MainMenu (data: {})
<ul <ul
ref={ref} ref={ref}
save-child-focus="session" save-child-focus="session"
className={twMerge("md:relative flex items-center justify-center md:gap-3", className="flex items-center gap-y-1 sm:portrait:bg-base-100 sm:portrait:p-2 sm:portrait:rounded-full sm:gap-1 md:gap-3"
"sm:gap-1 sm:absolute sm:bottom-2 sm:left-0 sm:right-0"
)}
> >
<FocusContext.Provider value={focusKey}> <FocusContext.Provider value={focusKey}>
<CircleIcon <CircleIcon
@ -207,8 +222,7 @@ function CircleIcon (data: {
ref={ref} ref={ref}
onClick={data.action} onClick={data.action}
className={twMerge( className={twMerge(
`menu-icon text-base-300 md:w-20 md:h-20 rounded-full flex items-center justify-center drop-shadow-lg cursor-pointer transition-all`, `portrait:sm:size-12 sm:w-14 sm:h-10 menu-icon text-base-300 md:w-20 md:h-20 rounded-full flex items-center justify-center drop-shadow-lg cursor-pointer transition-all`,
'sm:w-14 sm:h-10',
typeClasses[data.type ?? "none"], classNames( typeClasses[data.type ?? "none"], classNames(
{ {
"focus ring-7 ring-primary drop-shadow-2xl animate-scale": focused, "focus ring-7 ring-primary drop-shadow-2xl animate-scale": focused,
@ -237,7 +251,7 @@ export default function ConsoleHomeUI ()
forceFocus: true, forceFocus: true,
autoRestoreFocus: false, autoRestoreFocus: false,
saveLastFocusedChild: false, saveLastFocusedChild: false,
focusKey: "Home", focusKey: "HomePage",
preferredChildFocusKey: `home-list`, preferredChildFocusKey: `home-list`,
}); });
@ -266,40 +280,42 @@ export default function ConsoleHomeUI ()
}], [filter]); }], [filter]);
const { shortcuts } = useShortcutContext(); const { shortcuts } = useShortcutContext();
const headerButtons = [];
if (mobileCheck())
headerButtons.push({ id: "fullscreen", icon: <Maximize />, action: handleFullscreen });
headerButtons.push({ id: "search", icon: <Search /> }, { id: "power-button", icon: <Power />, external: true, action: () => closeMutation.mutate() });
return ( return (
<AnimatedBackground animated ref={ref} backgroundKey="home-background"> <AnimatedBackground animated ref={ref} backgroundKey="home-background" className="grid grid-cols-3 sm:landscape:grid-rows-[3rem_minmax(var(--game-card-height-safe),1fr)_4rem] md:landscape:grid-rows-[5rem_4rem_minmax(var(--game-card-height-safe),1fr)_6rem_6rem] gap-1 portrait:grid-rows-[3rem_4rem_minmax(var(--game-card-height-safe),1fr)] max-h-screen overflow-hidden">
<FocusContext.Provider value={focusKey}> <FocusContext.Provider value={focusKey}>
<div className="px-3 w-full pt-2"> <div className="sm:landscape:hidden md:landscape:inline sm:portrait:col-start-1 md:inline flex col-span-1 md:pl-2 md:pt-2">
<HeaderUI buttons={[ <HeaderAccounts />
{ id: "fullscreen", icon: <Maximize />, action: () => document.documentElement.requestFullscreen() },
{ id: "search", icon: <Search /> },
{ id: "power-button", icon: <Power />, external: true, action: () => closeMutation.mutate() }
]} />
</div> </div>
<div className="flex w-full flex-col grow justify-evenly md:pt-0"> <div className="sm:portrait:*:justify-center sm:portrait:col-span-3 sm:landscape:*:justify-start sm:px-2 sm:pt-2 md:row-start-2 md:col-start-1 sm:landscape:col-span-1 md:landscape:col-span-3 flex items-center md:*:justify-center! md:ml-0 gap-2 *:w-full *:flex">
<FilterUI <FilterUI
id="home" id="home"
options={filters} options={filters}
selected={filter ? filter : 'games'} selected={filter ? filter : 'games'}
setSelected={setFilter} setSelected={setFilter}
/> />
<div className="md:-mb-1"> </div>
<div className="flex sm:landscape:col-span-2 sm:portrait:col-start-2 sm:portrait:col-span-2 sm:portrait:row-start-1 md:col-start-3 md:col-span-1 justify-end md:pr-2 md:pt-2">
<HeaderStatusBar buttons={headerButtons} />
</div>
<div className="col-span-3 min-h-0 landscape:flex landscape:items-center-safe">
<HomeList <HomeList
selectedFilter={filter} selectedFilter={filter}
/> />
</div> </div>
<div> <div className="flex items-end sm:landscape:justify-end sm:portrait:justify-center sm:px-2 sm:pb-2 sm:portrait:absolute sm:portrait:left-0 sm:portrait:right-0 sm:portrait:bottom-0 sm:landscape:col-span-2 md:landscape:col-span-3 md:col-span-3 md:landscape:justify-center">
<MainMenu /> <MainMenu />
</div> </div>
</div> <footer className={twMerge(
<footer className={twMerge("md:relative px-2 md:pb-2 flex items-center justify-between h-12", "sm:portrait:hidden sm:col-span-1 md:col-start-2 md:col-span-2 md:relative px-2 pb-2 flex items-end justify-end",
"sm:absolute bottom-0 left-0 right-0"
)}> )}>
<div className="flex gap-2 text-sm">
</div>
<Shortcuts shortcuts={shortcuts} /> <Shortcuts shortcuts={shortcuts} />
</footer> </footer>
</FocusContext.Provider> </FocusContext.Provider>
</AnimatedBackground> </AnimatedBackground>
); );

2
src/mainview/routes/platform.$source.$id.tsx
View file

@ -12,7 +12,7 @@ export const Route = createFileRoute("/platform/$source/$id")({
function PlatformTitle (data: { platformSlug?: string, platformName?: string; }) function PlatformTitle (data: { platformSlug?: string, platformName?: string; })
{ {
return <div className="flex flex-col gap-2 pl-2 text-2xl font-semibold text-base-content justify-center drop-shadow"> return <div className="sm:landscape:hidden flex flex-col gap-2 pl-2 text-2xl font-semibold text-base-content justify-center drop-shadow">
<div className="divider mb-6 mt-0"> <div className="divider mb-6 mt-0">
{!!data.platformSlug && <img className="size-14 rounded-full p-2" src={`${RPC_URL(__HOST__)}/api/romm/assets/platforms/${data.platformSlug.toLocaleLowerCase()}.svg`} ></img>} {!!data.platformSlug && <img className="size-14 rounded-full p-2" src={`${RPC_URL(__HOST__)}/api/romm/assets/platforms/${data.platformSlug.toLocaleLowerCase()}.svg`} ></img>}

10
src/mainview/routes/settings/accounts.tsx
View file

@ -46,17 +46,17 @@ function LoginControls (data: { hasPassword: boolean; })
c.client.invalidateQueries({ queryKey: ["romm", "auth"] }); c.client.invalidateQueries({ queryKey: ["romm", "auth"] });
} }
}); });
return <div className="flex gap-2 items-center"> return <div className="flex gap-2 items-center flex-wrap">
{user.isError && <div className="badge badge-error gap-2 tooltip" data-tip={(user.error as any)?.detail ?? ''}> {user.isError && <div className="badge badge-error gap-2 tooltip" data-tip={(user.error as any)?.detail ?? ''}>
<Lock className="size-4" /></div>} <Lock className="size-4" /></div>}
{user.isSuccess && <> {user.isSuccess && <>
<div className="badge badge-success badge-lg rounded-full gap-2"> Logged In As: <img className="size-6 rounded-full" src={`${RPC_URL(__HOST__)}/api/romm/assets/romm/assets/${user.data?.avatar_path}`} /><b>{user.data?.username}</b></div> <div className="badge badge-success badge-lg rounded-full gap-2"> <p className="sm:hidden md:inline">Logged In As:</p> <img className="size-6 rounded-full" src={`${RPC_URL(__HOST__)}/api/romm/assets/romm/assets/${user.data?.avatar_path}`} /><b>{user.data?.username}</b></div>
</>} </>}
<Button disabled={!context.state.canSubmit || !context.state.isDirty} type="submit" onAction={() => context.handleSubmit()} > <Button id="can-submit" disabled={!context.state.canSubmit || !context.state.isDirty} type="submit" onAction={() => context.handleSubmit()} >
<Save /> Save <Save /> Save
</Button> </Button>
{data.hasPassword && {data.hasPassword &&
<Button onAction={() => <Button id="forget" onAction={() =>
{ {
toast("Logout", { id: 'romm-logout-noti' }); toast("Logout", { id: 'romm-logout-noti' });
logoutMutation.mutate(); logoutMutation.mutate();
@ -64,7 +64,7 @@ function LoginControls (data: { hasPassword: boolean; })
<Trash /> Forget <Trash /> Forget
</Button> </Button>
} }
<Button disabled={context.state.isDefaultValue} type="reset" onAction={() => context.reset()}> <Button id="cancel" disabled={context.state.isDefaultValue} type="reset" onAction={() => context.reset()}>
<X /> Cancel <X /> Cancel
</Button> </Button>
</div>; </div>;

10
src/mainview/routes/settings/directories.tsx
View file

@ -37,7 +37,7 @@ function DriveComponent (data: { drive: DownloadsDrive; downloadsSize: number; r
shortcuts.push({ label: "Move Downloads", button: GamePadButtonCode.A, action: handleAction }); shortcuts.push({ label: "Move Downloads", button: GamePadButtonCode.A, action: handleAction });
} }
useShortcuts(focusKey, () => shortcuts, [shortcuts]); useShortcuts(focusKey, () => shortcuts, [shortcuts]);
const { isMouse } = useActiveControl(); const { isPointer } = useActiveControl();
return <li ref={ref} className={twMerge('flex flex-row p-4 bg-base-300 rounded-2xl gap-1 items-end', return <li ref={ref} className={twMerge('flex flex-row p-4 bg-base-300 rounded-2xl gap-1 items-end',
classNames({ classNames({
@ -67,7 +67,7 @@ function DriveComponent (data: { drive: DownloadsDrive; downloadsSize: number; r
{!!data.drive.isCurrentlyUsed && <div className="h-full bg-base-content" style={{ width: usedPercentRaw.toLocaleString('en-US', { style: 'percent' }) }}></div>} {!!data.drive.isCurrentlyUsed && <div className="h-full bg-base-content" style={{ width: usedPercentRaw.toLocaleString('en-US', { style: 'percent' }) }}></div>}
</div> </div>
</div> </div>
{valid && isMouse && <Button type="button" className='btn-circle' onAction={handleAction} id={`${data.drive.mountPoint}-select`}><Save /></Button>} {valid && isPointer && <Button type="button" className='btn-circle' onAction={handleAction} id={`${data.drive.mountPoint}-select`}><Save /></Button>}
</li>; </li>;
} }
@ -87,7 +87,7 @@ function RouteComponent ()
<div className="divider text-2xl mt-0 md:mt-4"> <div className="divider text-2xl mt-0 md:mt-4">
<Download className='size-16' /> Downloads ({drives?.downloadsSize ? prettyBytes(drives?.downloadsSize) : <span className="loading loading-spinner loading-lg size-6"></span>}) <Download className='size-16' /> Downloads ({drives?.downloadsSize ? prettyBytes(drives?.downloadsSize) : <span className="loading loading-spinner loading-lg size-6"></span>})
</div> </div>
<ul className='p-2 grid grid-cols-2 gap-3'> <ul className='p-2 grid grid-cols-2 portrait:sm:grid-cols-1 gap-3'>
{drives?.drives.filter(d => d.mountPoint).map(d => <DriveComponent refetchDrives={refetch} downloadsSize={drives.downloadsSize} drive={d} />)} {drives?.drives.filter(d => d.mountPoint).map(d => <DriveComponent refetchDrives={refetch} downloadsSize={drives.downloadsSize} drive={d} />)}
</ul> </ul>
<DownloadDirectoryOption <DownloadDirectoryOption
@ -100,10 +100,10 @@ function RouteComponent ()
</DownloadDirectoryOption> </DownloadDirectoryOption>
<OptionSpace label="Config Path" id='config'> <OptionSpace label="Config Path" id='config'>
<div className='flex gap-2 items-center'> <div className='flex gap-2 items-center text-ellipsis text-nowrap overflow-hidden'>
{drives?.configPath} {drives?.configPath}
<Button id='open-config' type='button' onAction={() => systemApi.api.system.open.post({ url: drives?.configPath ?? '' })} ><FolderOpen /></Button>
</div> </div>
<Button id='open-config' type='button' onAction={() => systemApi.api.system.open.post({ url: drives?.configPath ?? '' })} ><FolderOpen /></Button>
</OptionSpace> </OptionSpace>
</ul> </ul>

22
src/mainview/routes/settings/route.tsx
View file

@ -69,7 +69,7 @@ function MenuItem (data: {
? handleNonFocusSelect ? handleNonFocusSelect
: undefined, : undefined,
}); });
const { isMouse } = useActiveControl(); const { isPointer } = useActiveControl();
return ( return (
<li <li
ref={ref} ref={ref}
@ -80,10 +80,10 @@ function MenuItem (data: {
> >
<div <div
className={twMerge( className={twMerge(
"group rounded-full p-3 pl-5 text-base-content/80", "group rounded-full p-3 md:pl-5 text-base-content/80",
classNames({ classNames({
"bg-primary text-primary-content": acitve, "bg-primary text-primary-content": acitve,
"font-semibold ring-7 ring-primary-content": focused && !isMouse, "font-semibold sm:ring-4 md:ring-7 ring-primary-content": focused && !isPointer,
"bg-secondary text-secondary-content ring-primary": data.return && focused, "bg-secondary text-secondary-content ring-primary": data.return && focused,
}), }),
data.linkClassName, data.linkClassName,
@ -93,7 +93,7 @@ function MenuItem (data: {
"scale-110": focused || acitve "scale-110": focused || acitve
}))}> }))}>
{data.icon} {data.icon}
{data.label} <div className="sm:hidden md:inline">{data.label}</div>
</div> </div>
</div> </div>
</li> </li>
@ -110,7 +110,7 @@ function SettingsMenu (data: {})
return <ul return <ul
ref={ref} ref={ref}
className="menu md:menu-xl flex-nowrap bg-base-200 w-56 p-4 gap-2 rounded-4xl overflow-y-scroll no-scrollbar" className="menu portrait:menu-horizontal md:menu-xl landscape:flex-nowrap bg-base-200 sm:p-2 md:p-4 sm:portrait:gap-0 sm:landscape:gap-0 md:gap-2! rounded-4xl overflow-auto portrait:w-full"
> >
<FocusContext value={focusKey}> <FocusContext value={focusKey}>
<MenuItem <MenuItem
@ -144,7 +144,7 @@ function SettingsMenu (data: {})
icon={<Info />} icon={<Info />}
/> />
<MenuItem <MenuItem
className={"mt-auto"} className={"landscape:mt-auto"}
route={"/"} route={"/"}
return return
label="Return" label="Return"
@ -184,17 +184,17 @@ export function SettingsUI ()
return ( return (
<FocusContext.Provider value={focusKey}> <FocusContext.Provider value={focusKey}>
<div ref={ref} className="flex flex-col w-full h-full p-4 bg-base-100"> <div ref={ref} className="flex flex-col w-full h-full md:p-4 bg-base-100">
<div className="flex flex-row grow overflow-hidden"> <div className="flex landscape:flex-row portrait:flex-col-reverse grow overflow-hidden">
<div id="Menu" className="flex flex-row h-full"> <div id="Menu" className="flex flex-row landscape:h-full md:landscape:w-56">
<SettingsMenu /> <SettingsMenu />
</div> </div>
<div className="divider divider-horizontal"></div> <div className="divider divider-horizontal"></div>
<div id="Settings" className="flex flex-col grow h-full py-8 overflow-y-scroll"> <div id="Settings" className="flex flex-col grow landscape:h-full py-8 overflow-y-scroll">
<Outlet /> <Outlet />
</div> </div>
</div> </div>
<div className="divider divider-end"> <div className="portrait:hidden divider divider-end">
<Shortcuts shortcuts={shortcuts} /> <Shortcuts shortcuts={shortcuts} />
</div> </div>
</div> </div>

13
src/mainview/scripts/queries.ts
View file

@ -1,5 +1,5 @@
import { keepPreviousData, mutationOptions, queryOptions } from "@tanstack/react-query"; import { keepPreviousData, mutationOptions, queryOptions } from "@tanstack/react-query";
import { settingsApi, systemApi } from "./clientApi"; import { rommApi, settingsApi, systemApi } from "./clientApi";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import { getErrorMessage } from "react-error-boundary"; import { getErrorMessage } from "react-error-boundary";
@ -49,6 +49,15 @@ export const changeDownloadsMutation = mutationOptions({
}); });
return response; return response;
} }
}); });
export const gameQuery = (source: string, id: number) => queryOptions({
queryKey: ['game', source, id],
queryFn: async () =>
{
const { data, error } = await rommApi.api.romm.game({ source })({ id }).get();
if (error) throw error;
return data;
},
});

1
src/mainview/scripts/shortcuts.ts
View file

@ -38,6 +38,7 @@ export interface Shortcut
let isDirty = false; let isDirty = false;
const shortcutChangeDispatcher = setInterval(() => const shortcutChangeDispatcher = setInterval(() =>
{ {
if (!isDirty) return;
window.dispatchEvent(new Event('shortcutsChanged')); window.dispatchEvent(new Event('shortcutsChanged'));
isDirty = false; isDirty = false;
}, 100); }, 100);

2
src/mainview/scripts/spatialNavigation.ts
View file

@ -9,7 +9,7 @@ import { RefObject, useEffect } from "react";
init({ init({
shouldFocusDOMNode: false, shouldFocusDOMNode: false,
throttle: 200 throttle: 200,
}); });
let addFocusable = SpatialNavigation.addFocusable.bind(SpatialNavigation); let addFocusable = SpatialNavigation.addFocusable.bind(SpatialNavigation);

8
src/mainview/scripts/utils.ts
View file

@ -57,7 +57,9 @@ export function useScrollSave (data: ScrollSaveParams)
return { ref: data.ref }; return { ref: data.ref };
} }
export function serverOp () export function mobileCheck ()
{ {
let check = false;
} (function (a) { if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) check = true; })(navigator.userAgent || navigator.vendor || window.opera);
return check;
};

2
src/shared/constants.ts
View file

@ -76,6 +76,7 @@ export interface FrontEndGameType
slug: string | null, slug: string | null,
name: string | null, name: string | null,
platform_id: number | null, platform_id: number | null,
paths_screenshots: string[];
}; };
export interface FrontEndGameTypeDetailed extends FrontEndGameType export interface FrontEndGameTypeDetailed extends FrontEndGameType
@ -84,7 +85,6 @@ export interface FrontEndGameTypeDetailed extends FrontEndGameType
fs_size_bytes: number | null; fs_size_bytes: number | null;
missing: boolean; missing: boolean;
local: boolean; local: boolean;
paths_screenshots: string[];
achievements?: { achievements?: {
unlocked: number; unlocked: number;
total: number; total: number;