Remember that stores exist

This commit is contained in:
Tobias Berger 2021-09-27 14:36:40 +02:00
parent d246a94f42
commit 7e04b635cd
6 changed files with 119 additions and 84 deletions

View file

@ -81,6 +81,10 @@
pointer-events: none;
> span {
font-weight: bold;
}
> ul {
text-align: center;
font-weight: bold;

View file

@ -1,45 +1,45 @@
<svelte:options immutable />
<script lang="ts">
import type { Writable } from "svelte/store";
import { Message, MessageType } from "../shark/Message";
import { SharkGame } from "../shark/SharkGame";
export let messages: Message[];
export let messages: Writable<Message[]>;
function addMessage(
message: string,
messageType: MessageType = MessageType.message
) {
messages = [...messages, new Message(message, messageType)];
// Shorthand
function addMessage(message: string, messageType?: MessageType) {
SharkGame.Log.addMessage(message, messageType);
}
$: logLength = SharkGame.Settings.logLength.current;
$: displaymessages = messages.slice(-logLength).reverse();
$: displayMessages = $messages.slice(-logLength).reverse();
</script>
<div id="log">
<button
on:click={() => {
addMessage("message" + messages.length);
addMessage("message" + $messages.length);
}}>Add Message</button
>
<button
on:click={() => {
addMessage("warn" + messages.length, MessageType.warning);
addMessage("warn" + $messages.length, MessageType.warning);
}}>Add Warning</button
>
<button
on:click={() => {
addMessage("error" + messages.length, MessageType.error);
addMessage("error" + $messages.length, MessageType.error);
}}>Add Error</button
>
<button
on:click={() => {
Message.even = true;
messages = [];
addMessage("Log cleared");
SharkGame.Log.reset();
}}>Clear log</button
>
<ol>
{#each displaymessages as message, i}
{#each displayMessages as message, i}
{#if i < logLength}
<li class={(message.isEven ? "even" : "odd") + " " + message.type}>
{message}

View file

@ -0,0 +1,48 @@
<svelte:options immutable />
<script lang="ts">
import type { ResourceEntry } from "./ResourceTable.svelte";
export let categoryName: string;
export let collapsed: boolean;
export let resources: ResourceEntry[];
</script>
<tr on:click class="subhead" tabindex="0" role="button">
<td>{collapsed ? "▲" : "▼"}</td>
<td colspan="3"><h4>{categoryName}</h4> </td>
</tr>
{#if !collapsed}
{#each resources as [resourceName, resource], index}
<tr class={index % 2 === 0 ? "even" : "odd"}>
<td colspan="2">{resourceName}</td>
<td>{resource.amount}</td>
<td>{Math.round(100 * resource.change) / 100}/s</td>
</tr>
{/each}
{/if}
<style lang="scss">
tr {
&.even {
background-color: var(--color-med);
}
&.odd {
background-color: var(--color-light);
}
&.subhead {
cursor: pointer;
user-select: none;
background-color: var(--color-dark);
border: 1px solid var(--color-lighter);
> td > h4 {
margin: 0.3em;
}
&:hover > td > h4 {
text-shadow: 0 0 8px var(--color-lighter);
}
}
}
</style>

View file

@ -1,4 +1,7 @@
<script lang="ts">
<svelte:options immutable={true} />
<script context="module" lang="ts">
export type ResourceEntry = [string, typeof TEST_RESOURCES["Shark"]];
const TEST_RESOURCES = {
Shark: {
amount: 100,
@ -51,31 +54,38 @@
change: (Math.random() - 0.5) * 30,
},
};
</script>
<script lang="ts">
import ResourceGroup from "./ResourceGroup.svelte";
let collapsed: string[] = [];
$: grouped = Object.entries(resourceGroups());
$: groups = resourceGroups();
type Entry = [string, typeof TEST_RESOURCES["Shark"]];
function resourceGroups() {
return Object.entries(TEST_RESOURCES).reduce(
(reduced: { [key: string]: Entry[] }, [resourceName, resource]) => {
if (reduced[resource.category] === undefined) {
reduced[resource.category] = [];
}
reduced[resource.category] = [
...reduced[resource.category],
[resourceName, resource],
];
return Object.entries(
Object.entries(TEST_RESOURCES).reduce(
(
reduced: { [key: string]: ResourceEntry[] },
[resourceName, resource]
) => {
if (reduced[resource.category] === undefined) {
reduced[resource.category] = [];
}
reduced[resource.category] = [
...reduced[resource.category],
[resourceName, resource],
];
return reduced;
},
{}
return reduced;
},
{}
)
);
}
function toggleCollapsed(categoryName: string) {
if (collapsed.includes(categoryName)) {
collapsed = collapsed.filter((group) => group !== categoryName);
collapsed = collapsed.filter((category) => category !== categoryName);
} else {
collapsed = [...collapsed, categoryName];
}
@ -91,25 +101,13 @@
<col style="width: 20%;" />
</colgroup>
<tbody>
{#each grouped as [categoryName, resources]}
<tr
{#each groups as [categoryName, resources]}
<ResourceGroup
on:click={() => toggleCollapsed(categoryName)}
class="subhead"
tabindex="0"
role="button"
>
<td>{collapsed.includes(categoryName) ? "▲" : "▼"}</td>
<td colspan="3"><h4>{categoryName}</h4> </td>
</tr>
{#if !collapsed.includes(categoryName)}
{#each resources as [resourceName, resource], index}
<tr class={index % 2 === 0 ? "even" : "odd"}>
<td colspan="2">{resourceName}</td>
<td>{resource.amount}</td>
<td>{Math.round(100 * resource.change) / 100}/s</td>
</tr>
{/each}
{/if}
{categoryName}
{resources}
collapsed={collapsed.includes(categoryName)}
/>
{/each}
</tbody>
</table>
@ -126,32 +124,6 @@
> table {
width: 100%;
border-collapse: collapse;
> tbody {
> tr {
&.even {
background-color: var(--color-med);
}
&.odd {
background-color: var(--color-light);
}
&.subhead {
cursor: pointer;
user-select: none;
background-color: var(--color-dark);
border: 1px solid var(--color-lighter);
> td > h4 {
margin: 0.3em;
}
&:hover > td > h4 {
text-shadow: 0 0 8px var(--color-lighter);
}
}
}
}
}
}
</style>

View file

@ -1,7 +1,7 @@
<script lang="ts">
import { SharkGame } from "../shark/SharkGame";
import Log from "./Log.svelte";
import ResourceTable from "./ResourceTable.svelte";
import ResourceTable from "./ResourceTable/ResourceTable.svelte";
</script>
<main>

View file

@ -1,15 +1,26 @@
import type { Message } from "./Message";
import { SharkGame } from "./SharkGame";
import { writable } from "svelte/store";
import { Message, MessageType } from "./Message";
import { Settings } from "./Settings";
import { StaticClass } from "./StaticClass";
export class Log extends StaticClass {
static #messages: Message[] = [];
static get messages(): Message[] {
return this.#messages;
}
static set messages(messages: Message[]) {
this.#messages = messages.slice(
-Math.max(...SharkGame.Settings.logLength.options)
static messages = writable<Message[]>([]);
static addMessage(
message: string,
messageType: MessageType = MessageType.message
): void {
this.messages.update((oldMessages) =>
[...oldMessages, new Message(message, messageType)].slice(
-Math.max(...Settings.logLength.options)
)
);
}
static reset(): void {
Message.even = true;
this.messages.set([]);
this.addMessage("Log cleared");
}
}