Skip to content

Commit a3b2385

Browse files
tesseralistesseralis
committed
Finish layout
1 parent d2bb744 commit a3b2385

File tree

1 file changed

+122
-97
lines changed

1 file changed

+122
-97
lines changed

‎src/nodes/Credits.ts‎

Lines changed: 122 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import "@pixi/layout";
2-
import { Point, Container, Graphics, HTMLText, Assets, Sprite } from "pixi.js";
2+
import { Container, HTMLText, Assets, Sprite, Texture } from "pixi.js";
33
import { HEIGHT, TEXT_FONT, theme, WIDTH } from "../constants";
4-
import { container } from "../util";
54
import GameNode from "./GameNode";
65
import ministryLogoPath from "../assets/img/ministry-logo.png";
76
import imaginaryLogoPath from "../assets/img/imaginary-logo.png";
87
import mpiLogoPath from "../assets/img/mpi-logo.png";
98
import { inputs } from "../inputs";
9+
import { LayoutContainer } from "@pixi/layout/components";
1010

1111
export default class Credits extends GameNode {
1212
onFinish?: () => void;
@@ -17,43 +17,27 @@ export default class Credits extends GameNode {
1717
this.view.layout = {
1818
width: WIDTH,
1919
height: HEIGHT,
20+
display: "flex",
21+
flexDirection: "column",
2022
justifyContent: "center",
2123
alignItems: "center",
24+
gap: 50,
2225
};
23-
const credits = new Container({
26+
const credits = new LayoutContainer({
2427
layout: {
28+
padding: 50,
2529
borderRadius: 20,
2630
backgroundColor: "#0008",
2731
borderColor: "white",
2832
borderWidth: 2,
33+
display: "flex",
34+
flexDirection: "column",
35+
alignItems: "center",
36+
gap: 20,
2937
},
3038
});
3139
this.view.addChild(credits);
32-
// this.view.position.x = WIDTH / 2;
33-
// this.view.position.y = HEIGHT / 2;
34-
35-
// const boxHeight = HEIGHT * 0.9;
36-
// const boxWidth = WIDTH * 0.9;
37-
// this.view.addChild(
38-
// container(
39-
// new Graphics().roundRect(
40-
// -boxWidth / 2,
41-
// -boxHeight / 2,
42-
// boxWidth,
43-
// boxHeight - 350
44-
// )
45-
// )
46-
// );
47-
// this.view.addChild(
48-
// container(
49-
// new Graphics().roundRect(
50-
// -boxWidth / 2,
51-
// boxHeight / 2 - 350,
52-
// boxWidth,
53-
// 350
54-
// )
55-
// ).fill("white")
56-
// );
40+
5741
const titleText = new HTMLText({
5842
layout: true,
5943
text: "Credits",
@@ -67,49 +51,63 @@ export default class Credits extends GameNode {
6751
});
6852
credits.addChild(titleText);
6953

70-
// titleText.anchor = { x: 0.5, y: 0.5 };
71-
// titleText.position.y = -HEIGHT / 2 + 144;
72-
// this.view.addChild(titleText);
73-
74-
// const width = WIDTH * 0.2;
75-
// this.drawCredit(
76-
// new Point(-width, -HEIGHT * 0.3),
77-
// "Concept & Development",
78-
// "Nat Alison"
79-
// );
80-
81-
// this.drawCredit(
82-
// new Point(-width, -HEIGHT * 0.2),
83-
// "Content & Coordination",
84-
// "Christian Stussak",
85-
// "Andreas Matt",
86-
// "Skye Rothstein"
87-
// );
88-
// this.drawCredit(new Point(-width, HEIGHT * 0), "Music", "Landis Seralian");
89-
// this.drawCredit(
90-
// new Point(width, -HEIGHT * 0.3),
91-
// "Support",
92-
// "Karla Schön",
93-
// "Oliver Schön"
94-
// );
95-
// this.drawCredit(
96-
// new Point(width, -HEIGHT * 0.125),
97-
// "Arcade Machine Graphic Design",
98-
// "Eric Londaits"
99-
// );
100-
// this.drawCredit(
101-
// new Point(width, HEIGHT * 0),
102-
// "Arcade Machine Building",
103-
// "Retr-O-Mat"
104-
// );
105-
// this.drawCredit(new Point(0, HEIGHT * 0.1), "Funded by", "BMFTR");
54+
const columns = new Container({
55+
layout: {
56+
display: "flex",
57+
gap: 75,
58+
},
59+
});
60+
credits.addChild(columns);
61+
62+
const column1 = new Container({
63+
layout: {
64+
display: "flex",
65+
flexDirection: "column",
66+
gap: 20,
67+
},
68+
});
69+
const column2 = new Container({
70+
layout: {
71+
display: "flex",
72+
flexDirection: "column",
73+
gap: 20,
74+
},
75+
});
76+
77+
columns.addChild(column1);
78+
columns.addChild(column2);
79+
80+
column1.addChild(this.drawCredit("Concept & Development", "Nat Alison"));
81+
82+
column1.addChild(
83+
this.drawCredit(
84+
"Content & Coordination",
85+
"Christian Stussak",
86+
"Andreas Matt",
87+
"Skye Rothstein"
88+
)
89+
);
90+
column1.addChild(this.drawCredit("Music", "Landis Seralian"));
91+
92+
column2.addChild(this.drawCredit("Support", "Karla Schön", "Oliver Schön"));
93+
column2.addChild(
94+
this.drawCredit("Arcade Machine Graphic Design", "Eric Londaits")
95+
),
96+
column2.addChild(
97+
this.drawCredit("Arcade Machine Building", "Retr-O-Mat")
98+
);
10699
}
107100

108-
drawCredit(position: Point, title: string, ...names: string[]) {
109-
const credit = new Container();
110-
credit.position = position;
111-
this.view.addChild(credit);
101+
drawCredit(title: string, ...names: string[]) {
102+
const credit = new Container({
103+
layout: {
104+
display: "flex",
105+
flexDirection: "column",
106+
alignItems: "center",
107+
},
108+
});
112109
const titleText = new HTMLText({
110+
layout: true,
113111
text: title,
114112
style: {
115113
align: "center",
@@ -119,11 +117,11 @@ export default class Credits extends GameNode {
119117
fontSize: 40,
120118
},
121119
});
122-
titleText.anchor = { x: 0.5, y: 0 };
123120
credit.addChild(titleText);
124121

125-
for (let [i, name] of names.entries()) {
122+
for (let [_i, name] of names.entries()) {
126123
const nameText = new HTMLText({
124+
layout: true,
127125
text: name,
128126
style: {
129127
align: "center",
@@ -133,10 +131,9 @@ export default class Credits extends GameNode {
133131
fontSize: 40,
134132
},
135133
});
136-
nameText.anchor = { x: 0.5, y: 0 };
137-
nameText.position.y = (i + 1) * 50;
138134
credit.addChild(nameText);
139135
}
136+
return credit;
140137
}
141138

142139
handleKeyDown = (e: KeyboardEvent) => {
@@ -152,11 +149,26 @@ export default class Credits extends GameNode {
152149
};
153150

154151
async load() {
155-
return;
156-
const fundedBy = new Container();
157-
fundedBy.position = { x: -WIDTH * 0.3, y: HEIGHT * 0.2 };
152+
const logos = new LayoutContainer({
153+
layout: {
154+
backgroundColor: "white",
155+
borderRadius: 20,
156+
display: "flex",
157+
gap: 100,
158+
padding: 50,
159+
},
160+
});
161+
162+
const fundedBy = new Container({
163+
layout: {
164+
display: "flex",
165+
flexDirection: "column",
166+
alignItems: "center",
167+
},
168+
});
158169
const ministryLogoTexture = await Assets.load(ministryLogoPath);
159170
const titleText = new HTMLText({
171+
layout: true,
160172
text: "Funded by",
161173
style: {
162174
align: "center",
@@ -166,20 +178,22 @@ export default class Credits extends GameNode {
166178
fontSize: 40,
167179
},
168180
});
169-
titleText.anchor = { x: 0.5, y: 0 };
170181
fundedBy.addChild(titleText);
171-
const sprite = new Sprite(ministryLogoTexture);
172-
sprite.anchor = { x: 0.5, y: 0 };
173-
sprite.position.y = 50;
174-
sprite.scale = 0.3;
175-
fundedBy.addChild(sprite);
176-
this.view.addChild(fundedBy);
177-
178-
const partOf = new Container();
179-
partOf.position = { x: WIDTH * 0.1, y: HEIGHT * 0.2 };
182+
fundedBy.addChild(this.drawImage(ministryLogoTexture, 250));
183+
logos.addChild(fundedBy);
184+
185+
const partOf = new Container({
186+
layout: {
187+
display: "flex",
188+
flexDirection: "column",
189+
alignItems: "center",
190+
gap: 20,
191+
},
192+
});
180193
const imaginaryLogoTexture = await Assets.load(imaginaryLogoPath);
181194
const mpiLogoTexture = await Assets.load(mpiLogoPath);
182195
const titleText2 = new HTMLText({
196+
layout: true,
183197
text: "Part of quantum-arcade.org by",
184198
style: {
185199
align: "center",
@@ -189,18 +203,29 @@ export default class Credits extends GameNode {
189203
fontSize: 40,
190204
},
191205
});
192-
titleText2.anchor = { x: 0.5, y: 0 };
193206
partOf.addChild(titleText2);
194-
const sprite1 = new Sprite(imaginaryLogoTexture);
195-
sprite1.anchor = { x: 0.5, y: 0 };
196-
sprite1.position = { x: -300, y: 100 };
197-
sprite1.scale = 0.5;
198-
const sprite2 = new Sprite(mpiLogoTexture);
199-
sprite2.anchor = { x: 0.5, y: 0 };
200-
sprite2.position = { x: 300, y: 50 };
201-
sprite2.scale = 0.5;
202-
partOf.addChild(sprite1);
203-
partOf.addChild(sprite2);
204-
this.view.addChild(partOf);
207+
const partOfSprites = new Container({
208+
layout: {
209+
display: "flex",
210+
alignItems: "center",
211+
justifyContent: "center",
212+
gap: 20,
213+
},
214+
});
215+
partOfSprites.addChild(this.drawImage(imaginaryLogoTexture, 300));
216+
partOfSprites.addChild(this.drawImage(mpiLogoTexture, 500));
217+
partOf.addChild(partOfSprites);
218+
logos.addChild(partOf);
219+
this.view.addChild(logos);
220+
}
221+
222+
drawImage(texture: Texture, width: number) {
223+
return new Sprite({
224+
texture,
225+
layout: {
226+
width,
227+
height: (width * texture.height) / texture.width,
228+
},
229+
});
205230
}
206231
}

0 commit comments

Comments
 (0)