Drafted character selection.

frontend/assets/scripts/CharacterSelectCell.js

@@ -0,0 +1,41 @@
+cc.Class({
+  extends: cc.Component,
+  properties: {
+    panelNode: {
+      type: cc.Node,
+      default: null
+    },
+    chosenFlag: {
+      type: cc.Sprite,
+      default: null
+    },
+    avatarNode: {
+      type: cc.Button,
+      default: null
+    },
+    animNode: {
+      type: cc.Node,
+      default: null
+    },
+    speciesId: {
+      type: cc.Integer,
+      default: 0
+    },
+  },
+
+  ctor() {},
+
+  setInteractable(enabled) {
+    this.avatarNode.interactable = enabled;
+  },
+
+  onLoad() {
+    const avatarNodeClickEventHandler = new cc.Component.EventHandler();
+    avatarNodeClickEventHandler.target = this.panelNode;
+    avatarNodeClickEventHandler.component = "GameRule";
+    avatarNodeClickEventHandler.handler = "onSpeciesSelected";
+    avatarNodeClickEventHandler.customEventData = this.speciesId;
+    this.avatarNode.clickEvents.push(avatarNodeClickEventHandler);
+  },
+});
+

frontend/assets/scripts/CharacterSelectCell.js.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.0.5",
+  "uuid": "6dd2c047-fa5c-4080-8221-27fabfd275d6",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}

frontend/assets/scripts/GameRule.js

@@ -10,15 +10,29 @@ cc.Class({
       type: cc.Node,
       default: null
     },
+    characterSelectCells: {
+      type: cc.Node,
+      default: []
+    },
   },
 
   // LIFE-CYCLE CALLBACKS:
   onLoad() {
     const modeBtnClickEventHandler = new cc.Component.EventHandler();
-    modeBtnClickEventHandler.target = this.mapNode; 
+    modeBtnClickEventHandler.target = this.mapNode;
     modeBtnClickEventHandler.component = "Map";
     modeBtnClickEventHandler.handler = "onGameRule1v1ModeClicked";
     this.modeButton.clickEvents.push(modeBtnClickEventHandler);
-  }
-  
+  },
+
+  onSpeciesSelected(val) {
+    for (let cell of this.characterSelectCells) {
+      const comp = cell.getComponent("CharacterSelectCell");
+      if (cell.speciesId != val) {
+        cell.chosenFlag.active = false;
+      } else {
+        cell.chosenFlag.active = true;
+      }
+    }
+  },
 });