more twiddling and fixing

StillLearnin · Jan 30, 2016 · 3185d28 · 3185d28
1 parent 348ad0f
commit 3185d28
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 45 deletions.
diff --git a/index.css b/index.css
@@ -54,30 +54,66 @@ input.wide {
     width: 45%;
 }
 
+button {
+    margin-top: 7px;
+    width: 100%;
+    height: 50px;
+    background: rgba(255, 255, 255, 0.12);
+    border: 2px solid rgba(218, 218, 218, 0.26);
+    /* border-radius: 7px; */
+    font-size: 20px;
+    color: #9CA3FF;
+}
+
+button:hover {
+    outline: none;
+    border-color: #9E9E9E;
+    /* box-shadow: 0 0 10px #FFFFFF; */
+    color: white;
+    background: rgba(255, 255, 255, 0.26);
+}
+
+button:active {
+    border: none;
+}
+
+.list {
+    width: 100%;
+    border: none;
+    background: transparent;
+    color: whitesmoke;
+    text-align: center;
+    font-family: sans-serif;
+    font-size: 1.25em;
+}
+
 .panel {
     display: -webkit-flex;
     display:         flex;
-    justify-content: space-between;
+    /*justify-content: space-between;*/
     flex-direction: column;
     padding-bottom: 15px;
 }
 
 .panel > .header {
     margin: -5px -5px 5px -5px;
     padding: 5px;
-    background-color: #424242;
+    background-color: rgba(66, 66, 66, 0.68);
     font-size: 1.5em;
     font-family: sans-serif;
+    font-weight: 900;
+    color: #836839;
 }
 
 .panel label {
     display: block;
     margin: 15px 0 2px 5px;
-    text-align: left;
-}
+    text-align: center;
+    font-size: 20px;
+    font-family: sans-serif;}
 
-.panel button {
-    margin-top: 2px;
+.panel input {
+    width: 100%;
 }
 /* Too narrow to support three columns */
 @media all and (max-width: 640px) {

diff --git a/index.html b/index.html
@@ -14,20 +14,21 @@
             <div class="board-container">
                 <div class="chessground normal wood staunton coordinates"
                     id="chessBoard"></div>
-                <script src="index.js"></script>
             </div>
             <div class="panel stats">
                 <div class="header">Stats</div>
                 <div>
-                    <label>Black's Losses</label>
-                    <input id="blacksLosses" disabled/>
-                    <label>White's Losses</label>
-                    <input id="whitesLosses" disabled/>
+                    <label>Black's Advantages</label>
+                    <div class="list" id="blacksAdv" ></div>
+                    <label>White's Advantages</label>
+                    <div class="list" id="whitesAdv" ></div>
                 </div>
             </div>
             <div class="panel tools">
                 <div class="header">Tools</div>
                 <div>
+                    <button onclick="ToggleOrientation()">Toggle Orientation</button>
+                    <button onclick="ResetGame()">Reset Board</button>
                     <label>Fen</label>
                     <input id="fenToLoad"/>
                     <button onclick="LoadFen()">Load Fen</button>
@@ -38,12 +39,13 @@
             </div>
         </div>
         <footer>
-                <div>
-                    <label>Current Fen</label>
-                    <input id="currentFen" class="wide"/>
-                    <label>Last Move</label>
-                    <input id="lastMove"/>
-                </div>
+            <div>
+                <label>Current Fen</label>
+                <input id="currentFen" class="wide"/>
+                <label>Last Move</label>
+                <input id="lastMove"/>
+            </div>
+            <script src="index.js"></script>
         </footer>
     </body>
 </html>

diff --git a/index.js b/index.js
@@ -1,5 +1,4 @@
 var ground;
-var chess = new Chess();
 
 (function() {
     var fen;
@@ -12,14 +11,6 @@ var chess = new Chess();
     }
 
     var onMove = function(orig, dest) {
-        chess.move({from: orig, to: dest});
-        ground.set({
-            turnColor: chessToColor(chess),
-            movable: {
-                color: chessToColor(chess),
-                dests: chessToDests(chess)
-            }
-        });
         logMove(JSON.stringify({ "From": orig, "To": dest}));
     };
 
@@ -29,45 +20,46 @@ var chess = new Chess();
     ground = Chessground(document.getElementById('chessBoard'), {
         orientation: orientation,
         viewOnly: false,
-        turnColor: 'white',
+        turnColor: "white",
         animation: {
             duration: 500
         },
         movable: {
             free: true,
-            color: chessToColor(chess),
-            premove: true,
-            dests: chessToDests(chess),
+            color: "both",
+            dropOff: "trash",    // when a piece is dropped outside the board. "revert" | "trash"
             events: {
                 after: onMove
             }
         },
         drawable: {
             enabled: true
+        },
+        draggable: {
+            enabled: true,        // allow moves & premoves to use drag'n drop
+            distance: 3,          // minimum distance to initiate a drag, in pixels
+            squareTarget: false,  // display big square target; intended for mobile
+            centerPiece: true,    // center the piece on cursor at drag start
+            showGhost: true,      // show ghost of piece being dragged
         }
     });
     if (fen)
          ground.set({fen: fen});
+    showStatsEtc();
 })();
 
-function chessToDests(chess) {
-    var dests = {};
-    chess.SQUARES.forEach(function(s) {
-        var ms = chess.moves({square: s, verbose: true});
-        if (ms.length) dests[s] = ms.map(function(m) { return m.to; });
-    });
-    return dests;
-}
-
-function chessToColor(chess) {
-    return (chess.turn() == "w") ? "white" : "black";
-}
-
-function logMove(move) {
+function showStatsEtc() {
+    var diff = ground.getMaterialDiff();
+    setInnerHTML("blacksAdv", objToLines(diff.black));
+    setInnerHTML("whitesAdv", objToLines(diff.white));
     var fen = ground.getFen();
     console.log(fen);
     localStorage.setItem("fen", fen);
     setValue("currentFen", fen);
+}
+
+function logMove(move) {
+    showStatsEtc();
     setValue("lastMove", move);
     setValue("moveToPlay", "");
     document.getElementById("lastMove").select();
@@ -87,21 +79,37 @@ function LoadFen() {
     location.reload();
 }
 
+function objToLines(object) {
+    var val = JSON.stringify(object).split("\"").join("").split(",").join("<br/>").replace("{","").replace("}","");
+    return val.length > 0 ? val : "None";
+}
+
 function PlayMove() {
     var move = JSON.parse(getValue("moveToPlay"));
     ground.move(move.From, move.To);
     logMove(JSON.stringify(move));
 }
 
-function resetGame() {
+function ResetGame() {
     localStorage.removeItem("fen");
     location.reload();
 }
 
+function ToggleOrientation() {
+    ground.toggleOrientation();
+    var orientation = ground.getOrientation();
+    localStorage.setItem("orientation", orientation);
+    location.reload();
+}
+
 function getValue(id) {
     return document.getElementById(id).value;
 }
 
 function setValue(id, value) {
     document.getElementById(id).value = value;
+}
+
+function setInnerHTML(id, value) {
+    document.getElementById(id).innerHTML = value;
 }