refactoring

jsm/common.js

@@ -0,0 +1,28 @@
+const DELAY = {
+  LOCK: 500,
+  FALL: 1000,
+}
+
+const T_SPIN = {
+  NONE: "",
+  MINI: "PETITE<br/>PIROUETTE",
+  T_SPIN: "PIROUETTE"
+}
+
+// score = AWARDED_LINE_CLEARS[tSpin][nbClearedLines]
+const AWARDED_LINE_CLEARS = {
+  [T_SPIN.NONE]: [0, 1, 3, 5, 8],
+  [T_SPIN.MINI]: [1, 2],
+  [T_SPIN.T_SPIN]: [4, 8, 12, 16]
+}
+
+const CLEARED_LINES_NAMES = [
+  "",
+  "SOLO",
+  "DUO",
+  "TRIO",
+  "TETRA",
+]
+
+
+export { DELAY, T_SPIN, AWARDED_LINE_CLEARS, CLEARED_LINES_NAMES }

jsm/service-worker.js

@@ -0,0 +1,86 @@
+/*
+Copyright 2015, 2019, 2020 Google LLC. All Rights Reserved.
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+
+// Incrementing OFFLINE_VERSION will kick off the install event and force
+// previously cached resources to be updated from the network.
+const OFFLINE_VERSION = 1;
+const CACHE_NAME = "offline";
+// Customize this with a different URL if needed.
+const OFFLINE_URL = "index.html";
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(
+    (async () => {
+      const cache = await caches.open(CACHE_NAME);
+      // Setting {cache: 'reload'} in the new request will ensure that the
+      // response isn't fulfilled from the HTTP cache; i.e., it will be from
+      // the network.
+      await cache.add(new Request(OFFLINE_URL, { cache: "reload" }));
+    })()
+  );
+  // Force the waiting service worker to become the active service worker.
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil(
+    (async () => {
+      // Enable navigation preload if it's supported.
+      // See https://developers.google.com/web/updates/2017/02/navigation-preload
+      if ("navigationPreload" in self.registration) {
+        await self.registration.navigationPreload.enable();
+      }
+    })()
+  );
+
+  // Tell the active service worker to take control of the page immediately.
+  self.clients.claim();
+});
+
+self.addEventListener("fetch", (event) => {
+  // We only want to call event.respondWith() if this is a navigation request
+  // for an HTML page.
+  if (event.request.mode === "navigate") {
+    event.respondWith(
+      (async () => {
+        try {
+          // First, try to use the navigation preload response if it's supported.
+          const preloadResponse = await event.preloadResponse;
+          if (preloadResponse) {
+            return preloadResponse;
+          }
+
+          // Always try the network first.
+          const networkResponse = await fetch(event.request);
+          return networkResponse;
+        } catch (error) {
+          // catch is only triggered if an exception is thrown, which is likely
+          // due to a network error.
+          // If fetch() returns a valid HTTP response with a response code in
+          // the 4xx or 5xx range, the catch() will NOT be called.
+          console.log("Fetch failed; returning offline page instead.", error);
+
+          const cache = await caches.open(CACHE_NAME);
+          const cachedResponse = await cache.match(OFFLINE_URL);
+          return cachedResponse;
+        }
+      })()
+    );
+  }
+
+  // If our if() condition is false, then this fetch handler won't intercept the
+  // request. If there are any other fetch handlers registered, they will get a
+  // chance to call event.respondWith(). If no fetch handlers call
+  // event.respondWith(), the request will be handled by the browser as if there
+  // were no service worker involvement.
+});

jsm/settings.js

@@ -0,0 +1,82 @@
+let jsKeyRenamer = new Proxy({
+  ["←"]           : "ArrowLeft",
+  ["→"]           : "ArrowRight",
+  ["↑"]           : "ArrowUp",
+  ["↓"]           : "ArrowDown",
+  ["Espace"]      : " ",
+  ["Échap."]      : "Escape",
+  ["Ret. arrière"]: "Backspace",
+  ["Entrée"]      : "Enter",
+}, {
+  get(obj, keyName) {
+      return keyName in obj? obj[keyName] : keyName
+  }
+})
+let friendyKeyRenamer = new Proxy({
+  ["ArrowLeft"]   : "←",
+  ["ArrowRight"]  : "→",
+  ["ArrowUp"]     : "↑",
+  ["ArrowDown"]   : "↓",
+  [" "]           : "Espace",
+  ["Escape"]      : "Échap.",
+  ["Backspace"]   : "Ret. arrière",
+  ["Enter"]       : "Entrée",
+}, {
+  get(obj, keyName) {
+      return keyName in obj? obj[keyName] : keyName
+  }
+})
+
+class Settings {
+  constructor() {
+      this.startLevel = 1
+
+      let keyMaps = {
+    key: {},
+    action: {}
+  }
+
+      this.key = new Proxy(keyMaps, {
+    set(km, action, key) {
+      km.action[key] = action
+              return km.key[action] = jsKeyRenamer[key]
+    },
+          has(km, action) {
+              return action in km.key
+          },
+    get(km, action) {
+      return friendyKeyRenamer[km.key[action]]
+    }
+  })
+  this.action = new Proxy(keyMaps, {
+    set(km, key, action) {
+      km.key[action] = key
+              return km.action[key] = action
+    },
+          has(km, key) {
+              return key in km.action
+          },
+    get(km, key) {
+      return km.action[key]
+    }
+  })
+
+      this.key.moveLeft  = "ArrowLeft"
+      this.key.moveRight = "ArrowRight"
+      this.key.rotateCCW = "w"
+      this.key.rotateCW  = "ArrowUp"
+      this.key.softDrop  = "ArrowDown"
+      this.key.hardDrop  = " "
+      this.key.hold      = "c"
+      this.key.pause     = "Escape"
+
+      this.arrDelay = 50
+      this.dasDelay = 300
+      
+      this.musicVolume = 50
+      this.sfxVolume   = 50
+  }
+}
+
+
+export { Settings }

jsm/stats.js

@@ -0,0 +1,166 @@
+import { Clock } from 'three'
+import { DELAY, T_SPIN, AWARDED_LINE_CLEARS, CLEARED_LINES_NAMES } from './common.js'
+
+
+class Stats {
+  constructor() {
+      this.clock = new Clock(false)
+      this.clock.timeFormat = new Intl.DateTimeFormat("fr-FR", {
+          hour: "numeric",
+          minute: "2-digit",
+          second: "2-digit",
+          timeZone: "UTC"
+      })
+      this.elapsedTime = 0
+
+      this.init()
+  }
+
+  init() {
+      this._level = 0
+      this._score = 0
+      this.goal = 0
+      this.highScore = Number(localStorage["teTraHighScore"]) || 0
+      this.combo = 0
+      this.b2b = 0
+      this.startTime = new Date()
+      this.lockDelay = DELAY.LOCK
+      this.totalClearedLines = 0
+      this.nbTetra = 0
+      this.nbTSpin = 0
+      this.maxCombo = 0
+      this.maxB2B = 0
+  }
+
+  set score(score) {
+      this._score = score
+      if (score > this.highScore) {
+          this.highScore = score
+      }
+  }
+
+  get score() {
+      return this._score
+  }
+
+  set level(level) {
+      this._level = level
+      this.goal += level * 5
+      if (level <= 20) this.fallPeriod = 1000 * Math.pow(0.8 - ((level - 1) * 0.007), level - 1)
+      if (level > 15) this.lockDelay = 500 * Math.pow(0.9, level - 15)
+      messagesSpan.addNewChild("div", { className: "show-level-animation", innerHTML: `<h1>NIVEAU<br/>${this.level}</h1>` })
+  }
+
+  get level() {
+      return this._level
+  }
+
+  set combo(combo) {
+      this._combo = combo
+      if (combo > this.maxCombo) this.maxCombo = combo
+  }
+
+  get combo() {
+      return this._combo
+  }
+
+  set b2b(b2b) {
+      this._b2b = b2b
+      if (b2b > this.maxB2B) this.maxB2B = b2b
+  }
+
+  get b2b() {
+      return this._b2b
+  }
+
+  get time() {
+      return this.clock.timeFormat.format(this.clock.elapsedTime * 1000)
+  }
+
+  lockDown(nbClearedLines, tSpin) {
+      this.totalClearedLines += nbClearedLines
+      if (nbClearedLines == 4) this.nbTetra++
+      if (tSpin == T_SPIN.T_SPIN) this.nbTSpin++
+
+      // Cleared lines & T-Spin
+      let awardedLineClears = AWARDED_LINE_CLEARS[tSpin][nbClearedLines]
+      let patternScore = 100 * this.level * awardedLineClears
+      if (tSpin) messagesSpan.addNewChild("div", {
+          className: "rotate-in-animation",
+          innerHTML: tSpin
+      })
+      if (nbClearedLines) messagesSpan.addNewChild("div", {
+          className: "zoom-in-animation",
+          innerHTML: CLEARED_LINES_NAMES[nbClearedLines]
+      })
+      if (patternScore) {
+          messagesSpan.addNewChild("div", {
+              className: "zoom-in-animation",
+              style: "animation-delay: .2s",
+              innerHTML: patternScore
+          })
+          this.score += patternScore
+      }
+
+      // Combo
+      if (nbClearedLines) {
+          this.combo++
+          if (this.combo >= 1) {
+              let comboScore = (nbClearedLines == 1 ? 20 : 50) * this.combo * this.level
+              if (this.combo == 1) {
+                  messagesSpan.addNewChild("div", {
+                      className: "zoom-in-animation",
+                      style: "animation-delay: .4s",
+                      innerHTML: `COMBO<br/>${comboScore}`
+                  })
+              } else {
+                  messagesSpan.addNewChild("div", {
+                      className: "zoom-in-animation",
+                      style: "animation-delay: .4s",
+                      innerHTML: `COMBO x${this.combo}<br/>${comboScore}`
+                  })
+              }
+              this.score += comboScore
+          }
+      } else {
+          this.combo = -1
+      }
+
+      // Back to back sequence
+      if ((nbClearedLines == 4) || (tSpin && nbClearedLines)) {
+          this.b2b++
+          if (this.b2b >= 1) {
+              let b2bScore = patternScore / 2
+              if (this.b2b == 1) {
+                  messagesSpan.addNewChild("div", {
+                      className: "zoom-in-animation",
+                      style: "animation-delay: .4s",
+                      innerHTML: `BOUT À BOUT<br/>${b2bScore}`
+                  })
+              } else {
+                  messagesSpan.addNewChild("div", {
+                      className: "zoom-in-animation",
+                      style: "animation-delay: .4s",
+                      innerHTML: `BOUT À BOUT x${this.b2b}<br/>${b2bScore}`
+                  })
+              }
+              this.score += b2bScore
+          }
+      } else if (nbClearedLines && !tSpin) {
+          if (this.b2b >= 1) {
+              messagesSpan.addNewChild("div", {
+                  className: "zoom-in-animation",
+                  style: "animation-delay: .4s",
+                  innerHTML: `FIN DU BOUT À BOUT`
+              })
+          }
+          this.b2b = -1
+      }
+
+      this.goal -= awardedLineClears
+      if (this.goal <= 0) this.level++
+  }
+}
+
+
+export { Stats }

jsm/utils.js

@@ -0,0 +1,29 @@
+class Scheduler {
+  constructor() {
+      this.intervalTasks = new Map()
+      this.timeoutTasks = new Map()
+  }
+
+  setInterval(func, delay, ...args) {
+      this.intervalTasks.set(func, window.setInterval(func, delay, ...args))
+  }
+
+  setTimeout(func, delay, ...args) {
+      this.timeoutTasks.set(func, window.setTimeout(func, delay, ...args))
+  }
+
+  clearInterval(func) {
+      if (this.intervalTasks.has(func))
+          window.clearInterval(this.intervalTasks.get(func))
+      this.intervalTasks.delete(func)
+  }
+
+  clearTimeout(func) {
+      if (this.timeoutTasks.has(func))
+          window.clearTimeout(this.timeoutTasks.get(func))
+      this.timeoutTasks.delete(func)
+  }
+}
+
+
+export { Scheduler }