xerbalind/planetwars.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages 1 Wiki Activity

factor out top bar to __layout.svelte

Browse source
This commit is contained in:
Ilion Beyst 2022-03-16 20:13:09 +01:00
parent 675bf6fd07
commit d91d98cef5
2 changed files with 73 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
web/pw-server/src/routes/__layout.svelte Normal file
View file

@ -0,0 +1,26 @@
<script lang="ts">
import "./style.css";
</script>
<div class="outer-container">
<div class="top-bar" />
<slot />
</div>
<style lang="scss">
@import "../lib/variables.scss";
.outer-container {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
}
.top-bar {
height: 40px;
background-color: $bg-color;
border-bottom: 1px solid;
flex-shrink: 0;
}
</style>

116
web/pw-server/src/routes/index.svelte
View file

@ -2,7 +2,6 @@
import Visualizer from "$lib/components/Visualizer.svelte"; import Visualizer from "$lib/components/Visualizer.svelte";
import EditorView from "$lib/components/EditorView.svelte"; import EditorView from "$lib/components/EditorView.svelte";
import { onMount } from "svelte"; import { onMount } from "svelte";
import "./style.css";
import { DateTime } from "luxon"; import { DateTime } from "luxon";
@ -131,76 +130,59 @@
} }
</script> </script>
<div class="outer-container"> <div class="container">
<div class="top-bar" /> <div class="sidebar-left">
<div class="container"> <div
<div class="sidebar-left"> class="editor-button sidebar-item"
<div class:selected={viewMode === ViewMode.Editor}
class="editor-button sidebar-item" on:click={selectEditor}
class:selected={viewMode === ViewMode.Editor} >
on:click={selectEditor} Editor
>
Editor
</div>
<div
class="rules-button sidebar-item"
class:selected={viewMode === ViewMode.Rules}
on:click={selectRules}
>
Rules
</div>
<div class="sidebar-header">match history</div>
<ul class="match-list">
{#each matches as match}
<li
class="match-card sidebar-item"
on:click={() => selectMatch(match.id)}
class:selected={match.id === selectedMatchId}
>
<span class="match-timestamp">{formatMatchTimestamp(match.timestamp)}</span>
<!-- hex is hardcoded for now, don't show map name -->
<!-- <span class="match-mapname">hex</span> -->
<!-- ugly temporary hardcode -->
<span class="match-opponent">{match["players"][1]["bot_name"]}</span>
</li>
{/each}
</ul>
</div> </div>
<div class="editor-container"> <div
{#if viewMode === ViewMode.MatchVisualizer} class="rules-button sidebar-item"
<Visualizer matchLog={selectedMatchLog} /> class:selected={viewMode === ViewMode.Rules}
{:else if viewMode === ViewMode.Editor} on:click={selectRules}
<EditorView {editSession} /> >
{:else if viewMode === ViewMode.Rules} Rules
<RulesView />
{/if}
</div>
<div class="sidebar-right">
{#if viewMode === ViewMode.MatchVisualizer}
<OutputPane matchLog={selectedMatchLog} />
{:else if viewMode === ViewMode.Editor}
<SubmitPane {editSession} on:matchCreated={onMatchCreated} />
{/if}
</div> </div>
<div class="sidebar-header">match history</div>
<ul class="match-list">
{#each matches as match}
<li
class="match-card sidebar-item"
on:click={() => selectMatch(match.id)}
class:selected={match.id === selectedMatchId}
>
<span class="match-timestamp">{formatMatchTimestamp(match.timestamp)}</span>
<!-- hex is hardcoded for now, don't show map name -->
<!-- <span class="match-mapname">hex</span> -->
<!-- ugly temporary hardcode -->
<span class="match-opponent">{match["players"][1]["bot_name"]}</span>
</li>
{/each}
</ul>
</div>
<div class="editor-container">
{#if viewMode === ViewMode.MatchVisualizer}
<Visualizer matchLog={selectedMatchLog} />
{:else if viewMode === ViewMode.Editor}
<EditorView {editSession} />
{:else if viewMode === ViewMode.Rules}
<RulesView />
{/if}
</div>
<div class="sidebar-right">
{#if viewMode === ViewMode.MatchVisualizer}
<OutputPane matchLog={selectedMatchLog} />
{:else if viewMode === ViewMode.Editor}
<SubmitPane {editSession} on:matchCreated={onMatchCreated} />
{/if}
</div> </div>
</div> </div>
<style lang="scss"> <style lang="scss">
$bg-color: rgb(41, 41, 41); @import "../lib/variables.scss";
.outer-container {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
}
.top-bar {
height: 40px;
background-color: $bg-color;
border-bottom: 1px solid;
flex-shrink: 0;
}
.container { .container {
display: flex; display: flex;
@ -266,10 +248,6 @@
color: #ccc; color: #ccc;
} }
.match-mapname {
padding: 0 0.5em;
}
.match-opponent { .match-opponent {
padding: 0 0.5em; padding: 0 0.5em;
} }