HTMLElement.prototype.addNewChild

app.js

@@ -75,6 +75,15 @@ Array.prototype.rotate =    function(rotation) { return [-rotation*this.y, rotat
 Array.prototype.pick =      function()         { return this.splice(Math.floor(Math.random()*this.length), 1)[0] }
 
 
+HTMLElement.prototype.addNewChild = function(tag, properties) {
+    let child = document.createElement(tag)
+    for (key in properties) {
+        child[key] = properties[key]
+    }
+    this.appendChild(child)
+}
+
+
 /* Classes */
 class Scheduler {
     constructor() {
@@ -445,7 +454,7 @@ class Stats {
             this.lockDelay = 500 * Math.pow(0.9, level - 15)
         levelInput.value = level
         levelCell.innerText = level
-        messagesSpan.addDiv({ className: "show-level-animation", innerHTML: `<h1>LEVEL<br/>${this.level}</h1>` })
+        messagesSpan.addNewChild("div", { className: "show-level-animation", innerHTML: `<h1>LEVEL<br/>${this.level}</h1>` })
     }
 
     get level() {
@@ -473,16 +482,16 @@ class Stats {
     lockDown(nbClearedLines, tSpin) {
         // Cleared lines & T-Spin
         let patternScore = SCORES[tSpin][nbClearedLines] * this.level
-        if (tSpin) messagesSpan.addDiv({
+        if (tSpin) messagesSpan.addNewChild("div", {
             className: "rotate-in-animation",
             innerHTML: tSpin
         })
-        if (nbClearedLines) messagesSpan.addDiv({
+        if (nbClearedLines) messagesSpan.addNewChild("div", {
             className: "zoom-in-animation",
             innerHTML: CLEARED_LINES_NAMES[nbClearedLines]
         })
         if (patternScore) {
-            messagesSpan.addDiv({
+            messagesSpan.addNewChild("div", {
                 className: "zoom-in-animation",
                 style: "animation-delay: .2s",
                 innerHTML: patternScore
@@ -495,7 +504,7 @@ class Stats {
             this.combo++
             if (this.combo >= 1) {
                 let comboScore = (nbClearedLines == 1 ? 20 : 50) * this.combo * this.level
-                messagesSpan.addDiv({
+                messagesSpan.addNewChild("div", {
                     className: "zoom-in-animation",
                     style: "animation-delay: .4s",
                     innerHTML: `COMBO x${this.combo}<br/>${comboScore}`
@@ -511,7 +520,7 @@ class Stats {
             this.b2b++
             if (this.b2b >= 1) {
                 let b2bScore = patternScore / 2
-                messagesSpan.addDiv({
+                messagesSpan.addNewChild("div", {
                     className: "zoom-in-animation",
                     style: "animation-delay: .4s",
                     innerHTML: `BACK TO BACK x${this.b2b}<br/>${b2bScore}`
@@ -542,14 +551,6 @@ messagesSpan.onanimationend = function(event) {
     event.target.remove() 
 }
 
-messagesSpan.addDiv = function(attributes) {
-    let div = document.createElement("div")
-    for (key in attributes) {
-        div[key] = attributes[key]
-    }
-    messagesSpan.appendChild(div)
-}
-
 let scheduler = new Scheduler()
 let settings = new Settings()
 let stats = new Stats()
@@ -769,7 +770,7 @@ function gameOver() {
     scheduler.clearInterval(clock)
 
     messagesSpan.onanimationend = null
-    messagesSpan.addDiv({
+    messagesSpan.addNewChild("div", {
         className: "game-over-animation",
         style: "opacity: 100%",
         innerHTML: "<h1>GAME<br/>OVER</h1>"