Skip to content

Commit 0412cbf

Browse files
RyanGriebRyanGrieb
committed
UI: Correct SVG alignment
1 parent 0b4b3b1 commit 0412cbf

4 files changed

Lines changed: 38 additions & 34 deletions

File tree

‎client/src/scene/type/InGameScene.ts‎

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -332,9 +332,9 @@ export class InGameScene extends Scene {
332332
this.controlsLocked = true;
333333

334334
this.escMenu = new ActorGroup({
335-
x: Game.getInstance().getWidth() / 2 - 275 / 2,
336-
y: Game.getInstance().getHeight() / 2 - 275 / 2,
337-
width: 275,
335+
x: Game.getInstance().getWidth() / 2 - 250 / 2,
336+
y: Game.getInstance().getHeight() / 2 - 250 / 2,
337+
width: 250,
338338
height: 275,
339339
cameraApplies: false
340340
});
@@ -345,17 +345,19 @@ export class InGameScene extends Scene {
345345
y: this.escMenu.getY(),
346346
width: this.escMenu.getWidth(),
347347
height: this.escMenu.getHeight(),
348-
image: Game.getInstance().getImage(GameImage.POPUP_BOX)
348+
image: Game.getInstance().getImage(GameImage.POPUP_BOX),
349+
nineSlice: true,
350+
cornerSize: 20
349351
})
350352
);
351353

352354
this.escMenu.addActor(
353355
new Button({
354-
text: "Return to Game",
355-
x: this.escMenu.getX() + this.escMenu.getWidth() / 2 - 242 / 2,
356-
y: this.escMenu.getY() + 14,
357-
width: 242,
358-
height: 62,
356+
text: "Return",
357+
x: this.escMenu.getX() + 23,
358+
y: this.escMenu.getY() + 23,
359+
width: 210,
360+
height: 50,
359361
fontColor: "white",
360362
onClicked: () => {
361363
this.removeActor(this.escMenu);
@@ -367,10 +369,10 @@ export class InGameScene extends Scene {
367369
this.escMenu.addActor(
368370
new Button({
369371
text: "Settings",
370-
x: this.escMenu.getX() + this.escMenu.getWidth() / 2 - 242 / 2,
371-
y: this.escMenu.getY() + 76,
372-
width: 242,
373-
height: 62,
372+
x: this.escMenu.getX() + 23,
373+
y: this.escMenu.getY() + 83,
374+
width: 210,
375+
height: 50,
374376
fontColor: "white",
375377
onClicked: () => {
376378
console.log("Toggle settings menu");
@@ -381,22 +383,22 @@ export class InGameScene extends Scene {
381383
this.escMenu.addActor(
382384
new Button({
383385
text: "Save Game",
384-
x: this.escMenu.getX() + this.escMenu.getWidth() / 2 - 242 / 2,
385-
y: this.escMenu.getY() + 138,
386-
width: 242,
387-
height: 62,
386+
x: this.escMenu.getX() + 23,
387+
y: this.escMenu.getY() + 143,
388+
width: 210,
389+
height: 50,
388390
fontColor: "white",
389391
onClicked: () => { }
390392
})
391393
);
392394

393395
this.escMenu.addActor(
394396
new Button({
395-
text: "Exit to Main Menu",
396-
x: this.escMenu.getX() + this.escMenu.getWidth() / 2 - 242 / 2,
397-
y: this.escMenu.getY() + 200,
398-
width: 242,
399-
height: 62,
397+
text: "Main Menu",
398+
x: this.escMenu.getX() + 23,
399+
y: this.escMenu.getY() + 203,
400+
width: 210,
401+
height: 50,
400402
fontColor: "white",
401403
onClicked: () => {
402404
WebsocketClient.disconnect();

‎client/src/scene/type/JoinGameScene.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,9 @@ export class JoinGameScene extends Scene {
4242
x: Game.getInstance().getWidth() / 2 - 600 / 2,
4343
y: Game.getInstance().getHeight() / 2 - 500 / 2,
4444
width: 600,
45-
height: 500
45+
height: 500,
46+
cornerSize: 20,
47+
nineSlice: true,
4648
});
4749

4850
this.addActor(backgroundActor);

‎client/src/ui/CityDisplayInfo.ts‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ export class CityDisplayInfo extends ActorGroup {
122122
private initializeStatsWindow() {
123123
const x = 0;
124124
const y = 21;
125-
const width = 250;
125+
const width = 260;
126126
const height = 300;
127127
this.addActor(
128128
new Actor({
@@ -142,14 +142,14 @@ export class CityDisplayInfo extends ActorGroup {
142142
fontColor: "white"
143143
});
144144
nameLabel.conformSize().then(() => {
145-
nameLabel.setPosition(0 + 250 / 2 - nameLabel.getWidth() / 2, 30);
145+
nameLabel.setPosition(0 + 260 / 2 - nameLabel.getWidth() / 2, 32);
146146
this.addActor(nameLabel);
147147
});
148148

149149
const populationIcon = new Actor({
150150
image: Game.getInstance().getImage(GameImage.SPRITESHEET),
151151
spriteRegion: SpriteRegion.POPULATION_ICON,
152-
x: 6,
152+
x: 10,
153153
y: 52,
154154
width: 32,
155155
height: 32
@@ -181,7 +181,7 @@ export class CityDisplayInfo extends ActorGroup {
181181
const moraleIcon = new Actor({
182182
image: Game.getInstance().getImage(GameImage.SPRITESHEET),
183183
spriteRegion: SpriteRegion.MORALE_ICON,
184-
x: 6,
184+
x: 10,
185185
y: populationIcon.getY() + 32,
186186
width: 32,
187187
height: 32
@@ -213,7 +213,7 @@ export class CityDisplayInfo extends ActorGroup {
213213
const foodIcon = new Actor({
214214
image: Game.getInstance().getImage(GameImage.SPRITESHEET),
215215
spriteRegion: SpriteRegion.FOOD_ICON,
216-
x: 6,
216+
x: 10,
217217
y: moraleIcon.getY() + 32,
218218
width: 32,
219219
height: 32
@@ -245,7 +245,7 @@ export class CityDisplayInfo extends ActorGroup {
245245
const productionIcon = new Actor({
246246
image: Game.getInstance().getImage(GameImage.SPRITESHEET),
247247
spriteRegion: SpriteRegion.PRODUCTION_ICON,
248-
x: 6,
248+
x: 10,
249249
y: foodIcon.getY() + 32,
250250
width: 32,
251251
height: 32
@@ -277,7 +277,7 @@ export class CityDisplayInfo extends ActorGroup {
277277
const goldIcon = new Actor({
278278
image: Game.getInstance().getImage(GameImage.SPRITESHEET),
279279
spriteRegion: SpriteRegion.GOLD_ICON,
280-
x: 6,
280+
x: 10,
281281
y: productionIcon.getY() + 32,
282282
width: 32,
283283
height: 32
@@ -309,7 +309,7 @@ export class CityDisplayInfo extends ActorGroup {
309309
const scienceIcon = new Actor({
310310
image: Game.getInstance().getImage(GameImage.SPRITESHEET),
311311
spriteRegion: SpriteRegion.SCIENCE_ICON,
312-
x: 6,
312+
x: 10,
313313
y: goldIcon.getY() + 32,
314314
width: 32,
315315
height: 32
@@ -341,7 +341,7 @@ export class CityDisplayInfo extends ActorGroup {
341341
const cultureIcon = new Actor({
342342
image: Game.getInstance().getImage(GameImage.SPRITESHEET),
343343
spriteRegion: SpriteRegion.CULTURE_ICON,
344-
x: 6,
344+
x: 10,
345345
y: scienceIcon.getY() + 32,
346346
width: 32,
347347
height: 32

‎client/src/ui/UnitDisplayInfo.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ export class UnitDisplayInfo extends ActorGroup {
9898
this.movementLabel.conformSize().then(() => {
9999
this.movementLabel.setPosition(
100100
this.x + this.width / 2 - this.movementLabel.getWidth() / 2,
101-
this.y + this.height - 20
101+
this.y + this.height - 25
102102
);
103103
});
104104
}
@@ -116,7 +116,7 @@ export class UnitDisplayInfo extends ActorGroup {
116116
icon: action.getIcon(),
117117
iconWidth: 32,
118118
iconHeight: 32,
119-
x: this.x + 5 + xOffset,
119+
x: this.x + 16 + xOffset,
120120
y: this.y + 28,
121121
width: 50,
122122
height: 50,

0 commit comments

Comments
 (0)