Home
/
browser-rts.git
/ blobdiff
commit
grep
author
committer
pickaxe
?
search:
re
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
allow cancelling of training queues
[browser-rts.git]
/
src
/
render
/
land-development.ts
diff --git
a/src/render/land-development.ts
b/src/render/land-development.ts
index 935ff74dbdd74868b9dedda76480e209e9467f68..d0b5e7f1157460eba318713ce9430a6475e93fb1 100644
(file)
--- a/
src/render/land-development.ts
+++ b/
src/render/land-development.ts
@@
-3,7
+3,16
@@
import { CityWithLocation } from "../repository/city";
import { Building } from '../repository/buildings';
import _ from "lodash";
import { Building } from '../repository/buildings';
import _ from "lodash";
-function progressBar(current, max): string {
+const emptyBuilding: BuildQueue = {
+ id: '',
+ owner: '',
+ amount: 0,
+ created: 0,
+ due: 0,
+ building_type: 'empty',
+};
+
+function progressBar(current: number, max: number): string {
const percent = Math.ceil((current/max) * 100);
return `
<div class="progress-bar construction" style="background: background: var(--green-bg);
const percent = Math.ceil((current/max) * 100);
return `
<div class="progress-bar construction" style="background: background: var(--green-bg);
@@
-15,14
+24,19
@@
function progressBar(current, max): string {
export function renderLandDevelopment(city: CityWithLocation, buildings: Building[], buildQueues: BuildQueue[]): string {
const freeSpace = city.totalSpace - city.usedSpace;
export function renderLandDevelopment(city: CityWithLocation, buildings: Building[], buildQueues: BuildQueue[]): string {
const freeSpace = city.totalSpace - city.usedSpace;
+ const sortedBuildQueues = buildQueues.sort((a, b) => {
+ return a.due - b.due;
+ });
+
let html = `
<div hx-trigger="reload-construction-queue, every 600s" hx-get="/poll/construction">
<h2 data-augmented-ui="tl-clip bl-clip none">Construction</h2>
<table>
<tr>
let html = `
<div hx-trigger="reload-construction-queue, every 600s" hx-get="/poll/construction">
<h2 data-augmented-ui="tl-clip bl-clip none">Construction</h2>
<table>
<tr>
- <th>
Free Land
</th>
+ <th>
Type
</th>
<th>Current</th>
<th>Current</th>
- <td colspan="2">${(city.totalSpace - city.usedSpace).toLocaleString()} (${Math.ceil(freeSpace/city.totalSpace * 100)}% available)</td>
+ <th>Space Available: ${(city.totalSpace - city.usedSpace).toLocaleString()} (${Math.ceil(freeSpace/city.totalSpace * 100)}% available)</th>
+ <th width="200">Cost</th>
</tr>
${
buildings.map(building => {
</tr>
${
buildings.map(building => {
@@
-31,13
+45,13
@@
export function renderLandDevelopment(city: CityWithLocation, buildings: Buildin
<th>${building.display}</th>
<td>${city[building.slug]}</td>
<td>
<th>${building.display}</th>
<td>${city[building.slug]}</td>
<td>
- <form hx-post="/build">
- <input type="number" size="6" name="amount" hx-post="/cost/construction" hx-trigger="
change" hx-target="#${building.slug}-cost
">
+ <form hx-post="/build"
hx-swap="innerHTML" hx-target="#notifications"
>
+ <input type="number" size="6" name="amount" hx-post="/cost/construction" hx-trigger="
keyup" hx-target="#${building.slug}-cost" hx-swap="innerHTML
">
<input type="hidden" name="building_type" value="${building.slug}">
<button type="submit">Build</button>
</form>
<input type="hidden" name="building_type" value="${building.slug}">
<button type="submit">Build</button>
</form>
- <span id="${building.slug}-cost"></span>
</td>
</td>
+ <td id="${building.slug}-cost"></td>
</tr>
`;
}).join("\n")
</tr>
`;
}).join("\n")
@@
-46,19
+60,33
@@
export function renderLandDevelopment(city: CityWithLocation, buildings: Buildin
`;
const quickFindBuilding = _.keyBy(buildings, 'slug');
`;
const quickFindBuilding = _.keyBy(buildings, 'slug');
+ const finalBuildQueues = sortedBuildQueues;
+
+ if (finalBuildQueues.length < city.max_construction_queue) {
+ while(finalBuildQueues.length < city.max_construction_queue) {
+ finalBuildQueues.push(emptyBuilding);
+ }
+ }
+
const queues = `
<hr>
<h2 data-augmented-ui="tl-clip bl-clip none">Build Queues</h2>
<table>
<tr>
const queues = `
<hr>
<h2 data-augmented-ui="tl-clip bl-clip none">Build Queues</h2>
<table>
<tr>
- <th>Building</th>
- <th>Amount Expected</th>
- <th>Progress</th>
+ <th
align="left"
>Building</th>
+ <th
align="left"
>Amount Expected</th>
+ <th
colspan="2"
>Progress</th>
</tr>
</tr>
- ${buildQueues.sort((a, b) => {
- return a.due - b.due;
- }).map(queue => {
+ ${sortedBuildQueues.map(queue => {
+ if(queue.building_type === 'empty') {
+ return `
+ <tr>
+ <td colspan="4">You have sufficient capacity to build something.</td>
+ </tr>
+ `
+ }
+ else {
const now = Date.now() - queue.created;
const duration = queue.due - queue.created;
const now = Date.now() - queue.created;
const duration = queue.due - queue.created;
@@
-67,12
+95,15
@@
export function renderLandDevelopment(city: CityWithLocation, buildings: Buildin
<td>${quickFindBuilding[queue.building_type].display}</td>
<td>${queue.amount}</td>
<td>${progressBar(now, duration)}</td>
<td>${quickFindBuilding[queue.building_type].display}</td>
<td>${queue.amount}</td>
<td>${progressBar(now, duration)}</td>
+ <td width="50">
+ <a href="#" hx-post="/construction/${queue.id}/cancel" hx-trigger="click" class="danger-text close" title="Cancel Construction">×</a>
+ </td>
</tr>
`;
</tr>
`;
+ }
}).join("\n")}
</table>
</div>
`;
}).join("\n")}
</table>
</div>
`;
-
return html + queues;
return html + queues;
-}
\ No newline at end of file
+}