event ticker

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<SessionStore>;
     let debug = false;
@@ -56,7 +57,7 @@
             ></ModeSelect>
         </div>
     {:else}
-        <SessionWrapper session={session} let:inputs={inputs} let:objects={objects} let:tick={tick}>
+        <SessionWrapper session={session} let:inputs={inputs} let:objects={objects} let:tick={tick} let:events={events}>
             <div class="game-area">
                 <div class="game-area__session">
                     <SessionInfo session={session}></SessionInfo>
@@ -70,6 +71,9 @@
                     <GameSettings on:debug-toggle={() => toggleDebug()}></GameSettings>
                     <Input inputs={inputs}></Input>
                 </div>
+                <div class="game-area__events">
+                    <EvenTicker events={events}></EvenTicker>
+                </div>
             </div>
         </SessionWrapper>
     {/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;

client/svelte-client/src/components/EvenTicker.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+    import type {GameEventWrapper} from "../store/model/event";
+
+    export let events: GameEventWrapper[];
+
+    const eventsCached = 1_000;
+
+    let lastEvents = [];
+    $: if(events) {
+        lastEvents = [...lastEvents, ...events].slice(lastEvents.length + events.length - eventsCached);
+    }
+</script>
+
+<div class="event-ticker">
+    {#if events.length }
+        {#each lastEvents as event }
+            <div>{JSON.stringify(event)}</div>
+        {/each}
+    {:else}
+        No events available.
+    {/if}
+</div>
+
+
+<style>
+    .event-ticker {
+        width: 100%;
+
+        overflow-y: scroll;
+        font-size: 0.8rem;
+    }
+</style>

client/svelte-client/src/components/LocalSessionWrapper.svelte

@@ -11,5 +11,5 @@
 </script>
 
 {#if session && sessionInputs}
-    <slot inputs={$sessionInputs} objects={$gameField.objects} tick={tick}></slot>
+    <slot inputs={$sessionInputs} objects={$gameField.objects} tick={tick} events={[]}></slot>
 {/if}

client/svelte-client/src/components/NetworkSessionWrapper.svelte

@@ -57,7 +57,7 @@
     {:else if session.state === SessionState.CLOSED}
         <h3>game over!</h3>
     {:else if session.state === SessionState.RUNNING}
-        <slot inputs={$sessionInputs} objects={$gameField.objects} tick={tick}></slot>
+        <slot inputs={$sessionInputs} objects={$gameField.objects} tick={tick} events={$networkEvents}></slot>
     {:else }
         <h3>unknown game state</h3>
     {/if}

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 {

client/svelte-client/src/components/SessionWrapper.svelte

@@ -14,12 +14,12 @@
     {#if !session}
         <h1>no session</h1>
     {:else if session.type === SessionType.LOCAL}
-        <LocalSessionWrapper session={session} let:inputs={inputs} let:objects={objects} let:tick={tick}>
-            <slot inputs={inputs} objects={objects} tick={tick}></slot>
+        <LocalSessionWrapper session={session} let:inputs={inputs} let:objects={objects} let:tick={tick} let:events={events}>
+            <slot inputs={inputs} objects={objects} tick={tick} events={events}></slot>
         </LocalSessionWrapper>
     {:else}
-        <NetworkSessionWrapper session={session} let:inputs={inputs} let:objects={objects} let:tick={tick}>
-            <slot inputs={inputs} objects={objects} tick={tick}></slot>
+        <NetworkSessionWrapper session={session} let:inputs={inputs} let:objects={objects} let:tick={tick} let:events={events}>
+            <slot inputs={inputs} objects={objects} tick={tick} events={events}></slot>
         </NetworkSessionWrapper>
     {/if}
 </div>