Skip to content

Commit b9b87f5

Browse files
CyberDexCyberDex
committed
add login form
1 parent f291382 commit b9b87f5

File tree

9 files changed

+237
-63
lines changed

9 files changed

+237
-63
lines changed

‎package-lock.json‎

Lines changed: 5 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,9 @@
1818
"dependencies": {
1919
"pixi.js": "^8.3.3",
2020
"@pixi/layout": "^2.0.1",
21-
"@pixi/ui": "^2.1.3",
22-
"gsap": "^3.11.4"
21+
"@pixi/ui": "^2.1.5",
22+
"gsap": "^3.11.4",
23+
"pixi.js": "^8.6.1"
2324
},
2425
"devDependencies": {
2526
"eslint": "^8.32.0",

‎src/components/basic/Background.ts‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Layout } from '@pixi/layout';
2-
import { Assets, Sprite } from 'pixi.js';
2+
import { Sprite } from 'pixi.js';
33
import { PixiLogo } from '../PixiLogo';
44

55
/* Layout based component for the background.
@@ -9,9 +9,6 @@ import { PixiLogo } from '../PixiLogo';
99

1010
export class Background extends Layout {
1111
constructor() {
12-
const bg = Sprite.from('bg');
13-
console.log('bg', bg.texture.label);
14-
console.log('bg in cache?', Assets.cache.has('bg'));
1512
super({
1613
id: 'gameBackground', // id is used to identify the Layout in the system
1714
content: {

‎src/components/windows/LoginWindow.ts‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
import { colors } from './../../config/colors';
2+
import { NineSliceSprite, Texture } from 'pixi.js';
3+
import i18n from '../../config/i18n';
4+
import { Button } from '../basic/Button';
5+
import { Window } from '../basic/Window';
6+
import { Input } from '@pixi/ui';
7+
import { CheckBox } from '../CheckBox';
8+
import { type ViewController } from '../../controllers/ViewController';
9+
import { Windows } from '../../config/windows';
10+
11+
/** Game menu component. */
12+
export class LoginWindow extends Window {
13+
constructor(private views: ViewController) {
14+
const substrateTexture = Texture.from('MenuWindow');
15+
16+
const background = new NineSliceSprite({
17+
texture: substrateTexture,
18+
leftWidth: 100,
19+
topHeight: 100,
20+
rightWidth: 100,
21+
bottomHeight: 200,
22+
});
23+
24+
// give config differences to the Window base component
25+
super({
26+
// Window constructor accepts an object with all the config
27+
title: i18n.titleScreen.login.title, // menu title text
28+
styles: {
29+
// styles is an object with all the styles that will be applied to the window
30+
background: background, // menu window background
31+
width: 700,
32+
height: 700,
33+
maxHeight: '80%', // set max height to 80% of parent, so it will scale down to fit the screen height on canvas resize
34+
maxWidth: '95%', // set max width to 95% of parent, so it will scale down to fit the screen width on canvas resize
35+
},
36+
ribbonStyles: {
37+
// ribbonStyles is an object with all the styles that will be applied to the ribbon layout
38+
marginTop: -34, // move the ribbon 27px up from the top of the parent
39+
scale: 0.7, // scale the ribbon sprite to 70% of it's original size
40+
},
41+
});
42+
}
43+
44+
/** Create content of the component. Automatically called by extended class (see Window.ts). */
45+
override createContent() {
46+
const loginInput = new Input({
47+
bg: 'input',
48+
nineSliceSprite: [160, 27, 160, 27],
49+
textStyle: {
50+
// styles of the text
51+
fill: colors.text, // color of the text
52+
fontSize: 30, // font size of the text,
53+
stroke: { width: 3, color: colors.hoverStroke }, // text stroke thickness
54+
},
55+
align: 'center',
56+
placeholder: i18n.titleScreen.login.items.login,
57+
addMask: true,
58+
cleanOnFocus: true,
59+
});
60+
61+
loginInput.width = 450;
62+
loginInput.height = 60;
63+
64+
const passwordInput = new Input({
65+
bg: 'input',
66+
nineSliceSprite: [160, 27, 160, 27],
67+
textStyle: {
68+
// styles of the text
69+
fill: colors.text, // color of the text
70+
fontSize: 30, // font size of the text,
71+
stroke: { width: 3, color: colors.hoverStroke }, // text stroke thickness
72+
},
73+
align: 'center',
74+
placeholder: i18n.titleScreen.login.items.password,
75+
addMask: true,
76+
});
77+
78+
passwordInput.width = 450;
79+
passwordInput.height = 60;
80+
81+
const remember = new CheckBox({
82+
// create a new CheckBox component (see CheckBox.ts)
83+
text: i18n.titleScreen.login.items.remember, // text of the checkbox
84+
checked: true, // initial state of the checkbox
85+
checkboxBG: 'RoundSubstrate', // background of the checkbox
86+
checkboxFG: 'CheckBox', // foreground of the checkbox
87+
onChange: () => {
88+
console.log('remember me'); // callback function that will be called when the checkbox state changes
89+
}, // callback function that will be called when the checkbox state changes
90+
textOffset: {
91+
// offset of the text from the checkbox
92+
x: 20, // move the text 300px to the left from the checkbox
93+
y: 0, // move the text 3px down from the checkbox
94+
},
95+
});
96+
97+
const enterButton = new Button( // create an exit button
98+
i18n.titleScreen.login.items.enter, // button text
99+
() => {
100+
console.table({
101+
login: loginInput.value,
102+
password: passwordInput.value,
103+
remember: remember.checked,
104+
});
105+
106+
// TODO: implement check login errors here
107+
108+
this.views.show(Windows.levels);
109+
},
110+
);
111+
112+
enterButton.scale.set(0.5);
113+
114+
this.addContent({
115+
// add the buttons to the window layout system
116+
menu: {
117+
// menu is the id of the layout
118+
content: {
119+
login: {
120+
// login is the id of the input
121+
content: loginInput, // content is the button component
122+
styles: {
123+
// styles is an object with all the styles that will be applied to the button
124+
marginTop: 30, // move the button 10px down from the neighbour buttons
125+
},
126+
},
127+
password: {
128+
// login is the id of the input
129+
content: passwordInput, // content is the button component
130+
styles: {
131+
// styles is an object with all the styles that will be applied to the button
132+
marginTop: 30, // move the button 10px down from the neighbour buttons
133+
},
134+
},
135+
remember: {
136+
// exit is the id of the button
137+
content: remember, // content is the button component
138+
styles: {
139+
// styles is an object with all the styles that will be applied to the button
140+
marginTop: 30,
141+
marginLeft: 40,
142+
},
143+
},
144+
exit: {
145+
// exit is the id of the button
146+
content: enterButton, // content is the button component
147+
styles: {
148+
// styles is an object with all the styles that will be applied to the button
149+
marginTop: -20, // move the button 10px down from the neighbour buttons
150+
marginLeft: 45,
151+
},
152+
},
153+
},
154+
styles: {
155+
// styles is an object with all the styles that will be applied to the layout
156+
position: 'centerTop', // center the layout in the middle of the parent
157+
marginTop: 120, // move the layout 120px down from the top of the parent
158+
width: 450, // set width to 66% of parent, so children will be able to use 66% of the screen width
159+
},
160+
},
161+
});
162+
}
163+
}

‎src/components/windows/PauseWindow.ts‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -52,9 +52,9 @@ export class PauseWindow extends Window {
5252
() => this.views.show(Windows.settings), // callback: show the settings window on click
5353
);
5454

55-
const exitButton = new Button( // create an exit button
56-
i18n.titleScreen.menu.items.exit, // button text
57-
() => console.log('exit'), // callback: log exit on click (TODO: implement exit)
55+
const loginButton = new Button( // create an exit button
56+
i18n.titleScreen.menu.items.login, // button text
57+
() => this.views.show(Windows.login), // callback: show the settings window on click
5858
);
5959

6060
this.addContent({
@@ -63,33 +63,33 @@ export class PauseWindow extends Window {
6363
// menu is the id of the layout
6464
content: {
6565
// content is the layout config object with all the buttons and their styles configs
66-
levels: {
67-
// levels is the id of the button
68-
content: levelsButton, // content is the button component
66+
replay: {
67+
// replay is the id of the button
68+
content: replayButton, // content is the button component
6969
styles: {
7070
// styles is an object with all the styles that will be applied to the button
7171
marginTop: 10, // move the button 10px down from the neighbour buttons
7272
},
7373
},
74-
replay: {
75-
// replay is the id of the button
76-
content: replayButton, // content is the button component
74+
login: {
75+
// exit is the id of the button
76+
content: loginButton, // content is the button component
7777
styles: {
7878
// styles is an object with all the styles that will be applied to the button
7979
marginTop: 10, // move the button 10px down from the neighbour buttons
8080
},
8181
},
82-
settings: {
83-
// settings is the id of the button
84-
content: settingsButton, // content is the button component
82+
levels: {
83+
// levels is the id of the button
84+
content: levelsButton, // content is the button component
8585
styles: {
8686
// styles is an object with all the styles that will be applied to the button
8787
marginTop: 10, // move the button 10px down from the neighbour buttons
8888
},
8989
},
90-
exit: {
91-
// exit is the id of the button
92-
content: exitButton, // content is the button component
90+
settings: {
91+
// settings is the id of the button
92+
content: settingsButton, // content is the button component
9393
styles: {
9494
// styles is an object with all the styles that will be applied to the button
9595
marginTop: 10, // move the button 10px down from the neighbour buttons

‎src/config/i18n.ts‎

Lines changed: 43 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -2,50 +2,59 @@
22
// To be replaced with a i18n controller to manage languages
33
export default {
44
loadingScreen: {
5-
loading: "LOADING",
6-
poweredBy: "POWERED BY",
5+
loading: 'LOADING',
6+
poweredBy: 'POWERED BY',
77
},
88
titleScreen: {
9-
levels: "LEVELS",
9+
levels: 'LEVELS',
1010
settings: {
11-
title: "SETTINGS",
12-
save: "SAVE",
13-
GFX: "GFX",
14-
low: "LOW",
15-
medium: "MEDIUM",
16-
high: "HIGH",
17-
BGM: "BGM",
18-
SFX: "SFX",
19-
GPU: "GPU",
20-
antiAliasing: "ANTI-ALIASING",
21-
subtitles: "SUBTITLES",
22-
cutScenes: "CUT SCENES",
11+
title: 'SETTINGS',
12+
save: 'SAVE',
13+
GFX: 'GFX',
14+
low: 'LOW',
15+
medium: 'MEDIUM',
16+
high: 'HIGH',
17+
BGM: 'BGM',
18+
SFX: 'SFX',
19+
GPU: 'GPU',
20+
antiAliasing: 'ANTI-ALIASING',
21+
subtitles: 'SUBTITLES',
22+
cutScenes: 'CUT SCENES',
2323
},
2424
info: {
25-
title: "INFO",
26-
accept: "ACCEPT",
27-
decline: "DECLINE",
25+
title: 'INFO',
26+
accept: 'ACCEPT',
27+
decline: 'DECLINE',
2828
},
2929
menu: {
30-
title: "MENU",
30+
title: 'MENU',
3131
items: {
32-
levels: "LEVELS",
33-
replay: "REPLAY",
34-
settings: "SETTINGS",
35-
exit: "EXIT",
36-
}
32+
levels: 'LEVELS',
33+
replay: 'REPLAY',
34+
settings: 'SETTINGS',
35+
login: 'LOG IN',
36+
},
37+
},
38+
login: {
39+
title: 'Login',
40+
items: {
41+
login: 'Login',
42+
password: 'Password',
43+
enter: 'Enter',
44+
remember: 'Remember me',
45+
},
3746
},
3847
iconsMenu: {
39-
'home': 'HOME',
40-
'info': 'INFO',
41-
'settings': 'SETTINGS',
42-
'play': 'PLAY'
43-
}
48+
home: 'HOME',
49+
info: 'INFO',
50+
settings: 'SETTINGS',
51+
play: 'PLAY',
52+
},
4453
},
4554
gameScreen: {
46-
level: "LEVEL",
55+
level: 'LEVEL',
4756
tutorial: {
48-
hello: "Hello",
49-
}
50-
}
51-
}
57+
hello: 'Hello',
58+
},
59+
},
60+
};

‎src/config/windows.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
export enum Windows {
2+
login = 0,
23
pause = 1,
34
levels = 2,
45
settings = 3,
56
info = 4,
67
}
7-

0 commit comments

Comments
 (0)