feat: change layouts and make components more designable

threedalpeng · Feb 18, 2024 · 1de5bfb · 1de5bfb
1 parent f263008
commit 1de5bfb
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 20 deletions.
diff --git a/src/lib/canvas/Canvas.svelte b/src/lib/canvas/Canvas.svelte
@@ -9,7 +9,8 @@
 
 <canvas
 	bind:this={canvas}
-	class="w-screen object-contain object-center md:w-auto"
+	{...$$restProps}
+	class="{$$props.class} object-contain object-center"
 	{width}
 	{height}
 />

diff --git a/src/lib/device/metronome/MetronomeBeats.svelte b/src/lib/device/metronome/MetronomeBeats.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { getMetronomeContext } from './context';
 	import { onMount } from 'svelte';
+	import { getMetronomeContext } from './context';
 
 	const metronome = getMetronomeContext();
 
@@ -18,7 +18,10 @@
 	});
 </script>
 
-<div class="relative top-[60px] flex w-screen flex-row items-center justify-center gap-[40px]">
+<div
+	{...$$restProps}
+	class="{$$props.class} relative flex w-screen flex-row items-center justify-center gap-[40px]"
+>
 	{#each new Array(beatPerBar) as _, i}
 		{#if i === 0}
 			{#if i === currentBeat - 1}

diff --git a/src/lib/device/metronome/MetronomePlayButton.svelte b/src/lib/device/metronome/MetronomePlayButton.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Play, Stop } from '@steeze-ui/heroicons';
+	import { Icon } from '@steeze-ui/svelte-icon';
+	import { getMetronomeContext } from './context';
+	const metronome = getMetronomeContext();
+	$: isRunning = metronome.isRunning;
+</script>
+
+<button
+	{...$$restProps}
+	class="{$$props.class} flex aspect-square items-center justify-center rounded-full bg-indigo-900 p-0 focus:outline-none"
+	on:click={() => {
+		metronome.toggle();
+		isRunning = metronome.isRunning;
+	}}
+>
+	{#if isRunning}
+		<Icon class="m-0 h-1/2 p-0 text-indigo-100" src={Stop} theme="solid" />
+	{:else}
+		<Icon class="m-0 h-1/2 p-0 text-indigo-100" src={Play} theme="solid" />
+	{/if}
+</button>
diff --git a/src/lib/guitar/finger-board/FingerBoard.svelte b/src/lib/guitar/finger-board/FingerBoard.svelte
@@ -83,7 +83,12 @@
 	export let inlayVisible: boolean = true;
 </script>
 
-<Canvas width={FRET_START * 2 + fretRangeWidth} height={STRING_START * 2 + STRING_GAP * 5}>
+<Canvas
+	{...$$restProps}
+	class={$$props.class}
+	width={FRET_START * 2 + fretRangeWidth}
+	height={STRING_START * 2 + STRING_GAP * 5}
+>
 	<Crop
 		width={FRET_START * 2 + FRET_GAP * FRET_MAX}
 		height={STRING_START * 2 + STRING_GAP * 5}

diff --git a/src/routes/tools/render-sample/+page.svelte b/src/routes/tools/render-sample/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import MetronomeBeats from '$/lib/device/metronome/MetronomeBeats.svelte';
 	import MetronomeOptions from '$/lib/device/metronome/MetronomeOptions.svelte';
+	import MetronomePlayButton from '$/lib/device/metronome/MetronomePlayButton.svelte';
 	import { getMetronomeContext } from '$/lib/device/metronome/context';
 	import type { OnBarCallback, OnOptionChangeCallback } from '$/lib/device/metronome/metronome';
 	import FingerBoard, {
@@ -115,24 +116,11 @@
 				<MetronomeOptions />
 				<RandomBoxOptions />
 			</div>
-			<button
-				class="mr-8 flex aspect-square h-3/4 items-center justify-center rounded-full bg-indigo-900 p-0 focus:outline-none"
-				on:click={() => {
-					metronome.toggle();
-					isRunning = metronome.isRunning;
-				}}
-			>
-				{#if isRunning}
-					<Icon class="m-0 h-[20px] w-[20px] p-0 text-indigo-100" src={Stop} theme="solid" />
-				{:else}
-					<Icon class="m-0 h-[20px] w-[20px] p-0 text-indigo-100" src={Play} theme="solid" />
-				{/if}
-			</button>
 		</div>
 		<div class="relative flex h-full flex-col items-center justify-center">
-			<div class="relative" style="left: {0}em;">{testNum}</div>
-			<FingerBoard readonly {fingers}></FingerBoard>
-			<MetronomeBeats />
+			<FingerBoard class="" readonly {fingers} fretRange={score.fretRange}></FingerBoard>
+			<MetronomeBeats class="p-20" />
+			<MetronomePlayButton class="h-20" />
 		</div>
 	</div>
 </div>