diff --git a/client/svelte-client/src/App.svelte b/client/svelte-client/src/App.svelte index fd7592e..07956dc 100644 --- a/client/svelte-client/src/App.svelte +++ b/client/svelte-client/src/App.svelte @@ -10,6 +10,7 @@ import SessionInfo from "./components/SessionInfo.svelte"; import type {Readable} from "svelte/store"; import {SessionType} from "./store/model/session"; + import EvenTicker from "./components/EvenTicker.svelte"; let sessionStore: Readable; let debug = false; @@ -56,7 +57,7 @@ > {:else} - +
@@ -70,6 +71,9 @@ toggleDebug()}>
+
+ +
{/if} @@ -81,6 +85,8 @@ flex-flow: column; justify-content: start; align-items: center; + width: 600px; + margin: auto; } .mode-select { @@ -94,7 +100,8 @@ display: grid; grid-template-areas: "session session" - "game hud"; + "game hud" + "events events"; grid-template-rows: min-content 1fr; grid-template-columns: 1fr min-content; grid-row-gap: 1rem; @@ -121,6 +128,14 @@ padding: 0.4rem; } + .game-area__events { + grid-area: events; + display: grid; + border: 1px solid #ff3e00; + padding: 0.4rem; + height: 300px; + } + @media (min-width: 640px) { main { max-width: none; diff --git a/client/svelte-client/src/components/EvenTicker.svelte b/client/svelte-client/src/components/EvenTicker.svelte new file mode 100644 index 0000000..dab84a5 --- /dev/null +++ b/client/svelte-client/src/components/EvenTicker.svelte @@ -0,0 +1,32 @@ + + +
+ {#if events.length } + {#each lastEvents as event } +
{JSON.stringify(event)}
+ {/each} + {:else} + No events available. + {/if} +
+ + + diff --git a/client/svelte-client/src/components/LocalSessionWrapper.svelte b/client/svelte-client/src/components/LocalSessionWrapper.svelte index 38e6099..1ebf665 100644 --- a/client/svelte-client/src/components/LocalSessionWrapper.svelte +++ b/client/svelte-client/src/components/LocalSessionWrapper.svelte @@ -11,5 +11,5 @@ {#if session && sessionInputs} - + {/if} diff --git a/client/svelte-client/src/components/NetworkSessionWrapper.svelte b/client/svelte-client/src/components/NetworkSessionWrapper.svelte index f65de18..9e8faf6 100644 --- a/client/svelte-client/src/components/NetworkSessionWrapper.svelte +++ b/client/svelte-client/src/components/NetworkSessionWrapper.svelte @@ -57,7 +57,7 @@ {:else if session.state === SessionState.CLOSED}

game over!

{:else if session.state === SessionState.RUNNING} - + {:else }

unknown game state

{/if} diff --git a/client/svelte-client/src/components/SessionInfo.svelte b/client/svelte-client/src/components/SessionInfo.svelte index 0657a72..d84d20e 100644 --- a/client/svelte-client/src/components/SessionInfo.svelte +++ b/client/svelte-client/src/components/SessionInfo.svelte @@ -20,6 +20,7 @@ .session-info { display: flex; flex-flow: row wrap; + font-size: 0.9rem; } .session-info > span + span { diff --git a/client/svelte-client/src/components/SessionWrapper.svelte b/client/svelte-client/src/components/SessionWrapper.svelte index 93b27b1..6f33886 100644 --- a/client/svelte-client/src/components/SessionWrapper.svelte +++ b/client/svelte-client/src/components/SessionWrapper.svelte @@ -14,12 +14,12 @@ {#if !session}

no session

{:else if session.type === SessionType.LOCAL} - - + + {:else} - - + + {/if}