UIdesign v5

src/iframe/life-game.js

@@ -40,6 +40,14 @@ const table = document.getElementById("game-board");
 
 //盤面をBoardに従って変更する関数達(Boardを変更したら実行する)
 function renderBoard() {
+  // bodyを中央配置に設定
+  document.body.style.display = "flex";
+  document.body.style.justifyContent = "center";
+  document.body.style.alignItems = "center";
+  document.body.style.minHeight = "100vh";
+  document.body.style.margin = "0";
+  document.body.style.padding = "0";
+
   // 初回の盤面生成
   table.innerHTML = "";
   for (let i = 0; i < boardSize; i++) {
@@ -74,7 +82,6 @@ function renderBoard() {
               }
             }
             rerender();
-            generationChange(0);
             stop();
           } else {
             window.parent.postMessage(
@@ -172,7 +179,6 @@ document.addEventListener("mouseup", () => {
 });
 
 renderBoard();
-progressBoard();
 
 function generationChange(num) {
   //現在の世代を表すgenerationFigureを変更し、文章も変更

src/lib/components/GlobalToast.svelte

@@ -14,7 +14,8 @@
 </script>
 
 {#if toast.visible}
-  <div class="toast toast-middle toast-center">
+  <!-- 最前面に配置 -->
+  <div class="toast toast-middle toast-center z-[9999]">
     <div class={`alert ${alertClass} p-3 text-lg`}>
       <div>
         <span>{toast.message}</span>

src/lib/icons/index.ts

@@ -9,3 +9,4 @@ export { default as language } from "./language.svg";
 export { default as reset } from "./reset.svg";
 export { default as accelerate } from "./accelerate.svg";
 export { default as decelerate } from "./decelerate.svg";
+export { default as questionmark } from "./questionmark.svg";

src/routes/+page.svelte

@@ -163,13 +163,23 @@
     <img class="size-6" src={icons.reset} alt="Reset" />
   </button>
 
-  <label class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] swap mx-5">
+  <label class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] swap ml-5">
     <input type="checkbox" bind:checked={showEditor} />
     <div class="text-black">
       <img class="size-6" src={icons.CodeBracket} alt="Code Bracket" />
     </div>
   </label>
 
+  <button
+    class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] ml-5"
+    onclick={() => {
+      // ここにチュートリアル・ヘルプを配置 (初起動時に表示もあり)
+      // 他の方法で実装してもよし
+    }}
+  >
+    <img class="size-6" src={icons.questionmark} alt="Info" />
+  </button>
+
   <button
     class="btn btn-ghost btn-circle hover:bg-[rgb(220,220,220)] mx-5"
     onclick={() => {