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"> <script lang="ts">
import { createEventDispatcher } from "svelte"; import { createEventDispatcher } from "svelte";
import type { HomeAction } from "../../shark/data/HomeActions"; import type { HomeAction, HomeActions } from "../../shark/data/HomeActions";
import { HomeActions } from "../../shark/data/HomeActions";
import { Resources } from "../../shark/data/Resources";
import type { AddMessageEvent } from "../../shark/Message"; 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 }>(); const dispatch = createEventDispatcher<{ addMessage: AddMessageEvent }>();
function homeActionClick(homeAction: HomeAction) { function homeActionClick(homeAction: HomeAction) {
@ -28,16 +31,46 @@
</script> </script>
<div> <div>
{#each Object.entries(HomeActions.getActionTable()) as [homeActionId, homeAction]} {#each Object.entries(homeActions) as [homeActionId, homeAction]}
<button on:click={() => homeActionClick(homeAction)} id={homeActionId}> {#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} {homeAction.name}
</button> </button>
{/each} {/each}
{/each}
</div> </div>
<style lang="scss"> <style lang="scss">
div { div {
display: flex; display: flex;
flex-direction: row; 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> </style>

View file

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

View file

@ -28,7 +28,14 @@ export class Settings extends StaticClass {
default: "marine" as const, default: "marine" as const,
name: "Currently enabled theme" as const, name: "Currently enabled theme" as const,
description: "Only applied if planet-dependent styles are enabled" 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 { StaticClass } from "./StaticClass";
import { TabHandler } from "./TabHandler"; import { TabHandler } from "./TabHandler";
import { HomeActions } from "./data/HomeActions";
export class SharkGame extends StaticClass { export class SharkGame extends StaticClass {
static readonly #GAME_NAMES = [ static readonly #GAME_NAMES = [
"Five Seconds A Shark", "Five Seconds A Shark",
@ -61,6 +63,9 @@ export class SharkGame extends StaticClass {
static readonly Resources = Resources; static readonly Resources = Resources;
static readonly TabHandler = TabHandler; static readonly TabHandler = TabHandler;
static readonly SaveHandler = SaveHandler; static readonly SaveHandler = SaveHandler;
static readonly Data = Object.seal({
HomeActions,
});
static init(): void { static init(): void {
Log.init(); Log.init();

View file

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