diff --git a/frontend/react/package.json b/frontend/react/package.json index 5985032f..8fbc7492 100644 --- a/frontend/react/package.json +++ b/frontend/react/package.json @@ -11,6 +11,7 @@ }, "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.5.1", + "@fortawesome/free-brands-svg-icons": "^6.5.2", "@fortawesome/free-solid-svg-icons": "^6.5.1", "@fortawesome/react-fontawesome": "^0.2.0", "@tanem/svg-injector": "^10.1.68", diff --git a/frontend/react/public/images/icon.png b/frontend/react/public/images/icon.png index dc5c994e..9e11ba9c 100644 Binary files a/frontend/react/public/images/icon.png and b/frontend/react/public/images/icon.png differ diff --git a/frontend/react/src/eventscontext.tsx b/frontend/react/src/eventscontext.tsx index 10fb2103..85b267e7 100644 --- a/frontend/react/src/eventscontext.tsx +++ b/frontend/react/src/eventscontext.tsx @@ -1,10 +1,12 @@ import { createContext } from "react"; export const EventsContext = createContext({ + setMainMenuVisible: (e: boolean) => {}, setSpawnMenuVisible: (e: boolean) => {}, setUnitControlMenuVisible: (e: boolean) => {}, setMeasureMenuVisible: (e: boolean) => {}, setDrawingMenuVisible: (e: boolean) => {}, + toggleMainMenuVisible: () => {}, toggleSpawnMenuVisible: () => {}, toggleUnitControlMenuVisible: () => {}, toggleMeasureMenuVisible: () => {}, diff --git a/frontend/react/src/main.tsx b/frontend/react/src/main.tsx index 166e25ef..0fc59e42 100644 --- a/frontend/react/src/main.tsx +++ b/frontend/react/src/main.tsx @@ -1,11 +1,13 @@ /***************** UI *******************/ import React from 'react' import ReactDOM from 'react-dom/client' -import './index.css' import { setupApp } from './olympusapp.js' -import 'flowbite'; import { UI } from './ui.js'; +import './index.css' + +import 'flowbite'; + ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( diff --git a/frontend/react/src/olympusapp.ts b/frontend/react/src/olympusapp.ts index 680af2cc..4019df51 100644 --- a/frontend/react/src/olympusapp.ts +++ b/frontend/react/src/olympusapp.ts @@ -38,7 +38,7 @@ import { navyUnitDatabase } from "./unit/databases/navyunitdatabase"; //import { UnitListPanel } from "./panels/unitlistpanel"; //import { ContextManager } from "./context/contextmanager"; //import { Context } from "./context/context"; -var VERSION = "{{OLYMPUS_VERSION_NUMBER}}"; +export var VERSION = "{{OLYMPUS_VERSION_NUMBER}}"; export class OlympusApp { /* Global data */ diff --git a/frontend/react/src/ui.css b/frontend/react/src/ui.css index 8b137891..e50bf918 100644 --- a/frontend/react/src/ui.css +++ b/frontend/react/src/ui.css @@ -1 +1,11 @@ +/* Hide scrollbar for Chrome, Safari and Opera */ +.no-scrollbar::-webkit-scrollbar { + display: none; +} + +/* Hide scrollbar for IE, Edge and Firefox */ +.no-scrollbar { + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} \ No newline at end of file diff --git a/frontend/react/src/ui.tsx b/frontend/react/src/ui.tsx index d83a71b8..f0b1da6b 100644 --- a/frontend/react/src/ui.tsx +++ b/frontend/react/src/ui.tsx @@ -6,21 +6,25 @@ import { EventsProvider } from './eventscontext' import { StateProvider } from './statecontext' import { SpawnMenu } from './ui/panels/spawnmenu' import { UnitControlMenu } from './ui/panels/unitcontrolmenu' +import { MainMenu } from './ui/panels/mainmenu' export type OlympusState = { + mainMenuVisible: boolean, spawnMenuVisible: boolean, unitControlMenuVisible: boolean, measureMenuVisible: boolean, drawingMenuVisible: boolean } -1 + export function UI(props) { + var [mainMenuVisible, setMainMenuVisible] = useState(false); var [spawnMenuVisible, setSpawnMenuVisible] = useState(false); var [unitControlMenuVisible, setUnitControlMenuVisible] = useState(false); var [measureMenuVisible, setMeasureMenuVisible] = useState(false); var [drawingMenuVisible, setDrawingMenuVisible] = useState(false); function hideAllMenus() { + setMainMenuVisible(false); setSpawnMenuVisible(false); setUnitControlMenuVisible(false); setMeasureMenuVisible(false); @@ -30,6 +34,7 @@ export function UI(props) { return (
{hideAllMenus(); setMainMenuVisible(!mainMenuVisible)}, toggleSpawnMenuVisible: () => {hideAllMenus(); setSpawnMenuVisible(!spawnMenuVisible)}, toggleUnitControlMenuVisible: () => {hideAllMenus(); setUnitControlMenuVisible(!unitControlMenuVisible)}, toggleMeasureMenuVisible: () => {hideAllMenus(); setMeasureMenuVisible(!measureMenuVisible)}, @@ -50,6 +57,7 @@ export function UI(props) {
+ setMainMenuVisible(false)}/> setSpawnMenuVisible(false)}/> setUnitControlMenuVisible(false)}/>
diff --git a/frontend/react/src/ui/components/olaccordion.tsx b/frontend/react/src/ui/components/olaccordion.tsx new file mode 100644 index 00000000..2a976a31 --- /dev/null +++ b/frontend/react/src/ui/components/olaccordion.tsx @@ -0,0 +1,43 @@ +import React, { useId, useEffect, useRef, useState } from "react" + +import 'flowbite'; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faArrowCircleDown, faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons"; + +export function OlAccordion(props) { + var [scrolledUp, setScrolledUp] = useState(true); + var [scrolledDown, setScrolledDown] = useState(false); + + const bodyId = useId(); + const accordionId = useId(); + const headingId = useId(); + + var contentRef = useRef(null); + + useEffect(() => { + contentRef.current && (contentRef.current as HTMLElement).children[0]?.addEventListener('scroll', (e: any) => { + if (e.target.clientHeight < e.target.scrollHeight) { + setScrolledDown(e.target.scrollTop === (e.target.scrollHeight - e.target.offsetHeight)); + setScrolledUp(e.target.scrollTop === 0); + } + }) + }) + + return
+

+ +

+
+
{!scrolledUp && }
+
+ {props.children} +
+
{!scrolledDown && }
+
+
+} \ No newline at end of file diff --git a/frontend/react/src/ui/components/olsearchbar.tsx b/frontend/react/src/ui/components/olsearchbar.tsx new file mode 100644 index 00000000..7eb83366 --- /dev/null +++ b/frontend/react/src/ui/components/olsearchbar.tsx @@ -0,0 +1,23 @@ +import { faMultiply, faSearch } from "@fortawesome/free-solid-svg-icons" +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" +import React, {useId, useRef} from "react" + +export function OlSearchBar(props) { + const searchId = useId(); + const inputRef = useRef(null); + + function resetSearch() { + inputRef.current && ((inputRef.current as HTMLInputElement).value = ''); + } + + return
+ +
+
+ +
+ + +
+
+} \ No newline at end of file diff --git a/frontend/react/src/ui/components/olstatebutton.tsx b/frontend/react/src/ui/components/olstatebutton.tsx index d5056474..e7980a58 100644 --- a/frontend/react/src/ui/components/olstatebutton.tsx +++ b/frontend/react/src/ui/components/olstatebutton.tsx @@ -2,7 +2,10 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" import React from "react" export function OlStateButton(props) { - return } \ No newline at end of file diff --git a/frontend/react/src/ui/panels/components/menu.tsx b/frontend/react/src/ui/panels/components/menu.tsx index 940bf6ac..d383ce8c 100644 --- a/frontend/react/src/ui/panels/components/menu.tsx +++ b/frontend/react/src/ui/panels/components/menu.tsx @@ -11,16 +11,17 @@ export function Menu(props) { props.open ? drawer.show() : drawer.hide(); }) - return
-
- - {props.title} -
+ return
+
+ {props.title} +
+ {props.children} +
} \ No newline at end of file diff --git a/frontend/react/src/ui/panels/header.tsx b/frontend/react/src/ui/panels/header.tsx index e1888a0d..72e6f286 100644 --- a/frontend/react/src/ui/panels/header.tsx +++ b/frontend/react/src/ui/panels/header.tsx @@ -13,9 +13,10 @@ export function Header(props) { {(appState) => {(events) => -