115 lines
3.7 KiB
JavaScript
115 lines
3.7 KiB
JavaScript
/**
|
|
* @file This file provides a screen for the user to login through
|
|
* @author Arlo Filley
|
|
*
|
|
* TODO:
|
|
* - move into an seperated account page with signup and logout
|
|
* - make passwords not display plain text
|
|
*/
|
|
|
|
/**
|
|
* this class displays a number of textboxes that allows the user to input a
|
|
* username and password. Then find out the user_id of that account through the
|
|
* necessary api routes.
|
|
*/
|
|
class AccountScreen {
|
|
constructor() {
|
|
this.textboxes = [
|
|
new Textbox(
|
|
120, 350, 500, 100, 0, true, "#000", false,
|
|
"#000", "#000", true
|
|
),
|
|
|
|
new Textbox(
|
|
120, 500, 500, 100, 0, true, "#000", false,
|
|
"#000", "#000", false, false, true
|
|
)
|
|
]
|
|
|
|
this.buttons = [
|
|
new Button(100, 300, 500, 100, "", false, true, "#000", "#000", "#fff", "#000", "#000", "#fff"),
|
|
new Button(100, 450, 500, 100, "", false, true, "#000", "#000", "#fff", "#000", "#000", "#fff"),
|
|
new Button(900, 300, 100, 50, "Login"),
|
|
new Button(900, 400, 100, 50, "Sign up"),
|
|
new Button(900, 500, 100, 50, "Logout"),
|
|
]
|
|
|
|
this.menu = new Menu();
|
|
|
|
// keeps track of which textbox the user last clicked on
|
|
this.activeTextBox = 0
|
|
}
|
|
|
|
/**
|
|
* Draws the SignUpScreen class with all
|
|
* appropriate elements
|
|
*/
|
|
draw() {
|
|
textSize(100);
|
|
fill(user.colorScheme.text);
|
|
text("Account", 300, 100);
|
|
for (let i = 0; i < this.buttons.length; i++) {
|
|
this.buttons[i].draw();
|
|
}
|
|
|
|
for (let i = 0; i < this.textboxes.length; i++) {
|
|
this.textboxes[i].draw();
|
|
}
|
|
|
|
textSize(30);
|
|
text("Username", 110, 275);
|
|
text("Password", 110, 425);
|
|
|
|
if (this.buttons[0].isPressed()) {
|
|
this.textboxes[this.activeTextBox].line = false;
|
|
this.activeTextBox=0;
|
|
this.textboxes[this.activeTextBox].line = true;
|
|
} else if (this.buttons[1].isPressed()) {
|
|
this.textboxes[this.activeTextBox].line = false;
|
|
this.activeTextBox=1;
|
|
this.textboxes[this.activeTextBox].line = true;
|
|
} else if (this.buttons[2].isPressed()) {
|
|
api.login(
|
|
this.textboxes[0].getWords(),
|
|
this.textboxes[1].getWords()
|
|
)
|
|
screenManager.setScreen(new StartScreen());
|
|
} else if (this.buttons[3].isPressed()) {
|
|
api.createUser(
|
|
this.textboxes[0].getWords(),
|
|
this.textboxes[1].getWords()
|
|
)
|
|
screenManager.setScreen(new StartScreen());
|
|
} else if (this.buttons[4].isPressed()) {
|
|
api.logout();
|
|
screenManager.setScreen(new StartScreen());
|
|
}
|
|
this.menu.draw();
|
|
fill(user.colorScheme.text);
|
|
text(`Logged in as ${user.username}`, windowWidth-150, 15);
|
|
}
|
|
|
|
/**
|
|
*
|
|
* @param {key} key
|
|
*/
|
|
letterTyped(key) {
|
|
if (key === "Tab" && this.activeTextBox === 0) {
|
|
this.textboxes[this.activeTextBox].line = false;
|
|
this.activeTextBox=1;
|
|
this.textboxes[this.activeTextBox].line = true;
|
|
} else if (key === "Tab" && this.activeTextBox === 1) {
|
|
this.textboxes[this.activeTextBox].line = false;
|
|
this.activeTextBox=0;
|
|
this.textboxes[this.activeTextBox].line = true;
|
|
} else if (key === "Enter") {
|
|
api.login(
|
|
this.textboxes[0].getWords(),
|
|
this.textboxes[1].getWords()
|
|
)
|
|
screenManager.setScreen(new StartScreen());
|
|
} else {
|
|
this.textboxes[this.activeTextBox].letterTyped(key);
|
|
}
|
|
}
|
|
} |