boardgame.io/src/client/debug/Debug.svelte at 7868ff3e9b3a5db8dd9757706d7d70b99ec4b150 · boardgameio/boardgame.io · GitHub

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
<script>
  export let client;

  import { writable } from 'svelte/store';
  import { setContext } from 'svelte';
  import { fly } from 'svelte/transition';
  import Menu from './Menu.svelte';
  import Main from './main/Main.svelte';
  import Info from './info/Info.svelte';
  import Log from './log/Log.svelte';
  import AI from './ai/AI.svelte';

  const panes = {
    main: { label: 'Main', shortcut: 'm', component: Main },
    log: { label: 'Log', shortcut: 'l', component: Log },
    info: { label: 'Info', shortcut: 'i', component: Info },
    ai: { label: 'AI', shortcut: 'a', component: AI },
  };

  const disableHotkeys = writable(false);
  const secondaryPane = writable(null);

  setContext('hotkeys', { disableHotkeys });
  setContext('secondaryPane', { secondaryPane });

  let pane = 'main';
  function MenuChange(e) {
    pane = e.detail;
  }

  let visible = true;
  function Keypress(e) {
    // Toggle debugger visibilty
    if (e.key == '.') {
      visible = !visible;
      return;
    }
    // Set displayed pane
    if (!visible) return;
    Object.entries(panes).forEach(([key, { shortcut }]) => {
      if (e.key == shortcut) {
        pane = key;
      }
    });
  }
</script>

<style>
  .debug-panel {
    position: fixed;
    color: #555;
    font-family: monospace;
    display: flex;
    flex-direction: row;
    text-align: left;
    right: 0;
    top: 0;
    height: 100%;
    font-size: 14px;
    box-sizing: border-box;
    opacity: 0.9;
    /* we want the debug panel to be above any other elements */
    z-index: 99999;
  }

  .pane {
    flex-grow: 2;
    overflow-x: hidden;
    overflow-y: scroll;
    background: #fefefe;
    padding: 20px;
    border-left: 1px solid #ccc;
    box-shadow: -1px 0 5px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    width: 280px;
  }

  .secondary-pane {
    background: #fefefe;
    overflow-y: scroll;
  }

  .debug-panel :global(button),
  .debug-panel :global(select) {
    cursor: pointer;
    font-size: 14px;
    font-family: monospace;
  }

  .debug-panel :global(select) {
    background: #eee;
    border: 1px solid #bbb;
    color: #555;
    padding: 3px;
    border-radius: 3px;
  }

  .debug-panel :global(section) {
    margin-bottom: 20px;
  }
</style>

<svelte:window on:keypress={Keypress} />

{#if visible}
  <div class="debug-panel" transition:fly={{ x: 400 }}>
    <Menu on:change={MenuChange} {panes} {pane} />
    <div class="pane">
      <svelte:component this={panes[pane].component} {client} />
    </div>
    {#if $secondaryPane}
      <div class="secondary-pane">
        <svelte:component
          this={$secondaryPane.component}
          metadata={$secondaryPane.metadata} />
      </div>
    {/if}
  </div>
{/if}