mirror of
https://github.com/Pax1601/DCSOlympus.git
synced 2025-10-29 16:56:34 +00:00
Added ai-formation feature swtich and UI kit stuff.
This commit is contained in:
PeekabooSteam
parent
093ab75e8f
commit
ea17a9f476
@ -3,7 +3,11 @@
|
||||
--active-coalition-color: var(--blue-coalition-color);
|
||||
--background-color-dark: #202831;
|
||||
--background-color-light: #AAA;
|
||||
--border-radius-sm:5px;
|
||||
--border-radius-md:10px;
|
||||
--border-radius-lg:15px;
|
||||
--blue-coalition-color: #247be2;
|
||||
--font-weight-bolder:600;
|
||||
--highlight-color: #FFF5;
|
||||
--neutral-coalition-color: whitesmoke;
|
||||
--neutral-coalition-text: #202831;
|
||||
@ -25,6 +29,29 @@ html {
|
||||
}
|
||||
|
||||
|
||||
button {
|
||||
background-color:var(--background-color-dark);
|
||||
border:1px solid var( --background-color-dark );
|
||||
border-radius: var( --border-radius-sm );
|
||||
color:whitesmoke;
|
||||
cursor:pointer;
|
||||
font-weight: var( --font-weight-bolder );
|
||||
padding:8px;
|
||||
}
|
||||
|
||||
button[disabled="disabled"] {
|
||||
color: var( --highlight-color );
|
||||
cursor:not-allowed;
|
||||
}
|
||||
|
||||
|
||||
.pill {
|
||||
border-radius: var( --border-radius-sm );
|
||||
display:inline-block;
|
||||
padding:6px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ol-panel {
|
||||
background-color: var(--background-color-dark);
|
||||
@ -39,17 +66,17 @@ html {
|
||||
|
||||
|
||||
.ol-panel-list {
|
||||
border-radius: var( --border-radius-sm );
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: fit-content;
|
||||
row-gap: 5px;
|
||||
text-align: center;
|
||||
width: fit-content;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.ol-panel-list .list-item {
|
||||
border-radius: 10px;
|
||||
border-radius: var( --border-radius-md );
|
||||
display:flex;
|
||||
justify-content: space-between;
|
||||
padding: 6px 10px;
|
||||
@ -72,21 +99,33 @@ html {
|
||||
}
|
||||
|
||||
|
||||
.ol-panel-info {
|
||||
.ol-panel-board {
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.ol-panel-info > .panel-section {
|
||||
.ol-panel-board > .panel-section {
|
||||
border-right: 1px solid #555;
|
||||
padding:10px;
|
||||
}
|
||||
|
||||
.ol-panel-info > .panel-section:last-of-type {
|
||||
.ol-panel-board > .panel-section:last-of-type {
|
||||
border-right-width: 0;
|
||||
}
|
||||
|
||||
.ol-panel-board h1, .ol-panel-board h2 {
|
||||
font-size:18px;
|
||||
font-weight: var( --font-weight-bolder );
|
||||
margin: 0;
|
||||
padding:0 0 5px 0;
|
||||
}
|
||||
|
||||
.ol-panel-board h2 {
|
||||
font-size:14px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.highlight-primary {
|
||||
background-color: var(--highlight-color);
|
||||
|
||||
@ -55,6 +55,30 @@
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<div class="section-header">Buttons</div>
|
||||
<section>
|
||||
|
||||
<div class="content">
|
||||
|
||||
<div class="content-header">Buttons</div>
|
||||
<div class="content-body">
|
||||
|
||||
<div class="example">
|
||||
<button>Button enabled</button>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<button disabled="disabled">Button disabled</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<div class="section-header">.ol-panel</div>
|
||||
<section>
|
||||
|
||||
@ -144,22 +168,24 @@
|
||||
|
||||
<div class="content">
|
||||
|
||||
<div class="content-header">.ol-panel > .ol-panel-info</div>
|
||||
<div class="content-header">Panel board</div>
|
||||
|
||||
<div class="content-body">
|
||||
|
||||
<div class="example">
|
||||
|
||||
<div class="ol-panel">
|
||||
<div class="ol-panel-info">
|
||||
<div class="ol-panel-board">
|
||||
<div class="panel-section">
|
||||
Info panel number 1
|
||||
<h1>Unit Callsign</h1>
|
||||
<div class="pill highlight-primary">Airframe</div>
|
||||
<div class="pill highlight-neutral">Group</div>
|
||||
</div>
|
||||
<div class="panel-section">
|
||||
Info panel number 2
|
||||
<h2>Flight data</h2>
|
||||
</div>
|
||||
<div class="panel-section">
|
||||
Info panel number 3
|
||||
<h2>Loadout</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -172,6 +198,7 @@
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
export interface FeatureSwitchInterface {
|
||||
"enabled": boolean,
|
||||
"defaultEnabled": boolean, // default on/off state (if allowed by masterSwitch)
|
||||
"label": string,
|
||||
"masterSwitch": boolean, // on/off regardless of user preference
|
||||
"name": string,
|
||||
"options"?: object,
|
||||
"removeArtifactsIfDisabled"?: boolean
|
||||
@ -8,22 +9,46 @@ export interface FeatureSwitchInterface {
|
||||
|
||||
|
||||
class FeatureSwitch {
|
||||
enabled;
|
||||
|
||||
// From config param
|
||||
defaultEnabled;
|
||||
label;
|
||||
masterSwitch;
|
||||
name;
|
||||
removeArtifactsIfDisabled = true;
|
||||
|
||||
// Self-set
|
||||
userPreference;
|
||||
|
||||
|
||||
constructor( config:FeatureSwitchInterface ) {
|
||||
|
||||
this.enabled = config.enabled;
|
||||
this.label = config.label;
|
||||
this.name = config.name;
|
||||
this.defaultEnabled = config.defaultEnabled;
|
||||
this.label = config.label;
|
||||
this.masterSwitch = config.masterSwitch;
|
||||
this.name = config.name;
|
||||
|
||||
this.userPreference = this.getUserPreference();
|
||||
|
||||
}
|
||||
|
||||
|
||||
getUserPreference() {
|
||||
|
||||
let preferences = JSON.parse( localStorage.getItem( "featureSwitches" ) || "{}" );
|
||||
|
||||
return ( preferences.hasOwnProperty( this.name ) ) ? preferences[ this.name ] : this.defaultEnabled;
|
||||
|
||||
}
|
||||
|
||||
|
||||
isEnabled() {
|
||||
return this.enabled;
|
||||
|
||||
if ( !this.masterSwitch ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return this.userPreference;
|
||||
}
|
||||
|
||||
}
|
||||
@ -33,18 +58,25 @@ export class FeatureSwitches {
|
||||
#featureSwitches:FeatureSwitch[] = [
|
||||
|
||||
new FeatureSwitch({
|
||||
"enabled": false,
|
||||
"defaultEnabled": false,
|
||||
"label": "AIC",
|
||||
"masterSwitch": true,
|
||||
"name": "aic"
|
||||
}),
|
||||
|
||||
new FeatureSwitch({
|
||||
"enabled": false,
|
||||
"defaultEnabled": false,
|
||||
"label": "AI Formations",
|
||||
"masterSwitch": true,
|
||||
"name": "ai-formations",
|
||||
"removeArtifactsIfDisabled": false
|
||||
}),
|
||||
|
||||
new FeatureSwitch({
|
||||
"defaultEnabled": false,
|
||||
"label": "ATC",
|
||||
"name": "atc",
|
||||
"options": {
|
||||
"key": "value"
|
||||
}
|
||||
"masterSwitch": true,
|
||||
"name": "atc"
|
||||
})
|
||||
|
||||
];
|
||||
@ -54,6 +86,8 @@ export class FeatureSwitches {
|
||||
|
||||
this.#removeArtifacts();
|
||||
|
||||
this.savePreferences();
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -67,11 +101,34 @@ export class FeatureSwitches {
|
||||
#removeArtifacts() {
|
||||
|
||||
for ( const featureSwitch of this.#featureSwitches ) {
|
||||
if ( !featureSwitch.isEnabled() && featureSwitch.removeArtifactsIfDisabled !== false ) {
|
||||
document.querySelectorAll( "[data-feature-switch='" + featureSwitch.name + "']" ).forEach( el => el.remove() );
|
||||
if ( !featureSwitch.isEnabled() ) {
|
||||
|
||||
document.querySelectorAll( "[data-feature-switch='" + featureSwitch.name + "']" ).forEach( el => {
|
||||
|
||||
if ( featureSwitch.removeArtifactsIfDisabled === false ) {
|
||||
el.remove();
|
||||
} else {
|
||||
el.classList.add( "hide" );
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
savePreferences() {
|
||||
|
||||
let preferences:any = {};
|
||||
|
||||
for ( const featureSwitch of this.#featureSwitches ) {
|
||||
preferences[ featureSwitch.name ] = featureSwitch.isEnabled();
|
||||
}
|
||||
|
||||
localStorage.setItem( "featureSwitches", JSON.stringify( preferences ) );
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
@ -146,14 +146,6 @@ function requestUpdate() {
|
||||
/* Main update rate = 250ms is minimum time, equal to server update time. */
|
||||
setTimeout(() => requestUpdate(), getConnected() ? 250 : 1000);
|
||||
|
||||
setInterval( () => {
|
||||
/*
|
||||
gtag( "event", "heartbeat", {
|
||||
|
||||
});
|
||||
//*/
|
||||
}, 60000);
|
||||
|
||||
connectionStatusPanel.update(getConnected());
|
||||
}
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
<!-- This is where all the unit selection buttons will be shown-->
|
||||
</div>
|
||||
|
||||
<div id="formation-creation-container">
|
||||
<div id="formation-creation-container" data-feature-switch="ai-formations">
|
||||
<div class="rectangular-button white" id="create-formation"><img src="images\buttons\create.svg">Create formation</div>
|
||||
<div class="rectangular-button white" id="undo-formation"><img src="images\buttons\erase.svg">Undo formation</div>
|
||||
</div>
|
||||
@ -32,8 +32,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="section-label">Formation</div>
|
||||
<div id="formation-buttons-container">
|
||||
<div id="section-label" data-feature-switch="ai-formations">Formation</div>
|
||||
<div id="formation-buttons-container" data-feature-switch="ai-formations">
|
||||
<div class="rectangular-button">Echelon</div>
|
||||
<div class="rectangular-button">Fingertip</div>
|
||||
<div class="rectangular-button">Trail</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user