From 93867c7d794dcbe515b6f32d356c1b6d666805c4 Mon Sep 17 00:00:00 2001
From: djmil <andriy@djmil.dev>
Date: Tue, 31 Oct 2023 09:59:14 +0100
Subject: [PATCH 1/3] mock implementaion

---
 webapp/src/components/Game.css             |  5 +++++
 webapp/src/components/Game.jsx             |  4 +++-
 webapp/src/components/Game/GameMessage.css |  6 ++++++
 webapp/src/components/Game/GameMessage.jsx | 15 +++++++++++++++
 4 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 webapp/src/components/Game/GameMessage.css
 create mode 100644 webapp/src/components/Game/GameMessage.jsx

diff --git a/webapp/src/components/Game.css b/webapp/src/components/Game.css
index 458f0c4..e15501b 100644
--- a/webapp/src/components/Game.css
+++ b/webapp/src/components/Game.css
@@ -18,4 +18,9 @@
 .game .right-side {
     float: left;
     width: 55%;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center; 
+    align-items: center;
 }
\ No newline at end of file
diff --git a/webapp/src/components/Game.jsx b/webapp/src/components/Game.jsx
index b72bcfc..d4878f2 100644
--- a/webapp/src/components/Game.jsx
+++ b/webapp/src/components/Game.jsx
@@ -4,7 +4,8 @@ import GameView from './Game/GameView'
 import GameSelector from './Game/GameSelector'
 import GameAction from './Game/GameAction'
 import GameBoard from './Game/GameBoard'
-import NewGame from './Game/NewGame';
+import NewGame from './Game/NewGame'
+import GameMessage from './Game/GameMessage'
 
 export default function Game() {
 
@@ -17,6 +18,7 @@ export default function Game() {
       </div>
       <div className='right-side'>
         <GameAction />
+        <GameMessage />
         <GameBoard />
       </div>
     </div>
diff --git a/webapp/src/components/Game/GameMessage.css b/webapp/src/components/Game/GameMessage.css
new file mode 100644
index 0000000..b8871b8
--- /dev/null
+++ b/webapp/src/components/Game/GameMessage.css
@@ -0,0 +1,6 @@
+.game-message {
+    border-radius: 3px;
+    border-color: lightgray;
+    background-color:violet;
+    width: 70%;
+}
\ No newline at end of file
diff --git a/webapp/src/components/Game/GameMessage.jsx b/webapp/src/components/Game/GameMessage.jsx
new file mode 100644
index 0000000..aad2d4c
--- /dev/null
+++ b/webapp/src/components/Game/GameMessage.jsx
@@ -0,0 +1,15 @@
+import './GameMessage.css'
+import React from 'react'
+
+import { AppContext } from '../../context/app'
+
+export default function GameMessage() {
+
+  const [ctx] = React.useContext(AppContext)
+
+  return (
+    <div className='game-message'>
+      TBD: Game Message
+    </div>
+  )
+}
-- 
2.45.2


From 1cf762254c7a711912201491ab91744b96cb9054 Mon Sep 17 00:00:00 2001
From: djmil <andriy@djmil.dev>
Date: Tue, 31 Oct 2023 10:16:35 +0100
Subject: [PATCH 2/3] mock implementstion

---
 webapp/src/components/Game.jsx                  |  2 ++
 webapp/src/components/Game/Message2Opponent.css |  6 ++++++
 webapp/src/components/Game/Message2Opponent.jsx | 15 +++++++++++++++
 3 files changed, 23 insertions(+)
 create mode 100644 webapp/src/components/Game/Message2Opponent.css
 create mode 100644 webapp/src/components/Game/Message2Opponent.jsx

diff --git a/webapp/src/components/Game.jsx b/webapp/src/components/Game.jsx
index d4878f2..e4d49c1 100644
--- a/webapp/src/components/Game.jsx
+++ b/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>
   )
diff --git a/webapp/src/components/Game/Message2Opponent.css b/webapp/src/components/Game/Message2Opponent.css
new file mode 100644
index 0000000..6110b41
--- /dev/null
+++ b/webapp/src/components/Game/Message2Opponent.css
@@ -0,0 +1,6 @@
+.message2opponent {
+    border-radius: 3px;
+    border-color: lightgray;
+    background-color:violet;
+    width: 70%;
+}
\ No newline at end of file
diff --git a/webapp/src/components/Game/Message2Opponent.jsx b/webapp/src/components/Game/Message2Opponent.jsx
new file mode 100644
index 0000000..4bda210
--- /dev/null
+++ b/webapp/src/components/Game/Message2Opponent.jsx
@@ -0,0 +1,15 @@
+import './Message2Opponent.css'
+import React from 'react'
+
+import { AppContext } from '../../context/app'
+
+export default function Message2Opponent() {
+
+  const [ctx] = React.useContext(AppContext)
+
+  return (
+    <div className='message2opponent'>
+      Message to opponent
+    </div>
+  )
+}
-- 
2.45.2


From 262fa0636d332b3b292337317a3191e0ee8827c4 Mon Sep 17 00:00:00 2001
From: djmil <andriy@djmil.dev>
Date: Tue, 31 Oct 2023 13:17:41 +0100
Subject: [PATCH 3/3] initial implementation

---
 webapp/src/components/Game/GameAction/Create.jsx | 10 ++++++----
 webapp/src/components/Game/Message2Opponent.css  |  7 ++-----
 webapp/src/components/Game/Message2Opponent.jsx  | 12 ++++++++++--
 webapp/src/context/app/reducer.js                |  1 +
 4 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/webapp/src/components/Game/GameAction/Create.jsx b/webapp/src/components/Game/GameAction/Create.jsx
index c78fff0..bbcc817 100644
--- a/webapp/src/components/Game/GameAction/Create.jsx
+++ b/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: '' }) }
     }
 }
 
@@ -81,7 +83,7 @@ function get_Opponent(isCurrentUser, whitePlayerName, blackPlayerName) {
 
 async function postData(url = "", data = {}) {
     console.log("POST", url, data)
-    
+
     const response = await fetch(url, {
         method: "POST",
         headers: {
diff --git a/webapp/src/components/Game/Message2Opponent.css b/webapp/src/components/Game/Message2Opponent.css
index 6110b41..cb2abb7 100644
--- a/webapp/src/components/Game/Message2Opponent.css
+++ b/webapp/src/components/Game/Message2Opponent.css
@@ -1,6 +1,3 @@
-.message2opponent {
-    border-radius: 3px;
-    border-color: lightgray;
-    background-color:violet;
-    width: 70%;
+.message2opponent input{ 
+    width: 270px;
 }
\ No newline at end of file
diff --git a/webapp/src/components/Game/Message2Opponent.jsx b/webapp/src/components/Game/Message2Opponent.jsx
index 4bda210..f341afe 100644
--- a/webapp/src/components/Game/Message2Opponent.jsx
+++ b/webapp/src/components/Game/Message2Opponent.jsx
@@ -4,12 +4,20 @@ import React from 'react'
 import { AppContext } from '../../context/app'
 
 export default function Message2Opponent() {
+  const [ctx, dispatchCtx] = React.useContext(AppContext)
 
-  const [ctx] = React.useContext(AppContext)
+  const setMessage = (message) => {
+    dispatchCtx({ update: "newGame", message })
+  }
 
   return (
     <div className='message2opponent'>
-      Message to opponent
+      <input
+        placeholder='Message to opponent'
+        value={ctx.newGame.message}
+        maxLength={150}
+        onChange={e => setMessage(e.target.value)}
+      />
     </div>
   )
 }
diff --git a/webapp/src/context/app/reducer.js b/webapp/src/context/app/reducer.js
index b68ecc6..08f6a10 100644
--- a/webapp/src/context/app/reducer.js
+++ b/webapp/src/context/app/reducer.js
@@ -24,6 +24,7 @@ export const initialState = {
   newGame: {
     whitePlayer: '',
     blackPlayer: '',
+    message: '',
   },
 
 }
-- 
2.45.2