Analysis page for Bughouse layout problems #1494

gbtami · Jul 7, 2024 · 03ec172 · 03ec172
1 parent 0508205
commit 03ec172
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 9 deletions.
diff --git a/client/bug/analysis.bug.ts b/client/bug/analysis.bug.ts
@@ -54,7 +54,6 @@ export function analysisView(model: PyChessModel): VNode[] {
     const variant = VARIANTS[model.variant];
 
     const isAnalysisBoard = model["gameId"] === "";
-    const tabindexPgn = (isAnalysisBoard) ? '0' : '1';
 
     renderTimeago();
 
@@ -156,10 +155,10 @@ export function analysisView(model: PyChessModel): VNode[] {
             ]),
             h('under-left#spectators'),
             h('under-board', [
-                h('div.chart-container', {attrs: {id: 'panel-2', role: 'tabpanel', tabindex: '-1', 'aria-labelledby': 'tab-2'}}, [
+                h('div.chart-container', {attrs: {id: 'panel-2', role: 'tabpanel', tabindex: '0', 'aria-labelledby': 'tab-1'}}, [
                     h('div#chart-movetime'),
                 ]),
-                h('div', {attrs: {id: 'panel-4', role: 'tabpanel', tabindex: tabindexPgn, 'aria-labelledby': 'tab-4'}}, [
+                h('div', {attrs: {id: 'panel-4', role: 'tabpanel', tabindex: '1', 'aria-labelledby': 'tab-4'}}, [
                     h('div#fentext', [
                         h('strong', 'BFEN'),
                         h('input#fullfen', {attrs: {readonly: true, spellcheck: false}, on: { click: onClickFullfen } })
@@ -168,8 +167,8 @@ export function analysisView(model: PyChessModel): VNode[] {
                     h('div#pgntext'),
                 ]),
                 h('div', {attrs: {role: 'tablist', 'aria-label': 'Analysis Tabs'}}, [
-                    h('span', {attrs: {role: 'tab', 'aria-selected': true, 'aria-controls': 'panel-2', id: 'tab-1', tabindex: '0'}}, _('Move times')),
-                    h('span', {attrs: {role: 'tab', 'aria-selected': false, 'aria-controls': 'panel-4', id: 'tab-4', tabindex: tabindexPgn}}, _('FEN & PGN')),
+                    h('span', {attrs: {role: 'tab', 'aria-selected': 'true', 'aria-controls': 'panel-2', id: 'tab-1', tabindex: '0'}}, _('Move times')),
+                    h('span', {attrs: {role: 'tab', 'aria-selected': 'false', 'aria-controls': 'panel-4', id: 'tab-4', tabindex: '1'}}, _('FEN & PGN')),
                 ]),
             ]),
         ]),

diff --git a/client/main.ts b/client/main.ts
@@ -124,7 +124,7 @@ export function view(el: HTMLElement, model: PyChessModel): VNode {
         return h('div', embedView(model));
     case 'analysis':
         switch (model.variant) {
-            case 'bughouse': return h('div#main-wrap', bugAnalysisView(model));
+            case 'bughouse': return h('div#main-wrap.bug', bugAnalysisView(model));
             default: return h('div#main-wrap', analysisView(model));;
         }
     case 'puzzle':

diff --git a/static/bughouse.css b/static/bughouse.css
@@ -2,11 +2,11 @@
  * analysis.css
  ******************************************************************************************* */
 @media (min-width: 800px) {
-        .analysis-app.bug {
+    /*.analysis-app.bug {
         grid-template-columns: 500px
                                var(--gauge-gap)
-                               calc(var(--pocketLength) * (var(--cg-width) / var(--files)))
-                               calc(var(--pocketLength) * (var(--cg-width) / var(--files)))
+                               calc(var(--pocketLength) * (var(--cg-width-a) / var(--files)))
+                               calc(var(--pocketLength) * (var(--cg-width-b) / var(--files)))
                                var(--gauge-gap)
                                0.8em
                                500px;
@@ -17,6 +17,25 @@
                              'board gauge pocket-bot pocket-bot-partner gaugePartner d boardPartner'
                              '. . move-controls move-controls . . .'
                              'gameinfo gameinfo uboard uboard uboard uboard uboard'
+    }*/
+    .analysis-app.bug {
+        --board-scaleA: calc((var(--zoom-a) / 100));
+        --board-scaleB: calc((var(--zoom-b) / 100));
+        grid-row-gap: 2vmin;
+        grid-template-columns: calc(30vw * var(--board-scaleA))
+                               var(--gauge-gap)
+                               calc(var(--pocketLength) * (var(--cg-width-a) / var(--files)))
+                               calc(var(--pocketLength) * (var(--cg-width-b) / var(--files)))
+                               var(--gauge-gap)
+                               0.8em
+                               calc(30vw * var(--board-scaleB));
+        grid-template-rows: min-content 1fr;
+        grid-template-areas: 'board gauge pocket-top pocket-top-partner gaugePartner d boardPartner'
+                             'board gauge tools tools gaugePartner d boardPartner'
+                             'board gauge tools tools gaugePartner d boardPartner'
+                             'board gauge pocket-bot pocket-bot-partner gaugePartner d boardPartner'
+                             '. . move-controls move-controls . . .'
+                             'gameinfo gameinfo uboard uboard uboard uboard uboard'
     }
 }