Commit 62edde1c authored by limingzhe's avatar limingzhe

add syncPage

parent 2d4d3d00
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
<div class="save-box"> <div class="save-box">
<button class="save-btn" nz-button nzType="primary" [nzSize]="'large'" nzShape="round" <button class="save-btn" nz-button nzType="primary" [nzSize]="'large'" nzShape="round"
(click)="saveClick()"> (click)="saveClick()" [disabled]="saveDisabled">
<i nz-icon type="save"></i> <i nz-icon type="save"></i>
Save Save
</button> </button>
......
...@@ -14,6 +14,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -14,6 +14,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// @Input()
// bgItem = null;
_bgItem = null; _bgItem = null;
...@@ -27,7 +29,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -27,7 +29,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
return this._bgItem; return this._bgItem;
} }
@Input() // @Input()
imgItemArr = null; imgItemArr = null;
@Input() @Input()
...@@ -35,7 +37,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -35,7 +37,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
@Input() // @Input()
hotZoneArr = null; hotZoneArr = null;
...@@ -80,9 +82,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -80,9 +82,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
oldPos; oldPos;
saveDisabled = true;
curItem; curItem;
bg: MySprite; bg;
changeSizeFlag = false; changeSizeFlag = false;
changeTopSizeFlag = false; changeTopSizeFlag = false;
changeRightSizeFlag = false; changeRightSizeFlag = false;
...@@ -103,7 +105,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -103,7 +105,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.initListener(); this.initListener();
// this.init();
this.update(); this.update();
} }
...@@ -123,6 +124,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -123,6 +124,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
console.log('e: ', e); console.log('e: ', e);
this.bgItem.url = e.url; this.bgItem.url = e.url;
this.refreshBackground(); this.refreshBackground();
this.saveDisabled = false;
} }
refreshBackground(callBack = null) { refreshBackground(callBack = null) {
...@@ -165,22 +168,13 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -165,22 +168,13 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.refreshHotZoneId(); this.refreshHotZoneId();
console.log('hotZoneArr:', this.hotZoneArr); console.log('hotZoneArr:', this.hotZoneArr);
}
onImgUploadSuccessByImg(e, img) { this.saveDisabled = false;
img.pic_url = e.url;
this.refreshImage (img);
} }
refreshImage(img) {
this.hideAllLineDash();
img.picItem = this.getPicItem(img);
this.refreshImageId();
}
refreshHotZoneId() { refreshHotZoneId() {
...@@ -195,16 +189,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -195,16 +189,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
} }
refreshImageId() {
for (let i = 0; i < this.imgArr.length; i++) {
this.imgArr[i].id = i;
if (this.imgArr[i].picItem) {
this.imgArr[i].picItem.text = 'Image-' + (i + 1);
}
}
}
getHotZoneItem( saveData = null) { getHotZoneItem( saveData = null) {
...@@ -226,61 +211,22 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -226,61 +211,22 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
item.scaleY = saveRect.height / item.height; item.scaleY = saveRect.height / item.height;
item.x = saveRect.x + saveRect.width / 2 ; item.x = saveRect.x + saveRect.width / 2 ;
item.y = saveRect.y + saveRect.height / 2; item.y = saveRect.y + saveRect.height / 2;
item['key'] = saveData.key;
} }
item.showLineDash(); if (!item['key']) {
item['key'] = Date.now().toString();
return item;
} }
getPicItem(img, saveData = null) {
const item = new EditorItem(this.ctx);
item.load(img.pic_url).then( img => {
let maxW, maxH;
if (this.bg) {
maxW = this.bg.width * this.bg.scaleX;
maxH = this.bg.height * this.bg.scaleY;
} else {
maxW = this.canvasWidth;
maxH = this.canvasHeight;
}
let scaleX = maxW / 3 / item.width;
let scaleY = maxH / 3 / item.height;
if (item.height * scaleX < this.canvasHeight) {
item.setScaleXY(scaleX);
} else {
item.setScaleXY(scaleY);
}
item.x = this.canvasWidth / 2;
item.y = this.canvasHeight / 2;
if (saveData) {
const saveRect = saveData.rect;
item.setScaleXY(saveRect.width / item.width);
item.x = saveRect.x + saveRect.width / 2 ;
item.y = saveRect.y + saveRect.height / 2;
} else {
item.showLineDash(); item.showLineDash();
}
});
return item; return item;
} }
onAudioUploadSuccessByImg(e, img) {
img.audio_url = e.url;
}
deleteItem(e, i) { deleteItem(e, i) {
// this.imgArr.splice(i , 1); // this.imgArr.splice(i , 1);
...@@ -288,6 +234,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -288,6 +234,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.hotZoneArr.splice(i, 1); this.hotZoneArr.splice(i, 1);
this.refreshHotZoneId(); this.refreshHotZoneId();
this.saveDisabled = false;
} }
...@@ -381,46 +329,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -381,46 +329,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
initImgArr() {
console.log('this.imgItemArr: ', this.imgItemArr);
let curBgRect;
if (this.bg) {
curBgRect = this.bg.getBoundingBox();
} else {
curBgRect = {x: 0, y: 0, width: this.canvasWidth, height: this.canvasHeight};
}
let oldBgRect = this.bgItem.rect;
if (!oldBgRect) {
oldBgRect = curBgRect;
}
const rate = curBgRect.width / oldBgRect.width;
console.log('rate: ', rate);
this.imgArr = [];
const arr = this.imgItemArr.concat();
for (let i = 0; i < arr.length; i++) {
const data = JSON.parse(JSON.stringify(arr[i]));
const img = {pic_url: data.pic_url};
data.rect.x *= rate;
data.rect.y *= rate;
data.rect.width *= rate;
data.rect.height *= rate;
data.rect.x += curBgRect.x;
data.rect.y += curBgRect.y;
img['picItem'] = this.getPicItem(img, data);
img['audio_url'] = arr[i].audio_url;
this.imgArr.push(img);
}
this.refreshImageId();
}
initData() { initData() {
...@@ -492,6 +400,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -492,6 +400,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.curItem.y += addY; this.curItem.y += addY;
} }
this.saveDisabled = false;
this.oldPos = {x: this.mx, y: this.my}; this.oldPos = {x: this.mx, y: this.my};
} }
...@@ -596,20 +506,12 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -596,20 +506,12 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
changeCurItem(item) { changeCurItem(item) {
this.hideAllLineDash();
this.curItem = item; this.curItem = item;
this.curItem.showLineDash(); this.curItem.showLineDash();
} }
hideAllLineDash() {
for (let i = 0; i < this.imgArr.length; i++) {
if (this.imgArr[i].picItem) {
this.imgArr[i].picItem.hideLineDash();
}
}
}
update() { update() {
...@@ -761,6 +663,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -761,6 +663,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
saveClick() { saveClick() {
this.saveDisabled = true;
const bgItem = this.bgItem; const bgItem = this.bgItem;
if (this.bg) { if (this.bg) {
bgItem['rect'] = this.bg.getBoundingBox(); bgItem['rect'] = this.bg.getBoundingBox();
...@@ -770,30 +675,13 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -770,30 +675,13 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// const imgItemArr = [];
// const imgArr = this.imgArr;
// for (let i = 0; i < imgArr.length; i++) {
//
// const imgItem = {
// id: imgArr[i].id,
// pic_url: imgArr[i].pic_url,
// audio_url: imgArr[i].audio_url,
// };
// if (imgArr[i].picItem) {
// imgItem['rect'] = imgArr[i].picItem.getBoundingBox();
// imgItem['rect'].x -= bgItem['rect'].x;
// imgItem['rect'].y -= bgItem['rect'].y;
// }
// imgItemArr.push(imgItem);
// }
const hotZoneItemArr = []; const hotZoneItemArr = [];
const hotZoneArr = this.hotZoneArr; const hotZoneArr = this.hotZoneArr;
for (let i = 0; i < hotZoneArr.length; i++) { for (let i = 0; i < hotZoneArr.length; i++) {
const hotZoneItem = { const hotZoneItem = {
index: hotZoneArr[i].index, index: hotZoneArr[i].index,
key: hotZoneArr[i].key
}; };
hotZoneItem['rect'] = hotZoneArr[i].getBoundingBox(); hotZoneItem['rect'] = hotZoneArr[i].getBoundingBox();
hotZoneItem['rect'].x = Math.round( (hotZoneItem['rect'].x - bgItem['rect'].x) * 100) / 100; hotZoneItem['rect'].x = Math.round( (hotZoneItem['rect'].x - bgItem['rect'].x) * 100) / 100;
......
...@@ -17,9 +17,9 @@ ...@@ -17,9 +17,9 @@
<div style="padding: 2vw"> <div style="padding: 2vw">
<div style="display: flex; align-items: center; width: 70%"> <div style="display: flex; align-items: center; width: 80%">
<span style="padding-right: 5px; width: 120px;"> question-{{i + 1}}: </span> <span style="padding-right: 5px; width: 160px;"> question-{{i + 1}}: </span>
<input type="text" nz-input placeholder="" [(ngModel)]="it.text" (blur)="saveItem()"> <input type="text" nz-input placeholder="" [(ngModel)]="it.text" (blur)="saveItem()">
<button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)"> <button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)">
<i nz-icon type="close"></i> <i nz-icon type="close"></i>
......
@import '../style/common_mixin'; @import '../style/common_mixin';
.model-content { .model-content {
//width: 100%;
//height: 100%;
.item-box{
width: 100%; width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 10px;
padding-bottom: 5vw;
padding-top: 5vw;
}
.pic-sound-box {
width: 50%;
display: flex;
//align-items: center;
flex-direction: column
}
.add-btn-box {
display: flex;
align-items: center;
justify-content: center;
//width: 180px;
height: 20vw;
//background: #FFDC00;
padding: 10px;
padding-top: 5vw;
}
} }
...@@ -105,6 +105,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -105,6 +105,8 @@ export class PlayComponent implements OnInit, OnDestroy {
// 是否游戏进行中 // 是否游戏进行中
isGaming; isGaming;
serverAllUser;
@HostListener('window:resize', ['$event']) @HostListener('window:resize', ['$event'])
onResize(event) { onResize(event) {
this.winResizeEventStream.next(); this.winResizeEventStream.next();
...@@ -116,7 +118,14 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -116,7 +118,14 @@ export class PlayComponent implements OnInit, OnDestroy {
ngOnInit() { ngOnInit() {
const getData = (<any> window).courseware.getData; const getData = (<any> window).courseware.getData;
getData((data) => { getData((data, aspect) => {
if (aspect) {
console.log('aspect : ', aspect);
this.serverAllUser = aspect.all_user;
}
if (window['air'].airClassInfo.user.classRole == 'tea') { if (window['air'].airClassInfo.user.classRole == 'tea') {
this.teachFlag = true; this.teachFlag = true;
} }
...@@ -296,6 +305,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -296,6 +305,7 @@ export class PlayComponent implements OnInit, OnDestroy {
console.log(' in initData', this.data); console.log(' in initData', this.data);
this.canTouch = true; this.canTouch = true;
this.gameEndFlag = false;
this.curPageIndex = 0; this.curPageIndex = 0;
this.endPageArr = []; this.endPageArr = [];
...@@ -473,6 +483,33 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -473,6 +483,33 @@ export class PlayComponent implements OnInit, OnDestroy {
this.refreshAnswerNum(); this.refreshAnswerNum();
this.initCover(); this.initCover();
this.initTeacherPage(); this.initTeacherPage();
this.syncPage();
}
syncPage() {
const allUser = this.serverAllUser;
if (allUser) {
console.log('allUser: ', allUser);
for (let i = 0; i < allUser.length; i++) {
const userData = allUser[i];
if (userData.user.classRole == 'tea') {
if (userData.aspect) {
const aspect = JSON.parse(userData.aspect);
console.log('aspect: ', aspect);
if (aspect.startFlag) {
this.isGaming = true;
}
}
break;
}
}
}
} }
teacherPageArr; teacherPageArr;
...@@ -634,6 +671,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -634,6 +671,7 @@ export class PlayComponent implements OnInit, OnDestroy {
label.y = (this.bgRect.y - this.bgRect.height / 2 * this.bgRect.scaleY) / 2; label.y = (this.bgRect.y - this.bgRect.height / 2 * this.bgRect.scaleY) / 2;
label.fontColor = '#fff143'; label.fontColor = '#fff143';
label.setShadow(0, 5, 5, 'rgba(0,0,0,0.3)'); label.setShadow(0, 5, 5, 'rgba(0,0,0,0.3)');
label.anchorX = 0;
this.titleLabel = label; this.titleLabel = label;
this.renderArr.push(label); this.renderArr.push(label);
...@@ -711,11 +749,15 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -711,11 +749,15 @@ export class PlayComponent implements OnInit, OnDestroy {
this.playAudio('tip', true); this.playAudio('tip', true);
this.showAudio();
}); });
} else { } else {
this.titleLabel.text = data.text; this.titleLabel.text = data.text;
} }
this.titleLabel.refreshSize();
} }
...@@ -750,7 +792,12 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -750,7 +792,12 @@ export class PlayComponent implements OnInit, OnDestroy {
const data = this.picArr[this.curPageIndex]; const data = this.picArr[this.curPageIndex];
const audio = this.audioObj[data.audio_url]; const audio = this.audioObj[data.audio_url];
if (audio) { if (audio) {
try {
audio.play(); audio.play();
} catch (e) {
console.log('e: ', e);
}
} }
} }
...@@ -826,7 +873,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -826,7 +873,7 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
sendServerEvent(key, data = null) { sendServerEvent(key, data = null) {
console.log(`event: ${key}, data: ${data}`); console.log('data: ', data);
const c = (<any> window).courseware; const c = (<any> window).courseware;
c.sendEvent(key, data); c.sendEvent(key, data);
} }
...@@ -902,29 +949,49 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -902,29 +949,49 @@ export class PlayComponent implements OnInit, OnDestroy {
const c = (<any> window).courseware; const c = (<any> window).courseware;
const that = this; const that = this;
if (this.teachFlag) { if (this.teachFlag) {
c.onEvent('start_game', function() { c.onEvent('start_game', function(data, next) {
console.log('show teacher page'); console.log('show teacher page');
that.isGaming = true; that.isGaming = true;
that.teacherPage.visible = true; that.teacherPage.visible = true;
next();
}); });
c.onEvent('score_data', function(data) { c.onEvent('score_data', function(data, next) {
that.addTeacherPageData(data); that.addTeacherPageData(data);
next();
}); });
} else { } else {
c.onEvent('start_game', function() { c.onEvent('start_game', function(data, next) {
that.isGaming = true; that.isGaming = true;
this.showAudio();
next();
}); });
// todo 学生的游戏开始 // todo 学生的游戏开始
} }
} }
titleLabelClicked() {
this.showAudio();
}
// todo // todo
mapDown(event) { mapDown(event) {
if (this.gameEndFlag) {
return;
}
(window as any).test = this; (window as any).test = this;
// 如果游戏未开始,并且是老师身份,则点击时开始游戏 // 如果游戏未开始,并且是老师身份,则点击时开始游戏
if (!this.isGaming && this.teachFlag && this.checkClickTarget(this.startBtn)) { if (!this.isGaming && this.teachFlag && this.checkClickTarget(this.startBtn)) {
this.sendServerEvent('start_game', {}); this.sendServerEvent('start_game', {startFlag: true});
return; return;
} }
if (!this.isGaming) { if (!this.isGaming) {
...@@ -933,6 +1000,9 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -933,6 +1000,9 @@ export class PlayComponent implements OnInit, OnDestroy {
if (!this.canTouch) { if (!this.canTouch) {
return; return;
} }
this.canTouch = false;
if (this.teacherPage.visible) { if (this.teacherPage.visible) {
if (this.checkClickTarget(this.arrowL)) { if (this.checkClickTarget(this.arrowL)) {
this.changePage(-1); this.changePage(-1);
...@@ -951,6 +1021,11 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -951,6 +1021,11 @@ export class PlayComponent implements OnInit, OnDestroy {
return; return;
} }
} }
if (this.checkClickTarget(this.titleLabel)) {
this.titleLabelClicked();
return;
}
this.clickWrong(); this.clickWrong();
} }
...@@ -980,7 +1055,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -980,7 +1055,6 @@ export class PlayComponent implements OnInit, OnDestroy {
const options = data.options; const options = data.options;
if (options[index] && options[index].checked) { if (options[index] && options[index].checked) {
console.log('right'); console.log('right');
this.setServerPicArr(data);
this.showFrame(index); this.showFrame(index);
} else { } else {
console.log('wrong'); console.log('wrong');
...@@ -1091,11 +1165,16 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1091,11 +1165,16 @@ export class PlayComponent implements OnInit, OnDestroy {
return; return;
} }
this.setServerPicArr(null);
this.curPageIndex++; this.curPageIndex++;
this.refreshPageLabel(); this.refreshPageLabel();
if (this.curPageIndex >= this.picArr.length) { if (this.curPageIndex >= this.picArr.length) {
this.gameEnd(); this.gameEnd();
return; return;
...@@ -1159,6 +1238,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1159,6 +1238,8 @@ export class PlayComponent implements OnInit, OnDestroy {
setTimeout(() => { setTimeout(() => {
this.showPetalFlag = false; this.showPetalFlag = false;
}, 5000); }, 5000);
this.gameEndFlag = true;
} }
update() { update() {
...@@ -1513,13 +1594,15 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1513,13 +1594,15 @@ export class PlayComponent implements OnInit, OnDestroy {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const audio = new Audio(); const audio = new Audio();
audio.oncanplay = (a) => { audio.oncanplay = (a) => {
resolve();
}; };
audio.onerror = () => { audio.onerror = () => {
reject(); reject();
}; };
audio.src = url; audio.src = url;
audio.load(); audio.load();
resolve();
}); });
} }
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico"> <link rel="icon" type="image/x-icon" href="favicon.ico">
<script type="text/javascript" src="https://staging-teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air.js"></script> <script type="text/javascript" src="https://staging-teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air_online.js"></script>
</head> </head>
......
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