Add LayoutControls, splitBottom to url params

fixes #63
Vauhtijuoksu · Apr 23, 2024 · 636139e · 636139e
1 parent ed15e9b
commit 636139e
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 28 deletions.
diff --git a/src/lib/LayoutControls.svelte b/src/lib/LayoutControls.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+	import Heartrate from "./components/Heartrate.svelte";
+	import type { LayoutTheme } from "./models/LayoutConf";
+	import { fixedPlayerNames, hideGameData } from './stores/ConfStore';
+	import { themestore } from "./stores/ThemeStore";
+  
+	export let theme: LayoutTheme = $themestore;
+  
+</script>
+<div class="col">
+  <div style="height: 65px; width: 300px;">
+    <Heartrate />
+  </div>
+  <div>
+    Current theme: {theme.name}
+  </div>
+  <div>
+    <label>
+      <input type="checkbox" bind:checked={$fixedPlayerNames}>
+      Fixed player names
+    </label>
+  </div>
+  <div>
+    <label>
+      <input type="checkbox" bind:checked={$hideGameData}>
+      Hide game data
+    </label>
+  </div>
+</div>
+
+<div class="col">
+  <h1>Extra controls</h1>
+  <div>
+    <slot />
+  </div>
+</div>
diff --git a/src/lib/StreamLayout.svelte b/src/lib/StreamLayout.svelte
@@ -6,8 +6,8 @@
 	import StreamData from './StreamData.svelte';
 	import type { LayoutConf, LayoutTheme } from './models/LayoutConf';
 	import Heartrate from './components/Heartrate.svelte';
-	import { fixedPlayerNames, hideGameData } from './stores/ConfStore';
 	import { onMount } from 'svelte';
+	import LayoutControls from './LayoutControls.svelte';
 
 	export let layout: LayoutConf;
 	export let theme: LayoutTheme = $themestore;
@@ -51,34 +51,11 @@
 </div>
 
 <div class="controls" style="top: {layout.height}px; left: 0; width: {layout.width}px; {theme.style}">
-	<div class="col">
-		<div style="height: 65px; width: 300px;">
-			<Heartrate />
-		</div>
-		<div>
-			Current theme: {theme.name}
-		</div>
-		<div>
-			<label>
-				<input type="checkbox" bind:checked={$fixedPlayerNames}>
-				Fixed player names
-			</label>
-		</div>
-		<div>
-			<label>
-				<input type="checkbox" bind:checked={$hideGameData}>
-				Hide game data
-			</label>
-		</div>
-	</div>
-	{#if $$slots.controls}
-	<div class="col">
-		<h1>Extra controls</h1>
-		<div>
+	<LayoutControls {theme}>
+		{#if $$slots.controls}
 			<slot name="controls" />
-		</div>
-	</div>
-	{/if}
+		{/if}
+	</LayoutControls>
 </div>
 
 <style>

diff --git a/src/lib/layouts/FourThreeRace.svelte b/src/lib/layouts/FourThreeRace.svelte
@@ -17,6 +17,7 @@
 	import { fixedPlayerNames } from "$lib/stores/ConfStore";
 	import { currentPlayers } from "$lib/stores/GameStore";
 	import { themestore } from "$lib/stores/ThemeStore";
+	import { onMount } from "svelte";
 
   const width = 1920;
   const height = 1080;
@@ -129,6 +130,11 @@
     background,
     contents: []
   }
+
+  onMount(() => {
+    const urlParams = new URLSearchParams(window.location.search)
+    splitBottom = urlParams.has('splitBottom');
+  })
 </script>
 
 <StreamLayout {layout}>