mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
Started working on login panel
This commit is contained in:
parent
37a89e4548
commit
c4e484706a
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 MiB |
@ -1,4 +1,5 @@
|
||||
import { LatLng } from "leaflet";
|
||||
import { Coalition } from "./types/types";
|
||||
|
||||
class Airbase {
|
||||
|
||||
@ -63,13 +64,19 @@ export interface ServerRequestOptions {
|
||||
commandHash?: string;
|
||||
}
|
||||
|
||||
export interface SpawnRequestTable {
|
||||
category: string,
|
||||
coalition: string,
|
||||
unit: UnitSpawnTable
|
||||
}
|
||||
|
||||
export interface UnitSpawnTable {
|
||||
unitType: string,
|
||||
location: LatLng,
|
||||
altitude?: number,
|
||||
loadout?: string,
|
||||
skill: string,
|
||||
liveryID: string
|
||||
liveryID: string,
|
||||
altitude: number,
|
||||
loadout: string
|
||||
}
|
||||
|
||||
export interface ObjectIconOptions {
|
||||
@ -225,20 +232,6 @@ export interface UnitBlueprint {
|
||||
unitWhenGrouped?: string;
|
||||
}
|
||||
|
||||
export interface UnitSpawnOptions {
|
||||
roleType: string;
|
||||
name: string;
|
||||
latlng: LatLng;
|
||||
coalition: string;
|
||||
count: number;
|
||||
country: string;
|
||||
skill: string;
|
||||
loadout: LoadoutBlueprint | undefined;
|
||||
airbase: Airbase | undefined;
|
||||
liveryID: string | undefined;
|
||||
altitude: number | undefined;
|
||||
}
|
||||
|
||||
export interface AirbaseOptions {
|
||||
name: string,
|
||||
position: L.LatLng
|
||||
|
||||
@ -11,5 +11,3 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
|
||||
<UI />
|
||||
</React.StrictMode>,
|
||||
)
|
||||
|
||||
//window.onload = setupApp;
|
||||
|
||||
@ -7,7 +7,7 @@ import { BoxSelect } from "./boxselect";
|
||||
//import { Dropdown } from "../controls/dropdown";
|
||||
import { Airbase } from "../mission/airbase";
|
||||
import { Unit } from "../unit/unit";
|
||||
import { bearing, /*createCheckboxOption, createSliderInputOption, createTextInputOption,*/ deg2rad, getGroundElevation, polyContains } from "../other/utils";
|
||||
import { bearing, /*createCheckboxOption, createSliderInputOption, createTextInputOption,*/ deg2rad, getGroundElevation, getUnitCategoryByBlueprint, polyContains } from "../other/utils";
|
||||
import { DestinationPreviewMarker } from "./markers/destinationpreviewmarker";
|
||||
import { TemporaryUnitMarker } from "./markers/temporaryunitmarker";
|
||||
import { ClickableMiniMap } from "./clickableminimap";
|
||||
@ -30,7 +30,7 @@ import './markers/stylesheets/units.css'
|
||||
// Temporary
|
||||
import './theme.css'
|
||||
import { Coalition, MapHiddenTypes, MapOptions } from "../types/types";
|
||||
import { UnitBlueprint } from "../interfaces";
|
||||
import { SpawnRequestTable, UnitBlueprint, UnitSpawnTable } from "../interfaces";
|
||||
|
||||
var hasTouchScreen = false;
|
||||
//if ("maxTouchPoints" in navigator)
|
||||
@ -56,7 +56,7 @@ export class Map extends L.Map {
|
||||
#state: string;
|
||||
#layer: L.TileLayer | L.LayerGroup | null = null;
|
||||
|
||||
#spawningBlueprint: UnitBlueprint | null = null;
|
||||
#spawnRequestTable: SpawnRequestTable | null = null;
|
||||
|
||||
#preventLeftClick: boolean = false;
|
||||
#leftClickTimer: number = 0;
|
||||
@ -292,7 +292,7 @@ export class Map extends L.Map {
|
||||
}
|
||||
|
||||
/* State machine */
|
||||
setState(state: string, options?: { blueprint: UnitBlueprint, coalition: Coalition }) {
|
||||
setState(state: string, options?: { spawnRequestTable: SpawnRequestTable }) {
|
||||
this.#state = state;
|
||||
|
||||
/* Operations to perform if you are NOT in a state */
|
||||
@ -302,9 +302,9 @@ export class Map extends L.Map {
|
||||
|
||||
/* Operations to perform if you ARE in a state */
|
||||
if (this.#state === SPAWN_UNIT) {
|
||||
this.#spawningBlueprint = options?.blueprint ?? null;
|
||||
this.#spawnRequestTable = options?.spawnRequestTable ?? null;
|
||||
this.#spawnCursor?.removeFrom(this);
|
||||
this.#spawnCursor = new TemporaryUnitMarker(new L.LatLng(0, 0), this.#spawningBlueprint?.name ?? "unknown", options?.coalition ?? 'blue');
|
||||
this.#spawnCursor = new TemporaryUnitMarker(new L.LatLng(0, 0), this.#spawnRequestTable?.unit.unitType ?? "unknown", this.#spawnRequestTable?.coalition ?? 'blue');
|
||||
}
|
||||
else if (this.#state === COALITIONAREA_DRAW_POLYGON) {
|
||||
this.#coalitionAreas.push(new CoalitionArea([]));
|
||||
@ -621,12 +621,20 @@ export class Map extends L.Map {
|
||||
this.deselectAllCoalitionAreas();
|
||||
}
|
||||
else if (this.#state === SPAWN_UNIT) {
|
||||
//getApp().getUnitsManager().spawnUnits(
|
||||
// "asd",
|
||||
// [
|
||||
// {}
|
||||
// ]
|
||||
//)
|
||||
if (this.#spawnRequestTable !== null) {
|
||||
const location = this.getMouseCoordinates();
|
||||
getApp().getUnitsManager().spawnUnits(
|
||||
this.#spawnRequestTable.category,
|
||||
[ this.#spawnRequestTable.unit ],
|
||||
this.#spawnRequestTable.coalition,
|
||||
false,
|
||||
undefined,
|
||||
undefined,
|
||||
(hash) => {
|
||||
this.addTemporaryMarker(location, this.#spawnRequestTable?.unit.unitType ?? "unknown", this.#spawnRequestTable?.coalition ?? "blue", hash)
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
else if (this.#state === COALITIONAREA_DRAW_POLYGON) {
|
||||
if (this.getSelectedCoalitionArea()?.getEditing()) {
|
||||
|
||||
@ -452,52 +452,10 @@ export class OlympusApp {
|
||||
});
|
||||
});
|
||||
|
||||
// TODO: move from here in dedicated class
|
||||
document.addEventListener("closeDialog", (ev: CustomEventInit) => {
|
||||
ev.detail._element.closest(".ol-dialog").classList.add("hide");
|
||||
document.getElementById("gray-out")?.classList.toggle("hide", true);
|
||||
});
|
||||
|
||||
/* Try and connect with the Olympus REST server */
|
||||
const loginForm = document.getElementById("authentication-form");
|
||||
if (loginForm instanceof HTMLFormElement) {
|
||||
loginForm.addEventListener("submit", (ev:SubmitEvent) => {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
var hash = sha256.create();
|
||||
const username = (loginForm.querySelector("#username") as HTMLInputElement).value;
|
||||
const password = hash.update((loginForm.querySelector("#password") as HTMLInputElement).value).hex();
|
||||
|
||||
// Update the user credentials
|
||||
this.getServerManager().setCredentials(username, password);
|
||||
|
||||
// Start periodically requesting updates
|
||||
this.getServerManager().startUpdate();
|
||||
|
||||
this.setLoginStatus("connecting");
|
||||
});
|
||||
} else {
|
||||
console.error("Unable to find login form.");
|
||||
}
|
||||
|
||||
/* Temporary */
|
||||
this.getServerManager().setCredentials("admin", "4b8823ed9e5c2392ab4a791913bb8ce41956ea32e308b760eefb97536746dd33");
|
||||
this.getServerManager().startUpdate();
|
||||
|
||||
/* Reload the page, used to mimic a restart of the app */
|
||||
document.addEventListener("reloadPage", () => {
|
||||
location.reload();
|
||||
})
|
||||
|
||||
///* Inject the svgs with the corresponding svg code. This allows to dynamically manipulate the svg, like changing colors */
|
||||
//document.querySelectorAll("[inject-svg]").forEach((el: Element) => {
|
||||
// var img = el as HTMLImageElement;
|
||||
// var isLoaded = img.complete;
|
||||
// if (isLoaded)
|
||||
// SVGInjector(img);
|
||||
// else
|
||||
// img.addEventListener("load", () => { SVGInjector(img); });
|
||||
//})
|
||||
}
|
||||
|
||||
getConfig() {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { LatLng, Point, Polygon } from "leaflet";
|
||||
import * as turf from "@turf/turf";
|
||||
import { UnitDatabase } from "../unit/databases/unitdatabase";
|
||||
import { aircraftDatabase } from "../unit/databases/aircraftdatabase";
|
||||
import { AircraftDatabase, aircraftDatabase } from "../unit/databases/aircraftdatabase";
|
||||
import { helicopterDatabase } from "../unit/databases/helicopterdatabase";
|
||||
import { groundUnitDatabase } from "../unit/databases/groundunitdatabase";
|
||||
//import { Buffer } from "buffer";
|
||||
@ -10,6 +10,7 @@ import { navyUnitDatabase } from "../unit/databases/navyunitdatabase";
|
||||
import { DateAndTime, UnitBlueprint } from "../interfaces";
|
||||
import { Converter } from "usng";
|
||||
import { MGRS } from "../types/types";
|
||||
import { getApp } from "../olympusapp";
|
||||
|
||||
|
||||
export function bearing(lat1: number, lon1: number, lat2: number, lon2: number) {
|
||||
@ -365,20 +366,15 @@ export function getUnitDatabaseByCategory(category: string) {
|
||||
return null;
|
||||
}
|
||||
|
||||
export function getCategoryBlueprintIconSVG(category: string, unitName: string) {
|
||||
|
||||
const path = "/resources/theme/images/buttons/visibility/";
|
||||
|
||||
// We can just send these back okay
|
||||
if (["Aircraft", "Helicopter", "NavyUnit"].includes(category)) return `${path}${category.toLowerCase()}.svg`;
|
||||
|
||||
// Return if not a ground units as it's therefore something we don't recognise
|
||||
if (category !== "GroundUnit") return false;
|
||||
|
||||
/** We need to get the unit detail for ground units so we can work out if it's an air defence unit or not **/
|
||||
return GROUND_UNIT_AIR_DEFENCE_REGEX.test(unitName) ? `${path}groundunit-sam.svg` : `${path}groundunit.svg`;
|
||||
export function getUnitCategoryByBlueprint(blueprint: UnitBlueprint) {
|
||||
for (let database of [getApp()?.getAircraftDatabase(), getApp()?.getHelicopterDatabase(), getApp()?.getGroundUnitDatabase(), getApp()?.getNavyUnitDatabase()]) {
|
||||
if (blueprint.name in database.blueprints)
|
||||
return database.getCategory();
|
||||
}
|
||||
return "unknown";
|
||||
}
|
||||
|
||||
|
||||
export function base64ToBytes(base64: string) {
|
||||
//return Buffer.from(base64, 'base64').buffer;
|
||||
}
|
||||
@ -477,4 +473,4 @@ export function getWikipediaEntry(search: string, callback: CallableFunction) {
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
}
|
||||
}
|
||||
@ -5,8 +5,6 @@ import React from "react";
|
||||
export function OlButtonGroup(props: {
|
||||
children?: JSX.Element | JSX.Element[]
|
||||
}) {
|
||||
|
||||
|
||||
return <div className="inline-flex rounded-md shadow-sm" >
|
||||
{props.children}
|
||||
</div>
|
||||
|
||||
11
frontend/react/src/ui/modals/components/modal.tsx
Normal file
11
frontend/react/src/ui/modals/components/modal.tsx
Normal file
@ -0,0 +1,11 @@
|
||||
import React from 'react'
|
||||
|
||||
export function Modal(props: {
|
||||
grayout?: boolean,
|
||||
children?: JSX.Element | JSX.Element[],
|
||||
className?: string
|
||||
}) {
|
||||
return <div className={props.className + " fixed top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] z-ui-2 rounded-xl border-solid border-[1px] border-gray-500"}>
|
||||
{props.children}
|
||||
</div>
|
||||
}
|
||||
69
frontend/react/src/ui/modals/login.tsx
Normal file
69
frontend/react/src/ui/modals/login.tsx
Normal file
@ -0,0 +1,69 @@
|
||||
import React, { useState } from 'react'
|
||||
import { Modal } from './components/modal'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { faArrowRight, faCheckCircle, faExternalLink, faLink, faUnlink } from '@fortawesome/free-solid-svg-icons'
|
||||
import { VERSION, connectedToServer } from '../../olympusapp'
|
||||
|
||||
export function LoginModal(props: {
|
||||
checkingPassword: boolean,
|
||||
loginError: boolean,
|
||||
onLogin: (password: string) => void
|
||||
}) {
|
||||
const [password, setPassword] = useState("");
|
||||
|
||||
return <Modal className="h-[70%] w-[70%] overflow-hidden bg-olympus-800 flex">
|
||||
<img src="/resources/theme/images/splash/1.jpg" className="w-full opacity-10 contents-center" />
|
||||
<div className="absolute p-24 w-full flex h-full">
|
||||
<div className="flex flex-col gap-5 w-[40%] h-full content-center justify-center">
|
||||
{
|
||||
!props.checkingPassword ?
|
||||
<>
|
||||
<div className="flex flex-col items-start">
|
||||
<div className="pt-1 text-gray-800 dark:text-gray-400 text-xs">Connect to</div>
|
||||
<div className="flex text-gray-800 dark:text-gray-200 text-sm font-extrabold items-center justify-center gap-2"><div data-connected={connectedToServer} className="py-auto text-green-400 data-[connected='true']:dark:bg-green-400 dark:bg-red-500 w-4 h-4 rounded-full"></div> {window.location.toString()} </div>
|
||||
</div>
|
||||
<div className="flex flex-col items-start">
|
||||
<h1 className="text-4xl text-gray-800 dark:text-white font-bold">DCS Olympus</h1>
|
||||
<div className="flex gap-2 mb-2 select-none rounded-sm content-center text-green-700 dark:text-green-400 text-sm"><FontAwesomeIcon icon={faCheckCircle} className="my-auto" />Version {VERSION}</div>
|
||||
</div>
|
||||
{
|
||||
!props.loginError ?
|
||||
<>
|
||||
<div className="flex flex-col items-start">
|
||||
<label className=" text-gray-800 dark:text-white text-md">Password</label>
|
||||
<input type="text" onChange={(ev) => setPassword(ev.currentTarget.value)} className="w-80 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Enter password" required />
|
||||
</div>
|
||||
<div className='flex'>
|
||||
<button type="button" onClick={() => props.onLogin(password)} className="flex contents-center gap-2 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800 rounded-sm">
|
||||
Login <FontAwesomeIcon className="my-auto" icon={faArrowRight} />
|
||||
</button>
|
||||
<button type="button" className="flex contents-center gap-2 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-blue-800 rounded-sm dark:border-gray-600 border-[1px] dark:text-gray-400">
|
||||
View Guide <FontAwesomeIcon className="my-auto" icon={faExternalLink} />
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
:
|
||||
<div>
|
||||
There was an issue connecting you dog cunt
|
||||
</div>
|
||||
}
|
||||
|
||||
<div className="text-gray-500 text-xs">
|
||||
DCS Olympus (the "MATERIAL" or "Software") is provided completely free to users subject to the terms of the CC BY-NC-SA 4.0 Licence except where such terms conflict with this disclaimer, in which case, the terms of this disclaimer shall prevail. Any party making use of the Software in any manner agrees to be bound by the terms set out in the disclaimer. THIS MATERIAL IS NOT MADE OR SUPPORTED BY EAGLE DYNAMICS SA.
|
||||
</div>
|
||||
</>
|
||||
:
|
||||
<div>
|
||||
<svg aria-hidden="true" className="mx-auto w-40 h-full text-gray-200 animate-spin dark:text-gray-600 fill-blue-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor" />
|
||||
<path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill" />
|
||||
</svg>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</Modal >
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
import React from 'react'
|
||||
import { OlRoundStateButton, OlStateButton, OlLockStateButton } from '../components/olstatebutton';
|
||||
import { faLock, faSkull, faCamera, faFlag, faCircle, faLink, faUnlink } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faSkull, faCamera, faFlag, faLink, faUnlink } from '@fortawesome/free-solid-svg-icons';
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { EventsConsumer } from '../../eventscontext';
|
||||
import { StateConsumer } from '../../statecontext';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import React, { useState } from "react";
|
||||
import { Menu } from "./components/menu";
|
||||
import { faHelicopter, faJetFighter, faPlus, faShieldAlt, faShip, faTruck } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faPlus } from '@fortawesome/free-solid-svg-icons';
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import { OlSearchBar } from "../components/olsearchbar";
|
||||
import { OlAccordion } from "../components/olaccordion";
|
||||
@ -9,13 +9,12 @@ import { OlUnitEntryList } from "../components/olunitlistentry";
|
||||
import { UnitSpawnMenu } from "./unitspawnmenu";
|
||||
import { UnitBlueprint } from "../../interfaces";
|
||||
import { olButtonsVisibilityAircraft, olButtonsVisibilityGroundunit, olButtonsVisibilityGroundunitSam, olButtonsVisibilityHelicopter, olButtonsVisibilityNavyunit } from "../components/olicons";
|
||||
import { SPAWN_UNIT } from "../../constants/constants";
|
||||
|
||||
library.add(faPlus);
|
||||
|
||||
function filterUnits(blueprints: {[key: string]: UnitBlueprint}, filterString: string) {
|
||||
function filterUnits(blueprints: { [key: string]: UnitBlueprint }, filterString: string) {
|
||||
var filteredUnits = {};
|
||||
if (blueprints) {
|
||||
if (blueprints) {
|
||||
Object.entries(blueprints).forEach(([key, value]) => {
|
||||
if (value.enabled && (filterString === "" || value.label.includes(filterString)))
|
||||
filteredUnits[key] = value;
|
||||
@ -32,12 +31,6 @@ export function SpawnMenu(props: {
|
||||
var [blueprint, setBlueprint] = useState(null as (null | UnitBlueprint));
|
||||
var [filterString, setFilterString] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
if (!props.open || blueprint !== null) {
|
||||
//getApp()?.getMap()?.setState(SPAWN_UNIT, {name: blueprint?.name ?? '', coalition: 'blue'});
|
||||
}
|
||||
} )
|
||||
|
||||
/* Filter aircrafts, helicopters, and navyunits */
|
||||
const filteredAircraft = filterUnits(getApp()?.getAircraftDatabase()?.blueprints, filterString);
|
||||
const filteredHelicopters = filterUnits(getApp()?.getHelicopterDatabase()?.blueprints, filterString);
|
||||
@ -65,7 +58,7 @@ export function SpawnMenu(props: {
|
||||
>
|
||||
<>
|
||||
{(blueprint === null) && <div className="p-5">
|
||||
<OlSearchBar onChange={(ev) => setFilterString(ev.target.value)}/>
|
||||
<OlSearchBar onChange={(ev) => setFilterString(ev.target.value)} />
|
||||
<OlAccordion title={`Aircraft`}>
|
||||
<div className="flex flex-col gap-1 max-h-80 overflow-y-scroll">
|
||||
{Object.keys(filteredAircraft).map((key) => {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useState } from "react";
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { OlUnitSummary } from "../components/olunitsummary";
|
||||
import { OlCoalitionToggle } from "../components/olcoalitiontoggle";
|
||||
import { OlNumberInput } from "../components/olnumberinput";
|
||||
@ -7,6 +7,10 @@ import { OlRangeSlider } from "../components/olrangeslider";
|
||||
import { OlDropdownItem, OlDropdown } from '../components/oldropdown';
|
||||
import { LoadoutBlueprint, UnitBlueprint } from "../../interfaces";
|
||||
import { Coalition } from "../../types/types";
|
||||
import { getApp } from "../../olympusapp";
|
||||
import { IDLE, SPAWN_UNIT } from "../../constants/constants";
|
||||
import { ftToM, getUnitCategoryByBlueprint } from "../../other/utils";
|
||||
import { LatLng } from "leaflet";
|
||||
|
||||
export function UnitSpawnMenu(props: {
|
||||
blueprint: UnitBlueprint
|
||||
@ -26,6 +30,30 @@ export function UnitSpawnMenu(props: {
|
||||
var [spawnAltitude, setSpawnAltitude] = useState((maxAltitude - minAltitude) / 2);
|
||||
var [spawnAltitudeType, setSpawnAltitudeType] = useState(false);
|
||||
|
||||
/* When the menu is opened show the unit preview on the map as a cursor */
|
||||
useEffect(() => {
|
||||
if (props.blueprint !== null) {
|
||||
getApp()?.getMap()?.setState(SPAWN_UNIT, {
|
||||
spawnRequestTable: {
|
||||
category: getUnitCategoryByBlueprint(props.blueprint),
|
||||
unit: {
|
||||
unitType: props.blueprint.name,
|
||||
location: new LatLng(0, 0), // This will be filled when the user clicks on the map to spawn the unit
|
||||
skill: "High",
|
||||
liveryID: "",
|
||||
altitude: ftToM(spawnAltitude),
|
||||
loadout: props.blueprint.loadouts?.find((loadout) => { return loadout.name === spawnLoadoutName})?.code ?? ""
|
||||
},
|
||||
coalition: 'blue'
|
||||
}
|
||||
});
|
||||
}
|
||||
else {
|
||||
if (getApp()?.getMap()?.getState() === SPAWN_UNIT)
|
||||
getApp()?.getMap()?.setState(IDLE);
|
||||
}
|
||||
})
|
||||
|
||||
/* Get a list of all the roles */
|
||||
const roles: string[] = [];
|
||||
(props.blueprint as UnitBlueprint).loadouts?.forEach((loadout) => {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import React, { useState } from 'react'
|
||||
import './ui.css'
|
||||
|
||||
import { EventsProvider } from '../eventscontext'
|
||||
@ -11,8 +11,10 @@ import { MainMenu } from './panels/mainmenu'
|
||||
import { SideBar } from './panels/sidebar';
|
||||
import { Options } from './panels/options';
|
||||
import { MapHiddenTypes, MapOptions } from '../types/types'
|
||||
import { MAP_HIDDEN_TYPES_DEFAULTS, MAP_OPTIONS_DEFAULTS } from '../constants/constants'
|
||||
import { BLUE_COMMANDER, GAME_MASTER, MAP_HIDDEN_TYPES_DEFAULTS, MAP_OPTIONS_DEFAULTS, RED_COMMANDER } from '../constants/constants'
|
||||
import { getApp, setupApp } from '../olympusapp'
|
||||
import { LoginModal } from './modals/login'
|
||||
import { sha256 } from 'js-sha256'
|
||||
|
||||
export type OlympusState = {
|
||||
mainMenuVisible: boolean,
|
||||
@ -34,6 +36,9 @@ export function UI() {
|
||||
var [optionsMenuVisible, setOptionsMenuVisible] = useState(false);
|
||||
var [mapHiddenTypes, setMapHiddenTypes] = useState(MAP_HIDDEN_TYPES_DEFAULTS);
|
||||
var [mapOptions, setMapOptions] = useState(MAP_OPTIONS_DEFAULTS);
|
||||
var [checkingPassword, setCheckingPassword] = useState(false);
|
||||
var [loginError, setLoginError] = useState(false);
|
||||
var [commandMode, setCommandMode] = useState(null as null | string);
|
||||
|
||||
document.addEventListener("hiddenTypesChanged", (ev) => {
|
||||
setMapHiddenTypes({ ...getApp().getMap().getHiddenTypes() });
|
||||
@ -52,6 +57,21 @@ export function UI() {
|
||||
setOptionsMenuVisible(false);
|
||||
}
|
||||
|
||||
function checkPassword(password: string) {
|
||||
setCheckingPassword(true);
|
||||
var hash = sha256.create();
|
||||
getApp().getServerManager().setCredentials("no-username", hash.update(password).hex());
|
||||
getApp().getServerManager().getMission((response) => {
|
||||
const commandMode = response.mission.commandModeOptions.commandMode;
|
||||
try {
|
||||
[GAME_MASTER, BLUE_COMMANDER, RED_COMMANDER].includes(commandMode) ? setCommandMode(commandMode) : setLoginError(true);
|
||||
} catch {
|
||||
setLoginError(true);
|
||||
}
|
||||
setCheckingPassword(false);
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="absolute top-0 left-0 h-screen w-screen font-sans overflow-hidden" onLoad={setupApp}>
|
||||
<StateProvider value={{
|
||||
@ -83,10 +103,24 @@ export function UI() {
|
||||
<div className='absolute top-0 left-0 h-full w-full flex flex-col'>
|
||||
<Header />
|
||||
<div className='flex h-full'>
|
||||
<LoginModal
|
||||
onLogin={(password) => { checkPassword(password) }}
|
||||
checkingPassword={checkingPassword}
|
||||
loginError={loginError}
|
||||
/>
|
||||
<SideBar />
|
||||
<MainMenu open={mainMenuVisible} onClose={() => setMainMenuVisible(false)} />
|
||||
<SpawnMenu open={spawnMenuVisible} onClose={() => setSpawnMenuVisible(false)} />
|
||||
<Options open={optionsMenuVisible} onClose={() => setOptionsMenuVisible(false)} />
|
||||
<MainMenu
|
||||
open={mainMenuVisible}
|
||||
onClose={() => setMainMenuVisible(false)}
|
||||
/>
|
||||
<SpawnMenu
|
||||
open={spawnMenuVisible}
|
||||
onClose={() => setSpawnMenuVisible(false)}
|
||||
/>
|
||||
<Options
|
||||
open={optionsMenuVisible}
|
||||
onClose={() => setOptionsMenuVisible(false)}
|
||||
/>
|
||||
<UnitControlMenu />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -500,14 +500,16 @@ module.exports = function (configLocation) {
|
||||
var auth = req.get("Authorization");
|
||||
if (auth) {
|
||||
var username = Buffer.from(auth.replace("Basic ", ""), 'base64').toString('binary').split(":")[0];
|
||||
switch (username) {
|
||||
case "admin":
|
||||
var password = Buffer.from(auth.replace("Basic ", ""), 'base64').toString('binary').split(":")[1];
|
||||
console.log(password)
|
||||
switch (password) {
|
||||
case "8c6976e5b5410415bde908bd4dee15dfb167a9c873fc4bb8a81f6f2ab448a918":
|
||||
ret.mission.commandModeOptions.commandMode = "Game master";
|
||||
break
|
||||
case "blue":
|
||||
case "16477688c0e00699c6cfa4497a3612d7e83c532062b64b250fed8908128ed548":
|
||||
ret.mission.commandModeOptions.commandMode = "Blue commander";
|
||||
break;
|
||||
case "red":
|
||||
case "b1f51a511f1da0cd348b8f8598db32e61cb963e5fc69e2b41485bf99590ed75a":
|
||||
ret.mission.commandModeOptions.commandMode = "Red commander";
|
||||
break;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user