Add palette selector

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];
 

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<Props> = ({ colors }) => {
+    const width = 50 / colors.length;
+
+    return (
+        <View style={{
+            width: 40, height: 40, borderRadius: 0, overflow: 'hidden',
+            transform: [{ rotate: '45deg' }]
+        }}>
+            {colors.map((color, index) => (
+                <View
+                    key={index}
+                    style={{
+                        backgroundColor: color,
+                        width: width,
+                        height: '100%',
+                        position: 'absolute',
+                        transform: [
+                            { rotate: `${Math.floor(Math.random() * 10) + 1}deg` },
+                            // { rotate: `${sectorDegree}deg` },
+                            { translateX: index * width },
+                            // { rotate: `${90 - sectorDegree / 2}deg` },
+                        ],
+                    }}
+                />
+            ))}
+        </View>
+    );
+};
+
+export default ColorCircle;

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<Props> = () => {
+    const colorPalettes = getPalettes();
+
+    return (
+        <ScrollView horizontal={true} contentContainerStyle={styles.container}>
+            {colorPalettes.map((palette, index) => (
+                <TouchableOpacity
+                    key={index}
+                    style={[
+                        styles.palette,
+                    ]}
+                // onPress={() => onSelect(palette)}
+                >
+                    <MemoizedColorCircle colors={getPalette(palette)} />
+                </TouchableOpacity>
+            ))}
+        </ScrollView>
+    );
+};
+
+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,
+    },
+});

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<Props> = ({ navigation, containerHeight
                             Tap on a column to set the current round.
                         </Text>
 
+                        <PaletteSelector />
+
                         <Animated.View layout={Layout.delay(200)}>
 
                             {!gameLocked &&