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/Message2Opponent.css

@@ -0,0 +1,6 @@
+.message2opponent {
+    border-radius: 3px;
+    border-color: lightgray;
+    background-color:violet;
+    width: 70%;
+}

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>
+  )
+}