temp text

css/style.css

@@ -1,8 +1,15 @@
 @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'), local('ShareTechMono-Regular'), url(../fonts/ShareTechMono.woff2) format('woff2');
+    src: local('Share Tech Mono Regular'), 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;
 }
  
@@ -47,13 +54,17 @@ canvas {
     display: flex;
     flex-direction: row;
     margin: 10% 0;
-    font-family: 'Share Tech Mono';
-    font-size: 1.2em;
+    font-size: 3vw;
+}
+
+.stats-names {
+    font-family: 'Share Tech';
 }
 
 .stats-values {
     text-align: right;
-    min-width: 100px;
+    min-width: 15vw;
+    font-family: 'Share Tech Mono';
 }
 
 .matrix {

js/webtris.js

@@ -34,6 +34,7 @@ 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],
@@ -64,9 +65,9 @@ const SCORES = [
 const REPEATABLE_ACTIONS = [moveLeft, moveRight, softDrop]
 const T_SLOT_POS = [[-1, -1], [1, -1], [1, 1], [-1, 1]]
 const STATE = {
-    PLAYING: "",
-    PAUSE: "PAUSE",
-    GAME_OVER: "GAME\nOVER"
+    PLAYING: "PLAYING",
+    PAUSED: "PAUSE",
+    GAME_OVER: "GAME OVER"
 }
 
 
@@ -241,8 +242,10 @@ class HoldQueue {
 
     draw() {
         this.context.clearRect(0, 0, this.width, this.height)
-        if (this.piece)
-            this.piece.draw(this.context)
+        if (state != STATE.PAUSED) {
+            if (this.piece)
+                this.piece.draw(this.context)
+        }
     }
 }
 
@@ -260,6 +263,7 @@ 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
@@ -280,6 +284,7 @@ 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)
@@ -312,7 +317,10 @@ class Stats {
 
         this.score += pattern_score + combo_score
 
-        //console.log(pattern_name, pattern_score, this.combo, combo_score)
+        if (pattern_score)
+            printTempTexts([pattern_name, pattern_score])
+        if (combo_score)
+            printTempTexts([this.combo, combo_score])
     }
 
     print() {
@@ -329,9 +337,14 @@ 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
     }
     
@@ -360,18 +373,49 @@ class Matrix {
         }
         this.context.stroke()
 
-        // ghost position
-        for (var ghost_pos = Array.from(this.piece.pos); this.spaceToMove(this.piece.minoesPos.translate(ghost_pos)); ghost_pos[1]++) {}
-        ghost_pos[1]--
+        if (state != STATE.PAUSED) {
+            // ghost position
+            for (var ghost_pos = Array.from(this.piece.pos); this.spaceToMove(this.piece.minoesPos.translate(ghost_pos)); ghost_pos[1]++) {}
+            ghost_pos[1]--
 
-        // locked minoes
-        this.cells.slice(3).forEach((row, y) => row.forEach((colors, x) => {
-            if (colors) drawMino(this.context, [x, y], ...colors, ghost_pos)
-        }))
-        
-        // falling piece
-        if (this.piece)
-            this.piece.draw(this.context, ghost_pos)
+            // locked minoes
+            this.cells.slice(3).forEach((row, y) => row.forEach((colors, x) => {
+                if (colors) drawMino(this.context, [x, y], ...colors, ghost_pos)
+            }))
+            
+            // falling piece
+            if (this.piece)
+                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()
+        }
     }
 }
 
@@ -386,7 +430,9 @@ class NextQueue {
 
     draw() {
         this.context.clearRect(0, 0, this.width, this.height)
-        this.pieces.forEach(piece => piece.draw(this.context))
+        if (state != STATE.PAUSED) {
+            this.pieces.forEach(piece => piece.draw(this.context))
+        }
     }
 }
 
@@ -430,10 +476,12 @@ 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 if (lock) {
-            matrix.piece.locked = true
+        else {
             scheduler.clearTimeout(locksDown)
-            scheduler.setTimeout(locksDown, stats.lockDelay)
+            if (lock) {
+                matrix.piece.locked = true
+                scheduler.setTimeout(locksDown, stats.lockDelay)
+            }
         }
         return true
     }
@@ -502,7 +550,6 @@ function gameOver() {
     state = STATE.GAME_OVER
     scheduler.clearTimeout(lockPhase)
     scheduler.clearTimeout(locksDown)
-    console.log("GAME OVER")
 }
 
 function autorepeat() {
@@ -594,13 +641,42 @@ 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.GAME_OVER)
+    if (state == STATE.PLAYING)
         requestAnimationFrame(draw)
 }
 
@@ -610,6 +686,7 @@ 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,
@@ -618,7 +695,8 @@ window.onload = function() {
         " ":            hardDrop,
         "ArrowUp":      rotateCW,
         "z":            rotateCCW,
-        "c":            hold
+        "c":            hold,
+        "Escape":       pause
     }
     pressedKeys = new Set()
     actionsToRepeat = []