Modals, settings
This commit is contained in:
parent
a385305127
commit
7b4be2f1e2
12 changed files with 308 additions and 356 deletions
|
|
@ -46,6 +46,7 @@
|
|||
"sirv-cli": "^1.0.0",
|
||||
"svelte": "^3.0.0",
|
||||
"svelte-check": "^2.0.0",
|
||||
"svelte-modals": "^1.0.4",
|
||||
"svelte-preprocess": "^4.0.0",
|
||||
"tslib": "^2.0.0",
|
||||
"typescript": "^4.0.0"
|
||||
|
|
|
|||
|
|
@ -1,12 +1,81 @@
|
|||
<script lang="ts" context="module">
|
||||
async function getCurrentHash(): Promise<string> {
|
||||
const response = await fetch(
|
||||
"https://api.github.com/repos/Toby222/svelte-sharg/commits/main",
|
||||
{
|
||||
mode: "cors",
|
||||
}
|
||||
);
|
||||
if (response.status < 200 || response.status > 299) {
|
||||
throw new Error(response.statusText);
|
||||
} else {
|
||||
const result = (await response.json()).sha;
|
||||
return result;
|
||||
}
|
||||
}
|
||||
let CURRENT_HASH: string;
|
||||
getCurrentHash().then((hash) => (CURRENT_HASH = hash));
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import Footer from "./components/Footer.svelte";
|
||||
import Header from "./components/Header.svelte";
|
||||
import Wrapper from "./components/Wrapper.svelte";
|
||||
import { SharkGame } from "./shark/SharkGame";
|
||||
|
||||
import { Modals, closeModal } from "svelte-modals";
|
||||
import { onDestroy, onMount } from "svelte";
|
||||
import type { Unsubscriber } from "svelte/store";
|
||||
|
||||
SharkGame.init();
|
||||
|
||||
let root: HTMLElement;
|
||||
let unsubscribeSettings: Unsubscriber;
|
||||
let updateInterval: ReturnType<typeof setInterval> | undefined;
|
||||
|
||||
onMount(() => {
|
||||
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);
|
||||
});
|
||||
|
||||
if (settings.updateCheck.current && updateInterval === undefined) {
|
||||
updateInterval = setInterval(async () => {
|
||||
if (
|
||||
CURRENT_HASH !== undefined &&
|
||||
CURRENT_HASH !== (await getCurrentHash())
|
||||
) {
|
||||
console.log("Updoot");
|
||||
}
|
||||
}, 6 * 60 * 1000);
|
||||
} else if (
|
||||
!settings.updateCheck.current &&
|
||||
updateInterval !== undefined
|
||||
) {
|
||||
clearInterval(updateInterval);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
unsubscribeSettings();
|
||||
});
|
||||
|
||||
function handleKeyUp(event: KeyboardEvent) {
|
||||
if (event.key === "Escape") {
|
||||
closeModal();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<Header title={SharkGame.title} />
|
||||
<svelte:body on:keyup={handleKeyUp} />
|
||||
|
||||
<Modals>
|
||||
<div slot="backdrop" id="modal-backdrop" on:click={closeModal} />
|
||||
</Modals>
|
||||
<Header game={SharkGame} title={SharkGame.title} />
|
||||
<Wrapper game={SharkGame} />
|
||||
<Footer />
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
<script lang="ts">
|
||||
import { openModal } from "svelte-modals";
|
||||
import type { SharkGame } from "../shark/SharkGame";
|
||||
|
||||
import SettingsModal from "./Modals/SettingsModal.svelte";
|
||||
|
||||
export let title: string;
|
||||
export let game: typeof SharkGame;
|
||||
|
||||
const discordLink = "https://discord.gg/eYqApFkFPY";
|
||||
|
||||
|
|
@ -8,7 +14,7 @@
|
|||
console.log("save");
|
||||
},
|
||||
settings() {
|
||||
console.log("settings");
|
||||
openModal(SettingsModal, { settings: game.Settings }, { replace: true });
|
||||
},
|
||||
help() {
|
||||
console.log("help");
|
||||
|
|
|
|||
58
src/components/Modals/BaseModal.svelte
Normal file
58
src/components/Modals/BaseModal.svelte
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
<script lang="ts">
|
||||
import { closeModal } from "svelte-modals";
|
||||
|
||||
// provided by Modals
|
||||
export let isOpen: boolean;
|
||||
</script>
|
||||
|
||||
{#if isOpen}
|
||||
<div role="dialog" class="modal">
|
||||
<button class="close-modal" on:click={closeModal} />
|
||||
<div class="modal-content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
.modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1;
|
||||
|
||||
/* allow click-through to backdrop */
|
||||
pointer-events: none;
|
||||
|
||||
> .close-modal {
|
||||
position: fixed;
|
||||
top: 5em;
|
||||
right: 5em;
|
||||
height: 4em;
|
||||
width: 4em;
|
||||
|
||||
padding: 0;
|
||||
|
||||
pointer-events: auto;
|
||||
|
||||
&:before {
|
||||
content: "✕";
|
||||
font-size: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
> .modal-content {
|
||||
box-shadow: 0 0 5px 5px var(--color-darker);
|
||||
border-radius: 6px;
|
||||
padding: 16px;
|
||||
background: var(--color-darker);
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
76
src/components/Modals/SettingsModal.svelte
Normal file
76
src/components/Modals/SettingsModal.svelte
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
<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
|
||||
disabled={setting.current === option}
|
||||
on:click={() => {
|
||||
setting.current = option;
|
||||
}}>{option}</button
|
||||
></td
|
||||
>
|
||||
{/each}
|
||||
</tr>
|
||||
{/each}</tbody
|
||||
>
|
||||
</table>
|
||||
</BaseModal>
|
||||
|
||||
<style lang="scss">
|
||||
#settings-modal {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
> tbody > tr {
|
||||
> td:nth-child(1) {
|
||||
text-align: left;
|
||||
|
||||
> .setting-description {
|
||||
color: var(--color-lighter);
|
||||
font-size: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
> td > button {
|
||||
font-size: 1em;
|
||||
width: 6.5em;
|
||||
height: 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -6,7 +6,6 @@
|
|||
import TabSelector from "./TabSelector.svelte";
|
||||
|
||||
export let game: typeof SharkGame;
|
||||
$: Game = game;
|
||||
|
||||
let sidebarExpanded = false;
|
||||
|
||||
|
|
@ -14,19 +13,28 @@
|
|||
sidebarExpanded = to ?? !sidebarExpanded;
|
||||
}
|
||||
function handleAddMessage(event: CustomEvent<AddMessageEvent>) {
|
||||
Game.Log.addMessage(event.detail.message, event.detail.messageType);
|
||||
game.Log.addMessage(event.detail.message, event.detail.messageType);
|
||||
}
|
||||
function handleResetLog() {
|
||||
Game.Log.reset();
|
||||
game.Log.reset();
|
||||
}
|
||||
|
||||
let logLength: number;
|
||||
game.Settings.subscribe((settings) => {
|
||||
logLength = settings.logLength.current;
|
||||
});
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<div id="left-column" class={sidebarExpanded ? "expanded" : "collapsed"}>
|
||||
<ResourceTable bind:resources={Game.Resources.Resources} />
|
||||
<div
|
||||
id="left-column"
|
||||
class:expanded={sidebarExpanded}
|
||||
class:collapsed={!sidebarExpanded}
|
||||
>
|
||||
<ResourceTable resources={game.Resources.Resources} />
|
||||
<Log
|
||||
bind:logLength={Game.Settings.logLength.current}
|
||||
bind:messages={Game.Log.messages}
|
||||
{logLength}
|
||||
messages={game.Log.messages}
|
||||
on:addMessage={handleAddMessage}
|
||||
on:resetLog={handleResetLog}
|
||||
/>
|
||||
|
|
@ -35,6 +43,7 @@
|
|||
<div id="right-top">
|
||||
<div
|
||||
role="button"
|
||||
name="sidebar toggle"
|
||||
id="sidebar-toggle"
|
||||
on:click={(ev) => {
|
||||
ev.cancelBubble = true;
|
||||
|
|
@ -42,26 +51,22 @@
|
|||
}}
|
||||
>
|
||||
<svg width="1em" height="1em">
|
||||
<line id="top" x1="0" y1="1px" x2="1em" y2="1px" />
|
||||
<line id="middle" x1="0" y1="0.5em" x2="1em" y2="0.5em" />
|
||||
<line
|
||||
id="bottom"
|
||||
x1="0"
|
||||
y1="calc(1em - 1px)"
|
||||
x2="1em"
|
||||
y2="calc(1em - 1px)"
|
||||
/>
|
||||
<line x1="0" y1="0" x2="1em" y2="0" />
|
||||
<line x1="0" y1="0.5em" x2="1em" y2="0.5em" />
|
||||
<line x1="0" y1="1em" x2="1em" y2="1em" />
|
||||
</svg>
|
||||
</div>
|
||||
<TabSelector
|
||||
bind:tabs={Game.Tabs.AllTabs}
|
||||
bind:selectedTab={Game.Tabs.currentTab}
|
||||
tabs={game.Tabs.AllTabs}
|
||||
bind:selectedTab={game.Tabs.currentTab}
|
||||
/>
|
||||
</div>
|
||||
<div id="tab-content">
|
||||
<svelte:component
|
||||
this={Game.Tabs.currentTab}
|
||||
this={game.Tabs.currentTab}
|
||||
on:addMessage={handleAddMessage}
|
||||
on:openModal
|
||||
on:closeModal
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,13 @@ import { StaticClass } from "./StaticClass";
|
|||
|
||||
export class Log extends StaticClass {
|
||||
static messages = writable<Message[]>([]);
|
||||
static #maxLogLength: number;
|
||||
|
||||
static init(): void {
|
||||
Settings.subscribe((settings) => {
|
||||
Log.#maxLogLength = Math.max(...settings.logLength.options);
|
||||
})();
|
||||
}
|
||||
|
||||
static addMessage(
|
||||
message: string,
|
||||
|
|
@ -13,7 +20,7 @@ export class Log extends StaticClass {
|
|||
): void {
|
||||
this.messages.update((oldMessages) =>
|
||||
[...oldMessages, new Message(message, messageType)].slice(
|
||||
-Math.max(...Settings.logLength.options)
|
||||
-Log.#maxLogLength
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,342 +1,47 @@
|
|||
// How to make current just be undefined here, but keep the type of defaultValue?
|
||||
|
||||
export const Settings = {
|
||||
// Internal / No category
|
||||
buyAmount: {
|
||||
current: 1,
|
||||
defaultValue: 1 as const,
|
||||
options: [1, 10, 100, -3, -2, -1, "custom"] as const,
|
||||
},
|
||||
|
||||
grottoMode: {
|
||||
current: "simple",
|
||||
defaultValue: "simple" as const,
|
||||
options: ["simple", "advanced"] as const,
|
||||
},
|
||||
|
||||
showPercentages: {
|
||||
current: "absolute",
|
||||
defaultValue: "absolute" as const,
|
||||
options: ["absolute", "percentage"] as const,
|
||||
},
|
||||
|
||||
// PERFORMANCE
|
||||
|
||||
framerate: {
|
||||
current: 20,
|
||||
defaultValue: 20 as const,
|
||||
name: "Framerate/TPS" as const,
|
||||
desc: "How fast to update the game." as const,
|
||||
category: "PERFORMANCE" as const,
|
||||
options: [1, 2, 5, 10, 20, 30] as const,
|
||||
onChange(): void {
|
||||
// main.applyFramerate();
|
||||
console.warn("TODO");
|
||||
},
|
||||
},
|
||||
|
||||
showAnimations: {
|
||||
current: true,
|
||||
defaultValue: true as const,
|
||||
name: "Show Animations" as const,
|
||||
desc: "Whether to show animated transitions." as const,
|
||||
category: "PERFORMANCE" as const,
|
||||
options: [true, false] as const, // might remove this option? could be a pain to continue supporting it
|
||||
},
|
||||
|
||||
// LAYOUT
|
||||
|
||||
minimizedTopbar: {
|
||||
current: true,
|
||||
defaultValue: true as const,
|
||||
name: "Minimized Title Bar" as const,
|
||||
desc: "Whether to minimize the title bar at the top." as const,
|
||||
category: "LAYOUT" as const,
|
||||
options: [true, false] as const,
|
||||
onChange(): void {
|
||||
// if (SharkGame.Settings.current["minimizedTopbar"]) {
|
||||
// document.querySelector("body").classList.add("top-bar");
|
||||
// $("#wrapper").removeClass("notMinimized");
|
||||
// } else {
|
||||
// document.querySelector("body").classList.remove("top-bar");
|
||||
// $("#wrapper").addClass("notMinimized");
|
||||
// }
|
||||
console.warn("TODO");
|
||||
},
|
||||
},
|
||||
|
||||
groupResources: {
|
||||
current: true,
|
||||
defaultValue: true as const,
|
||||
name: "Group Resources" as const,
|
||||
desc: "Whether to categorize resources in the table." as const,
|
||||
category: "LAYOUT" as const,
|
||||
options: [true, false] as const,
|
||||
onChange(): void {
|
||||
// res.rebuildTable = true;
|
||||
console.warn("TODO");
|
||||
},
|
||||
},
|
||||
|
||||
smallTable: {
|
||||
current: false,
|
||||
defaultValue: false as const,
|
||||
name: "Smaller Table" as const,
|
||||
desc: "Whether to make the stuff table smaller." as const,
|
||||
category: "LAYOUT" as const,
|
||||
options: [true, false] as const,
|
||||
onChange(): void {
|
||||
// res.rebuildTable = true;
|
||||
console.warn("TODO");
|
||||
},
|
||||
},
|
||||
|
||||
buttonDisplayType: {
|
||||
current: "pile",
|
||||
defaultValue: "pile" as const,
|
||||
name: "Home Sea Button Display" as const,
|
||||
desc: "How to arrange buttons." as const,
|
||||
category: "LAYOUT" as const,
|
||||
options: ["list", "pile"] as const,
|
||||
onChange(): void {
|
||||
// SharkGame.TabHandler.changeTab(SharkGame.Tabs.current);
|
||||
console.warn("TODO");
|
||||
},
|
||||
},
|
||||
import { writable } from "svelte/store";
|
||||
|
||||
export const Settings = writable({
|
||||
logLength: {
|
||||
current: 30,
|
||||
defaultValue: 30 as const,
|
||||
name: "Max Log Messages" as const,
|
||||
desc: "Max number of messages kept in the log." 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,
|
||||
onChange(): void {
|
||||
// log.correctLogLength();
|
||||
},
|
||||
},
|
||||
|
||||
sidebarWidth: {
|
||||
current: "30%",
|
||||
defaultValue: "30%" as const,
|
||||
name: "Sidebar Width" as const,
|
||||
desc: "How much screen space the sidebar should take." as const,
|
||||
category: "LAYOUT" as const,
|
||||
options: ["25%", "30%", "35%"] as const,
|
||||
onChange(): void {
|
||||
// const sidebar = $("#sidebar");
|
||||
// if (SharkGame.Settings.current.showAnimations) {
|
||||
// sidebar.animate(
|
||||
// { width: SharkGame.Settings.current.sidebarWidth },
|
||||
// 100
|
||||
// );
|
||||
// } else {
|
||||
// sidebar.width(SharkGame.Settings.current.sidebarWidth);
|
||||
// }
|
||||
console.warn("TODO");
|
||||
},
|
||||
},
|
||||
|
||||
// APPEARANCE
|
||||
|
||||
colorCosts: {
|
||||
current: "color",
|
||||
defaultValue: "color" as const,
|
||||
name: "Color Resource Names" as const,
|
||||
desc: "How to color names of resources." as const,
|
||||
category: "APPEARANCE" as const,
|
||||
options: ["color", "bright", "none"] as const,
|
||||
onChange(): void {
|
||||
// res.rebuildTable = true;
|
||||
// stats.recreateIncomeTable = true;
|
||||
console.warn("TODO");
|
||||
},
|
||||
},
|
||||
|
||||
boldCosts: {
|
||||
current: true,
|
||||
defaultValue: true as const,
|
||||
name: "Bold Resource Names" as const,
|
||||
desc: "Should resource names be bolded?" as const,
|
||||
options: [true, false] as const,
|
||||
category: "APPEARANCE" as const,
|
||||
onChange(): void {
|
||||
// res.rebuildTable = true;
|
||||
// stats.recreateIncomeTable = true;
|
||||
console.warn("TODO");
|
||||
},
|
||||
},
|
||||
|
||||
alwaysSingularTooltip: {
|
||||
current: false,
|
||||
defaultValue: false as const,
|
||||
name: "Tooltip Always Singular" as const,
|
||||
desc: "Should the tooltip only show what one of each thing produces?" as const,
|
||||
category: "APPEARANCE" as const,
|
||||
options: [true, false] as const,
|
||||
},
|
||||
|
||||
tooltipQuantityReminders: {
|
||||
current: true,
|
||||
defaultValue: true as const,
|
||||
name: "Tooltip Amount Reminder" as const,
|
||||
desc: "Should tooltips tell you much you own of stuff?" as const,
|
||||
category: "APPEARANCE" as const,
|
||||
options: [true, false] as const,
|
||||
},
|
||||
|
||||
enableThemes: {
|
||||
current: true,
|
||||
defaultValue: true as const,
|
||||
name: "Enable Planet-dependent Styles" as const,
|
||||
desc: "Should page colors change for different planets?" as const,
|
||||
description: "Should page colors change for different planets?" as const,
|
||||
options: [true, false] as const,
|
||||
category: "APPEARANCE" as const,
|
||||
onChange(): void {
|
||||
// if (SharkGame.Settings.enableThemes.current) {
|
||||
// document.querySelector("body").classList.remove("no-theme");
|
||||
// } else {
|
||||
// document.querySelector("body").classList.add("no-theme");
|
||||
// }
|
||||
console.warn("TODO");
|
||||
},
|
||||
},
|
||||
|
||||
showIcons: {
|
||||
current: true,
|
||||
defaultValue: true as const,
|
||||
name: "Show Action Button icons" as const,
|
||||
desc: "Show button icons?" as const,
|
||||
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,
|
||||
options: [true, false] as const,
|
||||
},
|
||||
|
||||
showTabImages: {
|
||||
current: true,
|
||||
defaultValue: true as const,
|
||||
name: "Show Tab Header Images" as const,
|
||||
desc: "Show art?" as const,
|
||||
category: "APPEARANCE" as const,
|
||||
options: [true, false] as const,
|
||||
onChange(): void {
|
||||
// SharkGame.TabHandler.changeTab(SharkGame.Tabs.current);
|
||||
console.warn("TODO");
|
||||
},
|
||||
},
|
||||
|
||||
// ACCESSIBILITY
|
||||
|
||||
doAspectTable: {
|
||||
current: "tree",
|
||||
defaultValue: "tree" as const,
|
||||
name: "Aspect Table or Tree" as const,
|
||||
desc: "Draw a visual aspect tree or a more accessible aspect table?" as const,
|
||||
category: "ACCESSIBILITY" as const,
|
||||
options: ["tree", "table"] as const,
|
||||
},
|
||||
|
||||
verboseTokenDescriptions: {
|
||||
current: false,
|
||||
defaultValue: false as const,
|
||||
name: "Verbose Token" as const,
|
||||
desc: "Should tokens display text saying where they are?" as const,
|
||||
category: "ACCESSIBILITY" as const,
|
||||
options: [true, false] as const,
|
||||
onChange(): void {
|
||||
// res.tokens.updateTokenDescriptions();
|
||||
console.warn("TODO");
|
||||
},
|
||||
},
|
||||
|
||||
minuteHandEffects: {
|
||||
current: true,
|
||||
defaultValue: true as const,
|
||||
name: "Minute Hand Special Effects" as const,
|
||||
desc: "Should the minute hand glow a ton?" as const,
|
||||
category: "ACCESSIBILITY" as const,
|
||||
options: [true, false] as const,
|
||||
onChange(): void {
|
||||
// res.minuteHand.updatePowers();
|
||||
console.warn("TODO");
|
||||
},
|
||||
},
|
||||
|
||||
// OTHER
|
||||
|
||||
idleEnabled: {
|
||||
current: true,
|
||||
defaultValue: true as const,
|
||||
name: "Stored Offline Progress" as const,
|
||||
desc: "Should the game store idle progress for later use? (otherwise, it will not go idle and will have real offline progress)" as const,
|
||||
category: "OTHER" as const,
|
||||
options: [true, false] as const,
|
||||
onChange(): void {
|
||||
// res.minuteHand.init();
|
||||
console.warn("TODO");
|
||||
},
|
||||
},
|
||||
|
||||
showTooltips: {
|
||||
current: true,
|
||||
defaultValue: true as const,
|
||||
name: "Tooltips" as const,
|
||||
desc: "Whether to show informational tooltips when hovering over certain stuff." as const,
|
||||
category: "OTHER" as const,
|
||||
options: [true, false] as const,
|
||||
},
|
||||
|
||||
updateCheck: {
|
||||
current: true,
|
||||
defaultValue: true as const,
|
||||
name: "Check for updates" as const,
|
||||
desc: "Whether to notify you of new updates." as const,
|
||||
category: "OTHER" as const,
|
||||
options: [true, false] as const,
|
||||
onChange(): void {
|
||||
// clearInterval(SharkGame.Main.checkForUpdateHandler);
|
||||
// if (SharkGame.Settings.current.updateCheck) {
|
||||
// SharkGame.Main.checkForUpdateHandler = setInterval(
|
||||
// main.checkForUpdates,
|
||||
// 300000
|
||||
// );
|
||||
// }
|
||||
console.warn("TODO");
|
||||
},
|
||||
},
|
||||
|
||||
offlineModeActive: {
|
||||
current: true,
|
||||
defaultValue: true as const,
|
||||
name: "Offline Progress" as const,
|
||||
desc: "Should there be ANY offline progress?" as const,
|
||||
description: "Whether to notify you of new updates." as const,
|
||||
category: "OTHER" as const,
|
||||
options: [true, false] as const,
|
||||
},
|
||||
|
||||
// SAVES (Needs to come last due to hard-coded import/export/wipe buttons at the bottom)
|
||||
|
||||
autosaveFrequency: {
|
||||
// times given in minutes
|
||||
current: 5,
|
||||
defaultValue: 5 as const,
|
||||
name: "Autosave Frequency" as const,
|
||||
desc: "Number of minutes between autosaves." as const,
|
||||
category: "SAVES" as const,
|
||||
options: [1, 2, 5, 10, 30] as const,
|
||||
onChange(): void {
|
||||
// clearInterval(main.autosaveHandler);
|
||||
// main.autosaveHandler = setInterval(
|
||||
// main.autosave,
|
||||
// SharkGame.Settings.current.autosaveFrequency * 60000
|
||||
// );
|
||||
// log.addMessage(
|
||||
// "Now autosaving every " +
|
||||
// SharkGame.Settings.current.autosaveFrequency +
|
||||
// " minute" +
|
||||
// sharktext.plural(SharkGame.Settings.current.autosaveFrequency) +
|
||||
// "."
|
||||
// );
|
||||
console.warn("TODO");
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -61,9 +61,13 @@ export class SharkGame extends StaticClass {
|
|||
static readonly Tabs = Tabs;
|
||||
|
||||
static init(): void {
|
||||
for (const setting of Object.values(Settings)) {
|
||||
Settings.update((settings) => {
|
||||
for (const setting of Object.values(settings)) {
|
||||
setting.current = setting.defaultValue;
|
||||
}
|
||||
return settings;
|
||||
});
|
||||
Log.init();
|
||||
|
||||
SharkGame.title =
|
||||
SharkGame.#GAME_NAMES[
|
||||
|
|
|
|||
|
|
@ -35,13 +35,29 @@ button {
|
|||
&:hover {
|
||||
box-shadow: 0 0 2px 2px var(--color-lighter);
|
||||
}
|
||||
&:active {
|
||||
&:active,
|
||||
&:disabled {
|
||||
background-color: var(--color-dark);
|
||||
color: var(--color-light);
|
||||
box-shadow: 0 3px 7px 7px var(--color-darker) inset;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
pointer-events: none;
|
||||
border-color: var(--color-med);
|
||||
}
|
||||
|
||||
&:not(:disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
#modal-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,11 +27,11 @@ $color-dark-haven: #053247;
|
|||
$color-darker-haven: #001d2b;
|
||||
|
||||
// marine theme (default)
|
||||
$color-lighter: #8e9fc0;
|
||||
$color-light: #536892;
|
||||
$color-med: #2e4372;
|
||||
$color-dark: #152a55;
|
||||
$color-darker: #061639;
|
||||
$color-lighter-marine: #8e9fc0;
|
||||
$color-light-marine: #536892;
|
||||
$color-med-marine: #2e4372;
|
||||
$color-dark-marine: #152a55;
|
||||
$color-darker-marine: #061639;
|
||||
|
||||
//shrouded theme
|
||||
$color-lighter-shrouded: #22bec3;
|
||||
|
|
@ -77,19 +77,19 @@ $color-discovery-dark4: darken(#ace3d1, 65%);
|
|||
$color-text: white;
|
||||
|
||||
:root {
|
||||
--color-lighter: #{$color-lighter};
|
||||
--color-light: #{$color-light};
|
||||
--color-med: #{$color-med};
|
||||
--color-dark: #{$color-dark};
|
||||
--color-darker: #{$color-darker};
|
||||
--color-lighter: #{$color-lighter-marine};
|
||||
--color-light: #{$color-light-marine};
|
||||
--color-med: #{$color-med-marine};
|
||||
--color-dark: #{$color-dark-marine};
|
||||
--color-darker: #{$color-darker-marine};
|
||||
--color-title: #{rgba(
|
||||
red($color-med),
|
||||
green($color-med),
|
||||
blue($color-med),
|
||||
red($color-med-marine),
|
||||
green($color-med-marine),
|
||||
blue($color-med-marine),
|
||||
0.2
|
||||
)};
|
||||
|
||||
:not(.no-theme) {
|
||||
&:not(.no-theme) {
|
||||
&.abandoned {
|
||||
--color-lighter: #{$color-lighter-abandoned};
|
||||
--color-light: #{$color-light-abandoned};
|
||||
|
|
|
|||
|
|
@ -1688,6 +1688,11 @@ svelte-check@^2.0.0:
|
|||
svelte-preprocess "^4.0.0"
|
||||
typescript "*"
|
||||
|
||||
svelte-modals@^1.0.4:
|
||||
version "1.0.4"
|
||||
resolved "https://registry.yarnpkg.com/svelte-modals/-/svelte-modals-1.0.4.tgz#d1e7b2301f274417e03897ea6b76e3ddfb4be4fc"
|
||||
integrity sha512-nwYEF7PlxX4uqKU1zRCi+fcECxlEOEFGNGcazdyGsFK0LMngrxwqq3q77xBabGNU7DXYxGyDXq/9YHzyHyCAFg==
|
||||
|
||||
svelte-preprocess@^4.0.0:
|
||||
version "4.9.5"
|
||||
resolved "https://registry.yarnpkg.com/svelte-preprocess/-/svelte-preprocess-4.9.5.tgz#e11bdf3fcdacbd90188cdf29a7371030991f9eba"
|
||||
|
|
|
|||
Reference in a new issue