1 files changed, 34 insertions, 80 deletions
diff --git a/docker/nginx/sites/www/src/main.ts b/docker/nginx/sites/www/src/main.ts
index 2f09deb..043cb94 100644
--- a/docker/nginx/sites/www/src/main.ts
+++ b/docker/nginx/sites/www/src/main.ts
@@ -1,97 +1,51 @@
 import "./style.css";
 
-import { fetchTodos } from "./todos";
+class Emotion {
+  static opposite_map = new Map<Emotion, Emotion>();
 
-const happy = "happy" as const;
-const angry = "angry" as const;
-type Emotion = typeof happy | typeof angry;
-
-function emotionOpposite(emotion: Emotion): Emotion {
-  if (emotion === happy) {
-    return angry;
-  } else {
-    return happy;
+  constructor(public name: string) {
   }
-}
 
-function emotionElement(emotion: Emotion): HTMLDivElement {
-  return document.querySelector<HTMLDivElement>(`.slogan.${emotion}`)!;
-}
+  get opposite(): Emotion {
+    return Emotion.opposite_map.get(this)!;
+  }
 
-function emotionElementHeight(emotion: Emotion): number {
-  return emotionElement(emotion).clientHeight;
-}
+  get element(): HTMLDivElement {
+    return document.querySelector<HTMLDivElement>(`.slogan.${this.name}`)!
+  }
 
-function updateBodyTopPadding(emotion: Emotion): void {
-  document.body.style.paddingTop = `${emotionElementHeight(emotion)}px`;
-}
+  get elementHeight(): number {
+    return this.element.clientHeight;
+  }
 
-const sloganEmotionKey = "sloganEmotion";
+  updateBodyTopPadding(): void {
+  }
 
-const savedEmotion =
-  (localStorage.getItem(sloganEmotionKey) as Emotion | null) ?? happy;
-if (savedEmotion !== happy && savedEmotion !== angry) {
-  console.error(`Invalid saved emotion: ${savedEmotion}`);
+  apply() {
+    localStorage.setItem(emotionKey, this.name);
+    document.body.dataset.emotion = this.name;
+    document.body.style.paddingTop = `${this.elementHeight}px`;
+  }
 }
 
-updateBodyTopPadding(savedEmotion);
-// Then we add transition animation.
-setTimeout(() => {
-  document.body.style.transition = "padding-top 1s";
-});
+const happy = new Emotion("happy")
+const angry = new Emotion("angry")
+Emotion.opposite_map.set(happy, angry)
+Emotion.opposite_map.set(angry, happy)
 
-const sloganContainer = document.querySelector(
-  ".slogan-container",
-) as HTMLDivElement;
-
-setTimeout(() => {
-  sloganContainer.dataset.sloganEmotion = savedEmotion;
-}, 500);
-
-const sloganLoadedPromise = new Promise<void>((resolve) => {
-  setTimeout(() => {
-    resolve();
-  }, 1500);
-});
+const emotionKey = "emotion";
+const savedEmotionName = localStorage.getItem(emotionKey) ?? happy.name;
+document.body.dataset.emotion = savedEmotionName;
 
 for (const emotion of [happy, angry]) {
-  emotionElement(emotion).addEventListener("click", () => {
-    const opposite = emotionOpposite(emotion);
-    localStorage.setItem(sloganEmotionKey, opposite);
-    sloganContainer.dataset.sloganEmotion = opposite;
-    updateBodyTopPadding(opposite);
-  });
-}
-
-async function loadTodos(syncWith: Promise<unknown>): Promise<void> {
-  const todoMessage = document.getElementById("todo-message")!;
-  const todoContainer = document.getElementById("todo-container")!;
-
-  try {
-    const todosPromise = fetchTodos();
-    await syncWith; // Let's wait this first.
-    const todos = await todosPromise;
-    todos.forEach((item, index) => {
-      const { status, title, closed } = item;
-      const li = document.createElement("li");
-      li.dataset.status = closed ? "closed" : "open";
-      li.style.animationDelay = `${index * 0.04}s`;
-      // The color from api server is kind of ugly at present.
-      // li.style.background = color;
-      const statusSpan = document.createElement("span");
-      const titleSpan = document.createElement("span");
-      statusSpan.textContent = status;
-      titleSpan.textContent = title;
-      li.appendChild(statusSpan);
-      li.append(" : ");
-      li.append(titleSpan);
-      todoContainer.appendChild(li);
-    });
-    todoMessage.parentElement!.removeChild(todoMessage);
-  } catch (e) {
-    todoMessage.style.color = "red";
-    todoMessage.textContent = (e as Error).message;
+  if (emotion.name == savedEmotionName) {
+    emotion.apply();
   }
+  emotion.element.addEventListener("click", () => {
+    emotion.opposite.apply();
+  });
 }
 
-loadTodos(sloganLoadedPromise);
+setTimeout(() => {
+  document.body.style.transition = "padding-top 0.8s";
+});