css/style.css

@@ -1,15 +1,8 @@
 @font-face {
-    font-family: 'Share Tech';
-    font-style: normal;
-    font-weight: 400;
-    src: local('Share Tech Regular'), local('ShareTech-Regular'), url(../fonts/ShareTech.woff2) format('woff2');
-    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-  }
-  @font-face {
     font-family: 'Share Tech Mono';
     font-style: normal;
     font-weight: 400;
-    src: local('Share Tech Mono Regular'), local('ShareTechMono-Regular'), url(../fonts/ShareTechMono.woff2) format('woff2');
+    src: local('Share Tech Mono'), local('ShareTechMono-Regular'), url(../fonts/ShareTechMono.woff2) format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
  
@@ -54,17 +47,13 @@ canvas {
     display: flex;
     flex-direction: row;
     margin: 10% 0;
-    font-size: 3vw;
+    font-family: 'Share Tech Mono';
-}
+    font-size: 1.2em;
-
-.stats-names {
-    font-family: 'Share Tech';
 }
 
 .stats-values {
     text-align: right;
-    min-width: 15vw;
+    min-width: 100px;
-    font-family: 'Share Tech Mono';
 }
 
 .matrix {

js/webtris.js

@@ -34,7 +34,6 @@ const LOCK_DELAY = 500
 const FALL_DELAY = 1000
 const AUTOREPEAT_DELAY = 250
 const AUTOREPEAT_PERIOD = 10
-const TEMP_TEXTS_DELAY = 700
 const MOVEMENT = {
     LEFT:  [-1, 0],
     RIGHT: [ 1, 0],
@@ -65,9 +64,9 @@ const SCORES = [
 const REPEATABLE_ACTIONS = [moveLeft, moveRight, softDrop]
 const T_SLOT_POS = [[-1, -1], [1, -1], [1, 1], [-1, 1]]
 const STATE = {
-    PLAYING: "PLAYING",
+    PLAYING: "",
-    PAUSED: "PAUSE",
+    PAUSE: "PAUSE",
-    GAME_OVER: "GAME OVER"
+    GAME_OVER: "GAME\nOVER"
 }
 
 
@@ -242,10 +241,8 @@ class HoldQueue {
 
     draw() {
         this.context.clearRect(0, 0, this.width, this.height)
-        if (state != STATE.PAUSED) {
+        if (this.piece)
-            if (this.piece)
+            this.piece.draw(this.context)
-                this.piece.draw(this.context)
-        }
     }
 }
 
@@ -263,7 +260,6 @@ class Stats {
         this.goal = 0
         this.linesCleared = 0
         this.startTime = Date.now()
-        this.pauseTime = 0
         this.combo = -1
         this.lockDelay = LOCK_DELAY
         this.fallDelay = FALL_DELAY
@@ -284,7 +280,6 @@ class Stats {
             this.level = level
         else
             this.level++
-        printTempTexts(["LEVEL", this.level])
         this.goal += 5 * this.level
         if (this.level <= 20)
             this.fallDelay = 1000 * Math.pow(0.8 - ((this.level - 1) * 0.007), this.level - 1)
@@ -317,10 +312,7 @@ class Stats {
 
         this.score += pattern_score + combo_score
 
-        if (pattern_score)
+        //console.log(pattern_name, pattern_score, this.combo, combo_score)
-            printTempTexts([pattern_name, pattern_score])
-        if (combo_score)
-            printTempTexts([this.combo, combo_score])
     }
 
     print() {
@@ -337,14 +329,9 @@ class Stats {
 class Matrix {
     constructor(context) {
         this.context = context
-        this.context.textAlign = "center"
-        this.context.textBaseline = "center"
-        this.context.font = "3vw 'Share Tech', sans-serif"
         this.cells = Array.from(Array(MATRIX_ROWS+3), row => Array(MATRIX_COLUMNS))
         this.width = MATRIX_COLUMNS*MINO_SIZE
         this.height = MATRIX_ROWS*MINO_SIZE
-        this.centerX = this.width / 2
-        this.centerY = this.height / 2
         this.piece = null
     }
     
@@ -373,49 +360,18 @@ class Matrix {
         }
         this.context.stroke()
 
-        if (state != STATE.PAUSED) {
+        // ghost position
-            // ghost position
+        for (var ghost_pos = Array.from(this.piece.pos); this.spaceToMove(this.piece.minoesPos.translate(ghost_pos)); ghost_pos[1]++) {}
-            for (var ghost_pos = Array.from(this.piece.pos); this.spaceToMove(this.piece.minoesPos.translate(ghost_pos)); ghost_pos[1]++) {}
+        ghost_pos[1]--
-            ghost_pos[1]--
 
-            // locked minoes
+        // locked minoes
-            this.cells.slice(3).forEach((row, y) => row.forEach((colors, x) => {
+        this.cells.slice(3).forEach((row, y) => row.forEach((colors, x) => {
-                if (colors) drawMino(this.context, [x, y], ...colors, ghost_pos)
+            if (colors) drawMino(this.context, [x, y], ...colors, ghost_pos)
-            }))
+        }))
-            
+        
-            // falling piece
+        // falling piece
-            if (this.piece)
+        if (this.piece)
-                this.piece.draw(this.context, ghost_pos)
+            this.piece.draw(this.context, ghost_pos)
-        }
-
-        // text
-        var texts = []
-        switch(state) {
-            case STATE.PLAYING:
-                if (tempTexts.length)
-                    texts = tempTexts[0]
-                break
-            case STATE.PAUSED:
-                texts = ["PAUSED"]
-                break
-            case STATE.GAME_OVER:
-                texts = ["GAME", "OVER"]
-        }
-        if (texts.length) {
-            this.context.save()
-            this.context.shadowColor = "black"
-            this.context.shadowOffsetX = 1
-            this.context.shadowOffsetY = 1
-            this.context.shadowBlur = 2
-            this.context.fillStyle = "white"
-            if (texts.length == 1)
-                this.context.fillText(texts[0], this.centerX, this.centerY)
-            else {
-                this.context.fillText(texts[0], this.centerX, this.centerY - 20)
-                this.context.fillText(texts[1], this.centerX, this.centerY + 20)
-            }
-            this.context.restore()
-        }
     }
 }
 
@@ -430,9 +386,7 @@ class NextQueue {
 
     draw() {
         this.context.clearRect(0, 0, this.width, this.height)
-        if (state != STATE.PAUSED) {
+        this.pieces.forEach(piece => piece.draw(this.context))
-            this.pieces.forEach(piece => piece.draw(this.context))
-        }
     }
 }
 
@@ -476,12 +430,10 @@ function move(movement, lock=true, testMinoesPos=matrix.piece.minoesPos) {
             matrix.piece.rotatedLast = false
         if (matrix.spaceToMove(matrix.piece.minoesPos.translate(matrix.piece.pos.add(MOVEMENT.DOWN))))
             fallingPhase()
-        else {
+        else if (lock) {
+            matrix.piece.locked = true
             scheduler.clearTimeout(locksDown)
-            if (lock) {
+            scheduler.setTimeout(locksDown, stats.lockDelay)
-                matrix.piece.locked = true
-                scheduler.setTimeout(locksDown, stats.lockDelay)
-            }
         }
         return true
     }
@@ -550,6 +502,7 @@ function gameOver() {
     state = STATE.GAME_OVER
     scheduler.clearTimeout(lockPhase)
     scheduler.clearTimeout(locksDown)
+    console.log("GAME OVER")
 }
 
 function autorepeat() {
@@ -641,42 +594,13 @@ function hold() {
     }
 }
 
-function pause() {
-    if (state == STATE.PLAYING) {
-        state = STATE.PAUSED
-        stats.pauseTime = Date.now() - stats.startTime
-        scheduler.clearTimeout(lockPhase)
-        scheduler.clearTimeout(locksDown)
-        scheduler.clearTimeout(autorepeat)
-    }
-    else if (state == STATE.PAUSED) {
-        state = STATE.PLAYING
-        stats.startTime = Date.now() - stats.pauseTime
-        scheduler.setTimeout(lockPhase, stats.fallDelay)
-        if (matrix.piece.locked)
-            scheduler.setTimeout(locksDown, stats.lockDelay)
-        requestAnimationFrame(draw)
-    }
-}
-
-function printTempTexts(texts) {
-    tempTexts.push(texts)
-    console.log(tempTexts)
-    scheduler.setTimeout(delTempTexts, TEMP_TEXTS_DELAY)
-}
-
-function delTempTexts(self) {
-    if (tempTexts.length)
-        tempTexts.shift()
-}
-
 function draw() {
     holdQueue.draw()
     stats.print()
     matrix.draw()
     nextQueue.draw()
 
-    if (state == STATE.PLAYING)
+    if (state != STATE.GAME_OVER)
         requestAnimationFrame(draw)
 }
 
@@ -686,7 +610,6 @@ window.onload = function() {
     matrix = new Matrix(document.getElementById("matrix").getContext("2d"))
     nextQueue = new NextQueue(document.getElementById("next").getContext("2d"))
     scheduler = new Scheduler()
-    tempTexts = []
 
     actions = {
         "ArrowLeft":    moveLeft,
@@ -695,8 +618,7 @@ window.onload = function() {
         " ":            hardDrop,
         "ArrowUp":      rotateCW,
         "z":            rotateCCW,
-        "c":            hold,
+        "c":            hold
-        "Escape":       pause
     }
     pressedKeys = new Set()
     actionsToRepeat = []