aboutsummaryrefslogtreecommitdiff
path: root/web/pw-server/src/lib/components/OutputPane.svelte
blob: efd0d2c85439bb7496f2a2cc47460b94c995c548 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<script lang="ts">
  import { parsePlayerLog, PlayerLog } from "$lib/log_parser";

  export let matchLog: string;
  let playerLog: PlayerLog;

  let showRawStderr = false;

  $: if (matchLog) {
    playerLog = parsePlayerLog(1, matchLog);
  } else {
    playerLog = [];
  }
</script>

<div class="output">
  <h3 class="output-header">Player log</h3>
  {#if showRawStderr}
  <div class="output-text stderr-text">
    {playerLog.flatMap((turn) => turn.stderr).join("\n")}
  </div>
  {:else}
  <div class="output-text">
    {#each playerLog as logTurn, i}
    <div class="turn">
      <div class="turn-header">
        <span class="turn-header-text">Turn {i}</span>
        {#if logTurn.action?.type === "bad_command"}
          <span class="turn-error">invalid command</span>
        {/if}
      </div>
      {#if logTurn.action?.type === "bad_command"}
      <div class="bad-command-container">
        <div class="bad-command-text">{logTurn.action.command}</div>
        <div class="bad-command-error">Parse error: {logTurn.action.error}</div>
      </div>
      {/if}
      {#if logTurn.stderr.length > 0}
      <div class="stderr-header">stderr</div>
      <div class="stderr-text-box">
        {#each logTurn.stderr as stdErrMsg}
        <div class="stderr-text">{stdErrMsg}</div>
        {/each}
      </div>
      {/if}
    </div>
    {/each}
  </div>
  {/if}
</div>

<style lang="scss">
  .output {
    width: 100%;
    overflow-y: scroll;
    background-color: rgb(41, 41, 41);
    padding: 15px;
  }

  .turn {
    margin: 16px 4px;
  }

  .output-text {
    color: #ccc;
  }

  .turn-header {
    display: flex;
    justify-content: space-between;
  }

  .turn-header-text {
    color: #eee;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
  }

  .turn-error {
    color: red;
  }

  .bad-command-container {
    border-left: 1px solid red;
    margin-left: 4px;
    padding-left: 8px;
  }

  .bad-command-text {
    font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
    padding-bottom: 4px;
  }

  .bad-command-error {
    color: whitesmoke;
  }

  .stderr-text {
    // font-family: monospace;
    font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
    white-space: pre-wrap;
  }

  .stderr-header {
    color: #eee;
    padding-top: 4px;
  }

  .stderr-text-box {
    border-left: 1px solid #ccc;
    margin-left: 4px;
    padding-left: 8px;
  }

  .output-header {
    color: #eee;
    padding-bottom: 20px;
  }
</style>