..

zc42 · Oct 15, 2024 · f1a6aa0 · f1a6aa0
1 parent fdd6b87
commit f1a6aa0
Show file tree

Hide file tree

Showing 16 changed files with 252 additions and 169 deletions.
diff --git a/dist/assets/index-Cp6D6t7L.js b/dist/assets/index-Cp6D6t7L.js
diff --git a/dist/assets/index-RO_tAo3e.js b/dist/assets/index-RO_tAo3e.js
diff --git a/dist/index.html b/dist/index.html
@@ -1,40 +1,31 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
+
 <head>
-  <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/webstorm-icon-logo.svg" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>WS playground</title>
-  <link rel="stylesheet" href="/style.css">
-  <script type="module" crossorigin src="/assets/index-Cp6D6t7L.js"></script>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>console-like Output</title>
+    <style>
+        #console {
+            /* background-color: #1e1e1e; */
+            color: #dcdcdc;
+            font-family: monospace;
+            padding: 10px;
+            border-radius: 5px;
+            max-height: 400px;
+            overflow-y: auto;
+            white-space: pre-wrap;
+            /* Preserve formatting */
+        }
+    </style>
+  <script type="module" crossorigin src="/assets/index-RO_tAo3e.js"></script>
 </head>
+
 <body>
-<header class="logo">
-  <a href="https://www.jetbrains.com/webstorm/">
-    <img src="/webstorm-logo.svg" alt="WebStorm logo" width="344"
-         height="90">
-  </a>
-</header>
-<main id="app">
-  <h1 class="title">
-    Thank you for trying it out. <br /> Your first project is up and running
-    now.
-  </h1>
-  <section class="counter">
-    <div class="counter-info">
-      <p class="counter-text">Counter is</p>
-      <p class="counter-value" id="counter-value"></p>
-    </div>
-    <div class="counter-interaction">
-      <button id="increaseByOne" type="button">+1</button>
-      <button id="increaseByTwo" type="button">+2</button>
-      <button id="decreaseByOne" type="button">-1</button>
-      <button id="decreaseByTwo" type="button">-2</button>
-    </div>
-  </section>
-</main>
-<footer class="technologies">
-  <img src="/technologies.svg" alt="List of supported technologies">
-</footer>
+    <main id="app">
+        <div id="console"></div>
+    </main>
+    <!-- <script src="main.js"></script> -->
 </body>
-</html>
+
+</html>
diff --git a/index.html b/index.html
@@ -1,40 +1,31 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
+
 <head>
-  <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/webstorm-icon-logo.svg" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>WS playground</title>
-  <link rel="stylesheet" href="/style.css">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>console-like Output</title>
+    <style>
+        #console {
+            /* background-color: #1e1e1e; */
+            color: #dcdcdc;
+            font-family: monospace;
+            padding: 10px;
+            border-radius: 5px;
+            max-height: 400px;
+            overflow-y: auto;
+            white-space: pre-wrap;
+            /* Preserve formatting */
+        }
+    </style>
 </head>
+
 <body>
-<header class="logo">
-  <a href="https://www.jetbrains.com/webstorm/">
-    <img src="/webstorm-logo.svg" alt="WebStorm logo" width="344"
-         height="90">
-  </a>
-</header>
-<main id="app">
-  <h1 class="title">
-    Thank you for trying it out. <br /> Your first project is up and running
-    now.
-  </h1>
-  <section class="counter">
-    <div class="counter-info">
-      <p class="counter-text">Counter is</p>
-      <p class="counter-value" id="counter-value"></p>
-    </div>
-    <div class="counter-interaction">
-      <button id="increaseByOne" type="button">+1</button>
-      <button id="increaseByTwo" type="button">+2</button>
-      <button id="decreaseByOne" type="button">-1</button>
-      <button id="decreaseByTwo" type="button">-2</button>
-    </div>
-  </section>
-</main>
-<footer class="technologies">
-  <img src="/technologies.svg" alt="List of supported technologies">
-</footer>
-<script type="module" src="/src/main.ts"></script>
+    <main id="app">
+        <div id="console"></div>
+    </main>
+    <!-- <script src="main.js"></script> -->
+    <script type="module" src="/src/main.ts"></script>
 </body>
-</html>
+
+</html>
diff --git a/index.html.old b/index.html.old
@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/webstorm-icon-logo.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>WS playground</title>
+  <link rel="stylesheet" href="/style.css">
+</head>
+<body>
+<header class="logo">
+  <a href="https://www.jetbrains.com/webstorm/">
+    <img src="/webstorm-logo.svg" alt="WebStorm logo" width="344"
+         height="90">
+  </a>
+</header>
+<main id="app">
+  <h1 class="title">
+    Thank you for trying it out. <br /> Your first project is up and running
+    now.
+  </h1>
+  <section class="counter">
+    <div class="counter-info">
+      <p class="counter-text">Counter is</p>
+      <p class="counter-value" id="counter-value"></p>
+    </div>
+    <div class="counter-interaction">
+      <button id="increaseByOne" type="button">+1</button>
+      <button id="increaseByTwo" type="button">+2</button>
+      <button id="decreaseByOne" type="button">-1</button>
+      <button id="decreaseByTwo" type="button">-2</button>
+    </div>
+  </section>
+</main>
+<footer class="technologies">
+  <img src="/technologies.svg" alt="List of supported technologies">
+</footer>
+<script type="module" src="/src/main.ts"></script>
+</body>
+</html>
diff --git a/src/game-15-reconstruction/ConsoleUtils.ts b/src/game-15-reconstruction/ConsoleUtils.ts
diff --git a/src/game-15-reconstruction/EpisodeRunner.ts b/src/game-15-reconstruction/EpisodeRunner.ts
@@ -6,18 +6,19 @@ import { QTableGenerator } from './QTableGenerator';
 import { QTableUpdater } from './QTableUpdater';
 import { Action } from './Action';
 import { EnvironmentActionResult } from './EnvironmentActionResult';
+import { Utils } from './utils/Utils';
 
 export class EpisodeRunner {
     private static experience: Set<ExperienceRecord> = new Set();
 
-    public static runEpisode(
+    public static async runEpisode(
         stateProducer: StateProducer,
         qTable: Map<number, QTableRow>,
         // random: Random,
         discount: number,
         learningRate: number,
         episode: number
-    ): void {
+    ) {
         const random = new Random();
         const environment = new Environment(stateProducer);
         environment.reset();
@@ -39,19 +40,19 @@ export class EpisodeRunner {
             }
 
             if (random.nextDouble() < epsilon) { // Explore
-                console.log("\nrndm move");
+                Utils.prnt("\nrndm move");
                 action = QTableGenerator.getRandomAction(possibleActions);
             } else { // Exploit
-                console.log("\nqTable move");
+                Utils.prnt("\nqTable move");
                 action = QTableGenerator.getAction(qTable, state0, environment.reverseAction);
 
                 if (!possibleActions.includes(action)) {
                     action = QTableGenerator.getAction(qTable, state0, environment.reverseAction);
                 }
             }
 
-            console.log("\n--------------------------------------------------------");
-            console.log("\naction: " + action);
+            Utils.prnt("\n--------------------------------------------------------");
+            Utils.prnt("\naction: " + action);
 
             if (!possibleActions.includes(action)) {
                 // throw new Error("!possibleActions.contains(action)");
@@ -77,8 +78,9 @@ export class EpisodeRunner {
 
         const count = Array.from(qTable.values()).reduce((acc, e) => acc + e.qValues.size, 0);
         const message = `Episode ${episode} done, states count: ${count}, experience size: ${EpisodeRunner.experience.size}`;
-        console.log(message);
-        console.log("");
+        Utils.prnt(message);
+        Utils.prnt("");
+        await Utils.sleep(1000);
     }
 
     public static replayExperience(

diff --git a/src/game-15-reconstruction/G15EntryPoint.ts b/src/game-15-reconstruction/G15EntryPoint.ts
@@ -0,0 +1,23 @@
+import { QTableGenerator } from './QTableGenerator';
+import { Utils } from './utils/Utils';
+// import { ConsoleUtils } from './utils/ConsoleUtils';
+
+export class G15EntryPoint {
+
+    public static async main() {
+        // ConsoleUtils.testPrint();
+        Utils.prnt("tarining starts in:");
+        for (let i = 0; i < 3; i++) {
+            Utils.prnt(i);
+            await Utils.sleep(500);
+        }
+
+        Utils.prnt("tarining .. ");
+        await Utils.sleep(1000);
+        await QTableGenerator.train();
+        await Utils.sleep(1000);
+        Utils.prnt("testing .. ");
+        await Utils.sleep(1000);
+        await QTableGenerator.test();
+    }
+}
diff --git a/src/game-15-reconstruction/GameUtils.ts b/src/game-15-reconstruction/GameUtils.ts
@@ -3,7 +3,7 @@
 // utils/GameUtils.ts
 import { Action } from './Action';
 import { Pair } from './utils/Pair';
-import { ConsoleUtils } from './ConsoleUtils';
+import { ConsoleUtils } from './utils/ConsoleUtils';
 
 export class GameUtils {
 

diff --git a/src/game-15-reconstruction/Main.ts b/src/game-15-reconstruction/Main.ts
diff --git a/src/game-15-reconstruction/QTableGenerator.ts b/src/game-15-reconstruction/QTableGenerator.ts
@@ -6,24 +6,24 @@ import { StateShuffle } from './StateShuffle';
 import { Environment } from './Environment';
 import { EnvironmentState } from './EnvironmentState';
 import { Action } from './Action';
-import { ConsoleUtils } from './ConsoleUtils';
 import { GameUtils } from './GameUtils';
 import { QTableUpdater } from './QTableUpdater';
 import { Utils } from './utils/Utils';
+import { ConsoleUtils } from './utils/ConsoleUtils';
 
 export class QTableGenerator {
 
-    public static train(): void {
+    public static async train() {
         const filePath = "qTable.ser";
         const qTable = this.loadQTable(filePath);
-        Trainer.train(qTable, filePath, 10);
+        await Trainer.train(qTable, 10);
     }
 
-    public static test(): void {
+    public static async test() {
         const filePath = "qTable.ser";
         const qTable = this.loadQTable(filePath);
         while (true) {
-            this.testQTable(qTable);
+            await this.testQTable(qTable);
         }
     }
 
@@ -55,7 +55,7 @@ export class QTableGenerator {
         return stats;
     }
 
-    public static testQTable(qTable: Map<number, QTableRow>): void {
+    public static async testQTable(qTable: Map<number, QTableRow>) {
         Utils.prnt("********************* test q table **********************");
         Utils.prnt("********************* test q table **********************");
         Utils.prnt("********************* test q table **********************");
@@ -75,7 +75,7 @@ export class QTableGenerator {
         let reverseAction: Action | null = null;
 
         while (!gameOver && step < 200) {
-            this.sleep(1000 / 2).then();
+            await Utils.sleep(1000 / 2);
             ConsoleUtils.clearScreen();
 
             step++;
@@ -109,7 +109,7 @@ export class QTableGenerator {
 
         const isTerminalSuccess = Environment.isTerminalSuccess(state);
         Utils.prnt(`success: ${isTerminalSuccess}`);
-        this.sleep(3000).then();
+        await Utils.sleep(3000);
     }
 
     private static prntState(state: EnvironmentState): void {
@@ -132,9 +132,7 @@ export class QTableGenerator {
             : Action.D;
     }
 
-    private static sleep(ms: number): Promise<void> {
-        return new Promise(resolve => setTimeout(resolve, ms));
-    }
+
 }
 
 class Stats {

diff --git a/src/game-15-reconstruction/QTableRow.ts b/src/game-15-reconstruction/QTableRow.ts
@@ -1,6 +1,7 @@
 import { Action } from './Action';
 import { Environment } from './Environment';
 import { EnvironmentState } from './EnvironmentState';
+import { ConsoleUtils } from './utils/ConsoleUtils';
 
 export class QTableRow {
     private state: EnvironmentState;
@@ -17,7 +18,7 @@ export class QTableRow {
             moves.forEach(e => this.qValues.set(e, 0));
         }
         if (!moves.includes(action)) {
-            console.warn("WARNING: !moves.includes(action)");
+            ConsoleUtils.warn("WARNING: !moves.includes(action)");
             return;
         }
         this.qValues.set(action, qValue);
@@ -32,7 +33,7 @@ export class QTableRow {
         const actionOption = lastAction === null ? null : this.getAction(lastAction);
 
         if (actionOption === null || actionOption === undefined) {
-            console.warn("WARNING: no action found");
+            ConsoleUtils.warn("WARNING: no action found");
             return possibleActions.length > 0 ? possibleActions[0] : Action.D; // Default action
         } else {
             return actionOption;