text, pause

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

@@ -65,8 +65,8 @@ 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"
+    PAUSED: "PAUSE",
+    GAME_OVER: "GAME OVER"
 }
 
 
@@ -241,10 +241,12 @@ class HoldQueue {
 
     draw() {
         this.context.clearRect(0, 0, this.width, this.height)
+        if (state == STATE.PLAYING) {
             if (this.piece)
                 this.piece.draw(this.context)
         }
     }
+}
 
 
 timeFormat = new Intl.DateTimeFormat("en-US", {
@@ -260,6 +262,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
@@ -329,9 +332,14 @@ class Stats {
 class Matrix {
     constructor(context) {
         this.context = context
+        this.context.textAlign = "center"
+        this.context.textBaseline = "center"
+        this.context.font = "4vw '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
     }
     
@@ -346,6 +354,7 @@ class Matrix {
     draw() {
         this.context.clearRect(0, 0, this.width, this.height)
 
+        if (state != STATE.PAUSED) {
             // grid
             this.context.strokeStyle = "rgba(128, 128, 128, 128)"
             this.context.lineWidth = 0.5
@@ -373,6 +382,22 @@ class Matrix {
             if (this.piece)
                 this.piece.draw(this.context, ghost_pos)
         }
+
+        // text
+        if (state == STATE.PLAYING) {
+
+        }
+        else {
+            this.context.save()
+            this.context.shadowColor = "black"
+            this.context.shadowOffsetX = 1
+            this.context.shadowOffsetY = 1
+            this.context.shadowBlur = 2
+            this.context.fillStyle = "white"
+            this.context.fillText(state, this.centerX, this.centerY)
+            this.context.restore()
+        }
+    }
 }
 
 
@@ -386,9 +411,11 @@ class NextQueue {
 
     draw() {
         this.context.clearRect(0, 0, this.width, this.height)
+        if (state == STATE.PLAYING) {
             this.pieces.forEach(piece => piece.draw(this.context))
         }
     }
+}
 
 
 function newLevel(startLevel) {
@@ -502,7 +529,6 @@ function gameOver() {
     state = STATE.GAME_OVER
     scheduler.clearTimeout(lockPhase)
     scheduler.clearTimeout(locksDown)
-    console.log("GAME OVER")
 }
 
 function autorepeat() {
@@ -594,13 +620,31 @@ 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 draw() {
     holdQueue.draw()
     stats.print()
     matrix.draw()
     nextQueue.draw()
 
-    if (state != STATE.GAME_OVER)
+    if (state == STATE.PLAYING)
         requestAnimationFrame(draw)
 }
 
@@ -618,7 +662,8 @@ window.onload = function() {
         " ":            hardDrop,
         "ArrowUp":      rotateCW,
         "z":            rotateCCW,
-        "c":            hold
+        "c":            hold,
+        "Escape":       pause
     }
     pressedKeys = new Set()
     actionsToRepeat = []