Add Log and placeholder for resource table

This commit is contained in:
Tobias Berger 2021-09-27 11:12:31 +02:00
parent 9dae6f982e
commit 66ea2388e9
9 changed files with 463 additions and 6 deletions

View file

@ -2,7 +2,7 @@
import Footer from "./components/Footer.svelte";
import Header from "./components/Header.svelte";
import Wrapper from "./components/Wrapper.svelte";
import { SharkGame } from "./shark";
import { SharkGame } from "./shark/SharkGame";
SharkGame.init();
</script>

View file

@ -1,5 +1,5 @@
<script lang="ts">
import { SharkGame } from "../shark";
import { SharkGame } from "../shark/SharkGame";
const discordLink = "https://discord.gg/eYqApFkFPY";
@ -7,8 +7,8 @@
save() {
console.log("save");
},
options() {
console.log("options");
settings() {
console.log("settings");
},
help() {
console.log("help");

64
src/components/Log.svelte Normal file
View file

@ -0,0 +1,64 @@
<script lang="ts">
import { Message } from "../shark/Message";
import { SharkGame } from "../shark/SharkGame";
export function addMessage(message: string): void {
SharkGame.messages = [
...SharkGame.messages.slice(
-Math.max(...SharkGame.Settings.logLength.options)
),
new Message(message),
];
}
$: logLength = SharkGame.Settings.logLength.current;
$: displaymessages = [...SharkGame.messages].slice(-logLength).reverse();
</script>
<div id="log">
<button
on:click={() => {
addMessage("test" + SharkGame.messages.length);
}}>Add Test Message</button
>
<button
on:click={() => {
Message.even = true;
SharkGame.messages = [new Message("Log cleared.")];
}}>Clear log</button
>
<ol>
{#each displaymessages as message, i}
{#if i < logLength}
<li class={message.isEven ? "even" : "odd"}>{message}</li>
{/if}
{/each}
</ol>
</div>
<style lang="scss">
div {
height: 50%;
width: 100%;
overflow-y: scroll;
background-color: var(--color-darker);
> ol {
box-shadow: 0 0 2px 2px var(--color-dark) inset;
padding: 0;
margin: 0;
list-style-type: none;
> li {
padding: 1em 0.4em;
&.odd {
background-color: var(--color-med);
}
&.even {
background-color: var(--color-dark);
}
}
}
}
</style>

View file

@ -0,0 +1,8 @@
<div><pre>Resource Table goes here</pre></div>
<style lang="scss">
div {
height: 50%;
width: 100%;
}
</style>

View file

@ -1,7 +1,20 @@
<main>Wrapper</main>
<script lang="ts">
import Log from "./Log.svelte";
import ResourceTable from "./ResourceTable.svelte";
</script>
<main>
<div id="left-column">
<ResourceTable />
<Log />
</div>
</main>
<style lang="scss">
main {
display: flex;
flex-direction: row;
background-color: var(--color-dark);
margin: 2em 0 0 0;
@ -9,5 +22,11 @@
height: 100%;
overflow-y: scroll;
> #left-column {
height: 100%;
max-height: 100%;
width: 20%;
}
}
</style>

15
src/shark/Message.ts Normal file
View file

@ -0,0 +1,15 @@
export class Message {
static even = true;
isEven: boolean;
message: string;
constructor(message: string) {
this.message = message;
this.isEven = Message.even;
Message.even = !Message.even;
}
toString(): string {
return this.message;
}
}

342
src/shark/Settings.ts Normal file
View file

@ -0,0 +1,342 @@
// 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");
},
},
logLength: {
current: 30,
defaultValue: 30 as const,
name: "Max Log Messages" as const,
desc: "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,
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,
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,
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");
},
},
};

View file

@ -1,3 +1,5 @@
import { Message } from "./Message";
import { Settings } from "./Settings";
import { StaticClass } from "./StaticClass";
export class SharkGame extends StaticClass {
@ -51,7 +53,14 @@ export class SharkGame extends StaticClass {
] as const;
static title: string;
static readonly Settings = Settings;
static messages: Message[] = [new Message("Welcome to Sharg!")];
static init(): void {
for (const setting of Object.values(Settings)) {
setting.current = setting.defaultValue;
}
SharkGame.title =
SharkGame.#GAME_NAMES[
Math.floor(Math.random() * SharkGame.#GAME_NAMES.length)

View file

@ -2,7 +2,7 @@ html {
height: calc(100vh - 2em - 3em);
}
body {
min-height: 100%;
height: 100%;
margin: 0;
font-family: Verdana, Geneva, sans-serif;
text-align: center;