Added player name input

src/components/AppLayout.tsx

@@ -105,11 +105,13 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
   useEffect(() => {
     appLayout.currency &&
       setCurrencySelect(currencyOptions.indexOf(appLayout.currency));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [appLayout.currency]);
 
   useEffect(() => {
     currencySelect >= 0 &&
       appLayout.setCurrency(currencyOptions[currencySelect]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currencySelect]);
 
   return (
@@ -398,6 +400,16 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
                 </Button>
               </div>
             </div>
+
+            <div>
+              <h3 className="text-xl">Player name</h3>
+              <input
+                type="text"
+                placeholder="<player>"
+                className="w-48"
+                onInput={(e) => appLayout.setPlayerName(e.target.value)}
+              />
+            </div>
           </div>
         </Popup>
 

src/components/Markdown/Markdawn.tsx

@@ -1,3 +1,4 @@
+import { useAppLayout } from "contexts/AppLayoutContext";
 import Markdown from "markdown-to-jsx";
 import SceneBreak from "./SceneBreak";
 
@@ -7,6 +8,8 @@ type ScenBreakProps = {
 };
 
 export default function Markdawn(props: ScenBreakProps): JSX.Element {
+  const appLayout = useAppLayout();
+
   if (props.text) {
     return (
       <Markdown
@@ -17,7 +20,13 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element {
               component: SceneBreak,
             },
             player: {
-              component: () => {return <span className="text-dark opacity-70">{"<player>"}</span>}
+              component: () => {
+                return (
+                  <span className="text-dark opacity-70">
+                    {appLayout.playerName ? appLayout.playerName : "<player>"}
+                  </span>
+                );
+              },
             },
           },
         }}

src/components/Select.tsx

@@ -49,7 +49,7 @@ export default function Select(props: SelectProps): JSX.Element {
             {index !== props.state && (
               <div
                 className="bg-light hover:bg-mid transition-colors cursor-pointer p-1 last-of-type:rounded-b-[1em]"
-                key={option}
+                key={index}
                 id={option}
                 onClick={() => {
                   setOpened(false);

src/contexts/AppLayoutContext.tsx

@@ -13,6 +13,7 @@ export interface AppLayoutState {
   fontSize: number | undefined;
   dyslexic: boolean | undefined;
   currency: string | undefined;
+  playerName: string | undefined;
   setSubPanelOpen: React.Dispatch<React.SetStateAction<boolean | undefined>>;
   setLanguagePanelOpen: React.Dispatch<
     React.SetStateAction<boolean | undefined>
@@ -29,6 +30,7 @@ export interface AppLayoutState {
   setFontSize: React.Dispatch<React.SetStateAction<number | undefined>>;
   setDyslexic: React.Dispatch<React.SetStateAction<boolean | undefined>>;
   setCurrency: React.Dispatch<React.SetStateAction<string | undefined>>;
+  setPlayerName: React.Dispatch<React.SetStateAction<string | undefined>>;
 }
 
 const initialState: AppLayoutState = {
@@ -42,6 +44,7 @@ const initialState: AppLayoutState = {
   fontSize: 1,
   dyslexic: false,
   currency: "USD",
+  playerName: "",
   setSubPanelOpen: () => {},
   setLanguagePanelOpen: () => {},
   setMainPanelReduced: () => {},
@@ -52,6 +55,7 @@ const initialState: AppLayoutState = {
   setFontSize: () => {},
   setDyslexic: () => {},
   setCurrency: () => {},
+  setPlayerName: () => {},
 };
 
 const AppContext = React.createContext<AppLayoutState>(initialState);
@@ -105,6 +109,10 @@ export const AppContextProvider = (props: Props) => {
     initialState.currency
   );
 
+  const [playerName, setPlayerName] = useStateWithLocalStorage<
+    string | undefined
+  >("playerName", initialState.playerName);
+
   return (
     <AppContext.Provider
       value={{
@@ -118,6 +126,7 @@ export const AppContextProvider = (props: Props) => {
         fontSize,
         dyslexic,
         currency,
+        playerName,
         setSubPanelOpen,
         setLanguagePanelOpen,
         setConfigPanelOpen,
@@ -128,6 +137,7 @@ export const AppContextProvider = (props: Props) => {
         setFontSize,
         setDyslexic,
         setCurrency,
+        setPlayerName,
       }}
     >
       {props.children}

src/tailwind.css

@@ -80,6 +80,20 @@
   .prose blockquote {
     @apply border-l-dark;
   }
+
+  /* INPUT */
+
+  input {
+    @apply rounded-full p-2 text-center bg-light outline outline-mid outline-2 outline-offset-[-2px] hover:outline-[transparent] text-dark hover:bg-mid transition-all;
+  }
+
+  input::placeholder {
+    @apply text-dark opacity-60;
+  }
+
+  input:focus-visible {
+    @apply outline-none bg-mid shadow-inner-sm;
+  }
 }
 
 @layer components {