- rating submitted doubled: the * 2 belonged to the retired 0-5 slider scale while StarInput already works in backend 0-10 units, so every rating arrived doubled (9 became 18, both backends rejected it); form value now passes through unscaled, display and words map already native 0-10 - StarInput gains an optional name prop rendering a hidden input, restoring the rating form field the old slider exposed; Rating passes name="rating" - table updates go immutable (new array every path): in-place mutation with the same reference never reliably invalidated the Svelte 5 $derived, which left the grid stale after successful submits; replace-or-append semantics unchanged - per-page dropdown reads the event value synchronously (Svelte 5 nulls currentTarget after dispatch, crashing the old read-inside-.then) - detail poster column shares a flex centering context so poster and stars align by construction at every width
26 lines
613 B
Svelte
26 lines
613 B
Svelte
<script lang="ts">
|
|
import StarInput from "../star-rating/StarInput.svelte";
|
|
|
|
let { score = $bindable(0) }: { score: number } = $props();
|
|
|
|
const ratingInWords: Record<number, string> = {
|
|
0: "Not Reviewed",
|
|
1: "Appalling",
|
|
2: "Horrible",
|
|
3: "Very Bad",
|
|
4: "Bad",
|
|
5: "Average",
|
|
6: "Fine",
|
|
7: "Good",
|
|
8: "Very Good",
|
|
9: "Great",
|
|
10: "Masterpiece",
|
|
}
|
|
</script>
|
|
|
|
<div>
|
|
<StarInput bind:value={score} min={0} max={10} step={1} name="rating" />
|
|
<p>Rating: {score}</p>
|
|
<p>{ratingInWords[score]}</p>
|
|
</div>
|