UI Shop

assets/Prefab/UI/Shop/Skin.prefab

@@ -37,10 +37,13 @@
       },
       {
         "__id__": 20
+      },
+      {
+        "__id__": 21
       }
     ],
     "_prefab": {
-      "__id__": 21
+      "__id__": 23
     },
     "_opacity": 255,
     "_color": {
@@ -517,7 +520,7 @@
       "ctor": "Float64Array",
       "array": [
         0,
-        0,
+        4,
         0,
         0,
         0,
@@ -742,16 +745,104 @@
       "__id__": 1
     },
     "_enabled": true,
-    "id": 0,
-    "lock": null,
-    "worm": null,
-    "selected": null,
-    "iconChecked": null,
-    "btnBuy": null,
-    "btnEquip": null,
-    "txtEquip": null,
+    "lock": {
+      "__id__": 11
+    },
+    "worm": {
+      "__id__": 6
+    },
+    "selected": {
+      "__id__": 2
+    },
+    "iconChecked": {
+      "__id__": 8
+    },
+    "_id": ""
+  },
+  {
+    "__type__": "cc.Button",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 1
+    },
+    "_enabled": true,
+    "_normalMaterial": null,
+    "_grayMaterial": null,
+    "duration": 0.1,
+    "zoomScale": 1.2,
+    "clickEvents": [
+      {
+        "__id__": 22
+      }
+    ],
+    "_N$interactable": true,
+    "_N$enableAutoGrayEffect": false,
+    "_N$transition": 0,
+    "transition": 0,
+    "_N$normalColor": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_N$pressedColor": {
+      "__type__": "cc.Color",
+      "r": 211,
+      "g": 211,
+      "b": 211,
+      "a": 255
+    },
+    "pressedColor": {
+      "__type__": "cc.Color",
+      "r": 211,
+      "g": 211,
+      "b": 211,
+      "a": 255
+    },
+    "_N$hoverColor": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "hoverColor": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_N$disabledColor": {
+      "__type__": "cc.Color",
+      "r": 124,
+      "g": 124,
+      "b": 124,
+      "a": 255
+    },
+    "_N$normalSprite": null,
+    "_N$pressedSprite": null,
+    "pressedSprite": null,
+    "_N$hoverSprite": null,
+    "hoverSprite": null,
+    "_N$disabledSprite": null,
+    "_N$target": {
+      "__id__": 1
+    },
     "_id": ""
   },
+  {
+    "__type__": "cc.ClickEvent",
+    "target": {
+      "__id__": 1
+    },
+    "component": "",
+    "_componentId": "4d091K6DTxNJaD2gMqaswNB",
+    "handler": "onSelected",
+    "customEventData": ""
+  },
   {
     "__type__": "cc.PrefabInfo",
     "root": {

assets/Scripts/Data/LocalStorage.ts

@@ -58,8 +58,12 @@ export default class LocalStorage {
 
     public static getWormActive(): [number] {
         let arrayStr = cc.sys.localStorage.getItem(GAME_NAME + '-' + WORM_ACTIVE);
-        let array = arrayStr ? JSON.parse(arrayStr) : [0];
-        return array;
+        if (arrayStr) {
+            return JSON.parse(arrayStr)
+        } else {
+            cc.sys.localStorage.setItem(GAME_NAME + '-' + WORM_ACTIVE, JSON.stringify([0]))
+            return [0];
+        }
     }
 
     public static getLevel(): number {

assets/Scripts/UI/Popup/ItemSkin.ts

@@ -5,12 +5,14 @@
 // Learn life-cycle callbacks:
 //  - https://docs.cocos.com/creator/2.4/manual/en/scripting/life-cycle-callbacks.html
 
+import LocalStorage from "../../Data/LocalStorage";
+import ShopSkin from "./ShopSkin";
+
 const {ccclass, property} = cc._decorator;
 
 @ccclass
 export default class ItemSkin extends cc.Component {
 
-    @property
     id: number = 0;
 
     @property(cc.Node)
@@ -25,24 +27,20 @@ export default class ItemSkin extends cc.Component {
     @property(cc.Node)
     iconChecked: cc.Node = null;
     
-    @property(cc.Node)
-    btnBuy: cc.Node = null;
-
-    @property(cc.Node)
-    btnEquip: cc.Node = null;
-
-    @property(cc.Label)
-    txtEquip: cc.Label = null;
-    
     isLock: boolean = true;
     isSlected: boolean = true;
+    skinWorm: cc.SpriteFrame = null;
+
+    shop: ShopSkin = null;
 
-    updateSkin(data){
+    updateSkin(data, shopSkin: ShopSkin){
+        this.shop = shopSkin;
+        this.skinWorm = data.skin;
         this.id = data.id;
         this.worm.spriteFrame = data.skin;
         this.isSlected = data.isSelected;
         this.isLock = data.isLock;
-        if (this.isLock) {
+        if (!this.isLock) {
             this.lock.active = true;
             this.selected.active = false;
             this.iconChecked.active = false;
@@ -50,22 +48,51 @@ export default class ItemSkin extends cc.Component {
         if (data.isSelected) {
             this.selected.active = true;
         }
-
     }
 
     onSelected(){
+        this.shop.disableSelected();
+        this.shop.idClick = this.id;
+        this.shop.showSkin.spriteFrame = this.skinWorm;
+        this.shop.scaleWorm();
         this.selected.active = true;
-        if (this.isLock) {
-            this.btnEquip.active = false;
-            this.btnBuy.active = true;
+        if (!this.isLock) {
+            this.shop.btnEquip.active = false;
+            this.shop.btnBuy.active = true;
         }else{
-            this.btnEquip.active = false;
-            this.btnBuy.active = true;
+            this.shop.btnEquip.active = true;
+            this.shop.btnBuy.active = false;
             if (this.isSlected) {
-                this.txtEquip.string = "Equipped";
+                this.shop.txtEquip.string = "Equipped";
             }else{
-                this.txtEquip.string = "Equip";
+                this.shop.txtEquip.string = "Equip";
             }
         }
     }
+
+    openWorm(){
+        this.shop.disableChecked();
+        this.isSlected = true;
+        this.isLock = true;
+        this.selected.active = true;
+        this.shop.showSkin.spriteFrame = this.skinWorm;
+        this.shop.scaleWorm();
+        this.shop.btnEquip.active = true;
+        this.shop.btnBuy.active = false;
+        this.iconChecked.active = true;
+        this.lock.active = false;
+        this.shop.txtEquip.string = "Equipped";
+        LocalStorage.setWormActive(this.id);
+        LocalStorage.setWormSelected(this.id);
+    }
+
+
+    onActiveSelected(isActive: boolean){
+        this.selected.active = isActive;
+    }
+
+    onActiveChecked(isActive: boolean){
+        this.iconChecked.active = isActive;
+    }
+
 }

assets/Scripts/UI/Popup/ShopSkin.ts

 import LocalStorage from "../../Data/LocalStorage";
+import MainScreen from "../Screen/MainScreen";
 import UIManager from "../UIManager";
 import ItemSkin from "./ItemSkin";
 import PopupUI, { PopupName } from "./PopupUI";
@@ -8,11 +9,14 @@ const { ccclass, property } = cc._decorator;
 @ccclass
 export default class ShopSkin extends PopupUI {
 
+    @property(MainScreen)
+    mainScreen: MainScreen = null;
+
     @property([cc.SpriteFrame])
     listSkin: cc.SpriteFrame[] = [];
 
     @property(cc.Sprite)
-    skinWorm: cc.Sprite = null;
+    showSkin: cc.Sprite = null;
 
     @property(cc.Prefab)
     itemSkin: cc.Prefab = null;
@@ -21,33 +25,172 @@ export default class ShopSkin extends PopupUI {
     containerSkin: cc.Node = null;
 
     @property(cc.Node)
-    showSkin: cc.Node = null;
+    btnEquip: cc.Node = null;
+
+    @property(cc.Node)
+    btnBuy: cc.Node = null;
+
+    @property(cc.Label)
+    txtEquip: cc.Label = null;
+
+    listItemWorm: ItemSkin[] = [];
+
+    @property
+    addNumberGem: number = 20;
+
+    @property
+    subNumberGem: number = 200;
+
+    currentIndex: number = 0;
+    currentIndexRandom: number = 0;
+    listWormLock = [];
+    listRandomLock = [];
+    idClick: number = 0;
 
     override initialize(manager: UIManager): void {
         super.initialize(manager);
         this.popupName = PopupName.SHOPSKIN;
+        this.showShopSkin();
     }
 
     showShopSkin() {
         for (let index: number = 0; index < this.listSkin.length; index++) {
             let skin: cc.Node = cc.instantiate(this.itemSkin);
             this.containerSkin.addChild(skin);
-            skin.getComponent(ItemSkin).updateSkin({
+            let itemSkin = skin.getComponent(ItemSkin);
+            this.listItemWorm.push(itemSkin);
+            itemSkin.updateSkin({
                 id: index,
                 skin: this.listSkin[index],
-                isLock : LocalStorage.getWormActive().includes(index),
-                isSelected: LocalStorage.getWormSelected() == index ? true: false
-            });
+                isLock: LocalStorage.getWormActive().includes(index),
+                isSelected: LocalStorage.getWormSelected() == index ? true : false
+            }, this);
+        }
+    }
 
+    disableSelected() {
+        for (let i = 0; i < this.listItemWorm.length; i++) {
+            this.listItemWorm[i].onActiveSelected(false);
+        }
     }
+
+    disableChecked() {
+        for (let i = 0; i < this.listItemWorm.length; i++) {
+            if (this.listItemWorm[i].isSlected) {
+                this.listItemWorm[i].isSlected = false;
+                this.listItemWorm[i].onActiveChecked(false);
+                this.listItemWorm[i].onActiveSelected(false);
+                return;
+            }
+        }
+    }
+
+    onAddGem() {
+        this.mainScreen.countGem(this.addNumberGem);
+    }
+
+    onWormRandom() {
+        if (LocalStorage.getGem() < this.subNumberGem) {
+            this.uiManager.showMessage("Not enough gem");
+            return;
+        }
+        this.listWormLock = [];
+        this.listRandomLock = [];
+        this.currentIndex = 0;
+        this.mainScreen.countGem(- this.subNumberGem);
+        for (let index: number = 0; index < this.listSkin.length; index++) {
+            if (!LocalStorage.getWormActive().includes(index)) {
+                this.listWormLock.push(index);
+            }
+        }
+
+        const numberOfElementsToAdd = 8;
+        const newArray: number[] = [];
+        let fakeArray: number[] = [];
+        for (let i = 0; i < numberOfElementsToAdd; i++) {
+            const index = i % this.listWormLock.length;
+            newArray.push(this.listWormLock[index]);
+        }
+        fakeArray = this.listWormLock;
+        this.listWormLock = newArray;
+        this.activateNextWormLock();
+
+        this.scheduleOnce(() => {
+            this.listRandomLock = fakeArray;
+            this.listRandomLock = this.shuffleArray(this.listWormLock);
+            this.activateRandomWormLock();
+        }, numberOfElementsToAdd * 0.2);
+
+    }
+
+    activateNextWormLock() {
+        if (this.currentIndex < this.listWormLock.length) {
+            if (this.currentIndex > 0) {
+                this.listItemWorm[this.listWormLock[this.currentIndex - 1]].onActiveSelected(false);
+            }
+            this.listItemWorm[this.listWormLock[this.currentIndex]].onActiveSelected(true);
+            this.currentIndex++;
+            this.scheduleOnce(() => {
+                this.activateNextWormLock();
+            }, 0.2);
+        }
+        else if (this.currentIndex == this.listWormLock.length) {
+            this.listItemWorm[this.listItemWorm.length - 1].onActiveSelected(false);
+        }
+    }
+
+    activateRandomWormLock() {
+        if (this.currentIndexRandom < this.listRandomLock.length) {
+            if (this.currentIndexRandom > 0) {
+                this.listItemWorm[this.listRandomLock[this.currentIndexRandom - 1]].onActiveSelected(false);
+            }
+            this.listItemWorm[this.listRandomLock[this.currentIndexRandom]].onActiveSelected(true);
+            this.currentIndexRandom++;
+            this.scheduleOnce(() => {
+                this.activateRandomWormLock();
+            }, 0.2);
+        } else if (this.currentIndexRandom == this.listRandomLock.length) {
+            this.listItemWorm[this.listRandomLock[this.currentIndexRandom - 1]].onActiveSelected(false);
+            let random = Math.round(this.getRandomNumber(this.listWormLock[0], this.listWormLock.length));
+            console.log(random);
+            this.listItemWorm[random].openWorm();
+        }
+    }
+
+    shuffleArray<T>(array: T[]): T[] {
+        const shuffledArray = [...array];
+        for (let i = shuffledArray.length - 1; i > 0; i--) {
+            const j = Math.floor(Math.random() * (i + 1));
+            [shuffledArray[i], shuffledArray[j]] = [shuffledArray[j], shuffledArray[i]];
+        }
+        return shuffledArray;
+    }
+
+    getRandomNumber(min, max) {
+        return Math.random() * (max - min) + min;
+    }
+
+    scaleWorm(){
+        this.showSkin.node.scale = 1.2;
+        cc.tween(this.showSkin.node)
+        .to(0.3,{scale: 1})
+        .start();
     }
 
     hide(): void {
         super.hide();
+        this.mainScreen.showListWorm();
     }
 
     show(): void {
         super.show();
     }
 
+    onClickEquipped(){
+        for (let i = 0; i < this.listItemWorm.length; i++) {
+            if (this.listItemWorm[i].id == this.idClick) {
+                this.listItemWorm[i].openWorm();
+            }            
+        }
+    }
 }

assets/Scripts/UI/Popup/ShopSkinPopup.ts

-// Learn TypeScript:
-//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/typescript.html
-// Learn Attribute:
-//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/reference/attributes.html
-// Learn life-cycle callbacks:
-//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/life-cycle-callbacks.html
-
-import UIManager from "../UIManager";
-import PopupUI, { PopupName } from "./PopupUI";
-
-const {ccclass, property} = cc._decorator;
-
-@ccclass
-export default class ShopSkinPopup extends PopupUI {
-    override initialize(manager: UIManager): void {
-        this.popupName = PopupName.SHOPSKIN;
-    }
-}

assets/Scripts/UI/Popup/ShopSkinPopup.ts.meta

-{
-  "ver": "1.1.0",
-  "uuid": "bb21fd0f-2380-40d4-a07d-fa41c95416c3",
-  "importer": "typescript",
-  "isPlugin": false,
-  "loadPluginInWeb": true,
-  "loadPluginInNative": true,
-  "loadPluginInEditor": false,
-  "subMetas": {}
-}
\ No newline at end of file

assets/Scripts/UI/Screen/MainScreen.ts

-// Learn TypeScript:
-//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/typescript.html
-// Learn Attribute:
-//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/reference/attributes.html
-// Learn life-cycle callbacks:
-//  - https://docs.cocos.com/creator/2.4/manual/en/scripting/life-cycle-callbacks.html
-
 import LocalStorage from "../../Data/LocalStorage";
+import { PopupName } from "../Popup/PopupUI";
 import UIManager from "../UIManager";
 import ScreenUI, { ScreenName } from "./ScreenUI";
 
@@ -28,10 +22,11 @@ export default class MainScreen extends ScreenUI {
     btnTry: cc.Button = null;
 
     isMove: boolean = true;
-    listWorm: cc.Node[] = [];
+    listWorm: { id: number, nodeWorm: cc.Node }[] = [];
     currentIndex: number = 0;
     moveDuration: number = 0.5;
     wormId: number = 0;
+    isFullSkin: boolean = false;
 
     override initialize(uiManager: UIManager): void {
         super.initialize(uiManager);
@@ -44,22 +39,64 @@ export default class MainScreen extends ScreenUI {
         this.containerSkins.removeAllChildren();
         this.currentIndex = 0;
         let listWormActive: [number] = LocalStorage.getWormActive();
-        let newListWorm: cc.Prefab[] = this.listWormPrefab.filter((item, i) => {
-            return !listWormActive.includes(i);
-        })
-        if (newListWorm.length == 0) {
-            newListWorm = this.listWormPrefab;
+        if (listWormActive.length == this.listWormPrefab.length) {
+            this.isFullSkin = true;
             this.btnTry.interactable = false;
+            for (let index = 0; index < this.listWormPrefab.length; index++) {
+                    let worm: cc.Node = cc.instantiate(this.listWormPrefab[index]);
+                    this.containerSkins.addChild(worm);
+                    if (this.containerSkins.childrenCount == 0) {
+                        worm.position = cc.v3(0, 0);
+                    } else {
+                        worm.position = cc.v3(450);
                     }
-        for (let index = 0; index < newListWorm.length; index++) {
-            let worm: cc.Node = cc.instantiate(newListWorm[index]);
+                    this.listWorm.push({
+                        id: index,
+                        nodeWorm: worm
+                    });
+            }
+        } else {
+            for (let index = 0; index < this.listWormPrefab.length; index++) {
+                if (!listWormActive.includes(index)) {
+                    let worm: cc.Node = cc.instantiate(this.listWormPrefab[index]);
                     this.containerSkins.addChild(worm);
-            if (index == 0) {
+                    if (this.containerSkins.childrenCount == 0) {
                         worm.position = cc.v3(0, 0);
                     } else {
                         worm.position = cc.v3(450);
                     }
-            this.listWorm.push(worm);
+                    this.listWorm.push({
+                        id: index,
+                        nodeWorm: worm
+                    });
+                }
+            }
+        }
+
+    }
+
+    showListWorm() {
+        if (this.isFullSkin) {
+            return;
+        }
+        let listWormTemp: { id: number, nodeWorm: cc.Node }[] = [];
+        let listWormActive = LocalStorage.getWormActive();
+        console.log(listWormActive);
+        for (let i = 0; i < this.listWorm.length; i++) {
+            if (!listWormActive.includes(this.listWorm[i].id)) {
+                listWormTemp.push(this.listWorm[i]);
+            } else {
+                this.listWorm[i].nodeWorm.active = false;
+            }
+        }
+        this.listWorm = listWormTemp;
+        this.currentIndex = 0;
+        for (let index = 0; index < this.listWorm.length; index++) {
+            if (index == 0) {
+                this.listWorm[index].nodeWorm.position = cc.v3(0, 0);
+            } else {
+                this.listWorm[index].nodeWorm.position = cc.v3(450);
+            }
         }
     }
 
@@ -79,19 +116,19 @@ export default class MainScreen extends ScreenUI {
 
     moveItems(isNext: boolean) {
         this.isMove = false;
-        cc.tween(this.listWorm[this.currentIndex])
+        cc.tween(this.listWorm[this.currentIndex].nodeWorm)
             .to(this.moveDuration, { position: cc.v3(0, 0), scale: 1.2 })
             .call(() => {
                 this.isMove = true;
             })
             .start();
         if (isNext) {
-            cc.tween(this.listWorm[this.currentIndex - 1])
+            cc.tween(this.listWorm[this.currentIndex - 1].nodeWorm)
                 .to(this.moveDuration, { position: cc.v3(-450, 0), scale: 1 })
                 .start();
 
         } else {
-            cc.tween(this.listWorm[this.currentIndex + 1])
+            cc.tween(this.listWorm[this.currentIndex + 1].nodeWorm)
                 .to(this.moveDuration, { position: cc.v3(450, 0), scale: 1 })
                 .start();
         }
@@ -99,6 +136,8 @@ export default class MainScreen extends ScreenUI {
 
     override active(): void {
         super.active();
+        this.showListWorm();
+        this.updateBtnPlay();
         this.updateGem();
         cc.tween(this.logo)
             .to(0.3, { position: cc.v3(0, 500) }, { easing: "bounceOut" })
@@ -118,23 +157,44 @@ export default class MainScreen extends ScreenUI {
         this.uiManager.activeScreen(ScreenName.LEVEL);
     }
 
+    onClickShopSkin() {
+        this.uiManager.showPopup(PopupName.SHOPSKIN);
+    }
+
     updateGem() {
         this.txtGem.string = LocalStorage.getGem() + "";
     }
 
+    countGem(gem: number){
+        let fakeCurrentGem = LocalStorage.getGem();
+        let fakseGemEnd = fakeCurrentGem + gem;
+        LocalStorage.setGem(gem + fakeCurrentGem);        
+        let start = fakeCurrentGem;
+        let end = fakseGemEnd;
+        cc.tween({ progress: 0 })
+            .to(0.3, { progress: 1 }, {
+                onUpdate: (target, ratio) => {
+                    console.log(ratio);
+                    let end2 = Math.round(start + (end - start) * ratio);
+                    this.txtGem.getComponent(cc.Label).string = "" + end2;
+                }
+            })
+            .start();
+    }
+
     updateBtnPlay() {
-        this.txtPlayLevel.string = (LocalStorage.getLevel() + 1) + ""
+        this.txtPlayLevel.string = "Level " + (LocalStorage.getLevel() + 1) + ""
     }
 
     onClickPlay() {
     }
 
-    onClickLuckySpin(){
+    onClickLuckySpin() {
         this.uiManager.activeScreen(ScreenName.LUCKYSPIN);
     }
 
-    onClickTryWorm(){
-        let worm = this.listWorm[this.currentIndex].name;
+    onClickTryWorm() {
+        let worm = this.listWorm[this.currentIndex].nodeWorm.name;
         let id = '';
         if (worm) {
             id = worm.split("_")[1];