Add bidding table component

Author: pociej

lib/moves/bid.js

@@ -1,6 +1,7 @@
 import { SPECIAL_BIDS } from '../SpecialBids.js';
 
 export const bid = function (G, ctx, bid) {
+  console.log("bid", bid);
   let contract = Object.assign({}, G.contract);
   switch (bid.bid) {
     case SPECIAL_BIDS.PASS:

userApp/imports/ui/components/Bidding/Bidding.js userApp/imports/ui/components/Bidding/BiddingBox.js

@@ -1,12 +1,11 @@
 import { Button, Card, Image, Grid } from "semantic-ui-react";
 import React, { useState } from "react";
 import { getAllowedBids } from "/imports/lib/bidding.js";
-import { positionKey } from "/imports/lib/positions.js";
 import _ from "lodash";
 import { SUIT_SYMBOLS } from "/imports/lib/Suits";
 import { SPECIAL_BIDS } from "/imports/lib/SpecialBids.js";
 
-export const Bidding = ({ G, ctx, makeBid, position }) => {
+export const BiddingBox = ({ G, ctx, makeBid, position }) => {
   const bids = getAllowedBids({ bidding: G.bidding, position });
   const [selectedLevel, setSelectedLevel] = useState(null);
   const levels = _.chain(bids)

userApp/imports/ui/components/Bidding/BiddingTable.js

@@ -0,0 +1,51 @@
+import React, { useState } from "react";
+import { Table, Card } from 'semantic-ui-react'
+import { SUIT_SYMBOLS } from "/imports/lib/Suits";
+import { _ } from 'lodash';
+import { POSITIONS } from '/imports/lib/positions.js';
+
+export const BiddingTable = function ({ bidding, dealer }) {
+  bidding.push({ position: dealer, bid: '?' });
+  const rows = bidding.reduce((result, bid) => {
+    const currentRow = _.last(result);
+    if (currentRow.length === 4) {
+      return [...result, [bid]]
+    } else {
+      currentRow.push(bid);
+      return result;
+    }
+  }, [[]]);
+
+  const firstBidPosition = _.first(bidding).position;
+  let header = _.keys(POSITIONS);
+  let first = _.first(header);
+
+  while (first !== firstBidPosition) {
+    header.unshift(header.pop());
+    first = _.first(header);
+  };
+  return < Card >
+    <Table fixed>
+      <Table.Header>
+        <Table.Row>
+          {header.map(h => {
+            return <Table.HeaderCell key={`header_${h}`}>{h}</Table.HeaderCell>
+          })}
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {rows.map((row, row_index) => {
+          return <Table.Row key={`bidding_row_${row_index}`}>
+            {row.map((bid, bid_index) => {
+              return <Table.Cell key={`bid_cell_${bid_index}`}>  <Bid bid={bid}> </Bid></Table.Cell>
+            })}
+          </Table.Row>
+        })}
+      </Table.Body>
+    </Table>
+  </Card >
+};
+
+export const Bid = function ({ bid }) {
+  return typeof (bid.suit) !== 'undefined' ? <div> {bid.level}{SUIT_SYMBOLS[bid.suit]}</div> : <div>{bid.bid}</div>;
+}

userApp/imports/ui/components/Bidding/index.js

@@ -1 +1,2 @@
-export * from "./Bidding.js";
+export * from "./BiddingBox.js";
+export * from "./BiddingTable.js";

userApp/imports/ui/components/Table/Table.js

@@ -3,7 +3,7 @@ import { BridgeDealFactory, TicTacToe } from "/imports/lib/bridge.js";
 import { Local } from "boardgame.io/multiplayer";
 import { useTracker } from "meteor/react-meteor-data";
 import { Hand } from "../Hand";
-import { Bidding } from "../Bidding";
+import { BiddingBox, BiddingTable } from "../Bidding";
 import React from "react";
 import {
   playerIdToPosition,
@@ -21,6 +21,7 @@ import { BOARD_STATES } from '/imports/constants/BoardStates.js';
 const BridgeTable = function ({ G, ctx, playerID, moves, events }) {
 
   const playerPosition = playerIdToPosition(playerID);
+  //for tests
   const isCurrenPlayerBidding =
     ctx.phase === PHASE_BIDDING && playerID === ctx.currentPlayer;
 
@@ -52,7 +53,9 @@ const BridgeTable = function ({ G, ctx, playerID, moves, events }) {
             cardsHidden={true}
           />
         </div>
-        <div className="column"></div>
+        <div className="column">
+          <BiddingTable bidding={[...G.bidding]} dealer={G.dealer} />
+        </div>
         <div className="column">
           <Hand
             ctx={ctx}
@@ -69,14 +72,14 @@ const BridgeTable = function ({ G, ctx, playerID, moves, events }) {
         <div className="column">
           <div>
             {isCurrenPlayerBidding ? (
-              <Bidding
+              <BiddingBox
                 position={playerPosition}
                 G={G}
                 makeBid={function (bid) {
                   moves.bid(bid);
                 }}
                 ctx={ctx}
-              ></Bidding>
+              ></BiddingBox>
             ) : (
                 ""
               )}