Moved the replay page into a popup and added a button on the Navbar t…

…o open it

package.json

@@ -24,6 +24,7 @@
  "react-router": "^6.4.2",
  "react-router-dom": "^6.4.3",
  "react-scripts": "5.0.1",
+ "reactjs-popup": "^2.0.6",
  "web-vitals": "^2.1.4"
  },
  "scripts": {

src/App.jsx

@@ -24,19 +24,19 @@ function App() {
  // Current pageS
  return (
  <div id="App">
- <Navbar version={status.version} org={status.org} status={status.status}>
+ <Navbar websocketRef={websocketRef} version={status.version} org={status.org} status={status.status} replayStatus = {replayStatus}>
  <NavLink
  className={({ isActive }) => (isActive ? "link-active" : "link")}
  to="/"
  >
  Home
  </NavLink>
- <NavLink
+ {/*<NavLink
  to="/replays"
  className={({ isActive }) => (isActive ? "link-active" : "link")}
  >
  Replays
- </NavLink>
+ </NavLink>*/}
  <NavLink to="/Map"
  className={({ isActive }) => (isActive ? "link-active" : "link")}
  >Map</NavLink>

src/components/nav/Navbar.jsx

@@ -6,8 +6,9 @@ import MissionTimer from "./MissionTimer";
 
 // Utils
 import { clear_telemetry } from "../../utils/storage";
+import ReplayPopup from "../replay/ReplayPopup";
 
-export default function Navbar({ version, org, status, children }) {
+export default function Navbar({ websocketRef, version, org, status, replayStatus, children }) {
  // Convert connection status
  const connection = status.rn2483_radio.connected
  ? "connected"
@@ -41,6 +42,7 @@ export default function Navbar({ version, org, status, children }) {
  <p id="connection-status" className={connection}>
  {connection}
  </p>
+ <ReplayPopup status={replayStatus} websocketRef={websocketRef} />
  </div>
  <div id="nav-links">{children}</div>
  </nav>

src/components/replay/ReplayPopup.css

@@ -0,0 +1,44 @@
+.replay-button {
+ text-transform: uppercase;
+ color: var(--primary);
+ height: max-content;
+ border-radius: 4rem;
+ padding: 0.2rem 0.3rem;
+ margin-left: 0.5rem;
+
+ font-size: 0.5rem;
+ font-weight: 600;
+ cursor: pointer;
+}
+
+#stopped {
+ background-color: rgb(181, 0, 0);
+}
+
+#playing {
+ background-color: rgb(0, 132, 0);
+}
+
+.replay-popup {
+ background-color: var(--primary);
+ padding: 1rem;
+ border-style: solid;
+ border-radius: 0.25rem;
+ width: 20rem;
+}
+.replay-popup-titlebar {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.replay-popup-titlebar button {
+ font-size: 1rem;
+ background-color: var(--primary);
+ color: var(--secondary);
+ cursor: pointer;
+}
+
+.replay-popup-titlebar button:hover {
+ background-color: #3d3d3d;
+}

src/components/replay/ReplayPopup.jsx

@@ -0,0 +1,49 @@
+import { useState } from 'react';
+import { useKey } from "../../hooks/useKey";
+import Popup from "reactjs-popup"
+import ReplayItem from "./ReplayItem";
+import "./ReplayPopup.css";
+
+export default function ReplayPopup({status, websocketRef}) {
+ console.log(status)
+ // Setup list of replays
+ let replays = <></>;
+ if(status.mission_list != undefined) {
+ replays = status.mission_list.map((mission) => (
+ <ReplayItem name={mission.name} key={mission.key} websocketRef={websocketRef} />
+ ));
+ }
+ // Check if we are currently playing the replay and set the button color accordingly
+ let buttonState = status.status == 1 ? 'playing' : 'stopped';
+
+ // Get the status icon for the replay status
+ let buttonText = "Replay ";
+ if (status.status == 1) {
+ // Playing
+ buttonText += "\u23F5";
+ } else {
+ // Stopped / Finished / No Replay Loaded
+ buttonText += "\u23F9";
+ }
+
+ // Setup open state to have keybind
+ const [open, setOpen] = useState(false);
+ useKey("KeyR", "shift", () => {setOpen(!open)});
+ return (
+ <div>
+ <p className="replay-button" id={buttonState} onClick={() => {setOpen(!open)}}>{buttonText}</p>
+ <Popup open={open} position="center center" modal>
+ <div className="replay-popup">
+ <div className="replay-popup-titlebar">
+ <h2>Replays</h2>
+ <button onClick={() => {setOpen(!open)}}>&times;</button>
+ </div>
+ <hr />
+ <div className="replay-popup-replaylist">
+ {replays}
+ </div>
+ </div>
+ </Popup>
+ </div>
+ );
+}