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

match view: toggle sidebar

Browse source
This commit is contained in:
Ilion Beyst 2022-11-12 10:41:40 +01:00
parent 347ec6972f
commit d140759ea5
3 changed files with 35 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
web/pw-server/src/lib/components/Visualizer.svelte
View file

@ -47,11 +47,14 @@
<div id="main" class="loading"> <div id="main" class="loading">
<canvas id="canvas" /> <canvas id="canvas" />
<div id="name" /> <div id="name" />
<ul class="player-labels"> <div class="ui-topright">
{#each matchData["players"] as player, i} <slot name="menu" />
<li style="color:{PLAYER_COLORS[i]}">{player["bot_name"] || "player"}</li> <ul class="player-labels">
{/each} {#each matchData["players"] as player, i}
</ul> <li style="color:{PLAYER_COLORS[i]}">{player["bot_name"] || "player"}</li>
{/each}
</ul>
</div>
<div id="meta"> <div id="meta">
<div id="turnCounter">0 / 0</div> <div id="turnCounter">0 / 0</div>
@ -78,15 +81,21 @@
<style scoped> <style scoped>
@import "pw-visualizer/src/style.css"; @import "pw-visualizer/src/style.css";
.player-labels { .ui-topright {
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 10px; right: 10px;
color: white; color: white;
}
.player-labels {
list-style: none; list-style: none;
padding-left: 0;
margin-top: 0.5em;
} }
.player-labels li { .player-labels li {
text-align: right;
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
</style> </style>

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

@ -2,13 +2,12 @@
import { afterNavigate } from "$app/navigation"; import { afterNavigate } from "$app/navigation";
import "./style.css"; import "./style.css";
import Fa from 'svelte-fa' import Fa from "svelte-fa";
import { faBars } from '@fortawesome/free-solid-svg-icons' import { faBars } from "@fortawesome/free-solid-svg-icons";
import { get_session_token, clear_session_token } from "$lib/auth"; import { get_session_token, clear_session_token } from "$lib/auth";
import { currentUser } from "$lib/stores/current_user"; import { currentUser } from "$lib/stores/current_user";
import { onMount } from "svelte"; import { onMount } from "svelte";
// TODO: ideally we'd not store this in the user session, // TODO: ideally we'd not store this in the user session,

20
web/pw-server/src/routes/matches/[match_id].svelte
View file

@ -29,6 +29,7 @@
export let matchLog: string | undefined; export let matchLog: string | undefined;
export let matchData: object; export let matchData: object;
let showSidebar = true;
onMount(async () => { onMount(async () => {
const apiClient = new ApiClient(); const apiClient = new ApiClient();
@ -54,6 +55,10 @@
return matchPlayer["owner_id"] === user?.["user_id"]; return matchPlayer["owner_id"] === user?.["user_id"];
} }
function toggleSidebar() {
showSidebar = !showSidebar;
}
// using the same value here causes svelte to freeze // using the same value here causes svelte to freeze
let dropdownSelectedPlayer: any; let dropdownSelectedPlayer: any;
let selectedPlayer: any; let selectedPlayer: any;
@ -65,8 +70,14 @@
</script> </script>
<div class="container"> <div class="container">
<Visualizer {matchLog} {matchData} /> <Visualizer {matchLog} {matchData}>
{#if playersWithVisibleLog.length > 0} <div slot="menu">
{#if playersWithVisibleLog.length > 0}
<div class="toggle-sidebar" on:click={toggleSidebar}>toggle sidebar</div>
{/if}
</div>
</Visualizer>
{#if showSidebar && playersWithVisibleLog.length > 0}
<div class="output-pane"> <div class="output-pane">
<div class="player-select"> <div class="player-select">
{#if playersWithVisibleLog.length == 1} {#if playersWithVisibleLog.length == 1}
@ -126,4 +137,9 @@
flex-direction: column; flex-direction: column;
background-color: variables.$bg-color; background-color: variables.$bg-color;
} }
.toggle-sidebar:hover {
cursor: pointer;
color: #ccc;
}
</style> </style>