feat: Made design more responsive
fix: Made blurring server side to help with performance fix: Fixed shortcut useEffect loop
This commit is contained in:
parent
b4a89385d0
commit
9e4b2a02c1
GPG key ID:
7611A451D2A5D37A
38 changed files with 583 additions and 329 deletions
5
.vscode/settings.json
vendored
5
.vscode/settings.json
vendored
|
|
@ -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
4
.vscode/tasks.json
vendored
|
|
@ -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
55
bun.lock
|
|
@ -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=="],
|
||||||
|
|
|
||||||
|
|
@ -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",
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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 },
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -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]
|
||||||
|
})
|
||||||
|
}));
|
||||||
|
|
@ -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)
|
||||||
|
|
|
||||||
|
|
@ -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>}
|
||||||
|
|
|
||||||
|
|
@ -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) =>
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
}}
|
}}
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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}
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
},
|
},
|
||||||
) ?? []}
|
) ?? []}
|
||||||
|
|
|
||||||
|
|
@ -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,52 +254,61 @@ 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 <div className="flex items-center gap-2 drop-shadow-sm">
|
||||||
|
{accounts?.map(a => <HeaderAvatar
|
||||||
|
key={`header-avatar-${a.id}`}
|
||||||
|
type={a.type}
|
||||||
|
id={`account-${a.id}`}
|
||||||
|
status={a.status}
|
||||||
|
locked={a.locked}
|
||||||
|
imageSrc={a.previewUrl}
|
||||||
|
onSelect={a.action}
|
||||||
|
/>)}
|
||||||
|
</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
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 />
|
||||||
|
<WiFiStatus />
|
||||||
|
<BluetoothStatus />
|
||||||
|
<NotificationStatus />
|
||||||
|
<BatteryStatus />
|
||||||
|
</div>
|
||||||
|
{!!data.buttons && <div className="divider divider-horizontal mx-0"></div>}
|
||||||
|
<div className="flex gap-2">
|
||||||
|
{data.buttonElements ?? data.buttons?.map(b => <RoundButton
|
||||||
|
key={b.id}
|
||||||
|
className="header-icon sm:size-10 md:size-16"
|
||||||
|
id={b.id}
|
||||||
|
icon={b.icon}
|
||||||
|
external={b.external}
|
||||||
|
action={b.action}
|
||||||
|
/>)}
|
||||||
|
</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 (
|
return (
|
||||||
<FocusContext.Provider value={focusKey}>
|
<FocusContext.Provider value={focusKey}>
|
||||||
<header
|
<header
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={twMerge("md:relative md:h-14 md:mt-2 flex items-center justify-between text-white",
|
className={`flex items-center justify-between text-base-content`}
|
||||||
"sm:absolute sm:top-0 sm:right-0 sm:left-0"
|
|
||||||
)}
|
|
||||||
>
|
>
|
||||||
<div className="flex items-center gap-2 drop-shadow-sm">
|
<HeaderAccounts accounts={data.accounts} />
|
||||||
{accounts?.map(a => <HeaderAvatar
|
{data.title}
|
||||||
key={`header-avatar-${a.id}`}
|
<HeaderStatusBar buttonElements={data.buttonElements} buttons={data.buttons} />
|
||||||
type={a.type}
|
|
||||||
id={`account-${a.id}`}
|
|
||||||
status={a.status}
|
|
||||||
locked={a.locked}
|
|
||||||
imageSrc={a.previewUrl}
|
|
||||||
onSelect={a.action}
|
|
||||||
/>)}
|
|
||||||
{data.title}
|
|
||||||
</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">
|
|
||||||
<ClockStatus />
|
|
||||||
<WiFiStatus />
|
|
||||||
<BluetoothStatus />
|
|
||||||
<NotificationStatus />
|
|
||||||
<BatteryStatus />
|
|
||||||
</div>
|
|
||||||
{!!data.buttons && <div className="divider divider-horizontal mx-0"></div>}
|
|
||||||
<div className="flex gap-2">
|
|
||||||
{data.buttonElements ?? data.buttons?.map(b => <RoundButton
|
|
||||||
key={b.id}
|
|
||||||
className="header-icon md:size-16 sm:size-10"
|
|
||||||
id={b.id}
|
|
||||||
icon={b.icon}
|
|
||||||
external={b.external}
|
|
||||||
action={b.action}
|
|
||||||
/>)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
</header>
|
||||||
</FocusContext.Provider>
|
</FocusContext.Provider>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -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,55 +25,60 @@ export function PlatformsList (data: { id: string, setBackground: (url: string)
|
||||||
staleTime: DefaultRommStaleTime,
|
staleTime: DefaultRommStaleTime,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const platformsMapped = useMemo(() => platforms.sort((a, b) => a.updated_at.getTime() - b.updated_at.getTime())
|
||||||
|
.map((g, i) =>
|
||||||
|
{
|
||||||
|
const badges: JSX.Element[] = [];
|
||||||
|
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)
|
||||||
|
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 = {
|
||||||
|
id: g.slug,
|
||||||
|
focusKey: g.slug,
|
||||||
|
title: g.name,
|
||||||
|
subtitle: g.family_name ?? "",
|
||||||
|
previewUrl: "",
|
||||||
|
badges,
|
||||||
|
onFocus: () => data.setBackground(
|
||||||
|
`https://picsum.photos/id/${10 + i}/100/100.webp?blur=10`,
|
||||||
|
),
|
||||||
|
onSelect: () =>
|
||||||
|
{
|
||||||
|
SaveSource('game-list');
|
||||||
|
navigate({ to: `/platform/${g.id.source}/${g.id.id}`, viewTransition: { types: ['zoom-in'] } });
|
||||||
|
},
|
||||||
|
preview:
|
||||||
|
({ focused }) => <div
|
||||||
|
className="flex p-6 bg-base-100 justify-center"
|
||||||
|
style={{
|
||||||
|
background: `linear-gradient(
|
||||||
|
color-mix(in srgb, var(--color-base-content) 60%, transparent),
|
||||||
|
color-mix(in srgb, var(--color-base-300) 60%, transparent)
|
||||||
|
), url(https://picsum.photos/id/${10 + i}/100/100.webp?blur=10) center / cover`,
|
||||||
|
|
||||||
|
backgroundBlendMode: "screen",
|
||||||
|
boxShadow: 'inset 0 0 32px rgba(0,0,0,0.6)'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img className={classNames("drop-shadow-2xl", { "animate-rotate": focused })}
|
||||||
|
src={coverUrl.href}
|
||||||
|
></img>
|
||||||
|
</div>
|
||||||
|
,
|
||||||
|
};
|
||||||
|
return entry;
|
||||||
|
}), [platforms]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<CardList
|
<CardList
|
||||||
type="platform"
|
type="platform"
|
||||||
id={data.id}
|
id={data.id}
|
||||||
|
grid={data.grid}
|
||||||
className={data.className}
|
className={data.className}
|
||||||
onGameFocus={data.onFocus}
|
onGameFocus={data.onFocus}
|
||||||
games={platforms.sort((a, b) => a.updated_at.getTime() - b.updated_at.getTime())
|
games={platformsMapped}
|
||||||
.map((g) =>
|
|
||||||
{
|
|
||||||
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>);
|
|
||||||
if (g.hasLocal)
|
|
||||||
badges.push(<HardDrive className="size-8 m-1" />);
|
|
||||||
const entry: GameMetaExtra = {
|
|
||||||
id: g.slug,
|
|
||||||
focusKey: g.slug,
|
|
||||||
title: g.name,
|
|
||||||
subtitle: g.family_name ?? "",
|
|
||||||
previewUrl: "",
|
|
||||||
badges,
|
|
||||||
onFocus: () => data.setBackground(
|
|
||||||
`https://picsum.photos/id/${10 + g.slug.length}/1920/1080.webp`,
|
|
||||||
),
|
|
||||||
onSelect: () =>
|
|
||||||
{
|
|
||||||
SaveSource('game-list');
|
|
||||||
navigate({ to: `/platform/${g.id.source}/${g.id.id}`, viewTransition: { types: ['zoom-in'] } });
|
|
||||||
},
|
|
||||||
preview:
|
|
||||||
({ focused }) => <div
|
|
||||||
className="flex h-60 p-6 bg-base-100 justify-center"
|
|
||||||
style={{
|
|
||||||
background: `linear-gradient(
|
|
||||||
color-mix(in srgb, var(--color-base-content) 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`,
|
|
||||||
|
|
||||||
backgroundBlendMode: "screen",
|
|
||||||
boxShadow: 'inset 0 0 32px rgba(0,0,0,0.6)'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<img className={classNames("drop-shadow-2xl", { "animate-rotate": focused })}
|
|
||||||
src={`${RPC_URL(__HOST__)}${g.path_cover}`}
|
|
||||||
></img>
|
|
||||||
</div>
|
|
||||||
,
|
|
||||||
};
|
|
||||||
return entry;
|
|
||||||
})}
|
|
||||||
onSelectGame={(id) =>
|
onSelectGame={(id) =>
|
||||||
{
|
{
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -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}`}
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
{data.children}
|
<div className="flex">
|
||||||
|
{data.children}
|
||||||
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</OptionContext>
|
</OptionContext>
|
||||||
</FocusContext>
|
</FocusContext>
|
||||||
|
|
|
||||||
|
|
@ -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,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>
|
||||||
|
|
|
||||||
|
|
@ -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" />
|
||||||
|
|
|
||||||
|
|
@ -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,24 +142,31 @@ 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 })}
|
||||||
"size-3 bg-base-content drop-shadow-lg drop-shadow-base-300/40": focused
|
className={twMerge("cursor-pointer rounded-full size-2 bg-base-content/40 transition-all", classNames({
|
||||||
}))}></button>;
|
"size-3 bg-base-content drop-shadow-lg drop-shadow-base-300/40": focused
|
||||||
|
}))}></button>;
|
||||||
})}</div>
|
})}</div>
|
||||||
</FocusContext>
|
</FocusContext>
|
||||||
</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">
|
||||||
{!!data && <Screenshots screenshots={data.paths_screenshots} />}
|
<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>
|
||||||
<footer className="absolute left-0 bottom-0 w-full p-2 flex items-center justify-between z-10">
|
{!!data && <Screenshots screenshots={data.paths_screenshots} />}
|
||||||
<div className="flex gap-2 text-sm">
|
<footer className="absolute left-0 bottom-0 w-full p-2 flex items-center justify-between z-10">
|
||||||
</div>
|
<div className="flex gap-2 text-sm">
|
||||||
<Shortcuts shortcuts={shortcuts} />
|
</div>
|
||||||
</footer>
|
<Shortcuts shortcuts={shortcuts} />
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
</FocusContext>
|
</FocusContext>
|
||||||
</div>
|
</div>
|
||||||
</AnimatedBackground>
|
</AnimatedBackground>
|
||||||
|
|
|
||||||
|
|
@ -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">
|
|
||||||
<HomeList
|
|
||||||
selectedFilter={filter}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<MainMenu />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<footer className={twMerge("md:relative px-2 md:pb-2 flex items-center justify-between h-12",
|
<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">
|
||||||
"sm:absolute bottom-0 left-0 right-0"
|
<HeaderStatusBar buttons={headerButtons} />
|
||||||
|
</div>
|
||||||
|
<div className="col-span-3 min-h-0 landscape:flex landscape:items-center-safe">
|
||||||
|
<HomeList
|
||||||
|
selectedFilter={filter}
|
||||||
|
/>
|
||||||
|
</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 />
|
||||||
|
</div>
|
||||||
|
<footer className={twMerge(
|
||||||
|
"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",
|
||||||
)}>
|
)}>
|
||||||
<div className="flex gap-2 text-sm">
|
|
||||||
</div>
|
|
||||||
<Shortcuts shortcuts={shortcuts} />
|
<Shortcuts shortcuts={shortcuts} />
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
</FocusContext.Provider>
|
</FocusContext.Provider>
|
||||||
</AnimatedBackground>
|
</AnimatedBackground>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -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>}
|
||||||
|
|
|
||||||
|
|
@ -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>;
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
@ -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);
|
||||||
|
|
|
||||||
|
|
@ -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);
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
};
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue