Do various tweaks to work better on mobile devices.
authorSteinar H. Gunderson <sgunderson@bigfoot.com>
Tue, 19 Nov 2013 19:31:34 +0000 (20:31 +0100)
committerSteinar H. Gunderson <sgunderson@bigfoot.com>
Tue, 19 Nov 2013 19:31:34 +0000 (20:31 +0100)
www/css/remoteglot.css
www/index.html
www/js/remoteglot.js

index 543a5b6..6009a24 100644 (file)
@@ -61,12 +61,35 @@ p {
        display: block;
        float: left;
        width: 400px;
-       height: 400px;
        margin-right: 1em;
        margin-bottom: 1em;
+       padding: 0;
 }
 #analysis {
        display: block;
        min-width: 400px;
        overflow: hidden;
 }
+
+/* If the board is too wide for the screen, shrink it to fit,
+ * and then put the analysis below. */
+@media all and (max-width: 400px) {
+       #board {
+               width: 100%;
+               float: none;
+       }
+       #analysis {
+               min-width: 0;
+       }
+}
+
+/* If there is almost space for the analysis, shrink the board a bit, too. */
+@media all and (min-width: 500px) and (max-width: 810px) {
+       #board {
+               float: left;
+               width: 50%;
+       }
+       #analysis {
+               min-width: 0;
+       }
+}
index 887ef4b..24beffb 100644 (file)
@@ -7,8 +7,9 @@
 
   <link rel="stylesheet" href="css/chessboard-0.3.0.min.css" />
   <link rel="stylesheet" href="css/remoteglot.css" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
 </head>
-<body>
+<body onresize="board.resize()">
 <h1 id="headline">Analysis</h1>
 <div id="board"></div>
 <div id="analysis">
index fa7e5d4..114aaad 100644 (file)
@@ -1,3 +1,4 @@
+var board = [];
 var arrows = [];
 var arrow_targets = [];
 var occupied_by_arrows = [];
@@ -85,10 +86,15 @@ var create_arrow = function(from_square, to_square, fg_color, line_width, arrow_
        var to_col   = to_square.charCodeAt(0) - "a1".charCodeAt(0);
        var to_row   = to_square.charCodeAt(1) - "a1".charCodeAt(1);
 
-       var from_y = (7 - from_row)*49 + 25;
-       var to_y = (7 - to_row)*49 + 25;
-       var from_x = from_col*49 + 25;
-       var to_x = to_col*49 + 25;
+       var zoom_factor = $("#board").width() / 400.0;
+       line_width *= zoom_factor;
+       arrow_size *= zoom_factor;
+
+       var square_width = Math.floor(($("#board").width() - 1) / 8);
+       var from_y = (7 - from_row + 0.5)*square_width + 1;
+       var to_y = (7 - to_row + 0.5)*square_width + 1;
+       var from_x = (from_col + 0.5)*square_width + 1;
+       var to_x = (to_col + 0.5)*square_width + 1;
 
        var dx = to_x - from_x;
        var dy = to_y - from_y;
@@ -140,7 +146,8 @@ var create_arrow = function(from_square, to_square, fg_color, line_width, arrow_
                        ["Arrow", {
                                cssClass:"l1arrow",
                                location:1.0,
-                               width: arrow_size, length: arrow_size,
+                               width: arrow_size,
+                               length: arrow_size,
                                paintStyle:{ 
                                        lineWidth:line_width,
                                        strokeStyle:"#000",
@@ -378,7 +385,7 @@ var update_board = function(board, data) {
 
 var init = function() {
        // Create board.
-       var board = new ChessBoard('board', 'start');
+       board = new ChessBoard('board', 'start');
 
        request_update(board, 1);