Some love for homeactions (icons)

This commit is contained in:
Tobias Berger 2021-09-30 22:05:32 +02:00
parent f2c260ac57
commit d4a646e105
7 changed files with 77 additions and 16 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 786 B

View file

@ -1,11 +1,14 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
import type { HomeAction } from "../../shark/data/HomeActions";
import { HomeActions } from "../../shark/data/HomeActions";
import { Resources } from "../../shark/data/Resources";
import type { HomeAction, HomeActions } from "../../shark/data/HomeActions";
import type { AddMessageEvent } from "../../shark/Message";
import { Resources } from "../../shark/data/Resources";
export let homeActions: ReturnType<typeof HomeActions["getActionTable"]>;
export let showIcons: boolean;
const dispatch = createEventDispatcher<{ addMessage: AddMessageEvent }>();
function homeActionClick(homeAction: HomeAction) {
@ -28,16 +31,46 @@
</script>
<div>
{#each Object.entries(HomeActions.getActionTable()) as [homeActionId, homeAction]}
<button on:click={() => homeActionClick(homeAction)} id={homeActionId}>
{#each Object.entries(homeActions) as [homeActionId, homeAction]}
{#each Array(50).fill(homeAction) as homeActionClone}
<button class:no-icons={!showIcons} on:click={() => homeActionClick(homeActionClone)} id={homeActionId}>
{#if showIcons}
<img
width="50"
height="50"
class="homeaction-icon"
alt="A decorative icon representing the home action"
src={"img/homeActions/" + homeAction.image}
/>
{/if}
{homeAction.name}
</button>
{/each}
{/each}
</div>
<style lang="scss">
div {
display: flex;
flex-direction: row;
flex-wrap: wrap;
> button {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 1em;
width: 8em;
&:not(.no-icons) {
height: 6em;
}
&.no-icons {
height: calc(6em - 50px);
}
}
}
</style>

View file

@ -20,8 +20,10 @@
}
let logLength: number;
let showIcons: boolean;
game.Settings.settings.subscribe((settings) => {
logLength = settings.layout.logLength.current;
showIcons = settings.appearance.showIcons.current;
});
</script>
@ -50,12 +52,23 @@
<TabSelector tabs={game.TabHandler.AllTabs} bind:selectedTab={game.TabHandler.currentTab} />
</div>
<div id="tab-content">
{#if game.TabHandler.currentTab === game.TabHandler.AllTabs.Home}
<svelte:component
this={game.TabHandler.AllTabs.Home}
on:addMessage={handleAddMessage}
{showIcons}
homeActions={game.Data.HomeActions.getActionTable()}
/>
{:else if game.TabHandler.currentTab === game.TabHandler.AllTabs.Lab}
<svelte:component this={game.TabHandler.AllTabs.Lab} />
{:else}
<svelte:component
this={game.TabHandler.currentTab}
on:addMessage={handleAddMessage}
on:openModal
on:closeModal
/>
{/if}
</div>
</div>
</main>

View file

@ -28,7 +28,14 @@ export class Settings extends StaticClass {
default: "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"],
options: ["abandoned", "chaotic", "frigid", "haven", "marine", "shrouded", "tempestuous", "violent"] as const,
},
showIcons: {
current: true,
default: true as const,
name: "Show icons" as const,
description: "Whether to show decorative icons in various places" as const,
options: [true, false] as const,
},
},
};

View file

@ -5,6 +5,8 @@ import { Settings } from "./Settings";
import { StaticClass } from "./StaticClass";
import { TabHandler } from "./TabHandler";
import { HomeActions } from "./data/HomeActions";
export class SharkGame extends StaticClass {
static readonly #GAME_NAMES = [
"Five Seconds A Shark",
@ -61,6 +63,9 @@ export class SharkGame extends StaticClass {
static readonly Resources = Resources;
static readonly TabHandler = TabHandler;
static readonly SaveHandler = SaveHandler;
static readonly Data = Object.seal({
HomeActions,
});
static init(): void {
Log.init();

View file

@ -7,6 +7,7 @@ export type HomeAction = {
};
outcomes: string[];
multiOutcomes?: string[];
image?: string;
};
export class HomeActions extends StaticClass {
@ -16,7 +17,8 @@ export class HomeActions extends StaticClass {
static readonly actionTable = Object.seal({
catchFish: {
name: "Catch fish",
image: "catchFish.png",
name: "Steal fish",
effect: {
resource: {
fish: 1,
@ -66,7 +68,8 @@ export class HomeActions extends StaticClass {
],
},
catchShark: {
name: "Catch shark",
image: "getShark.png",
name: "Kidnap shark",
effect: {
resource: {
shark: 1,