Move grid to model and save grid in storage

scripts/app.js

@@ -2,7 +2,6 @@ import { Model } from "./model.js";
 import { Dispatcher } from "./dispatcher.js";
 import { State } from "./state.js";
 
-import { Grid } from "./grid.js";
 import { Keyboard } from "./keyboard.js";
 import { Panel } from "./panel.js";
 import { Runner } from "./runner.js";
@@ -25,7 +24,6 @@ class App {
         this.dispatcher = new Dispatcher();
 
         // Components.
-        this.grid = new Grid(this.state, this.model, this.dispatcher);
         this.keyboard = new Keyboard(this.state, this.model, this.dispatcher);
         this.panel = new Panel(this.state, this.model, this.dispatcher);
         this.runner = new Runner(this.state, this.model, this.dispatcher);

scripts/constants.js

@@ -14,7 +14,7 @@ export const DEFAULT_VERSION = 1;
 export const HEADER = (locale) => `
 import js
 
-grid = js.window.app.grid
+grid = js.window.app.model.grid
 
 ${locale.black} = (0, 0, 0)
 ${locale.white} = (255, 255, 255)

scripts/dispatcher.js

@@ -40,10 +40,10 @@ class Dispatcher {
     /* Code management                                                                           */
     /*********************************************************************************************/
 
-    clear(source) {
-        // Clear the grid.
-        this.emit("clear", source);
-    }
+    // clear(source) {
+    //     // Clear the grid.
+    //     this.emit("clear", source);
+    // }
 
     new(source) {
         this.emit("new", source, {});
@@ -57,6 +57,10 @@ class Dispatcher {
         this.emit("delete", source, { "name": name });
     }
 
+    save(source) {
+        this.emit("save", source);
+    }
+
     /* Runner                                                                                    */
     /*********************************************************************************************/
 

scripts/grid.js

@@ -10,33 +10,19 @@ export { Grid };
 /*************************************************************************************************/
 
 class Grid {
-    constructor(state, model, dispatcher) {
-        this.state = state;
-        this.model = model;
-        this.dispatcher = dispatcher;
-
+    constructor() {
         this.grid = document.getElementById('grid');
         this.gridTable = document.getElementById('grid-table');
         this.rows = DEFAULT_ROWS;
         this.cols = DEFAULT_COLS;
         this.reshape(this.rows, this.cols);
 
-        this.setupDispatcher();
-        this.setupKeyboard();
+        // this.setupDispatcher();
+        // this.setupKeyboard();
     }
 
-    /* Setup functions                                                                           */
-    /*********************************************************************************************/
-
-    setupKeyboard() {
-        this.gridTable.addEventListener("keydown", (e) => {
-            this.dispatcher.keyboard(this, e.key);
-        });
-    }
+    init() {
 
-    setupDispatcher() {
-        // Clear the grid.
-        this.dispatcher.on("clear", (e) => { this.clear(); });
     }
 
     /* Internal functions                                                                        */
@@ -47,7 +33,7 @@ class Grid {
         let row = Math.floor(i / this.rows);
         let col = i % this.rows;
         cell.addEventListener("click", (e) => {
-            this.dispatcher.click(this, row, col);
+            // this.dispatcher.click(this, row, col);
         });
         cell.title = `${row}, ${col}`;
         this.gridTable.appendChild(cell);
@@ -100,12 +86,14 @@ class Grid {
     }
 
     bgcolor(i, j, r, g, b) {
+        // NOTE: if not rgb, return the bg color
         let cell = this.cell(i, j);
         if (cell)
             cell.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
     }
 
     text(i, j, string) {
+        // NOTE: if string is undefined, return the text
         let cell = this.cell(i, j);
         if (cell)
             cell.textContent = string;
@@ -149,4 +137,45 @@ class Grid {
             }
         }
     }
+
+    /* Serialization                                                                             */
+    /*********************************************************************************************/
+
+    dump() {
+        const data = {};
+        for (let i = 0; i < this.rows; i++) {
+            for (let j = 0; j < this.cols; j++) {
+                const cell = this.cell(i, j);
+                if (cell) {
+                    const bgColor = getComputedStyle(cell).getPropertyValue('background-color');
+                    const text = cell.textContent.trim();
+
+                    if ((bgColor == "rgba(0, 0, 0, 0)") && (!text)) continue;
+
+                    const rgb = bgColor.match(/\d+/g);
+                    data[`${i},${j}`] = {
+                        bgcolor: rgb.map(Number),
+                        text: text
+                    };
+                }
+            }
+        }
+        return { "data": data, "rows": this.rows, "cols": this.cols, };
+    }
+
+    load(data) {
+        if (!data) return;
+
+        // const data = JSON.parse(dataJson);
+        this.reshape(data.rows, data.cols);
+
+        for (const key in data.data) {
+            const cellData = data.data[key];
+            if (!cellData) continue;
+            const [i, j] = key.split(',').map(Number);
+            const { bgcolor, text } = cellData;
+            this.bgcolor(i, j, ...bgcolor);
+            this.text(i, j, text);
+        }
+    }
 };

scripts/keyboard.js

@@ -35,9 +35,8 @@ class Keyboard {
                 event.preventDefault();
 
                 // Save the code in the storage.
-                this.model.storage.save(this.state.name, code);
+                this.model.save(this.state.name);
             }
         });
-
     }
 };

scripts/model.js

@@ -1,7 +1,8 @@
 import { DEFAULT_CODE } from "./constants.js";
-import { LOCALE } from "./locale.js";
+import { LOCALE, LANG } from "./locale.js";
 import { Storage } from "./storage.js";
 import { Editor } from "./editor.js";
+import { Grid } from "./grid.js";
 
 export { Model };
 
@@ -15,10 +16,19 @@ class Model {
     constructor() {
         this.storage = new Storage();
         this.editor = new Editor();
+        this.grid = new Grid();
     }
 
     async init() {
         await this.storage.init();
         await this.editor.init();
+        await this.grid.init();
+    }
+
+    save(name) {
+        const code = this.editor.getCode();
+        const lang = LANG;
+        const data = this.grid.dump();
+        this.storage.save(name, code, lang, data);
     }
 }

scripts/runner.js

@@ -167,24 +167,27 @@ class Runner {
         this.clearOutput();
 
         // Emit the clear event, which will clear the grid.
-        this.dispatcher.clear(this);
+        this.model.grid.clear();
     }
 
     async run(code) {
         if (!code) return;
-
-        // Save the code in the storage.
-        this.model.storage.save(this.state.name, code);
+        let out = null;
 
         // If is playing, stop.
         if (this.state.isPlaying) {
-            return this.stop();
+            out = this.stop();
         }
 
         // If not playing, run the code.
         else {
-            return this.start(code);
+            out = await this.start(code);
         }
+
+        // Save the code in the storage.
+        this.model.save(this.state.name);
+
+        return out;
     }
 
     async start(code) {

scripts/selector.js

@@ -131,6 +131,9 @@ class Selector {
         // Show the code in the editor.
         this.model.editor.setCode(code);
 
+        // Load the grid.
+        this.model.grid.load(listing.data);
+
         // Update the state.
         this.state.name = name;
 

scripts/storage.js

@@ -22,13 +22,13 @@ class Storage {
     /* Internal functions                                                                        */
     /*********************************************************************************************/
 
-    _makeListing(code, lang) {
+    _makeListing(code, lang, data) {
         return {
-            "lang": lang,
-            "code": code,
             "visual": DEFAULT_VISUAL,
-            "data": null, // TODO: contents of the grid/visual
             "version": DEFAULT_VERSION,
+            "code": code,
+            "lang": lang,
+            "data": data,
         };
     }
 
@@ -60,8 +60,8 @@ class Storage {
         }
     }
 
-    save(name, code, lang = LANG) {
-        let listing = this._makeListing(code, lang);
+    save(name, code, lang = LANG, data = null) {
+        let listing = this._makeListing(code, lang, data);
         let s = encode(listing);
         localStorage.setItem(name, s);
     }