Skip to content

Commit

Permalink
Improve website UI and add details about algorithm steps
Browse files Browse the repository at this point in the history
  • Loading branch information
@joelverhagen
joelverhagen committed Jan 18, 2024
1 parent 6032bc1 commit 0f0be0c
Show file tree
Hide file tree
Showing 5 changed files with 285 additions and 83 deletions.
35 changes: 35 additions & 0 deletions src/vue/src/components/AlgorithmStep.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<template>
<span v-if="showAsOption">Use </span>
<span class="badge" :title="shortDescription" :class="class">{{ text }}</span>
<span v-if="showAsOption"> ({{ shortDescription }})</span>
</template>

<script lang="ts">
export default {
props: {
class: {
type: String,
required: true,
},
text: {
type: String,
required: true,
},
shortDescription: {
type: String,
required: true,
},
longDescription: {
type: String,
required: true,
},
type: {
type: String,
},
showAsOption: {
type: Boolean,
default: false,
},
}
}
</script>
73 changes: 28 additions & 45 deletions src/vue/src/components/OilFieldPlanView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,18 @@
<thead>
<tr>
<th scope="col">Rank</th>
<th scope="col">Plan</th>
<th v-if="plan.data.request.addBeacons" scope="col">Beacon effect count ⏬</th>
<th v-if="plan.data.request.addBeacons" scope="col">Beacon count ⏫</th>
<th scope="col">Pipe count ⏫</th>
<th scope="col"
title="The pipe, optimization, and beacon strategies used for generating the plan, in order of execution.">
Plan</th>
<th v-if="plan.data.request.addBeacons" scope="col"
title="A higher beacon effect count is preferred (more pump bonuses).">Beacon effect count 📈</th>
<th v-if="plan.data.request.addBeacons" scope="col"
title="A lower beacon effect count is preferred (less power consumption).">Beacon
count 📉</th>
<th scope="col" title="A lower pipe count is preferred (better fluid flow).">Pipe count 📉</th>
<th v-if="plan.data.request.useUndergroundPipes" scope="col"
title="The number of pipes uses before stretches of pipes are replaced with underground pipes. Not used for prioritizing plans.">
Pipe count (w/o underground)</th>
</tr>
</thead>
<tbody class="table-group-divider">
Expand All @@ -34,12 +42,13 @@
<td>
<template v-for="(s, i) of p.steps">
<span v-if="i > 0">➡️</span>
<span class="badge" :class="s.class">{{ s.text }} </span>
<AlgorithmStep v-bind="s" />
</template>
</td>
<td v-if="plan.data.request.addBeacons">{{ p.beaconEffectCount }}</td>
<td v-if="plan.data.request.addBeacons">{{ p.beaconCount }}</td>
<td>{{ p.pipeCount }}</td>
<td v-if="plan.data.request.useUndergroundPipes">{{ p.pipeCountWithoutUnderground }}</td>
</tr>
</tbody>
</table>
Expand All @@ -52,9 +61,11 @@
<script lang="ts">
import clipboard from 'clipboardy';
import { PropType } from 'vue';
import { BeaconStrategy, OilFieldPlan, OilFieldPlanResponse, PipeStrategy } from '../lib/FactorioToolsApi';
import { OilFieldPlan, OilFieldPlanResponse } from '../lib/FactorioToolsApi';
import { ApiResult } from '../lib/OilFieldPlanner';
import CopyButton from './CopyButton.vue';
import AlgorithmStep from './AlgorithmStep.vue';
import { AllSteps, Step, Steps, getBeaconStep, getPipeStep } from '../lib/steps';
interface SelectedOilFieldPlan extends OilFieldPlan {
category: PlanCategory,
Expand All @@ -70,43 +81,6 @@ enum PlanCategory {
Unused,
}
interface Step {
readonly text: string,
readonly class: string,
}
const optimizeStep: Step = { text: "optimize", class: "text-bg-secondary" }
function getPipeStep(pipeStrategy: PipeStrategy): Step {
switch (pipeStrategy) {
case PipeStrategy.FbeOriginal:
return { text: "FBE", class: "text-bg-fbe" };
case PipeStrategy.Fbe:
return { text: "FBE*", class: "text-bg-fbe" };
case PipeStrategy.ConnectedCentersDelaunay:
return { text: "CC-DT", class: "text-bg-primary" };
case PipeStrategy.ConnectedCentersDelaunayMst:
return { text: "CC-DT-MST", class: "text-bg-primary" };
case PipeStrategy.ConnectedCentersFlute:
return { text: "CC-FLUTE", class: "text-bg-primary" };
default:
throw new Error(`unrecognized pipe strategy ${pipeStrategy}`)
}
}
function getBeaconStep(beaconStrategy: BeaconStrategy): Step {
switch (beaconStrategy) {
case BeaconStrategy.FbeOriginal:
return { text: "FBE", class: "text-bg-fbe" };
case BeaconStrategy.Fbe:
return { text: "FBE*", class: "text-bg-fbe" };
case BeaconStrategy.Snug:
return { text: "snug", class: "text-bg-primary" };
default:
throw new Error(`unrecognized beacon strategy ${beaconStrategy}`)
}
}
function initPlan(plan: OilFieldPlan, category: PlanCategory): SelectedOilFieldPlan {
let c: string = ""
switch (category) {
Expand Down Expand Up @@ -161,22 +135,31 @@ export default {
c.steps.push(getPipeStep(c.pipeStrategy))
if (c.optimizePipes) {
c.steps.push(optimizeStep)
c.steps.push(Steps.OptimizeStep)
}
if (c.pipeCount != c.pipeCountWithoutUnderground) {
c.steps.push(Steps.UndergroundPipesStep)
}
if (c.beaconStrategy) {
c.steps.push(getBeaconStep(c.beaconStrategy))
}
if (c.category == PlanCategory.Selected && this.plan.data.request.addElectricPoles) {
c.steps.push(Steps.PolesStep)
}
}
return allPlans;
},
allSteps() {
return AllSteps
}
},
methods: {
async copyBlueprint() {
await clipboard.write(this.plan.data.blueprint);
}
},
components: { CopyButton }
components: { CopyButton, AlgorithmStep }
}
</script>

Expand Down
87 changes: 53 additions & 34 deletions src/vue/src/components/PlannerForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,15 @@
<legend>Planner options</legend>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="use-underground-pipes" v-model="useUndergroundPipes">
<label class="form-check-label" for="use-underground-pipes">Use underground pipes</label>
<label class="form-check-label" for="use-underground-pipes">
<AlgorithmStep v-bind="Steps.UndergroundPipesStep" :show-as-option="true" />
</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="optimize-pipes" v-model="optimizePipes">
<label class="form-check-label" for="optimize-pipes">Optimize pipes</label>
<label class="form-check-label" for="optimize-pipes">
<AlgorithmStep v-bind="Steps.OptimizeStep" :show-as-option="true" />
</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="validate-solution" v-model="validateSolution">
Expand All @@ -26,31 +30,36 @@
<legend>Pipe strategies</legend>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="pipes-fbe-original" v-model="pipeStrategyFbeOriginal">
<label class="form-check-label" for="pipes-fbe-original">Teoxoy's FBE</label> (<a
href="https://github.com/teoxoy/factorio-blueprint-editor/blob/0bec144b8989422f86bce8cea58ef49258c1a88d/packages/editor/src/core/generators/pipe.ts">original
source</a>) without modifications
<label class="form-check-label" for="pipes-fbe-original">
<AlgorithmStep v-bind="Steps.PipeSteps.FbeOriginal" :show-as-option="true" />
</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="pipes-fbe" v-model="pipeStrategyFbe">
<label class="form-check-label" for="pipes-fbe">Teoxoy's FBE</label> with modifications
<label class="form-check-label" for="pipes-fbe">
<AlgorithmStep v-bind="Steps.PipeSteps.Fbe" :show-as-option="true" />
</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="pipes-connected-centers-delaunay"
v-model="pipeStrategyConnectedCentersDelaunay">
<label class="form-check-label" for="pipes-connected-centers-delaunay">Connected centers via Delaunay
triangulation</label>
<label class="form-check-label" for="pipes-connected-centers-delaunay">
<AlgorithmStep v-bind="Steps.PipeSteps.ConnectedCentersDelaunay" :show-as-option="true" />
</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="pipes-connected-centers-delaunay-mst"
v-model="pipeStrategyConnectedCentersDelaunayMst">
<label class="form-check-label" for="pipes-connected-centers-delaunay-mst">Connected centers via Delaunay
triangulation and Prim's MST</label>
<label class="form-check-label" for="pipes-connected-centers-delaunay-mst">
<AlgorithmStep v-bind="Steps.PipeSteps.ConnectedCentersDelaunayMst" :show-as-option="true" />
</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="pipes-connected-centers-flute"
v-model="pipeStrategyConnectedCentersFlute">
<label class="form-check-label" for="pipes-connected-centers-flute">Connected centers via <a
href="https://home.engineering.iastate.edu/~cnchu/flute.html">FLUTE</a></label>
<label class="form-check-label" for="pipes-connected-centers-flute">
<AlgorithmStep v-bind="Steps.PipeSteps.ConnectedCentersFlute" :show-as-option="true" />
</label>
</div>
</fieldset>
<fieldset class="border p-3 mt-3" :disabled="!addBeacons">
Expand All @@ -60,17 +69,21 @@
</legend>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="beacons-fbe-original" v-model="beaconStrategyFbeOriginal">
<label class="form-check-label" for="beacons-fbe-original">Teoxoy's FBE</label> (<a
href="https://github.com/teoxoy/factorio-blueprint-editor/blob/0bec144b8989422f86bce8cea58ef49258c1a88d/packages/editor/src/core/generators/beacon.ts">original
source</a>) without modifications
<label class="form-check-label" for="beacons-fbe-original">
<AlgorithmStep v-bind="Steps.BeaconSteps.FbeOriginal" :show-as-option="true" />
</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="beacons-fbe" v-model="beaconStrategyFbe">
<label class="form-check-label" for="beacons-fbe">Teoxoy's FBE</label> with modifications
<label class="form-check-label" for="beacons-fbe">
<AlgorithmStep v-bind="Steps.BeaconSteps.Fbe" :show-as-option="true" />
</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="beacons-snug" v-model="beaconStrategySnug">
<label class="form-check-label" for="beacons-snug">Snug</label>
<label class="form-check-label" for="beacons-snug">
<AlgorithmStep v-bind="Steps.BeaconSteps.Snug" :show-as-option="true" />
</label>
</div>
</fieldset>
</fieldset>
Expand All @@ -82,6 +95,8 @@ import { storeToRefs } from 'pinia';
import { pick } from '../lib/helpers';
import { useAutoPlanStore } from '../stores/AutoPlanStore';
import { getDefaults, useOilFieldStore } from '../stores/OilFieldStore';
import { Steps } from '../lib/steps';
import AlgorithmStep from './AlgorithmStep.vue';
export default {
props: {
Expand All @@ -93,7 +108,8 @@ export default {
data() {
return Object.assign(
storeToRefs(useAutoPlanStore()),
pick(storeToRefs(useOilFieldStore()),
pick(
storeToRefs(useOilFieldStore()),
'addBeacons',
'useUndergroundPipes',
'useStagingApi',
Expand All @@ -106,31 +122,34 @@ export default {
'pipeStrategyConnectedCentersFlute',
'beaconStrategyFbeOriginal',
'beaconStrategyFbe',
'beaconStrategySnug'));
'beaconStrategySnug'), {
Steps: Steps
});
},
watch: {
showAdvancedOptions: function (newVal: boolean) {
if (!newVal) {
this.reset()
this.reset();
}
}
},
methods: {
reset() {
const defaults = getDefaults()
this.useUndergroundPipes = defaults.useUndergroundPipes
this.useStagingApi = defaults.useStagingApi
this.optimizePipes = defaults.optimizePipes
this.validateSolution = defaults.validateSolution
this.pipeStrategyFbeOriginal = defaults.pipeStrategyFbeOriginal
this.pipeStrategyFbe = defaults.pipeStrategyFbe
this.pipeStrategyConnectedCentersDelaunay = defaults.pipeStrategyConnectedCentersDelaunay
this.pipeStrategyConnectedCentersDelaunayMst = defaults.pipeStrategyConnectedCentersDelaunayMst
this.pipeStrategyConnectedCentersFlute = defaults.pipeStrategyConnectedCentersFlute
this.beaconStrategyFbeOriginal = defaults.beaconStrategyFbeOriginal
this.beaconStrategyFbe = defaults.beaconStrategyFbe
this.beaconStrategySnug = defaults.beaconStrategySnug
const defaults = getDefaults();
this.useUndergroundPipes = defaults.useUndergroundPipes;
this.useStagingApi = defaults.useStagingApi;
this.optimizePipes = defaults.optimizePipes;
this.validateSolution = defaults.validateSolution;
this.pipeStrategyFbeOriginal = defaults.pipeStrategyFbeOriginal;
this.pipeStrategyFbe = defaults.pipeStrategyFbe;
this.pipeStrategyConnectedCentersDelaunay = defaults.pipeStrategyConnectedCentersDelaunay;
this.pipeStrategyConnectedCentersDelaunayMst = defaults.pipeStrategyConnectedCentersDelaunayMst;
this.pipeStrategyConnectedCentersFlute = defaults.pipeStrategyConnectedCentersFlute;
this.beaconStrategyFbeOriginal = defaults.beaconStrategyFbeOriginal;
this.beaconStrategyFbe = defaults.beaconStrategyFbe;
this.beaconStrategySnug = defaults.beaconStrategySnug;
}
}
},
components: { AlgorithmStep }
}
</script>
Loading

0 comments on commit 0f0be0c

Please sign in to comment.