Commit 830a2d28 authored by Chen Jiping's avatar Chen Jiping

完善模板

parent bb72683a
......@@ -24,6 +24,7 @@ import {AudioRecorderComponent} from './common/audio-recorder/audio-recorder.com
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
import { ColorPickerModule } from 'ngx-color-picker';
registerLocaleData(zh);
......@@ -50,7 +51,8 @@ registerLocaleData(zh);
FormsModule,
HttpClientModule,
BrowserAnimationsModule,
FontAwesomeModule
FontAwesomeModule,
ColorPickerModule
],
providers: [
{provide: ErrorHandler, useClass: MyErrorHandler},
......
......@@ -9,6 +9,8 @@ export class Course {
audioUrl: string;
picArr: [];
colorArr : [];
}
export class Picture {
......@@ -16,4 +18,8 @@ export class Picture {
picUrl: string;
color: string;
}
export class Color{
val : string;
}
\ No newline at end of file
<div class="model-content">
<nz-card nzTitle="课程练习内容编辑" style="margin:5vw;" nzType="inner">
<div nz-row>
<nz-form-item>
......@@ -13,10 +12,10 @@
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="type" nzNoColon=true>内容(长度:96)</nz-form-label>
<nz-form-label [nzSpan]="6" nzFor="type" nzNoColon=true>内容</nz-form-label>
<nz-form-control [nzSpan]="8" [nzXs]='24' [nzSm]='12' [nzMd]='12' [nzLg]='8' nzHasFeedback nzErrorTip="MaxLength is 96">
<div *ngIf="item.type == '01'">
<textarea rows="6" nz-input [(ngModel)]="item.text" (blur)="save()" maxlength="96" placeholder="write any thing"></textarea>
<textarea rows="6" nz-input [(ngModel)]="item.text" (blur)="save()" maxlength="96" placeholder="write any thing"></textarea>(长度:96)
</div>
<div *ngIf="item.type == '02'">
<app-audio-recorder [audioUrl]="item.audioUrl"
......@@ -30,10 +29,38 @@
</div>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="add-btn" nzNoColon=true>备选颜色</nz-form-label>
<nz-form-control [nzXs]='24' [nzSm]='12' [nzMd]='12' [nzLg]='6'>
<button nz-button nzType="dashed" class="add-btn" id="add-btn" [disabled]="item.colorArr.length == 8 ? true : false" (click)="addColorItem()">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加
</button>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control nzOffset='6' [nzXs]='24' [nzSm]='16' [nzMd]='16' [nzLg]='10'>
<nz-table #borderedTable nzBordered nzTitle="颜色列表" [nzData]="item.colorArr" [nzShowPagination]=false>
<thead>
<tr>
<th>序号</th>
<th>颜色</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let color of borderedTable.data;let i = index">
<td>{{ i + 1 }}</td>
<td><div [(colorPicker)]="color.val" [style.background]="color.val" style="cursor: pointer; width:50px;height:30px;border:1px solid #CCC;float:left;margin-left: 10px;" (colorPickerClose)="save()"></div></td>
<td><button nz-button nzType="danger" (click)="delColorItem(i)"><i nz-icon nzType="delete" nzTheme="outline"></i></button></td>
</tr>
</tbody>
</nz-table>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="add-btn" nzNoColon=true>图片</nz-form-label>
<nz-form-control [nzXs]='24' [nzSm]='12' [nzMd]='12' [nzLg]='6'>
<button nz-button nzType="dashed" class="add-btn" id="add-btn" (click)="addPicItem()">
<button nz-button nzType="dashed" class="add-btn" id="add-btn" (click)="addPicItem()" [disabled]="item.picArr.length == 8 ? true : false">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加
</button>
</nz-form-control>
......@@ -55,12 +82,17 @@
<nz-form-control [nzSpan]="18">
<nz-select [(ngModel)]="data.color" style="width: 100%;" id="color"
(ngModelChange)="onChange($event, data, 'color')" nzPlaceHolder="color">
<nz-option [nzValue]="option.code" nzCustomContent [nzLabel]="option.name"
*ngFor="let option of colorArr"><img src='{{option.picUrl}}'>{{option.name}}
<nz-option [nzValue]="option.val" nzCustomContent [nzLabel]="option.val"
*ngFor="let option of item.colorArr"><div [ngStyle]="{'background-color':option.val,'height':'30px','border':'1px solid'}"></div>
</nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-control nzOffset='6' [nzSpan]="6">
<div [ngStyle]="{'background-color':data.color,'height':'30px','border':'1px solid'}"></div>
</nz-form-control>
</nz-form-item>
</nz-card>
<ng-template #extraTemplate>
<button style="margin: 10px;" nz-button nzType="danger" (click)="delPicItem(i)">
......@@ -71,6 +103,4 @@
</div>
</nz-card>
</div>
\ No newline at end of file
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 { Course, Picture} from './Course';
import { Course, Picture, Color } from './Course';
import { NzMessageService } from 'ng-zorro-antd/message';
......@@ -20,7 +20,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
courseTypeArr = [];
constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDetectorRef, private message: NzMessageService) {
constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef, private message: NzMessageService) {
}
......@@ -35,7 +35,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.initCourseType();
// 获取存储的数据
(<any> window).courseware.getData((data) => {
(<any>window).courseware.getData((data) => {
if (data) {
this.item = data;
......@@ -61,36 +61,40 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
init() {
if(!this.item.picArr){
if (!this.item.picArr) {
this.item.picArr = [];
}
if (!this.item.colorArr) {
this.item.colorArr = [];
}
}
initColorArr(){
this.colorArr.push({code:'01',name:'红色', color:'#f3440d', picUrl:'assets/play/palette/red.png'});
initColorArr() {
this.colorArr.push({ code: '01', name: '红色', color: '#f3440d', picUrl: 'assets/play/palette/red.png' });
this.colorArr.push({code:'02',name:'紫色', color:'#c80df3', picUrl:'assets/play/palette/purple.png'});
this.colorArr.push({ code: '02', name: '紫色', color: '#c80df3', picUrl: 'assets/play/palette/purple.png' });
this.colorArr.push({code:'03',name:'绿色', color:'#26eb45', picUrl:'assets/play/palette/green.png'});
this.colorArr.push({ code: '03', name: '绿色', color: '#26eb45', picUrl: 'assets/play/palette/green.png' });
this.colorArr.push({code:'04',name:'蓝色', color:'#404dfb', picUrl:'assets/play/palette/blue.png'});
this.colorArr.push({ code: '04', name: '蓝色', color: '#404dfb', picUrl: 'assets/play/palette/blue.png' });
this.colorArr.push({code:'05',name:'橘色', color:'#ff9600', picUrl:'assets/play/palette/orange.png'});
this.colorArr.push({ code: '05', name: '橘色', color: '#ff9600', picUrl: 'assets/play/palette/orange.png' });
this.colorArr.push({code:'06',name:'粉色', color:'#ff6073', picUrl:'assets/play/palette/pink.png'});
this.colorArr.push({ code: '06', name: '粉色', color: '#ff6073', picUrl: 'assets/play/palette/pink.png' });
this.colorArr.push({code:'07',name:'天蓝色', color:'#07d6ff', picUrl:'assets/play/palette/skyBlue.png'});
this.colorArr.push({ code: '07', name: '天蓝色', color: '#07d6ff', picUrl: 'assets/play/palette/skyBlue.png' });
this.colorArr.push({code:'08',name:'紫粉色', color:'#ff07ff', picUrl:'assets/play/palette/purplePink.png'});
this.colorArr.push({ code: '08', name: '紫粉色', color: '#ff07ff', picUrl: 'assets/play/palette/purplePink.png' });
}
initCourseType(){
initCourseType() {
this.courseTypeArr.push({code:'01', name:'文本'});
this.courseTypeArr.push({ code: '01', name: '文本' });
this.courseTypeArr.push({code:'02', name:'音频'});
this.courseTypeArr.push({ code: '02', name: '音频' });
this.courseTypeArr.push({code:'03', name:'图片'});
this.courseTypeArr.push({ code: '03', name: '图片' });
}
......@@ -121,7 +125,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存数据
*/
save() {
(<any> window).courseware.setData(this.item, null, this.saveKey);
(<any>window).courseware.setData(this.item, null, this.saveKey);
this.refresh();
}
......@@ -150,27 +154,42 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}
}
onChange(event, item, key){
addColorItem() {
const color = new Color();
color.val = "#f3440d";
this.item.colorArr = [...this.item.colorArr, color];
this.save();
}
delColorItem(index) {
if (index !== -1) {
this.item.colorArr.splice(index, 1);
this.item.colorArr = [...this.item.colorArr];
this.save();
}
}
onChange(event, item, key) {
item[key] = event;
this.save();
}
validatorMaxLength(value, length){
validatorMaxLength(value, length) {
if (!value) {
return true;
}
const chr = value.replace(' ','');
const chr = value.replace(' ', '');
if (chr.length > length){
let id = this.message.error('超过' + length +'个字母', { nzDuration: 0 }).messageId;
if (chr.length > length) {
let id = this.message.error('超过' + length + '个字母', { nzDuration: 0 }).messageId;
setTimeout(() => {
this.message.remove(id);
}, 3000);
return false;
}
else{
else {
return true;
}
}
......@@ -178,7 +197,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
saveContent(value) {
let result = this.validatorMaxLength(value, 20);
if (result) {
this.save();
}
......
......@@ -66,8 +66,8 @@ export class PageBar extends Item {
this._pageSize = pageSize;
this.width = 100;
this.height = 40;
this.width = 91 * this.scaleX;
this.height = 40 * this.scaleY;
const bg = new ShapeRect();
bg.setSize(this.width, this.height);
bg.alpha = 0;
......@@ -107,7 +107,7 @@ export class PageBar extends Item {
}
private showBtn() {
protected showBtn() {
if(this.showPageBtn && this.totalPage > 1){
this.lastBtn.alpha = 1;
......@@ -169,7 +169,7 @@ export class PageBar extends Item {
}
}
private getData(pageNum : number){
protected getData(pageNum : number){
if(this.totalPage === 0){
return [];
......@@ -203,10 +203,22 @@ export class CyclePageBar extends PageBar{
this.curPage = this.curPage + 1;
if(this.curPage > this.totalPage){
this.curPage = 0;
if(this.totalPage === 0){
this.curPage = 0;
}
else{
this.curPage = 1;
}
}
super.next(callback)
let tempData = this.getData(this.curPage);
this.showBtn();
if (callback) {
callback(tempData);
}
}
last(callback) {
......@@ -217,6 +229,12 @@ export class CyclePageBar extends PageBar{
this.curPage = this.totalPage;
}
super.last(callback);
let tempData = this.getData(this.curPage);
this.showBtn();
if (callback) {
callback(tempData);
}
}
}
\ No newline at end of file
import { Item } from './Item';
import { ShapeRect, MySprite, ShapeCircle } from './Unit';
export class Palette extends Item {
colorCardArr = [];
bg: ShapeRect;
init(colorArr) {
const palettePic = this.getPic('palette');
palettePic.x = palettePic.getBoundingBox().width / 2;
palettePic.y = palettePic.getBoundingBox().height / 2;
const bg = new ShapeRect();
this.bg = bg;
bg.setSize(palettePic.getBoundingBox().width, palettePic.getBoundingBox().height);
bg.alpha = 0;
bg.addChild(palettePic);
//初始化颜色卡片
this.initColorCard(colorArr);
}
private initColorCard(colorArr) {
const colorCardBg = new ShapeRect();
colorCardBg.setSize(684 * this.scaleX, 76 * this.scaleY);
colorCardBg.alpha = 0;
colorCardBg.x = 12 * this.scaleX;
colorCardBg.y = 19 * this.scaleY;
this.bg.addChild(colorCardBg);
const initCard = (color, y: number) => {
const colorCard = new ColorCard(this.images, this.audioObj, this.scaleX, this.scaleY);
colorCard.init(color);
colorCard.bg.y = y * this.scaleY;
colorCardBg.addChild(colorCard.bg);
return colorCard;
};
let y = 6;
let cardWidth = 59 * this.scaleX;
let dis = 23 * this.scaleX;
let disW = cardWidth + dis;
let x = (colorCardBg.width - colorArr.length * cardWidth - (colorArr.length - 1) * dis) / 2;
for (let i = 0; i < colorArr.length; ++i) {
const colorCard = initCard(colorArr[i].val, y);
this.colorCardArr.push(colorCard);
colorCard.bg.x = x + i * disW;
}
}
}
export class ColorCard extends Item {
bg: ShapeRect;
lightPic: MySprite;
touched = false;
_color: string;
_code: string;
set color(color) {
this._color = color;
}
get color() {
return this._color;
}
set code(code) {
this._code = code;
}
get code() {
return this._code;
}
init(color) {
this._code = color;
this._color = color;
this.width = 59;
this.height = 59;
const bg = new ShapeRect();
bg.setSize(this.width, this.height);
bg.alpha = 0;
this.bg = bg;
const getPic = (par: ShapeRect, picName) => {
const pic = new MySprite();
pic.init(this.images.get(picName));
pic.scaleX = this.scaleX;
pic.scaleY = this.scaleY;
pic.x = par.width / 2;
pic.y = par.height / 2;
return pic;
};
const colorCardLight = getPic(bg, 'light');
colorCardLight.alpha = 0;
this.lightPic = colorCardLight;
bg.addChild(colorCardLight);
const colorCircle = new ShapeCircle();
colorCircle.fillColor = "#ffffff";
colorCircle.radius = 29.5 * this.scaleX;
colorCircle.color = color;
colorCircle.x = bg.width / 2;
colorCircle.y = bg.height / 2;
bg.addChild(colorCircle);
const colorCardPic = new ShapeCircle();
colorCardPic.fillColor = color;
colorCardPic.radius = 25.5 * this.scaleX;
colorCardPic.color = color;
colorCardPic.x = bg.width / 2;
colorCardPic.y = bg.height / 2;
bg.addChild(colorCardPic);
}
click(callback = null) {
this.touched = true;
this.lightPic.alpha = 1;
if (callback) {
callback();
}
}
touch(callback = null) {
this.touched = true;
this.lightPic.alpha = 1;
if (callback) {
callback();
}
}
moveout(callback = null) {
this.touched = false;
this.lightPic.alpha = 0;
if (callback) {
callback();
}
}
}
\ No newline at end of file
import { Item } from './Item';
import { ShapeRect, MySprite, shake } from './Unit';
import { ShapeRect, MySprite, shake, ShapeRectNew } from './Unit';
import { playAudio } from './AudioUtil';
import { Star } from './StarUtil'
import { PageBar, CyclePageBar } from './PageBar';
......@@ -9,7 +9,7 @@ export class Stage extends Item {
data;
spacing = 27;
spacing = 35;
cardArr = [];
......@@ -79,14 +79,14 @@ export class Stage extends Item {
}
isEnd(){
isEnd() {
let ended = true;
for(let i = 0; i < this.cardArr.length; ++ i){
for (let i = 0; i < this.cardArr.length; ++i) {
let card = this.cardArr[i];
if(!card.answered){
if (!card.answered) {
ended = false;
break;
}
......@@ -107,14 +107,14 @@ export class Stage extends Item {
}
private initPageBar() {
const pageBar = new PageBar(this.images, this.audioObj, this.scaleX, this.scaleY);
const pageBar = new CyclePageBar(this.images, this.audioObj, this.scaleX, this.scaleY);
pageBar.showPageBtn = true;
pageBar.init(this.cardArr, 4);
pageBar.show();
this.pageBar = pageBar;
this.pageBar.x = (this.bg.width - this.pageBar.bg.width) / 2;
this.pageBar.y = this.bg.height + 5 * this.scaleY;
this.pageBar.y = this.bg.height + 25 * this.scaleY;
this.bg.addChild(pageBar.bg);
}
......@@ -122,7 +122,7 @@ export class Stage extends Item {
let width = 0;
let cardWidth = 276 * this.scaleX;
let cardWidth = 271 * this.scaleX;
if (this.tempCardArr) {
for (let i = 0; i < this.tempCardArr.length; ++i) {
......@@ -169,6 +169,8 @@ export class Card extends Item {
cardBox: MySprite;
colorBg: ShapeRectNew;
set x(x) {
this._x = x;
......@@ -190,8 +192,8 @@ export class Card extends Item {
this.picInfo = picInfo;
this.width = 276;
this.height = 296;
this.width = 271;
this.height = 304;
const bg = new ShapeRect();
bg.setSize(this._width, this._height);
......@@ -200,6 +202,15 @@ export class Card extends Item {
bg.y = this.y;
this.bg = bg;
const colorBg = new ShapeRectNew();
colorBg.setSize(265 * this.scaleX, 294 * this.scaleY, 30 * this.scaleX);
colorBg.fillColor = '#ff07ff';
colorBg.x = (bg.width - colorBg.width) / 2;
colorBg.y = (bg.height - colorBg.height) / 2 - 1 * this.scaleY;
colorBg.alpha = 0;
bg.addChild(colorBg, 0);
this.colorBg = colorBg;
const cardBox = this.getPic('card_box');
cardBox.x = bg.width / 2;
cardBox.y = bg.height / 2;
......@@ -207,7 +218,7 @@ export class Card extends Item {
this.cardBox = cardBox;
const cardLight = this.getPic('card_light');
cardLight.x = bg.width / 2 + 3 * this.scaleX;
cardLight.x = bg.width / 2 + 1 * this.scaleX;
cardLight.y = bg.height / 2 + 3 * this.scaleY;
cardLight.alpha = 0;
bg.addChild(cardLight, 3);
......@@ -250,12 +261,23 @@ export class Card extends Item {
}
}
hideLight(){
hideLight() {
this.cardLight.alpha = 0;
}
fillColor(color){
this.cardBox.color = color;
fillColor(color) {
if(this.answered){
return;
}
this.colorBg.fillColor = color;
this.colorBg.alpha = 1;
}
clearColor(){
if(this.answered){
return;
}
this.colorBg.alpha = 0;
}
checkRight(colorCode, color, callback = null, errCallback = null) {
......@@ -276,6 +298,7 @@ export class Card extends Item {
private showErr(callback = null) {
this.cardLight.alpha = 0;
this.clearColor();
playAudio(this.audioObj['wrong']);
shake(this.bg, 5, callback);
}
......@@ -284,11 +307,11 @@ export class Card extends Item {
this.answered = true;
playAudio(this.audioObj['star']);
this.cardBox.color = color;
this.fillColor(color)
this.cardLight.alpha = 0;
if(callback){
if (callback) {
callback();
}
}
......
......@@ -12,7 +12,7 @@ import { debounceTime } from 'rxjs/operators';
import TWEEN from '@tweenjs/tween.js';
import { Title } from './Title';
import { Palette } from './Palette';
import { Palette } from './Palette2';
import { Stage } from './Stage';
import { Star } from './StarUtil'
import { Petal } from './PetalUtil';
......@@ -620,7 +620,7 @@ export class PlayComponent implements OnInit, OnDestroy {
let palette = new Palette(this.images, this.audioObj, this.mapScale, this.mapScale);
this.palette = palette;
palette.init();
palette.init(this.data.colorArr);
palette.bg.x = (this.canvasWidth - palette.bg.width) / 2;
palette.bg.y = this.canvasHeight - palette.bg.height;
this.renderArr.push(palette.bg);
......@@ -629,7 +629,7 @@ export class PlayComponent implements OnInit, OnDestroy {
stage.width = this.canvasWidth;
stage.init(this.data);
stage.x = (this.canvasWidth - stage.width) / 2;
stage.y = (this.canvasHeight - stage.height) / 2;
stage.y = (this.canvasHeight - stage.height) / 2 - 37 * this.mapScale;
this.stage = stage;
this.renderArr.push(stage.bg);
}
......@@ -697,6 +697,7 @@ export class PlayComponent implements OnInit, OnDestroy {
//隐藏光效
if (this.curCard) {
this.curCard.clearColor();
this.curCard.hideLight();
}
this.curCard = null;
......@@ -773,7 +774,7 @@ export class PlayComponent implements OnInit, OnDestroy {
}
else {
colorCard.moveout(() => {
});
}
}
......@@ -781,6 +782,11 @@ export class PlayComponent implements OnInit, OnDestroy {
if (touchedColorCard) {
return;
}
else{
if (this.curCard) {
this.curCard.clearColor();
}
}
}
mapUp(event) {
......
src/assets/play/card_box.png

12.7 KB | W: | H:

src/assets/play/card_box.png

6.06 KB | W: | H:

src/assets/play/card_box.png
src/assets/play/card_box.png
src/assets/play/card_box.png
src/assets/play/card_box.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/play/card_light.png

59.5 KB | W: | H:

src/assets/play/card_light.png

24.6 KB | W: | H:

src/assets/play/card_light.png
src/assets/play/card_light.png
src/assets/play/card_light.png
src/assets/play/card_light.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -5761,6 +5761,11 @@ ng-zorro-antd@^8.5.2:
date-fns "^1.30.1"
tslib "^1.9.0"
ngx-color-picker@^9.0.0:
version "9.1.0"
resolved "https://registry.yarnpkg.com/ngx-color-picker/-/ngx-color-picker-9.1.0.tgz#402b18a527702f06e7aa9ca61de5f96990e40638"
integrity sha512-ViYBfXb4IL1UbM15LaZHYqHyHPYVEKg+rZB1GWSLqXVuDol3Cgt38D8XfOcivVAO60CziQ77k3ThDo31T6wC6A==
nice-try@^1.0.4:
version "1.0.5"
resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
......
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