Skip to content

Commit

Permalink
feat: improve nav bar using layout data and add practice type
Browse files Browse the repository at this point in the history
  • Loading branch information
@threedalpeng
threedalpeng committed Feb 21, 2024
1 parent 264c42b commit 670b593
Show file tree
Hide file tree
Showing 5 changed files with 238 additions and 58 deletions.
41 changes: 18 additions & 23 deletions src/routes/practice/+layout.svelte → ...routes/practice/(practice)/+layout.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,6 @@
import type { LayoutData } from './$types';
export let data: LayoutData;
$: console.log(data);
let currentCategoryName: 'core' | 'custom' = 'core';
let currentPageIndex = 0;
$: currentCategoryRoutes = data.routes[currentCategoryName] ?? [];
$: currentPage = currentCategoryRoutes[currentPageIndex];
let practiceListOpen: boolean = false;
</script>
Expand All @@ -23,38 +18,38 @@
</div>
<nav class="relative h-[60px] w-screen">
<div class="flex h-full flex-row items-center justify-between">
{#if currentPageIndex >= 1}
{@const previousPage = currentCategoryRoutes[currentPageIndex - 1]}
{#if data.pages.previous}
<a
href={`${base}/practice/${currentCategoryName}/${previousPage.slug}`}
on:click={() => currentPageIndex--}
class="color-indigo-4 hover:color-indigo-6 active:color-indigo-8 mr-8 flex h-full cursor-pointer select-none flex-row items-center gap-4 transition duration-200"
href={`${base}/practice/${data.category}/${data.pages.previous.slug}`}
class="mr-8 flex h-full cursor-pointer select-none flex-row items-center gap-4 text-indigo-400 transition duration-200 hover:text-indigo-600 active:text-indigo-800"
>
<Icon class="h-[30px] w-auto" src={ChevronLeft} theme="solid" />
<span class="color-black invisible whitespace-nowrap lg:visible"
>{previousPage.title}</span
<span
class="invisible whitespace-nowrap text-black hover:text-indigo-600 active:text-indigo-800 lg:visible"
>{data.pages.previous.title}</span
>
</a>
{:else}
<div
class="color-gray mr-8 flex h-full select-none flex-row items-center gap-4 transition duration-200"
class="mr-8 flex h-full select-none flex-row items-center gap-4 text-gray-300 transition duration-200"
>
<Icon class="h-[30px] w-auto" src={ChevronLeft} theme="solid" />
</div>
{/if}
{#if currentPageIndex < currentCategoryRoutes.length - 1}
{@const nextPage = currentCategoryRoutes[currentPageIndex + 1]}
{#if data.pages.next}
<a
href={`${base}/practice/${currentCategoryName}/${nextPage.slug}`}
on:click={() => currentPageIndex++}
class="color-indigo-400 hover:color-indigo-600 active:color-indigo-800 ml-8 flex h-full cursor-pointer select-none flex-row items-center gap-4 transition duration-200"
href={`${base}/practice/${data.category}/${data.pages.next.slug}`}
class="ml-8 flex h-full cursor-pointer select-none flex-row items-center gap-4 text-indigo-400 transition duration-200 hover:text-indigo-600 active:text-indigo-800"
>
<span class="color-black invisible whitespace-nowrap lg:visible">{nextPage.title}</span>
<span
class="invisible whitespace-nowrap text-black hover:text-indigo-600 active:text-indigo-800 lg:visible"
>{data.pages.next.title}</span
>
<Icon class="h-[30px] w-auto" src={ChevronRight} theme="solid" />
</a>
{:else}
<div
class="color-gray ml-8 flex h-full select-none flex-row items-center gap-4 transition duration-200"
class="ml-8 flex h-full select-none flex-row items-center gap-4 text-gray-300 transition duration-200"
>
<Icon class="h-[30px] w-auto" src={ChevronRight} theme="solid" />
</div>
Expand All @@ -74,17 +69,17 @@
<div
class="absolute bottom-full left-1/2 max-h-80 w-80 -translate-x-1/2 -translate-y-[1rem] rounded bg-gray-500 p-4"
>
{#each currentCategoryRoutes as route}
{#each data.routes[data.category] as route}
<div class="text-start">
<a href={`${base}/practice/${currentCategoryName}/${route.slug}`}>
<a href={`${base}/practice/${data.category}/${route.slug}`}>
{route.title}
</a>
</div>
{/each}
</div>
{/if}
</div>
<p class="whitespace-nowrap">{currentPage.title}</p>
<p class="whitespace-nowrap">{data.pages.current.title}</p>
</button>
</nav>
</div>
43 changes: 8 additions & 35 deletions src/routes/practice/+layout.ts → src/routes/practice/(practice)/+layout.ts
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,13 @@
import { redirect } from '@sveltejs/kit';
import type { LayoutLoad } from '../$types';
import { base } from '$app/paths';

interface PracticeData {
title: string;
slug: string;
practice: object;
}

interface PracticeRoutes {
core: PracticeData[];
custom: PracticeData[];
}
import { redirect } from '@sveltejs/kit';
import { routes, type PracticeRoute, type PracticeRouteCategory } from '../data';
import type { LayoutLoad } from './$types';

export const load: LayoutLoad = (data) => {
const routes: PracticeRoutes = {
core: [
{
title: 'ABC',
slug: 'abc',
practice: {}
},
{
title: 'ANC',
slug: 'sdfwe',
practice: {}
}
],
custom: []
};

const { category, slug } = data.params;

console.log(category, slug);
if (category !== 'core' && category !== 'custom') {
redirect(303, `${base}/practice/core/${routes['core'][0].slug}`);
redirect(303, `${base}/practice`);
}

const currentCategoryRoutes = routes[category];
Expand All @@ -44,9 +17,9 @@ export const load: LayoutLoad = (data) => {
}

const pages: {
previous?: PracticeData;
current: PracticeData;
next?: PracticeData;
previous?: PracticeRoute;
current: PracticeRoute;
next?: PracticeRoute;
} = {
previous: currentPageIndex - 1 >= 0 ? currentCategoryRoutes[currentPageIndex - 1] : undefined,
current: currentCategoryRoutes[currentPageIndex],
Expand All @@ -56,5 +29,5 @@ export const load: LayoutLoad = (data) => {
: undefined
};

return { routes, category, pages };
return { routes, category: category as PracticeRouteCategory, pages };
};
0 src/routes/practice/[category]/+page.svelte → ...actice/(practice)/[category]/+page.svelte
View file
File renamed without changes.
0 ...s/practice/[category]/[slug]/+page.svelte → ...(practice)/[category]/[slug]/+page.svelte
View file
File renamed without changes.
212 changes: 212 additions & 0 deletions src/routes/practice/data.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,212 @@
import type { Practice } from '$/lib/practice/types';
import { TUNE } from '$/utils/music/pitch';

export interface PracticeRoute {
title: string;
slug: string;
practice: Practice;
}

export type PracticeRouteCategory = 'core' | 'custom';
export interface PracticeRoutes extends Record<PracticeRouteCategory, PracticeRoute[]> {}

export const routes: PracticeRoutes = {
core: [
{
title: 'Major Scale',
slug: 'major-scale',
practice: {
tempo: {
bpm: 120,
beatPerBar: 4,
signatureUnit: 4
},
guitar: {
tuning: TUNE.standard
},
scores: [
{
positions: [
{ line: 6, fret: 8 },
{ line: 6, fret: 10 },
{ line: 5, fret: 7 },
{ line: 5, fret: 8 },
{ line: 5, fret: 10 },
{ line: 4, fret: 7 },
{ line: 4, fret: 9 },
{ line: 4, fret: 10 },
{ line: 3, fret: 7 },
{ line: 3, fret: 9 },
{ line: 3, fret: 10 },
{ line: 2, fret: 8 },
{ line: 2, fret: 10 },
{ line: 1, fret: 7 },
{ line: 1, fret: 8 },
{ line: 1, fret: 10 },
{ line: 6, fret: 7 }
],
notes: [
{ position: 0, time: { start: 0, duration: 0.0625 } },
{ position: 1, time: { start: 0.0625, duration: 0.0625 } },
{ position: 2, time: { start: 0.125, duration: 0.0625 } },
{ position: 3, time: { start: 0.1875, duration: 0.0625 } },
{ position: 4, time: { start: 0.25, duration: 0.0625 } },
{ position: 5, time: { start: 0.3125, duration: 0.0625 } },
{ position: 6, time: { start: 0.375, duration: 0.0625 } },
{ position: 7, time: { start: 0.4375, duration: 0.0625 } },
{ position: 8, time: { start: 0.5, duration: 0.0625 } },
{ position: 9, time: { start: 0.5625, duration: 0.0625 } },
{ position: 10, time: { start: 0.625, duration: 0.0625 } },
{ position: 11, time: { start: 0.6875, duration: 0.0625 } },
{ position: 12, time: { start: 0.75, duration: 0.0625 } },
{ position: 13, time: { start: 0.8125, duration: 0.0625 } },
{ position: 14, time: { start: 0.875, duration: 0.0625 } },
{ position: 15, time: { start: 0.9375, duration: 0.0625 } },
{ position: 14, time: { start: 1, duration: 0.0625 } },
{ position: 13, time: { start: 1.0625, duration: 0.0625 } },
{ position: 12, time: { start: 1.125, duration: 0.0625 } },
{ position: 11, time: { start: 1.1875, duration: 0.0625 } },
{ position: 10, time: { start: 1.25, duration: 0.0625 } },
{ position: 9, time: { start: 1.3125, duration: 0.0625 } },
{ position: 8, time: { start: 1.375, duration: 0.0625 } },
{ position: 7, time: { start: 1.4375, duration: 0.0625 } },
{ position: 6, time: { start: 1.5, duration: 0.0625 } },
{ position: 5, time: { start: 1.5625, duration: 0.0625 } },
{ position: 4, time: { start: 1.625, duration: 0.0625 } },
{ position: 3, time: { start: 1.6875, duration: 0.0625 } },
{ position: 2, time: { start: 1.75, duration: 0.0625 } },
{ position: 1, time: { start: 1.8125, duration: 0.0625 } },
{ position: 0, time: { start: 1.875, duration: 0.0625 } },
{ position: 16, time: { start: 1.9375, duration: 0.0625 } },
{ position: 0, time: { start: 2, duration: 0.0625 } }
],
boards: [
{
title: 'C line 1',
fingers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
time: { start: 0 }
},
{
title: 'C line 2',
fingers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16],
time: { start: 15 / 16 }
}
],
fretRange: {
start: 5,
end: 11,
visibility: 'all'
}
}
]
}
},
{
title: 'Rhythm Test',
slug: 'rhythm-test',
practice: {
tempo: {
bpm: 120,
beatPerBar: 4,
signatureUnit: 4
},
guitar: {
tuning: TUNE.standard
},
scores: [
{
positions: [
{ line: 5, fret: 3 },
{ line: 6, fret: 3 },
{ line: 1, fret: 'open' },
{ line: 2, fret: 1 },
{ line: 3, fret: 'open' }
],
notes: [
{ position: 0, time: { start: 0, duration: 1 / 4 } },
{ position: 2, time: { start: 1 / 4, duration: 1 / 4 } },
{ position: 3, time: { start: 1 / 4, duration: 1 / 4 } },
{ position: 4, time: { start: 1 / 4, duration: 1 / 4 } },
{ position: 1, time: { start: 2 / 4, duration: 1 / 4 } },
{ position: 2, time: { start: 3 / 4, duration: 1 / 4 } },
{ position: 3, time: { start: 3 / 4, duration: 1 / 4 } },
{ position: 4, time: { start: 3 / 4, duration: 1 / 4 } },
{ position: 0, time: { start: 4 / 4, duration: 1 / 4 } },
{ position: 2, time: { start: 5 / 4, duration: 1 / 4 } },
{ position: 3, time: { start: 5 / 4, duration: 1 / 4 } },
{ position: 4, time: { start: 5 / 4, duration: 1 / 4 } },
{ position: 1, time: { start: 6 / 4, duration: 1 / 4 } },
{ position: 2, time: { start: 7 / 4, duration: 1 / 4 } },
{ position: 3, time: { start: 7 / 4, duration: 1 / 4 } },
{ position: 4, time: { start: 7 / 4, duration: 1 / 4 } },
{ position: 0, time: { start: 8 / 4, duration: 1 / 4 } },
{ position: 2, time: { start: 9 / 4, duration: 1 / 4 } },
{ position: 3, time: { start: 9 / 4, duration: 1 / 4 } },
{ position: 4, time: { start: 9 / 4, duration: 1 / 4 } },
{ position: 1, time: { start: 10 / 4, duration: 1 / 4 } },
{ position: 2, time: { start: 11 / 4, duration: 1 / 4 } },
{ position: 3, time: { start: 11 / 4, duration: 1 / 4 } },
{ position: 4, time: { start: 11 / 4, duration: 1 / 4 } },
{ position: 0, time: { start: 12 / 4, duration: 1 / 4 } },
{ position: 2, time: { start: 13 / 4, duration: 1 / 4 } },
{ position: 3, time: { start: 13 / 4, duration: 1 / 4 } },
{ position: 4, time: { start: 13 / 4, duration: 1 / 4 } },
{ position: 1, time: { start: 14 / 4, duration: 1 / 4 } },
{ position: 2, time: { start: 15 / 4, duration: 1 / 4 } },
{ position: 3, time: { start: 15 / 4, duration: 1 / 4 } },
{ position: 4, time: { start: 15 / 4, duration: 1 / 4 } }
],
boards: [
{
title: 'C line 1',
fingers: [0, 2, 3, 4],
time: { start: 0 }
},
{
title: 'C line 1',
fingers: [1, 2, 3, 4],
time: { start: 1 / 2 }
},
{
title: 'C line 1',
fingers: [0, 2, 3, 4],
time: { start: 2 / 2 }
},
{
title: 'C line 1',
fingers: [1, 2, 3, 4],
time: { start: 3 / 2 }
},
{
title: 'C line 1',
fingers: [0, 2, 3, 4],
time: { start: 4 / 2 }
},
{
title: 'C line 1',
fingers: [1, 2, 3, 4],
time: { start: 5 / 2 }
},
{
title: 'C line 1',
fingers: [0, 2, 3, 4],
time: { start: 6 / 2 }
},
{
title: 'C line 1',
fingers: [1, 2, 3, 4],
time: { start: 7 / 2 }
}
],
fretRange: {
start: 0,
end: 12,
visibility: 'all'
}
}
]
}
}
],
custom: []
};

0 comments on commit 670b593

Please sign in to comment.