Moved status color helper to general color helper
This commit is contained in:
parent
aa36ad9463
commit
3922d1f474
@ -3,7 +3,7 @@ import Modal from "react-modal";
|
|||||||
import interact from "interactjs";
|
import interact from "interactjs";
|
||||||
import { Box, Input } from "theme-ui";
|
import { Box, Input } from "theme-ui";
|
||||||
|
|
||||||
import { statusOptions, statusToColor } from "../helpers/status";
|
import colors, { colorOptions } from "../helpers/colors";
|
||||||
|
|
||||||
function TokenMenu({ tokenClassName, onTokenChange }) {
|
function TokenMenu({ tokenClassName, onTokenChange }) {
|
||||||
const [isOpen, setIsOpen] = useState(false);
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
@ -172,20 +172,20 @@ function TokenMenu({ tokenClassName, onTokenChange }) {
|
|||||||
justifyContent: "space-between",
|
justifyContent: "space-between",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{statusOptions.map((status) => (
|
{colorOptions.map((color) => (
|
||||||
<Box
|
<Box
|
||||||
key={status}
|
key={color}
|
||||||
sx={{
|
sx={{
|
||||||
width: "33%",
|
width: "33%",
|
||||||
paddingTop: "33%",
|
paddingTop: "33%",
|
||||||
borderRadius: "50%",
|
borderRadius: "50%",
|
||||||
transform: "scale(0.75)",
|
transform: "scale(0.75)",
|
||||||
backgroundColor: statusToColor(status),
|
backgroundColor: colors[color],
|
||||||
cursor: "pointer",
|
cursor: "pointer",
|
||||||
}}
|
}}
|
||||||
onClick={() => handleStatusChange(status)}
|
onClick={() => handleStatusChange(color)}
|
||||||
>
|
>
|
||||||
{currentToken.status && currentToken.status.includes(status) && (
|
{currentToken.status && currentToken.status.includes(color) && (
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
width: "100%",
|
width: "100%",
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import { Box } from "theme-ui";
|
import { Box } from "theme-ui";
|
||||||
|
|
||||||
import { statusToColor } from "../helpers/status";
|
import colors from "../helpers/colors";
|
||||||
|
|
||||||
function TokenStatus({ statuses }) {
|
function TokenStatus({ statuses }) {
|
||||||
return (
|
return (
|
||||||
@ -34,7 +34,7 @@ function TokenStatus({ statuses }) {
|
|||||||
cx={50}
|
cx={50}
|
||||||
cy={50}
|
cy={50}
|
||||||
fill="none"
|
fill="none"
|
||||||
stroke={statusToColor(status)}
|
stroke={colors[status]}
|
||||||
strokeWidth={4}
|
strokeWidth={4}
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
|
13
src/helpers/colors.js
Normal file
13
src/helpers/colors.js
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
// Colors used for the game for theme general UI colors look at theme.js
|
||||||
|
const colors = {
|
||||||
|
blue: "rgb(26, 106, 255)",
|
||||||
|
orange: "rgb(255, 116, 51)",
|
||||||
|
red: "rgb(255, 77, 77)",
|
||||||
|
purple: "rgb(136, 77, 255)",
|
||||||
|
green: "rgb(133, 255, 102)",
|
||||||
|
pink: "rgb(235, 138, 255)",
|
||||||
|
};
|
||||||
|
|
||||||
|
export const colorOptions = Object.keys(colors);
|
||||||
|
|
||||||
|
export default colors;
|
@ -1,27 +0,0 @@
|
|||||||
export function statusToColor(status) {
|
|
||||||
switch (status) {
|
|
||||||
case "blue":
|
|
||||||
return "rgb(26, 106, 255)";
|
|
||||||
case "orange":
|
|
||||||
return "rgb(255, 116, 51)";
|
|
||||||
case "red":
|
|
||||||
return "rgb(255, 77, 77)";
|
|
||||||
case "purple":
|
|
||||||
return "rgb(136, 77, 255)";
|
|
||||||
case "green":
|
|
||||||
return "rgb(133, 255, 102)";
|
|
||||||
case "pink":
|
|
||||||
return "rgb(235, 138, 255)";
|
|
||||||
default:
|
|
||||||
throw Error("Color not implemented");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export const statusOptions = [
|
|
||||||
"blue",
|
|
||||||
"orange",
|
|
||||||
"red",
|
|
||||||
"purple",
|
|
||||||
"green",
|
|
||||||
"pink",
|
|
||||||
];
|
|
Loading…
Reference in New Issue
Block a user