From 2ae79102974fab1cecbf39a580308df8123a8c99 Mon Sep 17 00:00:00 2001
From: Sverre Nystad <sverrenystad@gmail.com>
Date: Sat, 21 Oct 2023 15:59:41 +0200
Subject: [PATCH] Feat: Add main gameplay page

---
 .../components/gameplay/MainGameplayPage.css  | 49 +++++++++++++
 .../components/gameplay/MainGameplayPage.jsx  | 68 +++++++++++++++++++
 frontend/src/routes/Routes.jsx                |  2 +
 frontend/src/routes/routeDefinitions.jsx      |  1 +
 4 files changed, 120 insertions(+)
 create mode 100644 frontend/src/components/gameplay/MainGameplayPage.css
 create mode 100644 frontend/src/components/gameplay/MainGameplayPage.jsx

diff --git a/frontend/src/components/gameplay/MainGameplayPage.css b/frontend/src/components/gameplay/MainGameplayPage.css
new file mode 100644
index 0000000..500f77d
--- /dev/null
+++ b/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;
+}
diff --git a/frontend/src/components/gameplay/MainGameplayPage.jsx b/frontend/src/components/gameplay/MainGameplayPage.jsx
new file mode 100644
index 0000000..7a89b3c
--- /dev/null
+++ b/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;
diff --git a/frontend/src/routes/Routes.jsx b/frontend/src/routes/Routes.jsx
index 069662b..601ad6c 100644
--- a/frontend/src/routes/Routes.jsx
+++ b/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/>} />
diff --git a/frontend/src/routes/routeDefinitions.jsx b/frontend/src/routes/routeDefinitions.jsx
index 6c1c0fb..525ef49 100644
--- a/frontend/src/routes/routeDefinitions.jsx
+++ b/frontend/src/routes/routeDefinitions.jsx
@@ -7,6 +7,7 @@ const routes = {
     rulesLookup: "/rules-lookup",
     settings: "/settings",
     quit: "/quit",
+    gameplay: "/gameplay",
   };
   
   export default routes;