From ecfb08fb4dd63b94085ad44bf5b52c3a4170cdf8 Mon Sep 17 00:00:00 2001
From: Adrien MALINGREY <adrien@malingrey.fr>
Date: Tue, 29 Oct 2019 00:57:33 +0100
Subject: [PATCH] restore ghost

---
 {fonts => css/fonts}/ShareTech.woff2     | Bin
 {fonts => css/fonts}/ShareTechMono.woff2 | Bin
 {images => css/images}/bg.jpg            | Bin
 css/style.css                            |   6 +++---
 js/webtris.js                            |  21 ++++++++++++++-------
 5 files changed, 17 insertions(+), 10 deletions(-)
 rename {fonts => css/fonts}/ShareTech.woff2 (100%)
 rename {fonts => css/fonts}/ShareTechMono.woff2 (100%)
 rename {images => css/images}/bg.jpg (100%)

diff --git a/fonts/ShareTech.woff2 b/css/fonts/ShareTech.woff2
similarity index 100%
rename from fonts/ShareTech.woff2
rename to css/fonts/ShareTech.woff2
diff --git a/fonts/ShareTechMono.woff2 b/css/fonts/ShareTechMono.woff2
similarity index 100%
rename from fonts/ShareTechMono.woff2
rename to css/fonts/ShareTechMono.woff2
diff --git a/images/bg.jpg b/css/images/bg.jpg
similarity index 100%
rename from images/bg.jpg
rename to css/images/bg.jpg
diff --git a/css/style.css b/css/style.css
index d508ac7..9b19195 100644
--- a/css/style.css
+++ b/css/style.css
@@ -2,7 +2,7 @@
     font-family: 'Share Tech';
     font-style: normal;
     font-weight: 400;
-    src: local('Share Tech Regular'), local('ShareTech-Regular'), url(../fonts/ShareTech.woff2) format('woff2');
+    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;
 }
 
@@ -10,7 +10,7 @@
     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 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;
 }
  
@@ -21,7 +21,7 @@
 }
 
 body {
-    background-image: url("../images/bg.jpg");
+    background-image: url("images/bg.jpg");
     background-size: cover;
 }
 
diff --git a/js/webtris.js b/js/webtris.js
index 59f54e5..145b390 100644
--- a/js/webtris.js
+++ b/js/webtris.js
@@ -206,8 +206,17 @@ class Tetromino {
         return this.minoesPos.translate(this.pos)
     }
 
-    draw(context) {
+    draw(context, ghostYOffset=0) {
         const color = this.locked ? this.lightColor : this.color
+        if (ghostYOffset) {
+            context.save()
+            context.shadowColor = this.ghostColor
+            context.shadowOffsetX = 0
+            context.shadowOffsetY = ghostYOffset * MINO_SIZE
+            context.shadowBlur = 3
+            this.minoesAbsPos.forEach(pos => drawMino(context, pos, color))
+            context.restore()
+        }
         this.minoesAbsPos.forEach(pos => drawMino(context, pos, color))
     }
 }
@@ -371,13 +380,9 @@ class Matrix {
         this.context.stroke()
 
         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((color, x) => {
-                if (color) drawMino(this.context, [x, y], color, ghost_pos)
+                if (color) drawMino(this.context, [x, y], color)
             }))
 
             // trail
@@ -389,8 +394,10 @@ class Matrix {
             }
             
             // falling piece
+            for (var ghostYOffset = 1; this.spaceToMove(this.piece.minoesAbsPos.translate([0, ghostYOffset])); ghostYOffset++) {}
+               ghostYOffset--
             if (this.piece)
-                this.piece.draw(this.context)
+                this.piece.draw(this.context, ghostYOffset)
 
             // Lines cleared
             this.context.fillStyle = "white"