Code refactoring

author: Li Zhineng <[email protected]> 2013-06-10 16:40:34 +0800
committer: Li Zhineng <[email protected]> 2013-06-10 16:40:34 +0800
commit: a92f6af5807669013aa40771690e0472d7f5da9d (patch)
tree: 9423367249ab2032ad1d0d7b0007144759bea247
parent: 006b98dfd0ae1fbc34ef4c135e4ab07a7b82b152 (diff)
download: word-search-game-a92f6af5807669013aa40771690e0472d7f5da9d.tar.gz
word-search-game-a92f6af5807669013aa40771690e0472d7f5da9d.zip
4 files changed, 150 insertions, 63 deletions
diff --git a/css/style.css b/css/style.css
index b84e219..682d445 100644
--- a/css/style.css
+++ b/css/style.css
@@ -52,14 +52,29 @@ body {
 
 /* ==========================================
 /*
-/* GAMEAREA
+/* Game area
 /*
 /* ========================================== */
 
-#ws-area {
+.ws-area {
   background: #fafafa;
   display: inline-block;
   padding: 20px;
   border-radius: 10px;
-  position: relative;
+  -moz-user-select: -moz-none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
+
+.ws-row {
+  line-height: 0;
+}
+
+.ws-col {
+  cursor: pointer;
+}
+
+.ws-selected {
+  background: #ddd;
 }
 \ No newline at end of file
diff --git a/index.html b/index.html
index 446872f..1dae521 100644
--- a/index.html
+++ b/index.html
@@ -8,17 +8,14 @@
   <body>
     <div class="wrap">
       <h1 class="logo">Word search game</h1>
-      <section id="ws-area" class="fix"></section>
+      <section id="ws-area"></section>
     </div>
     <a href="https://github.com/lizhineng/word-search-game"><img style="position: absolute; top: 0; right: 0; border: 0;" src="images/forkme_right_red.png" alt="Fork me on GitHub"></a>
     <script src="js/utility.js"></script>
     <script src="js/wordsearch.js"></script>
     <script type="text/javascript">
       var gameAreaEl = document.getElementById('ws-area');
-      gameAreaEl.wordSeach({
-        'gridSize': 10,
-        'words': ['one', 'two', 'three', 'four', 'five']
-      });
+      gameAreaEl.wordSeach();
     </script>
   </body>
 </html>
 \ No newline at end of file
diff --git a/js/utility.js b/js/utility.js
index a59841f..fe1d0f1 100644
--- a/js/utility.js
+++ b/js/utility.js
@@ -5,10 +5,28 @@
  * @param {Number} max
  * @return {Number}
  */
-Math.rangeInt = function(min, max){
-	if (max == undefined) {
-		max = min;
-		min = 0;
-	}
-	return Math.floor(Math.random() * (max - min + 1)) + min;
+if (typeof Math.rangeInt != 'function') {
+  Math.rangeInt = function(min, max){
+  	if (max == undefined) {
+  		max = min;
+  		min = 0;
+  	}
+  	return Math.floor(Math.random() * (max - min + 1)) + min;
+  }
+}
+
+/**
+ * Mege two objects
+ *
+ * @param {Object} o1 Object 1
+ * @param {Object} o2 Object 2
+ * @return {Object}
+ */
+if (typeof Object.merge != 'function') {
+  Object.merge = function(o1, o2) {
+    for (var i in o1) {
+      o2[i] = o1[i];
+    }
+    return o2;
+  }
 }
diff --git a/js/wordsearch.js b/js/wordsearch.js
index ce85f0e..6c88ac4 100644
--- a/js/wordsearch.js
+++ b/js/wordsearch.js
@@ -15,7 +15,20 @@
    */
   function WordSeach(wrapEl, settings) {
     this.wrapEl = wrapEl;
-    this.settings = settings;
+
+    // Add `#ws-area` to wrap element
+    this.wrapEl.className += ' ws-area';
+
+    // Default settings
+    var default_settings = {
+      'directions': ['WE', 'NS', 'SN', 'WN', 'EN'],
+      'gridSize': 10,
+      'words': ['one', 'two', 'three', 'four', 'five'],
+      'debug': false
+    }
+    this.settings = Object.merge(settings, default_settings);
+
+    this.isClicked = false;
 
     // Check the words' length if it is overflow the grid
     if (this.parseWords(this.settings.gridSize)) {
@@ -30,10 +43,15 @@
       }
 
       // Fill up the remaining blank items
-      this.fillUpFools();
+      if (!this.settings.debug) {
+        this.fillUpFools();
+      }
 
       // Draw the martrix into wrap element
       this.drawMartrix();
+
+      // Registe mouse events
+      this.registeMouseEvents();
     }
   }
 
@@ -46,7 +64,8 @@
         isWorked = true;
 
       while (keepGoing) {
-        var dir = Math.rangeInt(3), // Direction
+        // Getting random direction
+        var dir = this.settings.directions[Math.rangeInt(this.settings.directions.length - 1)],
           result = this.addWord(this.settings.words[counter], dir),
           isWorked = true;
 
@@ -66,71 +85,69 @@
 
   /**
    * Add word into the martrix
+   *
+   * @param {String} word
+   * @param {Number} direction
    */
   WordSeach.prototype.addWord = function(word, direction) {
-    var itWorked = true;
+    var itWorked = true,
+      directions = {
+        'WE': [0, 1], // Horizontal (From left to right)
+        'NS': [1, 0], // Vertical (From top to bottom)
+        'SN': [-1, 0], // Vertical (From bottom to top)
+        'WN': [1, 1], // From top left to bottom right
+        'EN': [1, -1] // From top right to bottom left
+      },
+      row, col; // y, x
 
     switch (direction) {
-      case 0: // Horizontal
-        // New row(y) and col(x)
+      case 'WE': // Horizontal (From left to right)
         var row = Math.rangeInt(this.settings.gridSize  - 1),
           col = Math.rangeInt(this.settings.gridSize - word.length);
-
-        for (var i = 0; i < word.length; i++) {
-          var origin = this.martrix[row][col + i].letter;
-          if (origin == '.' || origin == word[i]) {
-            this.martrix[row][col + i].letter = word[i];
-          } else {
-            itWorked = false;
-          }
-        }
         break;
 
-      case 1: // vertical
+      case 'NS': // Vertical (From top to bottom)
         var row = Math.rangeInt(this.settings.gridSize - word.length),
           col = Math.rangeInt(this.settings.gridSize  - 1);
+        break;
 
-        for (var i = 0; i < word.length; i++) {
-          var origin = this.martrix[row + i][col].letter;
-          if (origin == '.' || origin == word[i]) {
-            this.martrix[row + i][col].letter = word[i];
-          } else {
-            itWorked = false;
-          }
-        }
+      case 'SN': // Vertical (From bottom to top)
+        var row = Math.rangeInt(word.length - 1, this.settings.gridSize - 1),
+          col = Math.rangeInt(this.settings.gridSize  - 1);
         break;
 
-      case 2: // From top left to bottom right
+      case 'WN': // From top left to bottom right
         var row = Math.rangeInt(this.settings.gridSize - word.length),
           col = Math.rangeInt(this.settings.gridSize - word.length);
-        var col = Math.floor(Math.random() * (this.settings.gridSize - word.length + 1)),
-          row = Math.floor(Math.random() * (this.settings.gridSize - word.length + 1));
-
-        for (var i = 0; i < word.length; i++) {
-          var origin = this.martrix[row + i][col + i].letter;
-          if (origin == '.' || origin == word[i]) {
-            this.martrix[row + i][col + i].letter = word[i];
-          } else {
-            itWorked = false;
-          }
-        }
         break;
 
-      case 3: // From top right to bottom left
+      case 'EN': // From top right to bottom left
         var row = Math.rangeInt(this.settings.gridSize - word.length),
           col = Math.rangeInt(word.length - 1, this.settings.gridSize - 1);
+        break;
 
-        for (var i = 0; i < word.length; i++) {
-          var origin = this.martrix[row + i][col - i].letter;
-          if (origin == '.' || origin == word[i]) {
-            this.martrix[row + i][col - i].letter = word[i];
-          } else {
-            itWorked = false;
-          }
-        }
+      default:
+        var error = 'UNKNOWN DIRECTION!';
+        alert(error);
+        console.log(error);
         break;
     }
 
+    // Add words to the martrix
+    for (var i = 0; i < word.length; i++) {
+      var newRow = row + i * directions[direction][0],
+        newCol = col + i * directions[direction][1];
+
+      // The letter on the board
+      var origin = this.martrix[newRow][newCol].letter;
+
+      if (origin == '.' || origin == word[i]) {
+        this.martrix[newRow][newCol].letter = word[i];
+      } else {
+        itWorked = false;
+      }
+    }
+
     return itWorked;
   }
 
@@ -139,7 +156,7 @@
    */
   WordSeach.prototype.initialize = function() {
     /**
-     * Store the words
+     * Letter martrix
      *
      * param {Array}
      */
@@ -154,8 +171,8 @@
     for (var i = 0; i < this.settings.words.length; i++) {
       // Convert all the letters to upper case
       this.settings.words[i] = this.settings.words[i].toUpperCase();
-      var word = this.settings.words[i];
 
+      var word = this.settings.words[i];
       if (word.length > maxSize) {
         alert('The length of word `' + word + '` is overflow the gridSize.');
         console.error('The length of word `' + word + '` is overflow the gridSize.');
@@ -192,11 +209,12 @@
     for (var row = 0; row < this.settings.gridSize; row++) {
       // New row
       var divEl = document.createElement('div');
+      divEl.setAttribute('class', 'ws-row');
       this.wrapEl.appendChild(divEl);
 
       for (var col = 0; col < this.settings.gridSize; col++) {
         var cvEl = document.createElement('canvas');
-        cvEl.setAttribute('class', 'ws-letter');
+        cvEl.setAttribute('class', 'ws-col');
         cvEl.setAttribute('width', 40);
         cvEl.setAttribute('height', 40);
 
@@ -216,16 +234,55 @@
   }
 
   /**
-   * Fill up the remaining blank items
+   * Fill up the remaining items
    */
   WordSeach.prototype.fillUpFools = function() {
     for (var row = 0; row < this.settings.gridSize; row++) {
       for (var col = 0; col < this.settings.gridSize; col++) {
         if (this.martrix[row][col].letter == '.') {
+          // Math.rangeInt(65, 90) => A ~ Z
           this.martrix[row][col].letter = String.fromCharCode(Math.rangeInt(65, 90));
         }
       }
     }
   }
 
+  /*
+   * Registe mouse events
+   */
+  WordSeach.prototype.registeMouseEvents = function() {
+    var cols = document.querySelectorAll('.ws-col');
+    for (var i = 0; i < cols.length; i++) {
+      cols[i].addEventListener('mousedown', this.onMouseDownHandler(this));
+      cols[i].addEventListener('mouseup', this.onMouseUpHandler(this));
+      cols[i].addEventListener('mouseover', this.onMouseOverHandler(this));
+    }
+  }
+
+  WordSeach.prototype.onMouseDownHandler = function(ws) {
+    return function() {
+      ws.isClicked = true;
+      this.className += ' ws-selected';
+    }
+  }
+
+  WordSeach.prototype.onMouseUpHandler = function(ws) {
+    return function() {
+      ws.isClicked = false;
+
+      var selectedEls = document.querySelectorAll('.ws-selected');
+      for (var i = 0; i < selectedEls.length; i++) {
+        selectedEls[i].setAttribute('class', 'ws-col');
+      }
+    }
+  }
+
+  WordSeach.prototype.onMouseOverHandler = function(ws) {
+    return function() {
+      if (ws.isClicked) {
+        this.className += ' ws-selected';
+      }
+    }
+  }
+
 })();
 \ No newline at end of file
author	Li Zhineng <[email protected]>	2013-06-10 16:40:34 +0800
committer	Li Zhineng <[email protected]>	2013-06-10 16:40:34 +0800
commit	a92f6af5807669013aa40771690e0472d7f5da9d (patch)
tree	9423367249ab2032ad1d0d7b0007144759bea247
parent	006b98dfd0ae1fbc34ef4c135e4ab07a7b82b152 (diff)
download	word-search-game-a92f6af5807669013aa40771690e0472d7f5da9d.tar.gz word-search-game-a92f6af5807669013aa40771690e0472d7f5da9d.zip