宠物上阵

JisolGameCocos/assets/script/data/PlayerPetData.ts

@@ -16,7 +16,7 @@ export default class PlayerPetData extends BaseData{
     }
 
     //获取全部宠物
-    getData(){
+    getData():PlayerPetOV[]{
         return this.datas;
     }
 
@@ -33,6 +33,11 @@ export default class PlayerPetData extends BaseData{
         await this.UpdatePlayerPet();
     }
 
+    //通过宠物Id找到宠物
+    petIdQueryPetInfo(petId:number):PlayerPetOV{
+        return this.datas.filter(item => item.petId == petId)[0]
+    }
+
 
 }
 

JisolGameCocos/assets/script/data/PlayerTacticalData.ts

@@ -1,6 +1,12 @@
+import { app } from "../App";
 import { API, PlayerTacticalOV } from "../consts/API";
 import BaseData from "./BaseData";
 
+export enum PlayerTacticalEvent{
+    //更新上阵信息
+    UPDATE_TACTICAL = "PlayerTacticalEvent_UPDATE_TACTICAL"
+}
+
 interface PlayerTacticalInfo extends PlayerTacticalOV{
     roles:number[], //上阵的宠物顺序
 }
@@ -17,9 +23,9 @@ export default class PlayerTacticalData extends BaseData{
 
     }
 
-    //更新阵法信息
-    async onUpdateInfo(){
-        let ov = await API.GetPlayerTactical();
+    //保存阵法信息
+    onSaveTacticalInfo(ov:PlayerTacticalOV){
+
         if(!ov.tacticalData){
             ov.tacticalData = JSON.stringify(this.getTacticalInfo());
         }
@@ -27,14 +33,28 @@ export default class PlayerTacticalData extends BaseData{
             ...ov,
             roles: JSON.parse(ov.tacticalData),
         }
+
+        //通知阵法信息已更新
+        app.event.emit(PlayerTacticalEvent.UPDATE_TACTICAL);
+    }
+
+    //更新阵法信息
+    async onUpdateInfo(){
+        this.onSaveTacticalInfo(await API.GetPlayerTactical());
     }
 
     //更新上阵
     async UpdateTactical(roles:number[]){
         this.info.roles = roles;
         this.info.tacticalData = JSON.stringify(this.info.roles);
-        //上传到服务器
-        await API.SetPlayerTactical(this.info);
+        //上传到服务器 并且保存
+        this.onSaveTacticalInfo(await API.SetPlayerTactical(this.info));
+    }
+
+    //修改指定位置的上阵 上阵下标,上阵的宠物Id
+    async UpdateIndexTactical(index:number,petId:number){
+        this.info.roles[index] = petId;
+        await this.UpdateTactical(this.info.roles);
     }
 
     //获取指定位置

JisolGameCocos/assets/script/ui/Consts/Pet.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.2.0",
+  "importer": "directory",
+  "imported": true,
+  "uuid": "c4c3edaa-a350-4973-8ada-7377cbb0481f",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

JisolGameCocos/assets/script/ui/Consts/Pet/PetIconItem.ts

@@ -0,0 +1,42 @@
+import { _decorator, Component, Node } from 'cc';
+import JNScrollViewItem from '../../../../../extensions/ngame/assets/ngame/util/components/scrollview/JNScrollViewItem';
+import { PlayerPetOV } from '../../../consts/API';
+import { sp } from 'cc';
+import { app } from '../../../App';
+import { UIPetAnim } from '../../../consts/GData';
+const { ccclass, property } = _decorator;
+
+@ccclass('PetIconItem')
+export class PetIconItem extends JNScrollViewItem<PlayerPetOV> {
+
+    @property(sp.Skeleton)
+    spine:sp.Skeleton;
+
+    //选中节点
+    @property(Node)
+    select:Node;
+
+    //是否被选中
+    isSelect:boolean = false;
+
+    onLoad(){
+        this.onUpdateSelect();
+    }
+
+    start(): void {
+        
+        //显示角色
+        this.spine.skeletonData = app.battleRes.roleSpine[this.data.petTbId];
+        this.spine.setAnimation(0,UIPetAnim.std,true);
+
+    }
+
+    onUpdateSelect(){
+
+        this.select.active = this.isSelect;
+
+    }
+
+}
+
+

JisolGameCocos/assets/script/ui/Consts/Pet/PetIconItem.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.23",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "7c6657dc-bcb4-460e-ace3-860bd4238a0d",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

JisolGameCocos/assets/script/ui/Consts/Tactical/PlayerTacticalItem.ts

@@ -2,6 +2,9 @@ import { _decorator, Component, Node } from 'cc';
 import PlayerTacticalData from '../../../data/PlayerTacticalData';
 import { app } from '../../../App';
 import { GUI } from '../../UIConfig';
+import { sp } from 'cc';
+import { UIPetAnim } from '../../../consts/GData';
+import PlayerPetData from '../../../data/PlayerPetData';
 const { ccclass, property } = _decorator;
 
 @ccclass('PlayerTacticalItem')
@@ -9,20 +12,76 @@ export class PlayerTacticalItem extends Component {
 
     //阵法的Index;
     index:number;
+
+    //没有宠物的节点
+    @property(Node)
+    noPet:Node;
+    
+    //有宠物的节点
+    @property(Node)
+    havePet:Node;
+
+    //当前上阵的宠物
+    petId:number;
     
     //初始化阵法
     onInit(index:number){
         this.index = index;
     }
     
-    //更新信息
-    onUpdateView(){
-        PlayerTacticalData.getIns().getItem(this.index);
+    protected start(): void {
+        this.onUpdateView();
     }
     
-    //点击
+    //更新信息
+    onUpdateView(){
+        
+        //获取阵法下的宠物
+        this.petId = PlayerTacticalData.getIns().getItem(this.index);
+
+        //如果为0则没有宠物
+        if(this.petId){
+            this.havePet.active = true;
+            this.noPet.active = false;
+            this.onUpdatePetView();
+        }else{
+            this.noPet.active = true;
+            this.havePet.active = false;
+        }
+
+    }
+
+    //更新宠物信息
+    onUpdatePetView(){
+
+        let spine = this.havePet.getComponentInChildren(sp.Skeleton);
+        //获取宠物信息
+        let info = PlayerPetData.getIns().petIdQueryPetInfo(this.petId);
+        spine.skeletonData = app.battleRes.roleSpine[info.petTbId];
+        spine.setAnimation(0,UIPetAnim.std,true);
+
+    }
+    
+    //打开选择阵法宠物
     onClick(){
-        app.layer.Open(GUI.IntoBattleView);
+        //如果没有宠物则弹出选择宠物 负责 删除宠物
+        if(this.petId){
+            //移除宠物
+            //提示是否移除宠物
+            app.layer.Open(GUI.SelectionBox,{
+                tigText:"是否移除宠物?",
+                cancel:()=>{},
+                confirm:async ()=>{
+                    //移除宠物 (0就是移除)
+                    await PlayerTacticalData.getIns().UpdateIndexTactical(this.index,0);
+                }
+            })
+        }else{
+            //选择宠物
+            app.layer.Open(GUI.IntoBattleView,{
+                index:this.index,  //当前选择的阵法下标
+            });
+        }
     }
     
 }

JisolGameCocos/assets/script/ui/Consts/Tactical/PlayerTacticalView.ts

@@ -1,5 +1,7 @@
 import { _decorator, Component, Node } from 'cc';
 import { PlayerTacticalItem } from './PlayerTacticalItem';
+import { app } from '../../../App';
+import { PlayerTacticalEvent } from '../../../data/PlayerTacticalData';
 const { ccclass, property } = _decorator;
 
 /**
@@ -12,22 +14,42 @@ export class PlayerTacticalView extends Component {
     //阵法子节点列表
     items:PlayerTacticalItem[] = [];
 
-    // onLoad(){
+    onLoad(){
 
-    //     //阵法
-    //     this.items = this.node.getComponentsInChildren(PlayerTacticalItem);
-    //     this.items.forEach((item,index) => item.onInit(index));
+        //阵法
+        this.items = this.node.getComponentsInChildren(PlayerTacticalItem);
+        this.items.forEach((item,index) => {
+            item.onInit(index); //初始化阵法下标
+        });
 
-    //     this.onUpdateView();
+        this.onUpdateView();
 
-    // }
+        this.onEvent();
 
-    // //更新阵法显示
-    // onUpdateView(){
-    //     this.items.forEach(item => {
-    //         item.onUpdateView();
-    //     })
-    // }
+    }
+
+    protected onDestroy(): void {
+        this.offEvent();
+    }
+
+    //添加监听
+    onEvent(){
+        app.event.on(PlayerTacticalEvent.UPDATE_TACTICAL,this.onUpdateView,this);
+    }
+
+    //移除监听
+    offEvent(){
+        app.event.off(PlayerTacticalEvent.UPDATE_TACTICAL,this.onUpdateView,this);
+    }
+
+    //更新阵法显示
+    onUpdateView(){
+
+        this.items.forEach(item => {
+            item.onUpdateView();
+        })
+
+    }
 
 
 }

JisolGameCocos/assets/script/ui/System/SelectionBox.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "1.2.0",
+  "importer": "directory",
+  "imported": true,
+  "uuid": "a4864ef2-ad5e-48a7-8882-e5c04a634d81",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

JisolGameCocos/assets/script/ui/System/SelectionBox/SelectionBox.ts

@@ -0,0 +1,93 @@
+import { _decorator, Component, Node } from 'cc';
+import JNLayerBase from '../../../../../extensions/ngame/assets/ngame/ui/base/JNLayerBase';
+import { Label } from 'cc';
+import { Button } from 'cc';
+import { app } from '../../../App';
+const { ccclass, property } = _decorator;
+
+export interface SelectionBoxInfo{
+    cancelText?:string,     //取消按钮文字
+    cancel?:Function,       //取消事件
+    confirmText?:string,    //确认按钮文字
+    confirm?:Function,      //确认事件
+    isHideMake?:boolean,    //是否隐藏遮罩
+    isMaskClose?:boolean,   //是否点击遮罩关闭
+
+    tigText?:string,        //提示内容
+    titleText?:string,        //标题内容
+}
+
+@ccclass('SelectionBox')
+export class SelectionBox extends JNLayerBase {
+
+    //标题
+    @property(Label)
+    titleLabel:Label;
+
+    //提示文字
+    @property(Label)
+    tigLabel:Label;
+
+    //取消按钮
+    @property(Button)
+    cancalBtn:Button;
+
+    //确认按钮
+    @property(Button)
+    confirmBtn:Button;
+
+    //按钮列表
+    @property(Node)
+    btns:Node;
+
+    data:SelectionBoxInfo;
+
+    onJNLoad(data?: SelectionBoxInfo): void {
+
+        this.data = data;
+
+        //默认不可以
+        data.isMaskClose = !!data.isMaskClose;
+        data.tigText = data.tigText || "这是一个提示选择框";
+        data.titleText = data.titleText || "标 题";
+        data.cancelText = data.cancelText || "取 消";
+        data.confirmText = data.confirmText || "确 认";
+
+        this.mask = !data.isHideMake;
+        this.isClickMaskeClose = data.isMaskClose;
+
+        this.tigLabel.string = data.tigText;
+        this.titleLabel.string = data.titleText;
+
+        //没有事件则不显示
+        this.cancalBtn.node.active = !!data.cancel;
+        this.confirmBtn.node.active = !!data.confirm;
+
+        //显示按钮文字
+        this.cancalBtn.getComponentInChildren(Label).string = data.cancelText;
+        this.confirmBtn.getComponentInChildren(Label).string = data.confirmText;
+
+        //如果都没有则隐藏按钮列表
+        if(!data.cancel && data.confirm)
+            this.btns.active = false;
+
+        super.onJNLoad();
+        
+    }
+
+    //点击确认
+    async onClickConfirm(){
+        this.data.confirm && await this.data.confirm();
+        //关闭页面
+        app.layer.CloseNode(this.node);
+    }
+    //点击取消
+    async onClickCancel(){
+        this.data.cancel && await this.data.cancel();
+        //关闭页面
+        app.layer.CloseNode(this.node);
+    }
+
+}
+
+

JisolGameCocos/assets/script/ui/System/SelectionBox/SelectionBox.ts.meta

@@ -0,0 +1,9 @@
+{
+  "ver": "4.0.23",
+  "importer": "typescript",
+  "imported": true,
+  "uuid": "637d2a9d-964e-41f2-b96b-2bfd7e7dc686",
+  "files": [],
+  "subMetas": {},
+  "userData": {}
+}

JisolGameCocos/assets/script/ui/Tactical/IntoBattleView.ts

@@ -1,5 +1,16 @@
 import { _decorator, Component, Node } from 'cc';
 import JNLayerBase from '../../../../extensions/ngame/assets/ngame/ui/base/JNLayerBase';
+import { Prefab } from 'cc';
+import PlayerPetData from '../../data/PlayerPetData';
+import JNScrollView from '../../../../extensions/ngame/assets/ngame/util/components/scrollview/JNScrollView';
+import { PetIconItem } from '../Consts/Pet/PetIconItem';
+import { NodeEventType } from 'cc';
+import { sp } from 'cc';
+import { app } from '../../App';
+import { PlayerPetOV } from '../../consts/API';
+import { UIPetAnim } from '../../consts/GData';
+import { GUI } from '../UIConfig';
+import PlayerTacticalData from '../../data/PlayerTacticalData';
 const { ccclass, property } = _decorator;
 
 //上阵页面
@@ -7,6 +18,95 @@ const { ccclass, property } = _decorator;
 export class IntoBattleView extends JNLayerBase {
 
 
+    @property(JNScrollView)
+    views:JNScrollView; //宠物列表
+
+    @property(Prefab)
+    petIconPrefab; //宠物Icon预制体
+
+    @property(sp.Skeleton)
+    spine:sp.Skeleton; //当前选中的宠物
+
+    //宠物数据
+    pets:PlayerPetOV[] = [];
+
+    //当前选中
+    index:number = -1;
+
+    tIndex:number = -1; //阵法下标
+
+    onJNLoad(data: {index}): void {
+
+        super.onJNLoad();
+
+        //获取传入的下标
+        this.tIndex = data.index;
+
+        console.log("你选择的是",this.tIndex);
+
+        this.onUpdateView();
+        
+    }
+
+    //刷新页面
+    onUpdateView(){
+
+        //获取所有玩家宠物
+        this.pets = PlayerPetData.getIns().getData();
+        this.views.refreshData(this.pets);
+
+        //向子节点添加点击事件
+        this.views.addItemEvent(NodeEventType.TOUCH_START,this.onClickItem.bind(this));
+
+    }
+
+    //刷新选中
+    onUpdateSelect(){
+
+        //默认都不选中
+        this.views.getItems<PetIconItem>().forEach(item => {
+            item.isSelect = false;
+            item.onUpdateSelect();
+        })
+
+        //设置选中
+        if(this.index != -1){
+            let current = this.views.getItems<PetIconItem>()[this.index]
+            current.isSelect = true;
+            current.onUpdateSelect();
+        }
+
+        //显示选中宠物
+        this.spine.skeletonData = app.battleRes.roleSpine[this.pets[this.index].petTbId];
+        this.spine.setAnimation(0,UIPetAnim.std,true);
+
+    }
+
+    //点击Item
+    onClickItem(index:number){
+        
+        //设置当前选中
+        this.index = index;
+        //刷新
+        this.onUpdateSelect();
+
+    }
+
+    //点击上阵
+    async onClickTactical(){
+
+        if(this.index < 0){
+            app.layer.Open(GUI.Tips,{text:"请选择要上阵的宠物."})
+            return;
+        }
+
+        //修改上阵信息
+        await PlayerTacticalData.getIns().UpdateIndexTactical(this.index,this.pets[this.index].petId);
+
+        //上阵完 关闭页面
+        app.layer.CloseNode(this.node);
+
+    }
 
     
 }

JisolGameCocos/assets/script/ui/UIConfig.ts

@@ -9,9 +9,10 @@ export enum GLayer{
 
 export enum GUI{
     /** 系统UI */
-    Login = "Login",        //登录页面
-    Loading = "Loading",    //加载页面
-    Tips = "Tips",          //提示
+    Login = "Login",                //登录页面
+    Loading = "Loading",            //加载页面
+    Tips = "Tips",                  //提示
+    SelectionBox = "SelectionBox",  //选择提示页面 (用于玩家确定该操作)
 
     /** 新手引导 */
     NoviceNamingView = "NoviceNamingView", //新手引导页面 - 取名
@@ -31,12 +32,20 @@ export enum GUI{
 const UISystemConfig:{ [key: string]: JNLayerInfo; } = {
     [GUI.Tips]:{
         layer:GLayer.Tips,
-        uri: "prefab/ui/系统页面/Tips/TipsView",
+        uri: "prefab/ui/系统页面/提示/TipsView",
         anims:{
             front:JNLayerAnim.BackOutOpen,
             back:JNLayerAnim.BackInClose
         }
     },
+    [GUI.SelectionBox]:{
+        layer:GLayer.Tips, 
+        uri: "prefab/ui/系统页面/选择提示/SelectionBox",
+        anims:{
+            front:JNLayerAnim.BackOutOpen,
+            back:JNLayerAnim.BackInClose
+        },
+    },
     [GUI.Login]:{
         layer:GLayer.Popup,
         uri: "prefab/ui/系统页面/LoginView",
@@ -58,7 +67,7 @@ const UISystemConfig:{ [key: string]: JNLayerInfo; } = {
 //主页UI
 const UIMainConfig:{ [key: string]: JNLayerInfo; } = {
     [GUI.MainChat]:{
-        layer:GLayer.Tips,
+        layer:GLayer.View,
         uri: "prefab/ui/主页/聊天/MainChatView",
         anims:{
             front:JNLayerAnim.Enlarge,