diff --git a/src/components/map/controls/Divider.js b/src/components/Divider.js similarity index 83% rename from src/components/map/controls/Divider.js rename to src/components/Divider.js index 485e2d6..853aa0c 100644 --- a/src/components/map/controls/Divider.js +++ b/src/components/Divider.js @@ -1,12 +1,12 @@ import React from "react"; import { Divider } from "theme-ui"; -function StyledDivider({ vertical }) { +function StyledDivider({ vertical, color }) { return ( - onDiceAdd(SunsetDice, "d20")} + <> + - - - onDiceAdd(SunsetDice, "d12")} - > - - - onDiceAdd(SunsetDice, "d10")} - > - - - onDiceAdd(SunsetDice, "d8")} - > - - - onDiceAdd(SunsetDice, "d6")} - > - - - onDiceAdd(SunsetDice, "d4")} - > - - - onDiceAdd(SunsetDice, "d100")} - > - - - + setIsSelectModalOpen(true)} + > + + + + onDiceAdd(selectedDice.class, "d20")} + > + + + onDiceAdd(selectedDice.class, "d12")} + > + + + onDiceAdd(selectedDice.class, "d10")} + > + + + onDiceAdd(selectedDice.class, "d8")} + > + + + onDiceAdd(selectedDice.class, "d6")} + > + + + onDiceAdd(selectedDice.class, "d4")} + > + + + onDiceAdd(selectedDice.class, "d100")} + > + + + + setIsSelectModalOpen(false)} + defaultDice={selectedDice} + onDone={(dice) => { + setSelectedDice(dice); + setIsSelectModalOpen(false); + }} + /> + ); } diff --git a/src/components/map/dice/DiceTile.js b/src/components/map/dice/DiceTile.js new file mode 100644 index 0000000..39f0d9d --- /dev/null +++ b/src/components/map/dice/DiceTile.js @@ -0,0 +1,55 @@ +import React from "react"; +import { Flex, Image, Text } from "theme-ui"; + +function DiceTile({ dice, isSelected, onDiceSelect, onDone }) { + return ( + onDiceSelect(dice)} + sx={{ + borderColor: "primary", + borderStyle: isSelected ? "solid" : "none", + borderWidth: "4px", + position: "relative", + width: "150px", + height: "150px", + borderRadius: "4px", + justifyContent: "center", + alignItems: "center", + cursor: "pointer", + }} + m={2} + bg="muted" + onDoubleClick={() => onDone(dice)} + > + + + + {dice.name} + + + + ); +} + +export default DiceTile; diff --git a/src/components/map/dice/DiceTiles.js b/src/components/map/dice/DiceTiles.js new file mode 100644 index 0000000..0965cd6 --- /dev/null +++ b/src/components/map/dice/DiceTiles.js @@ -0,0 +1,33 @@ +import React from "react"; +import { Flex } from "theme-ui"; +import SimpleBar from "simplebar-react"; + +import DiceTile from "./DiceTile"; + +function DiceTiles({ dice, onDiceSelect, selectedDice, onDone }) { + return ( + + + {dice.map((dice) => ( + + ))} + + + ); +} + +export default DiceTiles; diff --git a/src/dice/galaxy/preview.png b/src/dice/galaxy/preview.png new file mode 100644 index 0000000..d62962d Binary files /dev/null and b/src/dice/galaxy/preview.png differ diff --git a/src/dice/index.js b/src/dice/index.js new file mode 100644 index 0000000..1f6315e --- /dev/null +++ b/src/dice/index.js @@ -0,0 +1,40 @@ +import Case from "case"; + +import GalaxyDice from "./galaxy/GalaxyDice"; +import IronDice from "./iron/IronDice"; +import NebulaDice from "./nebula/NebulaDice"; +import SunriseDice from "./sunrise/SunriseDice"; +import SunsetDice from "./sunset/SunsetDice"; +import WalnutDice from "./walnut/WalnutDice"; + +import GalaxyPreview from "./galaxy/preview.png"; +import IronPreview from "./iron/preview.png"; +import NebulaPreview from "./nebula/preview.png"; +import SunrisePreview from "./sunrise/preview.png"; +import SunsetPreview from "./sunset/preview.png"; +import WalnutPreview from "./walnut/preview.png"; + +export const diceClasses = { + galaxy: GalaxyDice, + nebula: NebulaDice, + sunrise: SunriseDice, + sunset: SunsetDice, + iron: IronDice, + walnut: WalnutDice, +}; + +export const dicePreviews = { + galaxy: GalaxyPreview, + nebula: NebulaPreview, + sunrise: SunrisePreview, + sunset: SunsetPreview, + iron: IronPreview, + walnut: WalnutPreview, +}; + +export const dice = Object.keys(diceClasses).map((key) => ({ + key, + name: Case.capital(key), + class: diceClasses[key], + preview: dicePreviews[key], +})); diff --git a/src/dice/iron/preview.png b/src/dice/iron/preview.png new file mode 100644 index 0000000..9d07c22 Binary files /dev/null and b/src/dice/iron/preview.png differ diff --git a/src/dice/nebula/preview.png b/src/dice/nebula/preview.png new file mode 100644 index 0000000..c884c2b Binary files /dev/null and b/src/dice/nebula/preview.png differ diff --git a/src/dice/sunrise/preview.png b/src/dice/sunrise/preview.png new file mode 100644 index 0000000..ebd1f5e Binary files /dev/null and b/src/dice/sunrise/preview.png differ diff --git a/src/dice/sunset/preview.png b/src/dice/sunset/preview.png new file mode 100644 index 0000000..9a220ae Binary files /dev/null and b/src/dice/sunset/preview.png differ diff --git a/src/dice/walnut/preview.png b/src/dice/walnut/preview.png new file mode 100644 index 0000000..b7c409f Binary files /dev/null and b/src/dice/walnut/preview.png differ diff --git a/src/icons/SelectDiceIcon.js b/src/icons/SelectDiceIcon.js new file mode 100644 index 0000000..c9433ef --- /dev/null +++ b/src/icons/SelectDiceIcon.js @@ -0,0 +1,18 @@ +import React from "react"; + +function SelectMapIcon() { + return ( + + + + + ); +} + +export default SelectMapIcon; diff --git a/src/modals/SelectDiceModal.js b/src/modals/SelectDiceModal.js new file mode 100644 index 0000000..e46840f --- /dev/null +++ b/src/modals/SelectDiceModal.js @@ -0,0 +1,35 @@ +import React, { useState } from "react"; +import { Flex, Label, Button } from "theme-ui"; + +import Modal from "../components/Modal"; +import DiceTiles from "../components/map/dice/DiceTiles"; + +import { dice } from "../dice"; + +function SelectDiceModal({ isOpen, onRequestClose, onDone, defaultDice }) { + const [selectedDice, setSelectedDice] = useState(defaultDice); + return ( + + + + + + + + ); +} + +export default SelectDiceModal;