UI improvements: fix #1850, fix #1851

wordbots · May 15, 2023 · 3d00580 · 3d00580
1 parent 54d52c6
commit 3d00580
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 21 deletions.
diff --git a/src/common/components/cards/CardCollection.tsx b/src/common/components/cards/CardCollection.tsx
@@ -46,16 +46,24 @@ export default class CardCollection extends React.Component<CardCollectionProps,
   }
 
   public render(): JSX.Element {
-    const GridOrTable = this.props.layout === 0 ? CardGrid : CardTable;
     return (
       <div style={{ width: '100%' }}>
         {this.renderPageControls()}
-        <GridOrTable
-          selectable
-          cards={this.cards}
-          selectedCardIds={this.props.selectedCardIds}
-          onCardClick={this.onCardClick}
-        />
+        {this.props.layout === Layout.Grid
+          ? <CardGrid
+            selectable
+            cards={this.cards}
+            selectedCardIds={this.props.selectedCardIds}
+            onCardClick={this.onCardClick}
+            scale={1.25}
+          />
+          : <CardTable
+            selectable
+            cards={this.cards}
+            selectedCardIds={this.props.selectedCardIds}
+            onCardClick={this.onCardClick}
+          />
+        }
         {this.renderPageControls()}
       </div>
     );

diff --git a/src/common/components/cards/CardGrid.tsx b/src/common/components/cards/CardGrid.tsx
@@ -9,7 +9,7 @@ import Sentence from '../card/Sentence';
 import { CardGridOrTableProps } from './CardCollection';
 import CardProvenanceDescription from './CardProvenanceDescription';
 
-export default class CardGrid extends React.Component<CardGridOrTableProps> {
+export default class CardGrid extends React.Component<CardGridOrTableProps & { scale?: number }> {
   public render(): JSX.Element {
     return (
       <div
@@ -57,13 +57,14 @@ export default class CardGrid extends React.Component<CardGridOrTableProps> {
         source={card.metadata.source}
         selected={this.props.selectable && this.props.selectedCardIds.includes(card.id)}
         onCardClick={this.props.onCardClick}
+        scale={this.props.scale || 1}
       />
       <CardProvenanceDescription
         card={card}
         style={{
-          fontSize: 11,
+          fontSize: 11 * (this.props.scale || 1),
           color: '#888',
-          maxWidth: 140,
+          maxWidth: 140 * (this.props.scale || 1),
           padding: '1px 3px',
           background: `rgba(255, 255, 255, 0.8)`,
           borderRadius: 5

diff --git a/src/common/components/game/DraftCardPicker.tsx b/src/common/components/game/DraftCardPicker.tsx
@@ -23,7 +23,7 @@ export default class DraftCardPicker extends React.Component<DraftCardPickerProp
   };
 
   public render(): JSX.Element {
-    const { cardGroup, format } = this.props;
+    const { cardGroup } = this.props;
     const { selectedCardIds } = this.state;
 
     return (
@@ -57,16 +57,14 @@ export default class DraftCardPicker extends React.Component<DraftCardPickerProp
                 selected: selectedCardIds.includes(card.id),
                 onCardClick: () => this.handleSelectCard(card)
               })}
-              {format.name === 'everythingDraft' && (
-                <CardProvenanceDescription
-                  disableLinks
-                  card={card}
-                  style={{
-                    color: '#bbb',
-                    fontSize: '0.5em'
-                  }}
-                />
-              )}
+              <CardProvenanceDescription
+                disableLinks
+                card={card}
+                style={{
+                  color: '#bbb',
+                  fontSize: '0.5em'
+                }}
+              />
             </div>
           ))}
         </div>