- ([]);
+ 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
)
);
}
diff --git a/src/shark/Settings.ts b/src/shark/Settings.ts
index 6826d74..5a183ea 100644
--- a/src/shark/Settings.ts
+++ b/src/shark/Settings.ts
@@ -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");
- },
- },
-};
+});
diff --git a/src/shark/SharkGame.ts b/src/shark/SharkGame.ts
index e611022..cb6f4b3 100644
--- a/src/shark/SharkGame.ts
+++ b/src/shark/SharkGame.ts
@@ -61,9 +61,13 @@ export class SharkGame extends StaticClass {
static readonly Tabs = Tabs;
static init(): void {
- for (const setting of Object.values(Settings)) {
- setting.current = setting.defaultValue;
- }
+ Settings.update((settings) => {
+ for (const setting of Object.values(settings)) {
+ setting.current = setting.defaultValue;
+ }
+ return settings;
+ });
+ Log.init();
SharkGame.title =
SharkGame.#GAME_NAMES[
diff --git a/src/styles/shark-styles.scss b/src/styles/shark-styles.scss
index 3427e5b..31c34e0 100644
--- a/src/styles/shark-styles.scss
+++ b/src/styles/shark-styles.scss
@@ -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;
+}
diff --git a/src/styles/themes.scss b/src/styles/themes.scss
index b01b507..5cbc374 100644
--- a/src/styles/themes.scss
+++ b/src/styles/themes.scss
@@ -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};
diff --git a/yarn.lock b/yarn.lock
index 8686201..0e5f54f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -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"
+
diff --git a/src/shark/Log.ts b/src/shark/Log.ts
index 9c694b3..f07035c 100644
--- a/src/shark/Log.ts
+++ b/src/shark/Log.ts
@@ -6,6 +6,13 @@ import { StaticClass } from "./StaticClass";
export class Log extends StaticClass {
static messages = writable {
ev.cancelBubble = true;
@@ -42,26 +51,22 @@
}}
>