JS のコードを切りだしておく

mitoma · Oct 20, 2024 · 4260be6 · 4260be6
1 parent a6f9179
commit 4260be6
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 28 deletions.
diff --git a/site/src/custom_js/showcase.js b/site/src/custom_js/showcase.js
@@ -0,0 +1,26 @@
+import init, { send_log, toggle_direction, look_current_and_centering, change_theme_dark, change_theme_light, zoom_in, zoom_out, toggle_psychedelic } from "../wasm/showcase/showcase.js";
+init().then(() => {
+    console.log("WASM Loaded");
+    send_log("Hello from JS");
+    document.getElementById("toggle-direction-button").addEventListener("click", () => {
+        toggle_direction();
+    });
+    document.getElementById("centering-button").addEventListener("click", () => {
+        look_current_and_centering();
+    });
+    document.getElementById("dark-mode-button").addEventListener("click", () => {
+        change_theme_dark();
+    });
+    document.getElementById("light-mode-button").addEventListener("click", () => {
+        change_theme_light();
+    });
+    document.getElementById("zoom-in-button").addEventListener("click", () => {
+        zoom_in();
+    });
+    document.getElementById("zoom-out-button").addEventListener("click", () => {
+        zoom_out();
+    });
+    document.getElementById("psychedelic-mode-button").addEventListener("click", () => {
+        toggle_psychedelic();
+    });
+});
diff --git a/site/src/showcase.md b/site/src/showcase.md
@@ -15,34 +15,7 @@ Click area and edit it!
 
 <input id="psychedelic-mode-button" type="button" value="TOGGLE PSYCHEDELIC MODE"></input>
 
-<script type="module">
-  import init, { send_log, toggle_direction, look_current_and_centering, change_theme_dark, change_theme_light, zoom_in, zoom_out, toggle_psychedelic } from "./wasm/showcase/showcase.js";
-  init().then(() => {
-    console.log("WASM Loaded");
-    send_log("Hello from JS");
-    document.getElementById("toggle-direction-button").addEventListener("click", () => {
-      toggle_direction();
-    });
-    document.getElementById("centering-button").addEventListener("click", () => {
-      look_current_and_centering();
-    });
-    document.getElementById("dark-mode-button").addEventListener("click", () => {
-      change_theme_dark();
-    });
-    document.getElementById("light-mode-button").addEventListener("click", () => {
-      change_theme_light();
-    });
-    document.getElementById("zoom-in-button").addEventListener("click", () => {
-      zoom_in();
-    });
-    document.getElementById("zoom-out-button").addEventListener("click", () => {
-      zoom_out();
-    });
-    document.getElementById("psychedelic-mode-button").addEventListener("click", () => {
-      toggle_psychedelic();
-    });
-  });
-</script>
+<script type="module" src="./custom_js/showcase.js"></script>
 
 Usage
 - Allow key : move curser.