Merge pull request #6 from OdysseusLarp/feat-story-team-changes

Story team changes
OdysseusLarp · Dec 10, 2023 · 4845a53 · 4845a53
2 parents 172b435 + 09815cd
commit 4845a53
Show file tree

Hide file tree

Showing 11 changed files with 184 additions and 15 deletions.
diff --git a/src/App.css b/src/App.css
@@ -35,6 +35,10 @@
   color: #a52626 !important;
 }
 
+.nav-link.active#tabs-tab-Messages {
+  color: #4fa129 !important;
+}
+
 .nav-link {
   color: rgb(166, 167, 168) !important;
   font-size: 18px;
@@ -63,6 +67,10 @@
   color: #a52626;
 }
 
+.title-tab.Messages {
+  color: #4fa129;
+}
+
 .floating-button-container {
   position: fixed;
   top: 20px;

diff --git a/src/App.js b/src/App.js
@@ -8,6 +8,7 @@ import Events from "./components/Events";
 import Ship from "./components/Ship";
 import Character from "./components/Character";
 import Artifact from "./components/Artifact";
+import Messages from "./components/Messages";
 import React from "react";
 
 import { useLocation, useNavigate, Routes, Route } from "react-router-dom";
@@ -18,6 +19,7 @@ const TabKeys = {
   Artifacts: "Artifacts",
   Plots: "Plots",
   Events: "Events",
+  Messages: "Messages",
 };
 
 const tableRoutes = Object.keys(TabKeys).map((k) => "/" + k.toLowerCase());
@@ -79,7 +81,12 @@ function App() {
         </Tab>
         <Tab eventKey="Events" title="Events">
           <div style={style}>
-            <Events isActive={key === "Events"} />
+            <Events />
+          </div>
+        </Tab>
+        <Tab eventKey="Messages" title="Messages">
+          <div style={style}>
+            <Messages />
           </div>
         </Tab>
       </Tabs>
@@ -97,6 +104,9 @@ function App() {
         <Route path="/fleet/:id" element={<Ship changeTab={changeTab} />} />
         <Route path="/characters/:id" element={<Character changeTab={changeTab} />} />
         <Route path="/artifacts/:id" element={<Artifact changeTab={changeTab} />} />
+        <Route path="/plots/:id" element={<Plots changeTab={changeTab} />} />
+        <Route path="/events/:id" element={<Events changeTab={changeTab} />} />
+        <Route path="/messages/:id" element={<Messages changeTab={changeTab} />} />
         <Route path="*" element={<></>} />
       </Routes>
     </div>

diff --git a/src/components/Artifact.js b/src/components/Artifact.js
@@ -19,7 +19,7 @@ const getDiscoveredById = async (name) => {
   const response = await fetch(apiUrl(`/person/search/${name}`));
   const discoveredBy = await response.json();
   console.log(discoveredBy);
-  const discoveredById = discoveredBy.find(person => person.full_name == name)?.id;
+  const discoveredById = discoveredBy.find(person => person.full_name === name)?.id;
   return discoveredById;
 }
 
@@ -40,7 +40,7 @@ export default function Artifact(props) {
 
   React.useEffect(() => {
     props.changeTab('Artifacts');
-  }, []);
+  }, [props]);
 
   const renderArtifact = () => {
     if (!artifact) return null;

diff --git a/src/components/Character.js b/src/components/Character.js
@@ -57,6 +57,15 @@ export default function Character(props) {
         <Row>
           <Col sm>&nbsp;</Col>
         </Row>
+        <Row>
+          <Col sm><span className='mini-header new'>Link to character</span></Col>
+        </Row>
+        <Row>
+          <Col sm><span className='new'>link</span></Col>
+        </Row>
+        <Row>
+          <Col sm>&nbsp;</Col>
+        </Row>
         <Row>
           <Col sm><span className='mini-header new'>Summary / Cheat sheet</span></Col>
         </Row>
@@ -86,6 +95,33 @@ export default function Character(props) {
         <Row>
           <Col sm>&nbsp;</Col>
         </Row>
+        <Row>
+          <Col sm><span className='mini-header new'>GM Notes during the game (editable) [EDIT FIELD BUTTON] [CREATE EVENT BUTTON]</span></Col>
+        </Row>
+        <Row>
+          <Col sm><span className='new'>Run 2: Note 1</span></Col>
+        </Row>
+        <Row>
+          <Col sm><span className='new'>Run 2: Note 2</span></Col>
+        </Row>
+        <Row>
+          <Col sm><span className='new'>Run 2: Note 3</span></Col>
+        </Row>
+        <Row>
+          <Col sm><span className='new'>Run 1: Note 1</span></Col>
+        </Row>
+        <Row>
+          <Col sm><span className='new'>Run 1: Note 2</span></Col>
+        </Row>
+        <Row>
+          <Col sm><span className='new'>Run 1: Note 3</span></Col>
+        </Row>
+        <Row>
+          <Col sm><span className='new'>Save the notes between games but not here? Or the old ones are hideable </span></Col>
+        </Row>
+        <Row>
+          <Col sm>&nbsp;</Col>
+        </Row>
         <Row>
           <Col sm><span className='mini-header'>Basic Info</span></Col>
         </Row>

diff --git a/src/components/Characters.js b/src/components/Characters.js
@@ -48,6 +48,26 @@ export default function Characters(props) {
       text: 'ID',
       sort: true,
       filter: textFilter()
+    }, {
+      dataField: 'card_id',
+      text: 'Card ID',
+      sort: true,
+      filter: textFilter()
+    }, {
+      dataField: 'is_character',
+      text: 'Character/NPC',
+      sort: true,
+      filter: textFilter()
+    }, {
+      dataField: 'character_group',
+      text: 'Character Group',
+      sort: true,
+      filter: textFilter()
+    }, {
+      dataField: 'last_message_recieved',
+      text: 'Last Message Recieved',
+      sort: true,
+      filter: textFilter()
     }, {
       dataField: 'status',
       text: 'Status',
@@ -71,11 +91,6 @@ export default function Characters(props) {
       formatter: (cell, row) => {
         return row.ship == null ? "" : <span className='fleet'><Link onClick={() => props.changeTab('Fleet')} to={`/fleet/${row.ship.id}`}>{cell}</Link></span>
       },
-    }, {
-      dataField: 'card_id',
-      text: 'Card ID',
-      sort: true,
-      filter: textFilter()
     },
   ];
 

diff --git a/src/components/Events.js b/src/components/Events.js
@@ -5,7 +5,7 @@ import './Event.css';
 export default function Events() {
     return (
       <div>
-        <h1 className='event' id="app-title">Event Name</h1>
+        <h1 className='event' id="app-title">Event Name [CREATE EVENT BUTTON]</h1>
         <div className='event'>
           <Container fluid className='event'>
             <Row>
@@ -24,13 +24,21 @@ export default function Events() {
               <Col sm={4}><span className='caption'>Event size: </span>Small / Medium / Large</Col>
             </Row>
             <Row>
-              <Col sm={6}><span className='caption'>Happens after jump: </span>- / 3 / 13</Col>
+              <Col sm={6}><span className='caption'>Happens after jump: </span>- / 3 / 13 (Editable unless event is locked)</Col>
               <Col sm={4}><span className='caption'>Event type: </span>Jump / Land Mission / Empty Epsilon / Political / Machine / Gas Leak / Bomb / Character</Col>
             </Row>
             <Row>
-              <Col sm={6}><span className='caption'>Info 1: </span>Lorem ipsum</Col>
+              <Col sm={6}><span className='caption'>Locked event: </span>Yes / No</Col>
               <Col sm={4}><span className='caption'>Event theme: </span>Love / Beatrayal / Political / Machine</Col>
             </Row>
+            <Row>
+              <Col sm={6}><span className='caption'>Status: </span>Done / Not Done / Editable</Col>
+              <Col sm={4}><span className='caption'>Requires NPC: </span>Yes / No</Col>
+            </Row>
+            <Row>
+              <Col sm={6}><span className='caption'>NPC Location: </span>Odysseus / Text NPC / Mission</Col>
+              <Col sm={4}><span className='caption'>NPC Count: </span>- / 13 / 50</Col>
+            </Row>
             <Row>
               <Col sm>&nbsp;</Col>
             </Row>
@@ -47,6 +55,15 @@ export default function Events() {
             <Row>
               <Col sm>&nbsp;</Col>
             </Row>
+            <Row>
+              <Col sm><span className='mini-header'>What is required from NPCs?</span></Col>
+            </Row>
+            <Row>
+              <Col sm><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></Col>
+            </Row>
+            <Row>
+              <Col sm>&nbsp;</Col>
+            </Row>
             <Row>
               <Col sm><span className='mini-header'>GM Notes</span></Col>
             </Row>

diff --git a/src/components/Message.css b/src/components/Message.css
@@ -0,0 +1,30 @@
+.message {
+    text-align: left;
+    margin-left: 18px;
+}
+
+h1.message {
+    color: #4fa129;
+}
+
+.message .caption{
+    font-weight: bold;
+}
+
+.message .row-mini-header {
+    margin-top: 15px;
+}
+
+.message .mini-header {
+    font-weight: 600;
+    color: #4fa129;
+    font-size: 20px;
+}
+
+.message a {
+    color: #4fa129 !important;
+}
+
+.message .new {
+    color: #da3e00;
+}
diff --git a/src/components/Messages.css b/src/components/Messages.css
@@ -0,0 +1,8 @@
+.messages {
+    text-align: left;
+    margin-top: 20px;
+    margin-left: 18px;
+}
+.messages h1 {
+    color: #4fa129;
+}
diff --git a/src/components/Messages.js b/src/components/Messages.js
@@ -0,0 +1,45 @@
+import { Container, Row, Col } from "react-bootstrap";
+import './Messages.css';
+import './Message.css';
+
+export default function Messages() {
+    return (
+      <div>
+        <h1 className='message' id="app-title">Messages [CREATE NEW MESSAGE BUTTON]</h1>
+        <div className='message'>
+          <Container fluid className='message'>
+            <Row className='row-mini-header'>
+              <Col sm><span className='mini-header'>Basic Info</span></Col>
+            </Row>
+            <Row>
+              <Col sm={6}><span className='caption'>Happens after jump: </span>- / 3 / 13 (Editable unless event is locked)</Col>
+            </Row>
+            <Row>
+              <Col sm={6}><span className='caption'>Message type: </span>Event / EVA / Hints for Scientists / Jump / Warning / Fleet Comms / Fleet Secretary / News</Col>
+            </Row>
+            <Row>
+              <Col sm>&nbsp;</Col>
+            </Row>
+            <Row>
+              <Col sm><span className='mini-header'>Message</span></Col>
+            </Row>
+            <Row>
+              <Col sm><span> Copy pasted stuff which we don't need to write many times. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></Col>
+            </Row>
+            <Row>
+              <Col sm>&nbsp;</Col>
+            </Row>
+            <Row>
+              <Col sm><span className='mini-header'>GM Notes</span></Col>
+            </Row>
+            <Row>
+              <Col sm><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></Col>
+            </Row>
+            <Row>
+              <Col sm>&nbsp;</Col>
+            </Row>
+          </Container>
+        </div>
+      </div>
+    )
+  }
diff --git a/src/components/Plots.js b/src/components/Plots.js
@@ -5,7 +5,7 @@ import './Plot.css';
 export default function Plots() {
     return (
       <div>
-        <h1 className='plot' id="app-title">Plot Name</h1>
+        <h1 className='plot' id="app-title">Plot Name (MAIN PLOTS)</h1>
         <div className='plot'>
           <Container fluid className='plot'>
             <Row>
@@ -29,7 +29,7 @@ export default function Plots() {
             </Row>
             <Row>
               <Col sm={6}><span className='caption'>Happens after jump: </span>- / 3 / 13</Col>
-              <Col sm={4}><span className='caption'>Info3: </span>Lorem Ipsum</Col>
+              <Col sm={4}><span className='caption'>Plot Importance: </span>Not necessary / something / Mandatory</Col>
             </Row>
             <Row>
               <Col sm>&nbsp;</Col>
@@ -57,7 +57,7 @@ export default function Plots() {
               <Col sm>&nbsp;</Col>
             </Row>
             <Row>
-              <Col sm><span className='mini-header'>Copied from characters</span></Col>
+              <Col sm><span className='mini-header'>Copied from characters (optional)</span></Col>
             </Row>
             <Row>
               <Col sm><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></Col>

diff --git a/src/components/Ship.js b/src/components/Ship.js
@@ -67,7 +67,7 @@ export default function Ship(props) {
             <Col sm={8}><span className='caption'>Type: </span>{ship.type}</Col>
           </Row>
           <Row>
-            <Col sm><span className='caption'>Description: </span>{ship.description}</Col>
+            <Col sm><span className='caption'>Description <span className="new">(check this and add the full description)</span>: </span>{ship.description}</Col>
           </Row>
           <Row>
             <Col sm>&nbsp;</Col>