Improve layout, translucently redraw (f1833ac)

functle.html

@@ -4,23 +4,28 @@
         <style>
             body { font-family: sans-serif; }
             #plot { border: 1px solid #000; }
-            #grid { display: grid; grid-template-rows: repeat(6, 1fr); gap: 5px; margin-top: 10px; }
-            .row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
-            .cell { width: 40px; height: 40px; border: 1px solid #ccc; display: flex; align-items: center; justify-content: center; font-weight: bold; }
+            #grid { border-collapse: collapse; margin-top: 10px; }
+            #grid td { width: 40px; height: 40px; border: 1px solid #ccc; text-align: center; vertical-align: middle; font-weight: bold; }
             .grey { background: #787c7e; color: #fff; }
             .yellow { background: #c9b458; color: #fff; }
             .green { background: #6aaa64; color: #fff; }
             #message { color: red; margin-top: 5px; }
+            .container { display: flex; }
+            .side { margin-left: 20px; }
         </style>
     </head>
     <body>
+        <div class="container">
             <canvas id="plot" width="400" height="400"></canvas>
+            <div class="side">
                 <div>
                     <input id="guessInput" placeholder="token1 token2 ... token6" style="width: 300px;">
                     <button id="submitBtn">Submit</button>
                     <div id="message"></div>
                 </div>
-        <div id="grid"></div>
+                <table id="grid"></table>
+            </div>
+        </div>
         <script>
             const allowed = {
                 terminals: ["x", "1", "2"],
@@ -42,17 +47,60 @@
                 targetYs.push(evalPostfix(target, x));
             }
             const yMin = Math.min(...targetYs), yMax = Math.max(...targetYs);
+            const guessYsList = [];
+            function drawAxes() {
+                ctx.clearRect(0, 0, width, height);
+                ctx.beginPath();
+                const y0 = mapY(0);
+                ctx.moveTo(0, y0);
+                ctx.lineTo(width, y0);
+                const x0 = mapX(0);
+                ctx.moveTo(x0, 0);
+                ctx.lineTo(x0, height);
+                // ticks at (1,0) and (-1,0)
+                [1, -1].forEach(val => {
+                    const px = mapX(val);
+                    ctx.moveTo(px, y0 - 5);
+                    ctx.lineTo(px, y0 + 5);
+                });
+                // ticks at (0,1) and (0,-1)
+                [1, -1].forEach(val => {
+                    const py = mapY(val);
+                    ctx.moveTo(x0 - 5, py);
+                    ctx.lineTo(x0 + 5, py);
+                });
+                ctx.strokeStyle = "black";
+                ctx.stroke();
+            }
+            function drawCurve(ys, color) {
+                ctx.beginPath();
+                for (let i = 0; i < xs.length; i++) {
+                    const px = mapX(xs[i]), py = mapY(ys[i]);
+                    if (i === 0) ctx.moveTo(px, py);
+                    else ctx.lineTo(px, py);
+                }
+                ctx.strokeStyle = color;
+                ctx.stroke();
+            }
+            function redrawAll() {
+                drawAxes();
+                drawCurve(targetYs, "green");
+                guessYsList.forEach((ys, idx) => {
+                    const color = idx < guessYsList.length - 1 ? "rgba(255,0,0,0.3)" : "red";
+                    drawCurve(ys, color);
+                });
+            }
+            // initial draw
             drawAxes();
             drawCurve(targetYs, "green");
+            const grid = document.getElementById("grid");
             for (let i = 0; i < maxGuesses; i++) {
-                const row = document.createElement("div");
-                row.className = "row";
+                const tr = document.createElement("tr");
                 for (let j = 0; j < tl; j++) {
-                    const cell = document.createElement("div");
-                    cell.className = "cell";
-                    row.appendChild(cell);
+                    const td = document.createElement("td");
+                    tr.appendChild(td);
                 }
-                document.getElementById("grid").appendChild(row);
+                grid.appendChild(tr);
             }
             document.getElementById("submitBtn").onclick = () => {
                 const inp = document.getElementById("guessInput").value.trim().split(/\s+/);
@@ -81,7 +129,8 @@
                     return;
                 }
                 markRow(inp);
-                drawCurve(ys, "red");
+                guessYsList.push(ys);
+                redrawAll();
                 currentRow++;
                 if (currentRow >= maxGuesses) {
                     alert("Out of guesses.");
@@ -103,8 +151,7 @@
                         if (t === "exp") s.push(Math.exp(v));
                         if (t === "ln") s.push(Math.log(v));
                     } else {
-                        const b = s.pop(),
-                            a = s.pop();
+                        const b = s.pop(), a = s.pop();
                         if (t === "+") s.push(a + b);
                         if (t === "-") s.push(a - b);
                         if (t === "*") s.push(a * b);
@@ -122,15 +168,14 @@
                 }
                 return true;
             }
-
             function fillRow(tokens, cls) {
-                const row = document.getElementById("grid").children[currentRow];
-                for (let i = 0; i < 6; i++) {
-                    row.children[i].textContent = tokens[i];
-                    row.children[i].classList.add(cls);
+                const row = grid.rows[currentRow];
+                for (let i = 0; i < tl; i++) {
+                    const cell = row.cells[i];
+                    cell.textContent = tokens[i];
+                    cell.classList.add(cls);
                 }
             }
-
             function markRow(tokens) {
                 const freq = {};
                 for (const t of target) freq[t] = (freq[t] || 0) + 1;
@@ -147,47 +192,15 @@
                         freq[tokens[i]]--;
                     }
                 }
-                const row = document.getElementById("grid").children[currentRow];
+                const row = grid.rows[currentRow];
                 for (let i = 0; i < tl; i++) {
-                    row.children[i].textContent = tokens[i];
-                    row.children[i].classList.add(colors[i]);
-                }
-            }
-
-            function drawAxes() {
-                ctx.clearRect(0, 0, width, height);
-                ctx.beginPath();
-                // x-axis
-                const y0 = mapY(0);
-                ctx.moveTo(0, y0);
-                ctx.lineTo(width, y0);
-                // y-axis
-                const x0 = mapX(0);
-                ctx.moveTo(x0, 0);
-                ctx.lineTo(x0, height);
-                ctx.strokeStyle = "black";
-                ctx.stroke();
-            }
-
-            function drawCurve(ys, color) {
-                ctx.beginPath();
-                for (let i = 0; i < xs.length; i++) {
-                    const px = mapX(xs[i]),
-                        py = mapY(ys[i]);
-                    if (i === 0) ctx.moveTo(px, py);
-                    else ctx.lineTo(px, py);
-                }
-                ctx.strokeStyle = color;
-                ctx.stroke();
-            }
-
-            function mapX(x) {
-                return (x + bound) / (2 * bound) * width;
+                    const cell = row.cells[i];
+                    cell.textContent = tokens[i];
+                    cell.classList.add(colors[i]);
                 }
-
-            function mapY(y) {
-                return height - (y - yMin) / (yMax - yMin) * height;
             }
+            function mapX(x) { return (x + bound) / (2 * bound) * width; }
+            function mapY(y) { return height - (y - yMin) / (yMax - yMin) * height; }
         </script>
     </body>
 </html>


...	...	@@ -4,23 +4,28 @@
4	4	<style>
5	5	body { font-family: sans-serif; }
6	6	#plot { border: 1px solid #000; }
7		- #grid { display: grid; grid-template-rows: repeat(6, 1fr); gap: 5px; margin-top: 10px; }
8		- .row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
9		- .cell { width: 40px; height: 40px; border: 1px solid #ccc; display: flex; align-items: center; justify-content: center; font-weight: bold; }
	7	+ #grid { border-collapse: collapse; margin-top: 10px; }
	8	+ #grid td { width: 40px; height: 40px; border: 1px solid #ccc; text-align: center; vertical-align: middle; font-weight: bold; }
10	9	.grey { background: #787c7e; color: #fff; }
11	10	.yellow { background: #c9b458; color: #fff; }
12	11	.green { background: #6aaa64; color: #fff; }
13	12	#message { color: red; margin-top: 5px; }
	13	+ .container { display: flex; }
	14	+ .side { margin-left: 20px; }
14	15	</style>
15	16	</head>
16	17	<body>
	18	+ <div class="container">
17	19	<canvas id="plot" width="400" height="400"></canvas>
	20	+ <div class="side">
18	21	<div>
19	22	<input id="guessInput" placeholder="token1 token2 ... token6" style="width: 300px;">
20	23	<button id="submitBtn">Submit</button>
21	24	<div id="message"></div>
22	25	</div>
23		- <div id="grid"></div>
	26	+ <table id="grid"></table>
	27	+ </div>
	28	+ </div>
24	29	<script>
25	30	const allowed = {
26	31	terminals: ["x", "1", "2"],
...	...	@@ -42,17 +47,60 @@
42	47	targetYs.push(evalPostfix(target, x));
43	48	}
44	49	const yMin = Math.min(...targetYs), yMax = Math.max(...targetYs);
	50	+ const guessYsList = [];
	51	+ function drawAxes() {
	52	+ ctx.clearRect(0, 0, width, height);
	53	+ ctx.beginPath();
	54	+ const y0 = mapY(0);
	55	+ ctx.moveTo(0, y0);
	56	+ ctx.lineTo(width, y0);
	57	+ const x0 = mapX(0);
	58	+ ctx.moveTo(x0, 0);
	59	+ ctx.lineTo(x0, height);
	60	+ // ticks at (1,0) and (-1,0)
	61	+ [1, -1].forEach(val => {
	62	+ const px = mapX(val);
	63	+ ctx.moveTo(px, y0 - 5);
	64	+ ctx.lineTo(px, y0 + 5);
	65	+ });
	66	+ // ticks at (0,1) and (0,-1)
	67	+ [1, -1].forEach(val => {
	68	+ const py = mapY(val);
	69	+ ctx.moveTo(x0 - 5, py);
	70	+ ctx.lineTo(x0 + 5, py);
	71	+ });
	72	+ ctx.strokeStyle = "black";
	73	+ ctx.stroke();
	74	+ }
	75	+ function drawCurve(ys, color) {
	76	+ ctx.beginPath();
	77	+ for (let i = 0; i < xs.length; i++) {
	78	+ const px = mapX(xs[i]), py = mapY(ys[i]);
	79	+ if (i === 0) ctx.moveTo(px, py);
	80	+ else ctx.lineTo(px, py);
	81	+ }
	82	+ ctx.strokeStyle = color;
	83	+ ctx.stroke();
	84	+ }
	85	+ function redrawAll() {
	86	+ drawAxes();
	87	+ drawCurve(targetYs, "green");
	88	+ guessYsList.forEach((ys, idx) => {
	89	+ const color = idx < guessYsList.length - 1 ? "rgba(255,0,0,0.3)" : "red";
	90	+ drawCurve(ys, color);
	91	+ });
	92	+ }
	93	+ // initial draw
45	94	drawAxes();
46	95	drawCurve(targetYs, "green");
	96	+ const grid = document.getElementById("grid");
47	97	for (let i = 0; i < maxGuesses; i++) {
48		- const row = document.createElement("div");
49		- row.className = "row";
	98	+ const tr = document.createElement("tr");
50	99	for (let j = 0; j < tl; j++) {
51		- const cell = document.createElement("div");
52		- cell.className = "cell";
53		- row.appendChild(cell);
	100	+ const td = document.createElement("td");
	101	+ tr.appendChild(td);
54	102	}
55		- document.getElementById("grid").appendChild(row);
	103	+ grid.appendChild(tr);
56	104	}
57	105	document.getElementById("submitBtn").onclick = () => {
58	106	const inp = document.getElementById("guessInput").value.trim().split(/\s+/);
...	...	@@ -81,7 +129,8 @@
81	129	return;
82	130	}
83	131	markRow(inp);
84		- drawCurve(ys, "red");
	132	+ guessYsList.push(ys);
	133	+ redrawAll();
85	134	currentRow++;
86	135	if (currentRow >= maxGuesses) {
87	136	alert("Out of guesses.");
...	...	@@ -103,8 +151,7 @@
103	151	if (t === "exp") s.push(Math.exp(v));
104	152	if (t === "ln") s.push(Math.log(v));
105	153	} else {
106		- const b = s.pop(),
107		- a = s.pop();
	154	+ const b = s.pop(), a = s.pop();
108	155	if (t === "+") s.push(a + b);
109	156	if (t === "-") s.push(a - b);
110	157	if (t === "") s.push(a b);
...	...	@@ -122,15 +168,14 @@
122	168	}
123	169	return true;
124	170	}
125		-
126	171	function fillRow(tokens, cls) {
127		- const row = document.getElementById("grid").children[currentRow];
128		- for (let i = 0; i < 6; i++) {
129		- row.children[i].textContent = tokens[i];
130		- row.children[i].classList.add(cls);
	172	+ const row = grid.rows[currentRow];
	173	+ for (let i = 0; i < tl; i++) {
	174	+ const cell = row.cells[i];
	175	+ cell.textContent = tokens[i];
	176	+ cell.classList.add(cls);
131	177	}
132	178	}
133		-
134	179	function markRow(tokens) {
135	180	const freq = {};
136	181	for (const t of target) freq[t] = (freq[t] \|\| 0) + 1;
...	...	@@ -147,47 +192,15 @@
147	192	freq[tokens[i]]--;
148	193	}
149	194	}
150		- const row = document.getElementById("grid").children[currentRow];
	195	+ const row = grid.rows[currentRow];
151	196	for (let i = 0; i < tl; i++) {
152		- row.children[i].textContent = tokens[i];
153		- row.children[i].classList.add(colors[i]);
154		- }
155		- }
156		-
157		- function drawAxes() {
158		- ctx.clearRect(0, 0, width, height);
159		- ctx.beginPath();
160		- // x-axis
161		- const y0 = mapY(0);
162		- ctx.moveTo(0, y0);
163		- ctx.lineTo(width, y0);
164		- // y-axis
165		- const x0 = mapX(0);
166		- ctx.moveTo(x0, 0);
167		- ctx.lineTo(x0, height);
168		- ctx.strokeStyle = "black";
169		- ctx.stroke();
170		- }
171		-
172		- function drawCurve(ys, color) {
173		- ctx.beginPath();
174		- for (let i = 0; i < xs.length; i++) {
175		- const px = mapX(xs[i]),
176		- py = mapY(ys[i]);
177		- if (i === 0) ctx.moveTo(px, py);
178		- else ctx.lineTo(px, py);
179		- }
180		- ctx.strokeStyle = color;
181		- ctx.stroke();
182		- }
183		-
184		- function mapX(x) {
185		- return (x + bound) / (2 * bound) * width;
	197	+ const cell = row.cells[i];
	198	+ cell.textContent = tokens[i];
	199	+ cell.classList.add(colors[i]);
186	200	}
187		-
188		- function mapY(y) {
189		- return height - (y - yMin) / (yMax - yMin) * height;
190	201	}
	202	+ function mapX(x) { return (x + bound) / (2 * bound) * width; }
	203	+ function mapY(y) { return height - (y - yMin) / (yMax - yMin) * height; }
191	204	</script>
192	205	</body>
193	206	</html>
194	207