feat(services): refactor structure.

1 files changed, 47 insertions, 0 deletions

diff --git a/services/docker/nginx/sites/www/src/main.ts b/services/docker/nginx/sites/www/src/main.ts
new file mode 100644
index 0000000..09e8661
--- /dev/null
+++ b/services/docker/nginx/sites/www/src/main.ts
@@ -0,0 +1,47 @@
+import "./style.css";
+
+class Emotion {
+  static opposite_map = new Map<Emotion, Emotion>();
+
+  constructor(public readonly name: string) {
+  }
+
+  get opposite(): Emotion {
+    return Emotion.opposite_map.get(this)!;
+  }
+
+  get element(): HTMLDivElement {
+    return document.querySelector<HTMLDivElement>(`.slogan.${this.name}`)!
+  }
+
+  get elementHeight(): number {
+    return this.element.clientHeight;
+  }
+
+  apply() {
+    localStorage.setItem(emotionKey, this.name);
+    document.body.dataset.emotion = this.name;
+    document.body.style.paddingTop = `${this.elementHeight}px`;
+  }
+}
+
+const happy = new Emotion("happy")
+const angry = new Emotion("angry")
+Emotion.opposite_map.set(happy, angry)
+Emotion.opposite_map.set(angry, happy)
+
+const emotionKey = "emotion";
+const savedEmotionName = localStorage.getItem(emotionKey) ?? happy.name;
+
+for (const emotion of [happy, angry]) {
+  if (emotion.name == savedEmotionName) {
+    emotion.apply();
+  }
+  emotion.element.addEventListener("click", () => {
+    emotion.opposite.apply();
+  });
+}
+
+setTimeout(() => {
+  document.body.style.transition = "padding-top 0.8s";
+});