From 5273fa333107600a6dd4c18f7923cdaf2b09473a Mon Sep 17 00:00:00 2001
From: Griffin Suparto <suparto.g@gmail.com>
Date: Sun, 27 Sep 2020 14:42:30 -0400
Subject: [PATCH 1/2] feat: issue #17/ focus on next player name input when
 pressing enter

feat: issue #17/ focus on next player name input when pressing enter
---
 CHANGELOG.md                     |  6 ++++++
 README.md                        |  3 ++-
 src/components/Player/Player.tsx | 35 +++++++++++++++++++++++---------
 3 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6cf5b46..5f8c3fe 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -110,6 +110,12 @@ Features included draggable players and progress bar for score.
 
 ## [Unreleased]
 
+### [v0.9.0]
+
+#### Added
+
+- Focus on next input element when pressing Enter
+
 ### [v0.1.0] - 8/24/2020
 
 fuslie adds notepad ftw on the stream
diff --git a/README.md b/README.md
index 681307b..c33baa7 100644
--- a/README.md
+++ b/README.md
@@ -30,7 +30,8 @@ Thanks to the developer team:
 [Daniel Singer](https://github.com/chilblane) (A.K.A. chilblane)  
 [Francis Tse](https://github.com/francistse23) (A.K.A. Furanki)  
 [Kevin Han](https://github.com/kevinydhan) (A.K.A. khany)  
-[Charlie Chai](https://github.com/charlie-808)
+[Charlie Chai](https://github.com/charlie-808)  
+[Griffin Suparto](https://github.com/Viou)
 
 Thanks to everyone who has suggested enhancements, reported bugs, are or any
 other support on this project such as:
diff --git a/src/components/Player/Player.tsx b/src/components/Player/Player.tsx
index b17836a..c7be213 100644
--- a/src/components/Player/Player.tsx
+++ b/src/components/Player/Player.tsx
@@ -1,9 +1,9 @@
 import ColorsMenu from "../ColorsMenu";
 import { IPlayer } from "utils/types";
-import Input from "components/common/Input";
 import React from "react";
 import { useData } from "context";
-import useStyles from "./Player.styles";
+import usePlayerStyles from "./Player.styles";
+import useInputStyles from "../common/Input/Input.styles";
 
 export interface IPlayerProps {
   id: string | number;
@@ -17,9 +17,11 @@ export interface IPlayerProps {
 
 export default function Player(props: IPlayerProps): JSX.Element {
   const [isMenuShowing, setIsMenuShowing] = React.useState(false);
+  const htmlElRef = React.useRef(null);
 
   const { names } = useData()!; // eslint-disable-line
-  const classes = useStyles({ names, ...props });
+  const playerStyles = usePlayerStyles({ names, ...props });
+  const inputStyles = useInputStyles();
 
   const { id, color, name, list, setList, index } = props;
 
@@ -28,14 +30,24 @@ export default function Player(props: IPlayerProps): JSX.Element {
     event: React.ChangeEvent<HTMLInputElement>
   ) => {
     const players: Array<IPlayer> = [...list];
-
     players[player].name = event.currentTarget.value;
-
     setList(players);
   };
 
+  const handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "Enter") {
+      const currentInput = (htmlElRef.current as unknown) as HTMLInputElement;
+      const nextParent =
+        currentInput.parentElement?.parentElement?.nextElementSibling ??
+        currentInput.parentElement?.parentElement?.parentElement
+          ?.firstElementChild;
+      const nextInput = nextParent?.lastChild?.firstChild as HTMLInputElement;
+      nextInput?.select();
+    }
+  };
+
   return (
-    <div className={`${classes.container} player-handle`}>
+    <div className={`${playerStyles.container} player-handle`}>
       {isMenuShowing && (
         <ColorsMenu
           isMenuShowing={isMenuShowing}
@@ -43,7 +55,7 @@ export default function Player(props: IPlayerProps): JSX.Element {
           currentColor={id}
         />
       )}
-      <div className={classes.icon}>
+      <div className={playerStyles.icon}>
         <img
           onClick={() => {
             if (names) {
@@ -56,14 +68,17 @@ export default function Player(props: IPlayerProps): JSX.Element {
         />
       </div>
       {names && (
-        <div className={classes.name}>
-          <Input
+        <div className={playerStyles.name}>
+          <input
+            type="text"
             placeholder="Player"
-            className={classes.input}
+            className={`${playerStyles.input} ${inputStyles.root}`}
             onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
               handleChange(index, event)
             }
+            onKeyPress={handleKeyPress}
             value={name}
+            ref={htmlElRef}
           />
         </div>
       )}

From f0bc868fed48ee1e6d0a12d21518eb42e7f0faf6 Mon Sep 17 00:00:00 2001
From: Griffin Suparto <suparto.g@gmail.com>
Date: Sun, 27 Sep 2020 19:06:55 -0400
Subject: [PATCH 2/2] feat: issue #17/ styling fix

---
 src/components/Player/Player.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/Player/Player.tsx b/src/components/Player/Player.tsx
index c7be213..ce71315 100644
--- a/src/components/Player/Player.tsx
+++ b/src/components/Player/Player.tsx
@@ -3,7 +3,6 @@ import { IPlayer } from "utils/types";
 import React from "react";
 import { useData } from "context";
 import usePlayerStyles from "./Player.styles";
-import useInputStyles from "../common/Input/Input.styles";
 
 export interface IPlayerProps {
   id: string | number;
@@ -21,7 +20,6 @@ export default function Player(props: IPlayerProps): JSX.Element {
 
   const { names } = useData()!; // eslint-disable-line
   const playerStyles = usePlayerStyles({ names, ...props });
-  const inputStyles = useInputStyles();
 
   const { id, color, name, list, setList, index } = props;
 
@@ -72,7 +70,7 @@ export default function Player(props: IPlayerProps): JSX.Element {
           <input
             type="text"
             placeholder="Player"
-            className={`${playerStyles.input} ${inputStyles.root}`}
+            className={playerStyles.input}
             onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
               handleChange(index, event)
             }