UILevel

assets/Prefab/UI/Level/ItemLevel.prefab

@@ -31,9 +31,16 @@
       }
     ],
     "_active": true,
-    "_components": [],
+    "_components": [
+      {
+        "__id__": 21
+      },
+      {
+        "__id__": 22
+      }
+    ],
     "_prefab": {
-      "__id__": 21
+      "__id__": 24
     },
     "_opacity": 255,
     "_color": {
@@ -291,7 +298,7 @@
     "_N$verticalAlign": 1,
     "_N$fontFamily": "Arial",
     "_N$overflow": 2,
-    "_N$cacheMode": 0,
+    "_N$cacheMode": 1,
     "_id": ""
   },
   {
@@ -749,6 +756,107 @@
     "fileId": "b35j0fHHVEjoTY1SD9xA/L",
     "sync": false
   },
+  {
+    "__type__": "99b13syiJ1CX7SWj0e8Wwra",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 1
+    },
+    "_enabled": true,
+    "txtLevel": {
+      "__id__": 6
+    },
+    "iconChecked": {
+      "__id__": 10
+    },
+    "iconLocked": {
+      "__id__": 13
+    },
+    "_id": ""
+  },
+  {
+    "__type__": "cc.Button",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 1
+    },
+    "_enabled": true,
+    "_normalMaterial": null,
+    "_grayMaterial": null,
+    "duration": 0.1,
+    "zoomScale": 1.2,
+    "clickEvents": [
+      {
+        "__id__": 23
+      }
+    ],
+    "_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": null,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.ClickEvent",
+    "target": {
+      "__id__": 1
+    },
+    "component": "",
+    "_componentId": "99b13syiJ1CX7SWj0e8Wwra",
+    "handler": "onClickLevel",
+    "customEventData": ""
+  },
   {
     "__type__": "cc.PrefabInfo",
     "root": {

assets/Prefab/UI/Level/NodeActive.prefab

+[
+  {
+    "__type__": "cc.Prefab",
+    "_name": "",
+    "_objFlags": 0,
+    "_native": "",
+    "data": {
+      "__id__": 1
+    },
+    "optimizationPolicy": 0,
+    "asyncLoadAssets": false,
+    "readonly": false
+  },
+  {
+    "__type__": "cc.Node",
+    "_name": "NodeActive",
+    "_objFlags": 0,
+    "_parent": null,
+    "_children": [],
+    "_active": true,
+    "_components": [
+      {
+        "__id__": 2
+      },
+      {
+        "__id__": 3
+      }
+    ],
+    "_prefab": {
+      "__id__": 4
+    },
+    "_opacity": 255,
+    "_color": {
+      "__type__": "cc.Color",
+      "r": 255,
+      "g": 255,
+      "b": 255,
+      "a": 255
+    },
+    "_contentSize": {
+      "__type__": "cc.Size",
+      "width": 30,
+      "height": 30
+    },
+    "_anchorPoint": {
+      "__type__": "cc.Vec2",
+      "x": 0.5,
+      "y": 0.5
+    },
+    "_trs": {
+      "__type__": "TypedArray",
+      "ctor": "Float64Array",
+      "array": [
+        0,
+        0,
+        0,
+        0,
+        0,
+        0,
+        1,
+        1,
+        1,
+        1
+      ]
+    },
+    "_eulerAngles": {
+      "__type__": "cc.Vec3",
+      "x": 0,
+      "y": 0,
+      "z": 0
+    },
+    "_skewX": 0,
+    "_skewY": 0,
+    "_is3DNode": false,
+    "_groupIndex": 0,
+    "groupIndex": 0,
+    "_id": ""
+  },
+  {
+    "__type__": "cc.Sprite",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 1
+    },
+    "_enabled": true,
+    "_materials": [
+      {
+        "__uuid__": "eca5d2f2-8ef6-41c2-bbe6-f9c79d09c432"
+      }
+    ],
+    "_srcBlendFactor": 770,
+    "_dstBlendFactor": 771,
+    "_spriteFrame": {
+      "__uuid__": "0a82aa52-6dd8-457f-b854-e80b301837c9"
+    },
+    "_type": 0,
+    "_sizeMode": 0,
+    "_fillType": 0,
+    "_fillCenter": {
+      "__type__": "cc.Vec2",
+      "x": 0,
+      "y": 0
+    },
+    "_fillStart": 0,
+    "_fillRange": 0,
+    "_isTrimmedMode": true,
+    "_atlas": null,
+    "_id": ""
+  },
+  {
+    "__type__": "1e6302syedJ7YAKG25Dltpw",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 1
+    },
+    "_enabled": true,
+    "imageNode": {
+      "__id__": 2
+    },
+    "sprirteActive": {
+      "__uuid__": "253acc46-ff97-41e0-98a0-cb37d1bcb46c"
+    },
+    "sprirteDeActive": {
+      "__uuid__": "0a82aa52-6dd8-457f-b854-e80b301837c9"
+    },
+    "_id": ""
+  },
+  {
+    "__type__": "cc.PrefabInfo",
+    "root": {
+      "__id__": 1
+    },
+    "asset": {
+      "__id__": 0
+    },
+    "fileId": "",
+    "sync": false
+  }
+]
\ No newline at end of file

assets/Prefab/UI/Level/NodeActive.prefab.meta

+{
+  "ver": "1.3.2",
+  "uuid": "50bd33a2-2578-4d6d-84c3-0fe0139b8fb1",
+  "importer": "prefab",
+  "optimizationPolicy": "AUTO",
+  "asyncLoadAssets": false,
+  "readonly": false,
+  "subMetas": {}
+}
\ No newline at end of file

assets/Prefab/UI/Level/Page.prefab

@@ -21,10 +21,13 @@
     "_components": [
       {
         "__id__": 2
+      },
+      {
+        "__id__": 3
       }
     ],
     "_prefab": {
-      "__id__": 3
+      "__id__": 4
     },
     "_opacity": 255,
     "_color": {
@@ -96,7 +99,7 @@
     "_N$startAxis": 0,
     "_N$paddingLeft": 0,
     "_N$paddingRight": 0,
-    "_N$paddingTop": 0,
+    "_N$paddingTop": 20,
     "_N$paddingBottom": 0,
     "_N$spacingX": 32,
     "_N$spacingY": 20,
@@ -105,6 +108,22 @@
     "_N$affectedByScale": false,
     "_id": ""
   },
+  {
+    "__type__": "9918fR1F4ZJPbMkmxxSoPta",
+    "_name": "",
+    "_objFlags": 0,
+    "node": {
+      "__id__": 1
+    },
+    "_enabled": true,
+    "itemLevelPrefab": {
+      "__uuid__": "8a16bc9b-2da6-4d35-90b3-f1bb8ef9c39c"
+    },
+    "containerLevels": {
+      "__id__": 1
+    },
+    "_id": ""
+  },
   {
     "__type__": "cc.PrefabInfo",
     "root": {

assets/Scripts/GamePlay/GameManager.ts

@@ -19,36 +19,38 @@ export default class GameManager extends cc.Component {
 
     dataLevels: DataLevel[] = [];
 
-    protected onLoad(): void {
-        this.initialize();
+    async onLoad() {
+       await this.initialize();
     }
 
     protected start(): void {
         this.backHone()
     }
 
-    initialize() {
+    async initialize() {
+        this.dataLevels =  await this.loadLevel() as DataLevel[];
         this.uiManager.initialize(this);
-        this.loadLevel();
     }
 
     backHone() {
         this.uiManager.activeScreen(ScreenName.MAINMENU);
     }
 
-    loadLevel() {
-        cc.loader.loadRes("Data/LevelConfigs", function (err, objects) {
-            if (err) {
-                cc.log('Error when loading JSON:', err);
-                return;
-            }
-            this.dataLevels = objects.json.map((object: any) => {
-                let dataLevel = new DataLevel();
-                Object.assign(dataLevel, object);
-                return dataLevel;
+    async loadLevel() {
+        return new Promise(function (resolve, reject){
+             cc.loader.loadRes("Data/LevelConfigs",  (err, objects) => {
+                if (err) {
+                    cc.log('Error when loading JSON:', err);
+                    reject([]);
+                }
+                let dataLevels = objects.json.map((object: any) => {
+                    let dataLevel = new DataLevel();
+                    Object.assign(dataLevel, object);
+                    return dataLevel;
+                });
+                resolve(dataLevels);
             });
-            cc.log('Loaded GameObjects:', this.dataLevels);
-        });
+        })
     }
 
 }
\ No newline at end of file

assets/Scripts/UI/Screen/Level/ItemLevel.ts

@@ -5,24 +5,57 @@
 // Learn life-cycle callbacks:
 //  - https://docs.cocos.com/creator/2.4/manual/en/scripting/life-cycle-callbacks.html
 
-const {ccclass, property} = cc._decorator;
+import LocalStorage from "../../../Data/LocalStorage";
+
+const { ccclass, property } = cc._decorator;
 
 @ccclass
-export default class NewClass extends cc.Component {
+export default class ItemLevel extends cc.Component {
 
     @property(cc.Label)
-    label: cc.Label = null;
-
-    @property
-    text: string = 'hello';
-
-    // LIFE-CYCLE CALLBACKS:
-
-    // onLoad () {}
+    txtLevel: cc.Label = null;
+    @property(cc.Node)
+    iconChecked: cc.Node = null;
+    @property(cc.Node)
+    iconLocked: cc.Node = null;
+
+    level: number = 0;
+    isLock = true;
+
+    initialize(level) {
+        this.isLock = false;
+        this.level = level - 1;
+        this.txtLevel.string = level + "";
+        this.setup(LocalStorage.getLevel());
+        this.node.on(cc.Node.EventType.TOUCH_END, this.onClickLevel, this);
+    }
 
-    start () {
+    setup(curentLevel){
+        if (this.level < curentLevel) {
+            this.iconChecked.active = true;
+            this.iconLocked.active = false;
+            this.txtLevel.node.color.fromHEX("#FFFFFF");
+        } else if (this.level == curentLevel) {
+            this.iconChecked.active = false;
+            this.iconLocked.active = false;
+            this.txtLevel.node.color.fromHEX("#FFFFFF");
+        } else {
+            this.iconChecked.active = false;
+            this.iconLocked.active = true;
+            this.txtLevel.node.color.fromHEX("#A86244");
+            this.isLock = true;
+        }
+    }
 
+    retload(){
+        this.setup(LocalStorage.getLevel());
     }
+    onClickLevel() {
+        if (this.isLock) {
+            return;
+        }
+        console.log(this.level);
+    }
+
 
-    // update (dt) {}
 }

assets/Scripts/UI/Screen/Level/NodePage.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
+
+const {ccclass, property} = cc._decorator;
+
+@ccclass
+export default class NodePage extends cc.Component {
+    
+    @property(cc.Sprite)
+    imageNode: cc.Sprite = null;
+
+    @property(cc.SpriteFrame)
+    sprirteActive: cc.SpriteFrame = null;
+   
+    @property(cc.SpriteFrame)
+    sprirteDeActive: cc.SpriteFrame = null;
+
+
+    activeNode(){
+        this.imageNode.spriteFrame = this.sprirteActive;
+    }
+
+    deActiveNode(){
+        this.imageNode.spriteFrame = this.sprirteDeActive;
+    }
+
+}

assets/Scripts/UI/Screen/Level/NodePage.ts.meta

+{
+  "ver": "1.1.0",
+  "uuid": "1e630dac-c9e7-49ed-800a-1b6e4396da70",
+  "importer": "typescript",
+  "isPlugin": false,
+  "loadPluginInWeb": true,
+  "loadPluginInNative": true,
+  "loadPluginInEditor": false,
+  "subMetas": {}
+}
\ No newline at end of file

assets/Scripts/UI/Screen/Level/Page.ts

@@ -5,10 +5,40 @@
 // Learn life-cycle callbacks:
 //  - https://docs.cocos.com/creator/2.4/manual/en/scripting/life-cycle-callbacks.html
 
+import ItemLevel from "./ItemLevel";
+
 const {ccclass, property} = cc._decorator;
 
 @ccclass
 export default class Page extends cc.Component {
 
+    @property(cc.Prefab)
+    itemLevelPrefab : cc.Prefab = null;
+
+    @property(cc.Node)
+    containerLevels: cc.Node = null;
+
+    listItem: ItemLevel[] = [];
+    levelPerPage: number = 0;
+
+    initialize(start, end, levelPerPage){
+        let levelIndex = start;
+        for (let i = 0; i < levelPerPage; i++) {
+            let itemLevel: cc.Node = cc.instantiate(this.itemLevelPrefab); 
+            this.containerLevels.addChild(itemLevel);
+            let l = itemLevel.getComponent(ItemLevel)
+            l.initialize(levelIndex);
+            this.listItem.push(l);
+            if (levelIndex < end) {
+                levelIndex++;
+            }
+        }
+    }
+
+    reload(){
+        for (let i = 0; i < this.listItem.length; i++) {
+            this.listItem[i].retload();            
+        }
+    }
    
 }

assets/Scripts/UI/Screen/LevelScreen.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 UIManager from "../UIManager";
+import NodePage from "./Level/NodePage";
+import Page from "./Level/Page";
 import ScreenUI, { ScreenName } from "./ScreenUI";
 
 const { ccclass, property } = cc._decorator;
@@ -13,18 +9,138 @@ const { ccclass, property } = cc._decorator;
 @ccclass
 export default class LevelScreen extends ScreenUI {
 
+    @property(cc.Prefab)
+    pagePrefab: cc.Prefab = null;
+
+    @property(cc.Prefab)
+    nodePage: cc.Prefab = null;
+
+    @property(cc.Node)
+    containerPage: cc.Node = null;
+
+    @property(cc.Node)
+    containerNodePage: cc.Node = null;
+
+    @property(cc.Node)
+    levelPage: cc.Node = null;
+
     totalLevels: number = 0;
     levelPerPage: number = 12;
+    curentLevel: number = 0;
+
+    totalPages: number = 0;
+    currentPage: number = 0;
+    targetPos: cc.Vec3 = new cc.Vec3(0, 0, 0);
+    @property(cc.Vec3)
+    pageStep: cc.Vec3 = new cc.Vec3(850, 0, 0);
+    tweenTime: number = 0.5;
+
+    pointStart: cc.Vec3 = null;
+    pointEnd: cc.Vec3 = null;
+    isMove: boolean = true;
+
+    listNodePage: NodePage[] = []
+    listPage: Page[] = []
+
+    isActive: boolean = false;
+
     override initialize(uiManager: UIManager): void {
         super.initialize(uiManager);
         this.screenName = ScreenName.LEVEL;
+        this.targetPos = this.containerPage.position;
+        this.curentLevel = LocalStorage.getLevel();
         this.showListLevel();
     }
 
     showListLevel() {
+        this.node.active = false;
         this.totalLevels = this.uiManager.gameManager.dataLevels.length;
-        let totalPages = Math.ceil(this.totalLevels / this.levelPerPage);
+        this.totalPages = Math.ceil(this.totalLevels / this.levelPerPage);
+        for (let index = 0; index < this.totalPages; index++) {
+            let nodePage: cc.Node = cc.instantiate(this.nodePage);
+            let page: cc.Node = cc.instantiate(this.pagePrefab);
+            this.containerPage.addChild(page);
+            this.containerNodePage.addChild(nodePage);
+            let currentPage = index;
+            let start = currentPage * this.levelPerPage + 1;
+            let end = start + this.levelPerPage;
+            let p = page.getComponent(Page)
+                p.initialize(start, end, this.levelPerPage);
+            this.listPage.push(p)
+            let np = nodePage.getComponent(NodePage)
+            if (index == 0) {
+                np.activeNode();
+            }
+            this.listNodePage.push(np);
+        }
+    }
+
+    nextPage() {
+        if (this.isMove) {
+            this.isMove = false;
+            if (this.currentPage < this.totalPages) {
+                this.currentPage++;
+                this.targetPos = cc.v3(this.targetPos.x + this.pageStep.x, this.targetPos.y + this.pageStep.y);
+                this.movePage();
+                this.updateNodePage(true);
+            }
+        }
+    }
+
+    prePage() {
+        if (this.isMove) {
+            this.isMove = false;
+            if (this.currentPage > 0) {
+                this.currentPage--;
+                this.targetPos = cc.v3(this.targetPos.x - this.pageStep.x, this.targetPos.y - this.pageStep.y);
+                this.movePage();
+                this.updateNodePage(false);
+            }
+        }
+    }
 
+    movePage() {
+        cc.tween(this.containerPage)
+            .to(this.tweenTime, { position: this.targetPos }, { easing: "quintOut" })
+            .call(() => {
+                this.isMove = true;
+            })
+            .start();
     }
 
+    updateNodePage(isNext) {
+        this.listNodePage[this.currentPage].activeNode();
+        if (isNext) {
+            this.listNodePage[this.currentPage - 1].deActiveNode();
+        } else {
+            this.listNodePage[this.currentPage + 1].deActiveNode();
+        }
+    }
+
+    reloadNodePage() {
+        this.currentPage = 0;
+        for (let index = 0; index < this.listPage.length; index++) {
+            this.listPage[index].reload();
+        }
+
+        for (let i = 0; i < this.listNodePage.length; i++) {
+            this.listNodePage[i].deActiveNode();
+        }
+        this.listNodePage[0].activeNode();
+    }
+
+    override active(): void {
+        super.active();
+        if (!this.isActive) {
+            this.isActive = true;
+        }else{
+            this.reloadNodePage();
+        }
+    }
+
+    override deactive(): void {
+        super.deactive();
+    }
+
+
 }

assets/Scripts/UI/Screen/MainScreen.ts

@@ -31,6 +31,7 @@ export default class MainScreen extends ScreenUI {
         super.initialize(uiManager);
         this.screenName = ScreenName.MAINMENU;
         this.initializeListWorm();
+
     }
 
     initializeListWorm() {
@@ -95,10 +96,15 @@ export default class MainScreen extends ScreenUI {
     }
 
     override deactive(): void {
+        super.deactive();
         this.logo.position = cc.v3(0, 1132);
     }
 
     onClickRemoveAds() {
         this.uiManager.showMessage("Is Comming");
     }
+
+    onClickLevel(){
+        this.uiManager.activeScreen(ScreenName.LEVEL);
+    }
 }

assets/Scripts/UI/UIManager.ts

@@ -18,7 +18,7 @@ export default class UIManager extends cc.Component {
     screens: ScreenUI[] = [];
     @property([PopupUI])
     popups: PopupUI[] = [];
-
+    
     @property(Message)
     message: Message = null;
 

settings/project.json

 {
-  "start-scene": "7602b4d5-03ba-4bb0-b72f-840c3c878b7e"
+  "start-scene": "2b1f57e0-e640-4283-a5ac-1bac931a4d9f"
 }