Merge pull request #40 from Kedyn/design

Design

.eslintrc

@@ -8,5 +8,8 @@
     "plugin:prettier/recommended",
     "prettier/@typescript-eslint"
   ],
+  "rules": {
+    "camelcase": "error"
+  },
   "parser": "@typescript-eslint/parser"
 }

.vscode/snippets.code-snippets

@@ -42,9 +42,7 @@
       "  const classes = useStyles();",
       "",
       "  return (",
-      "    <React.Fragment>",
       "      <div className={classes.root}>$0</div>",
-      "    </React.Fragment>",
       "  );",
       "}"
     ]

CHANGELOG.md

@@ -7,6 +7,35 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Released]
 
+### [v0.8.0] - 9/24/2020
+
+Switched to Kevin Han's (@khany) UI design.
+
+#### Added
+
+- Separate Scores for impostors and innocents.
+- Color change menu for players
+- Reset Scores
+- Reset Round (players positions)
+- Reset all button, resets to default.
+- Reset Notes
+- Settings Modal
+- Recovery Notes Modal
+- Changelog Modal
+
+#### Fixed
+
+- Player background color contrast
+
+#### Changed
+
+- Use names to the settings modal.
+
+#### Removed
+
+- Light theme
+- Draggable map characters
+
 ### [v0.7.0] - 9/15/2020
 
 Code refactoring / project restructuring.

README.md

@@ -4,13 +4,10 @@ A web to help keep track of among us game.
 
 ## Features
 
-- Editable title
 - Score tracking
 - Draggable players between innocent/sus/hit list/evil/dead/unknown sections
-- Themes
 - Notes
 - Maps
-- Map draggable players
 
 ## Usage
 
@@ -39,8 +36,9 @@ other support on this project such as:
 
 [Adam Gausmann](https://github.com/agausmann)  
 Pedro / Dian\_\_  
-Rydannn (twitch handle)
-GeneralMitch (twitch handle)
+Rydannn (twitch handle)  
+GeneralMitch (twitch handle)  
+Kermitigated (twitch handle)
 
 Please if you would not like to be mentioned here or your information is wrong
 let me know so I can remove it or fix it, thank you!

package.json

@@ -60,5 +60,12 @@
   "lint-staged": {
     "*.{ts,tsx}": "eslint --cache --fix",
     "*.{ts,tsx,md,html}": "prettier --write"
-  }
-}
+  },
+  "browserslist": [
+    "last 3 and_chr versions",
+    "last 3 chrome versions",
+    "last 3 opera versions",
+    "last 3 ios_saf versions",
+    "last 3 safari versions"
+  ]
+}

src/components/App.tsx

@@ -1,15 +1,53 @@
+import { INITIAL_DATA, useData } from "context";
 import { JssProvider, ThemeProvider } from "react-jss";
 
 import ControlsContent from "./ControlsContent";
+import FeedbackForm from "./FeedbackForm";
 import MainContent from "./MainContent";
 import MapsContent from "./MapsContent";
+import Modal from "./common/Modal";
 import React from "react";
+import Recovery from "./Recovery";
 import jssSetUp from "utils/jssSetUp";
-import { useData } from "context";
 
 export default function App(): JSX.Element {
-  // eslint-disable-next-line
-  const { theme } = useData()!;
+  const { version, theme } = useData()!; // eslint-disable-line
+  const [showNotes, setShowNotes] = React.useState(false);
+  const [showForm, setShowForm] = React.useState(false);
+
+  React.useEffect(() => {
+    if (version !== INITIAL_DATA.version) {
+      setShowNotes(true);
+    }
+  }, []);
+
+  const patchNotes = [
+    {
+      title: "Added",
+      items: [
+        "Separate Scores for impostors and innocents",
+        "Color change menu for players (click player icon to open)",
+        "Reset Scores",
+        "Reset Round (players positions)",
+        "Reset all button, resets players positions and scores.",
+        "Reset Notes",
+        "Settings Modal",
+        "Recovery Notes Modal",
+        "Change log Modal",
+        "Feedback Modal",
+      ],
+    },
+    { title: "Fixed", items: ["Player background color contrast"] },
+    { title: "Changed", items: ["Use names to the settings modal."] },
+    { title: "Removed", items: ["Light theme", "Draggable map characters"] },
+    {
+      title: "Developer Notes",
+      items: [
+        "We are working in allowing custom theme colors.",
+        "We added a feedback link at the bottom at the page, we love to hear from all of you.",
+      ],
+    },
+  ];
 
   return (
     <React.Fragment>
@@ -22,20 +60,62 @@ export default function App(): JSX.Element {
               <MapsContent />
             </main>
             <footer>
-              <div>
-                <small>
-                  fusliez notes{" "}
-                  <a href="https://github.com/Kedyn/fusliez-notes/releases/tag/v0.7.0">
-                    v0.7.0
-                  </a>{" "}
-                  [9/14/2020] made with &#10084; by the{" "}
-                  <a href="https://github.com/Kedyn/fusliez-notes#authors-and-acknowledgment">
-                    fuslie fam
-                  </a>
-                  .
-                </small>
-              </div>
+              <small>
+                fusliez notes{" "}
+                <a
+                  href="https://github.com/Kedyn/fusliez-notes/releases/tag/v0.7.0"
+                  onClick={(
+                    event: React.MouseEvent<HTMLAnchorElement, MouseEvent>
+                  ) => {
+                    event.preventDefault();
+                    setShowNotes(!showNotes);
+                  }}
+                >
+                  {version}
+                </a>{" "}
+                [9/24/2020] made with &#10084; by the{" "}
+                <a href="https://github.com/Kedyn/fusliez-notes#authors-and-acknowledgment">
+                  fuslie fam
+                </a>
+                .{" "}
+                <a
+                  href="#"
+                  onClick={(
+                    event: React.MouseEvent<HTMLAnchorElement, MouseEvent>
+                  ) => {
+                    event.preventDefault();
+                    setShowForm(true);
+                  }}
+                >
+                  Feedback
+                </a>
+                <Modal
+                  title="Feedback Form"
+                  show={showForm}
+                  onClose={() => setShowForm(false)}
+                >
+                  <FeedbackForm />
+                </Modal>
+              </small>
             </footer>
+            <Recovery />
+            {/* CHANGE LOG */}
+            <Modal
+              title="Change Log v0.8.0"
+              show={showNotes}
+              onClose={() => setShowNotes(false)}
+            >
+              {patchNotes.map(({ title, items }) => (
+                <div key={title}>
+                  <h4>{title}</h4>
+                  <ul>
+                    {items.map((item) => (
+                      <li key={item}>{item}</li>
+                    ))}
+                  </ul>
+                </div>
+              ))}
+            </Modal>
           </React.Suspense>
         </ThemeProvider>
       </JssProvider>

src/components/ColorsMenu/ColorsMenu.styles.ts

@@ -0,0 +1,44 @@
+import { ITheme } from "utils/types";
+import { createUseStyles } from "react-jss";
+import colorNameToRGB from "utils/colorConverter";
+
+export const useColorSwatchStyles = createUseStyles({
+  playerColorChangeMenuIcon: (props) => ({
+    display: "block",
+    width: "30px",
+    height: "30px",
+    borderRadius: "15px",
+    flex: "1 1 calc(25% - 10px)",
+    backgroundColor: props.targetColor,
+    margin: "0.15rem",
+
+    "&:hover": {
+      backgroundColor: `rgba(${colorNameToRGB(props.targetColor)}, 0.5)`,
+      cursor: "pointer",
+    },
+  }),
+});
+
+export default createUseStyles((theme: ITheme) => ({
+  root: {},
+  playerColorChangeMenu: {
+    alignItems: "center",
+    background: theme.backgroundColor,
+    border: "0.0625rem solid rgba(240, 240, 240, 0.25)",
+    borderRadius: "6px",
+    boxShadow: "0 0 1rem rgba(240, 240, 240, 0.1)",
+    bottom: "110%",
+    display: "flex",
+    flex: 4,
+    flexWrap: "wrap",
+    left: 0,
+    justifyContent: "space-between",
+    position: "absolute",
+    padding: "0.25rem",
+    width: "100%",
+    zIndex: 10,
+  },
+  playerColorChangeMenuHidden: {
+    display: "none",
+  },
+}));