zenno/doc/race: better section speed charts

Fixes #49.

.woodpecker/horsebot.yaml

@@ -6,7 +6,7 @@ when:
 
 steps:
   - name: test
-    image: golang:1.26-alpine
+    image: golang:1.27-alpine
     commands:
       - go vet ./...
       - go test ./...

umadump/ism/ism.go

@@ -323,7 +323,7 @@ type End struct {
 	StoryEventMissions     []umadump.Never `json:"story_event_mission_list"`
 	StoryEventCharaBonuses []umadump.Never `json:"story_event_chara_bonus_list"`
 	StartDressInfo         []umadump.Never `json:"start_dress_info"`
-	ResumeFactorSelect     *umadump.Never  `json:"resume_factor_select"`
+	ResumeFactorSelect     any             `json:"resume_factor_select"` // don't care yet
 	RaceRandomPrograms     []umadump.Never `json:"race_random_program_array"`
 	RaceRewardLimitMore    []umadump.Never `json:"race_reward_limit_more_list"`
 	SkillFilterSettings    []umadump.Never `json:"skill_filter_setting_array"`
@@ -344,6 +344,5 @@ type WorkIdleSingleMode struct {
 	ProgressInfo ProgressInfo              `json:"progress_info"`
 	ProgressLog  IdleSingleModeProgressLog `json:"progress_log_info"`
 	End          End                       `json:"end_info"`
-	OldChara     *SingleModeChara          `json:"chara_info"`
 	Extra        map[string]any            `json:"extra_data"`
 }

zenno/src/lib/CourseChart.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+	import * as Plot from '@observablehq/plot';
+	import type { Attachment } from 'svelte/attachments';
+	import type { ClassValue } from 'svelte/elements';
+	import * as race from '$lib/race';
+	import * as racecourse from '$lib/data/racecourse';
+
+	export interface DrawSpan {
+		fy: string;
+		x1: number;
+		x2: number;
+		color: string;
+		label?: string;
+	}
+
+	interface Props {
+		course: racecourse.Course;
+		title?: string;
+		class?: ClassValue | null;
+		plotOptions?: Omit<Plot.PlotOptions, 'marks' | 'x' | 'y'>;
+		draw: DrawSpan[];
+	}
+
+	let { course, title, class: className, plotOptions, draw }: Props = $props();
+
+	let width = $state(0);
+	let height = $state(0);
+
+	const phases = $derived(race.phases(course.distance));
+	const phaseX = $derived([
+		0,
+		phases[race.Phase.EarlyRace],
+		phases[race.Phase.MidRace],
+		phases[race.Phase.LateRace],
+		phases[race.Phase.LastSpurt],
+	]);
+	const sectionX = $derived([0, ...racecourse.SECTIONS.map((s) => course.distance * s.endRate)]);
+
+	const drawTitles = $derived(draw.map((d) => d.fy));
+
+	const makeChart: Attachment = (el) => {
+		$effect(() => {
+			el?.firstChild?.remove();
+			el?.append(
+				Plot.plot({
+					width: width,
+					height,
+					clip: true,
+					title,
+					marginLeft: 50,
+					x: {
+						domain: [0, course.distance],
+						ticks: phaseX,
+					},
+					fy: {
+						label: null,
+						padding: 0,
+						domain: drawTitles,
+					},
+					...plotOptions,
+					marks: [
+						Plot.barX(draw, {
+							x1: 'x1',
+							x2: 'x2',
+							fy: 'fy',
+							fill: 'color',
+							fillOpacity: 0.8,
+							title: 'label',
+						}),
+						Plot.text(draw, { x: 'x1', fy: 'fy', text: 'label', dx: 2, textAnchor: 'start', fontSize: 16, fill: 'black' }),
+						Plot.ruleX(sectionX, { opacity: 0.25 }),
+						Plot.ruleX([phases[0], phases[1]], { opacity: 0.5 }),
+					],
+				}),
+			);
+		});
+	};
+</script>
+
+<div bind:clientWidth={width} bind:clientHeight={height} class={['flex h-full w-full flex-col md:flex-row', className]}>
+	<div role="img" {@attach makeChart}>
+		<span>the chart seems to have didn't</span>
+	</div>
+</div>

zenno/src/lib/all.ts

@@ -54,6 +54,11 @@ export const PAGES = {
 			name: 'Stamina Calculator',
 			description: 'Compute stamina requirements and recovery probability distributions.',
 		},
+		{
+			route: resolve('/race/skillzone'),
+			name: 'Skill Activation Zones',
+			description: 'View locations where skills can activate on a given race course.',
+		},
 	] satisfies Page[],
 	career: [
 		{
@@ -109,7 +114,7 @@ export const PAGES = {
 		{
 			route: resolve('/doc/fans'),
 			name: 'Career Fan Gain Is Solved',
-			description: 'The exact formula for fan gain from career races – nothing "random" about it.'
+			description: 'The exact formula for fan gain from career races – nothing "random" about it.',
 		},
 	] satisfies Page[],
 } as const;

zenno/src/lib/data/racecourse.ts

@@ -0,0 +1,145 @@
+import * as z from 'zod';
+import * as race from '$lib/race';
+
+export enum InOut {
+	None = 1,
+	Inner = 2,
+	Outer = 3,
+	OuterToInner = 4,
+}
+
+export enum Turn {
+	Right = 1,
+	Left = 2,
+	RightStretch = 3,
+	LeftStretch = 4,
+}
+
+const Span = z.strictObject({
+	start: z.number(),
+	end: z.number(),
+	straight: z.literal([1, 2]).optional(),
+	corner: z.literal([1, 2, 3, 4]).optional(),
+});
+
+export type Span = z.infer<typeof Span>;
+
+const Slope = z.strictObject({
+	per: z.int32(),
+	start: z.number(),
+	end: z.number(),
+});
+
+export type Slope = z.infer<typeof Slope>;
+
+export const Course = z.strictObject({
+	race_course_id: z.int32(),
+	race_track_id: z.int32(),
+	race_track_name: z.string(),
+	distance: z.int32(),
+	ground: z.enum(race.Surface),
+	inout: z.enum(InOut),
+	turn: z.enum(Turn),
+	lane_max: z.int32(),
+	threshold1: z.enum(race.Stat).optional(),
+	threshold2: z.enum(race.Stat).optional(),
+	lane_start: z.array(z.int32()).length(18),
+	spans: z.array(Span),
+	slopes: z.array(Slope),
+	move_lane_point: z.number(),
+});
+
+export type Course = z.infer<typeof Course>;
+
+export async function racecourses(): Promise<Course[]> {
+	const resp = await fetch('/api/global/racecourse');
+	return Course.array().parseAsync(await resp.json());
+}
+
+export interface SectionInfo {
+	section: number;
+	phase: race.Phase;
+	endRate: number;
+	posKeep?: boolean;
+	rush?: boolean;
+	spotStruggleEnter?: boolean;
+}
+
+export const SECTIONS: ReadonlyArray<SectionInfo> = [
+	{ section: 1, phase: race.Phase.EarlyRace, endRate: 1 / 24, posKeep: true },
+	{ section: 2, phase: race.Phase.EarlyRace, endRate: 2 / 24, posKeep: true, rush: true, spotStruggleEnter: true },
+	{ section: 3, phase: race.Phase.EarlyRace, endRate: 3 / 24, posKeep: true, rush: true, spotStruggleEnter: true },
+	{ section: 4, phase: race.Phase.EarlyRace, endRate: 4 / 24, posKeep: true, rush: true, spotStruggleEnter: true },
+	{ section: 5, phase: race.Phase.MidRace, endRate: 5 / 24, posKeep: true, rush: true, spotStruggleEnter: true },
+	{ section: 6, phase: race.Phase.MidRace, endRate: 6 / 24, posKeep: true, rush: true },
+	{ section: 7, phase: race.Phase.MidRace, endRate: 7 / 24, posKeep: true, rush: true },
+	{ section: 8, phase: race.Phase.MidRace, endRate: 8 / 24, posKeep: true, rush: true },
+	{ section: 9, phase: race.Phase.MidRace, endRate: 9 / 24, posKeep: true, rush: true },
+	{ section: 10, phase: race.Phase.MidRace, endRate: 10 / 24, posKeep: true },
+	{ section: 11, phase: race.Phase.MidRace, endRate: 11 / 24 },
+	{ section: 12, phase: race.Phase.MidRace, endRate: 12 / 24 },
+	{ section: 13, phase: race.Phase.MidRace, endRate: 13 / 24 },
+	{ section: 14, phase: race.Phase.MidRace, endRate: 14 / 24 },
+	{ section: 15, phase: race.Phase.MidRace, endRate: 15 / 24 },
+	{ section: 16, phase: race.Phase.MidRace, endRate: 16 / 24 },
+	{ section: 17, phase: race.Phase.LateRace, endRate: 17 / 24 },
+	{ section: 18, phase: race.Phase.LateRace, endRate: 18 / 24 },
+	{ section: 19, phase: race.Phase.LateRace, endRate: 19 / 24 },
+	{ section: 20, phase: race.Phase.LateRace, endRate: 20 / 24 },
+	{ section: 21, phase: race.Phase.LastSpurt, endRate: 21 / 24 },
+	{ section: 22, phase: race.Phase.LastSpurt, endRate: 22 / 24 },
+	{ section: 23, phase: race.Phase.LastSpurt, endRate: 23 / 24 },
+	{ section: 24, phase: race.Phase.LastSpurt, endRate: 24 / 24 },
+];
+
+const dirtOnly = [10101, 10103, 10104, 10105];
+
+export function referName(course: Course): string {
+	const parts = [course.race_track_name, course.distance.toString()];
+	if (course.ground === race.Surface.Dirt && !dirtOnly.includes(course.race_track_id)) {
+		parts.push('Dirt');
+	}
+	switch (course.inout) {
+		case InOut.None:
+			break;
+		case InOut.Inner:
+			parts.push('(Inner)');
+			break;
+		case InOut.Outer:
+			parts.push('(Outer)');
+			break;
+		case InOut.OuterToInner:
+			parts.push('(Outer→Inner)');
+			break;
+	}
+	return parts.join(' ');
+}
+
+export function fillSlopes(slopes: Slope[], distance: number): Slope[] {
+	const r: Slope[] = [{ start: 0, end: slopes[0]?.start ?? distance, per: 0 }];
+	for (const [i, s] of slopes.entries()) {
+		r.push(s);
+		r.push({ start: s.end, end: slopes[i + 1]?.start ?? distance, per: 0 });
+	}
+	return r.filter((s) => s.start < s.end);
+}
+
+export enum DistanceType {
+	Sprint = 1,
+	Mile = 2,
+	Medium = 3,
+	Long = 4,
+}
+
+export function distanceType(course: Course): DistanceType {
+	if (course.distance < 1500) {
+		return DistanceType.Sprint;
+	}
+	if (course.distance < 1900) {
+		return DistanceType.Mile;
+	}
+	if (course.distance < 2500) {
+		return DistanceType.Medium;
+	}
+	return DistanceType.Long;
+}

zenno/src/lib/racelib/condition.spec.ts

@@ -0,0 +1,82 @@
+import { expect, test } from 'vitest';
+import * as condition from './condition';
+
+test.for([
+	{
+		c: '',
+		want: [],
+	},
+	{
+		c: 'all_corner_random==1',
+		want: [[{ type: 'all_corner_random', op: '==', arg: 1 }]],
+	},
+	{
+		c: 'corner!=0',
+		want: [[{ type: 'corner', op: '!=', arg: 0 }]],
+	},
+	{
+		c: 'order_rate<80',
+		want: [[{ type: 'order_rate', op: '<', arg: 80 }]],
+	},
+	{
+		c: 'distance_diff_top<=5',
+		want: [[{ type: 'distance_diff_top', op: '<=', arg: 5 }]],
+	},
+	{
+		c: 'motivation>=4',
+		want: [[{ type: 'motivation', op: '>=', arg: 4 }]],
+	},
+	{
+		c: 'compete_fight_count>0',
+		want: [[{ type: 'compete_fight_count', op: '>', arg: 0 }]],
+	},
+	{
+		c: 'phase==1&change_order_onetime<0',
+		want: [
+			[
+				{ type: 'phase', op: '==', arg: 1 },
+				{ type: 'change_order_onetime', op: '<', arg: 0 },
+			],
+		],
+	},
+	{
+		c: 'temptation_count==0&remain_distance<=201&remain_distance>=199&order>=4&order_rate<=70',
+		want: [
+			[
+				{ type: 'temptation_count', op: '==', arg: 0 },
+				{ type: 'remain_distance', op: '<=', arg: 201 },
+				{ type: 'remain_distance', op: '>=', arg: 199 },
+				{ type: 'order', op: '>=', arg: 4 },
+				{ type: 'order_rate', op: '<=', arg: 70 },
+			],
+		],
+	},
+	{
+		c: 'track_id==10001@track_id==10002@track_id==10004@track_id==10010@track_id==10103@track_id==10104',
+		want: [
+			[{ type: 'track_id', op: '==', arg: 10001 }],
+			[{ type: 'track_id', op: '==', arg: 10002 }],
+			[{ type: 'track_id', op: '==', arg: 10004 }],
+			[{ type: 'track_id', op: '==', arg: 10010 }],
+			[{ type: 'track_id', op: '==', arg: 10103 }],
+			[{ type: 'track_id', op: '==', arg: 10104 }],
+		],
+	},
+	{
+		c: 'distance_type==1&phase>=2&order_rate>=50&is_overtake==1@distance_type==2&phase>=2&order_rate>=50&is_overtake==1',
+		want: [
+			[
+				{ type: 'distance_type', op: '==', arg: 1 },
+				{ type: 'phase', op: '>=', arg: 2 },
+				{ type: 'order_rate', op: '>=', arg: 50 },
+				{ type: 'is_overtake', op: '==', arg: 1 },
+			],
+			[
+				{ type: 'distance_type', op: '==', arg: 2 },
+				{ type: 'phase', op: '>=', arg: 2 },
+				{ type: 'order_rate', op: '>=', arg: 50 },
+				{ type: 'is_overtake', op: '==', arg: 1 },
+			],
+		],
+	},
+])('$c', ({ c, want }) => expect(condition.parse(c)).toEqual(want));

zenno/src/lib/racelib/condition.ts

@@ -0,0 +1,407 @@
+import * as race from '$lib/race';
+import * as racecourse from '$lib/data/racecourse';
+
+export enum Op {
+	Eq = '==',
+	Ne = '!=',
+	Le = '<=',
+	Lt = '<',
+	Ge = '>=',
+	Gt = '>',
+}
+
+export interface Condition {
+	type: string;
+	op: Op;
+	arg: number;
+}
+
+const re = /(?<type>[a-z0-9_]+)(?<op>[=!<>]=?)(?<arg>-?\d+)/;
+
+function parseCond(conj: string): Condition {
+	// Using ! assertions because we want to explode if the parse fails.
+	const r = re.exec(conj)!.groups!;
+	return { type: r.type, op: r.op as Op, arg: parseInt(r.arg) };
+}
+
+export function parse(cond: string): Condition[][] {
+	if (cond === '') {
+		return [];
+	}
+	return cond.split('@').map((disj) => disj.split('&').map(parseCond));
+}
+
+export enum SpanType {
+	Never = 'N/A',
+	Random = 'Random',
+	Skill = 'Triggered',
+	Whenever = 'Immediate',
+}
+
+export interface Span {
+	start: number;
+	end: number;
+	type: SpanType;
+}
+
+function coursespans(spans: racecourse.Span[] | racecourse.Slope[], type: SpanType): Span[] {
+	return or(spans.map((s) => ({ start: s.start, end: s.end, type })));
+}
+
+function phase(course: racecourse.Course, op: Op, phase: race.Phase, type: SpanType): Span {
+	const p = race.phases(course.distance);
+	switch (op) {
+		case Op.Eq:
+			if (phase === race.Phase.EarlyRace) {
+				return { start: 0, end: p[race.Phase.EarlyRace], type };
+			}
+			return { start: p[(phase - 1) as race.Phase], end: p[phase], type };
+		case Op.Le:
+			return { start: 0, end: p[phase], type };
+		case Op.Ge:
+			if (phase === race.Phase.EarlyRace) {
+				return { start: 0, end: course.distance, type };
+			}
+			return { start: p[(phase - 1) as race.Phase], end: course.distance, type };
+		default:
+			// Other operators aren't used.
+			throw new Error('weird operator on phase condition');
+	}
+}
+
+function endafter(course: racecourse.Course, type: SpanType): Span {
+	return phase(course, Op.Ge, race.Phase.LateRace, type);
+}
+
+function is_finalcorner(course: racecourse.Course, toEnd: boolean, type: SpanType): Span {
+	const c = course.spans.findLast((s) => s.corner != null);
+	if (c == null) {
+		return { start: 0, end: 0, type: SpanType.Never };
+	}
+	return { start: c.start, end: toEnd ? course.distance : c.end, type };
+}
+
+function laststraight(course: racecourse.Course, type: SpanType): Span {
+	const s = course.spans[course.spans.length - 1];
+	return { start: s.start, end: s.end, type };
+}
+
+function distrate(course: racecourse.Course, cond: Condition, type: SpanType): Span {
+	switch (cond.op) {
+		case Op.Le:
+		case Op.Lt:
+			return { start: 0, end: Math.round((course.distance * cond.arg) / 100), type };
+		case Op.Ge:
+		case Op.Gt:
+			return { start: Math.round((course.distance * cond.arg) / 100), end: course.distance, type };
+	}
+	return { start: 0, end: 0, type: SpanType.Never };
+}
+
+function remaining(course: racecourse.Course, cond: Condition, type: SpanType): Span {
+	switch (cond.op) {
+		case Op.Eq:
+			return { start: course.distance - cond.arg - 1, end: course.distance - cond.arg + 1, type };
+		case Op.Ne:
+			throw new Error('weird operator on remaining distance');
+		case Op.Le:
+		case Op.Lt:
+			return { start: course.distance - cond.arg, end: course.distance, type };
+		case Op.Ge:
+		case Op.Gt:
+			return { start: 0, end: course.distance - cond.arg, type };
+	}
+}
+
+function later(s: Span, p: number): Span {
+	return { ...s, start: (s.start + s.end) * p };
+}
+
+function first(s: Span, p: number): Span {
+	return { ...s, end: (s.start + s.end) * p };
+}
+
+function accumulatetime(course: racecourse.Course, t: number, type: SpanType): Span {
+	return { start: race.baseSpeed(course.distance) * t, end: course.distance, type };
+}
+
+function intersection(a: Span, b: Span): Span {
+	const start = Math.max(a.start, b.start);
+	const end = Math.min(a.end, b.end);
+	if (start >= end) {
+		return { start: 0, end: 0, type: SpanType.Never };
+	}
+	switch (a.type) {
+		case SpanType.Never:
+			return { start: 0, end: 0, type: SpanType.Never };
+		case SpanType.Random:
+		case SpanType.Skill:
+			if (b.type === SpanType.Never) {
+				return { start: 0, end: 0, type: SpanType.Never };
+			}
+			// We use a.type on the assumption that we will never intersect
+			// a random span with a skill-triggered span.
+			return { start, end, type: a.type };
+		case SpanType.Whenever:
+			return { start, end, type: b.type };
+	}
+}
+
+function opcompare(cond: Condition, x: number) {
+	switch (cond.op) {
+		case Op.Eq:
+			return x === cond.arg;
+		case Op.Ne:
+			return x !== cond.arg;
+		case Op.Le:
+			return x <= cond.arg;
+		case Op.Lt:
+			return x < cond.arg;
+		case Op.Ge:
+			return x >= cond.arg;
+		case Op.Gt:
+			return x > cond.arg;
+	}
+}
+
+function must(x: boolean): SpanType {
+	return x ? SpanType.Whenever : SpanType.Never;
+}
+
+const perCond: Readonly<Partial<Record<Condition['type'], (course: racecourse.Course, cond: Condition) => Span[]>>> = {
+	accumulatetime: (course, cond) => [accumulatetime(course, cond.arg, SpanType.Whenever)],
+	activate_count_all_team: (course) => [{ start: 0, end: course.distance, type: SpanType.Skill }],
+	activate_count_end_after: (course) => [endafter(course, SpanType.Skill)],
+	activate_count_heal: (course) => [{ start: 0, end: course.distance, type: SpanType.Skill }],
+	activate_count_later_half: (course) => [{ start: course.distance / 2, end: course.distance, type: SpanType.Skill }],
+	activate_count_middle: (course) => [phase(course, Op.Eq, race.Phase.MidRace, SpanType.Skill)],
+	activate_count_start: (course) => [phase(course, Op.Eq, race.Phase.EarlyRace, SpanType.Skill)],
+	all_corner_random: (course) =>
+		coursespans(
+			course.spans.filter((s) => s.corner != null),
+			SpanType.Random,
+		),
+	change_order_up_end_after: (course) => [endafter(course, SpanType.Whenever)],
+	change_order_up_finalcorner_after: (course) => [is_finalcorner(course, true, SpanType.Whenever)],
+	change_order_up_middle: (course) => [phase(course, Op.Eq, race.Phase.MidRace, SpanType.Whenever)],
+	compete_fight_count: (course) => [laststraight(course, SpanType.Whenever)],
+	corner: (course, cond) =>
+		coursespans(
+			course.spans.filter((s) => opcompare(cond, s.corner ?? 0)),
+			SpanType.Whenever,
+		),
+	corner_count: (course, cond) => [
+		{
+			start: 0,
+			end: course.distance,
+			type: opcompare(
+				cond,
+				course.spans.reduce((n, s) => n + (s.corner != null ? 1 : 0), 0),
+			)
+				? SpanType.Never
+				: SpanType.Whenever,
+		},
+	],
+	corner_random: (course, cond) => {
+		const c = course.spans.findLast((s) => s.corner === cond.arg);
+		if (c == null) {
+			return [{ start: 0, end: 0, type: SpanType.Never }];
+		}
+		return [{ start: c.start, end: c.end, type: SpanType.Random }];
+	},
+	course_distance: (course, cond) => [{ start: 0, end: course.distance, type: must(opcompare(cond, course.distance)) }],
+	distance_rate: (course, cond) => [distrate(course, cond, SpanType.Whenever)],
+	distance_rate_after_random: (course, cond) => [distrate(course, cond, SpanType.Random)],
+	distance_type: (course, cond) => [
+		{ start: 0, end: course.distance, type: must(opcompare(cond, racecourse.distanceType(course))) },
+	],
+	down_slope_random: (course) =>
+		coursespans(
+			course.slopes.filter((s) => s.per < 0),
+			SpanType.Random,
+		),
+	furlong: (course, cond) => {
+		switch (cond.op) {
+			case Op.Eq:
+				return [{ start: cond.arg * 201.168, end: (cond.arg + 1) * 201.168, type: SpanType.Whenever }];
+			case Op.Ne:
+				return [
+					{ start: 0, end: cond.arg * 201.168, type: SpanType.Whenever },
+					{ start: (cond.arg + 1) * 201.168, end: course.distance, type: SpanType.Whenever },
+				];
+			case Op.Le:
+			case Op.Lt:
+				return [{ start: 0, end: (cond.arg + 1) * 201.168, type: SpanType.Whenever }];
+			case Op.Ge:
+			case Op.Gt:
+				return [{ start: cond.arg * 201.168, end: course.distance, type: SpanType.Whenever }];
+		}
+	},
+	ground_type: (course, cond) => [{ start: 0, end: course.distance, type: must(opcompare(cond, course.ground)) }],
+	// hp_per would be an interesting challenge...
+	is_finalcorner: (course, cond) => {
+		// Either is_finalcorner==1 or is_finalcorner==0.
+		if (cond.arg === 1) {
+			return [is_finalcorner(course, true, SpanType.Whenever)];
+		}
+		const c = course.spans.findLast((s) => s.corner != null);
+		if (c == null) {
+			return [{ start: 0, end: course.distance, type: SpanType.Whenever }];
+		}
+		return [{ start: 0, end: c.start, type: SpanType.Whenever }];
+	},
+	// TODO(zeph): is_abroad
+	is_activate_any_skill: (course) => [{ start: 0, end: course.distance, type: SpanType.Skill }],
+	is_activate_heal_skill: (course) => [{ start: 0, end: course.distance, type: SpanType.Skill }],
+	is_basis_distance: (course, cond) => [
+		{ start: 0, end: course.distance, type: must(opcompare(cond, course.distance % 400 === 0 ? 1 : 0)) },
+	],
+	is_dirtgrade: (course, cond) => {
+		// NAR tracks: Ooi, Kawasaki, Funabashi, Morioka
+		const is = [10101, 10103, 10104, 10105].includes(course.race_track_id);
+		return [{ start: 0, end: course.distance, type: must(opcompare(cond, is ? 1 : 0)) }];
+	},
+	is_finalcorner_laterhalf: (course) => [later(is_finalcorner(course, false, SpanType.Whenever), 0.5)],
+	is_finalcorner_random: (course) => [is_finalcorner(course, false, SpanType.Random)],
+	is_last_straight: (course) => [laststraight(course, SpanType.Whenever)],
+	is_last_straight_onetime: (course) => [first(laststraight(course, SpanType.Whenever), 0.02)],
+	is_lastspurt: (course) => [endafter(course, SpanType.Whenever)],
+	// could implement is_temptation!=0, but that condition isn't used
+	is_tight_track: (course, cond) => {
+		// Sapporo, Hakodate, Fukushima, Kokura, Kawasaki, Funabashi
+		// TODO(zeph): GameTora says "afaik" for this list...
+		const is = [10001, 10002, 10004, 10010, 10103, 10104];
+		return [{ start: 0, end: course.distance, type: must(opcompare(cond, is ? 1 : 0)) }];
+	},
+	last_straight_random: (course) => [laststraight(course, SpanType.Random)],
+	lastspurt: (course) => [endafter(course, SpanType.Whenever)],
+	order_rate_in20_continue: (course) => [accumulatetime(course, 5, SpanType.Whenever)],
+	order_rate_in40_continue: (course) => [accumulatetime(course, 5, SpanType.Whenever)],
+	order_rate_in50_continue: (course) => [accumulatetime(course, 5, SpanType.Whenever)],
+	order_rate_in80_continue: (course) => [accumulatetime(course, 5, SpanType.Whenever)],
+	order_rate_out20_continue: (course) => [accumulatetime(course, 5, SpanType.Whenever)],
+	order_rate_out40_continue: (course) => [accumulatetime(course, 5, SpanType.Whenever)],
+	order_rate_out50_continue: (course) => [accumulatetime(course, 5, SpanType.Whenever)],
+	order_rate_out70_continue: (course) => [accumulatetime(course, 5, SpanType.Whenever)],
+	phase: (course, cond) => [phase(course, cond.op, cond.arg, SpanType.Whenever)],
+	phase_corner_random: (course, cond) => {
+		const p = phase(course, Op.Eq, cond.arg, SpanType.Random);
+		return coursespans(
+			course.spans.filter((s) => s.corner != null),
+			SpanType.Random,
+		).map((s) => intersection(s, p));
+	},
+	phase_first_half_straight_random: (course, cond) => {
+		const p = first(phase(course, Op.Eq, cond.arg, SpanType.Random), 0.5);
+		return coursespans(
+			course.spans.filter((s) => s.straight != null),
+			SpanType.Random,
+		).map((s) => intersection(s, p));
+	},
+	phase_firsthalf: (course, cond) => [first(phase(course, Op.Eq, cond.arg, SpanType.Whenever), 0.5)],
+	phase_firsthalf_random: (course, cond) => [first(phase(course, Op.Eq, cond.arg, SpanType.Random), 0.5)],
+	phase_firstquarter: (course, cond) => [first(phase(course, Op.Eq, cond.arg, SpanType.Whenever), 0.25)],
+	phase_firstquarter_random: (course, cond) => [first(phase(course, Op.Eq, cond.arg, SpanType.Random), 0.25)],
+	phase_laterhalf: (course, cond) => [later(phase(course, Op.Eq, cond.arg, SpanType.Whenever), 0.5)],
+	phase_laterhalf_random: (course, cond) => [later(phase(course, Op.Eq, cond.arg, SpanType.Random), 0.5)],
+	phase_latter_half_straight_random: (course, cond) => {
+		const p = later(phase(course, Op.Eq, cond.arg, SpanType.Random), 0.5);
+		return coursespans(
+			course.spans.filter((s) => s.straight != null),
+			SpanType.Random,
+		).map((s) => intersection(s, p));
+	},
+	phase_random: (course, cond) => [phase(course, cond.op, cond.arg, SpanType.Random)],
+	phase_straight_random: (course, cond) => {
+		const p = phase(course, Op.Eq, cond.arg, SpanType.Random);
+		return coursespans(
+			course.spans.filter((s) => s.straight != null),
+			SpanType.Random,
+		).map((s) => intersection(s, p));
+	},
+	remain_distance: (course, cond) => [remaining(course, cond, SpanType.Whenever)],
+	remain_distance_viewer_id: (course, cond) => [remaining(course, cond, SpanType.Whenever)],
+	rotation: (course, cond) => [{ start: 0, end: course.distance, type: must(opcompare(cond, course.turn)) }],
+	run_at_full_speed_random: (course) => [endafter(course, SpanType.Random)],
+	slope: (course, cond) => {
+		switch (cond.arg) {
+			case 0:
+				return coursespans(
+					racecourse.fillSlopes(course.slopes, course.distance).filter((s) => s.per === 0),
+					SpanType.Whenever,
+				);
+			case 1:
+				return coursespans(
+					course.slopes.filter((s) => s.per > 0),
+					SpanType.Whenever,
+				);
+			case 2:
+				return coursespans(
+					course.slopes.filter((s) => s.per < 0),
+					SpanType.Whenever,
+				);
+			default:
+				throw new Error('weird argument to slope condition');
+		}
+	},
+	straight_front_type: (course, cond) =>
+		coursespans(
+			course.spans.filter((s) => s.straight === cond.arg),
+			SpanType.Whenever,
+		),
+	straight_random: (course) =>
+		coursespans(
+			course.spans.filter((s) => s.straight != null),
+			SpanType.Random,
+		),
+	track_id: (course, cond) => [{ start: 0, end: course.distance, type: must(opcompare(cond, course.race_track_id)) }],
+	up_slope_random: (course) =>
+		coursespans(
+			course.slopes.filter((s) => s.per > 0),
+			SpanType.Random,
+		),
+	up_slope_random_later_half: (course) => {
+		const p = { start: course.distance / 2, end: course.distance, type: SpanType.Random };
+		return coursespans(
+			course.slopes.filter((s) => s.per > 0),
+			SpanType.Random,
+		).map((s) => intersection(s, p));
+	},
+} as const;
+
+export function spans(course: racecourse.Course, cond: Condition): Span[] {
+	const f = perCond[cond.type];
+	return f?.(course, cond) ?? [{ start: 0, end: course.distance, type: SpanType.Whenever }];
+}
+
+export function and(as: Span[], bs: Span[]): Span[] {
+	const a = as.toSorted((l, r) => l.start - r.start);
+	const b = bs.toSorted((l, r) => l.start - r.start);
+	// TODO(zeph): this is quadratic in the number of spans; we could do it linear
+	return a.flatMap((u) => b.map((v) => intersection(u, v)).filter((v) => v.type !== SpanType.Never));
+}
+
+export function or(spans: Span[]): Span[] {
+	const a = spans.filter((s) => s.type !== SpanType.Never).sort((l, r) => l.start - r.start);
+	if (spans.length === 0) {
+		return [];
+	}
+	const r: Span[] = [];
+	let cur = a.shift()!;
+	while (a.length > 0) {
+		const next = a.shift()!;
+		// If they're disjoint or different types, they can't be merged.
+		// Note that we only need to check next start versus current end
+		// because we sort by start position first.
+		if (next.start > cur.end || next.type !== cur.type) {
+			r.push(cur);
+			cur = next;
+			continue;
+		}
+		// The current start is always the minimum of the two because we sorted,
+		// and the merged type is the same as the current type.
+		cur.end = Math.max(cur.end, next.end);
+	}
+	r.push(cur);
+	return r;
+}

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

@@ -62,8 +62,8 @@
 	{#snippet head()}
 		<Sec h={1} id="top" class="text-center pointer-coarse:mb-8">Career Fan Gain Is Solved</Sec>
 		<p>
-			Thanks to work by Moxa and Werseter on the Hakuraku Discord, a precise formula for fans gained from career races has been
-			found.
+			Thanks to work by @Moxayoru and @Werseter on the Hakuraku Discord, a precise formula for fans gained from career races has
+			been found.
 		</p>
 		<p>
 			There is no random component to fan gain, except insofar as the race itself is random. It is now known to be entirely

zenno/src/routes/doc/fans/fans.ts

@@ -7,7 +7,7 @@ const placementPms = [1000, 400, 250, 150, 100, 90, 80, 70, 60, 50, 40, 30, 25,
  * @returns Base fans for the race and placement together
  */
 export function baseFans(winBase: number, finishOrder: number): number {
-	return Math.round(winBase * placementPms[finishOrder - 1] / 1000);
+	return Math.round((winBase * placementPms[finishOrder - 1]) / 1000);
 }
 
 const margins = [

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

@@ -7,10 +7,6 @@
 	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;
-	}
-
 	let style = $state(race.RunningStyle.FrontRunner);
 	let surfaceApt = $state(race.AptitudeLevel.A);
 	let distanceApt = $state(race.AptitudeLevel.A);
@@ -84,38 +80,38 @@
 	];
 	const duelSpeed: ComputedSeries[] = [{ label: 'Dueling Speed Boost', y: (x) => race.duelSpeedMod(x) }];
 	const duelAccel: ComputedSeries[] = [{ label: 'Dueling Acceleration Boost', y: (x) => race.duelAccelMod(x) }];
-	const secSpeed: Array<ComputedAreas | null> = $derived([
+	const secSpeedEarly: Array<ComputedAreas | null> = $derived([
 		{
-			label: 'Early Race',
+			label: styleIsFront ? 'Front S' : 'Style S',
+			y1: (x) => race.sectionSpeed(raceLen, x * 1.1, style, race.Phase.EarlyRace)[0],
+			y2: (x) => race.sectionSpeed(raceLen, x * 1.1, style, race.Phase.EarlyRace)[1],
+		},
+		{
+			label: styleIsFront ? 'Front A' : 'Style A',
 			y1: (x) => race.sectionSpeed(raceLen, x, style, race.Phase.EarlyRace)[0],
 			y2: (x) => race.sectionSpeed(raceLen, x, style, race.Phase.EarlyRace)[1],
 		},
 		{
-			label: 'Mid Race',
+			label: styleIsFront ? 'Front A Speed-Up Mode' : 'Style A Pace-Up Mode',
+			y1: (x) => race.sectionSpeed(raceLen, x, style, race.Phase.EarlyRace)[0] * 1.04,
+			y2: (x) => race.sectionSpeed(raceLen, x, style, race.Phase.EarlyRace)[1] * 1.04,
+		},
+	]);
+	const secSpeedMid: Array<ComputedAreas | null> = $derived([
+		{
+			label: styleIsFront ? 'Front S' : 'Style S',
+			y1: (x) => race.sectionSpeed(raceLen, x * 1.1, style, race.Phase.MidRace)[0],
+			y2: (x) => race.sectionSpeed(raceLen, x * 1.1, style, race.Phase.MidRace)[1],
+		},
+		{
+			label: styleIsFront ? 'Front A' : 'Style A',
 			y1: (x) => race.sectionSpeed(raceLen, x, style, race.Phase.MidRace)[0],
 			y2: (x) => race.sectionSpeed(raceLen, x, style, race.Phase.MidRace)[1],
 		},
-		styleIsFront
-			? {
-					label: 'Early Race + Mean Speed-Up Mode',
-					y1: (x) => modemean(race.sectionSpeed(raceLen, x, style, race.Phase.EarlyRace)[0], 1.04, race.frontModeEnterChance(x)),
-					y2: (x) => modemean(race.sectionSpeed(raceLen, x, style, race.Phase.EarlyRace)[1], 1.04, race.frontModeEnterChance(x)),
-				}
-			: {
-					label: 'Early Race + Mean Pace-Up Mode',
-					y1: (x) => modemean(race.sectionSpeed(raceLen, x, style, race.Phase.EarlyRace)[0], 1.04, race.paceUpEnterChance(x)),
-					y2: (x) => modemean(race.sectionSpeed(raceLen, x, style, race.Phase.EarlyRace)[1], 1.04, race.paceUpEnterChance(x)),
-				},
-		styleIsFront
-			? {
-					label: 'Mid Race + Mean Speed-Up Mode',
-					y1: (x) => modemean(race.sectionSpeed(raceLen, x, style, race.Phase.MidRace)[0], 1.04, race.frontModeEnterChance(x)),
-					y2: (x) => modemean(race.sectionSpeed(raceLen, x, style, race.Phase.MidRace)[1], 1.04, race.frontModeEnterChance(x)),
-				}
-			: {
-					label: 'Mid Race + Mean Pace-Up Mode',
-					y1: (x) => modemean(race.sectionSpeed(raceLen, x, style, race.Phase.MidRace)[0], 1.04, race.paceUpEnterChance(x)),
-					y2: (x) => modemean(race.sectionSpeed(raceLen, x, style, race.Phase.MidRace)[1], 1.04, race.paceUpEnterChance(x)),
+		{
+			label: styleIsFront ? 'Front A Speed-Up Mode' : 'Style A Pace-Up Mode',
+			y1: (x) => race.sectionSpeed(raceLen, x, style, race.Phase.MidRace)[0] * 1.04,
+			y2: (x) => race.sectionSpeed(raceLen, x, style, race.Phase.MidRace)[1] * 1.04,
 		},
 	]);
 	const downhill: ComputedSeries[] = [
@@ -396,16 +392,25 @@
 		>Section Speed</Sec
 	>
 	<p>Random variance in target speed per race section.</p>
-	<div class="mb-24 h-60 w-full md:mb-20 md:h-96">
+	<div class="mb-10 grid h-96 w-full md:grid-cols-2">
 		<StatChart
-			class="mx-auto mb-12 h-full w-full max-w-3xl md:mb-10"
 			stat={race.Stat.Wit}
-			yArea={secSpeed}
-			yLabel="Section Speed (m/s)"
-			range={[17, 23]}
+			yArea={secSpeedEarly}
+			yLabel="Early Race Section Speed (m/s)"
+			range={[17, 23.5]}
 			plotOptions={{ color: { legend: true } }}
+			class="h-96 max-h-96"
 		/>
-		<div class="mx-auto flex w-full md:max-w-2xl">
+		<StatChart
+			stat={race.Stat.Wit}
+			yArea={secSpeedMid}
+			yLabel="Mid Race Section Speed (m/s)"
+			range={[17, 23.5]}
+			plotOptions={{ color: { legend: true } }}
+			class="h-96 max-h-96"
+		/>
+	</div>
+	<div class="mx-auto mb-4 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"
@@ -424,7 +429,6 @@
 			{/each}
 		</select>
 	</div>
-	</div>
 
 	<Sec
 		h={3}

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

@@ -0,0 +1,250 @@
+<script lang="ts">
+	import CourseChart from '$lib/CourseChart.svelte';
+	import * as racecourse from '$lib/data/racecourse';
+	import * as skill from '$lib/data/skill';
+	import * as condition from '$lib/racelib/condition';
+	import Pick from '$lib/Pick.svelte';
+	import SkillIcon from '$lib/SkillIcon.svelte';
+	import { onMount } from 'svelte';
+	import TopChart from './TopChart.svelte';
+
+	let courses: racecourse.Course[] = $state([]);
+	let skills: skill.Skill[] = $state([]);
+	onMount(async () => {
+		const [c, sk] = await Promise.all([racecourse.racecourses(), skill.skills()]);
+		courses = c;
+		skills = sk;
+	});
+
+	let course: racecourse.Course | undefined = $state();
+	let selSkills: skill.Skill[] = $state([]);
+
+	const spanColors: Readonly<Record<condition.SpanType, string>> = {
+		[condition.SpanType.Never]: 'red',
+		[condition.SpanType.Random]: 'yellow',
+		[condition.SpanType.Skill]: 'cyan',
+		[condition.SpanType.Whenever]: 'lime',
+	} as const;
+	const drawSkills = $derived(
+		selSkills.map((skill) => {
+			if (course == null) {
+				return { skill, draw: [] };
+			}
+			const cs =
+				skill.activations.length === 1
+					? [
+							{ fy: 'Pre', parse: condition.parse(skill.activations[0].precondition ?? '') },
+							{ fy: 'Trigger', parse: condition.parse(skill.activations[0].condition) },
+						]
+					: [
+							{ fy: 'Pre1', parse: condition.parse(skill.activations[0].precondition ?? '') },
+							{ fy: 'Trigger1', parse: condition.parse(skill.activations[0].condition) },
+							{ fy: 'Pre2', parse: condition.parse(skill.activations[1].precondition ?? '') },
+							{ fy: 'Trigger2', parse: condition.parse(skill.activations[1].condition) },
+						];
+			return {
+				skill,
+				draw: cs
+					.filter((c) => c.parse.length > 0)
+					.flatMap(({ fy, parse }) => {
+						const p = parse
+							.map((conj) => conj.map((c) => condition.spans(course!, c)).reduce(condition.and))
+							.flatMap((spans) =>
+								spans
+									.filter((sp) => sp != null)
+									.map((sp) => ({ fy, x1: sp.start, x2: sp.end, color: spanColors[sp.type], label: sp.type })),
+							);
+						if (p.length === 0) {
+							return [{ fy, x1: 0, x2: course?.distance ?? 0, label: 'N/A', color: spanColors[condition.SpanType.Never] }];
+						}
+						return p;
+					}),
+			};
+		}),
+	);
+
+	function courseKey(c: racecourse.Course) {
+		return { id: c.race_course_id, name: racecourse.referName(c) };
+	}
+	function skillKey(sk: skill.Skill) {
+		const name = sk.unique_owner != null && sk.rarity === 1 ? `${sk.name} (Inherited)` : sk.name;
+		return { id: sk.skill_id, name };
+	}
+
+	let skillToAdd: skill.Skill | undefined = $state();
+	function addSkill() {
+		if (skillToAdd == null) {
+			return;
+		}
+		selSkills.push(skillToAdd);
+	}
+	function delSkill(i: number) {
+		if (i < 0 || i >= selSkills.length) {
+			return;
+		}
+		selSkills.splice(i, 1);
+	}
+	function swapSkill(i: number, dir: number) {
+		const j = i + dir;
+		if (j < 0 || j >= selSkills.length) {
+			return;
+		}
+		const [a, b] = [selSkills[i], selSkills[j]];
+		[selSkills[i], selSkills[j]] = [b, a];
+	}
+</script>
+
+{#snippet showcond(cond: string)}
+	{@const disj = cond.replaceAll('&', ' & ').split('@')}
+	{#each disj as conj, i (conj)}
+		<span class="block font-mono text-sm">{conj}</span>
+		{#if i !== disj.length - 1}
+			<span class="block text-xs italic">or</span>
+		{/if}
+	{/each}
+{/snippet}
+
+<h1 class="text-4xl">Skill Activation Zones</h1>
+<form class="mx-auto mt-8 rounded-md p-4 text-center shadow-md ring md:max-w-2xl">
+	<Pick id="course" items={courses} key={courseKey} class="w-full" bind:value={course} required />
+</form>
+<svelte:boundary>
+	<div class="mx-auto mt-8 flex max-w-6xl flex-col text-center">
+		<div class="h-40">
+			{#if course != null}
+				<TopChart {course} />
+			{/if}
+		</div>
+		{#each drawSkills as { skill, draw }, i (i)}
+			<div class="h-28 border-t">
+				{#if course != null}
+					<CourseChart {course} {draw} />
+				{/if}
+			</div>
+			<div class="flex flex-row items-center gap-2">
+				<SkillIcon icon_id={skill.icon_id} size={32} />
+				<Pick id={`skill${i}`} class="w-64" items={skills} key={skillKey} bind:value={selSkills[i]} required>
+					{#snippet option(sk)}
+						<span>
+							<SkillIcon icon_id={sk.icon_id} size={16} />
+							{skillKey(sk).name}
+						</span>
+					{/snippet}
+				</Pick>
+				<div class="flex grow flex-col items-center">
+					{#each skill.activations as act, i (i)}
+						{#if skill.activations.length > 1}
+							<span class="block text-xs italic">Activation {i + 1}</span>
+						{/if}
+						{#if act.precondition}
+							<span class="block text-sm italic">Precondition</span>
+							{@render showcond(act.precondition)}
+							<span class="block text-sm italic">Condition</span>
+						{/if}
+						{@render showcond(act.condition)}
+					{/each}
+				</div>
+				<div class="flex shrink flex-row items-stretch gap-1 px-2 pb-4">
+					<button
+						type="button"
+						class="my-auto h-8 w-8 flex-none rounded-full bg-mist-300 text-2xl hover:cursor-pointer dark:bg-mist-900 pointer-coarse:hidden"
+						onclick={() => swapSkill(i, -1)}
+					>
+						&uparrow;
+					</button>
+					<button
+						type="button"
+						class="my-auto h-8 w-8 flex-none rounded-full bg-mist-300 text-2xl hover:cursor-pointer dark:bg-mist-900"
+						onclick={() => delSkill(i)}
+					>
+						&times;
+					</button>
+					<button
+						type="button"
+						class="my-auto h-8 w-8 flex-none rounded-full bg-mist-300 text-2xl hover:cursor-pointer dark:bg-mist-900 pointer-coarse:hidden"
+						onclick={() => swapSkill(i, 1)}
+					>
+						&downarrow;
+					</button>
+				</div>
+			</div>
+		{/each}
+		<div class="flex items-center-safe justify-center-safe gap-2 border-t pt-8">
+			<Pick id="addSkill" class="w-64" items={skills} key={skillKey} bind:value={skillToAdd} required>
+				{#snippet option(sk)}
+					<span>
+						<SkillIcon icon_id={sk.icon_id} size={16} />
+						{skillKey(sk).name}
+					</span>
+				{/snippet}
+			</Pick>
+			<button
+				type="button"
+				class="my-auto h-8 w-8 flex-none rounded-full bg-mist-300 text-2xl hover:cursor-pointer dark:bg-mist-900"
+				onclick={addSkill}
+			>
+				+
+			</button>
+		</div>
+	</div>
+	<div class="mx-auto mt-12 w-full max-w-4xl border-t pt-4 md:mt-8">
+		<p>This calculator separates conditions into four categories:</p>
+		<ul class="mb-4 list-disc pl-4">
+			<li>
+				Immediate conditions that are satisfied continuously during their range. The skill activates as soon as all other
+				conditions are satisfied. These conditions are mapped in <div
+					class="inline-block h-4 max-h-4 min-h-4 w-4 max-w-4 min-w-4 border bg-[lime] align-middle"
+				>
+					&nbsp;
+				</div>
+				green with an "Immediate" label.
+			</li>
+			<li>
+				Random conditions that are satisfied at a single point within their range, or several points in the case of e.g. <span
+					class="font-mono">all_corner_random==1</span
+				>. All other conditions must be satisfied at the time the horse reaches the random points for the skill to activate. Other
+				conditions may exclude portions of the random range, which can cause them to become impossible to trigger; this is
+				particularly common with <span class="font-mono">phase_random==0&nbsp;&amp;&nbsp;accumulatetime&gt;=5</span> skills. These
+				conditions are mapped in
+				<div class="inline-block h-4 max-h-4 min-h-4 w-4 max-w-4 min-w-4 border bg-[yellow] align-middle">&nbsp;</div>
+				yellow with a "Random" label.
+			</li>
+			<li>
+				Conditions satisfied by the Uma's other skills triggering. These are mapped in <div
+					class="inline-block h-4 max-h-4 min-h-4 w-4 max-w-4 min-w-4 border bg-[cyan] align-middle"
+				>
+					&nbsp;
+				</div>
+				cyan with a "Triggered" label.
+			</li>
+			<li>
+				Unsatisfiable conditions. These are mapped in <div
+					class="inline-block h-4 max-h-4 min-h-4 w-4 max-w-4 min-w-4 border bg-[red] align-middle"
+				>
+					&nbsp;
+				</div>
+				red with an "N/A" label.
+			</li>
+		</ul>
+		<p>
+			<span class="font-mono">accumulatetime</span> is implemented by assuming the horse runs at the
+			<a
+				href="https://docs.google.com/document/d/15VzW9W2tXBBTibBRbZ8IVpW6HaMX8H0RP03kq6Az7Xg/edit?tab=t.0#heading=h.q3a514loz268"
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				race base speed
+			</a>
+			from the gate. In practice, ignoring the start dash this way will tend to overestimate the starting position of the condition
+			especially for backline running styles, and it may underestimate it for runaways with full gate accels.
+		</p>
+		<p>
+			Condition zones were implemented by hand, and some combinations may have been missed. If you suspect a bug, please
+			@zephyrtronium on the GameTora, Hakuraku, or uma.moe Discord servers.
+		</p>
+	</div>
+
+	{#snippet pending()}
+		<div>Loading...</div>
+	{/snippet}
+</svelte:boundary>

zenno/src/routes/race/skillzone/TopChart.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import * as race from '$lib/race';
+	import * as racecourse from '$lib/data/racecourse';
+	import CourseChart from '$lib/CourseChart.svelte';
+
+	interface Props {
+		course: racecourse.Course;
+	}
+
+	let { course }: Props = $props();
+
+	function slopeprops(s: racecourse.Slope) {
+		if (s.per > 0) {
+			return { fy: 'Slope', x1: s.start, x2: s.end, label: `+${s.per / 10000}`, color: 'white' };
+		}
+		if (s.per < 0) {
+			return { fy: 'Slope', x1: s.start, x2: s.end, label: `${s.per / 10000}`, color: 'cyan' };
+		}
+		return { fy: 'Slope', x1: s.start, x2: s.end, color: 'none' };
+	}
+	function spanprops(s: racecourse.Span) {
+		if (s.corner != null) {
+			if (s.corner === 4) {
+				return { fy: 'Span', x1: s.start, x2: s.end, label: 'C4', color: 'red' };
+			}
+			return { fy: 'Span', x1: s.start, x2: s.end, label: `C${s.corner}`, color: 'cyan' };
+		}
+		if (s.straight != null) {
+			return { fy: 'Span', x1: s.start, x2: s.end, label: `S${s.straight}`, color: 'white' };
+		}
+		return { fy: 'Span', x1: s.start, x2: s.end, label: '~', color: 'pink' };
+	}
+
+	const poskeep = $derived((course.distance * 10) / 24);
+	const spotStruggle = $derived((course.distance * 9) / 24);
+	const rushStart = $derived(course.distance / 24);
+	const rushEnd = $derived((course.distance * 10) / 24);
+	const slopes = $derived(racecourse.fillSlopes(course.slopes, course.distance));
+	const phases = $derived(race.phases(course.distance));
+	const draw = $derived([
+		...slopes.map(slopeprops),
+		...course.spans.map(spanprops),
+		{ fy: 'Phase', x1: 0, x2: phases[race.Phase.EarlyRace], label: 'Early', color: 'cyan' },
+		{ fy: 'Phase', x1: phases[race.Phase.EarlyRace], x2: phases[race.Phase.MidRace], label: 'Mid', color: 'yellow' },
+		{ fy: 'Phase', x1: phases[race.Phase.MidRace], x2: phases[race.Phase.LateRace], label: 'Late', color: 'magenta' },
+		{ fy: 'Phase', x1: phases[race.Phase.LateRace], x2: phases[race.Phase.LastSpurt], label: 'Spurt', color: 'magenta' },
+		{ fy: 'PosKeep', x1: 0, x2: poskeep, color: 'purple' },
+		{ fy: 'SpotS', x1: 150, x2: spotStruggle, color: 'green' },
+		{ fy: 'Rush', x1: rushStart, x2: rushEnd, color: 'red' },
+	]);
+</script>
+
+<CourseChart {course} {draw} />