From 2b54fac7db59f5e0116d0ec806678d5ae1e9c90e Mon Sep 17 00:00:00 2001 From: Vilhjalmur Thorsteinsson Date: Mon, 16 Oct 2017 13:29:56 +0000 Subject: [PATCH] Firefix release --- app.yaml | 6 +- skraflgame.py | 8 +- static/js/common.js | 62 +++++++++------- static/js/main.js | 6 +- static/js/netskrafl.js | 26 ++++--- static/main.less | 156 +++++++++++++++++++++++++-------------- templates/board.html | 4 +- templates/container.html | 2 +- templates/main.html | 2 +- 9 files changed, 170 insertions(+), 102 deletions(-) diff --git a/app.yaml b/app.yaml index e75b4afa..78a24df3 100755 --- a/app.yaml +++ b/app.yaml @@ -2,7 +2,7 @@ # App.yaml for the Netskrafl application on Google App Engine # application: netskrafl -version: firebase2 +version: firefix runtime: python27 api_version: 1 threadsafe: true @@ -84,14 +84,14 @@ handlers: static_files: static/\1 upload: static/.*\.css$ mime_type: text/css - expiration: "1d 0h" + expiration: "0d 1h" # Was "1d 0h" # Catchall for JavaScript - url: /static/(.*\.min\.js)(\?.*)?$ static_files: static/\1 upload: static/.*\.min\.js$ mime_type: application/javascript - expiration: "1d 0h" + expiration: "0d 1h" # Was "1d 0h" # Font files that can be cached - url: /static/glyphicons-regular.ttf diff --git a/skraflgame.py b/skraflgame.py index 745a73ac..ae0fe8d4 100755 --- a/skraflgame.py +++ b/skraflgame.py @@ -1,8 +1,12 @@ # -*- coding: utf-8 -*- -""" Game and User classes for Netskrafl +""" Game and User classes for netskrafl.is - Author: Vilhjalmur Thorsteinsson, 2014 + Copyright (C) 2015-2017 Miðeind ehf. + Author: Vilhjalmur Thorsteinsson + + The GNU General Public License, version 3, applies to this software. + For further information, see https://github.com/vthorsteinsson/Netskrafl This module implements the User and Game classes for the Netskrafl application. These classes form an intermediary diff --git a/static/js/common.js b/static/js/common.js index 46c54530..2c7131eb 100755 --- a/static/js/common.js +++ b/static/js/common.js @@ -350,35 +350,47 @@ function closePromoDialog() { var maybePreventPullToRefresh = false; var lastTouchY = 0; +var pullToRefreshDisabled = false; -function preventPullToRefresh() +function _touchstartHandler(e) { + if (e.touches.length != 1) + return; + lastTouchY = e.touches[0].clientY; + // Pull-to-refresh will only trigger if the scroll begins when the + // document's Y offset is zero. + maybePreventPullToRefresh = (window.pageYOffset === 0); +} + +function _touchmoveHandler(e) { + var touchY = e.touches[0].clientY; + var touchYDelta = touchY - lastTouchY; + /* lastTouchY = touchY; */ + if (maybePreventPullToRefresh) { + // To suppress pull-to-refresh it is sufficient to preventDefault the + // first overscrolling touchmove. + maybePreventPullToRefresh = false; + if (touchYDelta > 0) + e.preventDefault(); + } +} + +function preventPullToRefresh(enable) { /* Prevent the mobile (touch) behavior where pulling/scrolling the page down, if already at the top, causes a refresh of the web page */ - var touchstartHandler = function(e) { - if (e.touches.length != 1) - return; - lastTouchY = e.touches[0].clientY; - // Pull-to-refresh will only trigger if the scroll begins when the - // document's Y offset is zero. - maybePreventPullToRefresh = (window.pageYOffset === 0); - }; - - var touchmoveHandler = function(e) { - var touchY = e.touches[0].clientY; - var touchYDelta = touchY - lastTouchY; - /* lastTouchY = touchY; */ - if (maybePreventPullToRefresh) { - // To suppress pull-to-refresh it is sufficient to preventDefault the - // first overscrolling touchmove. - maybePreventPullToRefresh = false; - if (touchYDelta > 0) { - e.preventDefault(); - return; - } + if (enable) { + if (!pullToRefreshDisabled) { + document.addEventListener('touchstart', _touchstartHandler, false); + document.addEventListener('touchmove', _touchmoveHandler, { passive: false }); + pullToRefreshDisabled = true; + } + } + else { + if (pullToRefreshDisabled) { + document.removeEventListener('touchstart', _touchstartHandler, false); + document.removeEventListener('touchmove', _touchmoveHandler, { passive: false }); + pullToRefreshDisabled = false; } - }; - document.addEventListener('touchstart', touchstartHandler, false); - document.addEventListener('touchmove', touchmoveHandler, { passive: false }); + } } diff --git a/static/js/main.js b/static/js/main.js index da3f215c..eceb5560 100755 --- a/static/js/main.js +++ b/static/js/main.js @@ -907,9 +907,12 @@ function mediaMinWidth768(mql) { if (mql.matches) { // Take action when min-width exceeds 768 uiFullscreen = true; + preventPullToRefresh(false); } else { uiFullscreen = false; + /* Prevent mobile behavior where pull down (scroll) causes a page refresh */ + preventPullToRefresh(true); } } @@ -1008,9 +1011,6 @@ function initMain() { /* Listen to media events, such as orientation changes */ initMediaListener(); - /* Prevent mobile behavior where pull down (scroll) causes a page refresh */ - preventPullToRefresh(); - /* Call initialization that requires variables coming from the server */ lateInit(); diff --git a/static/js/netskrafl.js b/static/js/netskrafl.js index 58017006..e642a0f3 100755 --- a/static/js/netskrafl.js +++ b/static/js/netskrafl.js @@ -1422,6 +1422,8 @@ function updateButtonState() { } showRecall = true; } + if (showChallengeInfo) + showScramble = false; $("div.submitmove").toggleClass("hidden", !showMove); $("div.submitexchange").css("display", showExchange ? "block" : "none"); $("div.submitpass").css("display", showPass ? "block" : "none"); @@ -1639,20 +1641,20 @@ function rescrambleRack(ev) { function updateBag(bag) { /* Update the bag display in the lower right corner */ - $("#bag").html(""); + var bagC = $(".bag-content"); + bagC.html(""); var lenbag = bag.length; var ix = 0; // If 7 or fewer unseen tiles, the bag is empty and they're all in the opponent's // rack; display the tiles in the opponent's color - if (lenbag <= RACK_SIZE) { - $("#bag").toggleClass("new", false); - $("#bag").toggleClass("empty", true); - } + if (lenbag <= RACK_SIZE) + bagC + .toggleClass("new", false) + .toggleClass("empty", true); else - if (gameUsesNewBag()) { + if (gameUsesNewBag()) // Indicate visually that we're using the new bag - $("#bag").toggleClass("new", true); - } + bagC.toggleClass("new", true); while (lenbag > 0) { /* Rows */ var str = ""; @@ -1666,7 +1668,7 @@ function updateBag(bag) { lenbag--; } str += ""; - $("#bag").append(str); + bagC.append(str); } } @@ -2503,6 +2505,8 @@ function mediaMinWidth768(mql) { $("div.heading").off("click"); // Enable clicking on player identifier buttons $("div.player-btn").click(lookAtPlayer); + // Remove pull-to-refresh disabling hack, if present + preventPullToRefresh(false); } else { uiFullscreen = false; @@ -2510,6 +2514,8 @@ function mediaMinWidth768(mql) { $("div.heading").click(function(e) { window.location.href = "/"; }); // Disable clicking on player identifier buttons $("div.player-btn").off("click"); + // Disable pull-to-refresh on mobile + preventPullToRefresh(true); } } @@ -2623,8 +2629,6 @@ function initSkrafl(jQuery) { initMediaListener(); // Initiate listening to media change events - preventPullToRefresh(); // Disable mobile behavior - lateInit(); if (igt.duration > 0) diff --git a/static/main.less b/static/main.less index cc5e6724..5581656f 100755 --- a/static/main.less +++ b/static/main.less @@ -307,10 +307,9 @@ div.rightcol { div.bag { position: absolute; - bottom: 32px; right: 12px; width: 304px; - height: 160px; + height: 100px; /* Content is 97px max */ font-size: 11px; font-weight: 700; text-transform: uppercase; @@ -320,10 +319,10 @@ div.bag { opacity: 0.75; } -table#bag { +table.bag-content { } -table#bag td { +table.bag-content td { min-width: 12px; min-height: 17px; background-color: @tile; @@ -331,11 +330,11 @@ table#bag td { cursor: default; } -table#bag.new td { +table.bag-content.new td { background-color: @double-letter; } -table#bag.empty td { +table.bag-content.empty td { background-color: @freshtile; } @@ -912,8 +911,8 @@ div.movelist { width: 100%; height: @mobile-height-net - @board-top - 3 * @margin-small; background-color: @background; - margin-top: @margin-small; - margin-bottom: 0; + padding-top: @margin-small; + padding-bottom: @margin-small; overflow: auto; z-index: 5; } @@ -1021,6 +1020,12 @@ div.chall { div.chall-info { .bold-bottom-message; background-color: darken(@freshtile, 10%); + bottom: 70px; + width: @mobile-width - 2 * @margin-small - 48px; + padding-left: 24px; + padding-right: 24px; + padding-top: 0px; + padding-bottom: 4px; } div.exchange { @@ -1614,6 +1619,51 @@ span.over { /* Overridden for fullscreen media */ } +div #userlist { + height: 396px; /* 11 lines @ 36px each */ + overflow-y: auto; + overflow-x: hidden; +} + +div #gamelist, +div #recentlist { + height: 468px; /* 13 lines @ 36px each */ + overflow-y: auto; + overflow-x: hidden; +} + +div #usr-recent { + height: 432px; /* 12 lines @ 36px each */ + overflow-y: auto; + overflow-x: hidden; +} + +div #chall-sent, +div #chall-received { + height: 216px; /* 6 lines @ 36px each */ + overflow-y: auto; + overflow-x: hidden; +} + +div.games { + position: absolute; + top: 0px; + left: 0px; + width: 100%; + height: @mobile-height-net - @board-top - @margin-small - 24px; + background-color: @theme6; + overflow: auto; + z-index: 2; + padding-top: 12px; + padding-bottom: 12px; +} + +div.games-item { + /* Defined further below */ + margin-left: 32px; + margin-right: 32px; +} + /* ================= MEDIA-SPECIFIC STYLE ADJUSTMENTS ================== */ @media all and (min-width: @mobile-width) and (max-width: @mobile-height) and (min-height: @mobile-height-net) { @@ -1637,6 +1687,7 @@ span.over { div.container { width: @mobile-height; /* Reference width */ height: @mobile-width; /* Reference height */ + overflow-y: hidden; } div.board { @@ -1752,7 +1803,7 @@ div.opp-turn { } div.movelist { - height: 280px; + height: 272px; } div.games, @@ -1761,6 +1812,10 @@ div.chat { display: none; } +div.right-area { + height: 288px; +} + } /* ==================== FULL-SCREEN (NON-MOBILE) UI ====================== */ @@ -1770,18 +1825,21 @@ div.chat { /* Large screen (iPad and larger) */ html { - height: auto; - overflow: hidden; + height: initial; + overflow: initial; } body { - position: absolute; - overflow: auto; + position: initial; + overflow: initial; + height: initial; + width: initial; } div.container { width: 1024px; height: 768px; /* Was 748 */ + overflow-y: hidden; } div.logo { @@ -1908,7 +1966,7 @@ div.board-help { div.bag { display: block; - bottom: 54px; + bottom: 114px; } div.rack { @@ -2170,7 +2228,8 @@ div.right-tab#tab-chat { } div.movelist { - margin-top: 0; + padding-top: 0; + padding-bottom: 0; height: 100%; } @@ -2515,6 +2574,34 @@ span.over { outline: yellow solid 3px; } +div #userlist, +div #gamelist { + height: 540px; /* 15 lines @ 36px each */ +} + +div #recentlist { + height: 468px; /* 13 lines @ 36px each */ +} + +div #usr-recent { + height: 432px; /* 12 lines @ 36px each */ +} + +div #chall-sent, +div #chall-received { + height: 216px; /* 6 lines @ 36px each */ +} + +div.games { + height: 100%; + padding: 0px; +} + +div.games-item { + margin-left: 4px; + margin-right: 4px; +} + } /* media min-width: 768px */ /* ================= END OF MEDIA-SPECIFIC STYLE ADJUSTMENTS =================== */ @@ -2721,17 +2808,6 @@ div.twoletter-area#two-2 { visibility: hidden; } -div.games { - position: absolute; - top: 0px; - left: 0px; - width: 100%; - height: 100%; - background-color: @theme6; - overflow: auto; - z-index: 2; -} - div.games-item { position: relative; height: 24px; @@ -2743,8 +2819,6 @@ div.games-item { vertical-align: top; text-overflow: ellipsis; white-space: nowrap; - margin-left: 4px; - margin-right: 4px; margin-top: 2px; margin-bottom: 2px; } @@ -3772,32 +3846,6 @@ span.usr-info:hover { background-color: @hover-link; } -div #userlist, -div #gamelist { - height: 540px; /* 15 lines @ 36px each */ - overflow-y: auto; - overflow-x: hidden; -} - -div #recentlist { - height: 468px; /* 13 lines @ 36px each */ - overflow-y: auto; - overflow-x: hidden; -} - -div #usr-recent { - height: 432px; /* 12 lines @ 36px each */ - overflow-y: auto; - overflow-x: hidden; -} - -div #chall-sent, -div #chall-received { - height: 216px; /* 6 lines @ 36px each */ - overflow-y: auto; - overflow-x: hidden; -} - #userlist span.glyphicon.glyphicon-star { color: @triple-letter; } diff --git a/templates/board.html b/templates/board.html index 84570524..a19ac598 100755 --- a/templates/board.html +++ b/templates/board.html @@ -348,7 +348,7 @@

- +
@@ -490,7 +490,7 @@

{%- if dev_server %} {% else %} - + {% endif -%} {% else %} - + {% endif %}