mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
More wore on components
This commit is contained in:
Pax1601
parent
45e290d656
commit
f18212dac4
@ -4,6 +4,10 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
* {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.z-ui-0 {
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
@ -22,7 +22,7 @@ export function OlAccordion(props) {
|
||||
<h3>
|
||||
<button type="button" onClick={() => setOpen(!open)} className="flex items-center justify-between w-full py-2 font-medium rtl:text-right text-gray-700 border-gray-200 dark:border-gray-700 dark:text-gray-300 gap-3">
|
||||
<span>{props.title}</span>
|
||||
<svg data-open={open} className="w-3 h-3 data-[open='false']:-scale-y-100 shrink-0 transition-transform" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
|
||||
<svg data-open={open} className="w-3 h-3 -rotate-180 data-[open='false']:-rotate-90 shrink-0 transition-transform" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
|
||||
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5 5 1 1 5" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
@ -1,7 +1,10 @@
|
||||
import React, { useState, useId } from "react";
|
||||
import React from "react";
|
||||
|
||||
export function OlCheckbox(props) {
|
||||
const id = useId();
|
||||
|
||||
return <input id={id} onChange={props.onChange} type="checkbox" checked={props.checked} value="" className="w-4 h-4 my-auto text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600" />
|
||||
return <input onChange={props.onChange}
|
||||
type="checkbox"
|
||||
checked={props.checked}
|
||||
value=""
|
||||
className="w-4 h-4 my-auto text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 cursor-pointer"
|
||||
/>
|
||||
}
|
||||
@ -3,7 +3,7 @@ import React from "react";
|
||||
export function OlCoalitionToggle() {
|
||||
return <div className="inline-flex items-center cursor-pointer">
|
||||
<input type="checkbox" value="" className="sr-only peer" />
|
||||
<div className="relative w-14 h-7 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[4px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
|
||||
<div className="relative w-14 h-7 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[4px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-6 after:w-6 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"></div>
|
||||
<span className="ms-3 text-sm font-medium text-gray-900 dark:text-gray-300">Large toggle</span>
|
||||
</div>
|
||||
}
|
||||
@ -1,62 +1,52 @@
|
||||
|
||||
import React, { useId, useState, useEffect, useRef } from "react";
|
||||
import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
|
||||
library.add(faChevronDown, faChevronUp);
|
||||
|
||||
export function OlTextDropdown(props) {
|
||||
var [value, setValue] = useState(props.items[0] ?? "N/A")
|
||||
const buttonId = useId();
|
||||
const dropdownId = useId()
|
||||
|
||||
return <div>
|
||||
<button id={buttonId} data-dropdown-toggle={dropdownId} className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center border-[1px] dark:border-gray-600 dark:text-gray-400 dark:bg-gray-700 dark:hover:bg-gray-800 dark:focus:ring-blue-800" type="button"><FontAwesomeIcon icon={props.leftIcon} className="mr-3" />{value}<svg className="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
|
||||
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 1 4 4 4-4" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div id={dropdownId} className="z-ui-2 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
|
||||
<div className="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby={buttonId}>
|
||||
{props.items.map((item) => {
|
||||
return <OlDropdownItem onClick={() => setValue(item)}>
|
||||
{item}
|
||||
</OlDropdownItem>
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
export function OlElementDropdown(props) {
|
||||
export function OlDropdown(props) {
|
||||
var [open, setOpen] = useState(false);
|
||||
var contentRef = useRef(null);
|
||||
var buttonRef = useRef(null);
|
||||
|
||||
function setPosition(content: HTMLDivElement, button: HTMLButtonElement) {
|
||||
content.style.left = `0px`;
|
||||
content.style.top = `0px`;
|
||||
/* Reset the position of the content */
|
||||
content.style.left = "0px";
|
||||
content.style.top = "0px";
|
||||
content.style.height = "";
|
||||
|
||||
/* Get the position and size of the button and the content elements */
|
||||
var [cxl, cyt, cxr, cyb, cw, ch] = [content.getBoundingClientRect().x, content.getBoundingClientRect().y, content.getBoundingClientRect().x + content.clientWidth, content.getBoundingClientRect().y + content.clientHeight, content.clientWidth, content.clientHeight];
|
||||
var [bxl, byt, bxr, byb, bbw, bh] = [button.getBoundingClientRect().x, button.getBoundingClientRect().y, button.getBoundingClientRect().x + button.clientWidth, button.getBoundingClientRect().y + button.clientHeight, button.clientWidth, button.clientHeight];
|
||||
|
||||
|
||||
/* Limit the maximum height */
|
||||
if (ch > 400) {
|
||||
ch = 400;
|
||||
content.style.height = `${ch}px`;
|
||||
}
|
||||
|
||||
/* Compute the horizontal position of the center of the button and the content */
|
||||
var cxc = (cxl + cxr) / 2;
|
||||
var bxc = (bxl + bxr) / 2;
|
||||
|
||||
var offsetX = bxc - cxc;
|
||||
var offsetY = byb - cyt;
|
||||
|
||||
/* Compute the x and y offsets needed to align the button and element horizontally, and to put the content below the button */
|
||||
var offsetX = bxc - cxc;
|
||||
var offsetY = byb - cyt + 8;
|
||||
|
||||
/* Compute the new position of the left and right margins of the content */
|
||||
cxl += offsetX;
|
||||
cxr += offsetX;
|
||||
cyb += offsetY;
|
||||
|
||||
/* Try and move the content so it is inside the screen */
|
||||
if (cxl < 0)
|
||||
offsetX -= cxl;
|
||||
if (cxr > window.innerWidth)
|
||||
offsetX -= (cxr - window.innerWidth)
|
||||
offsetX -= (cxr - window.innerWidth)
|
||||
if (cyb > window.innerHeight)
|
||||
offsetY = -ch - 8;
|
||||
|
||||
/* Apply the offset */
|
||||
content.style.left = `${offsetX}px`
|
||||
content.style.top = `${offsetY + 5}px`
|
||||
content.style.top = `${offsetY}px`
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
@ -65,25 +55,39 @@ export function OlElementDropdown(props) {
|
||||
const button = buttonRef.current as HTMLButtonElement;
|
||||
|
||||
setPosition(content, button);
|
||||
|
||||
/* Register click events to automatically close the dropdown when clicked anywhere outside of it */
|
||||
document.addEventListener('click', function (event) {
|
||||
const target = event.target;
|
||||
if (target && /*!content.contains(target as HTMLElement) &&*/ !button.contains(target as HTMLElement)) {
|
||||
setOpen(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
return <div className="relative">
|
||||
<button ref={buttonRef} onClick={() => {setOpen(!open)}} className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center border-[1px] dark:border-gray-600 dark:text-gray-400 dark:bg-gray-700 dark:hover:bg-gray-800 dark:focus:ring-blue-800" type="button"><FontAwesomeIcon icon={props.leftIcon} className="mr-3" />{props.label}<svg className="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
|
||||
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 1 4 4 4-4" />
|
||||
</svg>
|
||||
|
||||
return <div className={(props.className ?? "") + " relative"}>
|
||||
<button ref={buttonRef} onClick={() => { setOpen(!open) }} className={"w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-2 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center justify-between border-[1px] dark:border-gray-600 dark:text-gray-100 dark:bg-gray-700 dark:hover:bg-gray-800 dark:focus:ring-blue-800"} type="button">
|
||||
{props.leftIcon && <FontAwesomeIcon icon={props.leftIcon} className="mr-3" />}
|
||||
<span className="text-nowrap text-ellipsis overflow-hidden">
|
||||
{props.label}
|
||||
</span>
|
||||
<svg className="flex-none w-2.5 h-2.5 ms-3 data-[open='true']:-scale-y-100 transition-transform ml-auto" data-open={open} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
|
||||
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 1 4 4 4-4" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div ref={contentRef} data-open={open} className="absolute z-ui-2 w-fit data-[open='false']:hidden bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700">
|
||||
<div className="py-2 text-sm text-gray-700 dark:text-gray-200 w-fit">
|
||||
<div ref={contentRef} data-open={open} className="absolute z-ui-2 w-full p-2 data-[open='false']:hidden bg-white divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-700 overflow-y-scroll">
|
||||
<div className="text-sm text-gray-700 dark:text-gray-200 w-full h-fit">
|
||||
{props.children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
/* Conveniency Component for dropdown elements */
|
||||
export function OlDropdownItem(props) {
|
||||
return <div onClick={props.onClick ?? (() => { })} className="px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white flex flex-row content-center gap-2">
|
||||
return <button onClick={props.onClick ?? (() => { })} className={(props.className ?? "") + " px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white flex flex-row content-center rounded-md select-none cursor-pointer"}>
|
||||
{props.children}
|
||||
</div>
|
||||
</button>
|
||||
}
|
||||
@ -3,9 +3,9 @@ import React, { useState } from "react";
|
||||
export function OlLabelToggle(props) {
|
||||
var [toggled, setToggled] = useState(false);
|
||||
|
||||
return <div onClick={() => {setToggled(!toggled)}} className="relative flex flex-row contents-center justify-between w-32 h-10 dark:bg-gray-700 rounded-md py-1 px-1 select-none cursor-pointer">
|
||||
<span data-toggled={toggled} className="absolute my-auto h-8 w-14 bg-blue-500 rounded-md data-[toggled='true']:translate-x-16 transition-transform"></span>
|
||||
<span data-active={!toggled} className="my-auto dark:data-[active='true']:text-white dark:data-[active='false']:text-gray-400 text-thin pl-3 z-ui-2 transition-colors">MSL</span>
|
||||
<span data-active={toggled} className="my-auto dark:data-[active='true']:text-white dark:data-[active='false']:text-gray-400 text-thin pr-3 z-ui-2 transition-colors">AGL</span>
|
||||
</div>
|
||||
return <button onClick={() => {setToggled(!toggled)}} className=" relative flex flex-row flex-none my-auto contents-center justify-between w-32 h-10 border-[1px] dark:border-transparent dark:bg-[#2A3949] rounded-lg py-[5px] px-1 select-none cursor-pointer focus:ring-2 focus:outline-none focus:ring-blue-300 dark:hover:bg-gray-800 dark:focus:ring-blue-800">
|
||||
<span data-toggled={toggled} className="absolute my-auto h-[28px] w-[54px] bg-blue-500 rounded-md data-[toggled='true']:translate-x-16 transition-transform"></span>
|
||||
<span data-active={!toggled} className="my-auto dark:data-[active='true']:text-white font-normal dark:data-[active='false']:text-gray-400 pl-3 z-ui-2 transition-colors">{props.leftLabel}</span>
|
||||
<span data-active={toggled} className="my-auto dark:data-[active='true']:text-white font-normal dark:data-[active='false']:text-gray-400 pr-3 z-ui-2 transition-colors">{props.rightLabel}</span>
|
||||
</button>
|
||||
}
|
||||
@ -3,13 +3,13 @@ import React, {useEffect, useId} from "react";
|
||||
export function OlNumberInput(props) {
|
||||
return <div className="w-fit">
|
||||
<div className="relative flex items-center max-w-[8rem]">
|
||||
<button type="button" className="bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:border-gray-600 hover:bg-gray-200 border border-gray-300 rounded-s-lg p-3 h-9 focus:ring-gray-100 dark:focus:ring-gray-700 focus:ring-2 focus:outline-none">
|
||||
<button type="button" className="bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:border-gray-600 hover:bg-gray-200 border border-gray-300 rounded-s-lg p-3 h-10 focus:ring-gray-100 dark:focus:ring-gray-700 focus:ring-2 focus:outline-none">
|
||||
<svg className="w-3 h-3 text-gray-900 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 2">
|
||||
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M1 1h16"/>
|
||||
</svg>
|
||||
</button>
|
||||
<input type="text" className="bg-gray-50 border-x-0 border-gray-300 h-9 text-center text-gray-900 text-sm focus:ring-blue-500 focus:border-blue-500 block w-full py-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={props.placeHolder} />
|
||||
<button type="button" className="bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:border-gray-600 hover:bg-gray-200 border border-gray-300 rounded-e-lg p-3 h-9 focus:ring-gray-100 dark:focus:ring-gray-700 focus:ring-2 focus:outline-none">
|
||||
<input type="text" className="bg-gray-50 border-x-0 border-gray-300 h-10 text-center text-gray-900 text-sm focus:ring-blue-500 focus:border-blue-500 block w-full py-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={props.placeHolder} />
|
||||
<button type="button" className="bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:border-gray-600 hover:bg-gray-200 border border-gray-300 rounded-e-lg p-3 h-10 focus:ring-gray-100 dark:focus:ring-gray-700 focus:ring-2 focus:outline-none">
|
||||
<svg className="w-3 h-3 text-gray-900 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
|
||||
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 1v16M1 9h16"/>
|
||||
</svg>
|
||||
|
||||
@ -1,7 +1,19 @@
|
||||
import React, { useState } from "react";
|
||||
import React, { useEffect, useRef } from "react";
|
||||
|
||||
export function OlRangeSlider(props) {
|
||||
var elementRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (elementRef.current) {
|
||||
const sliderEl = elementRef.current as HTMLInputElement;
|
||||
const tempSliderValue = Number(sliderEl.value);
|
||||
const progress = (tempSliderValue / Number(sliderEl.max)) * 100;
|
||||
sliderEl.style.background = `linear-gradient(to right, #3F83F8 ${progress}%, #4B5563 ${progress}%)`;
|
||||
}
|
||||
})
|
||||
|
||||
return <input type="range"
|
||||
ref={elementRef}
|
||||
onChange={(ev) => { props.onChange(Number(ev.target?.value ?? props.value)) }}
|
||||
value={props.value}
|
||||
min={props.minValue ?? 0}
|
||||
|
||||
@ -2,8 +2,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
|
||||
import React from "react"
|
||||
|
||||
export function OlStateButton(props) {
|
||||
const className = (props.className ?? '') + ` h-[40px] w-[40px] m-auto border border-gray-900 font-medium rounded-md text-sm ` +
|
||||
`dark:bg-transparent dark:data-[checked='true']:bg-white dark:text-white dark:data-[checked='true']:text-gray-900 dark:border-gray-600 `;
|
||||
const className = (props.className ?? '') + ` h-[40px] w-[40px] flex-none font-medium rounded-md text-sm dark:bg-[#2A3949] dark:data-[checked='true']:bg-blue-500 dark:text-white dark:border-gray-600 `;
|
||||
|
||||
return <button onClick={props.onClick} data-checked={props.checked} type="button" className={className}>
|
||||
<FontAwesomeIcon icon={props.icon} />
|
||||
@ -11,8 +10,7 @@ export function OlStateButton(props) {
|
||||
}
|
||||
|
||||
export function OlRoundStateButton(props) {
|
||||
const className = (props.className ?? '') + ` h-[40px] w-[40px] m-auto border border-gray-900 font-medium rounded-full text-sm ` +
|
||||
`dark:bg-transparent dark:data-[checked='true']:bg-white dark:text-white dark:data-[checked='true']:text-gray-900 dark:border-gray-600 `;
|
||||
const className = (props.className ?? '') + ` h-8 w-8 flex-none m-auto border border-gray-900 font-medium rounded-full text-sm dark:bg-[transparent] dark:data-[checked='true']:bg-white dark:text-white dark:data-[checked='true']:text-gray-900 dark:border-gray-600 `;
|
||||
|
||||
return <button onClick={props.onClick} data-checked={props.checked} type="button" className={className}>
|
||||
<FontAwesomeIcon icon={props.icon} />
|
||||
|
||||
@ -2,7 +2,7 @@ import React from "react";
|
||||
import { UnitBlueprint } from "../../interfaces";
|
||||
|
||||
export function OlUnitSummary(props: {blueprint: UnitBlueprint}) {
|
||||
return <div {...props} className="relative border-l-4 border-blue-600 flex flex-col gap-2 p-2 pt-4 items-start shadow-lg bg-white rounded-md hover:bg-gray-100 dark:bg-gray-700 dark:hover:bg-gray-700">
|
||||
return <div {...props} className="relative border-l-4 border-blue-600 flex flex-col gap-2 p-2 pt-4 items-start shadow-lg bg-white hover:bg-gray-100 dark:bg-[#243141] dark:hover:bg-gray-700">
|
||||
<div className="flex flex-row gap-2 content-center">
|
||||
<img className="object-cover h-8 ml-2 rounded-tl-md rotate-180 invert" src={"images/units/"+props.blueprint.filename} alt="" />
|
||||
<div className="my-auto w-full font-bold tracking-tight text-gray-900 dark:text-white">{props.blueprint.label}</div>
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import React from "react";
|
||||
|
||||
export function Menu(props) {
|
||||
return <div data-open={props.open} className="w-[430px] absolute top-[80px] left-20 z-ui-0 h-screen p-4 overflow-y-auto transition-transform data-[open='false']:-translate-x-full bg-gray-200 dark:bg-gray-800" tabIndex={-1}>
|
||||
<h5 className="w-full inline-flex items-center pb-3 mb-4 border-b-2 dark:border-gray-700 text-base font-semibold text-gray-900 dark:text-gray-400">
|
||||
{props.title}
|
||||
</h5>
|
||||
<button type="button" onClick={props.closeCallback} className="text-gray-900 dark:text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 absolute top-2.5 end-2.5 flex items-center justify-center dark:hover:bg-gray-600 dark:hover:text-white" >
|
||||
return <div data-open={props.open} className="w-[430px] absolute top-[62px] left-16 z-ui-0 h-screen overflow-y-auto transition-transform data-[open='false']:-translate-x-full bg-gray-200 dark:bg-gray-800" tabIndex={-1}>
|
||||
<h5 className="w-full inline-flex items-center pb-3 p-4 shadow-lg dark:border-gray-700 text-base font-semibold text-gray-900 dark:text-gray-400">
|
||||
{props.showBackButton && <FontAwesomeIcon onClick={props.onBackCallback ?? (() => {})} icon={faArrowLeft} className="mr-4 cursor-pointer dark:hover:bg-gray-600 p-2 rounded-md"/>} {props.title}
|
||||
<button type="button" onClick={props.closeCallback} className="text-gray-900 dark:text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 flex items-center justify-center dark:hover:bg-gray-600 dark:hover:text-white ml-auto" >
|
||||
<svg className="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
|
||||
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6" />
|
||||
</svg>
|
||||
<span className="sr-only">Close menu</span>
|
||||
</button>
|
||||
</h5>
|
||||
{props.children}
|
||||
|
||||
</div>
|
||||
}
|
||||
@ -1,30 +1,26 @@
|
||||
import React, { useEffect } from 'react'
|
||||
import { OlRoundStateButton } from '../components/olstatebutton';
|
||||
import { faPlus, faGamepad, faRuler, faPencil, faMap, faLock, faPerson, faBrain, faRobot, faJetFighter, faHelicopter, faShield, faTruck, faShip, faPlaneDeparture, faSkull, faShieldAlt, faGears } from '@fortawesome/free-solid-svg-icons';
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import React from 'react'
|
||||
import { OlRoundStateButton, OlStateButton } from '../components/olstatebutton';
|
||||
import { faLock, faPerson, faBrain, faRobot, faJetFighter, faHelicopter, faShield, faTruck, faShip, faPlaneDeparture, faSkull, faShieldAlt, faCamera } from '@fortawesome/free-solid-svg-icons';
|
||||
import { EventsConsumer } from '../../eventscontext';
|
||||
import { StateConsumer } from '../../statecontext';
|
||||
import { OlDropdownItem, OlElementDropdown, OlTextDropdown } from '../components/oldropdown';
|
||||
import { OlCheckbox } from '../components/olcheckbox';
|
||||
import { MAP_OPTIONS_DEFAULTS, MAP_OPTIONS_TOOLTIPS } from '../../constants/constants';
|
||||
import { OlDropdownItem, OlDropdown } from '../components/oldropdown';
|
||||
import { OlLabelToggle } from '../components/ollabeltoggle';
|
||||
import { getApp } from '../../olympusapp';
|
||||
|
||||
library.add(faPlus, faGamepad, faRuler, faPencil, faMap);
|
||||
|
||||
export function Header(props) {
|
||||
return <StateConsumer>
|
||||
{(appState) =>
|
||||
<EventsConsumer>
|
||||
{(events) =>
|
||||
<nav className="bg-gray-300 border-gray-200 dark:bg-[#171C26] dark:border-gray-700">
|
||||
<div className="max-w-screen flex flex-wrap items-center justify-between p-4 gap-3">
|
||||
<div className="flex flex-row items-center justify-center gap-1">
|
||||
<img src="images/icon.png" className='h-12 p-0 rounded-md mr-2 cursor-pointer' onClick={events.toggleMainMenuVisible}></img>
|
||||
<nav className="flex w-screen h-[66px] bg-gray-300 border-gray-200 dark:bg-[#171C26] dark:border-gray-700 px-3">
|
||||
<div className="w-full max-w-full flex flex-nowrap items-center justify-between gap-3 my-auto">
|
||||
<div className="flex flex-row items-center justify-center gap-1 flex-none">
|
||||
<img src="images/icon.png" className='h-10 w-10 p-0 rounded-md mr-2 cursor-pointer'></img>
|
||||
</div>
|
||||
<div className="ml-auto">
|
||||
<OlRoundStateButton icon={faLock} />
|
||||
</div>
|
||||
<div className="flex flex-row h-fit items-center justify-start gap-1">
|
||||
<div className="flex flex-row h-fit items-center justify-start gap-2">
|
||||
{
|
||||
Object.entries({
|
||||
'human': faPerson,'olympus': faBrain, 'dcs': faRobot
|
||||
@ -38,7 +34,7 @@ export function Header(props) {
|
||||
})
|
||||
}
|
||||
</div>
|
||||
<div className='h-10 w-0 border-l-2 border-gray-500'></div>
|
||||
<div className='h-11 w-0 border-l-[1px] border-gray-700'></div>
|
||||
<div className="flex flex-row h-fit items-center justify-start gap-1">
|
||||
{
|
||||
Object.entries({
|
||||
@ -54,7 +50,7 @@ export function Header(props) {
|
||||
})
|
||||
}
|
||||
</div>
|
||||
<div className='h-10 w-0 border-l-2 border-gray-500'></div>
|
||||
<div className='h-11 w-0 border-l-[1px] border-gray-700'></div>
|
||||
<div className="flex flex-row h-fit items-center justify-start gap-1">
|
||||
<OlRoundStateButton
|
||||
onClick={() => getApp().getMap().setHiddenType( 'blue', !appState.mapHiddenTypes['blue'] )}
|
||||
@ -69,19 +65,12 @@ export function Header(props) {
|
||||
checked={!appState.mapHiddenTypes['neutral']}
|
||||
icon={faShield} className={"!text-gray-500"} />
|
||||
</div>
|
||||
<OlTextDropdown items={["DCS Sat", "DCS Alt"]} leftIcon='fa-solid fa-map' />
|
||||
<OlElementDropdown leftIcon={faGears} label="Options" className="w-80">
|
||||
{Object.keys(MAP_OPTIONS_TOOLTIPS).map((key) => {
|
||||
return <OlDropdownItem>
|
||||
<OlCheckbox
|
||||
checked = {appState.mapOptions[key]}
|
||||
onChange = {(ev) => {
|
||||
getApp().getMap()?.setOption(key, ev.target.checked);
|
||||
}}/>
|
||||
<span className="text-nowrap">{ MAP_OPTIONS_TOOLTIPS[key] }</span>
|
||||
</OlDropdownItem>
|
||||
})}
|
||||
</OlElementDropdown>
|
||||
<OlLabelToggle value={false} leftLabel={"Live"} rightLabel={"Map"}></OlLabelToggle>
|
||||
<OlStateButton icon={faCamera} />
|
||||
<OlDropdown label="DCS Sat" className="w-40">
|
||||
<OlDropdownItem className="w-full">DCS Sat</OlDropdownItem>
|
||||
<OlDropdownItem className="w-full">DCS Alt</OlDropdownItem>
|
||||
</OlDropdown>
|
||||
</div>
|
||||
</nav>
|
||||
}
|
||||
|
||||
@ -7,13 +7,13 @@ import { faGithub } from "@fortawesome/free-brands-svg-icons";
|
||||
|
||||
export function MainMenu(props) {
|
||||
return <Menu {...props} title="DCS Olympus">
|
||||
<div className="flex flex-col gap-2 text-md font-normal font text-gray-900 dark:text-white">
|
||||
<div className="flex flex-col p-5 gap-2 text-md font-normal font text-gray-900 dark:text-white">
|
||||
<div className="flex gap-3 p-1 cursor-pointer select-none hover:bg-gray-900/10 dark:hover:bg-white/10 rounded-sm content-center text-green-700 dark:text-[#8BFF63]"><FontAwesomeIcon icon={faCheckCircle} className="my-auto" />Version {VERSION}</div>
|
||||
<div className="flex gap-3 p-1 cursor-pointer select-none hover:bg-gray-900/10 dark:hover:bg-white/10 rounded-sm content-center"><FontAwesomeIcon icon={faGithub} className="my-auto text-gray-800 dark:text-gray-400" />Overview</div>
|
||||
<div className="flex gap-3 p-1 cursor-pointer select-none hover:bg-gray-900/10 dark:hover:bg-white/10 rounded-sm content-center"><FontAwesomeIcon icon={faFileAlt} className="my-auto text-gray-800 dark:text-gray-400" />User guide</div>
|
||||
<div className="flex gap-3 p-1 cursor-pointer select-none hover:bg-gray-900/10 dark:hover:bg-white/10 rounded-sm content-center"><FontAwesomeIcon icon={faDatabase} className="my-auto text-gray-800 dark:text-gray-400" />Database Manager</div>
|
||||
<div className="flex gap-3 p-1 cursor-pointer select-none hover:bg-gray-900/10 dark:hover:bg-white/10 rounded-sm content-center"><FontAwesomeIcon icon={faFileExport} className="my-auto text-gray-800 dark:text-gray-400" />Export to file</div>
|
||||
<div className="flex gap-3 p-1 cursor-pointer select-none hover:bg-gray-900/10 dark:hover:bg-white/10 rounded-sm content-center"><FontAwesomeIcon icon={faFileImport} className="my-auto text-gray-800 dark:text-gray-400" />Import from file</div>
|
||||
<div className="flex gap-3 p-1 cursor-pointer select-none hover:bg-gray-900/10 dark:hover:bg-white/10 rounded-sm content-center"><FontAwesomeIcon icon={faGithub} className="my-auto w-4 text-gray-800 dark:text-[#435367]" />Overview</div>
|
||||
<div className="flex gap-3 p-1 cursor-pointer select-none hover:bg-gray-900/10 dark:hover:bg-white/10 rounded-sm content-center"><FontAwesomeIcon icon={faFileAlt} className="my-auto w-4 text-gray-800 dark:text-[#435367]" />User guide</div>
|
||||
<div className="flex gap-3 p-1 cursor-pointer select-none hover:bg-gray-900/10 dark:hover:bg-white/10 rounded-sm content-center"><FontAwesomeIcon icon={faDatabase} className="my-auto w-4 text-gray-800 dark:text-[#435367]" />Database Manager</div>
|
||||
<div className="flex gap-3 p-1 cursor-pointer select-none hover:bg-gray-900/10 dark:hover:bg-white/10 rounded-sm content-center"><FontAwesomeIcon icon={faFileExport} className="my-auto w-4 text-gray-800 dark:text-[#435367]" />Export to file</div>
|
||||
<div className="flex gap-3 p-1 cursor-pointer select-none hover:bg-gray-900/10 dark:hover:bg-white/10 rounded-sm content-center"><FontAwesomeIcon icon={faFileImport} className="my-auto w-4 text-gray-800 dark:text-[#435367]" />Import from file</div>
|
||||
</div>
|
||||
</Menu>
|
||||
}
|
||||
@ -1,24 +1,22 @@
|
||||
import React from 'react'
|
||||
import { OlStateButton } from '../components/olstatebutton';
|
||||
import { faPlus, faGamepad, faRuler, faPencil, faMap } from '@fortawesome/free-solid-svg-icons';
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import { faPlus, faGamepad, faRuler, faPencil, faListDots } from '@fortawesome/free-solid-svg-icons';
|
||||
import { EventsConsumer } from '../../eventscontext';
|
||||
import { StateConsumer } from '../../statecontext';
|
||||
|
||||
library.add(faPlus, faGamepad, faRuler, faPencil, faMap);
|
||||
|
||||
export function SideBar(props) {
|
||||
return <StateConsumer>
|
||||
{(appState) =>
|
||||
<EventsConsumer>
|
||||
{(events) =>
|
||||
<nav className="z-ui-1 h-full bg-gray-300 border-gray-200 dark:bg-[#171C26] dark:border-gray-700">
|
||||
<div className="flex flex-wrap items-center justify-center p-4 w-20">
|
||||
<div className="flex flex-col items-center justify-center gap-1">
|
||||
<OlStateButton onClick={events.toggleSpawnMenuVisible} checked={appState.spawnMenuVisible} icon="fa-solid fa-plus"></OlStateButton>
|
||||
<OlStateButton onClick={events.toggleUnitControlMenuVisible} checked={appState.unitControlMenuVisible} icon="fa-solid fa-gamepad"></OlStateButton>
|
||||
<OlStateButton onClick={events.toggleMeasureMenuVisible} checked={appState.measureMenuVisible} icon="fa-solid fa-ruler"></OlStateButton>
|
||||
<OlStateButton onClick={events.toggleDrawingMenuVisible} checked={appState.drawingMenuVisible} icon="fa-solid fa-pencil"></OlStateButton>
|
||||
<div className="flex flex-wrap items-center justify-center p-4 w-16">
|
||||
<div className="flex flex-col items-center justify-center gap-2.5">
|
||||
<OlStateButton onClick={events.toggleMainMenuVisible} checked={appState.mainMenuVisible} icon={faListDots}></OlStateButton>
|
||||
<OlStateButton onClick={events.toggleSpawnMenuVisible} checked={appState.spawnMenuVisible} icon={faPlus}></OlStateButton>
|
||||
<OlStateButton /* onClick={events.toggleUnitControlMenuVisible} checked={appState.unitControlMenuVisible} */ icon={faGamepad}></OlStateButton>
|
||||
<OlStateButton onClick={events.toggleMeasureMenuVisible} checked={appState.measureMenuVisible} icon={faRuler}></OlStateButton>
|
||||
<OlStateButton onClick={events.toggleDrawingMenuVisible} checked={appState.drawingMenuVisible} icon={faPencil}></OlStateButton>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@ -29,8 +29,13 @@ export function SpawnMenu(props) {
|
||||
}
|
||||
});
|
||||
|
||||
return <Menu {...props} title="Spawn menu" titleIcon="fa-solid fa-plus">
|
||||
{!blueprint && <div>
|
||||
return <Menu {...props}
|
||||
title="Spawn menu"
|
||||
titleIcon="fa-solid fa-plus"
|
||||
showBackButton={blueprint !== null}
|
||||
onBackCallback={() => setBlueprint(null)}
|
||||
>
|
||||
{!blueprint && <div className="p-5">
|
||||
<OlSearchBar className="mb-4" />
|
||||
<OlAccordion title="Aircrafts">
|
||||
<div className="flex flex-col gap-1 max-h-80 overflow-y-scroll">
|
||||
|
||||
@ -1,13 +1,63 @@
|
||||
import React from "react";
|
||||
import React, { useState } from "react";
|
||||
import { Menu } from "./components/menu";
|
||||
import { faGamepad } from '@fortawesome/free-solid-svg-icons';
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import { Unit } from "../../unit/unit";
|
||||
|
||||
library.add(faGamepad);
|
||||
|
||||
export function UnitControlMenu(props) {
|
||||
var [open, setOpen] = useState(false);
|
||||
var [selectedUnits, setSelectedUnits] = useState([] as Unit[]);
|
||||
|
||||
return <Menu {...props} title="Unit control menu" titleIcon="fa-solid fa-gamepad">
|
||||
document.addEventListener("unitsSelection", (ev: CustomEventInit) => {
|
||||
setOpen(true);
|
||||
setSelectedUnits(ev.detail as Unit[])
|
||||
})
|
||||
|
||||
document.addEventListener("unitDeselection", (ev: CustomEventInit) => {
|
||||
|
||||
})
|
||||
|
||||
document.addEventListener("clearSelection", () => {
|
||||
setOpen(false);
|
||||
setSelectedUnits([])
|
||||
})
|
||||
|
||||
var unitOccurences = {
|
||||
blue: {},
|
||||
red: {},
|
||||
neutral: {}
|
||||
}
|
||||
|
||||
selectedUnits.forEach((unit) => {
|
||||
if (!(unit.getName() in unitOccurences[unit.getCoalition()]))
|
||||
unitOccurences[unit.getCoalition()][unit.getName()] = 1;
|
||||
else
|
||||
unitOccurences[unit.getCoalition()][unit.getName()]++;
|
||||
})
|
||||
|
||||
return <Menu open={open} title="Unit control menu" titleIcon="fa-solid fa-gamepad">
|
||||
<div className="dark:bg-[#243141] h-fit p-0 flex flex-col gap-0">
|
||||
{
|
||||
<>
|
||||
{
|
||||
['blue', 'red', 'neutral'].map((coalition) => {
|
||||
return Object.keys(unitOccurences[coalition]).map((name) => {
|
||||
return <div data-coalition={coalition} className="flex justify-between content-center border-l-4 data-[coalition='blue']:border-blue-500 data-[coalition='neutral']:border-gray-500 data-[coalition='red']:border-red-500 p-2">
|
||||
<span className="dark:text-gray-300 text-sm font-medium my-auto">
|
||||
{name}
|
||||
</span>
|
||||
<span className="dark:text-gray-500 text-sm my-auto">
|
||||
x{unitOccurences[coalition][name]}
|
||||
</span>
|
||||
</div>
|
||||
})
|
||||
})
|
||||
}
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
|
||||
</Menu>
|
||||
}
|
||||
@ -1,28 +1,94 @@
|
||||
import React, {useState} from "react";
|
||||
import React, { useState } from "react";
|
||||
import { OlUnitSummary } from "../components/olunitsummary";
|
||||
import { OlCoalitionToggle } from "../components/olcoalitiontoggle";
|
||||
import { OlNumberInput } from "../components/olnumberinput";
|
||||
import { OlLabelToggle } from "../components/ollabeltoggle";
|
||||
import { OlRangeSlider } from "../components/olrangeslider";
|
||||
import { OlDropdownItem, OlDropdown } from '../components/oldropdown';
|
||||
import { LoadoutBlueprint, UnitBlueprint } from "../../interfaces";
|
||||
|
||||
export function UnitSpawnMenu(props) {
|
||||
var [spawnRole, setSpawnRole] = useState("");
|
||||
var [spawnLoadoutName, setSpawnLoadout] = useState("");
|
||||
var [spawnAltitude, setSpawnAltitude] = useState(1000);
|
||||
|
||||
/* Get a list of all the roles */
|
||||
const roles: string[] = [];
|
||||
(props.blueprint as UnitBlueprint).loadouts?.forEach((loadout) => {
|
||||
loadout.roles.forEach((role) => {
|
||||
!roles.includes(role) && roles.push(role);
|
||||
})
|
||||
})
|
||||
|
||||
/* Initialize the role */
|
||||
spawnRole === "" && roles.length > 0 && setSpawnRole(roles[0]);
|
||||
|
||||
/* Get a list of all the loadouts */
|
||||
const loadouts: LoadoutBlueprint[] = [];
|
||||
(props.blueprint as UnitBlueprint).loadouts?.forEach((loadout) => {
|
||||
loadout.roles.includes(spawnRole) && loadouts.push(loadout);
|
||||
})
|
||||
|
||||
/* Initialize the loadout */
|
||||
spawnLoadoutName === "" && loadouts.length > 0 && setSpawnLoadout(loadouts[0].name)
|
||||
|
||||
const spawnLoadout = props.blueprint.loadouts.find((loadout) => { return loadout.name === spawnLoadoutName; })
|
||||
|
||||
return <div className="flex flex-col gap-3">
|
||||
<OlUnitSummary blueprint={props.blueprint}/>
|
||||
<div className="flex flex-row content-center justify-between w-full">
|
||||
<OlCoalitionToggle />
|
||||
<OlNumberInput placeHolder={1} minValue={1} maxValue={4}/>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex flex-row content-center justify-between">
|
||||
<div className="flex flex-col">
|
||||
<span className="dark: text-white">Altitude</span>
|
||||
<span className="dark:text-blue-500">{`${spawnAltitude} FT`}</span>
|
||||
<OlUnitSummary blueprint={props.blueprint} />
|
||||
<div className="p-5 h-fit flex flex-col gap-2">
|
||||
<div className="flex flex-row content-center justify-between w-full">
|
||||
<OlCoalitionToggle />
|
||||
<OlNumberInput placeHolder={1} minValue={1} maxValue={4} />
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex flex-row content-center justify-between">
|
||||
<div className="flex flex-col">
|
||||
<span className="font-normal dark:text-white">Altitude</span>
|
||||
<span className="dark:text-blue-500">{`${spawnAltitude} FT`}</span>
|
||||
</div>
|
||||
<OlLabelToggle value={false} leftLabel={"AGL"} rightLabel={"ASL"} />
|
||||
</div>
|
||||
<OlLabelToggle />
|
||||
<OlRangeSlider onChange={setSpawnAltitude} value={spawnAltitude} minValue={0} maxValue={30000} step={500} />
|
||||
</div>
|
||||
<OlRangeSlider onChange={setSpawnAltitude} minValue={0} maxValue={30000} step={500}/>
|
||||
<div>
|
||||
<div className="flex flex-row content-center justify-between">
|
||||
<span className="font-normal dark:text-white h-8">Role</span>
|
||||
</div>
|
||||
<OlDropdown label={spawnRole} className="w-full">
|
||||
{
|
||||
roles.map((role) => {
|
||||
return <OlDropdownItem onClick={() => { setSpawnRole(role); setSpawnLoadout(""); }} className="w-full">
|
||||
{role}
|
||||
</OlDropdownItem>
|
||||
})
|
||||
}
|
||||
</OlDropdown>
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex flex-row content-center justify-between">
|
||||
<span className="font-normal dark:text-white h-8">Weapons</span>
|
||||
</div>
|
||||
<OlDropdown label={spawnLoadoutName} className="w-full w-max-full">
|
||||
{
|
||||
loadouts.map((loadout) => {
|
||||
return <OlDropdownItem onClick={() => { setSpawnLoadout(loadout.name) }} className="w-full">
|
||||
<span className="text-left w-full w-max-full text-nowrap text-ellipsis overflow-hidden">
|
||||
{loadout.name}
|
||||
</span>
|
||||
</OlDropdownItem>
|
||||
})
|
||||
}
|
||||
</OlDropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div className="dark:bg-[#243141] h-fit p-4 flex flex-col gap-1">
|
||||
{spawnLoadout && spawnLoadout.items.map((item) => {
|
||||
return <div className="flex gap-2 content-center">
|
||||
<div className="my-auto text-sm rounded-full text-gray-500 dark:bg-[#17212D] px-1.5 py-0.5 text-center">{item.quantity}</div>
|
||||
<div className="my-auto text-sm dark:text-gray-300">{item.name}</div>
|
||||
</div>
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@ -26,4 +26,71 @@
|
||||
/* IE and Edge */
|
||||
scrollbar-width: none;
|
||||
/* Firefox */
|
||||
}
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
/* removing default appearance */
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
/* creating a custom design */
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
border-radius: 15px;
|
||||
/* overflow: hidden; remove this line*/
|
||||
|
||||
/* New additions */
|
||||
height: 6px;
|
||||
background: #4B5563;
|
||||
}
|
||||
|
||||
/* Thumb: webkit */
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
/* removing default appearance */
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
/* creating a custom design */
|
||||
height: 22px;
|
||||
width: 22px;
|
||||
background-color: #4B5563;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #6B7280;
|
||||
|
||||
/* box-shadow: -407px 0 0 400px #4B5563; emove this line */
|
||||
transition: .2s ease-in-out;
|
||||
}
|
||||
|
||||
/* Thumb: Firefox */
|
||||
input[type="range"]::-moz-range-thumb {
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
background-color: #4B5563;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
border: 1px solid #6B7280;
|
||||
|
||||
/* box-shadow: -407px 0 0 400px #4B5563; emove this line */
|
||||
transition: .2s ease-in-out;
|
||||
}
|
||||
|
||||
/* Hover, active & focus Thumb: Webkit */
|
||||
input[type="range"]::-webkit-slider-thumb:hover {
|
||||
box-shadow: 0 0 0 5px #3F83F822
|
||||
}
|
||||
input[type="range"]:active::-webkit-slider-thumb {
|
||||
box-shadow: 0 0 0 7px #3F83F855
|
||||
}
|
||||
input[type="range"]:focus::-webkit-slider-thumb {
|
||||
box-shadow: 0 0 0 7px #3F83F855
|
||||
}
|
||||
|
||||
/* Hover, active & focus Thumb: Firefox */
|
||||
input[type="range"]::-moz-range-thumb:hover {
|
||||
box-shadow: 0 0 0 10px #3F83F822
|
||||
}
|
||||
input[type="range"]:active::-moz-range-thumb {
|
||||
box-shadow: 0 0 0 13px #3F83F855
|
||||
}
|
||||
input[type="range"]:focus::-moz-range-thumb {
|
||||
box-shadow: 0 0 0 13px #3F83F855
|
||||
}
|
||||
@ -12,7 +12,6 @@ import { SideBar } from './panels/sidebar';
|
||||
import { MapHiddenTypes, MapOptions } from '../types/types'
|
||||
import { MAP_HIDDEN_TYPES_DEFAULTS, MAP_OPTIONS_DEFAULTS } from '../constants/constants'
|
||||
import { getApp } from '../olympusapp'
|
||||
import { Dropdown } from 'flowbite'
|
||||
|
||||
export type OlympusState = {
|
||||
mainMenuVisible: boolean,
|
||||
|
||||
@ -139,6 +139,7 @@ module.exports = function (configLocation) {
|
||||
DEMO_UNIT_DATA[idx].position.lat += idx / 100;
|
||||
DEMO_UNIT_DATA[idx].category = "Aircraft";
|
||||
DEMO_UNIT_DATA[idx].isLeader = false;
|
||||
DEMO_UNIT_DATA[idx].coalition = 1;
|
||||
|
||||
idx += 1;
|
||||
DEMO_UNIT_DATA[idx] = JSON.parse(JSON.stringify(baseData));
|
||||
|
||||
@ -26,7 +26,6 @@
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
|
||||
.unit-list-unit:nth-of-type(even) {
|
||||
background:#ffffff10;
|
||||
overflow:visible;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user