From 8438fcd1768e9ff2798c77affaee49924d9882e4 Mon Sep 17 00:00:00 2001
From: hkiame <henrykiame@gmail.com>
Date: Fri, 20 Nov 2020 23:33:49 +0300
Subject: [PATCH 1/2] refactored code to use es6 modules

---
 board.js     |  6 +++++-
 constants.js |  6 ++++++
 index.html   | 10 +++++-----
 main.js      | 23 +++++++++++++++++++++++
 piece.js     |  4 +++-
 sound.js     | 10 +---------
 6 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/board.js b/board.js
index c3f760d..34991ef 100644
--- a/board.js
+++ b/board.js
@@ -1,4 +1,8 @@
-class Board {
+import KEY, {COLS, BLOCK_SIZE, ROWS, COLORS,
+            ROTATION, POINTS, LINES_PER_LEVEL, LEVEL} from "./constants.js";
+import Piece from "./piece.js";
+import moves, {account, pointsSound, time} from "./main.js";
+export default class Board {
   constructor(ctx, ctxNext) {
     this.ctx = ctx;
     this.ctxNext = ctxNext;
diff --git a/constants.js b/constants.js
index 1dcc85e..fc5d5c0 100644
--- a/constants.js
+++ b/constants.js
@@ -80,3 +80,9 @@ const ROTATION = {
 };
 
 [COLORS, SHAPES, KEY, POINTS, LEVEL, ROTATION].forEach(item => Object.freeze(item));
+
+export default KEY;
+export {
+        COLS, BLOCK_SIZE, ROWS, COLORS, SHAPES,
+        LEVEL, ROTATION, POINTS, LINES_PER_LEVEL, NO_OF_HIGH_SCORES
+};
\ No newline at end of file
diff --git a/index.html b/index.html
index 79eec35..1cd838a 100644
--- a/index.html
+++ b/index.html
@@ -37,15 +37,15 @@ <h1>TETRIS</h1>
           <span class="sound-item" id="sound-speaker"></span>
           <span class="sound-item" id="sound-description"></span>
         </div>
-        <button id="play-btn" onclick="play()" class="play-button">Play</button>
-        <button id="pause-btn" onclick="pause()" class="play-button">Pause</button>
+        <button id="play-btn" class="play-button">Play</button>
+        <button id="pause-btn" class="play-button">Pause</button>
       </div>
     </div>
 
-    <script type="text/javascript" src="constants.js"></script>
+    <!-- <script type="text/javascript" src="constants.js"></script>
     <script type="text/javascript" src="board.js"></script>
     <script type="text/javascript" src="piece.js"></script>
-    <script type="text/javascript" src="sound.js"></script>
-    <script type="text/javascript" src="main.js"></script>
+    <script type="text/javascript" src="sound.js"></script> -->
+    <script type="module" src="main.js"></script>
   </body>
 </html>
diff --git a/main.js b/main.js
index 8ea0514..c061d4e 100644
--- a/main.js
+++ b/main.js
@@ -1,3 +1,7 @@
+import KEY, {BLOCK_SIZE, LEVEL, ROTATION, POINTS, NO_OF_HIGH_SCORES} from "./constants.js";
+import Board from "./board.js";
+import Sound from "./sound.js";
+
 const canvas = document.getElementById('board');
 const ctx = canvas.getContext('2d');
 const canvasNext = document.getElementById('next');
@@ -199,3 +203,22 @@ function saveHighScore(score, highScores) {
 
   localStorage.setItem('highScores', JSON.stringify(highScores));
 }
+
+let playBtn = document.querySelector("#play-btn"),
+    pauseBtn = document.querySelector("#pause-btn");
+
+playBtn.addEventListener("click", play, false);
+pauseBtn.addEventListener("click", pause, false);
+
+let sound = new Sound(document.querySelector("#sound-div")),
+    backgroundSound =  sound.create("assets/sounds/Dungeon_Theme.mp3", "background_sound", true),
+    movesSound = sound.create("assets/sounds/moves.mp3", "moves_sound"),
+    dropSound = sound.create("assets/sounds/drop.mp3", "drop_sound"),
+    pointsSound = sound.create("assets/sounds/points.mp3", "points_sound"),
+    finishSound = sound.create("assets/sounds/finish.mp3", "finish_sound");;
+sound.muteToggle();
+sound.soundSetting();
+
+
+export default moves;
+export {account, pointsSound, time};
\ No newline at end of file
diff --git a/piece.js b/piece.js
index 5b236da..5ec3f33 100644
--- a/piece.js
+++ b/piece.js
@@ -1,4 +1,6 @@
-class Piece {
+import {COLORS, SHAPES} from "./constants.js";
+
+export default class Piece {
   constructor(ctx) {
     this.ctx = ctx;
     this.spawn();
diff --git a/sound.js b/sound.js
index 72bf907..4a9d667 100644
--- a/sound.js
+++ b/sound.js
@@ -1,4 +1,4 @@
-class Sound {
+export default class Sound {
     constructor(parent){
         this.parent = parent;
         this.sounds = [];
@@ -61,11 +61,3 @@ Sound.prototype.play = function(){
     }
 }
 
-let sound = new Sound(document.querySelector("#sound-div")),
-    backgroundSound =  sound.create("assets/sounds/Dungeon_Theme.mp3", "background_sound", true),
-    movesSound = sound.create("assets/sounds/moves.mp3", "moves_sound"),
-    dropSound = sound.create("assets/sounds/drop.mp3", "drop_sound"),
-    pointsSound = sound.create("assets/sounds/points.mp3", "points_sound"),
-    finishSound = sound.create("assets/sounds/finish.mp3", "finish_sound");;
-sound.muteToggle();
-sound.soundSetting();
\ No newline at end of file

From 9de29a03351e0cb7d047a01261ba2ca1b71e9691 Mon Sep 17 00:00:00 2001
From: hkiame <henrykiame@gmail.com>
Date: Sun, 22 Nov 2020 12:32:32 +0300
Subject: [PATCH 2/2] added a message when the code is not run from the server

---
 index.html | 15 +++++++++++----
 styles.css | 21 +++++++++++++++++++++
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 1cd838a..951cec7 100644
--- a/index.html
+++ b/index.html
@@ -41,11 +41,18 @@ <h1>TETRIS</h1>
         <button id="pause-btn" class="play-button">Pause</button>
       </div>
     </div>
+    <script>
+      if(window.location.origin == "file://"){
+        let overlay = document.createElement("div");
+        overlay.classList.add("overlay");
 
-    <!-- <script type="text/javascript" src="constants.js"></script>
-    <script type="text/javascript" src="board.js"></script>
-    <script type="text/javascript" src="piece.js"></script>
-    <script type="text/javascript" src="sound.js"></script> -->
+        let p = document.createElement("p");
+        p.id = "warningMsg";
+        p.innerText = "Make sure the code runs from the server";
+        overlay.append(p);
+        document.body.append(overlay);
+      }
+    </script>
     <script type="module" src="main.js"></script>
   </body>
 </html>
diff --git a/styles.css b/styles.css
index 4e6406a..735d552 100644
--- a/styles.css
+++ b/styles.css
@@ -42,4 +42,25 @@
 
 .sound-item{
   cursor:pointer;
+}
+
+.overlay {
+  background-color:rgba(0, 0, 0, 0.8);
+  position:absolute;
+  left:0;
+  right:0;
+  bottom:0;
+  top:0;
+}
+
+#warningMsg {
+  position:relative;
+  top:50%;
+  left:50%;
+  transform: translate(-50%, -50%);
+  color:white;
+  text-align:center;
+  border:1px solid;
+  width:50%;
+  padding:10px;
 }
\ No newline at end of file