a homebrewed DnD campaign based in the Honkai: Star Rail universe
hsr
honkaistarrail
dnd
migrate species to use remote functions
+55
-42
-16
app/src/routes/(app)/species/+page.server.ts
-16
app/src/routes/(app)/species/+page.server.ts
···
1
-
import { db } from '$server/db'
2
-
import { SpeciesRepository } from '$server/db/repos/species'
3
-
import { definePageMeta } from '$ui/page-meta'
4
-
import type { PageServerLoad } from './$types'
5
-
6
-
export const load: PageServerLoad = async () => {
7
-
const speciesRepo = new SpeciesRepository(db)
8
-
const querySpecies = await speciesRepo.getManySpeciesBy()
9
-
10
-
return {
11
-
meta: definePageMeta({
12
-
title: 'Species',
13
-
}),
14
-
species: querySpecies,
15
-
}
16
-
}
+5
-6
app/src/routes/(app)/species/+page.svelte
+5
-6
app/src/routes/(app)/species/+page.svelte
···
3
3
import SpeciesIcon from '$ui/icons/SpeciesIcon.svelte'
4
4
import { Breadcrumb } from '$ui/layout/breadcrumb'
5
5
import NoEntriesFound from '../NoEntriesFound.svelte'
6
-
import type { PageProps } from './$types'
6
+
import { getSpecies, pageMeta, queryBreadcrumb } from './page.remote'
7
7
8
-
const { data }: PageProps = $props()
9
-
const { meta, species } = $derived(data)
8
+
const meta = await pageMeta()
9
+
const paths = await queryBreadcrumb()
10
+
const species = await getSpecies()
10
11
</script>
11
12
12
13
<svelte:head>
13
14
<PageMeta {...meta} />
14
15
</svelte:head>
15
16
16
-
<Breadcrumb links={[
17
-
{ path: '/species', text: 'Species' }
18
-
]} />
17
+
<Breadcrumb links={paths.root} />
19
18
20
19
{#each species as speciesEntry (speciesEntry.id)}
21
20
{@debug speciesEntry}
-15
app/src/routes/(app)/species/new/+page.server.ts
-15
app/src/routes/(app)/species/new/+page.server.ts
···
1
-
import { definePageMeta } from '$ui/page-meta'
2
-
import { getAbilityName, getAbilityDesc, AbilityAbbrArray } from '@starlight/types/dnd'
3
-
import type { PageServerLoad } from './$types'
4
-
5
-
export const load: PageServerLoad = async () => {
6
-
return {
7
-
meta: definePageMeta({
8
-
title: 'Create a new species entry',
9
-
}),
10
-
abilities: AbilityAbbrArray.map((ability) => ({
11
-
title: getAbilityName(ability),
12
-
desc: getAbilityDesc(ability),
13
-
})),
14
-
}
15
-
}
+8
-5
app/src/routes/(app)/species/new/+page.svelte
+8
-5
app/src/routes/(app)/species/new/+page.svelte
···
6
6
import { Field } from '$ui/form/field'
7
7
import { NumberInput } from '$ui/form/number-input'
8
8
import { TextInput, TextAreaInput } from '$ui/form/text-input'
9
+
import { Breadcrumb } from '$ui/layout/breadcrumb'
9
10
import { PageLayout } from '$ui/layout/page-layout'
10
-
import type { PageProps } from './$types'
11
+
import { getAbilities, getPageMeta } from './page.remote'
12
+
import { queryBreadcrumb } from '../page.remote'
11
13
12
-
type SpeciesNewProps = PageProps
13
-
let { data }: SpeciesNewProps = $props()
14
-
const { meta, abilities } = $derived(data)
15
-
14
+
const meta = await getPageMeta()
15
+
const paths = await queryBreadcrumb()
16
+
const abilities = await getAbilities()
16
17
const movementSpeed = $state({
17
18
walk: 30,
18
19
climb: 30,
···
25
26
<svelte:head>
26
27
<PageMeta {...meta} />
27
28
</svelte:head>
29
+
30
+
<Breadcrumb links={paths.newEntry} />
28
31
29
32
<PageLayout display="flex" direction="col" class="gap-8 mx-auto" items="stretch">
30
33
<HeadingGroup>
+16
app/src/routes/(app)/species/new/page.remote.ts
+16
app/src/routes/(app)/species/new/page.remote.ts
···
1
+
import { prerender, query } from '$app/server'
2
+
import { definePageMeta } from '$ui/page-meta'
3
+
import { AbilityAbbrArray, getAbilityDesc, getAbilityName } from '@starlight/types/dnd'
4
+
5
+
export const getPageMeta = prerender(() =>
6
+
definePageMeta({
7
+
title: 'Create a new species entry',
8
+
}),
9
+
)
10
+
11
+
export const getAbilities = query(async () => {
12
+
return AbilityAbbrArray.map((ability) => ({
13
+
title: getAbilityName(ability),
14
+
desc: getAbilityDesc(ability),
15
+
}))
16
+
})
+26
app/src/routes/(app)/species/page.remote.ts
+26
app/src/routes/(app)/species/page.remote.ts
···
1
+
import { prerender, query } from '$app/server'
2
+
import { db } from '$server/db'
3
+
import { SpeciesRepository } from '$server/db/repos/species'
4
+
import { definePaths } from '$ui/layout/breadcrumb'
5
+
import { definePageMeta } from '$ui/page-meta'
6
+
7
+
export const pageMeta = prerender(() =>
8
+
definePageMeta({
9
+
title: 'Species',
10
+
}),
11
+
)
12
+
13
+
export const getSpecies = query(async () => {
14
+
const speciesRepo = new SpeciesRepository(db)
15
+
return await speciesRepo.getManySpeciesBy()
16
+
})
17
+
18
+
export const queryBreadcrumb = query(async () => {
19
+
const root = { path: '/species', text: 'Species' }
20
+
const newEntry = { path: '/species/new', text: 'Create a new species entry' }
21
+
22
+
return definePaths({
23
+
root: [root],
24
+
newEntry: [root, newEntry],
25
+
})
26
+
})