Commit 62edde1c authored by limingzhe's avatar limingzhe

add syncPage

parent 2d4d3d00
......@@ -75,7 +75,7 @@
<div class="save-box">
<button class="save-btn" nz-button nzType="primary" [nzSize]="'large'" nzShape="round"
(click)="saveClick()">
(click)="saveClick()" [disabled]="saveDisabled">
<i nz-icon type="save"></i>
Save
</button>
......
......@@ -14,6 +14,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// @Input()
// bgItem = null;
_bgItem = null;
......@@ -27,7 +29,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
return this._bgItem;
}
@Input()
// @Input()
imgItemArr = null;
@Input()
......@@ -35,7 +37,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
@Input()
// @Input()
hotZoneArr = null;
......@@ -80,9 +82,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
oldPos;
saveDisabled = true;
curItem;
bg: MySprite;
bg;
changeSizeFlag = false;
changeTopSizeFlag = false;
changeRightSizeFlag = false;
......@@ -103,7 +105,6 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.initListener();
// this.init();
this.update();
}
......@@ -123,6 +124,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
console.log('e: ', e);
this.bgItem.url = e.url;
this.refreshBackground();
this.saveDisabled = false;
}
refreshBackground(callBack = null) {
......@@ -165,22 +168,13 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.refreshHotZoneId();
console.log('hotZoneArr:', this.hotZoneArr);
}
onImgUploadSuccessByImg(e, img) {
img.pic_url = e.url;
this.refreshImage (img);
this.saveDisabled = false;
}
refreshImage(img) {
this.hideAllLineDash();
img.picItem = this.getPicItem(img);
this.refreshImageId();
}
refreshHotZoneId() {
......@@ -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) {
......@@ -226,7 +211,12 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
item.scaleY = saveRect.height / item.height;
item.x = saveRect.x + saveRect.width / 2 ;
item.y = saveRect.y + saveRect.height / 2;
item['key'] = saveData.key;
}
if (!item['key']) {
item['key'] = Date.now().toString();
}
item.showLineDash();
......@@ -236,51 +226,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
}
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();
}
});
return item;
}
onAudioUploadSuccessByImg(e, img) {
img.audio_url = e.url;
}
deleteItem(e, i) {
// this.imgArr.splice(i , 1);
......@@ -288,6 +234,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.hotZoneArr.splice(i, 1);
this.refreshHotZoneId();
this.saveDisabled = false;
}
......@@ -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() {
......@@ -492,6 +400,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
this.curItem.y += addY;
}
this.saveDisabled = false;
this.oldPos = {x: this.mx, y: this.my};
}
......@@ -550,10 +460,10 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
// s = lenW / this.curItem.width;
//
// } else {
if (lenH < minLen) {
lenH = minLen;
}
s = lenH / this.curItem.height;
if (lenH < minLen) {
lenH = minLen;
}
s = lenH / this.curItem.height;
// }
......@@ -596,20 +506,12 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
changeCurItem(item) {
this.hideAllLineDash();
this.curItem = item;
this.curItem.showLineDash();
}
hideAllLineDash() {
for (let i = 0; i < this.imgArr.length; i++) {
if (this.imgArr[i].picItem) {
this.imgArr[i].picItem.hideLineDash();
}
}
}
update() {
......@@ -761,6 +663,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
saveClick() {
this.saveDisabled = true;
const bgItem = this.bgItem;
if (this.bg) {
bgItem['rect'] = this.bg.getBoundingBox();
......@@ -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 hotZoneArr = this.hotZoneArr;
for (let i = 0; i < hotZoneArr.length; i++) {
const hotZoneItem = {
index: hotZoneArr[i].index,
key: hotZoneArr[i].key
};
hotZoneItem['rect'] = hotZoneArr[i].getBoundingBox();
hotZoneItem['rect'].x = Math.round( (hotZoneItem['rect'].x - bgItem['rect'].x) * 100) / 100;
......
......@@ -17,10 +17,10 @@
<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>
<input type="text" nz-input placeholder="" [(ngModel)]="it.text" (blur)="saveItem()">
<span style="padding-right: 5px; width: 160px;"> question-{{i + 1}}: </span>
<input type="text" nz-input placeholder="" [(ngModel)]="it.text" (blur)="saveItem()">
<button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)">
<i nz-icon type="close"></i>
</button>
......
@import '../style/common_mixin';
.model-content {
width: 100%;
height: 100%;
//width: 100%;
//height: 100%;
.item-box{
width: 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 {
// 是否游戏进行中
isGaming;
serverAllUser;
@HostListener('window:resize', ['$event'])
onResize(event) {
this.winResizeEventStream.next();
......@@ -116,7 +118,14 @@ export class PlayComponent implements OnInit, OnDestroy {
ngOnInit() {
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') {
this.teachFlag = true;
}
......@@ -296,6 +305,7 @@ export class PlayComponent implements OnInit, OnDestroy {
console.log(' in initData', this.data);
this.canTouch = true;
this.gameEndFlag = false;
this.curPageIndex = 0;
this.endPageArr = [];
......@@ -473,6 +483,33 @@ export class PlayComponent implements OnInit, OnDestroy {
this.refreshAnswerNum();
this.initCover();
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;
......@@ -634,6 +671,7 @@ export class PlayComponent implements OnInit, OnDestroy {
label.y = (this.bgRect.y - this.bgRect.height / 2 * this.bgRect.scaleY) / 2;
label.fontColor = '#fff143';
label.setShadow(0, 5, 5, 'rgba(0,0,0,0.3)');
label.anchorX = 0;
this.titleLabel = label;
this.renderArr.push(label);
......@@ -711,11 +749,15 @@ export class PlayComponent implements OnInit, OnDestroy {
this.playAudio('tip', true);
this.showAudio();
});
} else {
this.titleLabel.text = data.text;
}
this.titleLabel.refreshSize();
}
......@@ -750,7 +792,12 @@ export class PlayComponent implements OnInit, OnDestroy {
const data = this.picArr[this.curPageIndex];
const audio = this.audioObj[data.audio_url];
if (audio) {
audio.play();
try {
audio.play();
} catch (e) {
console.log('e: ', e);
}
}
}
......@@ -826,7 +873,7 @@ export class PlayComponent implements OnInit, OnDestroy {
}
sendServerEvent(key, data = null) {
console.log(`event: ${key}, data: ${data}`);
console.log('data: ', data);
const c = (<any> window).courseware;
c.sendEvent(key, data);
}
......@@ -902,29 +949,49 @@ export class PlayComponent implements OnInit, OnDestroy {
const c = (<any> window).courseware;
const that = this;
if (this.teachFlag) {
c.onEvent('start_game', function() {
c.onEvent('start_game', function(data, next) {
console.log('show teacher page');
that.isGaming = true;
that.teacherPage.visible = true;
next();
});
c.onEvent('score_data', function(data) {
c.onEvent('score_data', function(data, next) {
that.addTeacherPageData(data);
next();
});
} else {
c.onEvent('start_game', function() {
c.onEvent('start_game', function(data, next) {
that.isGaming = true;
this.showAudio();
next();
});
// todo 学生的游戏开始
}
}
titleLabelClicked() {
this.showAudio();
}
// todo
mapDown(event) {
if (this.gameEndFlag) {
return;
}
(window as any).test = this;
// 如果游戏未开始,并且是老师身份,则点击时开始游戏
if (!this.isGaming && this.teachFlag && this.checkClickTarget(this.startBtn)) {
this.sendServerEvent('start_game', {});
this.sendServerEvent('start_game', {startFlag: true});
return;
}
if (!this.isGaming) {
......@@ -933,6 +1000,9 @@ export class PlayComponent implements OnInit, OnDestroy {
if (!this.canTouch) {
return;
}
this.canTouch = false;
if (this.teacherPage.visible) {
if (this.checkClickTarget(this.arrowL)) {
this.changePage(-1);
......@@ -951,6 +1021,11 @@ export class PlayComponent implements OnInit, OnDestroy {
return;
}
}
if (this.checkClickTarget(this.titleLabel)) {
this.titleLabelClicked();
return;
}
this.clickWrong();
}
......@@ -980,7 +1055,6 @@ export class PlayComponent implements OnInit, OnDestroy {
const options = data.options;
if (options[index] && options[index].checked) {
console.log('right');
this.setServerPicArr(data);
this.showFrame(index);
} else {
console.log('wrong');
......@@ -1091,11 +1165,16 @@ export class PlayComponent implements OnInit, OnDestroy {
return;
}
this.setServerPicArr(null);
this.curPageIndex++;
this.refreshPageLabel();
if (this.curPageIndex >= this.picArr.length) {
this.gameEnd();
return;
......@@ -1159,6 +1238,8 @@ export class PlayComponent implements OnInit, OnDestroy {
setTimeout(() => {
this.showPetalFlag = false;
}, 5000);
this.gameEndFlag = true;
}
update() {
......@@ -1513,13 +1594,15 @@ export class PlayComponent implements OnInit, OnDestroy {
return new Promise((resolve, reject) => {
const audio = new Audio();
audio.oncanplay = (a) => {
resolve();
};
audio.onerror = () => {
reject();
};
audio.src = url;
audio.load();
resolve();
});
}
......
......@@ -7,7 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
......
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