Fixes <td> width issues (#5)

Updated CSS to insure fixed width and height of <td> elements.
Give a nice error when you can't send AJAX.
Give an error when the dimensions are probably too big (it's browser-based, so hard to tell).

Signed-off-by: Aiden Woodruff <aiden.woodruff@gmail.com>

3 files changed, 23 insertions, 7 deletions

diff --git a/flag.png b/flag.png
index be39164..591d210 100644
--- a/flag.png
+++ b/flag.png
diff --git a/styles.css b/styles.css
index 59b17b2..29e1292 100644
--- a/styles.css
+++ b/styles.css
@@ -1,13 +1,18 @@
 table.board {
     border-spacing: 0;
-    border-collapse: collapse;
+    outline: 1px solid black;
+}
+
+table.board tr {
+    white-space: nowrap;
 }
 
 table.board td {
+    display: inline-block;
     text-align: center;
     width: 20px;
     height: 20px;
-    border: 2px solid black;
+    border: 1px solid black;
 }
 
 td.unrevealed {
@@ -20,10 +25,12 @@ td.revealed {
     background-color: #c6c6c6;
 }
 
-td.flagged {
+td.flagged, td.correct {
     cursor: pointer;
     background-color: #c6c6c6;
     background-image: url("flag.png");
+    background-position: center;
+    background-repeat: no-repeat;
 }
 
 td.wrong {
@@ -32,8 +39,6 @@ td.wrong {
 }
 
 td.correct {
-    cursor: default;
-    background-image: url("flag.png");
     background-color: #00ff00;
 }
 
diff --git a/sweeper.js b/sweeper.js
index 9a816c5..5f2a7cc 100644
--- a/sweeper.js
+++ b/sweeper.js
@@ -169,10 +169,16 @@ function flag (e) {
 function update_leaderboard () {
     var xhttp = new XMLHttpRequest();
     xhttp.onreadystatechange = function () {
-        if (this.readyState === 4 && this.status !== 200) {
+        if (this.status === 405) {
+            console.log("Couldn't update leaderboard.");
+            document.getElementById("end").removeChild(document.getElementById("end").getElementsByTagName("input")[0]);
+            var error_msg = document.createElement("p");
+            error_msg.innerHTML = "Leaderboard doesn't work here.";
+            document.getElementById("end").appendChild(error_msg);
+        } else if (this.readyState === 4 && this.status !== 200) {
             console.log("There was some error updating the leaderboard.");
         } else if (this.readyState === 4 && this.status === 200) {
-            var ld = document.createElement('a');
+            var ld = document.createElement("a");
             ld.href = "leaders.html";
             ld.innerHTML = "Leaderboard";
             document.getElementById("end").appendChild(ld);
@@ -332,6 +338,11 @@ for (var y = 0; y < height; y++) {
 }
 
 window.onload = function () {
+    if (width * height > 5000) {
+        document.body.insertBefore(document.createElement("p").appendChild(document.createTextNode("This probably won't work. Try a size where width * height is less than 5000")), document.getElementById("board"));
+        document.body.removeChild(document.getElementById("board"));
+        return;
+    }
     document.getElementById("board").innerHTML = table;
     timer = window.setInterval( function () {
         time++;