feat: improve design (#6)

rei1024 · Oct 19, 2024 · f705ffa · f705ffa
1 parent dc38315
commit f705ffa
Show file tree

Hide file tree

Showing 10 changed files with 188 additions and 34 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en" prefix="og: https://ogp.me/ns#">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="icon" type="image/png" href="/oscilloscope-galaxy.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Oscilloscope</title>
 
@@ -34,28 +34,52 @@
       <h1>Oscilloscope</h1>
     </header>
     <main>
-      <textarea
-        id="input"
-        rows="8"
-        placeholder="x = 3, y = 1, rule = B3/S23
+      <div class="box">
+        <h2>
+          <a
+            href="https://conwaylife.com/wiki/Run_Length_Encoded"
+            target="_blank"
+            rel="noopener"
+            >RLE</a
+          >
+          Input
+        </h2>
+        <textarea
+          id="input"
+          rows="8"
+          placeholder="x = 3, y = 1, rule = B3/S23
 3o!"
-      ></textarea>
-      <select id="example-oscillators">
-        <option value="">-- Example --</option>
-      </select>
-      <button id="analyze">Analyze</button>
-      <div id="message"></div>
-      <canvas id="canvas"></canvas>
-      <div>
-        <input
-          id="anim-frequency"
-          type="range"
-          style="width: 100%; display: none"
-        />
-        <label id="anim-frequency-label" class="tabular-nums"></label>
+        ></textarea>
+        <select id="example-oscillators">
+          <option value="">(Example)</option>
+        </select>
       </div>
-      <table id="period-coolor-table" style="margin-right: auto"></table>
-      <div>
+
+      <button class="btn" id="analyze">Analyze</button>
+      <div class="box" id="message" style="display: none"></div>
+      <div id="map-box" class="box" style="display: none">
+        <h2>Map</h2>
+        <canvas id="canvas"></canvas>
+        <div>
+          <input
+            id="anim-frequency"
+            type="range"
+            style="width: 100%; display: none"
+          />
+          <label
+            for="anim-frequency"
+            id="anim-frequency-label"
+            class="tabular-nums"
+          ></label>
+          <pre
+            style="display: inline"
+          ><span id="generation" class="tabular-nums"></span></pre>
+        </div>
+        <table id="period-coolor-table" style="margin-right: auto"></table>
+      </div>
+
+      <div id="data-box" class="box" style="display: none">
+        <h2>Data</h2>
         <table id="output-table" style="display: none">
           <tr>
             <th>Period</th>

diff --git a/public/data/cribbage.rle b/public/data/cribbage.rle
@@ -0,0 +1,10 @@
+#N Cribbage
+#O Mitchell Riley
+#C Discovered on July 14, 2023
+#C This was the first period-19 oscillator to be found.
+#C https://conwaylife.com/wiki/Cribbage
+x = 32, y = 21, rule = B3/S23
+4b2o$4bo$b2obo10bo$bo2b2o9b3o$3bo2bo11bo$bob3obo9b2o$obo4bo$o2b3o15bo$
+b2o2bo5bo8b2o7b2o$3b2o6bo16bobo$3bo7bo8bo7bo$bobo16bo6b2o$b2o7b2o8bo5b
+o2b2o$10bo15b3o2bo$24bo4bobo$13b2o9bob3obo$13bo11bo2bo$14b3o9b2o2bo$
+16bo10bob2o$27bo$26b2o!
diff --git a/public/data/davidhilbert.rle b/public/data/davidhilbert.rle
@@ -0,0 +1,9 @@
+#N David Hilbert
+#C A period-23 oscillator found by Luka Okanishi on November 24, 2019
+#C based on a partial result by Aidan F. Pierce.
+x = 33, y = 26, rule = B3/S23
+7b2o15b2o$8bo15bo$6bo19bo$6b5o11b5o$10bo11bo$4b4o17b4o$4bo2bo17bo2bo$
+21bo$21bo$9bo4b2ob2o2bob2o$8b3o3b2obo6b2o$7bo2b2o6bo$7b3o12bo$22bobo$
+3b2o11b2o4bo2bo2b2o$3bo12b2o5b2o4bo$2obo12b2o11bob2o$ob2ob2o19b2ob2obo
+$5bo21bo$5bobo17bobo$6b2o17b2o$10bo11bo$6b5o11b5o$6bo19bo$8bo15bo$7b2o
+15b2o!
diff --git a/public/data/statorlessp3.rle b/public/data/statorlessp3.rle
@@ -0,0 +1,10 @@
+#N statorlessp3.rle
+#O Jason Summers, 2012
+#C https://conwaylife.com/wiki/Statorless_p3
+#C https://conwaylife.com/patterns/statorlessp3.rle
+x = 31, y = 28, rule = B3/S23
+9bobo5bo3bo5bobo$8bo3bo4bo3bo4bo3bo$9bo7bo3bo7bo$11b2ob2obo3bob2ob2o$
+17bo3bo$10bo3bo9bo3bo$8bobo17bobo2$8bo19bo$7b2o18b2o$7bo19bo$5bo2bo16b
+o2bo$o4bo14bo4bo$4ob2ob3o9b4ob2ob3o$3ob2ob4o9b3ob2ob4o$5bo4bo14bo4bo$
+2bo2bo16bo2bo$3bo19bo$2b2o18b2o$2bo19bo2$obo17bobo$2bo3bo9bo3bo$9bo3bo
+$3b2ob2obo3bob2ob2o$bo7bo3bo7bo$o3bo4bo3bo4bo3bo$bobo5bo3bo5bobo!
diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/public/oscilloscope-galaxy.png b/public/oscilloscope-galaxy.png
diff --git a/src/app.ts b/src/app.ts
@@ -1,7 +1,13 @@
 import { BitGrid } from "@ca-ts/algo/bit";
 import { bitGridFromData, type AnalyzeResult } from "./lib/analyzeOscillator";
 import { Valve } from "./ui/valve";
-import { $animFrequency, $animFrequencyLabel } from "./bind";
+import {
+  $animFrequency,
+  $animFrequencyLabel,
+  $dataBox,
+  $generation,
+  $mapBox,
+} from "./bind";
 import { setPeriodColorTable } from "./ui/periodColorTable";
 
 const cellSize = 10;
@@ -17,8 +23,9 @@ const frequencyList = [
 export function periodToColor(periodList: number[], period: number) {
   const index = periodList.findIndex((t) => t === period) ?? 0;
   // 80% 0.1
-  return `oklch(95% 0.35 ${(index * 360) / periodList.length})`;
+  return `oklch(92% 0.35 ${(index * 360) / periodList.length})`;
   // return `lch(70% 70 ${(index * 360) / periodList.length})`;
+  // return `hsl(${(index * 360) / periodList.length} 100% 70%)`;
 }
 
 export class App {
@@ -102,9 +109,19 @@ export class App {
 
     $animFrequencyLabel.textContent =
       this.valve.frequency.toLocaleString() + "Hz";
+    $generation.textContent =
+      "generation = " +
+      this.gen
+        .toString()
+        .padStart(this.histories.length.toString().length, " ") +
+      "/" +
+      this.histories.length;
   }
 
   setup(data: AnalyzeResult) {
+    $mapBox.style.display = "";
+    $dataBox.style.display = "";
+
     const $canvas = this.$canvas;
     $canvas.width = (data.boundingBox.sizeX + safeArea * 2) * cellSize;
     $canvas.height = (data.boundingBox.sizeY + safeArea * 2) * cellSize;

diff --git a/src/bind.ts b/src/bind.ts
@@ -1,4 +1,8 @@
 export const $message = document.querySelector("#message") as HTMLElement;
+
+export const $mapBox = document.querySelector("#map-box") as HTMLElement;
+export const $dataBox = document.querySelector("#data-box") as HTMLElement;
+
 export const $outputTable = document.querySelector(
   "#output-table"
 ) as HTMLElement;
@@ -63,6 +67,8 @@ export const $animFrequencyLabel = document.querySelector(
   "#anim-frequency-label"
 ) as HTMLInputElement;
 
+export const $generation = document.querySelector("#generation") as HTMLElement;
+
 export const $periodColorTable = document.querySelector(
   "#period-coolor-table"
 ) as HTMLTableElement;
diff --git a/src/main.ts b/src/main.ts
@@ -23,14 +23,23 @@ function post(req: WorkerRequestMessage) {
   worker.postMessage(req);
 }
 
+let analyzingDelayTimeoutId: number | null = null;
+
 worker.addEventListener("message", (e) => {
   const message = e.data as WorkerResponseMessage;
   $message.textContent = "";
+  $message.style.display = "none";
   $outputTable.style.display = "none";
 
   $analyzeButton.disabled = false;
+  if (analyzingDelayTimeoutId) {
+    clearTimeout(analyzingDelayTimeoutId);
+  }
+  $analyzeButton.textContent = "Analyze";
   if (message.kind === "response-error") {
+    $message.style.display = "block";
     $message.textContent = "Error: " + message.message;
+    $message.style.backgroundColor = "#fecaca";
   } else {
     $outputTable.style.display = "block";
     const data = message.data;
@@ -41,6 +50,12 @@ worker.addEventListener("message", (e) => {
 
 $analyzeButton.addEventListener("click", () => {
   $analyzeButton.disabled = true;
+  if (analyzingDelayTimeoutId) {
+    clearTimeout(analyzingDelayTimeoutId);
+  }
+  analyzingDelayTimeoutId = setTimeout(() => {
+    $analyzeButton.textContent = "Analyzing";
+  }, 200);
   post({ kind: "request-analyze", rle: $input.value });
 });
 
@@ -60,6 +75,18 @@ const examples = [
     src: "cisfigureeightonpentadecathlon.rle",
   },
   { name: "Kok's galaxy", src: "koksgalaxy.rle" },
+  {
+    name: "Statorless p3",
+    src: "statorlessp3.rle",
+  },
+  {
+    name: "Cribbage",
+    src: "cribbage.rle",
+  },
+  {
+    name: "David Hilbert",
+    src: "davidhilbert.rle",
+  },
 ];
 
 for (const example of examples) {

diff --git a/src/style.css b/src/style.css
@@ -36,6 +36,15 @@ h1 {
   text-align: center;
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: normal;
+}
+
 main {
   display: grid;
   align-items: stretch;
@@ -73,3 +82,56 @@ table {
 #output-table th {
   text-align: right;
 }
+
+textarea {
+  border-radius: 8px;
+  padding: 4px;
+}
+
+select {
+  padding: 6px;
+  border-radius: 6px;
+}
+
+.display-none {
+  display: none;
+}
+
+.btn {
+  background-color: #ffffff; /* 背景色 */
+  border: none; /* ボーダーなし */
+  border: 0.5px solid #bbbbbb;
+  color: black; /* テキストカラー */
+  padding: 8px 32px; /* パディング */
+  text-align: center; /* テキスト中央揃え */
+  text-decoration: none; /* テキストの下線をなくす */
+  display: inline-block; /* インラインブロックにする */
+  font-size: 16px; /* フォントサイズ */
+  cursor: pointer; /* マウスオーバー時にポインターを表示 */
+  border-radius: 8px; /* 角を丸くする */
+  transition: background-color 0.3s ease; /* 背景色を変化させるアニメーション */
+}
+
+.btn:hover {
+  background-color: #ecefec; /* ホバー時の背景色 */
+}
+
+.btn:active {
+  background-color: #d5d5d5; /* 背景色 */
+}
+
+.btn:disabled {
+  background-color: #d5d5d5; /* 背景色 */
+  cursor: auto;
+}
+
+.box {
+  display: grid;
+  align-items: stretch;
+  margin: auto;
+  gap: 8px;
+  width: 100%;
+  border: 1px solid #bbbbbb;
+  border-radius: 8px;
+  padding: 8px;
+}