diff --git a/app/views/board/userAnalysisI18n.scala b/app/views/board/userAnalysisI18n.scala index 2ac68309e6..0e60e15848 100644 --- a/app/views/board/userAnalysisI18n.scala +++ b/app/views/board/userAnalysisI18n.scala @@ -166,7 +166,8 @@ object userAnalysisI18n { trans.winPreventedBy50MoveRule, trans.lossSavedBy50MoveRule, trans.allSet, - trans.study.searchByUsername + trans.study.searchByUsername, + trans.mode ).map(_.key) private val forecastTranslations: Vector[MessageKey] = Vector( diff --git a/ui/analyse/css/explorer/_config.scss b/ui/analyse/css/explorer/_config.scss index 148bfa3e85..5ae984f7a1 100644 --- a/ui/analyse/css/explorer/_config.scss +++ b/ui/analyse/css/explorer/_config.scss @@ -57,17 +57,21 @@ .name { @extend %flex-center; margin-top: 1em; - .user-link { - @extend %box-radius; + .player-name { font-size: 1.3em; padding-right: 1em; + text-transform: none; + color: $c-font-clear; - background: mix($c-primary, $c-bg-box, 12%); + background: mix($c-primary, $c-bg-box, 20%); + &:hover { + background: mix($c-primary, $c-bg-box, 30%); + } padding: 0.2em 0.6em; margin-right: 0.5em; } - .button { - width: 100%; + .color { + margin-left: 1ch; } } diff --git a/ui/analyse/src/explorer/explorerConfig.ts b/ui/analyse/src/explorer/explorerConfig.ts index 756f469be0..abc5344ad3 100644 --- a/ui/analyse/src/explorer/explorerConfig.ts +++ b/ui/analyse/src/explorer/explorerConfig.ts @@ -2,9 +2,9 @@ import { h, VNode } from 'snabbdom'; import { Prop, prop } from 'common'; import { bind, dataIcon, onInsert } from 'common/snabbdom'; import { storedProp, storedJsonProp, StoredJsonProp, StoredProp } from 'common/storage'; -import { Game } from '../interfaces'; import { ExplorerDb, ExplorerSpeed, ExplorerMode } from './interfaces'; import { snabModal } from 'common/modal'; +import AnalyseCtrl from '../ctrl'; const allSpeeds: ExplorerSpeed[] = ['bullet', 'blitz', 'rapid', 'classical']; const allModes: ExplorerMode[] = ['casual', 'rated']; @@ -38,13 +38,7 @@ export interface ExplorerConfigData { export class ExplorerConfigCtrl { data: ExplorerConfigData; - constructor( - readonly game: Game, - readonly variant: VariantKey, - readonly onClose: () => void, - readonly trans: Trans, - readonly redraw: () => void - ) { + constructor(readonly root: AnalyseCtrl, readonly variant: VariantKey, readonly onClose: () => void) { const available: ExplorerDb[] = ['lichess', 'player']; if (variant === 'standard') available.unshift('masters'); this.data = { @@ -96,7 +90,7 @@ export class ExplorerConfigCtrl { export function view(ctrl: ExplorerConfigCtrl): VNode[] { return [ h('section.db', [ - h('label', ctrl.trans.noarg('database')), + h('label', ctrl.root.trans.noarg('database')), h( 'div.choices', ctrl.data.db.available.map(s => @@ -106,7 +100,7 @@ export function view(ctrl: ExplorerConfigCtrl): VNode[] { attrs: { 'aria-pressed': `${ctrl.db() === s}`, }, - hook: bind('click', _ => ctrl.data.db.selected(s), ctrl.redraw), + hook: bind('click', _ => ctrl.data.db.selected(s), ctrl.root.redraw), }, s ) @@ -122,7 +116,7 @@ export function view(ctrl: ExplorerConfigCtrl): VNode[] { attrs: dataIcon(''), hook: bind('click', ctrl.toggleOpen), }, - ctrl.trans.noarg('allSet') + ctrl.root.trans.noarg('allSet') ) ), ]; @@ -133,22 +127,24 @@ const playerDb = (ctrl: ExplorerConfigCtrl) => { return h('div.player-db', [ ctrl.data.playerName.open() ? playerModal(ctrl) : undefined, h('section.name', [ - name - ? h( - 'span.user-link.ulpt', - { - hook: onInsert(lichess.powertip.manualUser), - attrs: { 'data-href': `/@/${name}` }, - }, - name - ) - : undefined, h( - `button.${name ? 'button-link' : 'button'}`, + 'button.button.player-name', { - hook: bind('click', () => ctrl.data.playerName.open(true), ctrl.redraw), + hook: bind('click', () => ctrl.data.playerName.open(true), ctrl.root.redraw), }, - name ? 'Change' : 'Select a Lichess player' + name || 'Select a Lichess player' + ), + ' as ', + h( + 'button.button-link.text.color', + { + attrs: { + ...dataIcon(''), + title: ctrl.root.trans('flipBoard'), + }, + hook: bind('click', ctrl.root.flip), + }, + ctrl.root.getOrientation() ), ]), speedSection(ctrl), @@ -166,19 +162,19 @@ const playerModal = (ctrl: ExplorerConfigCtrl) => { } ctrl.data.playerName.value(name); ctrl.data.playerName.open(false); - ctrl.redraw(); + ctrl.root.redraw(); }; return snabModal({ class: 'explorer__config__player__choice', onClose() { ctrl.data.playerName.open(false); - ctrl.redraw(); + ctrl.root.redraw(); }, content: [ h('h2', 'Personal opening explorer'), h('div.input-wrapper', [ h('input', { - attrs: { placeholder: ctrl.trans.noarg('searchByUsername') }, + attrs: { placeholder: ctrl.root.trans.noarg('searchByUsername') }, hook: onInsert(input => lichess.userComplete().then(uac => { uac({ @@ -210,13 +206,13 @@ const playerModal = (ctrl: ExplorerConfigCtrl) => { const masterDb = (ctrl: ExplorerConfigCtrl) => h('div.masters.message', [ h('i', { attrs: dataIcon('') }), - h('p', ctrl.trans('masterDbExplanation', 2200, '1952', '2019')), + h('p', ctrl.root.trans('masterDbExplanation', 2200, '1952', '2019')), ]); const lichessDb = (ctrl: ExplorerConfigCtrl) => h('div', [ h('section.rating', [ - h('label', ctrl.trans.noarg('averageElo')), + h('label', ctrl.root.trans.noarg('averageElo')), h( 'div.choices', ctrl.data.rating.available.map(r => @@ -226,7 +222,7 @@ const lichessDb = (ctrl: ExplorerConfigCtrl) => attrs: { 'aria-pressed': `${ctrl.data.rating.selected().includes(r)}`, }, - hook: bind('click', _ => ctrl.toggleRating(r), ctrl.redraw), + hook: bind('click', _ => ctrl.toggleRating(r), ctrl.root.redraw), }, r.toString() ) @@ -238,7 +234,7 @@ const lichessDb = (ctrl: ExplorerConfigCtrl) => const speedSection = (ctrl: ExplorerConfigCtrl) => h('section.speed', [ - h('label', ctrl.trans.noarg('timeControl')), + h('label', ctrl.root.trans.noarg('timeControl')), h( 'div.choices', ctrl.data.speed.available.map(s => @@ -248,7 +244,7 @@ const speedSection = (ctrl: ExplorerConfigCtrl) => attrs: { 'aria-pressed': `${ctrl.data.speed.selected().includes(s)}`, }, - hook: bind('click', _ => ctrl.toggleSpeed(s), ctrl.redraw), + hook: bind('click', _ => ctrl.toggleSpeed(s), ctrl.root.redraw), }, s ) @@ -258,7 +254,7 @@ const speedSection = (ctrl: ExplorerConfigCtrl) => const modeSection = (ctrl: ExplorerConfigCtrl) => h('section.mode', [ - h('label', ctrl.trans.noarg('mode')), + h('label', ctrl.root.trans.noarg('mode')), h( 'div.choices', ctrl.data.mode.available.map(s => @@ -268,7 +264,7 @@ const modeSection = (ctrl: ExplorerConfigCtrl) => attrs: { 'aria-pressed': `${ctrl.data.mode.selected().includes(s)}`, }, - hook: bind('click', _ => ctrl.toggleMode(s), ctrl.redraw), + hook: bind('click', _ => ctrl.toggleMode(s), ctrl.root.redraw), }, s ) diff --git a/ui/analyse/src/explorer/explorerCtrl.ts b/ui/analyse/src/explorer/explorerCtrl.ts index 28564773cc..77ba99f584 100644 --- a/ui/analyse/src/explorer/explorerCtrl.ts +++ b/ui/analyse/src/explorer/explorerCtrl.ts @@ -52,13 +52,7 @@ export default class ExplorerCtrl { this.enabled = root.embed ? prop(false) : storedProp('explorer.enabled', false); this.withGames = root.synthetic || gameUtil.replayable(root.data) || !!root.data.opponent.ai; this.effectiveVariant = root.data.game.variant.key === 'fromPosition' ? 'standard' : root.data.game.variant.key; - this.config = new ExplorerConfigCtrl( - root.data.game, - this.effectiveVariant, - this.onConfigClose, - root.trans, - root.redraw - ); + this.config = new ExplorerConfigCtrl(root, this.effectiveVariant, this.onConfigClose); window.addEventListener('hashchange', this.checkHash, false); this.checkHash(); }