From bb9870176ff34dd1a026168de88eb2cb74faa338 Mon Sep 17 00:00:00 2001
From: Sped0n <realsped0n@outlook.com>
Date: Sun, 29 Oct 2023 12:31:48 +0800
Subject: [PATCH] refactor(stage.ts): rename class 'watchable' to 'Watchable'
 for consistency and clarity feat(utils.ts): add Watchable class to provide a
 generic watchable object with getter, setter, and watcher functionality

---
 assets/ts/stage.ts | 37 ++++++++++++++-----------------------
 assets/ts/utils.ts | 18 ++++++++++++++++++
 2 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/assets/ts/stage.ts b/assets/ts/stage.ts
index f2f8ee9..8b22caf 100644
--- a/assets/ts/stage.ts
+++ b/assets/ts/stage.ts
@@ -1,34 +1,20 @@
 import { incIndex, getState } from './state'
 import { gsap, Power3 } from 'gsap'
 import { ImageJSON } from './resources'
+import { Watchable } from './utils'
+
+// types
 
 export type HistoryItem = { i: number; x: number; y: number }
 
+// variables
+
 let imgs: HTMLImageElement[] = []
-
-class watchable<T> {
-  constructor(private obj: T) {}
-  private watchers: (() => void)[] = []
-
-  get(): T {
-    return this.obj
-  }
-
-  set(e: T): void {
-    this.obj = e
-    this.watchers.forEach((watcher) => watcher())
-  }
-
-  addWatcher(watcher: () => void): void {
-    this.watchers.push(watcher)
-  }
-}
-
 let last = { x: 0, y: 0 }
-export const cordHist = new watchable<HistoryItem[]>([])
-export const isOpen = new watchable<boolean>(false)
-export const isAnimating = new watchable<boolean>(false)
-export const active = new watchable<boolean>(false)
+export const cordHist = new Watchable<HistoryItem[]>([])
+export const isOpen = new Watchable<boolean>(false)
+export const isAnimating = new Watchable<boolean>(false)
+export const active = new Watchable<boolean>(false)
 
 // getter
 
@@ -163,12 +149,17 @@ export function minimizeImage(): void {
 // init
 
 export function initStage(ijs: ImageJSON[]): void {
+  // create stage element
   createStage(ijs)
+  // get stage
   const stage = document.getElementsByClassName('stage').item(0) as HTMLDivElement
+  // get image elements
   imgs = Array.from(stage.getElementsByTagName('img'))
+  // event listeners
   stage.addEventListener('click', () => expandImage())
   stage.addEventListener('keydown', () => expandImage())
   window.addEventListener('mousemove', onMouse)
+  // watchers
   isOpen.addWatcher(() => active.set(isOpen.get() && !isAnimating.get()))
   isAnimating.addWatcher(() => active.set(isOpen.get() && !isAnimating.get()))
   cordHist.addWatcher(() => setPositions())
diff --git a/assets/ts/utils.ts b/assets/ts/utils.ts
index 63743a6..e2e21e7 100644
--- a/assets/ts/utils.ts
+++ b/assets/ts/utils.ts
@@ -13,3 +13,21 @@ export function expand(num: number): string {
 export function isMobile(): boolean {
   return window.matchMedia('(hover: none)').matches
 }
+
+export class Watchable<T> {
+  constructor(private obj: T) {}
+  private watchers: (() => void)[] = []
+
+  get(): T {
+    return this.obj
+  }
+
+  set(e: T): void {
+    this.obj = e
+    this.watchers.forEach((watcher) => watcher())
+  }
+
+  addWatcher(watcher: () => void): void {
+    this.watchers.push(watcher)
+  }
+}