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;
 }

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>

webapp/src/components/Game/GameMessage.css

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

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