gamezonline/Radius
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Basic stuff

Browse Source
This commit is contained in:
MotorTruck1221
2025-03-18 00:52:29 -06:00
parent 19e6beaec4
commit a57072d6f8
8 changed files with 145 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/SettingsLoader.astro
+4
View File
@@ -0,0 +1,4 @@
<script>
import { Settings } from "@utils/settings.ts";
const settings = new Settings();
</script>
src/layouts/Layout.astro
+7 -2
View File
@@ -1,17 +1,22 @@
--- ---
import "@styles/themes/default.css";
import "@styles/global.css"; import "@styles/global.css";
import { ClientRouter } from "astro:transitions";
import SettingsLoader from "@components/SettingsLoader.astro";
--- ---
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<SettingsLoader transition:persist />
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<title>Radius</title> <title>Radius</title>
<ClientRouter fallback="animate" />
</head> </head>
<body class="h-full"> <body class="h-full w-full bg-(--background)">
<div class="h-full w-full fixed"> <div class="h-full w-full fixed bg-(--background)">
<slot /> <slot />
</div> </div>
</body> </body>
src/styles/themes/bluelight.css
+21
View File
@@ -0,0 +1,21 @@
.bluelight {
--background: hsl(230 8% 85%) !important;
--foreground: hsl(229 26% 28%) !important;
--muted: hsl(230 12% 81%) !important;
--muted-foreground: hsl(230 12% 21%) !important;
--popover: hsl(230 8% 82%) !important;
--popover-foreground: hsl(229 26% 18%) !important;
--card: hsl(230 8% 83%) !important;
--card-foreground: hsl(229 26% 23%) !important;
--border: hsl(0 0% 80%) !important;
--input: hsl(0 0% 77%) !important;
--primary: hsl(223 42% 57%) !important;
--primary-foreground: hsl(0 0% 100%) !important;
--secondary: hsl(223 30% 75%) !important;
--secondary-foreground: hsl(223 30% 15%) !important;
--accent: hsl(230 8% 70%) !important;
--accent-foreground: hsl(230 8% 10%) !important;
--destructive: hsl(2 82% 30%) !important;
--destructive-foreground: hsl(2 82% 90%) !important;
--ring: hsl(223 42% 57%) !important;
}
src/styles/themes/cyberpunk.css
+21
View File
@@ -0,0 +1,21 @@
.cyberpunk {
--background: hsl(253 41% 19%) !important;
--foreground: hsl(157 100% 50%) !important;
--muted: hsl(253 12% 23%) !important;
--muted-foreground: hsl(253 12% 73%) !important;
--popover: hsl(253 41% 16%) !important;
--popover-foreground: hsl(157 100% 60%) !important;
--card: hsl(253 41% 17%) !important;
--card-foreground: hsl(157 100% 55%) !important;
--border: hsl(253 31% 24%) !important;
--input: hsl(253 31% 27%) !important;
--primary: hsl(167 100% 50%) !important;
--primary-foreground: hsl(167 100% 10%) !important;
--secondary: hsl(167 30% 25%) !important;
--secondary-foreground: hsl(167 30% 85%) !important;
--accent: hsl(253 41% 34%) !important;
--accent-foreground: hsl(254 41% 94%) !important;
--destructive: hsl(5 92% 45%) !important;
--destructive-foreground: hsl(0 0% 100%) !important;
--ring: hsl(167 100% 50%) !important;
}
src/styles/themes/default.css
+24
View File
@@ -0,0 +1,24 @@
@import "./bluelight.css";
@import "./cyberpunk.css";
:root {
--background: hsl(214 27.37% 7.55%);
--foreground: hsl(212 16% 82%);
--muted: hsl(214 12% 16%);
--muted-foreground: hsl(214 12% 66%);
--popover: hsl(214 27% 9%);
--popover-foreground: hsl(212 16% 92%);
--card: hsl(214 23.58% 9.03%);
--card-foreground: hsl(212 16% 87%);
--border: hsl(214 17% 17%);
--input: hsl(214 17% 20%);
--primary: hsl(194.72 85% 45%);
--primary-foreground: hsl(189 85% 5%);
--secondary: hsl(221.89 18.13% 22.46%);
--secondary-foreground: hsl(189 30% 85%);
--accent: hsl(221.89 18.13% 22.46%);
--accent-foreground: hsl(214 27% 87%);
--destructive: hsl(6 96% 59%);
--destructive-foreground: hsl(0 0% 100%);
--ring: hsl(215.09 100% 98.03%);
--radius: hsl(0.4rem);
}
src/utils/.gitkeep
View File
src/utils/settings.ts
+49
View File
@@ -0,0 +1,49 @@
import { StoreManager } from "./storage";
class Settings {
#storageManager: StoreManager<"radius||settings">;
static #instance = new Set();
static async getInstance() {
function *get() {
for (const instance of Settings.#instance.keys()) {
yield instance!;
}
}
const ready = (): Promise<boolean> => {
return new Promise((resolve) => {
const i = setInterval(() => {
if (Settings.#instance.size !== 0) {
clearInterval(i);
resolve(true);
}
}, 100);
})
}
await ready();
return get().next().value! as Settings;
}
theme(theme: string) {
this.#storageManager.setVal('theme', theme);
theme === 'default'
? document.documentElement.className = ''
: document.documentElement.className = theme;
}
async *#init() {
yield this.theme(this.#storageManager.getVal('theme'));
}
constructor() {
this.#storageManager = new StoreManager("radius||settings");
Settings.#instance.add(this);
(async() => {
for await (const _ of this.#init());
})();
}
}
export { Settings }
src/utils/storage.ts
+17
View File
@@ -0,0 +1,17 @@
class StoreManager<Prefix extends string> {
#prefix: string;
constructor(pref: Prefix) {
this.#prefix = pref;
}
getVal(key: string): string {
return localStorage.getItem(`${this.#prefix}||${key}`) as string;
}
setVal(key: string, val: string): void {
localStorage.setItem(`${this.#prefix}||${key}`, val);
}
removeVal(key: string): void {
localStorage.removeItem(`${this.#prefix}||${key}`);
}
}
export { StoreManager }