-
-
+ >
+
-
+
+
+
+
+
+
+
+ Map
+ +
+
+
+
+ +
+
Data
| Period | diff --git a/public/data/cribbage.rle b/public/data/cribbage.rle new file mode 100644 index 0000000..776a3cc --- /dev/null +++ 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! \ No newline at end of file diff --git a/public/data/davidhilbert.rle b/public/data/davidhilbert.rle new file mode 100644 index 0000000..8f35b26 --- /dev/null +++ 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! \ No newline at end of file diff --git a/public/data/statorlessp3.rle b/public/data/statorlessp3.rle new file mode 100644 index 0000000..14fe742 --- /dev/null +++ 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! \ No newline at end of file diff --git a/public/favicon.svg b/public/favicon.svg deleted file mode 100644 index b65c9eb..0000000 --- a/public/favicon.svg +++ /dev/null @@ -1,11 +0,0 @@ - \ No newline at end of file diff --git a/public/oscilloscope-galaxy.png b/public/oscilloscope-galaxy.png new file mode 100644 index 0000000..05e69e1 Binary files /dev/null and b/public/oscilloscope-galaxy.png differ diff --git a/src/app.ts b/src/app.ts index 60aa15d..ca17704 100644 --- 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 index 4567bf2..b20bbee 100644 --- 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 index 709425c..1dcc12b 100644 --- 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 index 7b11a9c..ec7e724 100644 --- 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; +}
|---|