Commit c5d50883 authored by liujiangnan's avatar liujiangnan

feat: 迁移完成

parent 8a51c964
...@@ -30,7 +30,10 @@ ...@@ -30,7 +30,10 @@
], ],
"styles": [ "styles": [
"./node_modules/ng-zorro-antd/ng-zorro-antd.min.css", "./node_modules/ng-zorro-antd/ng-zorro-antd.min.css",
"src/styles.css" "./node_modules/font-awesome/css/font-awesome.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./node_modules/animate.css/animate.min.css",
"src/styles.scss"
], ],
"scripts": [] "scripts": []
}, },
...@@ -128,5 +131,8 @@ ...@@ -128,5 +131,8 @@
} }
} }
}, },
"defaultProject": "ng-template-generator" "defaultProject": "ng-template-generator",
} "cli": {
"analytics": "8ca51870-a656-4ecd-b690-b4d8a6790b2d"
}
}
\ No newline at end of file
...@@ -24,6 +24,7 @@ import {AudioRecorderComponent} from './common/audio-recorder/audio-recorder.com ...@@ -24,6 +24,7 @@ import {AudioRecorderComponent} from './common/audio-recorder/audio-recorder.com
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome'; import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { fas } from '@fortawesome/free-solid-svg-icons'; import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons'; import { far } from '@fortawesome/free-regular-svg-icons';
import { BrLineBreakerPipe } from './pipes/br-line-breaker.pipe';
registerLocaleData(zh); registerLocaleData(zh);
...@@ -36,6 +37,7 @@ registerLocaleData(zh); ...@@ -36,6 +37,7 @@ registerLocaleData(zh);
AudioRecorderComponent, AudioRecorderComponent,
UploadImageWithPreviewComponent, UploadImageWithPreviewComponent,
BackgroundImagePipe, BackgroundImagePipe,
BrLineBreakerPipe,
ResourcePipe, ResourcePipe,
TimePipe, TimePipe,
UploadVideoComponent, UploadVideoComponent,
......
@import '../style/common_mixin.css';
.model-content {
width: 100%;
height: 100%;
}
<div class="picture-group">
<div class="model-content"> <div *ngFor="let group of groups; let gi = index">
<div nz-row>
<div nz-col [nzXs]="24">
<div style="position: absolute; left: 200px; top: 100px; width: 800px;"> <div class="input-group mb-3">
<div class="input-group-prepend">
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()"> <span class="input-group-text" >Group Name</span>
</div>
<app-upload-image-with-preview <input type="text" class="form-control"
[picUrl]="item.pic_url" aria-label="group"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url')" [ngModel]="group.name"
></app-upload-image-with-preview> (blur)="updateGroupText($event, group)"
aria-describedby="group">
<app-audio-recorder <div class="input-group-append">
[audioUrl]="item.audio_url" <button class="btn btn-outline-primary"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')" (click)="addNewOptionItem(gi)">Add</button>
></app-audio-recorder> </div>
<app-custom-hot-zone></app-custom-hot-zone> </div>
<app-upload-video></app-upload-video> </div>
<app-lesson-title-config></app-lesson-title-config> </div>
<div nz-row class="opt-container">
<div nz-col style="width: 19.9%" *ngFor="let item of group.options; let i = index">
<div class="opt-wrap" >
<div class="tool-bar" style="margin-bottom: .6rem;">
<div class="button-group">
<button
nz-button
nzType="primary"
nzSize="small"
nzShape="circle"
style="margin-right: 1rem;"
(click)="onHandleSwitchContent(gi, item)"
>
<i class="anticon anticon-retweet"></i>
</button>
<button nz-button
nzType="primary"
nzSize="small"
nzShape="circle"
(click)="onDeleteCoursewareItem(gi, i)">
<i class="anticon anticon-delete"></i>
</button>
</div>
</div>
<div class="content-editor">
<input *ngIf="item.showText" type="text" nz-input
[ngModel]="item.text"
(blur)="updateOptionItemText($event, item)">
<app-upload-image-with-preview
*ngIf="item.showPic"
[picUrl]="item.pic_id"
(imageUploaded)="onHandleOptionItemImage(gi, $event, i)"
></app-upload-image-with-preview>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
\ No newline at end of file
.picture-group{
padding: 2rem;
::ng-deep .p-image-uploader .p-box .p-upload-icon .anticon-upload {
font-size: 5vw!important;
}
.opt-container {
width: 100%;
display: flex;
flex-wrap: wrap;
.button-group{
display: contents;
}
.opt-wrap {
margin: 0 1rem 1rem 0;
display: flex;
flex-direction: column;
//height: 14rem;
//width: 20rem;
border: 2px dashed #ddd;
border-radius: 0.5rem;
padding: 0.8rem;
.tool-bar {
display: flex;
justify-content: space-between;
align-items: center;
}
.content-editor {
height: 100%;
}
}
}
.disabled {
pointer-events: none;
opacity: 0.6;
}
}
import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef} from '@angular/core'; import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef} from '@angular/core';
import {NzMessageService, NzModalService} from 'ng-zorro-antd';
import * as _ from 'lodash';
@Component({ @Component({
selector: 'app-form', selector: 'app-form',
templateUrl: './form.component.html', templateUrl: './form.component.html',
styleUrls: ['./form.component.css'] styleUrls: ['./form.component.scss']
}) })
export class FormComponent implements OnInit, OnChanges, OnDestroy { export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用 // 储存数据用
saveKey = "test_0011"; saveKey = 'picture-group';
// 储存对象 // 储存对象
item; item;
groups: Array<{
name: string,
options: Array<{
text: string,
pic_id: number,
showText: boolean,
showPic: boolean
}>
}>;
constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDetectorRef) {
constructor(private appRef: ApplicationRef,
private changeDetectorRef: ChangeDetectorRef,
private modalService: NzModalService,
private nzMessageService: NzMessageService,) {
} }
ngOnInit() { ngOnInit() {
this.item = {}; this.item = {
contentObj: {
}
};
// 获取存储的数据 // 获取存储的数据
(<any> window).courseware.getData((data) => { (window as any).courseware.getData((data) => {
if (data) { if (data) {
this.item = data; this.item = data;
} }
...@@ -42,40 +58,109 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -42,40 +58,109 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
ngOnChanges() { ngOnChanges() {
this.init();
} }
ngOnDestroy() { ngOnDestroy() {
} }
init() { init() {
if (!this.item.contentObj.groups) {
this.groups = [
{name: '', options: []},
{name: '', options: []}
];
} else {
this.groups = this.item.contentObj.groups;
}
} }
onHandleSwitchContent(groupIndex, item) {
item.showText = !item.showText;
/** item.showPic = !item.showPic;
* 储存图片数据 this.item.contentObj.groups = this.groups;
* @param e this.save();
*/
onImageUploadSuccess(e, key) {
this.item[key] = e.url;
this.save();
} }
onDeleteCoursewareItem(groupIndex, index) {
/** this.modalService.confirm({
* 储存音频数据 nzTitle: 'Are you sure delete this?',
* @param e nzOkText: 'Yes',
*/ nzOkType: 'danger',
onAudioUploadSuccess(e, key) { nzCancelText: 'No',
nzOnOk: () => {
this.item[key] = e.url; this.groups[groupIndex].options.splice(index, 1);
this.item.contentObj.groups = this.groups;
this.save();
},
});
}
onHandleOptionItemImage(groupIndex, e, index) {
this.groups[groupIndex].options[index].pic_id = e.url;
this.item.contentObj.groups = this.groups;
this.save(); this.save();
} }
addNewOptionItem (groupIndex) {
const content = {
text: '',
pic_id: 0,
showText: true,
showPic: false
};
if (!this.groups) {
this.groups = [];
}
let group = _.get(this.groups, groupIndex, null);
if (!group || group.constructor.name !== 'Object') {
group = {
name: '',
options: []
};
this.groups[groupIndex] = group;
}
let options = _.get(this.groups[groupIndex] , 'options', null);
if (!options || options.constructor.name !== 'Array') {
options = [];
this.groups[groupIndex].options = options;
}
if (this.groups[groupIndex].options.length === 5) {
this.nzMessageService.info('you can only add five items!')
return;
}
this.groups[groupIndex].options.push(content);
this.updateOptionItemText();
}
updateGroupText(evt?: {target: {value: ''}}, group?: {name: ''}) {
let u = true;
if (evt ) {
if (evt.target.value === group.name) {
u = false;
} else {
group.name = evt.target.value;
}
}
this.item.contentObj.groups = this.groups;
if (u) {
this.save();
}
}
updateOptionItemText(evt?: {target: {value: ''}}, item?: {text: ''}) {
let u = true;
if (evt ) {
if (evt.target.value === item.text) {
u = false;
} else {
item.text = evt.target.value;
}
}
this.item.contentObj.groups = this.groups;
if (u) {
this.save();
}
}
/** /**
* 储存数据 * 储存数据
*/ */
......
import {Pipe, PipeTransform} from '@angular/core'; import {Pipe, PipeTransform} from '@angular/core';
// import {ElectronUtil} from '../util/ElectronUtil';
declare const APP_PATH;
// const isInElectron = localStorage.getItem('electron');
@Pipe({ @Pipe({
name: 'backgroundImage' name: 'backgroundImage'
}) })
export class BackgroundImagePipe implements PipeTransform { export class BackgroundImagePipe implements PipeTransform {
transform(value: any, coursewareSid?: string) { transform(value: any) {
// const ret = value ? `url(${value})` : ''; return `url(${value})`;
const ret = value ? `url(${value})` : '';
return ret;
// let ret = value > 0 ? `url(/api/media-resource/${value}/file)` : '';
// if (isInElectron && ElectronUtil.hasCached(coursewareSid, value)) {
// ret = `url(file://${APP_PATH}/courseware_cache/${coursewareSid}/${value})`;
// }
// return ret;
} }
} }
import {Pipe, PipeTransform} from '@angular/core';
@Pipe({
name: 'brLineBreaker'
})
export class BrLineBreakerPipe implements PipeTransform {
transform(value: any, args?: any): any {
return value ? value.replace(/\n/g, '<br />') : '';
}
}
...@@ -2,25 +2,17 @@ import {Pipe, PipeTransform} from '@angular/core'; ...@@ -2,25 +2,17 @@ import {Pipe, PipeTransform} from '@angular/core';
// import {ElectronUtil} from '../util/ElectronUtil'; // import {ElectronUtil} from '../util/ElectronUtil';
declare const APP_PATH; declare const APP_PATH;
// const isInElectron = localStorage.getItem('electron'); const isInElectron = localStorage.getItem('electron');
@Pipe({ @Pipe({
name: 'resource' name: 'resource'
}) })
export class ResourcePipe implements PipeTransform { export class ResourcePipe implements PipeTransform {
transform(pic_url: any, coursewareSid?: string): string { transform(value: any, coursewareSid?: string): string {
// return pic_url; return value ? `/api/media-resource/${value}/file` : '';
if (pic_url && typeof pic_url === 'object') { // if (isInElectron && ElectronUtil.hasCached(coursewareSid, value)) {
return pic_url; // ret = `file://${APP_PATH}/courseware_cache/${coursewareSid}/${value}`;
}
// console.log('resource', pic_url)
return `${pic_url}?t=${Math.random()}`;
// let ret = value ? `/api/resource/${value}/file` : '';
// let ret = res_id ? `/resource/audio/${res_id}` : '';
// if (isInElectron && ElectronUtil.hasCached(coursewareSid, res_id)) {
// ret = `file://${APP_PATH}/courseware_cache/${coursewareSid}/${res_id}`;
// } // }
// return ret; // return ret;
} }
......
.game-container {
width: 100%;
height: 100%;
background: #ffffff;
background-size: cover;
}
#canvas {
}
@font-face
{
font-family: 'BRLNSDB';
src: url("../../assets/font/BRLNSDB.TTF") ;
}
<div class="game-container" #wrap> <div class="player-picture-group">
<canvas id="canvas" #canvas></canvas> <div class="group g1" [style.height]="_HEIGHT">
<div [ngClass]="{'group-box': true}"
(click)="selectGroup(0, $event)">
<div class="group-label">{{data.contentObj.groups[0] ? data.contentObj.groups[0].name : ''}}</div>
<div class="row" style="margin: 0 3vh;">
<div col-sm [style.width]="_WIDTH" class="item-box"
*ngFor="let item of result[0]; let i = index">
<div class="item">
<div *ngIf="item.showText" class="display-item">{{item.text}}</div>
<div *ngIf="item.showPic" class="display-item">
<img [src]="item.pic_id" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="group g2" [style.height]="_HEIGHT">
<div [ngClass]="{'group-box': true}"
(click)="selectGroup(1, $event)">
<div class="group-label">{{data.contentObj.groups[1] ? data.contentObj.groups[1].name : ''}}</div>
<div class="row" style="margin: 0 3vh;">
<div col-sm [style.width]="_WIDTH" class="item-box"
*ngFor="let item of result[1]; let i = index">
<div class="item">
<div *ngIf="item.showText" class="display-item">{{item.text}}</div>
<div *ngIf="item.showPic" class="display-item">
<img [src]="item.pic_id" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="pics container" #itemsContainer>
<div class="row" >
<ng-container>
<div col-sm [style.width]="_WIDTH" class="item-box"
*ngFor="let item of options; let i = index">
<div class="item" (click)="selectItem(item, $event)">
<div *ngIf="item.showText" class="display-item">{{item.text}}</div>
<div *ngIf="item.showPic" class="display-item">
<img [src]="item.pic_id" alt="">
</div>
</div>
</div>
</ng-container>
</div>
</div>
</div> </div>
.player-picture-group {
padding: 2vh 5vh;
width: 100%;
height: 100%;
background-size: 100%;
background-position-y: 18.4%;
background-image: url('../../assets/common_bg.jpg');
.group{
height: 29.5%;
overflow: hidden;
.group-box {
cursor: pointer;
width: 100%;
height: 95%;
border-radius: 4vh;
background: rgba(255,255,255,.5);
display: flex;
flex-direction: column;
//padding-bottom: 1vh;
.item{
justify-content: center;
align-items: center;
display: flex;
.item-bg{
position: absolute;
max-height: 100%;
max-width: 100%;
//height: 100%;
}
.item-pic{
height: 70%;
z-index: 1;
position: absolute;
}
}
.group-label{
font-size: 4.5vh;
text-align: left;
padding-left: 3vh;
font-weight: 900;
font-family: ChalkboardSE-Regular;
line-height: 5.5vh;
}
}
}
.pics{
height: 41%;
//overflow: hidden;
}
.item-box{
padding: .3vh;
display: flex;
justify-content: center;
align-items: center;
user-select: none;
.item{
cursor: pointer;
position: relative;
padding-bottom: 65%;
background-size: 100%;
background-position: 50%;
background-image: url('../../assets/picture-group/item-bg.png');
background-repeat: no-repeat;
width: 90%;
.display-item{
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
font-family: ChalkboardSE-Regular;
font-size: 3vh;
max-width: 100%;
max-height: 100%;
//width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
img{
//width: auto;
//max-width: 100%;
width: unset;
height: auto;
max-height: 70%;
}
}
}
}
.item-box.selected {
//transform: scale(1.2);
//transition-duration: .5s;
animation: zooming 1s infinite
}
.group-box.selected {
}
@keyframes zooming {
0% {transform: scale(1);}
50% {transform: scale(1.2);}
100% {transform: scale(1);}
}
}
import {Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener} from '@angular/core'; import { Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener, OnChanges, AfterViewInit } from '@angular/core';
import * as _ from 'lodash';
import {
Label,
MySprite, tweenChange,
} from './Unit';
import {res, resAudio} from './resources';
import {Subject} from 'rxjs';
import {debounceTime} from 'rxjs/operators';
import TWEEN from '@tweenjs/tween.js';
...@@ -18,662 +7,166 @@ import TWEEN from '@tweenjs/tween.js'; ...@@ -18,662 +7,166 @@ import TWEEN from '@tweenjs/tween.js';
@Component({ @Component({
selector: 'app-play', selector: 'app-play',
templateUrl: './play.component.html', templateUrl: './play.component.html',
styleUrls: ['./play.component.css'] styleUrls: ['./play.component.scss'],
}) })
export class PlayComponent implements OnInit, OnDestroy { export class PlayComponent implements OnInit {
@ViewChild('canvas', {static: true }) canvas: ElementRef;
@ViewChild('wrap', {static: true }) wrap: ElementRef;
// 数据 // 数据
data; data;
saveKey = 'picture-group';
result: object[][];
ctx;
canvasWidth = 1280; // canvas实际宽度
canvasHeight = 720; // canvas实际高度
canvasBaseW = 1280; // canvas 资源预设宽度
canvasBaseH = 720; // canvas 资源预设高度
mx; // 点击x坐标
my; // 点击y坐标
// 资源
rawImages = new Map(res);
rawAudios = new Map(resAudio);
images = new Map();
animationId: any;
winResizeEventStream = new Subject();
audioObj = {};
renderArr;
mapScale = 1;
canvasLeft;
canvasTop;
saveKey = 'test_0011';
btnLeft;
btnRight;
pic1;
pic2;
canTouch = true; @ViewChild('itemsContainer')
itemsContainer: ElementRef;
CURRENT_ITEM = null;
CURRENT_ITEM_EL = null;
CURRENT_ITEM_GROUP = -1;
_WIDTH = '';
_HEIGHT = '';
rightAudio = new Audio();
wrongAudio = new Audio();
options: any[];
curPic; constructor() {
this.rightAudio.src = 'assets/right.mp3';
@HostListener('window:resize', ['$event']) this.rightAudio.load();
onResize(event) { this.wrongAudio.src = 'assets/wrong.mp3';
this.winResizeEventStream.next(); this.wrongAudio.load();
} }
ngOnInit() { ngOnInit() {
this.data = {
this.data = {}; contentObj: {
groups: [
{name: 'aaaa', options: [
{showText: true, text: "11111"},
{showText: true, text: "22222"}
]},
{name: 'bbbb', options: [
{showPic: true, pic_id: "assets/picture-group/2.png"},
{showPic: true, pic_id: "assets/picture-group/3.png"},
{showPic: true, pic_id: "assets/picture-group/4.png"}
]}
]
}
};
// 获取数据 // 获取数据
const getData = (<any> window).courseware.getData; const getData = ( window as any).courseware.getData;
getData((data) => { getData((data) => {
if (data && typeof data === 'object') {
if (data && typeof data == 'object') {
this.data = data; this.data = data;
} }
// console.log('data:' , data);
// 初始化 各事件监听
this.initListener();
// 若无数据 则为预览模式 需要填充一些默认数据用来显示
this.initDefaultData();
// 初始化 音频资源
this.initAudio();
// 初始化 图片资源
this.initImg();
// 开始预加载资源
this.load();
}, this.saveKey);
}
ngOnDestroy() {
window['curCtx'] = null;
window.cancelAnimationFrame(this.animationId);
}
load() {
// 预加载资源
this.loadResources().then(() => {
window["air"].hideAirClassLoading(this.saveKey, this.data);
this.init(); this.init();
this.update(); }, this.saveKey);
});
}
init() {
this.initCtx();
this.initData();
this.initView();
}
initCtx() {
this.canvasWidth = this.wrap.nativeElement.clientWidth;
this.canvasHeight = this.wrap.nativeElement.clientHeight;
this.canvas.nativeElement.width = this.wrap.nativeElement.clientWidth;
this.canvas.nativeElement.height = this.wrap.nativeElement.clientHeight;
this.ctx = this.canvas.nativeElement.getContext('2d');
this.canvas.nativeElement.width = this.canvasWidth;
this.canvas.nativeElement.height = this.canvasHeight;
window['curCtx'] = this.ctx;
} }
init(){
this.result = [[], []];
let item_length = 0;
const groups = _.get(this.data.contentObj, 'groups', []);
if (groups.length === 0) {
updateItem(item) { this.data.contentObj.groups = [];
if (item) {
item.update();
} }
}
updateArr(arr) { const [group0, group1] = this.data.contentObj.groups;
if (!arr) { if (group0.options) {
return; this.options = [...group0.options];
this.options.forEach((i) => (i.gIndex = 0));
} }
for (let i = 0; i < arr.length; i++) { if (group1.options) {
arr[i].update(this); this.options = [...this.options, ...group1.options];
} this.options.forEach((i) => {
} if (i.gIndex === undefined) {
i.gIndex = 1;
}
initListener() {
this.winResizeEventStream
.pipe(debounceTime(500))
.subscribe(data => {
this.renderAfterResize();
}); });
// ---------------------------------------------
const setParentOffset = () => {
const rect = this.canvas.nativeElement.getBoundingClientRect();
this.canvasLeft = rect.left;
this.canvasTop = rect.top;
};
const setMxMyByTouch = (event) => {
if (event.touches.length <= 0) {
return;
}
if (this.canvasLeft == null) {
setParentOffset();
}
this.mx = event.touches[0].pageX - this.canvasLeft;
this.my = event.touches[0].pageY - this.canvasTop;
};
const setMxMyByMouse = (event) => {
this.mx = event.offsetX;
this.my = event.offsetY;
};
// ---------------------------------------------
let firstTouch = true;
const touchDownFunc = (e) => {
if (firstTouch) {
firstTouch = false;
removeMouseListener();
}
setMxMyByTouch(e);
this.mapDown(e);
};
const touchMoveFunc = (e) => {
setMxMyByTouch(e);
this.mapMove(e);
};
const touchUpFunc = (e) => {
setMxMyByTouch(e);
this.mapUp(e);
};
const mouseDownFunc = (e) => {
if (firstTouch) {
firstTouch = false;
removeTouchListener();
}
setMxMyByMouse(e);
this.mapDown(e);
};
const mouseMoveFunc = (e) => {
setMxMyByMouse(e);
this.mapMove(e);
};
const mouseUpFunc = (e) => {
setMxMyByMouse(e);
this.mapUp(e);
};
const element = this.canvas.nativeElement;
const addTouchListener = () => {
element.addEventListener('touchstart', touchDownFunc);
element.addEventListener('touchmove', touchMoveFunc);
element.addEventListener('touchend', touchUpFunc);
element.addEventListener('touchcancel', touchUpFunc);
};
const removeTouchListener = () => {
element.removeEventListener('touchstart', touchDownFunc);
element.removeEventListener('touchmove', touchMoveFunc);
element.removeEventListener('touchend', touchUpFunc);
element.removeEventListener('touchcancel', touchUpFunc);
};
const addMouseListener = () => {
element.addEventListener('mousedown', mouseDownFunc);
element.addEventListener('mousemove', mouseMoveFunc);
element.addEventListener('mouseup', mouseUpFunc);
};
const removeMouseListener = () => {
element.removeEventListener('mousedown', mouseDownFunc);
element.removeEventListener('mousemove', mouseMoveFunc);
element.removeEventListener('mouseup', mouseUpFunc);
};
addMouseListener();
addTouchListener();
}
playAudio(key, now = false, callback = null) {
const audio = this.audioObj[key];
if (audio) {
if (now) {
audio.pause();
audio.currentTime = 0;
}
if (callback) {
audio.onended = () => {
callback();
};
}
audio.play();
}
}
loadResources() {
const pr = [];
this.rawImages.forEach((value, key) => {// 预加载图片
const p = this.preload(value)
.then(img => {
this.images.set(key, img);
})
.catch(err => console.log(err));
pr.push(p);
});
this.rawAudios.forEach((value, key) => {// 预加载音频
const a = this.preloadAudio(value)
.then(() => {
// this.images.set(key, img);
})
.catch(err => console.log(err));
pr.push(a);
});
return Promise.all(pr);
}
preload(url) {
return new Promise((resolve, reject) => {
const img = new Image();
// img.crossOrigin = "anonymous";
img.onload = () => resolve(img);
img.onerror = reject;
img.src = url;
});
}
preloadAudio(url) {
return new Promise((resolve, reject) => {
const audio = new Audio();
audio.oncanplay = (a) => {
resolve();
};
audio.onerror = () => {
reject();
};
audio.src = url;
audio.load();
});
}
renderAfterResize() {
this.canvasWidth = this.wrap.nativeElement.clientWidth;
this.canvasHeight = this.wrap.nativeElement.clientHeight;
this.init();
}
checkClickTarget(target) {
const rect = target.getBoundingBox();
if (this.checkPointInRect(this.mx, this.my, rect)) {
return true;
}
return false;
}
getWorlRect(target) {
let rect = target.getBoundingBox();
if (target.parent) {
const pRect = this.getWorlRect(target.parent);
rect.x += pRect.x;
rect.y += pRect.y;
}
return rect;
}
checkPointInRect(x, y, rect) {
if (x >= rect.x && x <= rect.x + rect.width) {
if (y >= rect.y && y <= rect.y + rect.height) {
return true;
}
}
return false;
}
addUrlToAudioObj(key, url = null, vlomue = 1, loop = false, callback = null) {
const audioObj = this.audioObj;
if (url == null) {
url = key;
}
this.rawAudios.set(key, url);
const audio = new Audio();
audio.src = url;
audio.load();
audio.loop = loop;
audio.volume = vlomue;
audioObj[key] = audio;
if (callback) {
audio.onended = () => {
callback();
};
}
}
addUrlToImages(url) {
this.rawImages.set(url, url);
}
// ======================================================编写区域==========================================================================
/**
* 添加默认数据 便于无数据时的展示
*/
initDefaultData() {
if (!this.data.pic_url) {
this.data.pic_url = 'assets/play/default/pic.jpg';
this.data.pic_url_2 = 'assets/play/default/pic.jpg';
} }
} this.options.sort(() => {
return 0.5 - Math.random();
/**
* 添加预加载图片
*/
initImg() {
this.addUrlToImages(this.data.pic_url);
this.addUrlToImages(this.data.pic_url_2);
}
/**
* 添加预加载音频
*/
initAudio() {
// 音频资源
this.addUrlToAudioObj(this.data.audio_url);
this.addUrlToAudioObj(this.data.audio_url_2);
// 音效
this.addUrlToAudioObj('click', this.rawAudios.get('click'), 0.3);
}
/**
* 初始化数据
*/
initData() {
const sx = this.canvasWidth / this.canvasBaseW;
const sy = this.canvasHeight / this.canvasBaseH;
const s = Math.min(sx, sy);
this.mapScale = s;
// this.mapScale = sx;
// this.mapScale = sy;
this.renderArr = [];
}
/**
* 初始化试图
*/
initView() {
this.initPic();
this.initBottomPart();
}
initBottomPart() {
const btnLeft = new MySprite();
btnLeft.init(this.images.get('btn_left'));
btnLeft.x = this.canvasWidth - 150 * this.mapScale;
btnLeft.y = this.canvasHeight - 100 * this.mapScale;
btnLeft.setScaleXY(this.mapScale);
this.renderArr.push(btnLeft);
this.btnLeft = btnLeft;
const btnRight = new MySprite();
btnRight.init(this.images.get('btn_right'));
btnRight.x = this.canvasWidth - 50 * this.mapScale;
btnRight.y = this.canvasHeight - 100 * this.mapScale;
btnRight.setScaleXY(this.mapScale);
this.renderArr.push(btnRight);
this.btnRight = btnRight;
}
initPic() {
const maxW = this.canvasWidth * 0.7;
const pic1 = new MySprite();
pic1.init(this.images.get(this.data.pic_url));
pic1.x = this.canvasWidth / 2;
pic1.y = this.canvasHeight / 2;
pic1.setScaleXY(maxW / pic1.width);
this.renderArr.push(pic1);
this.pic1 = pic1;
const label1 = new Label();
label1.text = this.data.text;
label1.textAlign = 'center';
label1.fontSize = 50;
label1.fontName = 'BRLNSDB';
label1.fontColor = '#ffffff';
pic1.addChild(label1);
const pic2 = new MySprite();
pic2.init(this.images.get(this.data.pic_url_2));
pic2.x = this.canvasWidth / 2 + this.canvasWidth;
pic2.y = this.canvasHeight / 2;
pic2.setScaleXY(maxW / pic2.width);
this.renderArr.push(pic2);
this.pic2 = pic2;
this.curPic = pic1;
}
btnLeftClicked() {
this.lastPage();
}
btnRightClicked() {
this.nextPage();
}
lastPage() {
if (this.curPic == this.pic1) {
return;
}
this.canTouch = false;
const moveLen = this.canvasWidth;
tweenChange(this.pic1, {x: this.pic1.x + moveLen}, 1);
tweenChange(this.pic2, {x: this.pic2.x + moveLen}, 1, () => {
this.canTouch = true;
this.curPic = this.pic1;
}); });
}
nextPage() { for (const group of groups) {
item_length += group.options.length;
if (this.curPic == this.pic2) { }
return; this._HEIGHT = item_length > 4 ? '29.5%' : '35.5%';
this._WIDTH = item_length > 4 ? '20%' : '25%';
}
selectItem(item, evt) {
const el = evt.currentTarget.parentNode;
this.CURRENT_ITEM = item;
this.CURRENT_ITEM_EL = el;
this.CURRENT_ITEM_GROUP = item.gIndex;
if (el.classList.contains('selected')) {
// if (this.result[this.CURRENT_GROUP_INDEX].length === 5
// /* this.data.contentObj.groups[this.CURRENT_GROUP_INDEX].options.length */
// ) {
// return;
// }
// el.classList.remove('selected');
// el.style.visibility = 'hidden';
} else {
const els = this.itemsContainer.nativeElement.querySelectorAll('.item-box');
els.forEach((n) => {
n.classList.remove('selected');
n.classList.remove('tada');
n.classList.remove('infinite');
n.classList.remove('animated');
});
el.classList.add('selected');
} }
this.canTouch = false;
const moveLen = this.canvasWidth;
tweenChange(this.pic1, {x: this.pic1.x - moveLen}, 1);
tweenChange(this.pic2, {x: this.pic2.x - moveLen}, 1, () => {
this.canTouch = true;
this.curPic = this.pic2;
});
}
pic1Clicked() {
this.playAudio(this.data.audio_url);
} }
pic2Clicked() { selectGroup(gIdx, evt) {
this.playAudio(this.data.audio_url_2); if (!this.CURRENT_ITEM ||
} !this.CURRENT_ITEM_EL ||
this.CURRENT_ITEM_GROUP < 0) {
mapDown(event) {
if (!this.canTouch) {
return;
}
if ( this.checkClickTarget(this.btnLeft) ) {
this.btnLeftClicked();
return; return;
} }
if (this.result[gIdx].length >= 5
if ( this.checkClickTarget(this.btnRight) ) { ) {
this.btnRightClicked();
return;
}
if ( this.checkClickTarget(this.pic1) ) {
this.pic1Clicked();
return; return;
} }
if (this.CURRENT_ITEM_GROUP === gIdx) {
this.rightAudio.pause();
this.rightAudio.currentTime = 0;
const rightPromise = this.rightAudio.play();
if (rightPromise !== undefined) {
rightPromise.then(function () {
}).catch(function (error) {
this.rightAudio.play();
});
}
if ( this.checkClickTarget(this.pic2) ) { this.CURRENT_ITEM_EL.classList.remove('selected');
this.pic2Clicked(); this.CURRENT_ITEM_EL.classList.remove('tada');
return; this.CURRENT_ITEM_EL.classList.remove('infinite');
this.CURRENT_ITEM_EL.classList.remove('animated');
this.CURRENT_ITEM_EL.style.visibility = 'hidden';
this.result[gIdx].push(this.CURRENT_ITEM);
this.CURRENT_ITEM = null;
this.CURRENT_ITEM_EL = null;
this.CURRENT_ITEM_GROUP = -1;
} else {
this.wrongAudio.pause();
this.wrongAudio.currentTime = 0;
const rightPromise = this.wrongAudio.play();
if (rightPromise !== undefined) {
rightPromise.then(function () {
}).catch(function (error) {
this.wrongAudio.play();
});
}
this.CURRENT_ITEM_EL.classList.remove('selected');
this.CURRENT_ITEM_EL.classList.add('tada');
this.CURRENT_ITEM_EL.classList.add('infinite');
this.CURRENT_ITEM_EL.classList.add('animated');
} }
} }
mapMove(event) {
}
mapUp(event) {
}
update() {
// ----------------------------------------------------------
this.animationId = window.requestAnimationFrame(this.update.bind(this));
// 清除画布内容
this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
// tween 更新动画
TWEEN.update();
// ----------------------------------------------------------
this.updateArr(this.renderArr);
}
} }
@mixin hide-overflow-text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
@mixin k-no-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@mixin k-img-bg {
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
@mixin hide-overflow-text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
@mixin k-no-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@mixin k-img-bg {
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
...@@ -3,6 +3,8 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; ...@@ -3,6 +3,8 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module'; import { AppModule } from './app/app.module';
import { environment } from './environments/environment'; import { environment } from './environments/environment';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
if (environment.production) { if (environment.production) {
enableProdMode(); enableProdMode();
......
/* You can add global styles to this file, and also import other style files */
/* You can add global styles to this file, and also import other style files */
@mixin hide-overflow-text {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
@mixin k-no-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@mixin k-img-bg {
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
This source diff could not be displayed because it is too large. You can view the blob instead.
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