feat(html/js): setup canvas for both babylon and p5js

Co-authored-by: Copilot <copilot@github.com>
2026-05-06 00:33:08 +09:00
parent 66f5f35a9e
commit 2acb724e1f
3 changed files with 309 additions and 48 deletions
--- a/multi_sketch.html
+++ b/multi_sketch.html
@@ -2,12 +2,24 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
+    <link rel="stylesheet" type="text/css" href="/css/style.css" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
+    <title>Untitled Maze Game</title>
  </head>
-  <body>
+  <body class="maze-page">
+    <main class="maze-layout">
+      <section class="panel">
+        <div class="panel-label">Babylon Scene</div>
+        <canvas id="renderCanvas"></canvas>
+      </section>
+
+      <section class="panel">
+        <div class="panel-label">p5 Control Panel</div>
+        <div id="p5-panel"></div>
+      </section>
+    </main>
+
    <script type="module" src="/src/multi_sketch.js"></script>
-    <canvas id="renderCanvas"></canvas>
  </body>
 </html>