Skip to content

Commit

Permalink
Empty Epsilon admin view improvements (#24)
Browse files Browse the repository at this point in the history 
* Improve Empty Epsilon admin view

Make the view more compact, and also make it easy to see the relevant
information.

* Show landing pad statuses
  • Loading branch information
@nicou
nicou authored Jun 22, 2024
1 parent b934de8 commit 4d02e62
Show file tree
Hide file tree
Showing 2 changed files with 208 additions and 43 deletions.
248 changes: 208 additions & 40 deletions src/components/EmptyEpsilon.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,12 @@
<b-container fluid>
<b-row>
<b-col>
<h2>Full game state</h2>
<h2>Empty Epsilon state</h2>
<vue-json-pretty :data="gameState" class="ee-state"></vue-json-pretty>
</b-col>
<b-col cols="8">
<div>
<h2>
<b-col cols="9">
<div class="ee-status-container">
<h3>
Connection status:
<span v-if="!shipMetadata.ee_connection_enabled" class="yellow"
>DISABLED</span
Expand All @@ -39,59 +39,67 @@
>HEALTHY</span
>
<span v-else class="red">UNHEALTHY</span>
</h2>
<p v-if="!connectionStatus.isConnectionHealthy" class="red">
</h3>
<p v-if="!connectionStatus.isConnectionHealthy" class="red error-container">
Error: {{ connectionStatus.lastErrorMessage }}
</p>
<b-button
<div class="ee-action-buttons-container">
<b-button
v-if="!shipMetadata.ee_connection_enabled"
variant="success"
size="sm"
@click="toggleConnectionEnabled(true)"
>Enable connection</b-button
>
<b-button
v-else
variant="danger"
size="sm"
@click="toggleConnectionEnabled(false)"
>Disable connection</b-button
>
</div>
<hr />
</div>
<div>
<h2>
</div>
<div class="ee-status-container">
<h3>
State synchronization:
<span v-if="shipMetadata.ee_sync_enabled" class="green"
>ENABLED</span
>
<span v-else class="red">DISABLED</span>
</h2>
</h3>
<div class="ee-action-buttons-container">
<b-button
v-if="!shipMetadata.ee_sync_enabled"
variant="success"
size="sm"
@click="toggleSynchronization(true)"
>Enable state synchronization</b-button
>
<b-button
v-else
variant="danger"
size="sm"
@click="toggleSynchronization(false)"
>Disable state synchronization</b-button
>
<b-button
v-if="!shipMetadata.ee_sync_enabled"
variant="primary"
size="sm"
:disabled="isPushGameStatePending"
@click="pushFullGameState()"
>{{
isPushGameStatePending
? `${pushGameStateProgress} / 24`
? `${pushGameStateProgress} / 28`
: "Push current state to EE"
}}</b-button
>
}}</b-button>
</div>
<hr />
</div>
<div>
<h2>
<div class="ee-status-container">
<h3>
Ship alert state:
<span
v-if="gameState.general.alertLevel === 'Normal'"
Expand All @@ -109,32 +117,46 @@
>RED ALERT</span
>
<span v-else class="red">UNKNOWN ALERT STATE</span>
</h2>
<b-button variant="success" @click="setAlertState('normal')"
</h3>
<div class="ee-action-buttons-container">
<b-button variant="success" @click="setAlertState('normal')" size="sm"
>Normal<span v-if="gameState.general.alertLevel === 'Normal'">
(active)</span
></b-button
>
<b-button variant="warning" @click="setAlertState('yellow')"
<b-button variant="warning" @click="setAlertState('yellow')" size="sm"
>Yellow alert<span
v-if="gameState.general.alertLevel === 'YELLOW ALERT'"
>
(active)</span
></b-button
>
<b-button variant="danger" @click="setAlertState('red')"
<b-button variant="danger" @click="setAlertState('red')" size="sm"
>Red alert<span
v-if="gameState.general.alertLevel === 'RED ALERT'"
>
(active)</span
></b-button
>
</div>
<hr />
</div>
<div class="ee-status-container">
<h3>Landing pad statuses</h3>
<!-- For each key/value in gameState.landingPads print out stuff-->
<div class="landing-pad-container">
<div v-for="([key, value]) in landingPadStatus" :key="key" class="landing-pad-status" :class="getLandingPadClass(value)">
<strong>{{ getLandingPadName(key) }}</strong>
<span>{{ getLandingPadState(value) }}</span>
</div>
</div>
<hr />
</div>
<div>
<h2>Update values</h2>
<div class="ee-status-container">
<h3>Update values</h3>
<b-form>
<b-form-group label="Target type" label-for="selected-type">
<div class="ee-patch-values-form">
<b-form-group label="Target type" label-for="selected-type">
<b-form-select
id="selected-type"
v-model="selectedType"
Expand Down Expand Up @@ -177,25 +199,29 @@
>
</b-input>
</b-form-group>
<b-button variant="primary" @click="setValue()"
>Set value</b-button
>
<div class="form-button-container">
<b-button variant="primary" @click="setValue()" size="md">Set value</b-button>
</div>
</div>
</b-form>
<hr />
</div>
<div>
<h2>Break a task</h2>
<div class="ee-status-container">
<h3>Break a task</h3>
<b-form>
<b-form-group label="Task to break" label-for="selected-type">
<b-form-select
id="selected-type"
v-model="selectedTaskToBreak"
:options="tasksNotBroken"
></b-form-select>
</b-form-group>
<div class="ee-patch-values-form">
<b-form-group label="Task to break" label-for="selected-type">
<b-form-select
id="selected-type"
v-model="selectedTaskToBreak"
:options="tasksNotBroken"
></b-form-select>
</b-form-group>
<div class="form-button-container">
<b-button variant="primary" @click="breakTask()" size="md">Break task</b-button>
</div>
</div>
<p>{{ taskDealtDamage }}</p>
<b-button variant="primary" @click="breakTask()"
>Break task</b-button
>
</b-form>
</div>
</b-col>
Expand Down Expand Up @@ -272,6 +298,13 @@ export default {
(e) => e.type === "ship" && e.id === "ee_metadata",
);
},
landingPadStatus() {
const landingPads = Object.entries(
_.get(this.gameState, "landingPads", {})
);
// Sort by key
return landingPads.sort(([a], [b]) => a.localeCompare(b));
},
shipMetadata() {
return this.$store.state.dataBlobs.find(
(e) => e.type === "ship" && e.id === "metadata",
Expand Down Expand Up @@ -341,7 +374,57 @@ export default {
this.errors.push("" + error);
this.isLoading = false;
});
},
getLandingPadName(key) {
switch (key) {
case "landingPadStatus1": {
return "Fighter 1";
}
case "landingPadStatus2": {
return "Fighter 2";
}
case "landingPadStatus3": {
return "Fighter 3";
}
case "landingPadStatus4": {
return "Starcaller";
}
default: {
return key;
}
}
},
getLandingPadState(value) {
switch (value) {
case 0: {
return "Destroyed";
}
case 1: {
return "Docked";
}
case 2: {
return "Launched";
}
default: {
return String(value) + " (unknown)";
}
}
},
getLandingPadClass(value) {
switch (value) {
case 0: {
return "landing-pad-status-destroyed";
}
case 1: {
return "landing-pad-status-docked";
}
case 2: {
return "landing-pad-status-launched";
}
default: {
return "";
}
}
},
async makeSetValueRequest(data) {
this.isLoading = true;
Expand Down Expand Up @@ -455,6 +538,23 @@ export default {
this.selectedType = "hull";
this.selectedValue = get(this.gameState, "general.shipHullPercent");
await this.setValue();
// And landing pad statuses
const landingPads = Object.entries(
_.get(this.gameState, "landingPads", {}),
);
for (const [pad, value] of landingPads) {
const target = pad.replace("landingPadStatus", "");
await this.makeSetValueRequest({
command: "setLandingPadState",
value,
target,
});
await new Promise((resolve) =>
setTimeout(() => resolve(), DELAY_BETWEEN_REQUESTS),
);
this.pushGameStateProgress = this.pushGameStateProgress + 1;
}
this.pushGameStateProgress = this.pushGameStateProgress + 1;
this.isPushGameStatePending = false;
this.$notify({
Expand Down Expand Up @@ -488,7 +588,9 @@ button {
}
.ee-state {
background: #eee;
padding: 8px;
padding: 12px;
border-radius: 0.25rem;
border: 1px solid #ccc;
}
.vjs-tree {
line-height: 1em;
Expand All @@ -503,4 +605,70 @@ button {
.vjs-tree .vjs-value__number {
color: #1a3199;
}
.form-button-container {
flex: 0 !important;
align-content: flex-end;
padding-bottom: 1rem;
}
.ee-patch-values-form {
display: flex;
flex-direction: row;
// They should all grow!
> * {
flex-grow: 1;
}
> *:not(:last-child) {
margin-right: 0.5rem;
}
}
.ee-action-buttons-container {
position: absolute;
top: 0;
right: 0;
padding-top: 0.5rem;
}
.ee-status-container {
position: relative;
}
.error-container {
font-family: monospace;
background: #ffeeef;
padding: 10px;
}
.landing-pad-container {
display: flex;
flex-direction: row;
}
.landing-pad-status {
border: 1px solid #f00;
padding: 0.5rem;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 0.2rem;
}
.landing-pad-status:not(:last-child) {
margin-right: 0.5rem;
}
.landing-pad-status-destroyed {
border: 1px solid #dc3545;
}
.landing-pad-status-docked {
border: 1px solid #28a745;
}
.landing-pad-status-launched {
border: 1px solid #ffc107;
}
h2 {
margin: auto;
margin-bottom: 1rem;
}
h3 {
padding-top: 0.5rem;
}
</style>
3 changes: 0 additions & 3 deletions src/views/EmptyEpsilon.vue
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
<template>
<div class="about">
<b-container fluid class="my-4">
<h1>Empty Epsilon</h1>
</b-container>
<EmptyEpsilon />
</div>
</template>
Expand Down

0 comments on commit 4d02e62

Please sign in to comment.