initial implementation

webapp/src/components/Game.jsx

@@ -6,6 +6,7 @@ import GameAction from './Game/GameAction'
 import GameBoard from './Game/GameBoard'
 import NewGame from './Game/NewGame'
 import GameMessage from './Game/GameMessage'
+import Message2Opponent from './Game/Message2Opponent'
 
 export default function Game() {
 
@@ -20,6 +21,7 @@ export default function Game() {
         <GameAction />
         <GameMessage />
         <GameBoard />
+        <Message2Opponent />
       </div>
     </div>
   )

webapp/src/components/Game/GameAction/Create.jsx

@@ -17,7 +17,8 @@ export default function Create() {
 
         postData("/api/gameproposal", request)
             .then((responce) => {
-                console.log("responce", responce); // JSON data parsed by `data.json()` call
+                console.log("responce", responce) // JSON data parsed by `data.json()` call
+                ctx.clear_Message2Opponent()
             });
     }
 
@@ -32,7 +33,7 @@ export default function Create() {
 }
 
 function Definitions() {
-    const [ctx] = React.useContext(AppContext)
+    const [ctx, dispatchCtx] = React.useContext(AppContext)
     const [data] = React.useContext(AppData)
 
     const isCurrentUser = data.isCurrentUser
@@ -54,7 +55,7 @@ function Definitions() {
             opponentName,
             opponentColor,
             board: null,
-            message: "let's play a game"
+            message: ctx.newGame.message
         }
     }
 
@@ -64,6 +65,7 @@ function Definitions() {
         isEnabled,
 
         get_GameProposalRequest,
+        clear_Message2Opponent: () => { dispatchCtx({ update: "newGame", message: '' }) }
     }
 }
 

webapp/src/components/Game/Message2Opponent.css

@@ -0,0 +1,3 @@
+.message2opponent input{ 
+    width: 270px;
+}

webapp/src/components/Game/Message2Opponent.jsx

@@ -0,0 +1,23 @@
+import './Message2Opponent.css'
+import React from 'react'
+
+import { AppContext } from '../../context/app'
+
+export default function Message2Opponent() {
+  const [ctx, dispatchCtx] = React.useContext(AppContext)
+
+  const setMessage = (message) => {
+    dispatchCtx({ update: "newGame", message })
+  }
+
+  return (
+    <div className='message2opponent'>
+      <input
+        placeholder='Message to opponent'
+        value={ctx.newGame.message}
+        maxLength={150}
+        onChange={e => setMessage(e.target.value)}
+      />
+    </div>
+  )
+}

webapp/src/context/app/reducer.js

@@ -24,6 +24,7 @@ export const initialState = {
   newGame: {
     whitePlayer: '',
     blackPlayer: '',
+    message: '',
   },
 
 }