Created preferences screen

client/src/Navigation.tsx

@@ -10,6 +10,7 @@ import Licenses from "./components/Licenses";
 // import Fire from "./ExpoParty/Fire";
 import GameScreen from "./screens/GameScreen";
 import ChallengesScreen from "./screens/AchievementScreen";
+import Preferences from "./screens/PreferencesScreen";
 // import LeaderboardScreen from "./screens/LeaderboardScreen";
 // import ProfileScreen from "./screens/ProfileScreen";
 // import ReportScreen from "./screens/ReportScreen";
@@ -35,6 +36,7 @@ const linking = {
     Licenses: "/credit",
     Report: "/report",
     Challenges: "/challenges",
+    Preferences: "/settings",
     Social: {
       screens: {
         Leaderboard: "/rank",
@@ -121,6 +123,11 @@ export default () => {
           component={Licenses}
           options={{ stackPresentation: "modal" }}
         />
+        <AppStack.Screen
+          name="Preferences"
+          component={Preferences}
+          options={{ stackPresentation: "modal" }}
+        />
       </AppStack.Navigator>
     </NavigationContainer>
   );

client/src/components/Avatar.tsx

@@ -150,7 +150,7 @@ export default class Avatar extends React.PureComponent<{
         }}
         style={[
           styles.avatarStyle,
-          { backgroundColor: this.props.color ?? this.avatarColor },
+          { backgroundColor: this.props.color || this.avatarColor },
           this.props.avatarStyle,
         ]}
         accessibilityTraits="image"

client/src/components/Button/PreferencesButton.tsx

@@ -0,0 +1,10 @@
+import * as React from "react";
+
+import Icon from "./Icon";
+
+const PreferencesButton = React.forwardRef(
+  (props: React.ComponentProps<typeof Icon>, ref) => {
+    return <Icon {...props} ref={ref} name="cog" />;
+  }
+);
+export default PreferencesButton;

client/src/components/Button/SwapPlatformButton.tsx

@@ -75,6 +75,10 @@ function openPlatformLink(platform) {
   }
 }
 
+export function openOtherPlatform() {
+  openPlatformLink(getOtherPlatform());
+}
+
 /**
  * This button recommends the other available platform on the device.
  * iOS -> website

client/src/components/Footer.tsx

@@ -15,6 +15,7 @@ import LicensesButton from "./Button/LicensesButton";
 import PWAButton, { usePWAInstallable } from "./Button/PWAButton";
 import ShareButton from "./Button/Share";
 import SoundButton from "./Button/Sound";
+import PreferencesButton from "./Button/PreferencesButton";
 import SwapPlatformButton, {
   getOtherPlatform,
 } from "./Button/SwapPlatformButton";
@@ -44,31 +45,27 @@ function Footer({ game, screenshot, navigation }) {
   // This state toggles when the user installs so the button isn't rendered anymore
   const [showPWA, setShowPWA] = React.useState(true);
   const animation = game === GameStates.Menu ? "zoomIn" : "zoomOut";
-  const onLicensesPress = () => {
-    // dispatch.presentAchievement.set({ name: "Nerdy boi", score: null });
-    navigation.navigate("Licenses");
-  };
+
   const onChallengesPress = () => {
     navigation.navigate("Challenges");
   };
+  const onPreferencesPress = () => {
+    navigation.navigate("Preferences");
+  };
   const views = [];
 
   if (Platform.OS !== "web") {
     views.push(<SoundButton />);
   }
 
-  if (!Settings.isPromo && getOtherPlatform()) {
-    views.push(<SwapPlatformButton />);
-  }
-
   if (canInstallPwa && showPWA) {
     views.push(<PWAButton onInstall={() => setShowPWA(false)} />);
   }
 
   if (!Settings.isPromo) {
     views.push(<ChallengesButton onPress={onChallengesPress} />);
-    views.push(<LicensesButton onPress={onLicensesPress} />);
   }
+  views.push(<PreferencesButton onPress={onPreferencesPress} />);
 
   const onLeaderboardPress = () => {
     if (Settings.isFirebaseEnabled) {

client/src/rematch/models.ts

@@ -49,6 +49,7 @@ export type AchievementsShape = Record<string, true>;
 export const achievements = {
   state: {},
   reducers: {
+    _reset: () => ({}),
     set: (
       state: AchievementsShape,
       val: AchievementsShape
@@ -81,6 +82,7 @@ import { promptToReviewAsync } from "../utils/promptStoreReview";
 export const bestRounds = {
   state: 0,
   reducers: {
+    _reset: () => 0,
     set: (state: number, rounds: number): number => rounds,
   },
   effects: {
@@ -105,6 +107,20 @@ export const bestRounds = {
   },
 };
 
+type DeveloperShape = {
+  isActive: boolean;
+};
+export const developer = {
+  state: { isActive: false },
+  reducers: {
+    set: (
+      state: DeveloperShape,
+      updates: Partial<DeveloperShape>
+    ): DeveloperShape => ({ ...state, ...updates }),
+  },
+  effects: {},
+};
+
 function hasBeenAtLeastOneDaySinceTime(time: number): boolean {
   // 1 Day after the last prompt time (or since the app was first opened).
   const appropriateTimeToAskAgain = new Date(time);
@@ -125,6 +141,7 @@ export type StoreReviewShape = {
 export const storeReview = {
   state: { promptTime: Date.now() },
   reducers: {
+    _reset: () => ({ promptTime: Date.now() }),
     set: (
       state: StoreReviewShape,
       value: Partial<StoreReviewShape>
@@ -150,6 +167,7 @@ export const storeReview = {
 export const rounds = {
   state: 0,
   reducers: {
+    _reset: () => 0,
     set: (state: number, rounds: number): number => rounds,
   },
   effects: {
@@ -179,15 +197,18 @@ export type ScoreShape = {
   isBest: boolean;
 };
 
+const initialScoreState: ScoreShape = {
+  current: 0,
+  best: 0,
+  total: 0,
+  last: null,
+  isBest: false,
+};
+
 export const score = {
-  state: {
-    current: 0,
-    best: 0,
-    total: 0,
-    last: null,
-    isBest: false,
-  },
+  state: { ...initialScoreState },
   reducers: {
+    _hardReset: () => ({ ...initialScoreState }),
     setBest: (state: ScoreShape, best: number): ScoreShape => ({
       ...state,
       best,