🔧 ui: minor changes to helpers

- rename `Like` -> `VueLike` (also `unwrap_like` -> `unwrap_vuelike`)
- rename `ensure_loaded` -> `unwrap_loading`
- make `unwrap_loading` throw `null` on error instead of `""`

ui/src/components/Calendar.vue

@@ -30,7 +30,7 @@
 
   <figure>
     <div class="image is-unselectable">
-      <img :src="ensure_loaded(store.background_image).data_url" />
+      <img :src="unwrap_loading(store.background_image).data_url" />
       <ThouCanvas>
         <CalendarDoor
           v-for="(door, index) in doors"
@@ -49,7 +49,7 @@
 <script setup lang="ts">
 import { API } from "@/lib/api";
 import { APIError } from "@/lib/api_error";
-import { ensure_loaded, Like, name_door } from "@/lib/helpers";
+import { VueLike, name_door, unwrap_loading } from "@/lib/helpers";
 import { ImageData } from "@/lib/model";
 import { Door } from "@/lib/rects/door";
 import { advent22Store } from "@/lib/store";
@@ -62,7 +62,7 @@ import CalendarDoor from "./calendar/CalendarDoor.vue";
 import ThouCanvas from "./calendar/ThouCanvas.vue";
 
 defineProps<{
-  doors: Like<Door>[];
+  doors: VueLike<Door>[];
 }>();
 
 const store = advent22Store();

ui/src/components/calendar/CalendarDoor.vue

@@ -17,14 +17,14 @@
 import { Door } from "@/lib/rects/door";
 import { advent22Store } from "@/lib/store";
 
-import { Like } from "@/lib/helpers";
+import { VueLike } from "@/lib/helpers";
 import SVGRect from "./SVGRect.vue";
 
 const store = advent22Store();
 
 withDefaults(
   defineProps<{
-    door: Like<Door>;
+    door: VueLike<Door>;
     force_visible?: boolean;
   }>(),
   {

ui/src/components/calendar/SVGRect.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script setup lang="ts">
-import { Like, loading_success } from "@/lib/helpers";
+import { VueLike, loading_success } from "@/lib/helpers";
 import { Rectangle } from "@/lib/rects/rectangle";
 import { advent22Store } from "@/lib/store";
 import { computed } from "vue";
@@ -39,7 +39,7 @@ withDefaults(
   defineProps<{
     variant: BulmaVariant;
     visible?: boolean;
-    rectangle: Like<Rectangle>;
+    rectangle: VueLike<Rectangle>;
   }>(),
   {
     visible: true,

ui/src/components/editor/DoorCanvas.vue

@@ -29,7 +29,7 @@ import { Rectangle } from "@/lib/rects/rectangle";
 import { Vector2D } from "@/lib/rects/vector2d";
 import { computed, ref } from "vue";
 
-import { Like } from "@/lib/helpers";
+import { VueLike } from "@/lib/helpers";
 import CalendarDoor from "../calendar/CalendarDoor.vue";
 import SVGRect from "../calendar/SVGRect.vue";
 import ThouCanvas from "../calendar/ThouCanvas.vue";
@@ -37,9 +37,9 @@ import ThouCanvas from "../calendar/ThouCanvas.vue";
 type CanvasState =
   | { kind: "idle" }
   | { kind: "drawing" }
-  | { kind: "dragging"; door: Like<Door>; origin: Vector2D };
+  | { kind: "dragging"; door: VueLike<Door>; origin: Vector2D };
 
-const model = defineModel<Like<Door>[]>({ required: true });
+const model = defineModel<VueLike<Door>[]>({ required: true });
 
 const MIN_RECT_AREA = 300;
 const state = ref<CanvasState>({ kind: "idle" });
@@ -47,7 +47,7 @@ const preview = ref(new Rectangle());
 
 const preview_visible = computed(() => state.value.kind !== "idle");
 
-function pop_door(point: Vector2D): Like<Door> | undefined {
+function pop_door(point: Vector2D): VueLike<Door> | undefined {
   const idx = model.value.findIndex((rect) => rect.position.contains(point));
 
   if (idx === -1) {

ui/src/components/editor/DoorChooser.vue

@@ -11,7 +11,7 @@
       </ul>
     </div>
     <figure class="image is-unselectable">
-      <img :src="ensure_loaded(store.background_image).data_url" />
+      <img :src="unwrap_loading(store.background_image).data_url" />
       <ThouCanvas>
         <PreviewDoor
           v-for="(_, index) in model"
@@ -24,13 +24,13 @@
 </template>
 
 <script setup lang="ts">
-import { ensure_loaded, Like } from "@/lib/helpers";
+import { VueLike, unwrap_loading } from "@/lib/helpers";
 import { Door } from "@/lib/rects/door";
 import { advent22Store } from "@/lib/store";
 
 import ThouCanvas from "../calendar/ThouCanvas.vue";
 import PreviewDoor from "./PreviewDoor.vue";
 
-const model = defineModel<Like<Door>[]>({ required: true });
+const model = defineModel<VueLike<Door>[]>({ required: true });
 const store = advent22Store();
 </script>

ui/src/components/editor/DoorPlacer.vue

@@ -9,19 +9,19 @@
       </ul>
     </div>
     <figure class="image is-unselectable">
-      <img :src="ensure_loaded(store.background_image).data_url" />
+      <img :src="unwrap_loading(store.background_image).data_url" />
       <DoorCanvas v-model="model" />
     </figure>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ensure_loaded, Like } from "@/lib/helpers";
+import { VueLike, unwrap_loading } from "@/lib/helpers";
 import { Door } from "@/lib/rects/door";
 import { advent22Store } from "@/lib/store";
 
 import DoorCanvas from "./DoorCanvas.vue";
 
-const model = defineModel<Like<Door>[]>({ required: true });
+const model = defineModel<VueLike<Door>[]>({ required: true });
 const store = advent22Store();
 </script>

ui/src/components/editor/PreviewDoor.vue

@@ -26,10 +26,10 @@
 import { Door } from "@/lib/rects/door";
 import { ref, useTemplateRef } from "vue";
 
-import { Like, unwrap_like, wait_for } from "@/lib/helpers";
+import { VueLike, unwrap_vuelike, wait_for } from "@/lib/helpers";
 import SVGRect from "../calendar/SVGRect.vue";
 
-const model = defineModel<Like<Door>>({ required: true });
+const model = defineModel<VueLike<Door>>({ required: true });
 const day_input = useTemplateRef("day_input");
 
 const day_str = ref("");
@@ -46,7 +46,7 @@ function on_click(event: MouseEvent) {
   }
 
   if (editing.value) {
-    unwrap_like(model.value).day = day_str.value;
+    unwrap_vuelike(model.value).day = day_str.value;
   } else {
     wait_for(
       () => day_input.value !== null,
@@ -63,7 +63,7 @@ function on_keydown(event: KeyboardEvent) {
   }
 
   if (event.key === "Enter") {
-    unwrap_like(model.value).day = day_str.value;
+    unwrap_vuelike(model.value).day = day_str.value;
     toggle_editing();
   } else if (event.key === "Delete") {
     model.value.day = -1;

ui/src/lib/helpers.ts

@@ -12,9 +12,9 @@ export function objForEach<T>(
   }
 }
 
-export type Like<T> = T | UnwrapRef<T>;
+export type VueLike<T> = T | UnwrapRef<T>;
 
-export function unwrap_like<T>(value: Like<T>): T {
+export function unwrap_vuelike<T>(value: VueLike<T>): T {
   return value as T;
 }
 
@@ -27,8 +27,8 @@ export function loading_success<T>(o: Loading<T>): o is T {
   return true;
 }
 
-export function ensure_loaded<T>(o: Loading<T>): T {
+export function unwrap_loading<T>(o: Loading<T>): T {
-  if (!loading_success(o)) throw "";
+  if (!loading_success(o)) throw null;
 
   return o;
 }

ui/src/lib/rects/door.ts

@@ -1,4 +1,4 @@
-import { Like, unwrap_like } from "../helpers";
+import { VueLike, unwrap_vuelike } from "../helpers";
 import { DoorSaved } from "../model";
 import { Rectangle } from "./rectangle";
 import { Vector2D } from "./vector2d";
@@ -9,11 +9,11 @@ export class Door {
   private _day = Door.MIN_DAY;
   public position: Rectangle;
 
-  constructor(position: Like<Rectangle>);
+  constructor(position: VueLike<Rectangle>);
-  constructor(position: Like<Rectangle>, day: number);
+  constructor(position: VueLike<Rectangle>, day: number);
-  constructor(position: Like<Rectangle>, day = Door.MIN_DAY) {
+  constructor(position: VueLike<Rectangle>, day = Door.MIN_DAY) {
     this.day = day;
-    this.position = unwrap_like(position);
+    this.position = unwrap_vuelike(position);
   }
 
   public get day(): number {