Add: AppButton

src/game/lib/app_button.js

@@ -0,0 +1,64 @@
+class AppButton {
+
+	constructor(type, iconName, clickEvent) {
+		let setting = new RoundRectButtonSetting(150, 150);
+		setting.fontStyle.boundsAlignH = "center";	// left, center. right
+		setting.fontStyle.boundsAlignV = "middle";	// top, middle, bottom
+		setting.strokeWidthPx = 5;
+
+		if(type === AppButton.TYPE_MOUSE) {
+			setting.setStrokeColor(
+				0xaa6666,
+				0x884444,
+				0x884444,
+				0x333333
+			);
+			setting.setButtonColor(
+				0xffdddd,
+				0xddaaaa,
+				0xddaaaa,
+				0x666666
+			);
+			setting.setTextColor(
+				"#a66",
+				"#844",
+				"#844",
+				"#333"
+			);
+		} else {	// TYPE_TYPING
+			setting.setStrokeColor(
+				0x444488,
+				0x6666aa,
+				0x6666aa,
+				0x333333
+			);
+			setting.setButtonColor(
+				0xaaaadd,
+				0xddddff,
+				0xddddff,
+				0x666666
+			);
+			setting.setTextColor(
+				"#844",
+				"#a66",
+				"#a66",
+				"#333"
+			);
+		}
+
+		let icon_fullscreen = game.add.sprite(0, 0, iconName);
+		icon_fullscreen.width = 80;
+		icon_fullscreen.height = 80;
+
+		this.button = new RoundRectButton(setting, "", clickEvent);
+		this.button.setIcon(icon_fullscreen);
+	}
+
+	move(x, y) {
+		this.button.move(x, y);
+	}
+
+}
+
+AppButton.TYPE_MOUSE	= 0;
+AppButton.TYPE_TYPING	= 1;

src/game/lib/back_button.js

@@ -24,8 +24,8 @@ class BackButton {
 			"#333"
 		);
 
-		this.button = new RoundRectButton(setting, "<", clickEvent);
-		this.button.move(30, 30);
+		let button = new RoundRectButton(setting, "<", clickEvent);
+		button.move(30, 30);
 	}
 
 }

src/game/menu/menu_app.js

@@ -10,6 +10,7 @@ let MenuApp = {
 	create: function() {
 		this.game.stage.backgroundColor = '#4d4d4d';
 
+		// top
 		let backButton = new BackButton( () => {
 			sessionStorage.removeItem("playerName");
 			sessionStorage.removeItem("playerUserID");
@@ -19,6 +20,24 @@ let MenuApp = {
 
 		let fullscreenButton = new FullscreenButton(this.game);
 
+
+		// app icons
+		let space_invaders = new AppButton(AppButton.TYPE_MOUSE, "icon_fullscreen",
+			() => {
+				console.log("space invaders");
+			}
+		);
+		space_invaders.move(400, 400);
+
+		let typing_practice = new AppButton(AppButton.TYPE_TYPING, "icon_fullscreen",
+			() => {
+				console.log("typing practice");
+			}
+		);
+		typing_practice.move(600, 400);
+
+
+		// bottom
 		let screenBottom = new ScreenBottom(game);
 		screenBottom.makeBottomLine();
 		// screenBottom.printBottomLeftText("게임 진행 정보");

src/web/client/menu_app.html

@@ -16,6 +16,7 @@
 		<script src="../../game/lib/round_rect_button.js"></script>
 		<script src="../../game/lib/back_button.js"></script>
 		<script src="../../game/lib/fullscreen_button.js"></script>
+		<script src="../../game/lib/app_button.js"></script>
 		<script src="../../game/lib/screen_bottom.js"></script>
 
 		<!-- source files -->