Added divider lines to the editor grid view

babel/App.js

@@ -54,7 +54,8 @@ class App
     this.window_help = new Window(window_config);
     this.help = new Help(8,this.config);
 
-    window_config = {name:"window_playfield", title: "Playfield", type: "preview", resizable: true, left: this.config.window_playfield.left, top: this.config.window_playfield.top, width: this.config.window_playfield.width, height: this.config.window_playfield.height };
+    // playfield window is hidden by autoOpen:false 
+    window_config = {name:"window_playfield", autoOpen: false, title: "Playfield", type: "preview", resizable: true, left: this.config.window_playfield.left, top: this.config.window_playfield.top, width: this.config.window_playfield.width, height: this.config.window_playfield.height };
     this.window_playfield = new Window(window_config, this.store_window.bind(this));
     this.playfield = new Playfield(9,this.config);
 

babel/Editor.js

@@ -148,14 +148,19 @@ class Editor
   display_grid(sprite_data)
   {
     // show a grid
-    this.canvas.strokeStyle = "#666666";
+
     this.canvas.setLineDash([1, 1]);
     let x_grid_step = 1;
 
     if (sprite_data.multicolor) x_grid_step = 2;
 
     for (let i=0; i<=this.pixels_x; i=i+x_grid_step)
     {
+
+        // adds a vertical line in the middle
+        this.canvas.strokeStyle = "#666666";
+        if (i == this.pixels_x/2) this.canvas.strokeStyle = "#888888";
+
         this.canvas.beginPath();
         this.canvas.moveTo(i*this.zoom,0);
         this.canvas.lineTo(i*this.zoom,this.height);
@@ -164,11 +169,17 @@ class Editor
 
     for (let i=0; i<=this.pixels_y; i++)
     {
+
+        // adds 3 horizontal lines
+        this.canvas.strokeStyle = "#666666";
+        if (i%(this.pixels_y/3) == 0) this.canvas.strokeStyle = "#888888";
+
         this.canvas.beginPath();
         this.canvas.moveTo(0,i*this.zoom);
         this.canvas.lineTo(this.width,i*this.zoom);
         this.canvas.stroke();
     }
+
   }
 
 

babel/Info.js

@@ -16,6 +16,19 @@ class Info
 
         <fieldset>
             <h1>Release notes</h1>
+
+            <h1>V1.06</h1>
+            <p>
+            - zoom icons moved from right side of the window to the left for better usability<br/>
+            - color palette now uses DIVs instead of CANVAS (needed for later features)
+            </p>
+
+            <h1>V1.05</h1>
+            <p>
+            - Added a brief documentation (click on help in the menu bar).
+            </p><br/>
+            <p>I didn't get any chance to work on Spritemate for months due to my commercial stuff sucking away all my free time. Also, feedback was stopping recently, which didn't motivate me too much either. Eventually I checked the traffic for Spritemate and was suprised about the steady amount of users. So I decided to dedicate more time to this project again. In any case, if you like Spritemate, you can make a hell of a difference by letting me know, either by mail ( ingo at awsm dot de ) or by sending me a tweet ( <a href="https://twitter.com/awsm9000">@awsm9000</a> ). Let me know how I can make Spritemate better for you!</p>
+
             <h1>November 08, 2017</h1>
 
             <h2>Features, changes & bugfixes</h2>

dist/js/App.js

@@ -54,7 +54,8 @@ var App = function () {
     this.window_help = new Window(window_config);
     this.help = new Help(8, this.config);
 
-    window_config = { name: "window_playfield", title: "Playfield", type: "preview", resizable: true, left: this.config.window_playfield.left, top: this.config.window_playfield.top, width: this.config.window_playfield.width, height: this.config.window_playfield.height };
+    // playfield window is hidden by autoOpen:false 
+    window_config = { name: "window_playfield", autoOpen: false, title: "Playfield", type: "preview", resizable: true, left: this.config.window_playfield.left, top: this.config.window_playfield.top, width: this.config.window_playfield.width, height: this.config.window_playfield.height };
     this.window_playfield = new Window(window_config, this.store_window.bind(this));
     this.playfield = new Playfield(9, this.config);
 

dist/js/Editor.js

@@ -132,20 +132,30 @@ var Editor = function () {
     key: "display_grid",
     value: function display_grid(sprite_data) {
       // show a grid
-      this.canvas.strokeStyle = "#666666";
+
       this.canvas.setLineDash([1, 1]);
       var x_grid_step = 1;
 
       if (sprite_data.multicolor) x_grid_step = 2;
 
       for (var i = 0; i <= this.pixels_x; i = i + x_grid_step) {
+
+        // adds a vertical line in the middle
+        this.canvas.strokeStyle = "#666666";
+        if (i == this.pixels_x / 2) this.canvas.strokeStyle = "#888888";
+
         this.canvas.beginPath();
         this.canvas.moveTo(i * this.zoom, 0);
         this.canvas.lineTo(i * this.zoom, this.height);
         this.canvas.stroke();
       }
 
       for (var _i = 0; _i <= this.pixels_y; _i++) {
+
+        // adds 3 horizontal lines
+        this.canvas.strokeStyle = "#666666";
+        if (_i % (this.pixels_y / 3) == 0) this.canvas.strokeStyle = "#888888";
+
         this.canvas.beginPath();
         this.canvas.moveTo(0, _i * this.zoom);
         this.canvas.lineTo(this.width, _i * this.zoom);