tictactoe/world_classic_selection.js

/* allows the user to select:
 * between 2-6 players
 * who is player and who is AI
 * the size of the stage
 */
class WorldClassicSelection extends World {

	/* this worlds assets */
	assets() {
		return [
			"images/stage_empty.png",
			"images/button_up.png",
			"images/button_down.png",
		];
	}

	/* get mode from parent world */
	constructor(data) {
		super(data);

		/* either "classic" or "time" */
		this.mode = data.mode;

	} /* constructor */

	/* initialize */
	start() {

		/* data */
		this.max_players = 2;
		this.ai = [];
		this.returner = {};
		this.returner.ai = this.ai;
		this.returner.stage_x = 3;
		this.returner.stage_y = 3;

		/* everyone is initialized as player */
		for (let i = 0; i < this.max_players; i++) {
			this.ai.push(false);
		}
		
		/* text style */
		let style = new PIXI.TextStyle({
			fill: "#ff0000",
			fontSize: 30,
		});

		/* player buttons */
		this.button_players = [];
		this.text_players = [];

		/* add buttons in row, then calculate their position */
		for (let i = 0; i < this.max_players; i++) {
			this.add_player_button();
		}
		this.relocate_buttons();

		/* update player text */
		this.update_text();

		/* add player button */
		this.button_add = new PIXI.Sprite(
			loader.resources["images/button_up.png"].texture
		);
		this.button_add.anchor = {x:0.5, y:0.5};
		this.button_add.x = width*2/3;
		this.button_add.y = height/3;
		app.stage.addChild(this.button_add);

		/* remove player button */
		this.button_remove = new PIXI.Sprite(
			loader.resources["images/button_down.png"].texture
		);
		this.button_remove.anchor = {x:0.5, y:0.5};
		this.button_remove.x = width/3;
		this.button_remove.y = height/3;
		app.stage.addChild(this.button_remove);

		/* add bigger stage buttons */
		this.button_bigX = new PIXI.Sprite(
			loader.resources["images/button_up.png"].texture
		);
		this.button_bigX.anchor = {x:0.5, y:0.5};
		this.button_bigX.x = width*2/3;
		this.button_bigX.y = height*2/3;
		app.stage.addChild(this.button_bigX);

		this.button_bigY = new PIXI.Sprite(
			loader.resources["images/button_up.png"].texture
		);
		this.button_bigY.anchor = {x:0.5, y:0.5};
		this.button_bigY.x = width*4/5;
		this.button_bigY.y = height*2/3;
		app.stage.addChild(this.button_bigY);

		/* add smaller stage buttons */
		this.button_smallX = new PIXI.Sprite(
			loader.resources["images/button_down.png"].texture
		);
		this.button_smallX.anchor = {x:0.5, y:0.5};
		this.button_smallX.x = width/3;
		this.button_smallX.y = height*2/3;
		app.stage.addChild(this.button_smallX);

		this.button_smallY = new PIXI.Sprite(
			loader.resources["images/button_down.png"].texture
		);
		this.button_smallY.anchor = {x:0.5, y:0.5};
		this.button_smallY.x = width/5;
		this.button_smallY.y = height*2/3;
		app.stage.addChild(this.button_smallY);

		/* add stage size text */
		this.text_size = new PIXI.Text(
			"hello world", {
				fill: "#ff0000",
			});
		this.text_size.anchor = {x:0.5, y:0.5};
		this.text_size.x = width/2;
		this.text_size.y = this.button_bigX.y;
		app.stage.addChild(this.text_size);
		this.update_size();

		/* start game button */
		this.button_start = new PIXI.Sprite(
			loader.resources["images/stage_empty.png"].texture
		);
		this.button_start.anchor = {x:0.5, y:0.5};
		this.button_start.x = width/2;
		this.button_start.y = height*4/5;
		app.stage.addChild(this.button_start);

	} /* start */

	/* handle button touch */
	update() {

		/* handle input */
		for (let e = 0; e < input.length; e++) {

			/* left click */
			if (input[e].which == 1) {

				/* click point */
				let p = new PIXI.Point(
					input[e].offsetX, input[e].offsetY
				);

				/* clicked one of player buttons
				 * change between player and AI
				 */
				for (let i = 0; i < this.button_players.length; i++) {
					if (this.button_players[i].containsPoint(p)) {
						this.ai[i] = !this.ai[i];
						this.update_text();
					}
				}

				/* add new player - max 6 */
				if (this.button_add.containsPoint(p)) {
					if (this.max_players < 6) {
						this.max_players++;
						this.add_player_button();
						this.relocate_buttons();
						this.ai.push(false);
						this.update_text();
					}
				}

				/* remove player - min 2 */
				if (this.button_remove.containsPoint(p)) {
					if (this.max_players > 2) {
						this.max_players--;
						this.remove_player_button();
						this.relocate_buttons();
						this.ai.pop();
					}
				}

				/* bigger stage x */
				if (this.button_bigX.containsPoint(p)) {
					if (this.returner.stage_x < 12) {
						this.returner.stage_x++;
						this.update_size();
					}
				}

				/* bigger stage y */
				if (this.button_bigY.containsPoint(p)) {
					if (this.returner.stage_y < 12) {
						this.returner.stage_y++;
						this.update_size();
					}
				}

				/* smaller stage x */
				if (this.button_smallX.containsPoint(p)) {
					if (this.returner.stage_x > 3) {
						this.returner.stage_x--;
						this.update_size();
					}
				}

				/* smaller stage y */
				if (this.button_smallY.containsPoint(p)) {
					if (this.returner.stage_y > 3) {
						this.returner.stage_y--;
						this.update_size();
					}
				}

				/* start game */
				if (this.button_start.containsPoint(p)) {
					this.returner.max_players = this.max_players;
					this.returner.mode = this.mode;
					return world_list.indexOf(WorldTicTacToe);
				}

			} /* left click */

		} /* handle input */

	} /* update */

	/* for each player update its text */
	update_text() {
		for (let i = 0; i < this.ai.length; i++) {
			if (!this.ai[i]) {
				this.text_players[i].text = "player";
			}
			else {
				this.text_players[i].text = "computer";
			}
		}
	} /* update text */

	/* update stage size */
	update_size() {
		this.text_size.text =
			this.returner.stage_x +"x"
			+this.returner.stage_y;
	} /* update stage size */

	/* add player button in array
	 * must call "relocate" afterwards to
	 * place them all in correct position
	 */
	add_player_button() {

		/* text style */
		let style = new PIXI.TextStyle({
			fill: "#ff0000",
			fontSize: 30,
		});

		/* button */
		let button = new PIXI.Sprite(
			loader.resources["images/stage_empty.png"].texture
		);
		button.anchor = {x:0.5, y:0.5};
		app.stage.addChild(button);
		this.button_players.push(button);
	
		/* text */
		let text = new PIXI.Text(
			"playerxxxx", style);
		text.anchor = {x:0.5, y:0.5};
		app.stage.addChild(text);
		this.text_players.push(text);

	} /* add player button */

	/* remove player button,
	 * must call relocate afterwards
	 */
	remove_player_button() {
		app.stage.removeChild(
			this.button_players[this.button_players.length-1]
		);
		app.stage.removeChild(
			this.text_players[this.text_players.length-1]
		);
		this.button_players.pop();
		this.text_players.pop();
	} /* remove player button */

	/* places all player buttons in the correct position */
	relocate_buttons() {

		for (let i = 0; i < this.max_players; i++) {

			/* button */
			let button = this.button_players[i];
			button.x = width*(i+1)/(this.max_players+1);
			button.y = 50;
	
			/* text */
			let text = this.text_players[i];
			text.x = button.x;
			text.y = button.y;

		}

	} /* relocate buttons */

} /* world classic selection */