diff --git a/client/src/components/user-interface/common/Checkbox.tsx b/client/src/components/user-interface/common/Checkbox.tsx new file mode 100644 index 0000000..318cc68 --- /dev/null +++ b/client/src/components/user-interface/common/Checkbox.tsx @@ -0,0 +1,22 @@ +import colours from '../../../utils/colours'; + +type CheckboxProps = { + title: string; + value: boolean; + onChange: (value: boolean) => void; +}; + +const Checkbox = ({ title, value, onChange }: CheckboxProps) => ( +
+

{title}

+
+); + +export default Checkbox; diff --git a/client/src/components/world/boards/Board.tsx b/client/src/components/world/boards/Board.tsx index c4f377d..ef6700d 100644 --- a/client/src/components/world/boards/Board.tsx +++ b/client/src/components/world/boards/Board.tsx @@ -13,13 +13,11 @@ import colours from '../../../utils/colours'; type BoardProps = { board: BoardData; - isActive: boolean; winner: Nation | null; }; -const Board = ({ board, isActive, winner }: BoardProps) => { +const Board = ({ board, winner }: BoardProps) => { const { phase } = board; - const showWinner = isActive && winner; const width = phase === Phase.Winter ? minorBoardWidth : majorBoardWidth; @@ -41,12 +39,12 @@ const Board = ({ board, isActive, winner }: BoardProps) => { minHeight: width, height: width, borderWidth: boardBorderWidth, - borderColor: showWinner ? getNationColour(winner) : colours.boardBorder, - boxShadow: showWinner ? `0px 0px 100px 50px ${getNationColour(winner)}` : '', + borderColor: winner ? getNationColour(winner) : colours.boardBorder, + boxShadow: winner ? `0px 0px 100px 50px ${getNationColour(winner)}` : '', }} >

{getBoardName(board)}

- + {phase === Phase.Winter && } diff --git a/client/src/components/world/boards/BoardGhost.tsx b/client/src/components/world/boards/BoardGhost.tsx index 00aa18c..669ae21 100644 --- a/client/src/components/world/boards/BoardGhost.tsx +++ b/client/src/components/world/boards/BoardGhost.tsx @@ -7,12 +7,15 @@ import Map from './Map'; import TextInput from '../../user-interface/common/TextInput'; import Select from '../../user-interface/common/Select'; import { isInteger } from '../../../utils/numberUtils'; +import Checkbox from '../../user-interface/common/Checkbox'; type LocationInputProps = { board: Board; onTimelineEntered: (value: string) => void; onYearEntered: (value: string) => void; onPhaseEntered: (value: Phase) => void; + isShowingCoasts: boolean; + onCoastsToggled: (value: boolean) => void; }; const LocationInput = ({ @@ -20,8 +23,10 @@ const LocationInput = ({ onTimelineEntered, onYearEntered, onPhaseEntered, + isShowingCoasts, + onCoastsToggled, }: LocationInputProps) => ( -
+