Commit 6610f190 authored by liujiangnan's avatar liujiangnan

feat: 界面铺设

parent 127c6c3d
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -23,26 +23,12 @@ export default class SceneComponent extends MyCocosSceneComponent { ...@@ -23,26 +23,12 @@ export default class SceneComponent extends MyCocosSceneComponent {
@property(cc.AudioClip) @property(cc.AudioClip)
bgMusic2: cc.AudioClip = null; bgMusic2: cc.AudioClip = null;
@property(cc.Node)
BackDoorNode: cc.Node = null;
tws: any[] = []; tws: any[] = [];
gameMachineService: any = null; gameMachineService: any = null;
LoadingCount: number = 1; LoadingCount: number = 1;
_mapScaleMin: number = 1; _mapScaleMin: number = 1;
_mapScaleMax: number = 1; _mapScaleMax: number = 1;
_cocosScale: number = 1; _cocosScale: number = 1;
BASE_URL: string = null;
ROOT_PID: number = null; ROOT_PID: number = null;
MACHINE_INITED: boolean = false; MACHINE_INITED: boolean = false;
mute: boolean = true; mute: boolean = true;
...@@ -60,19 +46,6 @@ export default class SceneComponent extends MyCocosSceneComponent { ...@@ -60,19 +46,6 @@ export default class SceneComponent extends MyCocosSceneComponent {
initialized() { initialized() {
if(this.gameMachineService) { if(this.gameMachineService) {
this.gameMachineService.start(); this.gameMachineService.start();
this.restore();
}
}
callOcMethod(method, param) {
const paramStr = JSON.stringify(param);
if (cc.sys.isNative && cc.sys.os == cc.sys.OS_IOS) {
return jsb.reflection.callStaticMethod('RootViewController', `${method}:`, paramStr);
} else if (cc.sys.isNative && cc.sys.os == cc.sys.OS_ANDROID) {
return jsb.reflection.callStaticMethod('com/iplayabc/cocos/AppActivity', method, '(Ljava/lang/String;)Ljava/lang/String;', paramStr);
} else if (cc.sys.isNative && cc.sys.os == cc.sys.OS_WINDOWS) {
console.log('汪汪汪')
} else {
console.warn('非源生环境');
} }
} }
initSize() { initSize() {
...@@ -102,74 +75,18 @@ export default class SceneComponent extends MyCocosSceneComponent { ...@@ -102,74 +75,18 @@ export default class SceneComponent extends MyCocosSceneComponent {
this.initBg(); this.initBg();
this.initUnitViewPager(); this.initUnitViewPager();
this.createFiniteStateMachines(); this.createFiniteStateMachines();
const ferrisEntries = this.rootAttrTree.querySelectorAll('.ferris-entry');
const BackViewButtons = this.rootAttrTree.querySelectorAll('.back-view'); const BackViewButtons = this.rootAttrTree.querySelectorAll('.back-view');
BackViewButtons.forEach(b => { BackViewButtons.forEach(b => {
b.on(cc.Node.EventType.TOUCH_START, function () { b.on(cc.Node.EventType.TOUCH_START, function () {
this.gameMachineService.send('BACK'); // TODO 返回上一层
// this.node.emit('BACK');
}, this, true); }, this, true);
}); });
for (let bs of [ferrisEntries/*, this.SubmarineViewButtons, this.LetterViewButtons, this.StoryViewButtons, this.ReviewViewButtons*/]) {
bs.forEach(b => {
// const env = this;
b.on(cc.Node.EventType.TOUCH_START, function () {
console.log('entry btn click');
const attrs: Attributes = b.getComponent('Attributes');
const viewName = attrs.attrMap['view']
if (!viewName) {
throw new Error("can not found attr `viewName`");
}
const dataIndex = attrs.attrMap['dataIndex']
if (!dataIndex) {
throw new Error("can not found attr `dataIndex`");
}
const nextView = attrs.attrMap['nextView']
if (!nextView) {
throw new Error("can not found attr `nextView`");
}
// const [buttonName, state, index] = b.name.split('@');
// console.log(buttonName, state, index);
// let stateName = b.parent.name;
// if (stateName.includes('@')) {
// let [_, sn] = stateName.split('@')
// stateName = sn;
// }
// console.log(stateName);
const currentDataset = this.gameMachineService.machine.config.context[viewName + 'Data'];
if (!currentDataset || !currentDataset[dataIndex]) {
return;
}
// const linkFlag = stateName === 'LetterView';
// globalThis.PREV_STATE = globalThis.CURRENT_STATE ? JSON.parse(JSON.stringify(globalThis.CURRENT_STATE)) : null;
const param = JSON.parse(JSON.stringify(currentDataset[dataIndex]));
globalThis.CURRENT_STATE = {
viewName: nextView,
nextView: null,
data: { ...param }
}
// console.log(globalThis.PREV_STATE, globalThis.CURRENT_STATE);
// globalThis.CURRENT_PID = param.pid;
// globalThis.CURRENT_ID = param.id;
this.gameMachineService.send(nextView, { ...param});
}, this, true);
});
}
this.initialized(); this.initialized();
} }
initUnitViewPager() { initUnitViewPager() {
const pages = this.UnitViewPager.getPages(); const pages = this.UnitViewPager.getPages();
let pIndex = pages.length - 1; let pIndex = pages.length - 1;
// if (typeof globalThis.CURRENT_PAGE_INDEX != 'undefined' && typeof globalThis.CURRENT_PAGE_INDEX == 'number') {
// pIndex = globalThis.CURRENT_PAGE_INDEX;
// }
this.UnitViewPager.scrollToPage(pIndex, 0.001); this.UnitViewPager.scrollToPage(pIndex, 0.001);
this.UnitViewPager.node.on('scrolling', this.moveUnitViewBackground, this); this.UnitViewPager.node.on('scrolling', this.moveUnitViewBackground, this);
this.UnitView.active = false; this.UnitView.active = false;
...@@ -177,24 +94,15 @@ export default class SceneComponent extends MyCocosSceneComponent { ...@@ -177,24 +94,15 @@ export default class SceneComponent extends MyCocosSceneComponent {
this.UnitPageViewBgNode = attr.querySelector('#UnitPageViewBg'); this.UnitPageViewBgNode = attr.querySelector('#UnitPageViewBg');
this.UnitsListNode = attr.querySelector('#UnitsList'); this.UnitsListNode = attr.querySelector('#UnitsList');
const lessonButtons = attr.querySelectorAll('.lesson-button'); const lessonButtons = attr.querySelectorAll('.lesson-button');
// console.log(unitButtons);
lessonButtons.forEach((n) => { lessonButtons.forEach((n) => {
n.off(cc.Node.EventType.TOUCH_END); n.off(cc.Node.EventType.TOUCH_END);
n.on(cc.Node.EventType.TOUCH_END, function (e) { n.on(cc.Node.EventType.TOUCH_END, function (e) {
const na:Attributes = e.currentTarget.getComponent('Attributes'); const na:Attributes = e.currentTarget.getComponent('Attributes');
const dataIndex = na.attrMap['index'] const dataIndex = na.attrMap['index'];
console.log(dataIndex, globalThis.CURRENT_STATE); console.log('-----------------');
const currentDataset = this.gameMachineService.machine.config.context[globalThis.CURRENT_STATE.viewName + 'Data']; console.log(e.currentTarget);
if (!currentDataset || !currentDataset[dataIndex]) { console.log('-----------------');
return; // TODO 打开课件
}
globalThis.CURRENT_PAGE_INDEX = this.UnitViewPager.getCurrentPageIndex();
globalThis.PREV_STATE = JSON.parse(JSON.stringify(globalThis.CURRENT_STATE));
const param = JSON.parse(JSON.stringify(currentDataset[dataIndex]));
// globalThis.CURRENT_PID = param.pid;
// globalThis.CURRENT_ID = param.id;
this.gameMachineService.send('PLAY', {...param});
}, this, true) }, this, true)
}); });
} }
...@@ -202,7 +110,6 @@ export default class SceneComponent extends MyCocosSceneComponent { ...@@ -202,7 +110,6 @@ export default class SceneComponent extends MyCocosSceneComponent {
moveUnitViewBackground() { moveUnitViewBackground() {
//获取滚动视图相对于左上角原点的当前滚动偏移 //获取滚动视图相对于左上角原点的当前滚动偏移
let scrollOffset: cc.Vec2 = this.UnitViewPager.getScrollOffset(); let scrollOffset: cc.Vec2 = this.UnitViewPager.getScrollOffset();
// console.log(scrollOffset.y);
this.UnitsListNode.y = (scrollOffset.y * 8/9 ) + 600; this.UnitsListNode.y = (scrollOffset.y * 8/9 ) + 600;
this.UnitPageViewBgNode.y = (scrollOffset.y * .81 ) + 600; this.UnitPageViewBgNode.y = (scrollOffset.y * .81 ) + 600;
} }
...@@ -210,37 +117,13 @@ export default class SceneComponent extends MyCocosSceneComponent { ...@@ -210,37 +117,13 @@ export default class SceneComponent extends MyCocosSceneComponent {
this.rootAttrTree.querySelectorAll('.page-holder').forEach(p => { this.rootAttrTree.querySelectorAll('.page-holder').forEach(p => {
p.opacity = 0; p.opacity = 0;
}) })
// const bgNode = cc.find('Canvas/MainScene/SpaceView/bg');
const fullPageNode = this.rootAttrTree.querySelectorAll('.full-bg'); const fullPageNode = this.rootAttrTree.querySelectorAll('.full-bg');
console.log(fullPageNode);
fullPageNode.forEach(n => { fullPageNode.forEach(n => {
n.scale = this._mapScaleMax; n.scale = this._mapScaleMax;
}); });
// console.log(cc.view.getFrameSize().height);
// bg_front.y = -(cc.view.getFrameSize().height / 2 ) * cc.view.getDevicePixelRatio();
}
addPreloadImage() {
// TODO 根据自己的配置预加载图片资源
this._imageResList.push({ url: this.data.pic_url });
this._imageResList.push({ url: this.data.pic_url_2 });
}
addPreloadAudio() {
// TODO 根据自己的配置预加载音频资源
this._audioResList.push({ url: this.data.audio_url });
} }
addPreloadAnima() {
}
playBgMusic(audio) { playBgMusic(audio) {
if (this.mute) {
return;
}
cc.audioEngine.stopMusic(); cc.audioEngine.stopMusic();
cc.audioEngine.playMusic(audio, true); cc.audioEngine.playMusic(audio, true);
} }
...@@ -248,175 +131,81 @@ export default class SceneComponent extends MyCocosSceneComponent { ...@@ -248,175 +131,81 @@ export default class SceneComponent extends MyCocosSceneComponent {
const operationState = { const operationState = {
id: 'operation', id: 'operation',
initial: 'FerrisView', initial: 'UnitView',
context: { context: {
FerrisViewData: null,
UnitViewData: null, UnitViewData: null,
currentDataset: null, currentDataset: null,
}, },
states: { states: {
FerrisView: {
entry: (ctx, event) => {
this.UnitView.active = false;
this.playBgMusic(this.bgMusic1);
// event.type !== 'BACK'
callNetworkApiGet('/api/oxford/syllabus/v1/root/index/1', {orgid: 507}, (resp: any) => {
resp = JSON.parse(resp);
if (resp.msg == 'success') {
let { rows } = resp
rows = rows.filter(r => !r.has_courseware);
console.log('FerrisView111', rows)
ctx.FerrisViewData = rows;
ctx.currentDataset = rows;
}
});
},
exit: () => {
console.log('exit FerrisView stage');
this.playBgMusic(this.bgMusic2);
},
on: {
UnitView: 'UnitView',
},
},
UnitView: { UnitView: {
entry: (ctx, event) => { entry: (ctx, event) => {
console.log('entry UnitView stage'); console.log('entry UnitView stage');
this.UnitView.active = true; this.UnitView.active = true;
this.playBgMusic(this.bgMusic2);
}, const lessonsBtn = this.rootAttrTree.querySelectorAll('.lesson-button');
exit: () => { lessonsBtn.forEach(b => {
// console.log('exit UnitView stage'); const attr: Attributes = b.getComponent('Attributes');
}, const lock = cc.find('icon_key', b);
invoke: { lock.active = true;
src: (ctx, event) => { const titleNode = attr.querySelector('.title');
console.log(111, event) titleNode.getComponent(cc.RichText).string = `<outline align=top
const lessonsBtn = this.rootAttrTree.querySelectorAll('.lesson-button'); width=4></outline>`;
lessonsBtn.forEach(b => { });
const attr: Attributes = b.getComponent('Attributes');
const lock = cc.find('icon_key', b);
lock.active = true;
const titleNode = attr.querySelector('.title');
titleNode.getComponent(cc.RichText).string = `<outline align=top
width=4></outline>`;
});
callNetworkApiGet('/api/syllabus/v1/tree', {pid: event.id}, (resp: any) => { callNetworkApiGet('/api/syllabus/v1/tree', {pid: 21228}, (resp: any) => {
resp = JSON.parse(resp); resp = JSON.parse(resp);
if (resp.msg == 'success') { if (resp.msg == 'success') {
let { rows } = resp; let { rows } = resp;
const list = rows.reduce((result, next)=> { const list = rows.reduce((result, next)=> {
const { children } = next; const { children } = next;
// has_courseware true 是文件夹 // has_courseware true 是文件夹
let childrenList = children.filter(r => r.has_courseware) let childrenList = children.filter(r => r.has_courseware)
if (childrenList.length > 3) { if (childrenList.length > 3) {
childrenList.length = 3 childrenList.length = 3
} }
result = [...result, ...childrenList] result = [...result, ...childrenList]
return result return result
}, []); }, []);
// rows = rows.filter(r => !r.has_courseware) // rows = rows.filter(r => !r.has_courseware)
console.log('UnitView', list); console.log('UnitView', list);
lessonsBtn.forEach(b => {
const attr: Attributes = b.getComponent('Attributes');
lessonsBtn.forEach(b => { const index = attr.attrMap['index'];
const attr: Attributes = b.getComponent('Attributes'); const lesson = list[index];
const lock = cc.find('icon_key', b);
const index = attr.attrMap['index']; lock.active = true;
const lesson = list[index]; const titleNode = attr.querySelector('.title');
const lock = cc.find('icon_key', b); // titleNode.getComponent(cc.RichText).string = `<outline align=top
lock.active = true; // width=4></outline>`;
const titleNode = attr.querySelector('.title'); if (!lesson) {
// titleNode.getComponent(cc.RichText).string = `<outline align=top return;
// width=4></outline>`; }
if (!lesson) { // TODO 解锁逻辑
return; lock.active = false;
} b.attr({'data_id': lesson.id});
lock.active = false; const {parent} = b;
const {parent} = b; const pa = parent.getComponent('Attributes');
const pa = parent.getComponent('Attributes'); const {outline} = pa.attrMap;
const {outline} = pa.attrMap; titleNode.getComponent(cc.RichText).string = `<outline align=top color=${outline}
titleNode.getComponent(cc.RichText).string = `<outline align=top color=${outline} width=4>${lesson.name}</outline>`;
width=4>${lesson.name}</outline>`;
});
ctx.UnitViewData = list;
ctx.currentDataset = list;
}
});
} });
}, ctx.UnitViewData = list;
on: { ctx.currentDataset = list;
PLAY: {
target: 'PlayView',
// actions: (ctx, event) => {
// console.log('PlayView LOAD', ctx, event);
// }
},
BACK: {
target: 'FerrisView',
actions: (ctx, event) => {
console.log('back', ctx, event);
} }
} });
},
},
PlayView: {
on: {
}, },
exit: () => {
// console.log('exit UnitView stage');
},
invoke: { invoke: {
src: (ctx, event) => { src: (ctx, event) => {
this.showWaitingLetters();
} }
}, },
entry: (ctx, event) => {
console.log('entry PlayView stage');
this.showWaitingLetters();
cc.audioEngine.stopMusic();
const configData = globalThis.configData;
console.log('PlayView this', this);
console.log('PlayView event', event);
console.log('PlayView configData', configData);
let isDebug = false;
if (this.BackDoorNode) {
const bd = this.BackDoorNode.getComponent('BackDoor');
if (bd && bd.isDebug()) {
isDebug = true;
}
}
cc.assetManager.loadBundle(configData.bondleUrl, { version: configData.version }, async (err, bundle) => {
if (err) {
return console.log(err);
}
bundle.loadScene(configData.sceneName, null, null, (err, scene) => {
cc.director.runScene(scene, null, () => {
try {
const middleLayer = cc.find('middleLayer').getComponent('middleLayer');
if (!isDebug) {
middleLayer.loadOnlineCourseWare(event.id, event.linkFlag);
}
} catch (e) {
console.error(e);
}
});
});
});
},
exit: () => {
this.hideWaitingLetters();
console.log('exit PlayView stage');
},
}, },
} }
}; };
...@@ -428,16 +217,6 @@ export default class SceneComponent extends MyCocosSceneComponent { ...@@ -428,16 +217,6 @@ export default class SceneComponent extends MyCocosSceneComponent {
}); });
} }
restore() {
console.log('restore', globalThis.PREV_STATE);
if (globalThis.PREV_STATE) {
// globalThis.CURRENT_ID = globalThis.PREV_STATE.data.id
// globalThis.CURRENT_PID = globalThis.PREV_STATE.data.pid
this.gameMachineService.send(globalThis.PREV_STATE.viewName, { ...globalThis.PREV_STATE.data});
globalThis.CURRENT_STATE = JSON.parse(JSON.stringify(globalThis.PREV_STATE));
globalThis.PREV_STATE = null;
}
}
setStateContextData({ rows, buttonsKey }) { setStateContextData({ rows, buttonsKey }) {
const buttons = buttonsKey; const buttons = buttonsKey;
buttons.forEach((b: any) => { buttons.forEach((b: any) => {
...@@ -457,83 +236,5 @@ export default class SceneComponent extends MyCocosSceneComponent { ...@@ -457,83 +236,5 @@ export default class SceneComponent extends MyCocosSceneComponent {
}, this, true) }, this, true)
}); });
} }
callNetworkApiGet(uri, successCallBack: (resp: string) => void, errorCallback?: (any) => void) {
this.showWaitingLetters()
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState == 4) {
this.hideWaitingLetters()
if ((xhr.status >= 200 && xhr.status < 400)) {
successCallBack && successCallBack(xhr.responseText);
} else {
errorCallback && errorCallback(xhr)
}
}
};
console.log('url = ' + uri);
xhr.open('GET', uri, true);
xhr.send();
}
hideWaitingLetters() {
this.LoadingCount--;
if (this.LoadingCount <= 0) {
this.LoadingCount = 0;
setTimeout(() => {
if (this.tws){
for (const tw of this.tws) {
tw.node.y = 0;
tw.tw.stop();
}
}
this.loading.active = false;
});
}
}
showWaitingLetters() {
this.LoadingCount += 1;
if (this.loading.active) {
return;
}
const colorList = this.getRainbowColorList();
const text = this.loading.getChildByName('text')
text.children.forEach((node, idx) => {
node.color = colorList[idx];
const tw = cc.tween(node)
.delay(idx / 4)
.to(0.3, { y: 50 }, { easing: 'sineOut' })
.to(0.3, { y: -50 }, { easing: 'sineIn' })
.delay((text.children.length - idx) / 4)
.union()
.repeatForever()
.start();
this.tws.push({
tw,
node
});
});
this.loading.active = true;
}
getRainbowColorList() {
return [
cc.color(255, 255, 0),
cc.color(128, 255, 0),
cc.color(0, 255, 0),
cc.color(0, 255, 128),
cc.color(0, 255, 255),
cc.color(0, 128, 255),
cc.color(0, 0, 255),
cc.color(128, 0, 255),
cc.color(255, 0, 255),
cc.color(255, 0, 128),
cc.color(255, 0, 0),
cc.color(255, 128, 0),
cc.color(255, 255, 0),
];
}
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment