inital commit

tools/janken/src/App.tsx

@@ -37,7 +37,7 @@ function App(): JSX.Element {
         }
       });
       sock.on('login', (data: ILoginMessage) => {
-        console.log(data);
+        console.log('login', data);
         setCurrentPlayers(data);
       });
       sock.on('registerUser', (data: string) => {
@@ -68,10 +68,11 @@ function App(): JSX.Element {
       setSocket(sock);
     }
   }
-  const janken = (option: string): void => {
+  const janken = (option: string, room: string): void => {
     if (socket && currentUser) {
       const message: IJankenSelect = {
         userName: currentUser,
+        room,
         option
       };
       socket.emit('janken', message);
@@ -82,9 +83,9 @@ function App(): JSX.Element {
       socket.emit('moveToStage');
     }
   };
-  const registerUser = (username: string): void => {
+  const registerUser = (username: string, room: string): void => {
     if (socket) {
-      socket.emit('registerUser', username);
+      socket.emit('registerUser', { username, room });
     }
   };
   const previousIndex = (): void => {
@@ -97,9 +98,9 @@ function App(): JSX.Element {
       socket.emit('nextIndex');
     }
   };
-  const againGame = (): void => {
+  const againGame = (room: string): void => {
     if (socket) {
-      socket.emit('againGame');
+      socket.emit('againGame', room);
     }
   };
   const exitGame = (): void => {

tools/janken/src/component/janken/Janken.tsx

@@ -7,15 +7,16 @@ type ComponentProps = {
   currentUser: string;
   currentPlayers: ILoginMessage;
   jankenResults: IJankenResult | null;
-  janken: (option: string) => void;
-  onSubmit: (username: string) => void;
+  janken: (option: string, room: string) => void;
+  onSubmit: (username: string, room: string) => void;
   moveToStage: () => void;
-  againGame: () => void;
+  againGame: (room: string) => void;
 };
 
 export const Janken: FunctionComponent<ComponentProps> = (props): JSX.Element => {
   const { currentUser, currentPlayers, jankenResults, janken, onSubmit, moveToStage, againGame } = props;
   const [userName, setUserName] = useState<string>('');
+  const [room, setRoom] = useState<string>('');
   const getIcon = (result: string): JSX.Element | undefined => {
     switch (result) {
       case 'rock':
@@ -33,12 +34,13 @@ export const Janken: FunctionComponent<ComponentProps> = (props): JSX.Element =>
       <Button
         color='pink'
         size='large'
-        onClick={againGame}
+        onClick={(): void => againGame(room)}
       >
         Again
       </Button>
       );
     } else {
+      /*
       return (
       <Button
         color='pink'
@@ -48,6 +50,8 @@ export const Janken: FunctionComponent<ComponentProps> = (props): JSX.Element =>
         Stages
       </Button>
       );
+      */
+      return (<></>);
     }
   }
   if (currentPlayers.playerOne === '' || currentPlayers.playerTwo === '') {
@@ -64,9 +68,18 @@ export const Janken: FunctionComponent<ComponentProps> = (props): JSX.Element =>
                 loading={false}
                 onChange={(e): void => setUserName(e.target.value)}
               />
+              <Label>
+                Room Name
+              </Label>
+              <Input
+                value={room}
+                loading={false}
+                onChange={(e): void => setRoom(e.target.value)}
+              />
             </Form.Field>
             <Button
-              onClick={(): void => onSubmit(userName)}
+              disabled={room.trim() === '' || userName.trim() === ''}
+              onClick={(): void => onSubmit(userName, room)}
             >
               Login
             </Button>
@@ -87,7 +100,7 @@ export const Janken: FunctionComponent<ComponentProps> = (props): JSX.Element =>
               <Button
                 color='pink'
                 size='huge'
-                onClick={(): void => janken('rock')}
+                onClick={(): void => janken('rock', room)}
               >
                 <Icon  name='hand rock outline' />
               </Button>
@@ -95,7 +108,7 @@ export const Janken: FunctionComponent<ComponentProps> = (props): JSX.Element =>
               <Button
                 color='pink'
                 size='huge'
-                onClick={(): void => janken('scissors')}
+                onClick={(): void => janken('scissors', room)}
               >
               <Icon  name='hand scissors outline' />
               </Button>
@@ -103,7 +116,7 @@ export const Janken: FunctionComponent<ComponentProps> = (props): JSX.Element =>
               <Button
                 color='pink'
                 size='huge'
-                onClick={(): void => janken('paper')}
+                onClick={(): void => janken('paper', room)}
               >
               <Icon  name='hand paper outline' />
               </Button>

tools/janken/src/model/messages.ts

@@ -16,5 +16,6 @@ export interface ILogin {
 
 export interface IJankenSelect {
   userName: string;
+  room: string;
   option: string;
 }