Skip to content

Commit 0f0be0c

Browse files
joelverhagenjoelverhagen
committed
Improve website UI and add details about algorithm steps
1 parent 6032bc1 commit 0f0be0c

File tree

5 files changed

+285
-83
lines changed

5 files changed

+285
-83
lines changed

‎src/vue/src/components/AlgorithmStep.vue

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<template>
2+
<span v-if="showAsOption">Use </span>
3+
<span class="badge" :title="shortDescription" :class="class">{{ text }}</span>
4+
<span v-if="showAsOption"> ({{ shortDescription }})</span>
5+
</template>
6+
7+
<script lang="ts">
8+
export default {
9+
props: {
10+
class: {
11+
type: String,
12+
required: true,
13+
},
14+
text: {
15+
type: String,
16+
required: true,
17+
},
18+
shortDescription: {
19+
type: String,
20+
required: true,
21+
},
22+
longDescription: {
23+
type: String,
24+
required: true,
25+
},
26+
type: {
27+
type: String,
28+
},
29+
showAsOption: {
30+
type: Boolean,
31+
default: false,
32+
},
33+
}
34+
}
35+
</script>

‎src/vue/src/components/OilFieldPlanView.vue

+28-45
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,18 @@
1919
<thead>
2020
<tr>
2121
<th scope="col">Rank</th>
22-
<th scope="col">Plan</th>
23-
<th v-if="plan.data.request.addBeacons" scope="col">Beacon effect count ⏬</th>
24-
<th v-if="plan.data.request.addBeacons" scope="col">Beacon count ⏫</th>
25-
<th scope="col">Pipe count ⏫</th>
22+
<th scope="col"
23+
title="The pipe, optimization, and beacon strategies used for generating the plan, in order of execution.">
24+
Plan</th>
25+
<th v-if="plan.data.request.addBeacons" scope="col"
26+
title="A higher beacon effect count is preferred (more pump bonuses).">Beacon effect count 📈</th>
27+
<th v-if="plan.data.request.addBeacons" scope="col"
28+
title="A lower beacon effect count is preferred (less power consumption).">Beacon
29+
count 📉</th>
30+
<th scope="col" title="A lower pipe count is preferred (better fluid flow).">Pipe count 📉</th>
31+
<th v-if="plan.data.request.useUndergroundPipes" scope="col"
32+
title="The number of pipes uses before stretches of pipes are replaced with underground pipes. Not used for prioritizing plans.">
33+
Pipe count (w/o underground)</th>
2634
</tr>
2735
</thead>
2836
<tbody class="table-group-divider">
@@ -34,12 +42,13 @@
3442
<td>
3543
<template v-for="(s, i) of p.steps">
3644
<span v-if="i > 0">➡️</span>
37-
<span class="badge" :class="s.class">{{ s.text }} </span>
45+
<AlgorithmStep v-bind="s" />
3846
</template>
3947
</td>
4048
<td v-if="plan.data.request.addBeacons">{{ p.beaconEffectCount }}</td>
4149
<td v-if="plan.data.request.addBeacons">{{ p.beaconCount }}</td>
4250
<td>{{ p.pipeCount }}</td>
51+
<td v-if="plan.data.request.useUndergroundPipes">{{ p.pipeCountWithoutUnderground }}</td>
4352
</tr>
4453
</tbody>
4554
</table>
@@ -52,9 +61,11 @@
5261
<script lang="ts">
5362
import clipboard from 'clipboardy';
5463
import { PropType } from 'vue';
55-
import { BeaconStrategy, OilFieldPlan, OilFieldPlanResponse, PipeStrategy } from '../lib/FactorioToolsApi';
64+
import { OilFieldPlan, OilFieldPlanResponse } from '../lib/FactorioToolsApi';
5665
import { ApiResult } from '../lib/OilFieldPlanner';
5766
import CopyButton from './CopyButton.vue';
67+
import AlgorithmStep from './AlgorithmStep.vue';
68+
import { AllSteps, Step, Steps, getBeaconStep, getPipeStep } from '../lib/steps';
5869
5970
interface SelectedOilFieldPlan extends OilFieldPlan {
6071
category: PlanCategory,
@@ -70,43 +81,6 @@ enum PlanCategory {
7081
Unused,
7182
}
7283
73-
interface Step {
74-
readonly text: string,
75-
readonly class: string,
76-
}
77-
78-
const optimizeStep: Step = { text: "optimize", class: "text-bg-secondary" }
79-
80-
function getPipeStep(pipeStrategy: PipeStrategy): Step {
81-
switch (pipeStrategy) {
82-
case PipeStrategy.FbeOriginal:
83-
return { text: "FBE", class: "text-bg-fbe" };
84-
case PipeStrategy.Fbe:
85-
return { text: "FBE*", class: "text-bg-fbe" };
86-
case PipeStrategy.ConnectedCentersDelaunay:
87-
return { text: "CC-DT", class: "text-bg-primary" };
88-
case PipeStrategy.ConnectedCentersDelaunayMst:
89-
return { text: "CC-DT-MST", class: "text-bg-primary" };
90-
case PipeStrategy.ConnectedCentersFlute:
91-
return { text: "CC-FLUTE", class: "text-bg-primary" };
92-
default:
93-
throw new Error(`unrecognized pipe strategy ${pipeStrategy}`)
94-
}
95-
}
96-
97-
function getBeaconStep(beaconStrategy: BeaconStrategy): Step {
98-
switch (beaconStrategy) {
99-
case BeaconStrategy.FbeOriginal:
100-
return { text: "FBE", class: "text-bg-fbe" };
101-
case BeaconStrategy.Fbe:
102-
return { text: "FBE*", class: "text-bg-fbe" };
103-
case BeaconStrategy.Snug:
104-
return { text: "snug", class: "text-bg-primary" };
105-
default:
106-
throw new Error(`unrecognized beacon strategy ${beaconStrategy}`)
107-
}
108-
}
109-
11084
function initPlan(plan: OilFieldPlan, category: PlanCategory): SelectedOilFieldPlan {
11185
let c: string = ""
11286
switch (category) {
@@ -161,22 +135,31 @@ export default {
161135
c.steps.push(getPipeStep(c.pipeStrategy))
162136
163137
if (c.optimizePipes) {
164-
c.steps.push(optimizeStep)
138+
c.steps.push(Steps.OptimizeStep)
139+
}
140+
if (c.pipeCount != c.pipeCountWithoutUnderground) {
141+
c.steps.push(Steps.UndergroundPipesStep)
165142
}
166143
if (c.beaconStrategy) {
167144
c.steps.push(getBeaconStep(c.beaconStrategy))
168145
}
146+
if (c.category == PlanCategory.Selected && this.plan.data.request.addElectricPoles) {
147+
c.steps.push(Steps.PolesStep)
148+
}
169149
}
170150
171151
return allPlans;
152+
},
153+
allSteps() {
154+
return AllSteps
172155
}
173156
},
174157
methods: {
175158
async copyBlueprint() {
176159
await clipboard.write(this.plan.data.blueprint);
177160
}
178161
},
179-
components: { CopyButton }
162+
components: { CopyButton, AlgorithmStep }
180163
}
181164
</script>
182165

‎src/vue/src/components/PlannerForm.vue

+53-34
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,15 @@
33
<legend>Planner options</legend>
44
<div class="form-check">
55
<input type="checkbox" class="form-check-input" id="use-underground-pipes" v-model="useUndergroundPipes">
6-
<label class="form-check-label" for="use-underground-pipes">Use underground pipes</label>
6+
<label class="form-check-label" for="use-underground-pipes">
7+
<AlgorithmStep v-bind="Steps.UndergroundPipesStep" :show-as-option="true" />
8+
</label>
79
</div>
810
<div class="form-check">
911
<input type="checkbox" class="form-check-input" id="optimize-pipes" v-model="optimizePipes">
10-
<label class="form-check-label" for="optimize-pipes">Optimize pipes</label>
12+
<label class="form-check-label" for="optimize-pipes">
13+
<AlgorithmStep v-bind="Steps.OptimizeStep" :show-as-option="true" />
14+
</label>
1115
</div>
1216
<div class="form-check">
1317
<input type="checkbox" class="form-check-input" id="validate-solution" v-model="validateSolution">
@@ -26,31 +30,36 @@
2630
<legend>Pipe strategies</legend>
2731
<div class="form-check">
2832
<input type="checkbox" class="form-check-input" id="pipes-fbe-original" v-model="pipeStrategyFbeOriginal">
29-
<label class="form-check-label" for="pipes-fbe-original">Teoxoy's FBE</label> (<a
30-
href="https://github.com/teoxoy/factorio-blueprint-editor/blob/0bec144b8989422f86bce8cea58ef49258c1a88d/packages/editor/src/core/generators/pipe.ts">original
31-
source</a>) without modifications
33+
<label class="form-check-label" for="pipes-fbe-original">
34+
<AlgorithmStep v-bind="Steps.PipeSteps.FbeOriginal" :show-as-option="true" />
35+
</label>
3236
</div>
3337
<div class="form-check">
3438
<input type="checkbox" class="form-check-input" id="pipes-fbe" v-model="pipeStrategyFbe">
35-
<label class="form-check-label" for="pipes-fbe">Teoxoy's FBE</label> with modifications
39+
<label class="form-check-label" for="pipes-fbe">
40+
<AlgorithmStep v-bind="Steps.PipeSteps.Fbe" :show-as-option="true" />
41+
</label>
3642
</div>
3743
<div class="form-check">
3844
<input type="checkbox" class="form-check-input" id="pipes-connected-centers-delaunay"
3945
v-model="pipeStrategyConnectedCentersDelaunay">
40-
<label class="form-check-label" for="pipes-connected-centers-delaunay">Connected centers via Delaunay
41-
triangulation</label>
46+
<label class="form-check-label" for="pipes-connected-centers-delaunay">
47+
<AlgorithmStep v-bind="Steps.PipeSteps.ConnectedCentersDelaunay" :show-as-option="true" />
48+
</label>
4249
</div>
4350
<div class="form-check">
4451
<input type="checkbox" class="form-check-input" id="pipes-connected-centers-delaunay-mst"
4552
v-model="pipeStrategyConnectedCentersDelaunayMst">
46-
<label class="form-check-label" for="pipes-connected-centers-delaunay-mst">Connected centers via Delaunay
47-
triangulation and Prim's MST</label>
53+
<label class="form-check-label" for="pipes-connected-centers-delaunay-mst">
54+
<AlgorithmStep v-bind="Steps.PipeSteps.ConnectedCentersDelaunayMst" :show-as-option="true" />
55+
</label>
4856
</div>
4957
<div class="form-check">
5058
<input type="checkbox" class="form-check-input" id="pipes-connected-centers-flute"
5159
v-model="pipeStrategyConnectedCentersFlute">
52-
<label class="form-check-label" for="pipes-connected-centers-flute">Connected centers via <a
53-
href="https://home.engineering.iastate.edu/~cnchu/flute.html">FLUTE</a></label>
60+
<label class="form-check-label" for="pipes-connected-centers-flute">
61+
<AlgorithmStep v-bind="Steps.PipeSteps.ConnectedCentersFlute" :show-as-option="true" />
62+
</label>
5463
</div>
5564
</fieldset>
5665
<fieldset class="border p-3 mt-3" :disabled="!addBeacons">
@@ -60,17 +69,21 @@
6069
</legend>
6170
<div class="form-check">
6271
<input type="checkbox" class="form-check-input" id="beacons-fbe-original" v-model="beaconStrategyFbeOriginal">
63-
<label class="form-check-label" for="beacons-fbe-original">Teoxoy's FBE</label> (<a
64-
href="https://github.com/teoxoy/factorio-blueprint-editor/blob/0bec144b8989422f86bce8cea58ef49258c1a88d/packages/editor/src/core/generators/beacon.ts">original
65-
source</a>) without modifications
72+
<label class="form-check-label" for="beacons-fbe-original">
73+
<AlgorithmStep v-bind="Steps.BeaconSteps.FbeOriginal" :show-as-option="true" />
74+
</label>
6675
</div>
6776
<div class="form-check">
6877
<input type="checkbox" class="form-check-input" id="beacons-fbe" v-model="beaconStrategyFbe">
69-
<label class="form-check-label" for="beacons-fbe">Teoxoy's FBE</label> with modifications
78+
<label class="form-check-label" for="beacons-fbe">
79+
<AlgorithmStep v-bind="Steps.BeaconSteps.Fbe" :show-as-option="true" />
80+
</label>
7081
</div>
7182
<div class="form-check">
7283
<input type="checkbox" class="form-check-input" id="beacons-snug" v-model="beaconStrategySnug">
73-
<label class="form-check-label" for="beacons-snug">Snug</label>
84+
<label class="form-check-label" for="beacons-snug">
85+
<AlgorithmStep v-bind="Steps.BeaconSteps.Snug" :show-as-option="true" />
86+
</label>
7487
</div>
7588
</fieldset>
7689
</fieldset>
@@ -82,6 +95,8 @@ import { storeToRefs } from 'pinia';
8295
import { pick } from '../lib/helpers';
8396
import { useAutoPlanStore } from '../stores/AutoPlanStore';
8497
import { getDefaults, useOilFieldStore } from '../stores/OilFieldStore';
98+
import { Steps } from '../lib/steps';
99+
import AlgorithmStep from './AlgorithmStep.vue';
85100
86101
export default {
87102
props: {
@@ -93,7 +108,8 @@ export default {
93108
data() {
94109
return Object.assign(
95110
storeToRefs(useAutoPlanStore()),
96-
pick(storeToRefs(useOilFieldStore()),
111+
pick(
112+
storeToRefs(useOilFieldStore()),
97113
'addBeacons',
98114
'useUndergroundPipes',
99115
'useStagingApi',
@@ -106,31 +122,34 @@ export default {
106122
'pipeStrategyConnectedCentersFlute',
107123
'beaconStrategyFbeOriginal',
108124
'beaconStrategyFbe',
109-
'beaconStrategySnug'));
125+
'beaconStrategySnug'), {
126+
Steps: Steps
127+
});
110128
},
111129
watch: {
112130
showAdvancedOptions: function (newVal: boolean) {
113131
if (!newVal) {
114-
this.reset()
132+
this.reset();
115133
}
116134
}
117135
},
118136
methods: {
119137
reset() {
120-
const defaults = getDefaults()
121-
this.useUndergroundPipes = defaults.useUndergroundPipes
122-
this.useStagingApi = defaults.useStagingApi
123-
this.optimizePipes = defaults.optimizePipes
124-
this.validateSolution = defaults.validateSolution
125-
this.pipeStrategyFbeOriginal = defaults.pipeStrategyFbeOriginal
126-
this.pipeStrategyFbe = defaults.pipeStrategyFbe
127-
this.pipeStrategyConnectedCentersDelaunay = defaults.pipeStrategyConnectedCentersDelaunay
128-
this.pipeStrategyConnectedCentersDelaunayMst = defaults.pipeStrategyConnectedCentersDelaunayMst
129-
this.pipeStrategyConnectedCentersFlute = defaults.pipeStrategyConnectedCentersFlute
130-
this.beaconStrategyFbeOriginal = defaults.beaconStrategyFbeOriginal
131-
this.beaconStrategyFbe = defaults.beaconStrategyFbe
132-
this.beaconStrategySnug = defaults.beaconStrategySnug
138+
const defaults = getDefaults();
139+
this.useUndergroundPipes = defaults.useUndergroundPipes;
140+
this.useStagingApi = defaults.useStagingApi;
141+
this.optimizePipes = defaults.optimizePipes;
142+
this.validateSolution = defaults.validateSolution;
143+
this.pipeStrategyFbeOriginal = defaults.pipeStrategyFbeOriginal;
144+
this.pipeStrategyFbe = defaults.pipeStrategyFbe;
145+
this.pipeStrategyConnectedCentersDelaunay = defaults.pipeStrategyConnectedCentersDelaunay;
146+
this.pipeStrategyConnectedCentersDelaunayMst = defaults.pipeStrategyConnectedCentersDelaunayMst;
147+
this.pipeStrategyConnectedCentersFlute = defaults.pipeStrategyConnectedCentersFlute;
148+
this.beaconStrategyFbeOriginal = defaults.beaconStrategyFbeOriginal;
149+
this.beaconStrategyFbe = defaults.beaconStrategyFbe;
150+
this.beaconStrategySnug = defaults.beaconStrategySnug;
133151
}
134-
}
152+
},
153+
components: { AlgorithmStep }
135154
}
136155
</script>

0 commit comments

Comments
 (0)