cmd/factorfactor: initial work

Fixes #47.

cmd/factorfactor/factor.go

@@ -0,0 +1,77 @@
+package main
+
+import (
+	"log/slog"
+
+	"git.sunturtle.xyz/zephyr/horse"
+	"git.sunturtle.xyz/zephyr/horse/umadump/ism"
+)
+
+// For each gain type from inspiration (stats, caps, aptitudes, skills):
+// find all activated sparks that can give that gain type.
+// Then, find all subsets of effect groups among those sparks
+// that have effects summing to those observed
+// (or more if the .end_info result is maxed),
+// with the restriction that one comes from each spark.
+// Deduplicate permutations.
+// Lastly, find the intersection of possible effects from sparks that appear
+// multiple times.
+//
+// To some extent, we rely on there being no sparks with the random stats effect type,
+// although we also don't know the distribution of stats from overcapped skill hints.
+
+type target struct {
+	spark  *horse.Spark
+	group  int
+	effect horse.SparkEffect
+}
+
+func skilltargets(sparks []horse.Spark) map[horse.SkillID]map[horse.SparkID][]target {
+	r := make(map[horse.SkillID]map[horse.SparkID][]target)
+	for i, sp := range sparks {
+		for j, g := range sp.Effects {
+			for _, e := range g {
+				if e.Target != horse.SparkSkillHint {
+					continue
+				}
+				if r[horse.SkillID(e.Value1)] == nil {
+					r[horse.SkillID(e.Value1)] = make(map[horse.SparkID][]target)
+				}
+				r[horse.SkillID(e.Value1)][sp.ID] = append(r[horse.SkillID(e.Value1)][sp.ID], target{&sparks[i], j, e})
+			}
+		}
+	}
+	return r
+}
+
+func resolveSkills(tab tables, career *ism.WorkIdleSingleMode)
+
+// skillsparks appends all activated sparks that can yield a given skill to r.
+// It assumes that no spark can give multiple skills.
+func skillsparks(tab tables, sparks []ism.Factor, id horse.SkillID, r []*horse.Spark) []*horse.Spark {
+	for _, f := range sparks {
+		sp := tab.sparks[f.FactorID]
+		if sp == nil {
+			// ATM we do generally exclude Carnival Bonus from spark info.
+			// Better to check.
+			slog.Warn("skipped spark", slog.Int("id", int(f.FactorID)))
+			continue
+		}
+		if sparkHasSkill(sp, id) {
+			r = append(r, sp)
+		}
+	}
+	return r
+}
+
+func sparkHasSkill(sp *horse.Spark, id horse.SkillID) bool {
+	for _, g := range sp.Effects {
+		for _, e := range g {
+			if e.Target != horse.SparkSkillHint {
+				continue
+			}
+			return id == horse.SkillID(e.Value1)
+		}
+	}
+	return false
+}

cmd/factorfactor/main.go

@@ -0,0 +1,111 @@
+package main
+
+import (
+	"context"
+	"encoding/json"
+	"flag"
+	"fmt"
+	"log/slog"
+	"os"
+	"os/signal"
+	"path/filepath"
+	"slices"
+
+	"git.sunturtle.xyz/zephyr/horse/mdb"
+	"git.sunturtle.xyz/zephyr/horse/umadump/ism"
+	"golang.org/x/sync/errgroup"
+	"zombiezen.com/go/sqlite"
+	"zombiezen.com/go/sqlite/sqlitex"
+)
+
+func main() {
+	var (
+		mdbf  string
+		dirs  []string
+		files []string
+	)
+	flag.StringVar(&mdbf, "-mdb", "", "`path` to master.mdb")
+	flag.Func("d", "idle_single_mode `dir`ectory (may be specified multiple times)", func(s string) error {
+		dirs = append(dirs, s)
+		return nil
+	})
+	flag.Parse()
+
+	files = slices.Clone(flag.Args())
+	for _, dir := range dirs {
+		ds, err := os.ReadDir(dir)
+		if err != nil {
+			slog.Error("getting files in directory", slog.String("dir", dir), slog.Any("err", err))
+			os.Exit(1)
+		}
+		for _, d := range ds {
+			if d.IsDir() {
+				continue
+			}
+			files = append(files, filepath.Join(dir, d.Name()))
+		}
+	}
+
+	ctx, stop := signal.NotifyContext(context.Background(), os.Interrupt)
+	go func() {
+		<-ctx.Done()
+		stop()
+	}()
+
+	db, err := sqlitex.NewPool(mdbf, sqlitex.PoolOptions{Flags: sqlite.OpenReadOnly})
+	if err != nil {
+		slog.Error("mdb", slog.Any("err", err))
+		os.Exit(1)
+	}
+
+	slog.Info("load skills")
+	skills, err := mdb.Skills(ctx, db)
+	if err != nil {
+		slog.Error("skills", slog.Any("err", err))
+		os.Exit(1)
+	}
+	slog.Info("load sparks")
+	sparks, err := mdb.Sparks(ctx, db)
+	if err != nil {
+		slog.Error("sparks", slog.Any("err", err))
+		os.Exit(1)
+	}
+	slog.Info("load umas")
+	umas, err := mdb.Umas(ctx, db)
+	if err != nil {
+		slog.Error("umas", slog.Any("err", err))
+		os.Exit(1)
+	}
+	slog.Info("mdb",
+		slog.Int("sparks", len(sparks)),
+		slog.Int("skills", len(skills)),
+		slog.Int("umas", len(umas)),
+	)
+	tab := makeTables(skills, sparks, umas)
+
+	g, ctx := errgroup.WithContext(ctx)
+	g.SetLimit(64)
+	for _, file := range files {
+		g.Go(func() error {
+			return dofile(ctx, file)
+		})
+	}
+	if err := g.Wait(); err != nil {
+		slog.Error("process", slog.Any("err", err))
+		os.Exit(1)
+	}
+}
+
+func dofile(ctx context.Context, file string) error {
+	f, err := os.Open(file)
+	if err != nil {
+		return err
+	}
+	var career ism.WorkIdleSingleMode
+	d := json.NewDecoder(f)
+	d.DisallowUnknownFields()
+	if err := d.Decode(&career); err != nil {
+		return fmt.Errorf("%s: %w", file, err)
+	}
+
+}

cmd/factorfactor/mdb.go

@@ -0,0 +1,37 @@
+package main
+
+import "git.sunturtle.xyz/zephyr/horse"
+
+type tables struct {
+	skills map[horse.SkillID]*horse.Skill
+	groups map[horse.SkillGroupID]map[int8]*horse.Skill
+	sparks map[horse.SparkID]*horse.Spark
+	umas   map[horse.UmaID]*horse.Uma
+}
+
+func makeTables(skills []horse.Skill, sparks []horse.Spark, umas []horse.Uma) tables {
+	tab := tables{
+		skills: make(map[horse.SkillID]*horse.Skill, len(skills)),
+		groups: make(map[horse.SkillGroupID]map[int8]*horse.Skill, len(skills)/2),
+		sparks: make(map[horse.SparkID]*horse.Spark, len(sparks)),
+		umas:   make(map[horse.UmaID]*horse.Uma, len(umas)),
+	}
+	for i, sk := range skills {
+		tab.skills[sk.ID] = &skills[i]
+		if tab.groups[sk.Group] == nil {
+			tab.groups[sk.Group] = make(map[int8]*horse.Skill, 4)
+		}
+		// Only add the skill to the groups table if they're rare, the base
+		// version of the common skill, or there isn't anything else there.
+		if sk.Rarity == 2 || sk.GroupRate == 1 || tab.groups[sk.Group][sk.Rarity] == nil {
+			tab.groups[sk.Group][sk.Rarity] = &skills[i]
+		}
+	}
+	for i, sp := range sparks {
+		tab.sparks[sp.ID] = &sparks[i]
+	}
+	for i, u := range umas {
+		tab.umas[u.ID] = &umas[i]
+	}
+	return tab
+}

zenno/src/lib/RaceLenSlider.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	interface Props {
+		value: number;
+	}
+
+	let { value = $bindable() }: Props = $props();
+</script>
+
+<div class="flex">
+	<input
+		class="my-auto w-full grow justify-self-center-safe"
+		type="range"
+		id="raceLen"
+		min="1000"
+		max="3600"
+		step="100"
+		bind:value
+	/>
+	<span class="my-auto flex-none pl-4 text-sm">{value}m</span>
+</div>

zenno/src/lib/Skill.svelte

@@ -20,6 +20,7 @@
 		skill_id: 0,
 		name: 'Skill data is loading...',
 		description: 'Skill data is still loading, or else something went wrong.',
+		group_skills: [],
 		group: 0,
 		rarity: 1,
 		group_rate: 1,

zenno/src/lib/data/convo.ts

@@ -4,6 +4,10 @@ import type { RegionalName } from '$lib/regional-name';
  * Lobby conversation data.
  */
 export interface Conversation {
+	/**
+	 * Gallery ID.
+	 */
+	id: number;
 	/**
 	 * Character who owns the conversation as a gallery entry.
 	 */

zenno/src/lib/data/skill.ts

@@ -14,6 +14,10 @@ export interface Skill {
 	 * Regional skil description.
 	 */
 	description: string;
+	/**
+	 * Other skills in the skill group.
+	 */
+	group_skills: GroupSkill[];
 	/**
 	 * Skill group ID.
 	 */
@@ -58,6 +62,18 @@ export interface Skill {
 	icon_id: number;
 }
 
+/**
+ * Skill reference in a skill group.
+ */
+export interface GroupSkill {
+	/** Skill ID. */
+	skill_id: number;
+	/** Group rate, as in `Skill`. */
+	group_rate: Skill['group_rate'];
+	/** Rarity, as in `Skill`. */
+	rarity: Skill['rarity'];
+}
+
 export enum DurationScale {
 	Direct = 1,
 	FrontDistance = 2,

zenno/src/lib/race.ts

@@ -771,16 +771,17 @@ export function conservePowerAccel(
 	distanceType: Distance,
 	style: RunningStyle,
 	rawPower: number,
+	basePower: number,
 	powerSkillBonus?: number,
 	spotStruggled?: boolean,
 	rushed?: boolean,
 ): number {
-	const power = rawPower + (powerSkillBonus ?? 0);
+	const power = basePower + 0.5 * Math.max(rawPower - 1200, 0) + (powerSkillBonus ?? 0);
 	if (power <= 1200) {
 		return 0;
 	}
 	const sdc = conserveStratDistCoef[style][distanceType];
-	const activity = rushed ? 0.8 : spotStruggled ? 0.98 : 1;
+	const activity = (rushed ? 0.8 : 1) * (spotStruggled ? 0.98 : 1);
 	return Math.sqrt((power - 1200) * 130) * 0.001 * sdc * activity;
 }
 

zenno/src/lib/umadump/talk.ts

@@ -0,0 +1,14 @@
+import * as z from 'zod';
+
+const Entry = z.strictObject({
+	home_story_trigger_id: z.int32(),
+	new_flag: z.literal(0).or(z.literal(1)),
+});
+
+export type Entry = z.infer<typeof Entry>;
+
+export const Gallery = z.object({
+	talk_gallery_list: z.array(Entry),
+});
+
+export type Gallery = z.infer<typeof Gallery>;

zenno/src/routes/chara/convo/+page.svelte

@@ -9,25 +9,51 @@
 		requiredCharas,
 		convoCharas,
 	} from '$lib/data/convo';
+	import * as talk from '$lib/umadump/talk';
 	import CharaPick from '$lib/CharaPick.svelte';
 	import { onMount } from 'svelte';
 	import CharaIcon from '$lib/CharaIcon.svelte';
+	import { SvelteSet } from 'svelte/reactivity';
 
-	let conversations: Conversation[] = $state([]);
-	const convoMap = $derived(byChara(conversations));
-	const popular = $derived(groupPopulars(conversations));
+	let allConvos: Conversation[] = $state([]);
+	const popular = $derived(groupPopulars(allConvos));
 	let characters: Character[] = $state([]);
-	const selCharas = $derived(characters.filter((c) => convoMap.has(c.chara_id)));
 	const names = $derived(charaNames(characters));
 	const minSuggest = 8;
 
 	onMount(async () => {
-		[conversations, characters] = await Promise.all([conversation(), character()]);
+		[allConvos, characters] = await Promise.all([conversation(), character()]);
 	});
 
 	let chara: Character | undefined = $state();
 	let convo = $state(1);
 
+	let talkFiles: FileList | undefined = $state();
+	let readIDs = new SvelteSet<number>();
+	let talkFileInvalid = $state(false);
+	async function setRead(f: FileList) {
+		talkFiles = f;
+		readIDs.clear();
+		talkFileInvalid = false;
+		if (talkFiles == null || talkFiles.length === 0) {
+			return;
+		}
+		const t = await talkFiles[0].text();
+		const d = JSON.parse(t);
+		const g = talk.Gallery.safeDecode(d);
+		if (!g.success) {
+			talkFileInvalid = true;
+			console.warn(g.error);
+			return;
+		}
+		for (const e of g.data.talk_gallery_list) {
+			readIDs.add(e.home_story_trigger_id);
+		}
+	}
+	const conversations = $derived(allConvos.filter((c) => !readIDs.has(c.id)));
+	const convoMap = $derived(byChara(conversations));
+	const selCharas = $derived(characters.filter((c) => convoMap.has(c.chara_id)));
+
 	const options = $derived(convoMap.get(chara?.chara_id ?? 0) ?? []);
 	const cur = $derived(options.find((c) => c.number === convo));
 	const charaIDs = $derived(cur != null ? convoCharas(cur) : []);
@@ -47,12 +73,12 @@
 </script>
 
 <h1 class="text-4xl">Lobby Conversations</h1>
-<div class="mx-auto mt-8 flex flex-col rounded-md text-center shadow-md ring md:max-w-xl md:flex-row">
-	<div class="m-4 flex-1 md:mt-3">
+<div class="mx-auto mt-8 grid grid-cols-1 gap-4 rounded-md p-4 text-center shadow-md ring md:max-w-xl md:grid-cols-6">
+	<div class="md:col-span-3">
 		<label for="chara" class="hidden md:inline">Character</label>
 		<CharaPick id="chara" characters={selCharas} class="w-full" bind:value={chara} required />
 	</div>
-	<div class="m-4 flex-1 md:mt-3">
+	<div class="md:col-span-3">
 		<label for="convo" class="hidden md:inline">Conversation</label>
 		<select id="convo" bind:value={convo} class="w-full">
 			{#each options as opt (opt.number)}
@@ -60,6 +86,29 @@
 			{/each}
 		</select>
 	</div>
+	<div class="col-span-full">
+		<label for="talkgallery" class="block">
+			Select
+			<a href="https://werseter.github.io/umadump/" target="_blank" rel="noopener noreferrer">
+				<span class="inline-block font-mono">talk_gallery_data.json</span>
+			</a>
+			to hide read conversations.
+		</label>
+		<input
+			type="file"
+			class="rounded-full p-4"
+			accept="application/json"
+			id="talkgallery"
+			bind:files={() => talkFiles ?? new DataTransfer().files, setRead}
+		/>
+		<button
+			class="ml-4 rounded-full bg-mist-300 p-2 hover:cursor-pointer dark:bg-mist-900"
+			onclick={() => setRead(new DataTransfer().files)}>Reset</button
+		>
+	</div>
+	{#if talkFileInvalid}
+		<div class="col-span-full">Invalid File</div>
+	{/if}
 </div>
 {#if cur}
 	<div class="shadow-sm transition-shadow hover:shadow-md">

zenno/src/routes/doc/frbm/+page.svelte

@@ -26,6 +26,7 @@
 	import Article from '../Article.svelte';
 	import Sec from '../Sec.svelte';
 	import * as skill from '$lib/data/skill';
+	import RaceLenSlider from '$lib/RaceLenSlider.svelte';
 
 	let raceLen = $state(2000);
 	let secSpeedStyle = $state(RunningStyle.FrontRunner);
@@ -224,10 +225,10 @@
 				},
 	]);
 	const fcSeries: ComputedSeries[] = $derived([
-		{ label: 'Front Runner', y: (x) => conservePowerAccel(distance(raceLen), RunningStyle.FrontRunner, x) },
-		{ label: 'Pace Chaser', y: (x) => conservePowerAccel(distance(raceLen), RunningStyle.PaceChaser, x) },
-		{ label: 'Late Surger', y: (x) => conservePowerAccel(distance(raceLen), RunningStyle.LateSurger, x) },
-		{ label: 'End Closer', y: (x) => conservePowerAccel(distance(raceLen), RunningStyle.EndCloser, x) },
+		{ label: 'Front Runner', y: (x, raw) => conservePowerAccel(distance(raceLen), RunningStyle.FrontRunner, raw, x) },
+		{ label: 'Pace Chaser', y: (x, raw) => conservePowerAccel(distance(raceLen), RunningStyle.PaceChaser, raw, x) },
+		{ label: 'Late Surger', y: (x, raw) => conservePowerAccel(distance(raceLen), RunningStyle.LateSurger, raw, x) },
+		{ label: 'End Closer', y: (x, raw) => conservePowerAccel(distance(raceLen), RunningStyle.EndCloser, raw, x) },
 	]);
 </script>
 
@@ -514,23 +515,13 @@
 			plotOptions={{ color: { legend: true } }}
 		/>
 		<div class="mx-auto flex w-full md:max-w-2xl">
-			<label class="my-auto hidden flex-none pr-2 text-right text-sm md:inline" for="secSpeedRaceLen">Race Length</label>
-			<input
-				class="my-auto max-w-40 flex-1 md:flex-2"
-				type="range"
-				id="secSpeedRaceLen"
-				min="1000"
-				max="3600"
-				step="100"
-				bind:value={raceLen}
-			/>
-			<span class="my-auto flex-none pl-2 text-sm">{raceLen}m</span>
+			<label class="my-auto mr-2 hidden flex-none pr-2 text-right text-sm md:inline" for="secSpeedRaceLen">Race Length</label>
+			<RaceLenSlider bind:value={raceLen} />
 		</div>
 	</div>
 	<p>
-		The exact mechanics of conserving power are unclear at this time. What has been confirmed is that rushed and <a
-			href="#spot-struggle">spot struggle</a
-		> both reduce the chance for it to fire.
+		Rushed and <a href="#spot-struggle">spot struggle</a> reduce both the duration and effectiveness of full charge, potentially to
+		zero. In practice, this appears to be a concern primarily on sprints, which already have a -55% penalty to full charge duration.
 	</p>
 
 	<Sec h={3} id="lane-combo">Lane Combo</Sec>
@@ -670,17 +661,8 @@
 			plotOptions={{ color: { legend: true } }}
 		/>
 		<div class="mx-auto flex w-full md:max-w-2xl">
-			<label class="my-auto hidden flex-1 pr-2 text-right text-sm md:inline" for="secSpeedRaceLen">Race Length</label>
-			<input
-				class="my-auto max-w-40 flex-1 md:flex-2"
-				type="range"
-				id="secSpeedRaceLen"
-				min="1000"
-				max="3600"
-				step="100"
-				bind:value={raceLen}
-			/>
-			<span class="my-auto flex-1 pl-2 text-sm">{raceLen}m</span>
+			<label class="my-auto mr-2 hidden flex-1 pr-2 text-right text-sm md:inline" for="secSpeedRaceLen">Race Length</label>
+			<RaceLenSlider bind:value={raceLen} />
 			<label class="my-auto hidden flex-1 pr-2 text-right text-sm md:inline" for="secSpeedStyle">Style</label>
 			<select class="my-auto flex-1 text-sm" id="secSpeedStyle" bind:value={secSpeedStyle}>
 				{#each RUNNING_STYLES as [name, style] (style)}

zenno/src/routes/doc/race/+page.svelte

@@ -5,6 +5,7 @@
 	import * as race from '$lib/race';
 	import StatChart from '$lib/StatChart.svelte';
 	import { resolve } from '$app/paths';
+	import RaceLenSlider from '$lib/RaceLenSlider.svelte';
 
 	function modemean(x: number, bonus: number, p: number): number {
 		return x * (1 - p) + x * bonus * p;
@@ -58,10 +59,10 @@
 	]);
 	const laneChange: ComputedSeries[] = [{ label: 'Lane Change Target Speed', y: (x) => race.laneChangeSpeed(x) }];
 	const conservePower: Array<ComputedSeries | null> = $derived([
-		{ label: 'Conserved Power', y: (_raw, x) => race.conservePowerAccel(distanceType, style, x, 0, false, false) },
-		{ label: 'Rushed', y: (_raw, x) => race.conservePowerAccel(distanceType, style, x, 0, false, true) },
+		{ label: 'Conserved Power', y: (x, raw) => race.conservePowerAccel(distanceType, style, raw, x, 0, false, false) },
+		{ label: 'Rushed', y: (x, raw) => race.conservePowerAccel(distanceType, style, raw, x, 0, false, true) },
 		styleIsFront
-			? { label: 'Spot Struggled', y: (_raw, x) => race.conservePowerAccel(distanceType, style, x, 0, true, false) }
+			? { label: 'Spot Struggled', y: (x, raw) => race.conservePowerAccel(distanceType, style, raw, x, 0, true, false) }
 			: null,
 	]);
 	const gutsSpurt: Array<ComputedSeries | null> = $derived([
@@ -174,16 +175,9 @@
 			/>
 			<div class="mx-auto grid w-full grid-cols-3 gap-y-6 md:max-w-2xl md:grid-cols-7">
 				{#if pick?.len}
-					<input
-						class="col-span-2 my-auto w-full justify-self-center-safe"
-						type="range"
-						id="raceLen"
-						min="1000"
-						max="3600"
-						step="100"
-						bind:value={raceLen}
-					/>
-					<span class="col-span-1 my-auto pl-2 text-sm">{raceLen}m</span>
+					<div class="col-span-3 my-auto mr-4">
+						<RaceLenSlider bind:value={raceLen} />
+					</div>
 				{/if}
 				{#if pick?.style}
 					<select class="col-span-1 my-auto text-sm md:col-span-2" id="stylePick" bind:value={style}>
@@ -329,11 +323,16 @@
 		Bonus acceleration at spurt start from the Charge Up/Fully Charged mechanic. Scales with base power plus passive skills, so
 		modifiers for ground conditions and career mode do not apply.
 	</p>
-	<p>
-		This mechanic does not appear to be well understood, in particular how long the acceleration bonus lasts and how the rushed
-		and spot struggle multipliers apply.
-	</p>
 	{@render statChart(race.Stat.Power, conservePower, 'Acceleration (m/s²)', [0, 0.35], { len: true, style: true })}
+	<p>
+		The duration of Fully Charged does not depend directly on stats, but rather on a hidden <i>conserved power</i> value which
+		increases per horse throughout the race. Conserved power does not increase while <a href="#spot-struggle">spot struggling</a>,
+		so for front runners, the duration may scale negatively with guts. It also does not increase while running in any
+		<a href="#poskeep">position keep mode</a>
+		other than pace-down, so its duration may have a very slight negative correlation with wit.
+		<a href="#rushed">Rushed</a> additionally prevents accumulating conserved power, so full charge duration may scale positively with
+		wit amortized across races. Otherwise, power conservation rate depends on running style.
+	</p>
 
 	<Sec h={2} id="guts">Guts</Sec>
 

zenno/src/routes/race/carryover/+page.svelte

@@ -4,6 +4,7 @@
 	import * as accel from '$lib/racelib/accel';
 	import type { Attachment } from 'svelte/attachments';
 	import CalcInfo from '../CalcInfo.svelte';
+	import RaceLenSlider from '$lib/RaceLenSlider.svelte';
 
 	let rawSpeed = $state(1200);
 	let rawPower = $state(1200);
@@ -231,16 +232,9 @@
 	</div>
 
 	<div class="mb-auto grid max-w-4xl grid-cols-6 rounded-md text-center shadow-md ring md:col-span-6">
-		<input
-			class="col-span-4 m-4 w-full justify-self-center-safe"
-			type="range"
-			id="raceLen"
-			min="1000"
-			max="3600"
-			step="100"
-			bind:value={raceLen}
-		/>
-		<span class="col-span-2 my-auto mb-4 pl-2 text-sm">{raceLen}m</span>
+		<div class="col-span-full m-4">
+			<RaceLenSlider bind:value={raceLen} />
+		</div>
 		<select id="surface" bind:value={surface} class="col-span-2 mx-2 mb-4">
 			<option value={race.Surface.Turf}>Turf</option>
 			<option value={race.Surface.Dirt}>Dirt</option>

zenno/src/routes/race/gate/+page.svelte

@@ -4,6 +4,7 @@
 	import * as accel from '$lib/racelib/accel';
 	import type { Attachment } from 'svelte/attachments';
 	import CalcInfo from '../CalcInfo.svelte';
+	import RaceLenSlider from '$lib/RaceLenSlider.svelte';
 
 	let rawPower = $state(1200);
 	let rawGuts = $state(1200);
@@ -216,16 +217,9 @@
 		</div>
 	</div>
 	<div class="mb-auto grid max-w-4xl grid-cols-6 rounded-md text-center shadow-md ring md:col-span-3">
-		<input
-			class="col-span-4 m-4 w-full justify-self-center-safe"
-			type="range"
-			id="raceLen"
-			min="1000"
-			max="3600"
-			step="100"
-			bind:value={raceLen}
-		/>
-		<span class="col-span-2 my-auto mb-4 pl-2 text-sm">{raceLen}m</span>
+		<div class="col-span-6 mx-4 mt-4">
+			<RaceLenSlider bind:value={raceLen} />
+		</div>
 		<select id="surface" bind:value={surface} class="col-span-2 m-4">
 			<option value={race.Surface.Turf}>Turf</option>
 			<option value={race.Surface.Dirt}>Dirt</option>

zenno/src/routes/race/mspeed/+page.svelte

@@ -18,6 +18,7 @@
 	import StatChart from '$lib/StatChart.svelte';
 	import { resolve } from '$app/paths';
 	import SpeedDur from './SpeedDur.svelte';
+	import RaceLenSlider from '$lib/RaceLenSlider.svelte';
 
 	let rawPower = $state(1200);
 	let rawGuts = $state(1200);
@@ -112,8 +113,7 @@
 		</select>
 	</div>
 	<div class="m-4 md:col-span-2 md:col-start-2">
-		<label for="raceLen">Race Distance</label>
-		<input type="number" id="raceLen" required min="1000" max="3600" step="100" bind:value={raceLen} class="w-full" />
+		<RaceLenSlider bind:value={raceLen} />
 	</div>
 	<div class="m-4 self-center md:col-span-2">
 		<label for="isRunaway" class="mr-1 align-middle">Runaway</label>

zenno/src/routes/race/spurt/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { ComputedSeries } from '$lib/chart';
 	import * as race from '$lib/race';
+	import RaceLenSlider from '$lib/RaceLenSlider.svelte';
 	import StatChart from '$lib/StatChart.svelte';
 	import CalcInfo from '../CalcInfo.svelte';
 
@@ -98,8 +99,7 @@
 		</select>
 	</div>
 	<div class="m-4 md:col-start-2">
-		<label for="raceLen">Race Distance</label>
-		<input type="number" id="raceLen" required min="1000" max="3600" step="100" bind:value={raceLen} class="w-full" />
+		<RaceLenSlider bind:value={raceLen} />
 	</div>
 	<div class="m-4 self-center">
 		<label for="isCareer" class="mr-1 align-middle">In Career</label>

zenno/src/routes/race/stam/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import * as course from '$lib/course';
 	import * as race from '$lib/race';
+	import RaceLenSlider from '$lib/RaceLenSlider.svelte';
 	import * as recovery from '$lib/racelib/recovery';
 	import HPChart from './HPChart.svelte';
 	import InfoPanels from './InfoPanels.svelte';
@@ -277,16 +278,7 @@
 </div>
 <div class="mx-auto my-2 grid max-w-5xl grid-cols-1 gap-4 rounded-md text-center shadow-md ring md:grid-cols-6">
 	<div class="m-4 flex md:col-span-2">
-		<input
-			class="col-span-2 my-auto w-full justify-self-center-safe"
-			type="range"
-			id="raceLen"
-			min="1000"
-			max="3600"
-			step="100"
-			bind:value={raceLen}
-		/>
-		<span class="my-auto pl-2 text-sm">{raceLen}m</span>
+		<RaceLenSlider bind:value={raceLen} />
 	</div>
 	<select id="surface" class="m-4" bind:value={surface}>
 		<option value={race.Surface.Turf}>Turf</option>