blob: 71fadb2fbd04a33f3e5dd2b944d54968117beb6f (
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
|
<script lang="ts">
import { onMount } from "svelte";
import Visualizer from "./Visualizer.svelte";
let matches = [];
let selectedMatch = null;
let selectedMatchLog = null;
onMount(() => {
fetch("/api/matches")
.then((response) => response.json())
.then((m) => (matches = m));
});
function selectMatch(matchName) {
selectedMatch = matchName;
selectedMatchLog = null;
fetch(`/api/matches/${matchName}`)
.then((resp) => resp.text())
.then((log) => {
selectedMatchLog = log;
});
}
</script>
<div class="container">
<div class="sidebar">
<div class="sidebar-header" />
<ul class="match-list">
{#each matches as match (match.name)}
<li
on:click={() => selectMatch(match.name)}
class:selected={selectedMatch === match.name}
class="match-card"
>
{match.name}
</li>
{/each}
</ul>
</div>
<Visualizer matchLog={selectedMatchLog} />
</div>
<style scoped>
.container {
display: flex;
width: 100vw;
height: 100vh;
overflow-y: hidden;
background-color: rgb(41, 41, 41);
}
.sidebar {
width: 20%;
width: 350px;
color: #eee;
overflow: hidden;
overflow-y: scroll;
height: 100%;
}
.sidebar-header {
margin-top: 2em;
text-transform: uppercase;
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
font-family: "Open Sans", sans-serif;
padding-left: 14px;
}
.match-list {
list-style: none;
padding: 0;
}
.match-card {
padding: 0.5em;
padding-left: 14px;
}
.match-card.selected {
background-color: #333;
}
.match-card:hover {
background-color: #333;
}
</style>
|
