toby/svelte-sharg
Archived
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Better settings

Browse source
This commit is contained in:
Tobias Berger 2021-09-30 11:10:48 +02:00
parent 7b4be2f1e2
commit 126f918082
7 changed files with 224 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/App.svelte
View file

@ -37,12 +37,18 @@
root = document.documentElement;
SharkGame.Settings.subscribe((settings) => {
root.classList.toggle("no-theme", !settings.enableThemes.current);
settings.theme.options.forEach((theme) => {
root.classList.toggle(theme, theme === settings.theme.current);
root.classList.toggle(
"no-theme",
!settings.appearance.enableThemes.current
);
settings.appearance.theme.options.forEach((theme) => {
root.classList.toggle(
theme,
theme === settings.appearance.theme.current
);
});
if (settings.updateCheck.current && updateInterval === undefined) {
if (settings.other.updateCheck.current && updateInterval === undefined) {
updateInterval = setInterval(async () => {
if (
CURRENT_HASH !== undefined &&
@ -52,7 +58,7 @@
}
}, 6 * 60 * 1000);
} else if (
!settings.updateCheck.current &&
!settings.other.updateCheck.current &&
updateInterval !== undefined
) {
clearInterval(updateInterval);

5
src/components/Modals/BaseModal.svelte
View file

@ -53,6 +53,11 @@
padding: 16px;
background: var(--color-darker);
pointer-events: auto;
max-width: 80%;
max-height: 80%;
overflow-y: auto;
}
}
</style>

103
src/components/Modals/SettingsModal.svelte
View file

@ -1,75 +1,82 @@
<script lang="ts">
import type { Writable } from "svelte/store";
import type { Settings } from "../../shark/Settings";
import BaseModal from "./BaseModal.svelte";
export let isOpen: boolean;
type SettingsUnkownOptions = typeof Settings extends Writable<infer X>
? Writable<
Record<
keyof X,
Omit<X[keyof X], "options" | "current"> & {
current: unknown;
options: readonly unknown[];
}
>
>
: never;
export let settings: typeof Settings;
$: usableSettings = settings as SettingsUnkownOptions;
</script>
<BaseModal {isOpen}>
<table id="settings-modal">
<colgroup>
<col style="text-align: left;" />
<col />
</colgroup>
<tbody>
{#each Object.entries($usableSettings) as [settingName, setting] (settingName)}
<tr>
<td>
{setting.name}<br />
<span class="setting-description">({setting.description}) </span>
</td>
{#each setting.options as option}
<td
><button
<div id="settings-modal">
{#each Object.entries($settings) as [categoryName, categorySettings]}
<h4>{categoryName.toUpperCase()}</h4>
<div class="settings-category" id={`settings-category-${categoryName}`}>
{#each Object.entries(categorySettings) as [settingId, setting] (settingId)}
<div
class="settings-row"
id={`settings-row-${categoryName}-${settingId}`}
>
<div
class="settings-description"
id={`settings-description-${categoryName}-${settingId}`}
>
{setting.name}<br />
<span class="settings-small-description"
>({setting.description})</span
>
</div>
{#each setting.options as option}<button
disabled={setting.current === option}
on:click={() => {
setting.current = option;
}}>{option}</button
></td
>
{/each}
</tr>
{/each}</tbody
>
</table>
>
{/each}
</div>
{/each}
</div>
{/each}
</div>
</BaseModal>
<style lang="scss">
#settings-modal {
display: flex;
flex-direction: column;
max-width: 100%;
max-height: 100%;
> tbody > tr {
> td:nth-child(1) {
text-align: left;
user-select: none;
overflow-y: scroll;
overflow-wrap: break-word;
> .setting-description {
color: var(--color-lighter);
font-size: 80%;
> .settings-category {
width: auto;
display: flex;
flex-direction: column;
> .settings-row {
display: inline-flex;
flex-direction: row;
align-items: center;
> .settings-description {
text-align: left;
width: 20em;
> .settings-small-description {
color: var(--color-lighter);
font-size: 80%;
}
}
> button {
font-size: 1em;
width: 7em;
height: 2em;
}
}
> td > button {
font-size: 1em;
width: 6.5em;
height: 2em;
}
}
}

4
src/components/Wrapper.svelte
View file

@ -21,7 +21,7 @@
let logLength: number;
game.Settings.subscribe((settings) => {
logLength = settings.logLength.current;
logLength = settings.layout.logLength.current;
});
</script>
@ -81,7 +81,7 @@
padding: 0;
// Subtract footer and header size (and footer padding)
height: calc(100% - 2em - 2em - 2px);
height: calc(100% - 2em - 2em - 4px);
overflow-y: hidden;

2
src/shark/Log.ts
View file

@ -10,7 +10,7 @@ export class Log extends StaticClass {
static init(): void {
Settings.subscribe((settings) => {
Log.#maxLogLength = Math.max(...settings.logLength.options);
Log.#maxLogLength = Math.max(...settings.layout.logLength.options);
})();
}

183
src/shark/Settings.ts
View file

@ -3,45 +3,154 @@
import { writable } from "svelte/store";
export const Settings = writable({
logLength: {
current: 30,
defaultValue: 30 as const,
name: "Max Log Messages" as const,
description: "Max number of messages kept in the log." as const,
category: "LAYOUT" as const,
options: [5, 10, 15, 20, 30, 60] as const,
layout: {
logLength: {
current: 30,
defaultValue: 30 as const,
name: "Log Messages" as const,
description: "The number of messages shown in the log" as const,
options: [5, 10, 15, 20, 30, 60] as const,
},
},
enableThemes: {
current: true,
defaultValue: true as const,
name: "Enable Planet-dependent Styles" as const,
description: "Should page colors change for different planets?" as const,
options: [true, false] as const,
category: "APPEARANCE" as const,
appearance: {
enableThemes: {
current: true,
defaultValue: true as const,
name: "Enable Planet-dependent Styles" as const,
description:
"Whether page colors should change for different planets" as const,
options: [true, false] as const,
},
theme: {
current: "marine",
defaultValue: "marine" as const,
name: "Currently enabled theme" as const,
description:
"Only applied if planet-dependent styles are enabled" as const,
options: [
"abandoned",
"chaotic",
"frigid",
"haven",
"marine",
"shrouded",
"tempestuous",
"violent",
],
},
},
theme: {
current: "marine",
defaultValue: "marine" as const,
name: "Currently enabled theme" as const,
description: "Changes the colors of the game" as const,
options: [
"abandoned",
"chaotic",
"frigid",
"haven",
"marine",
"shrouded",
"tempestuous",
"violent",
],
category: "APPEARANCE" as const,
other: {
updateCheck: {
current: true,
defaultValue: true as const,
name: "Check for updates" as const,
description: "Whether to notify you of new updates" as const,
options: [true, false] as const,
},
},
updateCheck: {
current: true,
defaultValue: true as const,
name: "Check for updates" as const,
description: "Whether to notify you of new updates." as const,
category: "OTHER" as const,
options: [true, false] as const,
// To test scrolling of the settings modal (gonna use them to test saving later, too)
nil: {
nil1: {
defaultValue: true as const,
name: "placeholder" as const,
description: "placeholder." as const,
options: [true, false] as const,
},
nil2: {
defaultValue: true as const,
name: "placeholder" as const,
description: "placeholder." as const,
options: [true, false] as const,
},
nil3: {
defaultValue: true as const,
name: "placeholder" as const,
description: "placeholder." as const,
options: [true, false] as const,
},
nil4: {
defaultValue: true as const,
name: "placeholder" as const,
description: "placeholder." as const,
options: [true, false] as const,
},
nil5: {
defaultValue: true as const,
name: "placeholder" as const,
description: "placeholder." as const,
options: [true, false] as const,
},
nil6: {
defaultValue: true as const,
name: "placeholder" as const,
description: "placeholder." as const,
options: [true, false] as const,
},
nil7: {
defaultValue: true as const,
name: "placeholder" as const,
description: "placeholder." as const,
options: [true, false] as const,
},
nil8: {
defaultValue: true as const,
name: "placeholder" as const,
description: "placeholder." as const,
options: [true, false] as const,
},
nil9: {
defaultValue: true as const,
name: "placeholder" as const,
description: "placeholder." as const,
options: [true, false] as const,
},
nil10: {
defaultValue: true as const,
name: "placeholder" as const,
description: "placeholder." as const,
options: [true, false] as const,
},
nil11: {
defaultValue: true as const,
name: "placeholder" as const,
description: "placeholder." as const,
options: [true, false] as const,
},
nil12: {
defaultValue: true as const,
name: "placeholder" as const,
description: "placeholder." as const,
options: [true, false] as const,
},
nil13: {
defaultValue: true as const,
name: "placeholder" as const,
description: "placeholder." as const,
options: [true, false] as const,
},
nil14: {
defaultValue: true as const,
name: "placeholder" as const,
description: "placeholder." as const,
options: [true, false] as const,
},
nil15: {
defaultValue: true as const,
name: "placeholder" as const,
description: "placeholder." as const,
options: [true, false] as const,
},
nil16: {
defaultValue: true as const,
name: "placeholder" as const,
description: "placeholder." as const,
options: [true, false] as const,
},
nil17: {
defaultValue: true as const,
name: "placeholder" as const,
description: "placeholder." as const,
options: [true, false] as const,
},
},
});

6
src/shark/SharkGame.ts
View file

@ -62,8 +62,10 @@ export class SharkGame extends StaticClass {
static init(): void {
Settings.update((settings) => {
for (const setting of Object.values(settings)) {
setting.current = setting.defaultValue;
for (const settingsCategory of Object.values(settings)) {
for (const setting of Object.values(settingsCategory)) {
setting.current = setting.defaultValue;
}
}
return settings;
});