dynamic favicon!

app.js

@@ -298,6 +298,7 @@ class Tetromino {
         return this.srs[this.facing][rotation].some((translation, rotationPoint) => {
             if (this.move(translation, rotation)) {
                 if (rotationPoint == 4) this.rotationPoint4Used = true
+                favicon.href = this.favicon_href
                 return true
             }
         })
@@ -306,6 +307,10 @@ class Tetromino {
     get ghost() {
         return new this.constructor(Array.from(this.center), this.facing, "ghost " + this.className)
     }
+
+    get favicon_href() {
+        return `favicons/${this.constructor.name}-${this.facing}.png`
+    }
 }
 // Super Rotation System
 // freedom of movement = srs[piece.facing][rotation]
@@ -670,6 +675,7 @@ let holdQueue = new MinoesTable("holdTable")
 let matrix = new Matrix()
 let nextQueue = new NextQueue()
 let playing = false
+let favicon = document.querySelector("link[rel~='icon']");
 
 function pauseSettings() {
     scheduler.clearInterval(fall)
@@ -735,6 +741,7 @@ function ticktack() {
 
 function generate(piece) {
     matrix.piece = piece || nextQueue.shift()
+    favicon.href = matrix.piece.favicon_href
 
     if (matrix.piece.canMove(TRANSLATION.NONE)) {
         scheduler.setInterval(fall, stats.fallPeriod)

css/classic.css

@@ -8,7 +8,7 @@
     border: 4px solid;
     padding: 0;
     opacity: 100%;
-    border-radius: 2px;
+    border-radius: 1px;
 }
 
 .I.mino {

index.html

@@ -13,7 +13,7 @@
     <link rel="alternate stylesheet" href="css/pop.css" title="Pop">
     <link rel="alternate stylesheet" href="css/retro.css" title="Rétro">
     <link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="favicons/T-2.png">
     <link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
     <link rel="manifest" href="manifest.json">
   </head>