Feat: Add main gameplay page

frontend/src/components/gameplay/MainGameplayPage.css

@@ -0,0 +1,49 @@
+.main-gameplay {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+}
+
+.conversation-area {
+    flex-grow: 1;
+    overflow-y: auto;
+    padding: 10px;
+    background-color: #f5f5f5;
+}
+
+.message {
+    margin-bottom: 10px;
+    padding: 5px 10px;
+    border-radius: 5px;
+}
+
+.message.player {
+    color: blue;
+    background-color: #e5e5ff;
+}
+
+.message.dm {
+    color: green;
+    background-color: #e5ffe5;
+}
+
+.input-area {
+    display: flex;
+}
+
+.input-area input {
+    flex-grow: 1;
+    padding: 10px;
+    margin-right: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+.input-area button {
+    padding: 10px;
+    border: none;
+    border-radius: 5px;
+    background-color: #4caf50;
+    color: white;
+    cursor: pointer;
+}

frontend/src/components/gameplay/MainGameplayPage.jsx

@@ -0,0 +1,68 @@
+import React, { useState, useEffect, useRef } from 'react';
+import './MainGameplayPage.css'; // assuming you have corresponding CSS file
+
+const MainGameplayPage = () => {
+    const [inputMessage, setInputMessage] = useState('');
+    const [conversation, setConversation] = useState([]);
+    const endOfMessagesRef = useRef(null);
+
+    const scrollToBottom = () => {
+        endOfMessagesRef.current?.scrollIntoView({ behavior: "smooth" });
+    };
+
+    useEffect(scrollToBottom, [conversation]); // scroll to bottom when conversation updates
+
+    const handleInputChange = (event) => {
+        setInputMessage(event.target.value);
+    };
+
+    const handleSubmit = () => {
+        if (!inputMessage.trim()) return; // prevent empty messages
+
+        // Here, you would typically send the message to your backend or GPT API
+        // and then receive a response to add to the conversation.
+        // For demonstration, we'll just add the message directly to our conversation log:
+        const newMessage = { text: inputMessage, sender: 'player' };
+        setConversation([...conversation, newMessage]);
+
+        // Simulate a DM response
+        setTimeout(() => {
+            const dmResponse = { text: `You said: "${inputMessage}"`, sender: 'dm' };
+            setConversation(prev => [...prev, dmResponse]);
+        }, 1000);
+
+        setInputMessage(''); // clear the input after sending
+    };
+
+    const handleKeyPress = (event) => {
+        if (event.key === 'Enter') {
+            handleSubmit();
+        }
+    };
+
+    return (
+        <div className="main-gameplay">
+            <div className="conversation-area">
+                {conversation.map((message, index) => (
+                    <div key={index} className={`message ${message.sender}`}>
+                        <span>{message.text}</span>
+                    </div>
+                ))}
+                <div ref={endOfMessagesRef} />
+            </div>
+
+            <div className="input-area">
+                <input
+                    type="text"
+                    value={inputMessage}
+                    onChange={handleInputChange}
+                    onKeyPress={handleKeyPress}
+                    placeholder="Type your message..."
+                />
+                <button onClick={handleSubmit}>Send</button>
+            </div>
+        </div>
+    );
+}
+
+export default MainGameplayPage;

frontend/src/routes/Routes.jsx

@@ -13,10 +13,12 @@ import SettingsPage from '../components/settingspage/Settings';
 import Quit from '../components/quit/Quit';
 import SomeNotFoundComponent from '../components/somenotfoundcomponent/SomeNotFoundComponent';
 // ... other imports
+import MainGameplayPage from '../components/gameplay/MainGameplayPage';
 
 const AppRoutes  = () => {
   return (
     <Routes >
+      <Route path={routes.gameplay} element={<MainGameplayPage/>} />
       <Route path="/" element={<MainMenu/>} />
       <Route path={routes.mainMenu} element={<MainMenu/>} />
       <Route path={routes.newCampaign} element={<NewCampaignPage/>} />

frontend/src/routes/routeDefinitions.jsx

@@ -7,6 +7,7 @@ const routes = {
     rulesLookup: "/rules-lookup",
     settings: "/settings",
     quit: "/quit",
+    gameplay: "/gameplay",
   };
 
   export default routes;