From 8f5e33dfa902c044f6220a7a5429046da34d4d3d Mon Sep 17 00:00:00 2001 From: Justin Wyne <1986068+wyne@users.noreply.github.com> Date: Sun, 7 Apr 2024 12:33:31 -0700 Subject: [PATCH 01/14] init colors --- redux/GamesSlice.ts | 1 + redux/PlayersSlice.ts | 1 + src/ColorPalette.ts | 83 ++++++++++++++++++++++++++ src/components/Boards/FlexboxBoard.tsx | 7 +-- src/constants.ts | 16 ++--- 5 files changed, 96 insertions(+), 12 deletions(-) create mode 100644 src/ColorPalette.ts diff --git a/redux/GamesSlice.ts b/redux/GamesSlice.ts index 09484f54..4a8ae356 100644 --- a/redux/GamesSlice.ts +++ b/redux/GamesSlice.ts @@ -16,6 +16,7 @@ export interface GameState { roundTotal: number; playerIds: string[]; locked?: boolean; + palette?: string; } const gamesAdapter = createEntityAdapter({ diff --git a/redux/PlayersSlice.ts b/redux/PlayersSlice.ts index cadba39d..457c43fd 100644 --- a/redux/PlayersSlice.ts +++ b/redux/PlayersSlice.ts @@ -7,6 +7,7 @@ export interface ScoreState { id: string; playerName: string; scores: number[]; + color?: string; } const playersAdapter = createEntityAdapter({ diff --git a/src/ColorPalette.ts b/src/ColorPalette.ts new file mode 100644 index 00000000..ed962f70 --- /dev/null +++ b/src/ColorPalette.ts @@ -0,0 +1,83 @@ +import { getContrastRatio } from 'colorsheet'; + +import { updateGame } from "../redux/GamesSlice"; +import { useAppDispatch, useAppSelector } from "../redux/hooks"; +import { selectPlayerById, updatePlayer } from "../redux/PlayersSlice"; +import { selectCurrentGame } from "../redux/selectors"; + +type PaletteType = Record; + +const palettes: PaletteType = { + 'original': [ + "#01497c", + "#c25858", + "#f5c800", + "#275436", + "#dc902c", + "#62516a", + "#755647", + "#925561", + ], + 'pastel': [ + "#f9d5e5", + "#eeac99", + "#e06377", + "#c83349", + "#5b9aa0", + "#d1b59b", + "#8f3e3f", + "#f6416c", + ], + 'dark': [ + "#011627", + "#fdfffc", + "#2ec4b6", + "#e71d36", + "#ff9f1c", + "#f3722c", + "#f8961e", + "#f9844a", + ], +}; + +export const getPlayerColors = (index: number): [string, string] => { + const palette = 'original'; + + // TODO: Get player color if it exists + + const bg = palettes[palette][index % palette.length]; + + const contrast = getContrastRatio(bg, '#000').number; + + const fg = contrast > 7 ? "#000000" : "#FFFFFF"; + + return [bg, fg]; +}; + +export const setPlayerColor = (playerId: string, color: string) => { + const dispatch = useAppDispatch(); + + const player = useAppSelector(state => selectPlayerById(state, playerId)); + if (typeof player == 'undefined') return; + player.color = color; + + dispatch(updatePlayer({ + id: playerId, + changes: { + color: color, + } + })); +}; + +export const setGamePalette = (gameId: string, palette: string) => { + const dispatch = useAppDispatch(); + + const game = useAppSelector(selectCurrentGame); + if (typeof game == 'undefined') return; + dispatch(updateGame({ + id: game.id, + changes: { + palette: palette, + } + })); +}; diff --git a/src/components/Boards/FlexboxBoard.tsx b/src/components/Boards/FlexboxBoard.tsx index 5ffe3c1a..f1ef2cb4 100644 --- a/src/components/Boards/FlexboxBoard.tsx +++ b/src/components/Boards/FlexboxBoard.tsx @@ -1,11 +1,11 @@ import React, { useEffect, useState } from 'react'; -import { getContrastRatio } from 'colorsheet'; import { LayoutChangeEvent, StyleSheet } from 'react-native'; import { SafeAreaView } from 'react-native-safe-area-context'; import { useAppSelector } from '../../../redux/hooks'; import { selectCurrentGame } from '../../../redux/selectors'; +import { getPlayerColors } from '../../ColorPalette'; import { bottomSheetHeight } from '../../components/Sheets/GameSheet'; import FlexboxTile from './FlexboxTile'; @@ -18,7 +18,6 @@ const FlexboxBoard: React.FC = () => { const currentGameId = useAppSelector(state => state.settings.currentGameId); if (typeof currentGameId == 'undefined') return null; - const palette = ["01497c", "c25858", "f5c800", "275436", "dc902c", "62516a", "755647", "925561"]; const [rows, setRows] = useState(0); const [cols, setCols] = useState(0); const fullscreen = useAppSelector(state => state.settings.home_fullscreen); @@ -102,8 +101,8 @@ const FlexboxBoard: React.FC = () => { 7 ? "#000000" : "#FFFFFF"} + color={getPlayerColors(index)[0]} + fontColor={getPlayerColors(index)[1]} cols={cols} rows={rows} width={calculateTileDimensions(rows, cols).width} diff --git a/src/constants.ts b/src/constants.ts index e239a644..1e6bb3fb 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -1,13 +1,13 @@ export const systemBlue = '#0a84ff'; export const palette = [ - "01497c", - "c25858", - "f5c800", - "275436", - "dc902c", - "62516a", - "755647", - "925561" + "#f9d5e5", + "#eeac99", + "#e06377", + "#c83349", + "#5b9aa0", + "#d1b59b", + "#8f3e3f", + "#f6416c", ]; export const STORAGE_KEY = { GAMES_LIST: '@games_list', From 3630526c8e474a781d8361fd2574a5b3d2b3942b Mon Sep 17 00:00:00 2001 From: Justin Wyne <1986068+wyne@users.noreply.github.com> Date: Sun, 7 Apr 2024 22:19:05 -0700 Subject: [PATCH 02/14] more colors --- src/ColorPalette.ts | 22 ++++++++++++++++++++-- src/components/Buttons/CheckButton.tsx | 1 + 2 files changed, 21 insertions(+), 2 deletions(-) diff --git a/src/ColorPalette.ts b/src/ColorPalette.ts index ed962f70..b2d08b4f 100644 --- a/src/ColorPalette.ts +++ b/src/ColorPalette.ts @@ -38,14 +38,32 @@ const palettes: PaletteType = { "#f8961e", "#f9844a", ], + 'grey': [ + "#f8f9fa", + "#e9ecef", + "#dee2e6", + "#ced4da", + "#adb5bd", + "#6c757d", + "#495057", + "#343a40", + "#212529", + "#000000", + ], + 'a': ["#114b5f", "#456990", "#e4fde1", "#f45b69", "#6b2737"], + 'b': ["#f00", "#00f"], + 'c': ["#88498f", "#779fa1", "#e0cba8", "#ff6542", "#564154"], + 'd': ["#f8ffe5", "#06d6a0", "#1b9aaa", "#ef476f", "#ffc43d"], + 'e': ["#1f2041", "#4b3f72", "#ffc857", "#119da4", "#19647e"], }; export const getPlayerColors = (index: number): [string, string] => { - const palette = 'original'; + const palette = Object.keys(palettes)[8]; // TODO: Get player color if it exists - const bg = palettes[palette][index % palette.length]; + const length = palettes[palette].length; + const bg = palettes[palette][index % length]; const contrast = getContrastRatio(bg, '#000').number; diff --git a/src/components/Buttons/CheckButton.tsx b/src/components/Buttons/CheckButton.tsx index b51ce41d..52e67c3f 100644 --- a/src/components/Buttons/CheckButton.tsx +++ b/src/components/Buttons/CheckButton.tsx @@ -27,6 +27,7 @@ const CheckButton: React.FunctionComponent = ({ navigation, route }) => { if (route?.params?.reason === 'new_game') { navigation.navigate("Game"); } else { + //TODO: when the game is first created, this will go back instead of to game screen navigation.goBack(); } }}> From 22862376260454f49ff5cacaf6b33078a9f91401 Mon Sep 17 00:00:00 2001 From: Justin Wyne <1986068+wyne@users.noreply.github.com> Date: Sun, 7 Apr 2024 22:23:02 -0700 Subject: [PATCH 03/14] Lint double quote " to single quote ' --- .eslintrc.js | 11 +-- App.tsx | 2 +- app.config.js | 88 +++++++++---------- jest.config.js | 4 +- redux/store.ts | 2 +- redux/testStore.ts | 8 +- src/ColorPalette.ts | 88 +++++++++---------- src/Navigation.tsx | 22 ++--- src/components/BigButtons/BigButton.tsx | 8 +- src/components/Buttons/CheckButton.test.tsx | 6 +- src/components/Buttons/CheckButton.tsx | 2 +- src/components/Buttons/HomeButton.tsx | 2 +- src/components/Buttons/NewGameButton.tsx | 4 +- src/components/EditGame.tsx | 8 +- src/components/GameListItem.tsx | 2 +- src/components/GameListItemPlayerName.tsx | 6 +- .../Interactions/InteractionComponents.ts | 6 +- .../Interactions/InteractionSelector.tsx | 12 +-- src/components/Onboarding/Onboarding.test.ts | 4 +- src/components/Onboarding/Onboarding.ts | 18 ++-- src/components/PlayerListItem.tsx | 14 +-- .../PlayerTiles/AdditionTile/ScoreRound.tsx | 4 +- .../PopupMenu/AbstractPopupMenu.tsx | 6 +- src/components/PopupMenu/IOSPopupMenu.tsx | 2 +- src/components/Rounds.tsx | 2 +- src/components/ScoreLog/PlayerNameColumn.tsx | 2 +- src/components/Sheets/GameSheet.tsx | 28 +++--- src/constants.ts | 16 ++-- src/screens/AppInfoScreen.tsx | 2 +- src/screens/EditPlayerScreen.tsx | 12 +-- src/screens/OnboardingScreen.tsx | 2 +- src/screens/ShareScreen.tsx | 4 +- 32 files changed, 199 insertions(+), 198 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 583674ec..fa5c0f4c 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -12,19 +12,20 @@ module.exports = { 'prettier', ], rules: { + 'quotes': ['error', 'single'], '@typescript-eslint/no-var-requires': 0, 'jest/no-disabled-tests': 0, 'semi': ['error', 'always'], 'eol-last': ['error', 'always'], 'import/order': ['error', { - "pathGroups": [ + 'pathGroups': [ { - "pattern": "react", - "group": "builtin", - "position": "before" + 'pattern': 'react', + 'group': 'builtin', + 'position': 'before' } ], - "pathGroupsExcludedImportTypes": ["react"], + 'pathGroupsExcludedImportTypes': ['react'], 'groups': ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'], 'alphabetize': { 'order': 'asc', diff --git a/App.tsx b/App.tsx index 3e99db1c..783d7d91 100644 --- a/App.tsx +++ b/App.tsx @@ -13,7 +13,7 @@ import { AddendModalContextProvider } from './src/components/Sheets/AddendModalC import { GameSheetContextProvider } from './src/components/Sheets/GameSheetContext'; import { Navigation } from './src/Navigation'; -if (process.env.EXPO_PUBLIC_FIREBASE_ANALYTICS == "false") { +if (process.env.EXPO_PUBLIC_FIREBASE_ANALYTICS == 'false') { analytics().setAnalyticsCollectionEnabled(false); } diff --git a/app.config.js b/app.config.js index 34df5408..1c1e901c 100644 --- a/app.config.js +++ b/app.config.js @@ -2,116 +2,116 @@ const variant = process.env.APP_VARIANT; let packageName; switch (variant) { - case "development": - packageName = "com.wyne.scorepad.dev"; + case 'development': + packageName = 'com.wyne.scorepad.dev'; break; - case "preview": - packageName = "com.wyne.scorepad.preview"; + case 'preview': + packageName = 'com.wyne.scorepad.preview'; break; default: - packageName = "com.wyne.scorepad"; + packageName = 'com.wyne.scorepad'; break; } let name; switch (variant) { - case "development": - name = "ScorePad with Rounds (dev)"; + case 'development': + name = 'ScorePad with Rounds (dev)'; break; - case "preview": - name = "ScorePad with Rounds (preview)"; + case 'preview': + name = 'ScorePad with Rounds (preview)'; break; default: - name = "ScorePad with Rounds"; + name = 'ScorePad with Rounds'; break; } let icon; switch (variant) { - case "development": - icon = "./assets/icon-dev.png"; + case 'development': + icon = './assets/icon-dev.png'; break; - case "preview": - icon = "./assets/icon-preview.png"; + case 'preview': + icon = './assets/icon-preview.png'; break; default: - icon = "./assets/icon.png"; + icon = './assets/icon.png'; break; } let androidIcon; let androidIconBg; switch (variant) { - case "development": - androidIcon = "./assets/adaptive-icon-dev.png"; - androidIconBg = "./assets/adaptive-icon-bg-dev.png"; + case 'development': + androidIcon = './assets/adaptive-icon-dev.png'; + androidIconBg = './assets/adaptive-icon-bg-dev.png'; break; - case "preview": - androidIcon = "./assets/adaptive-icon-preview.png"; - androidIconBg = "./assets/adaptive-icon-bg-preview.png"; + case 'preview': + androidIcon = './assets/adaptive-icon-preview.png'; + androidIconBg = './assets/adaptive-icon-bg-preview.png'; break; default: - androidIcon = "./assets/adaptive-icon.png"; - androidIconBg = "./assets/adaptive-icon-bg.png"; + androidIcon = './assets/adaptive-icon.png'; + androidIconBg = './assets/adaptive-icon-bg.png'; break; } export default { name: name, - slug: "scorepad", - version: "2.5.2", - orientation: "default", + slug: 'scorepad', + version: '2.5.2', + orientation: 'default', icon: icon, - assetBundlePatterns: ["assets/*"], - backgroundColor: "#000000", + assetBundlePatterns: ['assets/*'], + backgroundColor: '#000000', ios: { bundleIdentifier: packageName, supportsTablet: true, requireFullScreen: false, - buildNumber: "76", + buildNumber: '76', infoPlist: { RCTAsyncStorageExcludeFromBackup: false, }, - googleServicesFile: "./GoogleService-Info.plist", + googleServicesFile: './GoogleService-Info.plist', }, android: { icon: androidIcon, adaptiveIcon: { - foregroundImage: "./assets/adaptive-icon-fg.png", + foregroundImage: './assets/adaptive-icon-fg.png', backgroundImage: androidIconBg, }, package: packageName, permissions: [], versionCode: 76, - googleServicesFile: "./google-services.json", + googleServicesFile: './google-services.json', }, - userInterfaceStyle: "dark", + userInterfaceStyle: 'dark', web: { - favicon: "./assets/favicon.png", + favicon: './assets/favicon.png', }, extra: { eas: { - projectId: "fc8859ea-b320-41cd-a091-36b3ec7f9b1f", + projectId: 'fc8859ea-b320-41cd-a091-36b3ec7f9b1f', }, }, updates: { fallbackToCacheTimeout: 0, - url: "https://u.expo.dev/fc8859ea-b320-41cd-a091-36b3ec7f9b1f", + url: 'https://u.expo.dev/fc8859ea-b320-41cd-a091-36b3ec7f9b1f', }, runtimeVersion: { - policy: "sdkVersion", + policy: 'sdkVersion', }, - description: "", - githubUrl: "https://github.com/wyne/scorepad-react-native", - owner: "wyne", + description: '', + githubUrl: 'https://github.com/wyne/scorepad-react-native', + owner: 'wyne', plugins: [ - "@react-native-firebase/app", - "@react-native-firebase/crashlytics", + '@react-native-firebase/app', + '@react-native-firebase/crashlytics', [ - "expo-build-properties", + 'expo-build-properties', { ios: { - useFrameworks: "static", + useFrameworks: 'static', }, }, ], diff --git a/jest.config.js b/jest.config.js index 087a4911..9bf4aa37 100644 --- a/jest.config.js +++ b/jest.config.js @@ -4,11 +4,11 @@ module.exports = { '^.+\\.tsx?$': 'babel-jest', }, transformIgnorePatterns: [ - "node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)" + 'node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)' ], testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$', moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], setupFilesAfterEnv: [ - "@testing-library/jest-native/extend-expect" + '@testing-library/jest-native/extend-expect' ] }; diff --git a/redux/store.ts b/redux/store.ts index 504acbf7..ebd89320 100644 --- a/redux/store.ts +++ b/redux/store.ts @@ -1,5 +1,5 @@ import AsyncStorage from '@react-native-async-storage/async-storage'; -import { configureStore } from "@reduxjs/toolkit"; +import { configureStore } from '@reduxjs/toolkit'; import { persistStore, persistReducer } from 'redux-persist'; import gamesReducer from './GamesSlice'; diff --git a/redux/testStore.ts b/redux/testStore.ts index c617fa7f..1a24829e 100644 --- a/redux/testStore.ts +++ b/redux/testStore.ts @@ -18,9 +18,9 @@ export const exportData = () => { }; export const getPreloadedState = () => { - const playersJson = JSON.parse("{\"ids\":\"[\\\"e8f07017-ca0b-474d-b748-bb004f0e47d5\\\",\\\"06e5a92a-602d-4880-a612-893a10767f4e\\\",\\\"0e85d2aa-515d-4215-bf2a-d02a8d5b5d18\\\",\\\"af215759-daef-41f8-aad9-97a90c778257\\\",\\\"8fd75860-06f2-4d3d-9f2d-62ac0eb674f8\\\",\\\"81c66201-c84f-439a-9240-a1e45e959838\\\",\\\"2eff84be-5b21-4827-ac57-4d46d8bd292c\\\",\\\"a897d496-9c80-4294-b71f-6531e54dc08c\\\",\\\"f900dc3b-1cbf-4a44-a58e-0d6aec863f93\\\",\\\"8a7b194a-47d6-45c2-b4a0-eb5f5f7dd1fd\\\",\\\"08966cc0-2ae0-4356-8552-4c8c5323b68a\\\",\\\"caf5409d-3921-4ddd-aa3e-1f7a58c42399\\\",\\\"f33b3cfb-3b1f-45b4-ab58-a1248a8e82a3\\\",\\\"aafa4261-3ca2-4552-ba12-81c4103461d0\\\",\\\"b756c49e-bc76-438c-a318-3f9036e3eeb5\\\",\\\"88a40dca-5930-4a21-9131-78acccc9ea0f\\\",\\\"3c9a3abc-f2b4-4ef9-b953-24bffebab632\\\",\\\"3dcfd833-be57-47d3-8dc6-1787c0c1d56b\\\",\\\"d543400f-a60a-4ff9-bc05-40e640ca8c8f\\\",\\\"b52d5dc3-602d-4269-9267-6cf2cfa4d529\\\",\\\"f45ff562-94f3-4a28-8f89-1de17c169cfc\\\",\\\"39fbf246-de02-428f-b376-53a9b5eba40e\\\",\\\"cb5acb92-19a8-40e1-9826-5d98879ab23e\\\",\\\"d6759b6c-2fef-4521-8400-56abb3edc547\\\",\\\"12f03866-5f89-43cc-857f-6b3c9760df1a\\\",\\\"577a6225-d6e8-4b47-91fb-02e85864b2a2\\\"]\",\"entities\":\"{\\\"8a7b194a-47d6-45c2-b4a0-eb5f5f7dd1fd\\\":{\\\"id\\\":\\\"8a7b194a-47d6-45c2-b4a0-eb5f5f7dd1fd\\\",\\\"playerName\\\":\\\"Rick\\\",\\\"scores\\\":[4,2,1,1]},\\\"f33b3cfb-3b1f-45b4-ab58-a1248a8e82a3\\\":{\\\"id\\\":\\\"f33b3cfb-3b1f-45b4-ab58-a1248a8e82a3\\\",\\\"playerName\\\":\\\"Morty\\\",\\\"scores\\\":[2,null,2,1]},\\\"08966cc0-2ae0-4356-8552-4c8c5323b68a\\\":{\\\"id\\\":\\\"08966cc0-2ae0-4356-8552-4c8c5323b68a\\\",\\\"playerName\\\":\\\"Summer\\\",\\\"scores\\\":[3,1,1,1]},\\\"caf5409d-3921-4ddd-aa3e-1f7a58c42399\\\":{\\\"id\\\":\\\"caf5409d-3921-4ddd-aa3e-1f7a58c42399\\\",\\\"playerName\\\":\\\"Beth\\\",\\\"scores\\\":[2,null,1,2]},\\\"b756c49e-bc76-438c-a318-3f9036e3eeb5\\\":{\\\"id\\\":\\\"b756c49e-bc76-438c-a318-3f9036e3eeb5\\\",\\\"playerName\\\":\\\"Jerry\\\",\\\"scores\\\":[-1,null,1]},\\\"0e85d2aa-515d-4215-bf2a-d02a8d5b5d18\\\":{\\\"id\\\":\\\"0e85d2aa-515d-4215-bf2a-d02a8d5b5d18\\\",\\\"playerName\\\":\\\"Arthur\\\",\\\"scores\\\":[12,10,2,11]},\\\"e8f07017-ca0b-474d-b748-bb004f0e47d5\\\":{\\\"id\\\":\\\"e8f07017-ca0b-474d-b748-bb004f0e47d5\\\",\\\"playerName\\\":\\\"Gertrude\\\",\\\"scores\\\":[25,null,20,9]},\\\"06e5a92a-602d-4880-a612-893a10767f4e\\\":{\\\"id\\\":\\\"06e5a92a-602d-4880-a612-893a10767f4e\\\",\\\"playerName\\\":\\\"Erwin\\\",\\\"scores\\\":[8,2,1,31]},\\\"af215759-daef-41f8-aad9-97a90c778257\\\":{\\\"id\\\":\\\"af215759-daef-41f8-aad9-97a90c778257\\\",\\\"playerName\\\":\\\"Maude\\\",\\\"scores\\\":[6,10,2,12]},\\\"a897d496-9c80-4294-b71f-6531e54dc08c\\\":{\\\"id\\\":\\\"a897d496-9c80-4294-b71f-6531e54dc08c\\\",\\\"playerName\\\":\\\"Carmen\\\",\\\"scores\\\":[10,2,1,4]},\\\"f900dc3b-1cbf-4a44-a58e-0d6aec863f93\\\":{\\\"id\\\":\\\"f900dc3b-1cbf-4a44-a58e-0d6aec863f93\\\",\\\"playerName\\\":\\\"Isaac\\\",\\\"scores\\\":[6,3,1,2]},\\\"81c66201-c84f-439a-9240-a1e45e959838\\\":{\\\"id\\\":\\\"81c66201-c84f-439a-9240-a1e45e959838\\\",\\\"playerName\\\":\\\"Penelope\\\",\\\"scores\\\":[-1,10,13,2]},\\\"2eff84be-5b21-4827-ac57-4d46d8bd292c\\\":{\\\"id\\\":\\\"2eff84be-5b21-4827-ac57-4d46d8bd292c\\\",\\\"playerName\\\":\\\"Ollie\\\",\\\"scores\\\":[7,2,12,3]},\\\"8fd75860-06f2-4d3d-9f2d-62ac0eb674f8\\\":{\\\"id\\\":\\\"8fd75860-06f2-4d3d-9f2d-62ac0eb674f8\\\",\\\"playerName\\\":\\\"Justin\\\",\\\"scores\\\":[12,4,4,2,5,-2,4]},\\\"b52d5dc3-602d-4269-9267-6cf2cfa4d529\\\":{\\\"id\\\":\\\"b52d5dc3-602d-4269-9267-6cf2cfa4d529\\\",\\\"playerName\\\":\\\"Savitri\\\",\\\"scores\\\":[0,30,8]},\\\"39fbf246-de02-428f-b376-53a9b5eba40e\\\":{\\\"id\\\":\\\"39fbf246-de02-428f-b376-53a9b5eba40e\\\",\\\"playerName\\\":\\\"Thetis\\\",\\\"scores\\\":[1,2,14]},\\\"d6759b6c-2fef-4521-8400-56abb3edc547\\\":{\\\"id\\\":\\\"d6759b6c-2fef-4521-8400-56abb3edc547\\\",\\\"playerName\\\":\\\"Lludd\\\",\\\"scores\\\":[3,43,4]},\\\"577a6225-d6e8-4b47-91fb-02e85864b2a2\\\":{\\\"id\\\":\\\"577a6225-d6e8-4b47-91fb-02e85864b2a2\\\",\\\"playerName\\\":\\\"Maia\\\",\\\"scores\\\":[0,4,8]},\\\"aafa4261-3ca2-4552-ba12-81c4103461d0\\\":{\\\"id\\\":\\\"aafa4261-3ca2-4552-ba12-81c4103461d0\\\",\\\"playerName\\\":\\\"Galateia\\\",\\\"scores\\\":[1,52,4]},\\\"88a40dca-5930-4a21-9131-78acccc9ea0f\\\":{\\\"id\\\":\\\"88a40dca-5930-4a21-9131-78acccc9ea0f\\\",\\\"playerName\\\":\\\"Rashnu\\\",\\\"scores\\\":[0,null,50]},\\\"3c9a3abc-f2b4-4ef9-b953-24bffebab632\\\":{\\\"id\\\":\\\"3c9a3abc-f2b4-4ef9-b953-24bffebab632\\\",\\\"playerName\\\":\\\"Iocasta\\\",\\\"scores\\\":[1,50,50]},\\\"3dcfd833-be57-47d3-8dc6-1787c0c1d56b\\\":{\\\"id\\\":\\\"3dcfd833-be57-47d3-8dc6-1787c0c1d56b\\\",\\\"playerName\\\":\\\"Myrddin\\\",\\\"scores\\\":[0,20,4]},\\\"f45ff562-94f3-4a28-8f89-1de17c169cfc\\\":{\\\"id\\\":\\\"f45ff562-94f3-4a28-8f89-1de17c169cfc\\\",\\\"playerName\\\":\\\"Venere\\\",\\\"scores\\\":[0,10,100]},\\\"d543400f-a60a-4ff9-bc05-40e640ca8c8f\\\":{\\\"id\\\":\\\"d543400f-a60a-4ff9-bc05-40e640ca8c8f\\\",\\\"playerName\\\":\\\"Lugos\\\",\\\"scores\\\":[0,50,4]},\\\"12f03866-5f89-43cc-857f-6b3c9760df1a\\\":{\\\"id\\\":\\\"12f03866-5f89-43cc-857f-6b3c9760df1a\\\",\\\"playerName\\\":\\\"Eudora\\\",\\\"scores\\\":[1,10,4]},\\\"cb5acb92-19a8-40e1-9826-5d98879ab23e\\\":{\\\"id\\\":\\\"cb5acb92-19a8-40e1-9826-5d98879ab23e\\\",\\\"playerName\\\":\\\"Indra\\\",\\\"scores\\\":[1,-10,58]}}\",\"_persist\":\"{\\\"version\\\":0,\\\"rehydrated\\\":true}\"}"); - const settingsJson = JSON.parse("{\"home_fullscreen\":\"false\",\"multiplier\":\"1\",\"addendOne\":\"1\",\"addendTwo\":\"10\",\"currentGameId\":\"\\\"d0ee7acd-da3c-47e9-b535-6bc401f3c16d\\\"\",\"onboarded\":\"\\\"2.4.1\\\"\",\"showPointParticles\":\"true\",\"_persist\":\"{\\\"version\\\":0,\\\"rehydrated\\\":true}\"}"); - const gamesJson = JSON.parse("{\"ids\":\"[\\\"bba7e79a-10d6-4d7d-97d0-1992e34579cd\\\",\\\"9139ee7f-05fa-4152-95f3-62084f94bf85\\\",\\\"46753726-1f11-424e-93c3-2491ab3058bd\\\",\\\"a871776b-578b-415d-932a-dda41145b0ed\\\"]\",\"entities\":\"{\\\"a871776b-578b-415d-932a-dda41145b0ed\\\":{\\\"id\\\":\\\"a871776b-578b-415d-932a-dda41145b0ed\\\",\\\"title\\\":\\\"Family Game Night\\\",\\\"dateCreated\\\":1700389151005,\\\"roundCurrent\\\":3,\\\"roundTotal\\\":4,\\\"playerIds\\\":[\\\"8a7b194a-47d6-45c2-b4a0-eb5f5f7dd1fd\\\",\\\"f33b3cfb-3b1f-45b4-ab58-a1248a8e82a3\\\",\\\"08966cc0-2ae0-4356-8552-4c8c5323b68a\\\",\\\"caf5409d-3921-4ddd-aa3e-1f7a58c42399\\\",\\\"b756c49e-bc76-438c-a318-3f9036e3eeb5\\\"]},\\\"46753726-1f11-424e-93c3-2491ab3058bd\\\":{\\\"id\\\":\\\"46753726-1f11-424e-93c3-2491ab3058bd\\\",\\\"title\\\":\\\"Dutch Blitz\\\",\\\"dateCreated\\\":1700448139651,\\\"roundCurrent\\\":3,\\\"roundTotal\\\":4,\\\"playerIds\\\":[\\\"0e85d2aa-515d-4215-bf2a-d02a8d5b5d18\\\",\\\"e8f07017-ca0b-474d-b748-bb004f0e47d5\\\",\\\"06e5a92a-602d-4880-a612-893a10767f4e\\\",\\\"af215759-daef-41f8-aad9-97a90c778257\\\",\\\"a897d496-9c80-4294-b71f-6531e54dc08c\\\",\\\"f900dc3b-1cbf-4a44-a58e-0d6aec863f93\\\",\\\"81c66201-c84f-439a-9240-a1e45e959838\\\",\\\"2eff84be-5b21-4827-ac57-4d46d8bd292c\\\"]},\\\"9139ee7f-05fa-4152-95f3-62084f94bf85\\\":{\\\"id\\\":\\\"9139ee7f-05fa-4152-95f3-62084f94bf85\\\",\\\"title\\\":\\\"Solitaire\\\",\\\"dateCreated\\\":1700448496128,\\\"roundCurrent\\\":6,\\\"roundTotal\\\":7,\\\"playerIds\\\":[\\\"8fd75860-06f2-4d3d-9f2d-62ac0eb674f8\\\"]},\\\"bba7e79a-10d6-4d7d-97d0-1992e34579cd\\\":{\\\"id\\\":\\\"bba7e79a-10d6-4d7d-97d0-1992e34579cd\\\",\\\"title\\\":\\\"All In\\\",\\\"dateCreated\\\":1700448546805,\\\"roundCurrent\\\":2,\\\"roundTotal\\\":3,\\\"playerIds\\\":[\\\"b52d5dc3-602d-4269-9267-6cf2cfa4d529\\\",\\\"39fbf246-de02-428f-b376-53a9b5eba40e\\\",\\\"d6759b6c-2fef-4521-8400-56abb3edc547\\\",\\\"577a6225-d6e8-4b47-91fb-02e85864b2a2\\\",\\\"aafa4261-3ca2-4552-ba12-81c4103461d0\\\",\\\"88a40dca-5930-4a21-9131-78acccc9ea0f\\\",\\\"3c9a3abc-f2b4-4ef9-b953-24bffebab632\\\",\\\"3dcfd833-be57-47d3-8dc6-1787c0c1d56b\\\",\\\"f45ff562-94f3-4a28-8f89-1de17c169cfc\\\",\\\"d543400f-a60a-4ff9-bc05-40e640ca8c8f\\\",\\\"12f03866-5f89-43cc-857f-6b3c9760df1a\\\",\\\"cb5acb92-19a8-40e1-9826-5d98879ab23e\\\"]}}\",\"_persist\":\"{\\\"version\\\":0,\\\"rehydrated\\\":true}\"}"); + const playersJson = JSON.parse('{"ids":"[\\"e8f07017-ca0b-474d-b748-bb004f0e47d5\\",\\"06e5a92a-602d-4880-a612-893a10767f4e\\",\\"0e85d2aa-515d-4215-bf2a-d02a8d5b5d18\\",\\"af215759-daef-41f8-aad9-97a90c778257\\",\\"8fd75860-06f2-4d3d-9f2d-62ac0eb674f8\\",\\"81c66201-c84f-439a-9240-a1e45e959838\\",\\"2eff84be-5b21-4827-ac57-4d46d8bd292c\\",\\"a897d496-9c80-4294-b71f-6531e54dc08c\\",\\"f900dc3b-1cbf-4a44-a58e-0d6aec863f93\\",\\"8a7b194a-47d6-45c2-b4a0-eb5f5f7dd1fd\\",\\"08966cc0-2ae0-4356-8552-4c8c5323b68a\\",\\"caf5409d-3921-4ddd-aa3e-1f7a58c42399\\",\\"f33b3cfb-3b1f-45b4-ab58-a1248a8e82a3\\",\\"aafa4261-3ca2-4552-ba12-81c4103461d0\\",\\"b756c49e-bc76-438c-a318-3f9036e3eeb5\\",\\"88a40dca-5930-4a21-9131-78acccc9ea0f\\",\\"3c9a3abc-f2b4-4ef9-b953-24bffebab632\\",\\"3dcfd833-be57-47d3-8dc6-1787c0c1d56b\\",\\"d543400f-a60a-4ff9-bc05-40e640ca8c8f\\",\\"b52d5dc3-602d-4269-9267-6cf2cfa4d529\\",\\"f45ff562-94f3-4a28-8f89-1de17c169cfc\\",\\"39fbf246-de02-428f-b376-53a9b5eba40e\\",\\"cb5acb92-19a8-40e1-9826-5d98879ab23e\\",\\"d6759b6c-2fef-4521-8400-56abb3edc547\\",\\"12f03866-5f89-43cc-857f-6b3c9760df1a\\",\\"577a6225-d6e8-4b47-91fb-02e85864b2a2\\"]","entities":"{\\"8a7b194a-47d6-45c2-b4a0-eb5f5f7dd1fd\\":{\\"id\\":\\"8a7b194a-47d6-45c2-b4a0-eb5f5f7dd1fd\\",\\"playerName\\":\\"Rick\\",\\"scores\\":[4,2,1,1]},\\"f33b3cfb-3b1f-45b4-ab58-a1248a8e82a3\\":{\\"id\\":\\"f33b3cfb-3b1f-45b4-ab58-a1248a8e82a3\\",\\"playerName\\":\\"Morty\\",\\"scores\\":[2,null,2,1]},\\"08966cc0-2ae0-4356-8552-4c8c5323b68a\\":{\\"id\\":\\"08966cc0-2ae0-4356-8552-4c8c5323b68a\\",\\"playerName\\":\\"Summer\\",\\"scores\\":[3,1,1,1]},\\"caf5409d-3921-4ddd-aa3e-1f7a58c42399\\":{\\"id\\":\\"caf5409d-3921-4ddd-aa3e-1f7a58c42399\\",\\"playerName\\":\\"Beth\\",\\"scores\\":[2,null,1,2]},\\"b756c49e-bc76-438c-a318-3f9036e3eeb5\\":{\\"id\\":\\"b756c49e-bc76-438c-a318-3f9036e3eeb5\\",\\"playerName\\":\\"Jerry\\",\\"scores\\":[-1,null,1]},\\"0e85d2aa-515d-4215-bf2a-d02a8d5b5d18\\":{\\"id\\":\\"0e85d2aa-515d-4215-bf2a-d02a8d5b5d18\\",\\"playerName\\":\\"Arthur\\",\\"scores\\":[12,10,2,11]},\\"e8f07017-ca0b-474d-b748-bb004f0e47d5\\":{\\"id\\":\\"e8f07017-ca0b-474d-b748-bb004f0e47d5\\",\\"playerName\\":\\"Gertrude\\",\\"scores\\":[25,null,20,9]},\\"06e5a92a-602d-4880-a612-893a10767f4e\\":{\\"id\\":\\"06e5a92a-602d-4880-a612-893a10767f4e\\",\\"playerName\\":\\"Erwin\\",\\"scores\\":[8,2,1,31]},\\"af215759-daef-41f8-aad9-97a90c778257\\":{\\"id\\":\\"af215759-daef-41f8-aad9-97a90c778257\\",\\"playerName\\":\\"Maude\\",\\"scores\\":[6,10,2,12]},\\"a897d496-9c80-4294-b71f-6531e54dc08c\\":{\\"id\\":\\"a897d496-9c80-4294-b71f-6531e54dc08c\\",\\"playerName\\":\\"Carmen\\",\\"scores\\":[10,2,1,4]},\\"f900dc3b-1cbf-4a44-a58e-0d6aec863f93\\":{\\"id\\":\\"f900dc3b-1cbf-4a44-a58e-0d6aec863f93\\",\\"playerName\\":\\"Isaac\\",\\"scores\\":[6,3,1,2]},\\"81c66201-c84f-439a-9240-a1e45e959838\\":{\\"id\\":\\"81c66201-c84f-439a-9240-a1e45e959838\\",\\"playerName\\":\\"Penelope\\",\\"scores\\":[-1,10,13,2]},\\"2eff84be-5b21-4827-ac57-4d46d8bd292c\\":{\\"id\\":\\"2eff84be-5b21-4827-ac57-4d46d8bd292c\\",\\"playerName\\":\\"Ollie\\",\\"scores\\":[7,2,12,3]},\\"8fd75860-06f2-4d3d-9f2d-62ac0eb674f8\\":{\\"id\\":\\"8fd75860-06f2-4d3d-9f2d-62ac0eb674f8\\",\\"playerName\\":\\"Justin\\",\\"scores\\":[12,4,4,2,5,-2,4]},\\"b52d5dc3-602d-4269-9267-6cf2cfa4d529\\":{\\"id\\":\\"b52d5dc3-602d-4269-9267-6cf2cfa4d529\\",\\"playerName\\":\\"Savitri\\",\\"scores\\":[0,30,8]},\\"39fbf246-de02-428f-b376-53a9b5eba40e\\":{\\"id\\":\\"39fbf246-de02-428f-b376-53a9b5eba40e\\",\\"playerName\\":\\"Thetis\\",\\"scores\\":[1,2,14]},\\"d6759b6c-2fef-4521-8400-56abb3edc547\\":{\\"id\\":\\"d6759b6c-2fef-4521-8400-56abb3edc547\\",\\"playerName\\":\\"Lludd\\",\\"scores\\":[3,43,4]},\\"577a6225-d6e8-4b47-91fb-02e85864b2a2\\":{\\"id\\":\\"577a6225-d6e8-4b47-91fb-02e85864b2a2\\",\\"playerName\\":\\"Maia\\",\\"scores\\":[0,4,8]},\\"aafa4261-3ca2-4552-ba12-81c4103461d0\\":{\\"id\\":\\"aafa4261-3ca2-4552-ba12-81c4103461d0\\",\\"playerName\\":\\"Galateia\\",\\"scores\\":[1,52,4]},\\"88a40dca-5930-4a21-9131-78acccc9ea0f\\":{\\"id\\":\\"88a40dca-5930-4a21-9131-78acccc9ea0f\\",\\"playerName\\":\\"Rashnu\\",\\"scores\\":[0,null,50]},\\"3c9a3abc-f2b4-4ef9-b953-24bffebab632\\":{\\"id\\":\\"3c9a3abc-f2b4-4ef9-b953-24bffebab632\\",\\"playerName\\":\\"Iocasta\\",\\"scores\\":[1,50,50]},\\"3dcfd833-be57-47d3-8dc6-1787c0c1d56b\\":{\\"id\\":\\"3dcfd833-be57-47d3-8dc6-1787c0c1d56b\\",\\"playerName\\":\\"Myrddin\\",\\"scores\\":[0,20,4]},\\"f45ff562-94f3-4a28-8f89-1de17c169cfc\\":{\\"id\\":\\"f45ff562-94f3-4a28-8f89-1de17c169cfc\\",\\"playerName\\":\\"Venere\\",\\"scores\\":[0,10,100]},\\"d543400f-a60a-4ff9-bc05-40e640ca8c8f\\":{\\"id\\":\\"d543400f-a60a-4ff9-bc05-40e640ca8c8f\\",\\"playerName\\":\\"Lugos\\",\\"scores\\":[0,50,4]},\\"12f03866-5f89-43cc-857f-6b3c9760df1a\\":{\\"id\\":\\"12f03866-5f89-43cc-857f-6b3c9760df1a\\",\\"playerName\\":\\"Eudora\\",\\"scores\\":[1,10,4]},\\"cb5acb92-19a8-40e1-9826-5d98879ab23e\\":{\\"id\\":\\"cb5acb92-19a8-40e1-9826-5d98879ab23e\\",\\"playerName\\":\\"Indra\\",\\"scores\\":[1,-10,58]}}","_persist":"{\\"version\\":0,\\"rehydrated\\":true}"}'); + const settingsJson = JSON.parse('{"home_fullscreen":"false","multiplier":"1","addendOne":"1","addendTwo":"10","currentGameId":"\\"d0ee7acd-da3c-47e9-b535-6bc401f3c16d\\"","onboarded":"\\"2.4.1\\"","showPointParticles":"true","_persist":"{\\"version\\":0,\\"rehydrated\\":true}"}'); + const gamesJson = JSON.parse('{"ids":"[\\"bba7e79a-10d6-4d7d-97d0-1992e34579cd\\",\\"9139ee7f-05fa-4152-95f3-62084f94bf85\\",\\"46753726-1f11-424e-93c3-2491ab3058bd\\",\\"a871776b-578b-415d-932a-dda41145b0ed\\"]","entities":"{\\"a871776b-578b-415d-932a-dda41145b0ed\\":{\\"id\\":\\"a871776b-578b-415d-932a-dda41145b0ed\\",\\"title\\":\\"Family Game Night\\",\\"dateCreated\\":1700389151005,\\"roundCurrent\\":3,\\"roundTotal\\":4,\\"playerIds\\":[\\"8a7b194a-47d6-45c2-b4a0-eb5f5f7dd1fd\\",\\"f33b3cfb-3b1f-45b4-ab58-a1248a8e82a3\\",\\"08966cc0-2ae0-4356-8552-4c8c5323b68a\\",\\"caf5409d-3921-4ddd-aa3e-1f7a58c42399\\",\\"b756c49e-bc76-438c-a318-3f9036e3eeb5\\"]},\\"46753726-1f11-424e-93c3-2491ab3058bd\\":{\\"id\\":\\"46753726-1f11-424e-93c3-2491ab3058bd\\",\\"title\\":\\"Dutch Blitz\\",\\"dateCreated\\":1700448139651,\\"roundCurrent\\":3,\\"roundTotal\\":4,\\"playerIds\\":[\\"0e85d2aa-515d-4215-bf2a-d02a8d5b5d18\\",\\"e8f07017-ca0b-474d-b748-bb004f0e47d5\\",\\"06e5a92a-602d-4880-a612-893a10767f4e\\",\\"af215759-daef-41f8-aad9-97a90c778257\\",\\"a897d496-9c80-4294-b71f-6531e54dc08c\\",\\"f900dc3b-1cbf-4a44-a58e-0d6aec863f93\\",\\"81c66201-c84f-439a-9240-a1e45e959838\\",\\"2eff84be-5b21-4827-ac57-4d46d8bd292c\\"]},\\"9139ee7f-05fa-4152-95f3-62084f94bf85\\":{\\"id\\":\\"9139ee7f-05fa-4152-95f3-62084f94bf85\\",\\"title\\":\\"Solitaire\\",\\"dateCreated\\":1700448496128,\\"roundCurrent\\":6,\\"roundTotal\\":7,\\"playerIds\\":[\\"8fd75860-06f2-4d3d-9f2d-62ac0eb674f8\\"]},\\"bba7e79a-10d6-4d7d-97d0-1992e34579cd\\":{\\"id\\":\\"bba7e79a-10d6-4d7d-97d0-1992e34579cd\\",\\"title\\":\\"All In\\",\\"dateCreated\\":1700448546805,\\"roundCurrent\\":2,\\"roundTotal\\":3,\\"playerIds\\":[\\"b52d5dc3-602d-4269-9267-6cf2cfa4d529\\",\\"39fbf246-de02-428f-b376-53a9b5eba40e\\",\\"d6759b6c-2fef-4521-8400-56abb3edc547\\",\\"577a6225-d6e8-4b47-91fb-02e85864b2a2\\",\\"aafa4261-3ca2-4552-ba12-81c4103461d0\\",\\"88a40dca-5930-4a21-9131-78acccc9ea0f\\",\\"3c9a3abc-f2b4-4ef9-b953-24bffebab632\\",\\"3dcfd833-be57-47d3-8dc6-1787c0c1d56b\\",\\"f45ff562-94f3-4a28-8f89-1de17c169cfc\\",\\"d543400f-a60a-4ff9-bc05-40e640ca8c8f\\",\\"12f03866-5f89-43cc-857f-6b3c9760df1a\\",\\"cb5acb92-19a8-40e1-9826-5d98879ab23e\\"]}}","_persist":"{\\"version\\":0,\\"rehydrated\\":true}"}'); const restoredData = { settings: { @@ -39,7 +39,7 @@ export const getPreloadedState = () => { } }; - logger.info("restoredData"); + logger.info('restoredData'); logger.info(restoredData); return restoredData; }; diff --git a/src/ColorPalette.ts b/src/ColorPalette.ts index b2d08b4f..660513da 100644 --- a/src/ColorPalette.ts +++ b/src/ColorPalette.ts @@ -1,60 +1,60 @@ import { getContrastRatio } from 'colorsheet'; -import { updateGame } from "../redux/GamesSlice"; -import { useAppDispatch, useAppSelector } from "../redux/hooks"; -import { selectPlayerById, updatePlayer } from "../redux/PlayersSlice"; -import { selectCurrentGame } from "../redux/selectors"; +import { updateGame } from '../redux/GamesSlice'; +import { useAppDispatch, useAppSelector } from '../redux/hooks'; +import { selectPlayerById, updatePlayer } from '../redux/PlayersSlice'; +import { selectCurrentGame } from '../redux/selectors'; type PaletteType = Record; const palettes: PaletteType = { 'original': [ - "#01497c", - "#c25858", - "#f5c800", - "#275436", - "#dc902c", - "#62516a", - "#755647", - "#925561", + '#01497c', + '#c25858', + '#f5c800', + '#275436', + '#dc902c', + '#62516a', + '#755647', + '#925561', ], 'pastel': [ - "#f9d5e5", - "#eeac99", - "#e06377", - "#c83349", - "#5b9aa0", - "#d1b59b", - "#8f3e3f", - "#f6416c", + '#f9d5e5', + '#eeac99', + '#e06377', + '#c83349', + '#5b9aa0', + '#d1b59b', + '#8f3e3f', + '#f6416c', ], 'dark': [ - "#011627", - "#fdfffc", - "#2ec4b6", - "#e71d36", - "#ff9f1c", - "#f3722c", - "#f8961e", - "#f9844a", + '#011627', + '#fdfffc', + '#2ec4b6', + '#e71d36', + '#ff9f1c', + '#f3722c', + '#f8961e', + '#f9844a', ], 'grey': [ - "#f8f9fa", - "#e9ecef", - "#dee2e6", - "#ced4da", - "#adb5bd", - "#6c757d", - "#495057", - "#343a40", - "#212529", - "#000000", + '#f8f9fa', + '#e9ecef', + '#dee2e6', + '#ced4da', + '#adb5bd', + '#6c757d', + '#495057', + '#343a40', + '#212529', + '#000000', ], - 'a': ["#114b5f", "#456990", "#e4fde1", "#f45b69", "#6b2737"], - 'b': ["#f00", "#00f"], - 'c': ["#88498f", "#779fa1", "#e0cba8", "#ff6542", "#564154"], - 'd': ["#f8ffe5", "#06d6a0", "#1b9aaa", "#ef476f", "#ffc43d"], - 'e': ["#1f2041", "#4b3f72", "#ffc857", "#119da4", "#19647e"], + 'a': ['#114b5f', '#456990', '#e4fde1', '#f45b69', '#6b2737'], + 'b': ['#f00', '#00f'], + 'c': ['#88498f', '#779fa1', '#e0cba8', '#ff6542', '#564154'], + 'd': ['#f8ffe5', '#06d6a0', '#1b9aaa', '#ef476f', '#ffc43d'], + 'e': ['#1f2041', '#4b3f72', '#ffc857', '#119da4', '#19647e'], }; export const getPlayerColors = (index: number): [string, string] => { @@ -67,7 +67,7 @@ export const getPlayerColors = (index: number): [string, string] => { const contrast = getContrastRatio(bg, '#000').number; - const fg = contrast > 7 ? "#000000" : "#FFFFFF"; + const fg = contrast > 7 ? '#000000' : '#FFFFFF'; return [bg, fg]; }; diff --git a/src/Navigation.tsx b/src/Navigation.tsx index bf6feaeb..e31078f8 100644 --- a/src/Navigation.tsx +++ b/src/Navigation.tsx @@ -10,11 +10,11 @@ import AppInfoHeader from '../src/components/Headers/AppInfoHeader'; import GameHeader from '../src/components/Headers/GameHeader'; import HomeHeader from '../src/components/Headers/HomeHeader'; import SettingsHeader from '../src/components/Headers/SettingsHeader'; -import AppInfoScreen from "../src/screens/AppInfoScreen"; -import GameScreen from "../src/screens/GameScreen"; -import ListScreen from "../src/screens/ListScreen"; +import AppInfoScreen from '../src/screens/AppInfoScreen'; +import GameScreen from '../src/screens/GameScreen'; +import ListScreen from '../src/screens/ListScreen'; import OnboardingScreen from '../src/screens/OnboardingScreen'; -import SettingsScreen from "../src/screens/SettingsScreen"; +import SettingsScreen from '../src/screens/SettingsScreen'; import EditPlayerHeader from './components/Headers/EditPlayerHeader'; import ShareHeader from './components/Headers/ShareHeader'; @@ -71,7 +71,7 @@ export const Navigation = () => { initialParams={{ onboarding: true }} options={{ orientation: 'portrait', - title: "Onboarding", + title: 'Onboarding', headerShown: false, }} /> @@ -89,7 +89,7 @@ export const Navigation = () => { { return ; }, @@ -98,7 +98,7 @@ export const Navigation = () => { { return ; }, @@ -107,7 +107,7 @@ export const Navigation = () => { ({ orientation: 'all', - title: "Settings", + title: 'Settings', header: ({ navigation }) => { return ; }, @@ -116,7 +116,7 @@ export const Navigation = () => { { return ; }, @@ -126,7 +126,7 @@ export const Navigation = () => { initialParams={{ index: 0, playerId: '' }} options={({ route }) => ({ orientation: 'portrait', - title: "Edit Player", + title: 'Edit Player', header: ({ navigation }) => { return ; }, @@ -136,7 +136,7 @@ export const Navigation = () => { initialParams={{ onboarding: false }} options={{ orientation: 'portrait', - title: "Tutorial", + title: 'Tutorial', }} /> diff --git a/src/components/BigButtons/BigButton.tsx b/src/components/BigButtons/BigButton.tsx index 247aba89..a3f4eb08 100644 --- a/src/components/BigButtons/BigButton.tsx +++ b/src/components/BigButtons/BigButton.tsx @@ -1,8 +1,8 @@ -import React from "react"; +import React from 'react'; -import { StyleSheet, Text, TouchableOpacity, View } from "react-native"; -import { Icon } from "react-native-elements"; -import Animated, { FadeIn, FadeOut, Layout } from "react-native-reanimated"; +import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; +import { Icon } from 'react-native-elements'; +import Animated, { FadeIn, FadeOut, Layout } from 'react-native-reanimated'; interface Props { onPress: () => void; diff --git a/src/components/Buttons/CheckButton.test.tsx b/src/components/Buttons/CheckButton.test.tsx index 8304a918..48e8946c 100644 --- a/src/components/Buttons/CheckButton.test.tsx +++ b/src/components/Buttons/CheckButton.test.tsx @@ -9,16 +9,16 @@ describe('CheckButton', () => { const navigation = useNavigationMock(); it.skip('should navigate to Game screen when pressed', async () => { - const { getByRole } = render(); + const { getByRole } = render(); const button = getByRole('button'); await waitFor(() => { fireEvent.press(button); - expect(navigation.navigate).toHaveBeenCalledWith("Game"); + expect(navigation.navigate).toHaveBeenCalledWith('Game'); }); }); it.skip('should navigate back a screen when pressed', async () => { - const { getByRole } = render(); + const { getByRole } = render(); const button = getByRole('button'); await waitFor(() => { fireEvent.press(button); diff --git a/src/components/Buttons/CheckButton.tsx b/src/components/Buttons/CheckButton.tsx index 52e67c3f..b41c3d64 100644 --- a/src/components/Buttons/CheckButton.tsx +++ b/src/components/Buttons/CheckButton.tsx @@ -25,7 +25,7 @@ const CheckButton: React.FunctionComponent = ({ navigation, route }) => { { await analytics().logEvent('save_game'); if (route?.params?.reason === 'new_game') { - navigation.navigate("Game"); + navigation.navigate('Game'); } else { //TODO: when the game is first created, this will go back instead of to game screen navigation.goBack(); diff --git a/src/components/Buttons/HomeButton.tsx b/src/components/Buttons/HomeButton.tsx index 4bf73483..8c4774a8 100644 --- a/src/components/Buttons/HomeButton.tsx +++ b/src/components/Buttons/HomeButton.tsx @@ -50,7 +50,7 @@ const HomeButton: React.FunctionComponent = ({ navigation }) => { return ( { - navigation.navigate("List"); + navigation.navigate('List'); await analytics().logEvent('menu'); storePrompt(); diff --git a/src/components/Buttons/NewGameButton.tsx b/src/components/Buttons/NewGameButton.tsx index 26c28053..84019b11 100644 --- a/src/components/Buttons/NewGameButton.tsx +++ b/src/components/Buttons/NewGameButton.tsx @@ -23,7 +23,7 @@ const NewGameButton: React.FunctionComponent = ({ navigation }) => { const menuActions: MenuAction[] = playerNumberOptions.map((number) => { return { id: number.toString(), - title: number.toString() + (number == 1 ? " Player" : " Players"), + title: number.toString() + (number == 1 ? ' Player' : ' Players'), }; }); @@ -35,7 +35,7 @@ const NewGameButton: React.FunctionComponent = ({ navigation }) => { }) ).then(() => { setTimeout(() => { - navigation.navigate("Settings", { reason: 'new_game' }); + navigation.navigate('Settings', { reason: 'new_game' }); }, 500); }); }; diff --git a/src/components/EditGame.tsx b/src/components/EditGame.tsx index 8b2ea3f4..d375df9e 100644 --- a/src/components/EditGame.tsx +++ b/src/components/EditGame.tsx @@ -7,7 +7,7 @@ import { updateGame } from '../../redux/GamesSlice'; import { useAppDispatch, useAppSelector } from '../../redux/hooks'; import { selectCurrentGame } from '../../redux/selectors'; -const UNTITLED = "Untitled"; +const UNTITLED = 'Untitled'; const EditGame = ({ }) => { const dispatch = useAppDispatch(); @@ -20,7 +20,7 @@ const EditGame = ({ }) => { const onEndEditingHandler = (e: NativeSyntheticEvent) => { const text = e.nativeEvent.text; - if (text == "") { + if (text == '') { setLocalTitle(UNTITLED); saveGameTitle(UNTITLED); } else { @@ -29,7 +29,7 @@ const EditGame = ({ }) => { }; const onChangeTextHandler = (text: string) => { - if (text == "") { + if (text == '') { saveGameTitle(UNTITLED); } else { saveGameTitle(text); @@ -43,7 +43,7 @@ const EditGame = ({ }) => { dispatch(updateGame({ id: currentGame.id, changes: { - title: title == "" ? UNTITLED : title, + title: title == '' ? UNTITLED : title, } })); }; diff --git a/src/components/GameListItem.tsx b/src/components/GameListItem.tsx index e61037a7..023991cb 100644 --- a/src/components/GameListItem.tsx +++ b/src/components/GameListItem.tsx @@ -42,7 +42,7 @@ const GameListItem: React.FunctionComponent = ({ navigation, gameId, inde */ const chooseGameHandler = async () => { setCurrentGameCallback(); - navigation.navigate("Game"); + navigation.navigate('Game'); await analytics().logEvent('select_game', { index: index, diff --git a/src/components/GameListItemPlayerName.tsx b/src/components/GameListItemPlayerName.tsx index 1a15a712..0a8167a1 100644 --- a/src/components/GameListItemPlayerName.tsx +++ b/src/components/GameListItemPlayerName.tsx @@ -1,7 +1,7 @@ -import { Text } from "react-native"; +import { Text } from 'react-native'; -import { useAppSelector } from "../../redux/hooks"; -import { selectPlayerById } from "../../redux/PlayersSlice"; +import { useAppSelector } from '../../redux/hooks'; +import { selectPlayerById } from '../../redux/PlayersSlice'; interface Props { playerId: string; diff --git a/src/components/Interactions/InteractionComponents.ts b/src/components/Interactions/InteractionComponents.ts index e732af29..7147fee7 100644 --- a/src/components/Interactions/InteractionComponents.ts +++ b/src/components/Interactions/InteractionComponents.ts @@ -1,6 +1,6 @@ -import HalfTap from "./HalfTap/HalfTap"; -import { InteractionType } from "./InteractionType"; -import Swipe from "./Swipe/Swipe"; +import HalfTap from './HalfTap/HalfTap'; +import { InteractionType } from './InteractionType'; +import Swipe from './Swipe/Swipe'; export const interactionComponents = { [InteractionType.HalfTap]: HalfTap, diff --git a/src/components/Interactions/InteractionSelector.tsx b/src/components/Interactions/InteractionSelector.tsx index 9676fa66..c335520e 100644 --- a/src/components/Interactions/InteractionSelector.tsx +++ b/src/components/Interactions/InteractionSelector.tsx @@ -22,9 +22,9 @@ const InteractionSelector: React.FunctionComponent = ( const description = (() => { switch (interactionType) { case InteractionType.HalfTap: - return "Tap the top or bottom of each player's tile."; + return 'Tap the top or bottom of each player\'s tile.'; case InteractionType.SwipeVertical: - return "Swipe up or down on the player's tile."; + return 'Swipe up or down on the player\'s tile.'; } })(); @@ -39,8 +39,8 @@ const InteractionSelector: React.FunctionComponent = ( dispatch(setInteractionType(InteractionType.HalfTap)); }} text="Tap" - icon={} - color={interactionType == InteractionType.HalfTap ? "white" : "grey"} + icon={} + color={interactionType == InteractionType.HalfTap ? 'white' : 'grey'} /> @@ -50,8 +50,8 @@ const InteractionSelector: React.FunctionComponent = ( dispatch(setInteractionType(InteractionType.SwipeVertical)); }} text="Swipe" - icon={} - color={interactionType == InteractionType.SwipeVertical ? "white" : "grey"} + icon={} + color={interactionType == InteractionType.SwipeVertical ? 'white' : 'grey'} /> diff --git a/src/components/Onboarding/Onboarding.test.ts b/src/components/Onboarding/Onboarding.test.ts index 37408d16..a1ac768b 100644 --- a/src/components/Onboarding/Onboarding.test.ts +++ b/src/components/Onboarding/Onboarding.test.ts @@ -1,6 +1,6 @@ -import { SemVer } from "semver"; +import { SemVer } from 'semver'; -import { getOnboardingSemVer } from "./Onboarding"; +import { getOnboardingSemVer } from './Onboarding'; describe('onboarding', () => { it('should return the default if onboarded to 0.0.0', () => { diff --git a/src/components/Onboarding/Onboarding.ts b/src/components/Onboarding/Onboarding.ts index 8a2e622d..75e09f02 100644 --- a/src/components/Onboarding/Onboarding.ts +++ b/src/components/Onboarding/Onboarding.ts @@ -23,7 +23,7 @@ type OnboardingScreens = Record; const onboardingScreens: OnboardingScreens = { '2.2.2': [ { - title: "ScorePad\nwith Rounds", + title: 'ScorePad\nwith Rounds', media: { type: 'image', source: require('../../../assets/icon.png'), @@ -36,7 +36,7 @@ const onboardingScreens: OnboardingScreens = { color: 'rgba(0,0,0,0.6)' }, { - title: "Swipe for points", + title: 'Swipe for points', media: { type: 'video', source: require('../../../assets/video/swipe-gesture.mp4'), @@ -45,7 +45,7 @@ const onboardingScreens: OnboardingScreens = { backgroundColor: '#a0c99a', }, { - title: "Hold for more", + title: 'Hold for more', media: { type: 'video', source: require('../../../assets/video/swipe-powerhold.mp4'), @@ -54,7 +54,7 @@ const onboardingScreens: OnboardingScreens = { backgroundColor: '#d29898', }, { - title: "Change Gestures", + title: 'Change Gestures', media: { type: 'video', source: require('../../../assets/video/gesture-select.mp4'), @@ -63,7 +63,7 @@ const onboardingScreens: OnboardingScreens = { backgroundColor: '#9896c5', }, { - title: "Score History", + title: 'Score History', media: { type: 'image', source: require('../../../assets/onboarding/sheet.png'), @@ -74,7 +74,7 @@ const onboardingScreens: OnboardingScreens = { ], '2.5.0': [ { - title: "New Default:\nSwipe Gestures", + title: 'New Default:\nSwipe Gestures', media: { type: 'video', source: require('../../../assets/video/swipe-gesture.mp4'), @@ -83,7 +83,7 @@ const onboardingScreens: OnboardingScreens = { backgroundColor: '#a0c99a', }, { - title: "Hold for more", + title: 'Hold for more', media: { type: 'video', source: require('../../../assets/video/swipe-powerhold.mp4'), @@ -92,7 +92,7 @@ const onboardingScreens: OnboardingScreens = { backgroundColor: '#d29898', }, { - title: "Change Gestures", + title: 'Change Gestures', media: { type: 'video', source: require('../../../assets/video/gesture-select.mp4'), @@ -104,7 +104,7 @@ const onboardingScreens: OnboardingScreens = { }; const finalScreen: OnboardingScreenItem[] = [{ - title: "That's it!", + title: 'That\'s it!', media: { type: 'image', source: require('../../../assets/icon.png'), diff --git a/src/components/PlayerListItem.tsx b/src/components/PlayerListItem.tsx index c4f7219c..e50e3696 100644 --- a/src/components/PlayerListItem.tsx +++ b/src/components/PlayerListItem.tsx @@ -39,15 +39,15 @@ const PlayerListItem: React.FunctionComponent = ({ const deleteConfirmHandler = async () => { Alert.alert( - "Delete Player", - "Are you sure you want to delete this player? This will delete all scores for this player.", + 'Delete Player', + 'Are you sure you want to delete this player? This will delete all scores for this player.', [ { - text: "Cancel", - style: "cancel", + text: 'Cancel', + style: 'cancel', }, { - text: "Delete", + text: 'Delete', onPress: () => { deleteHandler(); } @@ -104,7 +104,7 @@ const PlayerListItem: React.FunctionComponent = ({ @@ -138,7 +138,7 @@ const styles = StyleSheet.create({ color: '#eee', fontSize: 25, fontVariant: ['tabular-nums'], - fontWeight: "bold", + fontWeight: 'bold', padding: 5, }, colorBadge: { diff --git a/src/components/PlayerTiles/AdditionTile/ScoreRound.tsx b/src/components/PlayerTiles/AdditionTile/ScoreRound.tsx index f294dcfa..629c6e5b 100644 --- a/src/components/PlayerTiles/AdditionTile/ScoreRound.tsx +++ b/src/components/PlayerTiles/AdditionTile/ScoreRound.tsx @@ -46,8 +46,8 @@ const ScoreRound: React.FunctionComponent = ({ containerWidth, roundScore color: fontColor, opacity: scoreMathOpacity }]}> - {roundScore > 0 && " + "} - {roundScore < 0 && " - "} + {roundScore > 0 && ' + '} + {roundScore < 0 && ' - '} {Math.abs(d)} diff --git a/src/components/PopupMenu/AbstractPopupMenu.tsx b/src/components/PopupMenu/AbstractPopupMenu.tsx index 73dc9c90..f8e54ff8 100644 --- a/src/components/PopupMenu/AbstractPopupMenu.tsx +++ b/src/components/PopupMenu/AbstractPopupMenu.tsx @@ -34,7 +34,7 @@ const AbstractPopupMenu: React.FC = (props) => { */ const shareGameHandler = async () => { props.setCurrentGameCallback(); - props.navigation.navigate("Share"); + props.navigation.navigate('Share'); await analytics().logEvent('menu_share', { round_count: roundTotal, @@ -47,7 +47,7 @@ const AbstractPopupMenu: React.FC = (props) => { */ const editGameHandler = async () => { props.setCurrentGameCallback(); - props.navigation.navigate("Settings", { reason: 'edit_game' }); + props.navigation.navigate('Settings', { reason: 'edit_game' }); await analytics().logEvent('menu_edit', { round_count: roundTotal, @@ -63,7 +63,7 @@ const AbstractPopupMenu: React.FC = (props) => { asyncRematchGame({ gameId: props.gameId }) ).then(() => { setTimeout(() => { - props.navigation.navigate("Game"); + props.navigation.navigate('Game'); }, 500); }); }; diff --git a/src/components/PopupMenu/IOSPopupMenu.tsx b/src/components/PopupMenu/IOSPopupMenu.tsx index 8e3c6426..1faaff55 100644 --- a/src/components/PopupMenu/IOSPopupMenu.tsx +++ b/src/components/PopupMenu/IOSPopupMenu.tsx @@ -52,7 +52,7 @@ const IOSPopupMenu: React.FC = ({ }, { id: 'delete', - title: `Delete`, + title: 'Delete', attributes: { destructive: true, }, diff --git a/src/components/Rounds.tsx b/src/components/Rounds.tsx index 53c24f97..8d64e0de 100644 --- a/src/components/Rounds.tsx +++ b/src/components/Rounds.tsx @@ -49,7 +49,7 @@ const Rounds: React.FunctionComponent = ({ }) => { roundsScrollViewEl.current.scrollTo({ x: offset, - animated: Platform.OS == "ios" ? true : false + animated: Platform.OS == 'ios' ? true : false }); }, [roundCurrent, roundScollOffset]); diff --git a/src/components/ScoreLog/PlayerNameColumn.tsx b/src/components/ScoreLog/PlayerNameColumn.tsx index 011ea6a7..3c18f792 100644 --- a/src/components/ScoreLog/PlayerNameColumn.tsx +++ b/src/components/ScoreLog/PlayerNameColumn.tsx @@ -27,7 +27,7 @@ const PlayerNameColumn: React.FunctionComponent = ({ }) => { color='white' /> {players.map((player, index) => ( - + {player.playerName} diff --git a/src/components/Sheets/GameSheet.tsx b/src/components/Sheets/GameSheet.tsx index 8386c555..6eb930f5 100644 --- a/src/components/Sheets/GameSheet.tsx +++ b/src/components/Sheets/GameSheet.tsx @@ -67,15 +67,15 @@ const GameSheet: React.FunctionComponent = ({ navigation, containerHeight */ const resetGameHandler = () => { Alert.alert( - "Reset Game", - "Warning: This will reset all scores and rounds for this game. Are you sure you want to reset?", + 'Reset Game', + 'Warning: This will reset all scores and rounds for this game. Are you sure you want to reset?', [ { - text: "Cancel", - style: "cancel" + text: 'Cancel', + style: 'cancel' }, { - text: "Reset", + text: 'Reset', onPress: () => { if (currentGame == undefined) return; @@ -95,7 +95,7 @@ const GameSheet: React.FunctionComponent = ({ navigation, containerHeight roundTotal: 1, } })); - navigation.navigate("Game"); + navigation.navigate('Game'); } } ] @@ -107,21 +107,21 @@ const GameSheet: React.FunctionComponent = ({ navigation, containerHeight */ const rematchGameHandler = async () => { Alert.alert( - "Rematch", - "This will create a new game with the same players and empty scores.", + 'Rematch', + 'This will create a new game with the same players and empty scores.', [ { - text: "Cancel", - style: "cancel" + text: 'Cancel', + style: 'cancel' }, { - text: "Rematch", + text: 'Rematch', onPress: () => { dispatch( asyncRematchGame({ gameId: currentGame.id }) ).then(() => { setTimeout(() => { - navigation.navigate("Game"); + navigation.navigate('Game'); }, 500); }); } @@ -264,9 +264,9 @@ const GameSheet: React.FunctionComponent = ({ navigation, containerHeight /> } - diff --git a/src/constants.ts b/src/constants.ts index 1e6bb3fb..c5d5f371 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -1,13 +1,13 @@ export const systemBlue = '#0a84ff'; export const palette = [ - "#f9d5e5", - "#eeac99", - "#e06377", - "#c83349", - "#5b9aa0", - "#d1b59b", - "#8f3e3f", - "#f6416c", + '#f9d5e5', + '#eeac99', + '#e06377', + '#c83349', + '#5b9aa0', + '#d1b59b', + '#8f3e3f', + '#f6416c', ]; export const STORAGE_KEY = { GAMES_LIST: '@games_list', diff --git a/src/screens/AppInfoScreen.tsx b/src/screens/AppInfoScreen.tsx index 5c64d3ad..cad4a74e 100644 --- a/src/screens/AppInfoScreen.tsx +++ b/src/screens/AppInfoScreen.tsx @@ -44,7 +44,7 @@ const AppInfoScreen: React.FunctionComponent = ({ navigation }) => { const toggleSwitch = () => { dispatch(toggleshowPointParticles()); }; const alertWithVersion = async () => { - Alert.alert(`ScorePad with Rounds\n` + + Alert.alert('ScorePad with Rounds\n' + `v${appVersion} (${buildNumber})\n` + `${Platform.OS} ${Platform.Version}\n` + (process.env.EXPO_PUBLIC_FIREBASE_ANALYTICS) diff --git a/src/screens/EditPlayerScreen.tsx b/src/screens/EditPlayerScreen.tsx index 36c95313..7fbb91c7 100644 --- a/src/screens/EditPlayerScreen.tsx +++ b/src/screens/EditPlayerScreen.tsx @@ -38,8 +38,8 @@ const EditPlayerScreen: React.FC = ({ } }); - const [originalPlayerName] = useState(player?.playerName || ""); - const [localPlayerName, setLocalPlayerName] = useState(player?.playerName || ""); + const [originalPlayerName] = useState(player?.playerName || ''); + const [localPlayerName, setLocalPlayerName] = useState(player?.playerName || ''); if (playerId == null) { return null; } if (player == null) return null; @@ -49,7 +49,7 @@ const EditPlayerScreen: React.FC = ({ const onEndEditingHandler = (e: NativeSyntheticEvent) => { const text = e.nativeEvent.text; - if (text == "") { + if (text == '') { setLocalPlayerName(originalPlayerName); savePlayerName(originalPlayerName); } else { @@ -58,7 +58,7 @@ const EditPlayerScreen: React.FC = ({ }; const onChangeHandler = (text: string) => { - if (text == "") { + if (text == '') { savePlayerName(originalPlayerName); } else { savePlayerName(text); @@ -130,7 +130,7 @@ const EditPlayerScreen: React.FC = ({ styles.colorBadge, { borderWidth: i == index ? 2 : 0, - backgroundColor: "#" + color, + backgroundColor: '#' + color, height: i == index ? 30 : 20, width: i == index ? 30 : 20, } @@ -166,7 +166,7 @@ const styles = StyleSheet.create({ color: '#eee', fontSize: 25, fontVariant: ['tabular-nums'], - fontWeight: "bold", + fontWeight: 'bold', padding: 5, }, colorBadge: { diff --git a/src/screens/OnboardingScreen.tsx b/src/screens/OnboardingScreen.tsx index 26144082..207c6e82 100644 --- a/src/screens/OnboardingScreen.tsx +++ b/src/screens/OnboardingScreen.tsx @@ -11,7 +11,7 @@ import { View, ViewToken, } from 'react-native'; -import { ExpandingDot } from "react-native-animated-pagination-dots"; +import { ExpandingDot } from 'react-native-animated-pagination-dots'; import { Button } from 'react-native-elements'; import Animated, { FadeIn } from 'react-native-reanimated'; import { SafeAreaView } from 'react-native-safe-area-context'; diff --git a/src/screens/ShareScreen.tsx b/src/screens/ShareScreen.tsx index 9944a0e1..82e0757c 100644 --- a/src/screens/ShareScreen.tsx +++ b/src/screens/ShareScreen.tsx @@ -7,7 +7,7 @@ import * as Sharing from 'expo-sharing'; import { ScrollView, StyleSheet, Text, View } from 'react-native'; import { Button, Icon } from 'react-native-elements'; import { SafeAreaView } from 'react-native-safe-area-context'; -import { captureRef } from "react-native-view-shot"; +import { captureRef } from 'react-native-view-shot'; import { selectGameById } from '../../redux/GamesSlice'; import { useAppSelector } from '../../redux/hooks'; @@ -67,7 +67,7 @@ const ShareScreen: React.FunctionComponent = ({ navigation }) => { icon={} style={{ padding: 10 }} onPress={async () => { - navigation.navigate("Settings"); + navigation.navigate('Settings'); }} /> Date: Fri, 12 Apr 2024 21:59:10 -0700 Subject: [PATCH 04/14] More colors --- src/ColorPalette.ts | 59 +++++++++++++++++++++++++++++++++++++++------ 1 file changed, 51 insertions(+), 8 deletions(-) diff --git a/src/ColorPalette.ts b/src/ColorPalette.ts index 660513da..d2010ba2 100644 --- a/src/ColorPalette.ts +++ b/src/ColorPalette.ts @@ -50,24 +50,67 @@ const palettes: PaletteType = { '#212529', '#000000', ], - 'a': ['#114b5f', '#456990', '#e4fde1', '#f45b69', '#6b2737'], - 'b': ['#f00', '#00f'], - 'c': ['#88498f', '#779fa1', '#e0cba8', '#ff6542', '#564154'], - 'd': ['#f8ffe5', '#06d6a0', '#1b9aaa', '#ef476f', '#ffc43d'], - 'e': ['#1f2041', '#4b3f72', '#ffc857', '#119da4', '#19647e'], + 'a': [ + '#114b5f', + '#456990', + '#e4fde1', + '#f45b69', + '#6b2737' + ], + 'b': [ + '#c25858', + '#01497c', + ], + 'c': [ + '#88498f', + '#779fa1', + '#e0cba8', + '#ff6542', + '#564154' + ], + 'd': [ + '#f8ffe5', + '#06d6a0', + '#1b9aaa', + '#ef476f', + '#ffc43d' + ], + 'e': [ + '#1f2041', + '#4b3f72', + '#ffc857', + '#119da4', + '#19647e' + ], + 'f': [ + '#fcaa67', + '#b0413e', + '#ffffc7', + '#548687', + '#473335' + ], + 'g': [ + '#ffa400', + '#009ffd', + '#2a2a72', + '#232528', + '#eaf6ff' + ] }; export const getPlayerColors = (index: number): [string, string] => { - const palette = Object.keys(palettes)[8]; + const palette = Object.keys(palettes)[4 % Object.keys(palettes).length]; // TODO: Get player color if it exists const length = palettes[palette].length; const bg = palettes[palette][index % length]; - const contrast = getContrastRatio(bg, '#000').number; + const blackContrast = getContrastRatio(bg, '#000').number; + const whiteContrast = getContrastRatio(bg, '#fff').number; - const fg = contrast > 7 ? '#000000' : '#FFFFFF'; + // +1 to give a slight preference to white + const fg = blackContrast >= whiteContrast + 1 ? '#000000' : '#FFFFFF'; return [bg, fg]; }; From 78b6039e4315123afbe6833a2b907ee2f6208fef Mon Sep 17 00:00:00 2001 From: Justin Wyne <1986068+wyne@users.noreply.github.com> Date: Sat, 13 Apr 2024 03:06:08 -0700 Subject: [PATCH 05/14] SettingsScreen optimization --- src/screens/SettingsScreen.tsx | 37 ++++++++++++++++++++-------------- 1 file changed, 22 insertions(+), 15 deletions(-) diff --git a/src/screens/SettingsScreen.tsx b/src/screens/SettingsScreen.tsx index 123900c1..633ed20c 100644 --- a/src/screens/SettingsScreen.tsx +++ b/src/screens/SettingsScreen.tsx @@ -3,6 +3,7 @@ import React, { useEffect } from 'react'; import analytics from '@react-native-firebase/analytics'; import { ParamListBase, RouteProp } from '@react-navigation/native'; import { NativeStackNavigationProp } from '@react-navigation/native-stack'; +import { createSelector } from '@reduxjs/toolkit'; import * as Crypto from 'expo-crypto'; import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; import DraggableFlatList, { ScaleDecorator } from 'react-native-draggable-flatlist'; @@ -28,6 +29,12 @@ interface Props { route: RouteProp; } +// This selector takes the state as input and returns a list of sorted player IDs. +const selectSortedPlayerIds = createSelector( + selectSortedPlayers, + (players) => players.map(player => player.id) +); + const SettingsScreen: React.FunctionComponent = ({ navigation }) => { const dispatch = useAppDispatch(); @@ -35,7 +42,7 @@ const SettingsScreen: React.FunctionComponent = ({ navigation }) => { if (typeof currentGameId == 'undefined') return null; const currentGame = useAppSelector(selectCurrentGame); - const players = useAppSelector(selectSortedPlayers); + const playerIds = useAppSelector(selectSortedPlayerIds); const [edit, setEdit] = React.useState(false); @@ -46,7 +53,7 @@ const SettingsScreen: React.FunctionComponent = ({ navigation }) => { dispatch(playerAdd({ id: newPlayerId, - playerName: `Player ${players.length + 1}`, + playerName: `Player ${playerIds.length + 1}`, scores: [0], })); @@ -59,25 +66,25 @@ const SettingsScreen: React.FunctionComponent = ({ navigation }) => { await analytics().logEvent('add_player', { game_id: currentGameId, - player_count: players.length + 1, + player_count: playerIds.length + 1, }); }; useEffect(() => { - if (players.length <= 1) { + if (playerIds.length <= 1) { setEdit(false); } - }, [players]); + }, [playerIds.length]); const ListFooter = () => ( - {players.length < MAX_PLAYERS && + {playerIds.length < MAX_PLAYERS &&