diff --git a/src/ColorPalette.ts b/src/ColorPalette.ts index d2010ba2..b83147a0 100644 --- a/src/ColorPalette.ts +++ b/src/ColorPalette.ts @@ -98,6 +98,14 @@ const palettes: PaletteType = { ] }; +export const getPalettes = (): string[] => { + return Object.keys(palettes); +}; + +export const getPalette = (name: string): string[] => { + return palettes[name]; +}; + export const getPlayerColors = (index: number): [string, string] => { const palette = Object.keys(palettes)[4 % Object.keys(palettes).length]; diff --git a/src/components/ColorPalettes/ColorCircle.tsx b/src/components/ColorPalettes/ColorCircle.tsx new file mode 100644 index 00000000..b3c102b2 --- /dev/null +++ b/src/components/ColorPalettes/ColorCircle.tsx @@ -0,0 +1,38 @@ +import React from 'react'; + +import { View } from 'react-native'; + +interface Props { + colors: string[]; +} + +const ColorCircle: React.FunctionComponent = ({ colors }) => { + const width = 50 / colors.length; + + return ( + + {colors.map((color, index) => ( + + ))} + + ); +}; + +export default ColorCircle; diff --git a/src/components/ColorPalettes/PaletteSelector.tsx b/src/components/ColorPalettes/PaletteSelector.tsx new file mode 100644 index 00000000..eab189fa --- /dev/null +++ b/src/components/ColorPalettes/PaletteSelector.tsx @@ -0,0 +1,54 @@ +import React from 'react'; + +import { ScrollView, StyleSheet, TouchableOpacity } from 'react-native'; + +import { getPalette, getPalettes } from '../../ColorPalette'; + +import ColorCircle from './ColorCircle'; + +interface Props { + // selectedPalette: ColorPalette; + // onSelect: (palette: ColorPalette) => void; +} + +const MemoizedColorCircle = React.memo(ColorCircle); + +const PaletteSelector: React.FunctionComponent = () => { + const colorPalettes = getPalettes(); + + return ( + + {colorPalettes.map((palette, index) => ( + onSelect(palette)} + > + + + ))} + + ); +}; + +export default PaletteSelector; + +const styles = StyleSheet.create({ + container: { + flexDirection: 'row', + justifyContent: 'space-between', + marginHorizontal: 20, + marginTop: 20, + marginBottom: 20, + }, + palette: { + width: 40, + height: 40, + borderRadius: 20, + borderWidth: 2, + borderColor: 'transparent', + marginHorizontal: 5, + }, +}); diff --git a/src/components/Sheets/GameSheet.tsx b/src/components/Sheets/GameSheet.tsx index 66c26f9b..7e56cf15 100644 --- a/src/components/Sheets/GameSheet.tsx +++ b/src/components/Sheets/GameSheet.tsx @@ -13,6 +13,7 @@ import { useAppDispatch, useAppSelector } from '../../../redux/hooks'; import { updatePlayer } from '../../../redux/PlayersSlice'; import { systemBlue } from '../../constants'; import BigButton from '../BigButtons/BigButton'; +import PaletteSelector from '../ColorPalettes/PaletteSelector'; import RematchIcon from '../Icons/RematchIcon'; import Rounds from '../Rounds'; @@ -232,6 +233,8 @@ const GameSheet: React.FunctionComponent = ({ navigation, containerHeight Tap on a column to set the current round. + + {!gameLocked &&