update to consoleApp

kuznya · Jul 26, 2024 · fce3cd2 · fce3cd2
1 parent 0b7dfd0
commit fce3cd2
Show file tree

Hide file tree

Showing 5 changed files with 152 additions and 48 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html>
 <head>
 <title>JS Math.random() tests</title>
-<link rel="stylesheet" href="js/console.css">
+<link rel="stylesheet" href="js/consoleApp.css">
 </head>
 <h4>JS Math.random() tests</h4>
 <ul>

diff --git a/js/consoleApp.css b/js/consoleApp.css
@@ -0,0 +1,19 @@
+    body {
+        background: #ddd;
+    }
+    body, textarea {
+        font-size: 16px;
+    }
+    a {
+        text-decoration: none;
+    }
+    #app {
+        max-width: 1024px;
+        margin: 0 auto;
+    }
+    #logArea {
+        background: #eee;
+        width: 100%;
+        height: 400px;
+        resize: none;
+    }
diff --git a/js/consoleApp.js b/js/consoleApp.js
@@ -0,0 +1,66 @@
+class cLog {
+  constructor (area) {
+    this.area = area;
+  }
+
+  topprint(s) {
+    const v = this.area.value;
+    this.area.value = v ? `${s}\n${v}` : s;
+  }
+
+  print(s) {
+    const v = this.area.value;
+    this.area.value = v ? `${v}\n${s}` : s;
+  }
+
+  putlines(lines) {
+    this.area.value = lines.join('\n')
+  }
+
+  clear() {
+    this.area.value = '';
+  }
+}
+  const write = (s) => { document.write(s); };
+  const elem = (id) => document.getElementById(id);
+
+class ConsoleApp {
+  constructor(renderHeader) {
+    this.logAreaId = 'logArea';
+    this.renderHeader = renderHeader ? renderHeader : () => {};
+    this.drawApp();
+    this.log = new cLog(elem(this.logAreaId));
+  }
+
+  drawApp () {
+    write('<div id="app">\n');
+    write(this.renderHeader());
+    write(`<textarea id="${this.logAreaId}" readonly></textarea>\n`);
+    write('</div>\n');
+  }
+
+  print(s) {
+    this.log.print(s)
+  }
+
+
+  formatNumber (value, places) {
+    const len = value.toString().length;
+    const spaces = Math.max(0, places - len);
+    return `${' '.repeat(spaces)}${value}`;
+  };
+
+  formatDict (dict) {
+    const aa = [];
+    for (const k in dict) {
+      if (!dict.hasOwnProperty(k)) {
+        continue;
+      }
+      const value = dict[k];
+      let repr = typeof value === 'string' ? `"${value}"` : value;
+      aa.push(`${k}: ${repr}`);
+    }
+    return `{${aa.join(', ')}}`;
+  };
+
+}
diff --git a/test01.html b/test01.html
@@ -1,15 +1,21 @@
 <!doctype html>
-<html>
 <head>
 <title>JS Math.random() test 01</title>
 <script src="js/cDistribution.js"></script>
-<link rel="stylesheet" href="js/console.css">
+<link rel="stylesheet" href="js/consoleApp.css">
 </head>
-<div id="app">
-  <textarea id="log" readonly></textarea>
-</div>
-<script src="js/console.js"></script>
+<script src="js/consoleApp.js"></script>
 <script>
+
+  const renderHeader = () => {
+    return (
+      '<div class="header">' +
+      '<button id="btn" onclick="go();">redo</button>' +
+      '</div>'
+    );
+  };
+
+  const app = new ConsoleApp(renderHeader);
   // go!
   const limit = 10;
   const n = 1000;
@@ -25,18 +31,20 @@
     return stats;
   };
 
-  const dist = new cDistribution(limit);
-  const dist_all = new cDistribution(limit);
-  const aa = [];
-  for (let step = 1; step < steps+1; step++) {
-    dist.reset();
-    const stats = makeStep(dist, dist_all);
-    aa.push(`step ${step}: ${formatDict(stats)}`)
-  }
-  const stats = dist_all.stats();
-  aa.push(`dict all: ${formatDict(stats)}`);
+	const go = () => {
+		const dist = new cDistribution(limit);
+		const dist_all = new cDistribution(limit);
+		const aa = [];
+		for (let step = 1; step < steps + 1; step++) {
+			dist.reset();
+			const stats = makeStep(dist, dist_all);
+			aa.push(`step ${step}: ${app.formatDict(stats)}`)
+		}
+		const stats = dist_all.stats();
+		aa.push(`dict all: ${app.formatDict(stats)}`);
 
-  putlines(aa);
+		app.log.putlines(aa);
+	};
 
+	go();
 </script>
-</html>
diff --git a/test02.html b/test02.html
@@ -1,15 +1,21 @@
 <!doctype html>
-<html>
 <head>
 <title>JS Math.random() test 02</title>
 <script src="js/cDistribution.js"></script>
-<link rel="stylesheet" href="js/console.css">
+<link rel="stylesheet" href="js/consoleApp.css">
 </head>
-<div id="app">
-  <textarea id="log" readonly></textarea>
-</div>
-<script src="js/console.js"></script>
+<script src="js/consoleApp.js"></script>
 <script>
+
+  const renderHeader = () => {
+    return (
+      '<div class="header">' +
+      '<button id="btn" onclick="go();">redo</button>' +
+      '</div>'
+    );
+  };
+
+  const app = new ConsoleApp(renderHeader);
   // go!
   const limit = 100;
   const n = 10;
@@ -35,29 +41,34 @@
     return stats;
   };
 
-  const dist = new cDistribution(limit);
-  const dist_all = new cDistribution(limit);
-
-  const aa = [];
-  for (let step = 0; step < steps; step++) {
-    dist.reset();
-    const map = makeStep(dist, dist_all);
-    aa.push(`${formatNumber(step, 3)}: ${map}`);
-  }
-  console.log('dist all:');
-  const stats = dist_all.stats();
-  console.log(stats);
-
-  const bb = [];
-  bb.push(`noCollisions: ${noCollisionsCnt}/${steps}`);
-  console.log(`noCollisions: ${noCollisionsCnt}/${steps}`);
-  const k = 0.99*0.98*0.97*0.96*0.95*0.94*0.93*0.92*0.91;
-  const noCollisionsTheory = Math.round(k * 1000);
-  bb.push(`in Theory: ${noCollisionsTheory}/${steps}`);
-  console.log(`in Theory: ${noCollisionsTheory}/${steps}`);
-  bb.push('---');
-
-  putlines(bb.concat(aa));
+	const go = () => {
+		noCollisionsCnt = 0;
+		const dist = new cDistribution(limit);
+		const dist_all = new cDistribution(limit);
+
+		const aa = [];
+		for (let step = 0; step < steps; step++) {
+			dist.reset();
+			const map = makeStep(dist, dist_all);
+			aa.push(`${app.formatNumber(step, 3)}: ${map}`);
+		}
+		console.log('dist all:');
+		const stats = dist_all.stats();
+		console.log(stats);
+
+		const bb = [];
+		bb.push(`noCollisions: ${noCollisionsCnt}/${steps}`);
+		console.log(`noCollisions: ${noCollisionsCnt}/${steps}`);
+		const k = 0.99 * 0.98 * 0.97 * 0.96 * 0.95 * 0.94 * 0.93 * 0.92 * 0.91;
+		const noCollisionsTheory = Math.round(k * 1000);
+		bb.push(`in Theory: ${noCollisionsTheory}/${steps}`);
+		console.log(`in Theory: ${noCollisionsTheory}/${steps}`);
+		bb.push('---');
+
+		app.log.putlines(bb.concat(aa));
+	};
+
+	go();
 
 </script>
 </html>