refactored code to use es6 modules

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;

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
+};

index.html

@@ -37,15 +37,22 @@ <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>
+      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>
-    <script type="text/javascript" src="main.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>

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};

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();

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();

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;
 }