Commit 1e34b406 authored by limingzhe's avatar limingzhe

first

parent 1f535d89
......@@ -44,7 +44,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
@ViewChild('canvas') canvas: ElementRef;
@ViewChild('wrap') wrap: ElementRef;
@HostListener('window:resize', ['$event'])
// @HostListener('window:resize', ['$event'])
canvasWidth = 1280;
canvasHeight = 720;
......@@ -68,7 +68,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
images = new Map();
animationId: any;
winResizeEventStream = new Subject();
// winResizeEventStream = new Subject();
canvasLeft;
canvasTop;
......@@ -95,7 +95,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
onResize(event) {
this.winResizeEventStream.next();
// this.winResizeEventStream.next();
}
......@@ -655,11 +655,11 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
initListener() {
this.winResizeEventStream
.pipe(debounceTime(500))
.subscribe(data => {
this.renderAfterResize();
});
// this.winResizeEventStream
// .pipe(debounceTime(500))
// .subscribe(data => {
// this.renderAfterResize();
// });
if (this.IsPC()) {
......
This diff is collapsed.
@import '../style/common_mixin';
.tw{
display: flex;
.t{
flex: 1 1 auto;
margin-right: 2rem;
.model-content {
width: 100%;
height: 100%;
.item-box{
//margin: auto;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 10px;
padding-bottom: 2vw;
padding-top: 3vw;
}
.a{
.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;
}
}
.aud-w{
width: 100%;
display: flex;
justify-content: center;
margin-top: 1.5rem;
.border {
border-radius: 20px;
border-style: dashed;
//border-radius: 20px;
//border-width: 2px;
//border-color: #000000;
}
import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef} from '@angular/core';
import * as _ from 'lodash';
@Component({
selector: 'app-form',
......@@ -8,58 +9,215 @@ import * as _ from 'lodash';
})
export class FormComponent implements OnInit, OnChanges, OnDestroy {
// titleObj = {
// audio_url: 'http://iplayabc-courseware.oss-cn-beijing.aliyuncs.com/dev/imman/audios/d108d5d06105fda0526059a3e372f926.mp3',
// content: 'what is this? ',
// icons: [],
// type: 'a'
// };
picArr = [];
_item: any;
KEY = 'hw_003';
titleObj = {
audio_url: '',
content: '',
icons: [],
type: ''
};
answerType = 'A';
teststr = "";
constructor(private appRef: ApplicationRef) {
// @Input()
set item(item) {
this._item = item;
// this.init();
}
get item() {
return this._item;
}
@Output()
update = new EventEmitter();
constructor(private appRef: ApplicationRef) {
}
ngOnInit() {
let _this = this;
(<any>window).courseware.getData(function(data){
if(data){
_this.titleObj = data;
setTimeout(() => {
_this.appRef.tick();
}, 1);
}
});
}
this.item = {};
this.item.contentObj = {};
const getData = (<any> window).courseware.getData;
getData((data) => {
if (data) {
this.item = data;
} else {
this.item = {};
}
if ( !this.item.contentObj ) {
this.item.contentObj = {};
}
console.log('~data:', data);
this.init();
this.refresh();
}, this.KEY);
// this.initData();
}
ngOnChanges() {
}
ngOnDestroy() {
}
init() {
if (this.item.contentObj.picArr) {
this.picArr = this.item.contentObj.picArr;
} else {
this.picArr = this.getDefaultPicArr();
this.item.contentObj.picArr = this.picArr;
}
console.log('item:' , this.item);
// this.picArr = this.getDefaultPicArr();
// this.item.contentObj.picArr = this.picArr;
// console.log('this.item:;', this.picArr);
}
getDefaultPicArr() {
const arr = [];
// for (let i = 0; i < 4; i ++) {
// const data = {};
// data['pic_url'] = '';
//
// const soundArr = [];
// for (let i = 0; i < 3; i++) {
// const tmpData = {};
// tmpData['answer'] = false;
// tmpData['audio_url'] = '';
// soundArr.push(tmpData);
// }
// data['soundArr'] = soundArr;
//
// arr.push(data);
// }
return arr;
}
initData() {
}
deleteItem(data) {
const index = this.picArr.indexOf(data);
if (index !== -1) {
this.picArr.splice(index, 1);
}
// this.update.emit(this.item);
this.save();
}
updateTitleObjSuccess(titleObj) {
this.titleObj = titleObj;
onImageUploadSuccessByItem(e, item, id = null) {
if (id != null) {
item[id + '_pic_url'] = e.url;
} else {
item.pic_url = e.url;
}
this.save();
// this.update.emit(this.item);
// console.log('this.item: ', this.item);
}
onAudioUploadSuccessByItem(e, item, id = null) {
if (id != null) {
item[id + '_audio_url'] = e.url;
} else {
item.audio_url = e.url;
}
// this.update.emit(this.item);
this.save();
}
onTitleAudioUploadSuccess(res) {
this.titleObj.audio_url = res.url;
addPic() {
const data = {
pic_url: '',
audio_url: '',
answerType: 'A',
// text: '',
// radioValue: 'A'
}
const answerArr = [];
const idArr = ['A', 'B', 'C', 'D'];
for (let i = 0; i < 4; i++) {
answerArr.push({id: idArr[i]});
}
data['answerArr'] = answerArr;
data['answerId'] = '0';
this.picArr.push(data);
this.saveItem();
}
radioClick(it, radioValue) {
it.radioValue = radioValue;
this.saveItem();
}
clickCheckBox() {
console.log(' in clickCheckBox');
this.saveItem();
}
saveItem() {
console.log(' in saveItem');
// this.update.emit(this.item);
this.save();
}
save() {
(<any>window).courseware.setData(this.titleObj);
save() {
(<any> window).courseware.setData(this.item, null, this.KEY);
this.refresh();
}
refresh() {
setTimeout(() => {
this.appRef.tick();
}, 1);
}
}
This diff is collapsed.
<div class="player-preview-content" [ngStyle]="{'background-color': this.data.contentObj?.titleObj?.type === 'a' ? '#fce5e9' : '#d8eefb'}">
<app-player-content-wrapper>
<div [innerHTML]="data.contentObj.titleObj.content" style="
position: absolute;z-index:99;
display: inline-block;
left: 55px;
top: 20px;
cursor: pointer" (click)="playTitleAudio()"></div>
<div class="content" style = 'position: relative;width: 100%;height: 100%;display: flex;
justify-content: center;
align-items: flex-end;'>
<div class="letter-box">
<div class="letters" >
<div class="letter" *ngFor="let a of letters; let i = index"
[ngStyle]="{top: row(i) +'%', left: (10 + (i % 13) * 6.05) +'%'}">
<div class="l-box" (click)="clickItem($event, a)">
<img [src]="'assets/all-letters/letter-imgs/'+a +'.png'" alt="">
<div style="display: none">
<audio [src]="'assets/all-letters/letter-audios/'+fromCharCode(a)+'.mp3'" preload="auto"> </audio>
</div>
</div>
</div>
</div>
</div>
<div class="show-item-content"
*ngIf="showDetailFlag"
(click)="clickBg()">
<div style="width: 50%; height: 80%; margin-top: 2rem">
<img [src]="curItemUrl" style="height: 100%; width: auto;"
(click)="clickBigItem($event)">
</div>
</div>
</div>
</app-player-content-wrapper>
<div class="game-container" #wrap>
<canvas id="canvas" #canvas></canvas>
</div>
<div style="display: none">
<audio *ngIf="data.contentObj?.titleObj?.audio_url" #audioElement
[src]="data.contentObj?.titleObj?.audio_url" preload="auto"> </audio>
</div>
@import '../style/common_mixin';
.player-preview-content {
.game-container {
width: 100%;
height: 100%;
background-color: white;
.lesson-header{
width: 100%;
position: absolute;
top: 0;
img{
width: 100%;
height: auto;
}
.title{
font-family: 'BerlinSansFBDemi-Bold';
color: #f5d11f;
font-size: 4vw;
font-weight: 900;
width: 15%;
height: 70%;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
line-height: 4vw;
}
}
.left-box{text-align: right;padding-right: 1rem}
.right-box{text-align: left;padding-left: 1rem}
.left-box, .right-box{
height: 100%;
position: relative;
.a, .b{
width: 30%;
height: 100%;
display: inline-block;
position: relative;
margin: 0 .5rem
}
.a{
width: 40%;
}
}
.letter-box {
//height: 100%;
position: relative;
display: inline-block;
width: 100%;
height: 100%;
//margin-top: 5%;
//margin-left: 8%;
//margin-right: 8%;
img{
max-width: 100%;
max-height: 100%;
//position: absolute;
//left: 0;
height: 100%;
}
.letters{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
.letter{
position: absolute;
font-weight: 600;
//width: calc(100% / 13);
text-align: center;
--cw: calc(100% / 13);
width: var(--cw);
line-height: calc( var(--cw) * 13);
font-family: LiQiangXingShu;
padding: 0 1rem;
height: 20%;
font-size: 7vmin;
}
}
}
.l-box{
cursor: pointer;
width: 100%;
height: 100%;
display: flex;
flex-direction: column-reverse;
font-weight: 900;
img{
max-width: 100%;
max-height: 100%;
width: 100%;
height: auto;
}
}
//background-image: url("/assets/listen-read-circle/bg.jpg");
background: #ffffff;
background-repeat: no-repeat;
background-size: cover;
}
#canvas {
.show-item-content {
position: absolute;
width: 100%;
height: 100%;
//background-color:rgba(255,255,255,1);
}
display: flex;
align-items: center;
justify-content:center;
}
@font-face
{
font-family: 'BRLNSDB';
src: url("../../assets/font/BRLNSDB.TTF") ;
}
@font-face
{
font-family: 'RoundedBold';
src: url("../../assets/font/ArialRoundedBold.otf") ;
}
This diff is collapsed.
const res = [
['bg', "assets/play/bg.jpg"],
['go', "assets/play/go.png"],
['title', "assets/play/title.png"],
['arrow', "assets/play/arrow.png"],
['wheel_bottom', "assets/play/wheel_bottom.png"],
['wheel_top', "assets/play/wheel_top.png"],
['ball_1', "assets/play/ball_1.png"],
['ball_2', "assets/play/ball_2.png"],
['ball_3', "assets/play/ball_3.png"],
['ball_4', "assets/play/ball_4.png"],
['ball_1_light', "assets/play/ball_1_light.png"],
['ball_2_light', "assets/play/ball_2_light.png"],
['ball_3_light', "assets/play/ball_3_light.png"],
['ball_4_light', "assets/play/ball_4_light.png"],
['question_bg', "assets/play/question_bg.png"],
['close_btn', "assets/play/close_btn.png"],
['text_bg_a', "assets/play/text_bg_a.png"],
['text_bg_b', "assets/play/text_bg_b.png"],
['text_bg_c', "assets/play/text_bg_c.png"],
['text_bg_d', "assets/play/text_bg_d.png"],
['text_right', "assets/play/text_right.png"],
['text_wrong', "assets/play/text_wrong.png"],
['pic_bg_a', "assets/play/pic_bg_a.png"],
['pic_bg_b', "assets/play/pic_bg_b.png"],
['pic_bg_c', "assets/play/pic_bg_c.png"],
['pic_bg_d', "assets/play/pic_bg_d.png"],
['pic_right', "assets/play/pic_right.png"],
['pic_wrong', "assets/play/pic_wrong.png"],
['text_a', "assets/play/text_a.png"],
['text_b', "assets/play/text_b.png"],
['text_c', "assets/play/text_c.png"],
['text_d', "assets/play/text_d.png"],
['default_item', "assets/default/item.png"],
];
const resAudio = [
['audio_bg', "assets/play/music/bg.mp3"],
['audio_btn_enter', "assets/play/music/btn_enter.mp3"],
['audio_click_level_1', "assets/play/music/click_level_1.mp3"],
['audio_click_level_2', "assets/play/music/click_level_2.mp3"],
['audio_right', "assets/play/music/right.mp3"],
['audio_wrong', "assets/play/music/wrong.mp3"],
['audio_show_window', "assets/play/music/show_window.mp3"],
['audio_tip', "assets/play/music/tip.mp3"],
['audio_wheel_run', "assets/play/music/wheel_run.mp3"],
];
export {res, resAudio};
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
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