copy input gamestate from player log

5 files changed, 62 insertions, 10 deletions

diff --git a/web/pw-server/src/lib/components/OutputPane.svelte b/web/pw-server/src/lib/components/OutputPane.svelte
index 65ae507..3389324 100644
--- a/web/pw-server/src/lib/components/OutputPane.svelte
+++ b/web/pw-server/src/lib/components/OutputPane.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
   import PlayerLog from "./log_viewer/PlayerLog.svelte";
 
+  export let matchData: object;
   export let matchLog: string;
 </script>
 
 <div class="output-pane">
   <h3 class="output-header">Player log</h3>
-  <PlayerLog {matchLog} playerId={1} />
+  <PlayerLog {matchData} {matchLog} playerId={1} />
 </div>
 
 <style lang="scss">
diff --git a/web/pw-server/src/lib/components/log_viewer/LogTurn.svelte b/web/pw-server/src/lib/components/log_viewer/LogTurn.svelte
index 80367f4..bfd2a37 100644
--- a/web/pw-server/src/lib/components/log_viewer/LogTurn.svelte
+++ b/web/pw-server/src/lib/components/log_viewer/LogTurn.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
   import type { PlayerLogTurn } from "$lib/log_parser";
   import Fa from "svelte-fa";
-  import { faAngleRight, faAngleDown } from "@fortawesome/free-solid-svg-icons";
+  import { faAngleRight, faAngleDown, faCopy } from "@fortawesome/free-solid-svg-icons";
 
   export let turnNum: number;
   export let logTurn: PlayerLogTurn;
+  export let copyTurn: () => void;
   let expanded = false;
 
   const PLURAL_MAP = {
@@ -49,8 +50,13 @@
   </div>
   {#if expanded}
     <div class="turn-content">
-      {#if logTurn.action?.type === "dispatches"}
+      <div class="copy-turn" on:click={copyTurn}>
+        <Fa icon={faCopy} />
+        copy turn to clipboard
+      </div>
+      {#if logTurn.action?.type === "dispatches" && logTurn.action.dispatches.length > 0}
         <div class="dispatches-container">
+          <div class="dispatches-header">dispatches</div>
           {#each logTurn.action.dispatches as dispatch}
             <div class="dispatch">
               <div class="dispatch-text">
@@ -102,6 +108,16 @@
     background-color: #333;
   }
 
+  .copy-turn {
+    margin: 4px 0;
+  }
+
+  .copy-turn:hover {
+    text-decoration: underline;
+    cursor: pointer;
+    color: #fff;
+  }
+
   .turn-header-text {
     color: #eee;
     font-size: 14px;
@@ -111,15 +127,22 @@
 
   .turn-content {
     margin-bottom: 12px;
+    margin-left: 8px;
   }
 
   .turn-error {
     color: red;
   }
 
+  .dispatches-header {
+    color: #fff;
+    padding-top: 4px;
+  }
+
   .dispatch {
     display: flex;
     justify-content: space-between;
+    padding-left: 8px;
   }
 
   .dispatch-error {
diff --git a/web/pw-server/src/lib/components/log_viewer/PlayerLog.svelte b/web/pw-server/src/lib/components/log_viewer/PlayerLog.svelte
index 450fdf2..f21a038 100644
--- a/web/pw-server/src/lib/components/log_viewer/PlayerLog.svelte
+++ b/web/pw-server/src/lib/components/log_viewer/PlayerLog.svelte
@@ -3,11 +3,39 @@
   import LogTurn from "./LogTurn.svelte";
 
   export let matchLog: string;
+  export let matchData: object;
   export let playerId: number;
 
   let playerLog: PlayerLog;
   let showRawStderr = false;
 
+  async function copyTurn(turnNum: number) {
+    // find state for turnNum
+    let gamestate = matchLog
+      .split("\n")
+      .slice(0, -1)
+      .map((line) => JSON.parse(line))
+      .filter((json) => json["type"] == "gamestate")
+      .at(turnNum);
+
+    let numPlayers = matchData["players"].length;
+    let rotatePlayerNum = (playerNum: number | null) => {
+      if (playerNum === null) {
+        return null;
+      }
+      return ((numPlayers + playerNum - playerId) % numPlayers) + 1;
+    };
+
+    gamestate["planets"].forEach((planet) => {
+      planet["owner"] = rotatePlayerNum(planet["owner"]);
+    });
+    gamestate["expeditions"].forEach((expedition) => {
+      expedition["owner"] = rotatePlayerNum(expedition["owner"]);
+    });
+
+    await navigator.clipboard.writeText(JSON.stringify(gamestate));
+  }
+
   $: if (matchLog) {
     playerLog = parsePlayerLog(playerId, matchLog);
   } else {
@@ -23,11 +51,11 @@
   {:else}
     <!-- The log should be rerendered when playerId changes -->
     {#key playerId}
-    <div class="log-contents">
-      {#each playerLog as logTurn, turnNum}
-        <LogTurn {logTurn} {turnNum} />
-      {/each}
-    </div>
+      <div class="log-contents">
+        {#each playerLog as logTurn, turnNum}
+          <LogTurn {logTurn} {turnNum} copyTurn={() => copyTurn(turnNum)} />
+        {/each}
+      </div>
     {/key}
   {/if}
 </div>
diff --git a/web/pw-server/src/routes/editor.svelte b/web/pw-server/src/routes/editor.svelte
index ee4eef9..ab33a79 100644
--- a/web/pw-server/src/routes/editor.svelte
+++ b/web/pw-server/src/routes/editor.svelte
@@ -157,7 +157,7 @@
   </div>
   <div class="sidebar-right">
     {#if viewMode === ViewMode.MatchVisualizer}
-      <OutputPane matchLog={selectedMatchLog} />
+      <OutputPane matchData={selectedMatch} matchLog={selectedMatchLog} />
     {:else if viewMode === ViewMode.Editor}
       <SubmitPane {editSession} on:matchCreated={onMatchCreated} />
     {/if}
diff --git a/web/pw-server/src/routes/matches/[match_id].svelte b/web/pw-server/src/routes/matches/[match_id].svelte
index 1d5e072..e7468bd 100644
--- a/web/pw-server/src/routes/matches/[match_id].svelte
+++ b/web/pw-server/src/routes/matches/[match_id].svelte
@@ -101,7 +101,7 @@
         {/if}
       </div>
       <div class="player-log">
-        <PlayerLog {matchLog} playerId={selectedPlayer?.["playerId"]} />
+        <PlayerLog {matchData} {matchLog} playerId={selectedPlayer?.["playerId"]} />
       </div>
     </div>
   {/if}