alois/OpenFrontIO
1
0
Fork 0
mirror of https://github.com/openfrontio/OpenFrontIO.git synced 2026-06-21 11:20:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

add missile silo

Browse Source
This commit is contained in:
Evan
2024-11-16 11:45:28 -08:00
parent 006539455d
commit e26230275b
11 changed files with 240 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TODO.txt
+4 -1
View File
@@ -182,10 +182,13 @@
* create trade routes DONE 11/15/2024
* add trade ship DONE 11/15/2024
* trade ship gives gold when completes route DONE 11/15/2024
* add missile silo
* add missile silo DONE 11/15/2024
* nuke spawns from missile silo
* destroyer can capture trade ships
* add battleship
* add defense post
* add radiation from nuke
* REFACTOR: make TransportShip follow build unit flow
* NPC has relations
* use twitter emojis
* private game shows how many players joined
resources/images/MissileSiloIconWhite.svg
+86
View File
@@ -0,0 +1,86 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg
fill="#000000"
height="800px"
width="800px"
version="1.1"
id="Icons"
viewBox="0 0 32 32"
xml:space="preserve"
sodipodi:docname="RocketSiloIconWhite.svg"
inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"><defs
id="defs13" /><sodipodi:namedview
id="namedview11"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
showgrid="false"
inkscape:zoom="1.09125"
inkscape:cx="178.69416"
inkscape:cy="397.70905"
inkscape:window-width="3072"
inkscape:window-height="1653"
inkscape:window-x="0"
inkscape:window-y="38"
inkscape:window-maximized="1"
inkscape:current-layer="Icons" />
<g
id="g8">
<path
id="path2"
style="stroke-width:25"
transform="scale(0.04)"
d="m 104.49023,583.2168 c -0.0475,0.005 -0.0898,0.0209 -0.125,0.0469 -0.0897,0.0662 -0.1134,0.22145 -0.0859,0.44531 0.0945,-0.16261 0.18903,-0.32383 0.2832,-0.48632 -0.024,-0.001 -0.0506,-0.008 -0.0723,-0.006 z" />
<path
id="path4"
style="stroke-width:25"
transform="scale(0.04)"
d="m 398.75,48.75 c -8.125,0 -16.25,3.75 -21.25,11.25 l -50,75 c 0,5 -2.5,10 -2.5,15 v 167.5 l -72.5,120 c -5,7.5 -5,17.5 0,25 5,7.5 12.5,12.5 22.5,12.5 h 250 c 10,0 17.5,-5 22.5,-12.5 5,-7.5 5,-17.5 0,-25 L 475,317.5 V 150 c 0,-5 -2.5,-10 -5,-15 L 420,60 C 415,52.5 406.875,48.75 398.75,48.75 Z" />
<path
id="path6"
style="stroke-width:25"
transform="scale(0.04)"
d="m 400,500 c -15,0 -25,10 -25,25 v 75 c 0,15 10,25 25,25 15,0 25,-10 25,-25 v -75 c 0,-15 -10,-25 -25,-25 z" />
</g>
<ellipse
style="fill:#ff0000;fill-rule:evenodd;stroke-width:0.04"
id="path1551"
cx="16.057112"
cy="27.825054"
rx="12.692628"
ry="1.9371578" /><ellipse
style="fill:#ff0000;fill-rule:evenodd;stroke-width:0.04"
id="path1553"
cx="22.051313"
cy="29.516819"
rx="0.53854793"
ry="0.019182237" /><path
style="fill:#ffffff;stroke:none;stroke-width:0.91638"
d="m 336.31157,742.57746 c -64.10675,-2.73184 -96.35975,-5.10869 -135.62428,-9.99467 -65.84565,-8.19368 -108.369339,-20.55125 -115.027982,-33.42765 -9.213823,-17.81757 52.596912,-35.62711 155.348712,-44.76066 48.06575,-4.27253 78.28696,-5.61411 140.20618,-6.224 88.15143,-0.86828 156.77477,2.44417 223.5968,10.79301 71.65567,8.95277 116.73192,24.08998 113.2343,38.02562 -5.44535,21.696 -102.07526,39.68224 -243.23455,45.27454 -20.17937,0.79944 -121.7049,1.02948 -138.49918,0.31381 z"
id="path1672"
transform="scale(0.04)" /><path
style="fill:#ffffff;stroke-width:0.91638"
d="m 316.1512,741.30843 c -50.59618,-2.71561 -71.33695,-4.25003 -99.42726,-7.3557 C 138.8581,725.34385 89.219492,711.32972 85.606719,696.93529 81.493809,680.54815 143.8897,663.72225 241.9244,654.78211 c 54.02316,-4.92657 98.75384,-6.34315 180.06253,-5.70242 69.63124,0.54871 91.66091,1.45537 139.296,5.73293 83.98725,7.54194 144.60633,21.76524 154.80219,36.32187 12.95197,18.49152 -57.41631,37.71396 -170.38065,46.54273 -46.47603,3.63235 -56.00093,3.92443 -135.62429,4.15884 -43.84879,0.1291 -86.11684,-0.10834 -93.92898,-0.52763 z"
id="path1748"
transform="scale(0.04)" /><path
style="fill:#ffffff;stroke-width:0.91638"
d="m 395.4181,624.03958 c -8.54628,-1.74507 -14.15841,-5.98769 -17.54748,-13.26544 l -2.13679,-4.58857 -0.009,-43.18376 c -0.01,-46.57633 0.0787,-47.54106 4.93893,-53.91311 1.18953,-1.55955 4.37731,-4.05284 7.08397,-5.54065 4.29402,-2.36035 5.85547,-2.7051 12.25223,-2.7051 6.39676,0 7.95821,0.34475 12.25223,2.7051 2.70666,1.48781 5.89444,3.9811 7.08397,5.54065 4.8602,6.37205 4.94858,7.33678 4.93893,53.91311 l -0.009,43.18376 -2.1573,4.63286 c -4.50315,9.67058 -16.0552,15.39283 -26.69077,13.22115 z"
id="path1787"
transform="scale(0.04)" /><path
style="fill:#ffffff;stroke-width:0.91638"
d="m 267.74187,473.33145 c -14.07258,-4.41441 -22.07846,-19.50972 -16.66853,-31.42897 0.9777,-2.1541 18.08205,-30.88885 38.00965,-63.85502 l 36.23202,-59.93847 0.0313,-85.05678 c 0.0289,-78.40313 0.15927,-85.59443 1.66727,-91.92964 1.54167,-6.47669 3.12153,-9.09962 27.40785,-45.50342 16.49492,-24.724954 26.94454,-39.525002 29.0296,-41.115363 9.88792,-7.541884 24.92944,-6.440366 33.16408,2.428667 4.11259,4.429421 52.40823,77.221396 55.24103,83.260156 l 2.37067,5.05367 0.24734,86.46152 0.24733,86.46153 36.23928,59.95051 c 19.93161,32.97277 37.08285,61.85753 38.11388,64.18833 4.58482,10.36476 -1.20515,23.65555 -12.78176,29.34034 l -5.25049,2.57829 -129.66781,0.1742 c -107.00742,0.14375 -130.3607,-0.0432 -133.6327,-1.06955 z"
id="path1826"
transform="scale(0.04)" /><path
style="fill:#ffffff;stroke-width:0.91638"
d="m 306.52921,740.81162 c -87.19059,-4.45544 -154.17018,-13.39697 -191.52348,-25.56769 -16.873321,-5.49779 -29.782362,-13.67791 -29.782362,-18.8723 0,-10.70958 23.369172,-20.94319 67.691822,-29.64297 36.72878,-7.20924 87.73185,-12.78609 149.03212,-16.29568 28.05995,-1.60649 170.34184,-1.59744 198.85452,0.0127 41.28348,2.33126 79.77543,5.77849 110.42383,9.88924 54.44397,7.30236 94.73314,18.84269 103.92658,29.76847 3.65577,4.34464 3.19598,7.70457 -1.69574,12.39166 -18.84113,18.05298 -99.16958,32.16166 -218.61114,38.39627 -33.70301,1.75923 -153.32023,1.70864 -188.31615,-0.0796 z"
id="path1902"
transform="scale(0.04)" /></svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

resources/images/MissileSiloUnit.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 115 B

resources/images/NukeUnitIcon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 133 B

src/client/graphics/layers/StructureLayer.ts
+76 -38
View File
@@ -6,28 +6,49 @@ import { Layer } from "./Layer";
import { EventBus } from "../../../core/EventBus";
import anchorIcon from '../../../../resources/images/AnchorIcon.png';
import missileSiloIcon from '../../../../resources/images/MissileSiloUnit.png';
interface UnitRenderConfig {
icon: string;
borderRadius: number;
territoryRadius: number;
}
export class StructureLayer implements Layer {
private canvas: HTMLCanvasElement;
private context: CanvasRenderingContext2D;
private imageData: ImageData;
private anchorImage: HTMLImageElement;
private anchorImageLoaded: boolean = false;
private unitImages: Map<string, HTMLImageElement> = new Map();
private theme: Theme = null;
// Configuration for supported unit types only
private readonly unitConfigs: Partial<Record<UnitType, UnitRenderConfig>> = {
[UnitType.Port]: {
icon: anchorIcon,
borderRadius: 8,
territoryRadius: 6
},
[UnitType.MissileSilo]: {
icon: missileSiloIcon,
borderRadius: 8,
territoryRadius: 6
}
};
constructor(private game: Game, private eventBus: EventBus) {
this.theme = game.config().theme();
this.loadAnchorImage();
this.loadUnitImages();
}
private loadAnchorImage() {
this.anchorImage = new Image();
this.anchorImage.onload = () => {
this.anchorImageLoaded = true;
};
this.anchorImage.src = anchorIcon;
private loadUnitImages() {
Object.entries(this.unitConfigs).forEach(([unitType, config]) => {
const image = new Image();
image.src = config.icon;
image.onload = () => {
this.unitImages.set(unitType, image);
};
});
}
shouldTransform(): boolean {
@@ -69,53 +90,74 @@ export class StructureLayer implements Layer {
);
}
private handlePortEvent(event: UnitEvent) {
if (!this.anchorImageLoaded) return;
private isUnitTypeSupported(unitType: UnitType): boolean {
return unitType in this.unitConfigs;
}
bfs(event.unit.tile(), euclDist(event.unit.tile(), 8))
private handleUnitRendering(event: UnitEvent) {
const unitType = event.unit.type();
if (!this.isUnitTypeSupported(unitType)) return;
const config = this.unitConfigs[unitType];
const unitImage = this.unitImages.get(unitType);
if (!config || !unitImage) return;
// Clear previous rendering
bfs(event.unit.tile(), euclDist(event.unit.tile(), config.borderRadius))
.forEach(t => this.clearCell(t.cell()));
if (!event.unit.isActive()) {
return
return;
}
// Create a temporary canvas to process the anchor icon
// Create temporary canvas for icon processing
const tempCanvas = document.createElement('canvas');
const tempContext = tempCanvas.getContext('2d');
tempCanvas.width = this.anchorImage.width;
tempCanvas.height = this.anchorImage.height;
tempCanvas.width = unitImage.width;
tempCanvas.height = unitImage.height;
// Draw the anchor icon to the temporary canvas
tempContext.drawImage(this.anchorImage, 0, 0);
// Draw the unit icon
tempContext.drawImage(unitImage, 0, 0);
const iconData = tempContext.getImageData(0, 0, tempCanvas.width, tempCanvas.height);
// Calculate position to center the icon on the port
const cell = event.unit.tile().cell();
const startX = cell.x - Math.floor(tempCanvas.width / 2);
const startY = cell.y - Math.floor(tempCanvas.height / 2);
bfs(event.unit.tile(), euclDist(event.unit.tile(), 8))
// Draw border and territory
bfs(event.unit.tile(), euclDist(event.unit.tile(), config.borderRadius))
.forEach(t => this.paintCell(t.cell(), this.theme.borderColor(event.unit.owner().info()), 255));
bfs(event.unit.tile(), euclDist(event.unit.tile(), 6))
bfs(event.unit.tile(), euclDist(event.unit.tile(), config.territoryRadius))
.forEach(t => this.paintCell(t.cell(), this.theme.territoryColor(event.unit.owner().info()), 255));
// Process each pixel of the icon
for (let y = 0; y < tempCanvas.height; y++) {
for (let x = 0; x < tempCanvas.width; x++) {
const iconIndex = (y * tempCanvas.width + x) * 4;
// Draw the icon
this.renderIcon(iconData, startX, startY, tempCanvas.width, tempCanvas.height, event.unit);
}
private renderIcon(
iconData: ImageData,
startX: number,
startY: number,
width: number,
height: number,
unit: Unit
) {
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
const iconIndex = (y * width + x) * 4;
const alpha = iconData.data[iconIndex + 3];
if (alpha > 0) { // Only process non-transparent pixels
if (alpha > 0) {
const targetX = startX + x;
const targetY = startY + y;
// Check if the target pixel is within the game bounds
if (targetX >= 0 && targetX < this.game.width() &&
targetY >= 0 && targetY < this.game.height()) {
// Color the pixel using the unit owner's colors
this.paintCell(
new Cell(targetX, targetY),
this.theme.borderColor(event.unit.owner().info()),
this.theme.borderColor(unit.owner().info()),
alpha
);
}
@@ -125,11 +167,7 @@ export class StructureLayer implements Layer {
}
onUnitEvent(event: UnitEvent) {
switch (event.unit.type()) {
case UnitType.Port:
this.handlePortEvent(event);
break;
}
this.handleUnitRendering(event);
}
paintCell(cell: Cell, color: Colord, alpha: number) {
@@ -144,6 +182,6 @@ export class StructureLayer implements Layer {
clearCell(cell: Cell) {
const index = (cell.y * this.game.width()) + cell.x;
const offset = index * 4;
this.imageData.data[offset + 3] = 0; // Set alpha to 0 (fully transparent)
this.imageData.data[offset + 3] = 0;
}
}
src/client/graphics/layers/radial/BuildMenu.ts
+5 -2
View File
@@ -5,6 +5,7 @@ import { Cell, Game, BuildItem, BuildItems, Player, UnitType } from '../../../..
import { BuildUnitIntentEvent, SendNukeIntentEvent } from '../../../Transport';
import nukeIcon from '../../../../../resources/images/NukeIconWhite.svg';
import destroyerIcon from '../../../../../resources/images/DestroyerIconWhite.svg';
import missileSiloIcon from '../../../../../resources/images/MissileSiloIconWhite.svg';
import goldCoinIcon from '../../../../../resources/images/GoldCoinIcon.svg';
import portIcon from '../../../../../resources/images/PortIcon.svg';
import { renderNumber } from '../../Utils';
@@ -20,7 +21,8 @@ const buildTable: BuildItemDisplay[][] = [
[
{ item: BuildItems.Nuke, icon: nukeIcon },
{ item: BuildItems.Destroyer, icon: destroyerIcon },
{ item: BuildItems.Port, icon: portIcon }
{ item: BuildItems.Port, icon: portIcon },
{ item: BuildItems.MissileSilo, icon: missileSiloIcon }
]
];
@@ -29,7 +31,6 @@ export class BuildMenu extends LitElement {
public game: Game;
public eventBus: EventBus;
public buildValidator: BuildValidator;
private myPlayer: Player;
private clickedCell: Cell;
@@ -165,6 +166,8 @@ export class BuildMenu extends LitElement {
case BuildItems.Port:
this.eventBus.emit(new BuildUnitIntentEvent(UnitType.Port, this.clickedCell))
break
case BuildItems.MissileSilo:
this.eventBus.emit(new BuildUnitIntentEvent(UnitType.MissileSilo, this.clickedCell))
}
this.hideMenu()
};
src/core/execution/ExecutionManager.ts
+3
View File
@@ -18,6 +18,7 @@ import { NukeExecution } from "./NukeExecution";
import { SetTargetTroopRatioExecution } from "./SetTargetTroopRatioExecution";
import { DestroyerExecution } from "./DestroyerExecution";
import { PortExecution } from "./PortExecution";
import { MissileSiloExecution } from "./MissileSiloExecution";
@@ -88,6 +89,8 @@ export class Executor {
return new DestroyerExecution(intent.player, new Cell(intent.x, intent.y))
case UnitType.Port:
return new PortExecution(intent.player, new Cell(intent.x, intent.y))
case UnitType.MissileSilo:
return new MissileSiloExecution(intent.player, new Cell(intent.x, intent.y))
default:
throw Error(`unit type ${intent.unit} not supported`)
}
src/core/execution/MissileSiloExecution.ts
+60
View File
@@ -0,0 +1,60 @@
import { BuildValidator } from "../game/BuildValidator";
import { AllPlayers, BuildItem, BuildItems, Cell, Execution, MutableGame, MutablePlayer, MutableUnit, Player, PlayerID, Tile, Unit, UnitType } from "../game/Game";
import { AStar, PathFinder } from "../PathFinding";
import { PseudoRandom } from "../PseudoRandom";
import { bfs, dist, manhattanDist } from "../Util";
import { TradeShipExecution } from "./TradeShipExecution";
export class MissileSiloExecution implements Execution {
private active = true
private mg: MutableGame
private player: MutablePlayer
private silo: MutableUnit
constructor(
private _owner: PlayerID,
private cell: Cell
) { }
init(mg: MutableGame, ticks: number): void {
this.mg = mg
this.player = mg.player(this._owner)
}
tick(ticks: number): void {
if (this.silo == null) {
const tile = this.mg.tile(this.cell)
if (!new BuildValidator(this.mg).canBuild(this.player, tile, BuildItems.MissileSilo)) {
console.warn(`player ${this.player} cannot build port at ${this.cell}`)
this.active = false
return
}
this.silo = this.player.addUnit(UnitType.MissileSilo, 0, tile)
}
if (!this.silo.tile().hasOwner()) {
this.silo.delete()
this.active = false
return
}
if (this.silo.tile().owner() != this.silo.owner()) {
this.silo.setOwner(this.silo.tile().owner() as Player)
this.player = this.silo.owner()
}
}
owner(): MutablePlayer {
return null
}
isActive(): boolean {
return this.active
}
activeDuringSpawnPhase(): boolean {
return false
}
}
src/core/execution/PortExecution.ts
+1
View File
@@ -55,6 +55,7 @@ export class PortExecution implements Execution {
}
if (this.port.tile().owner() != this.port.owner()) {
this.port.setOwner(this.port.tile().owner() as Player)
this.player = this.port.owner()
}
const allPorts = this.mg.units(UnitType.Port)
src/core/game/BuildValidator.ts
+2
View File
@@ -15,6 +15,8 @@ export class BuildValidator {
return this.canBuildPort(player, tile)
case BuildItems.Destroyer:
return this.canBuildDestroyer(player, tile)
case BuildItems.MissileSilo:
return tile.owner() == player
default:
throw Error(`item ${item.type} not supported`)
}
src/core/game/Game.ts
+3 -1
View File
@@ -28,6 +28,7 @@ export enum UnitType {
Port = "Port",
Nuke = "Nuke",
TradeShip = "Trade Ship",
MissileSilo = "Missile Silo",
}
export class BuildItem {
@@ -41,7 +42,8 @@ export const BuildItems = {
// Nuke: new BuildItem(UnitType.Nuke, 1_000_000),
Nuke: new BuildItem(UnitType.Nuke, 10),
Destroyer: new BuildItem(UnitType.Destroyer, 10),
Port: new BuildItem(UnitType.Port, 0)
Port: new BuildItem(UnitType.Port, 0),
MissileSilo: new BuildItem(UnitType.MissileSilo, 10),
} as const;
export class Nation {