you can interrupt now the new sequence presentation

game_manager.js

@@ -8,8 +8,11 @@ class GameManager
         this.blocked = false;
         this.default_opacity = default_opacity;
         this.n_selected = 0;
+        this.timeout_id;
+        this.in_show_mode = false;
 
         this.grid.register_click_callback((i,j) => this.click_listener(i,j));
+        this.grid.register_unlock_request_callback((i,j) => this.unlock_request_listener(i,j));
     }
 
     register_level_callback(func)
@@ -48,6 +51,17 @@ class GameManager
         }
     }
 
+    unlock_request_listener(x,y)
+    {
+        if (this.level > 0 && this.in_show_mode)
+        {
+            clearTimeout(this.timeout_id);
+            this.end_show_sequence();
+            return true;
+        }
+        return false;
+    }
+
     restart()
     {
         if (!this.blocked)
@@ -91,7 +105,8 @@ class GameManager
             this.grid.cells[y][x].activate();
         }
         var time = this.level * 300 + 2000;
-        setTimeout(c => this.end_show_sequence(c), time);
+        this.in_show_mode = true;
+        this.timeout_id = setTimeout(c => this.end_show_sequence(c), time);
     }
 
     end_show_sequence()
@@ -100,6 +115,7 @@ class GameManager
         this.sidebar_div.style.backgroundColor = "rgba(0,0,0," + this.default_opacity + ")";
         this.grid.deactivate_all();
         this.unblock();
+        this.in_show_mode = false;
     }
 
     on_level_up()

grid.js

@@ -32,6 +32,7 @@ class Grid
                 var c =  "rgb(" + Math.round(255 * x / this.width) + ", " + Math.round(255 * y / this.height) + ", " + Math.round(255 * ( 1.0 - x / this.width))+")";
                 row.push(new Tile(x,y,this.tile_width,this.tile_height,button,c,div_button));
                 row[x].register_click_callback((i,j) => this.click_listener(i,j));
+                row[x].register_unlock_request_callback((i,j) => this.unlock_request_listener(i,j));
             }
             this.cells.push(row);
         }
@@ -66,11 +67,21 @@ class Grid
         this.click_callback = func;
     }
 
+    register_unlock_request_callback(func)
+    {
+        this.unlock_request_callback = func;
+    }
+
     click_listener(x,y)
     {
         this.click_callback(x,y);
     }
 
+    unlock_request_listener(x,y)
+    {
+        return this.unlock_request_callback(x,y);
+    }
+
     block()
     {
         var x,y;

main.js

@@ -5,8 +5,6 @@ var height = getComputedStyle(document.body).getPropertyValue("--grid-height");
 var tilesize = getComputedStyle(document.body).getPropertyValue("--tile-size");
 var default_opacity = getComputedStyle(document.body).getPropertyValue("--opacity")
 
-console.log("tilesize: " + tilesize);
-
 var grid = new Grid(width,height, document.getElementById("grid-container"), tilesize, tilesize);
 var game_manager = new GameManager(grid, document.getElementById("sidebar-container"), default_opacity);
 var sidebar = new Sidebar(grid, document.getElementById("control-container"), document.getElementById("info-container"), game_manager);

tile.js

@@ -34,6 +34,11 @@ class Tile
         this.click_callback = func;
     }
 
+    register_unlock_request_callback(func)
+    {
+        this.unlock_request_callback = func;
+    }
+
     bind()
     {
         this.elem.addEventListener("mouseenter", c => this.on_mouseenter(c));
@@ -93,15 +98,21 @@ class Tile
 
     on_click()
     {
-        if (!this.locked)
+        if  (this.locked)
         {
+            if (!this.unlock_request_callback(this.x, this.y))
+            {
+                return;
+            }
+        }
+
         var active_before = this.is_activated;
         this.activate();
         if (!active_before)
         {
             this.click_callback(this.x, this.y);
         }
-        }
+        
     }
 
 }