diff --git a/public/font31/fonts/lichess.eot b/public/font31/fonts/lichess.eot deleted file mode 100644 index b200a61b7e..0000000000 Binary files a/public/font31/fonts/lichess.eot and /dev/null differ diff --git a/public/font31/fonts/lichess.svg b/public/font31/fonts/lichess.svg deleted file mode 100644 index fee823d0e2..0000000000 --- a/public/font31/fonts/lichess.svg +++ /dev/null @@ -1,101 +0,0 @@ - - - -Generated by Fontastic.me - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/font31/fonts/lichess.ttf b/public/font31/fonts/lichess.ttf deleted file mode 100644 index eca0242795..0000000000 Binary files a/public/font31/fonts/lichess.ttf and /dev/null differ diff --git a/public/font31/fonts/lichess.woff b/public/font31/fonts/lichess.woff deleted file mode 100644 index a0eec0210f..0000000000 Binary files a/public/font31/fonts/lichess.woff and /dev/null differ diff --git a/public/font31/icons-reference.html b/public/font31/icons-reference.html deleted file mode 100644 index 1f6b73512e..0000000000 --- a/public/font31/icons-reference.html +++ /dev/null @@ -1,797 +0,0 @@ - - - - - - - Font Reference - lichess - - - - - -
-

lichess

-

This font was created withFontastic

-

CSS mapping

- -

Character mapping

- -
- - \ No newline at end of file diff --git a/public/font31/styles.css b/public/font31/styles.css deleted file mode 100644 index 456fce06f4..0000000000 --- a/public/font31/styles.css +++ /dev/null @@ -1,313 +0,0 @@ -@charset "UTF-8"; - -@font-face { - font-family: "lichess"; - src:url("fonts/lichess.eot"); - src:url("fonts/lichess.eot?#iefix") format("embedded-opentype"), - url("fonts/lichess.woff") format("woff"), - url("fonts/lichess.ttf") format("truetype"), - url("fonts/lichess.svg#lichess") format("svg"); - font-weight: normal; - font-style: normal; - -} - -[data-icon]:before { - font-family: "lichess" !important; - content: attr(data-icon); - font-style: normal !important; - font-weight: normal !important; - font-variant: normal !important; - text-transform: none !important; - speak: none; - line-height: 1; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -[class^="icon-"]:before, -[class*=" icon-"]:before { - font-family: "lichess" !important; - font-style: normal !important; - font-weight: normal !important; - font-variant: normal !important; - text-transform: none !important; - speak: none; - line-height: 1; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.icon-fontawesome-webfont-1:before { - content: "a"; -} -.icon-fontawesome-webfont-2:before { - content: "b"; -} -.icon-fontawesome-webfont-3:before { - content: "c"; -} -.icon-fontawesome-webfont-4:before { - content: "d"; -} -.icon-fontawesome-webfont-5:before { - content: "e"; -} -.icon-fontawesome-webfont-6:before { - content: "f"; -} -.icon-fontawesome-webfont-7:before { - content: "g"; -} -.icon-fontawesome-webfont-8:before { - content: "h"; -} -.icon-fontawesome-webfont-9:before { - content: "j"; -} -.icon-fontawesome-webfont-10:before { - content: "k"; -} -.icon-fontawesome-webfont-11:before { - content: "l"; -} -.icon-fontawesome-webfont-12:before { - content: "m"; -} -.icon-fontawesome-webfont-15:before { - content: "p"; -} -.icon-fontawesome-webfont-17:before { - content: "r"; -} -.icon-fontawesome-webfont-18:before { - content: "s"; -} -.icon-fontawesome-webfont-19:before { - content: "t"; -} -.icon-fontawesome-webfont-20:before { - content: "u"; -} -.icon-eye-view-1:before { - content: "v"; -} -.icon-fontawesome-webfont-21:before { - content: "w"; -} -.icon-fontawesome-webfont-22:before { - content: "x"; -} -.icon-fontawesome-webfont-23:before { - content: "z"; -} -.icon-microscope:before { - content: "A"; -} -.icon-crown-king-1:before { - content: "C"; -} -.icon-fontawesome-webfont-24:before { - content: "D"; -} -.icon-fontawesome-webfont-25:before { - content: "E"; -} -.icon-fontawesome-webfont-26:before { - content: "F"; -} -.icon-fontawesome-webfont-27:before { - content: "G"; -} -.icon-fontawesome-webfont-28:before { - content: "H"; -} -.icon-fontawesome-webfont-29:before { - content: "I"; -} -.icon-fontawesome-webfont-30:before { - content: "J"; -} -.icon-fontawesome-webfont-31:before { - content: "K"; -} -.icon-loop-alt2:before { - content: "B"; -} -.icon-arrow-full-lowerright:before { - content: "M"; -} -.icon-arrow-full-upperright:before { - content: "N"; -} -.icon-fontawesome-webfont-32:before { - content: "L"; -} -.icon-plus-squared:before { - content: "O"; -} -.icon-plus-circled:before { - content: "O"; -} -.icon-fontawesome-webfont-33:before { - content: "O"; -} -.icon-fontawesome-webfont-34:before { - content: "Q"; -} -.icon-fire-station-24:before { - content: "Q"; -} -.icon-burning-fire:before { - content: "Q"; -} -.icon-arrow-sans-down:before { - content: "R"; -} -.icon-arrow-sans-up:before { - content: "S"; -} -.icon-fontawesome-webfont-34:before { - content: "T"; -} -.icon-crossed-swords-small:before { - content: "U"; -} -.icon-fontawesome-webfont-35:before { - content: "V"; -} -.icon-fontawesome-webfont-36:before { - content: "W"; -} -.icon-fontawesome-webfont-37:before { - content: "X"; -} -.icon-fontawesome-webfont-38:before { - content: "Y"; -} -.icon-fontawesome-webfont-39:before { - content: "Z"; -} -.icon-fontawesome-webfont-40:before { - content: "!"; -} -.icon-fontawesome-webfont-41:before { - content: "P"; -} -.icon-fontawesome-webfont:before { - content: "i"; -} -.icon-hand-stop:before { - content: "2"; -} -.icon-ionicons:before { - content: "3"; -} -.icon-fontawesome-webfont-42:before { - content: "0"; -} -.icon-television-tv:before { - content: "1"; -} -.icon-moon:before { - content: "4"; -} -.icon-sun:before { - content: "5"; -} -.icon-ink-pen:before { - content: "6"; -} -.icon-chart-line:before { - content: "9"; -} -.icon-link:before { - content: "\""; -} -.icon-ionicons-1:before { - content: "7"; -} -.icon-unmute:before { - content: "#"; -} -.icon-mute:before { - content: "$"; -} -.icon-gear:before { - content: "%"; -} -.icon-repo:before { - content: "&"; -} -.icon-tag:before { - content: "o"; -} -.icon-trash-bin:before { - content: "q"; -} -.icon-search-find:before { - content: "y"; -} -.icon-sheriff-badge:before { - content: "n"; -} -.icon-crown:before { - content: "8"; -} -.icon-die-six:before { - content: "'"; -} -.icon-flag:before { - content: "("; -} -.icon-flame:before { - content: ")"; -} -.icon-hourglass:before { - content: "+"; -} -.icon-droplet:before { - content: ","; -} -.icon-arrow-streamline-target:before { - content: "-"; -} -.icon-buffer:before { - content: "."; -} -.icon-upload-cloud:before { - content: "/"; -} -.icon-feather:before { - content: "*"; -} -.icon-gears-setting:before { - content: ":"; -} -.icon-email-plane:before { - content: ";"; -} -.icon-zoom-in:before { - content: "<"; -} -.icon-screen-full:before { - content: "="; -} -.icon-list:before { - content: "?"; -} -.icon-atom:before { - content: ">"; -} -.icon-book:before { - content: "]"; -} -.icon-body-cut:before { - content: "`"; -} -.icon-antichess:before { - content: "@"; -} -.icon-hubot:before { - content: "^"; -} diff --git a/public/stylesheets/analyse.css b/public/stylesheets/analyse.css index 081d24c109..ba48c78ba7 100644 --- a/public/stylesheets/analyse.css +++ b/public/stylesheets/analyse.css @@ -100,12 +100,13 @@ div.fen_pgn input.fen { div.game_control { margin-top: 10px; text-align: center; - white-space: nowrap + width: 244px; + white-space: nowrap; } div.game_control a { font-size: 12px; + width: 25px; height: 17px; - width: 12px; display: inline-block; -webkit-user-select: none; -moz-user-select: none; @@ -113,14 +114,32 @@ div.game_control a { margin: 0 -1px; } div.game_control .jumps { + display: inline-block; margin-right: 10px; } -.lichess_ground .replay { +.lichess_ground .replay, +.lichess_ground .action_menu { height: calc(100% - 40px); overflow: auto; overflow-x: hidden; border: 1px solid #ccc; } +.lichess_ground .action_menu { + border-color: transparent; +} +.lichess_ground .action_menu .inner { + position: relative; + top: 50%; + transform: translateY(-50%); +} +.lichess_ground .action_menu .button { + display: block; + margin: 15px 0; + padding: 10px; +} +.lichess_ground .action_menu .button::before { + font-size: 2em; +} .lichess_ground .replay .turn > .index { display: inline-block; width: 26px; diff --git a/public/stylesheets/common.css b/public/stylesheets/common.css index b42a5d0be4..48017412dc 100644 --- a/public/stylesheets/common.css +++ b/public/stylesheets/common.css @@ -70,8 +70,8 @@ time { } @font-face { font-family: "lichess"; - src: url("../font31/fonts/lichess.eot"); - src: url("../font31/fonts/lichess.eot?#iefix") format("embedded-opentype"), url("../font31/fonts/lichess.woff") format("woff"), url("../font31/fonts/lichess.ttf") format("truetype"), url("../font31/fonts/lichess.svg#lichess") format("svg"); + src: url("../font32/fonts/lichess.eot"); + src: url("../font32/fonts/lichess.eot?#iefix") format("embedded-opentype"), url("../font32/fonts/lichess.woff") format("woff"), url("../font32/fonts/lichess.ttf") format("truetype"), url("../font32/fonts/lichess.svg#lichess") format("svg"); font-weight: normal; font-style: normal; } diff --git a/ui/analyse/src/actionMenu.js b/ui/analyse/src/actionMenu.js new file mode 100644 index 0000000000..d835722116 --- /dev/null +++ b/ui/analyse/src/actionMenu.js @@ -0,0 +1,42 @@ +var m = require('mithril'); + +module.exports = { + controller: function() { + + this.open = false; + + this.toggle = function() { + this.open = !this.open + }.bind(this); + }, + view: function(ctrl) { + var flipAttrs = {}; + if (ctrl.data.userAnalysis) flipAttrs.onclick = ctrl.flip; + else flipAttrs.href = ctrl.router.Round.watcher(ctrl.data.game.id, ctrl.data.opponent.color).url; + + return m('div.action_menu', + m('div.inner', [ + m('a.button.text[data-icon=B]', flipAttrs, ctrl.trans('flipBoard')), + ctrl.data.inGame ? null : m('a.button.text[data-icon=m]', { + href: ctrl.data.userAnalysis ? '/editor?fen=' + ctrl.vm.situation.fen : '/' + ctrl.data.game.id + '/edit?fen=' + ctrl.vm.situation.fen, + rel: 'nofollow' + }, ctrl.trans('boardEditor')), + ctrl.data.inGame ? null : m('a.button.text[data-icon=U]', { + onclick: function() { + $.modal($('.continue_with.' + ctrl.data.game.id)); + } + }, ctrl.trans('continueFromHere')), + m('div.continue_with.' + ctrl.data.game.id, [ + m('a.button', { + href: ctrl.data.userAnalysis ? '/?fen=' + ctrl.vm.situation.fen + '#ai' : ctrl.router.Round.continue(ctrl.data.game.id, 'ai').url + '?fen=' + ctrl.vm.situation.fen, + rel: 'nofollow' + }, ctrl.trans('playWithTheMachine')), + m('br'), + m('a.button', { + href: ctrl.data.userAnalysis ? '/?fen=' + ctrl.vm.situation.fen + '#friend' : ctrl.router.Round.continue(ctrl.data.game.id, 'friend').url + '?fen=' + ctrl.vm.situation.fen, + rel: 'nofollow' + }, ctrl.trans('playWithAFriend')) + ]) + ])); + } +}; diff --git a/ui/analyse/src/ctrl.js b/ui/analyse/src/ctrl.js index d05474a1d7..7145b28737 100644 --- a/ui/analyse/src/ctrl.js +++ b/ui/analyse/src/ctrl.js @@ -5,12 +5,14 @@ var analyse = require('./analyse'); var ground = require('./ground'); var keyboard = require('./keyboard'); var treePath = require('./path'); +var actionMenu = require('./actionMenu').controller; var m = require('mithril'); module.exports = function(cfg, router, i18n, onChange) { this.data = data({}, cfg); this.analyse = new analyse(this.data.game, this.data.analysis); + this.actionMenu = new actionMenu(); var initialPath = cfg.path ? treePath.read(cfg.path) : treePath.default(); @@ -19,7 +21,8 @@ module.exports = function(cfg, router, i18n, onChange) { pathStr: treePath.write(initialPath), situation: null, comments: true, - flip: false + flip: false, + play: false }; this.flip = function() { diff --git a/ui/analyse/src/view.js b/ui/analyse/src/view.js index 2faf0f6280..1ff1c7220d 100644 --- a/ui/analyse/src/view.js +++ b/ui/analyse/src/view.js @@ -7,6 +7,7 @@ var renderStatus = require('game').view.status; var mod = require('game').view.mod; var treePath = require('./path'); var control = require('./control'); +var actionMenu = require('./actionMenu').view; function renderEval(e) { e = Math.round(e / 10) / 10; @@ -266,17 +267,9 @@ function blindBoard(ctrl) { } function buttons(ctrl) { - var nbMoves = ctrl.data.game.moves.length; - var flipAttrs = { - 'data-hint': ctrl.trans('flipBoard'), - }; - if (ctrl.data.userAnalysis) flipAttrs.onclick = ctrl.flip; - else flipAttrs.href = ctrl.router.Round.watcher(ctrl.data.game.id, ctrl.data.opponent.color).url; return [ m('div.game_control', [ - m('div.jumps.hint--bottom', { - 'data-hint': 'Tip: use your keyboard arrow keys!' - }, [ + m('div.jumps.hint--bottom', [ ['first', 'W', control.first, ], ['prev', 'Y', control.prev], ['next', 'X', control.next], @@ -294,29 +287,12 @@ function buttons(ctrl) { } }; })), - m('a.button.hint--bottom', flipAttrs, m('span[data-icon=B]')), - ctrl.data.inGame ? null : m('a.button.hint--bottom', { - 'data-hint': ctrl.trans('boardEditor'), - href: ctrl.data.userAnalysis ? '/editor?fen=' + ctrl.vm.situation.fen : '/' + ctrl.data.game.id + '/edit?fen=' + ctrl.vm.situation.fen, - rel: 'nofollow' - }, m('span[data-icon=m]')), - ctrl.data.inGame ? null : m('a.button.hint--bottom', { - 'data-hint': ctrl.trans('continueFromHere'), - onclick: function() { - $.modal($('.continue_with.' + ctrl.data.game.id)); - } - }, m('span[data-icon=U]')) - ]), - m('div.continue_with.' + ctrl.data.game.id, [ m('a.button', { - href: ctrl.data.userAnalysis ? '/?fen=' + ctrl.vm.situation.fen + '#ai' : ctrl.router.Round.continue(ctrl.data.game.id, 'ai').url + '?fen=' + ctrl.vm.situation.fen, - rel: 'nofollow' - }, ctrl.trans('playWithTheMachine')), - m('br'), - m('a.button', { - href: ctrl.data.userAnalysis ? '/?fen=' + ctrl.vm.situation.fen + '#friend' : ctrl.router.Round.continue(ctrl.data.game.id, 'friend').url + '?fen=' + ctrl.vm.situation.fen, - rel: 'nofollow' - }, ctrl.trans('playWithAFriend')) + onclick: ctrl.actionMenu.toggle, + class: ctrl.actionMenu.open ? 'active' : '' + }, m('span', { + 'data-icon': '[' + })) ]) ]; } @@ -332,7 +308,7 @@ module.exports = function(ctrl) { }, [ ctrl.data.blind ? blindBoard(ctrl) : visualBoard(ctrl), m('div.lichess_ground', - m('div.replay', { + ctrl.actionMenu.open ? actionMenu(ctrl) : m('div.replay', { config: function(el, isUpdate) { autoScroll(el); if (!isUpdate) setTimeout(partial(autoScroll, el), 100);