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

完善模板

parent bb72683a
...@@ -28,6 +28,7 @@ ...@@ -28,6 +28,7 @@
"ali-oss": "^6.5.1", "ali-oss": "^6.5.1",
"compressing": "^1.5.0", "compressing": "^1.5.0",
"ng-zorro-antd": "^8.5.2", "ng-zorro-antd": "^8.5.2",
"ngx-color-picker": "^9.0.0",
"rxjs": "~6.5.4", "rxjs": "~6.5.4",
"spark-md5": "^3.0.0", "spark-md5": "^3.0.0",
"tslib": "^1.10.0", "tslib": "^1.10.0",
......
...@@ -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 { ColorPickerModule } from 'ngx-color-picker';
registerLocaleData(zh); registerLocaleData(zh);
...@@ -50,7 +51,8 @@ registerLocaleData(zh); ...@@ -50,7 +51,8 @@ registerLocaleData(zh);
FormsModule, FormsModule,
HttpClientModule, HttpClientModule,
BrowserAnimationsModule, BrowserAnimationsModule,
FontAwesomeModule FontAwesomeModule,
ColorPickerModule
], ],
providers: [ providers: [
{provide: ErrorHandler, useClass: MyErrorHandler}, {provide: ErrorHandler, useClass: MyErrorHandler},
......
...@@ -9,6 +9,8 @@ export class Course { ...@@ -9,6 +9,8 @@ export class Course {
audioUrl: string; audioUrl: string;
picArr: []; picArr: [];
colorArr : [];
} }
export class Picture { export class Picture {
...@@ -17,3 +19,7 @@ export class Picture { ...@@ -17,3 +19,7 @@ export class Picture {
color: string; color: string;
} }
export class Color{
val : string;
}
\ No newline at end of file
<div class="model-content"> <div class="model-content">
<nz-card nzTitle="课程练习内容编辑" style="margin:5vw;" nzType="inner"> <nz-card nzTitle="课程练习内容编辑" style="margin:5vw;" nzType="inner">
<div nz-row> <div nz-row>
<nz-form-item> <nz-form-item>
...@@ -13,10 +12,10 @@ ...@@ -13,10 +12,10 @@
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
<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"> <nz-form-control [nzSpan]="8" [nzXs]='24' [nzSm]='12' [nzMd]='12' [nzLg]='8' nzHasFeedback nzErrorTip="MaxLength is 96">
<div *ngIf="item.type == '01'"> <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>
<div *ngIf="item.type == '02'"> <div *ngIf="item.type == '02'">
<app-audio-recorder [audioUrl]="item.audioUrl" <app-audio-recorder [audioUrl]="item.audioUrl"
...@@ -30,10 +29,38 @@ ...@@ -30,10 +29,38 @@
</div> </div>
</nz-form-control> </nz-form-control>
</nz-form-item> </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-item>
<nz-form-label [nzSpan]="6" nzFor="add-btn" nzNoColon=true>图片</nz-form-label> <nz-form-label [nzSpan]="6" nzFor="add-btn" nzNoColon=true>图片</nz-form-label>
<nz-form-control [nzXs]='24' [nzSm]='12' [nzMd]='12' [nzLg]='6'> <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>添加 <i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加
</button> </button>
</nz-form-control> </nz-form-control>
...@@ -55,12 +82,17 @@ ...@@ -55,12 +82,17 @@
<nz-form-control [nzSpan]="18"> <nz-form-control [nzSpan]="18">
<nz-select [(ngModel)]="data.color" style="width: 100%;" id="color" <nz-select [(ngModel)]="data.color" style="width: 100%;" id="color"
(ngModelChange)="onChange($event, data, 'color')" nzPlaceHolder="color"> (ngModelChange)="onChange($event, data, 'color')" nzPlaceHolder="color">
<nz-option [nzValue]="option.code" nzCustomContent [nzLabel]="option.name" <nz-option [nzValue]="option.val" nzCustomContent [nzLabel]="option.val"
*ngFor="let option of colorArr"><img src='{{option.picUrl}}'>{{option.name}} *ngFor="let option of item.colorArr"><div [ngStyle]="{'background-color':option.val,'height':'30px','border':'1px solid'}"></div>
</nz-option> </nz-option>
</nz-select> </nz-select>
</nz-form-control> </nz-form-control>
</nz-form-item> </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> </nz-card>
<ng-template #extraTemplate> <ng-template #extraTemplate>
<button style="margin: 10px;" nz-button nzType="danger" (click)="delPicItem(i)"> <button style="margin: 10px;" nz-button nzType="danger" (click)="delPicItem(i)">
...@@ -71,6 +103,4 @@ ...@@ -71,6 +103,4 @@
</div> </div>
</nz-card> </nz-card>
</div> </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'; import { NzMessageService } from 'ng-zorro-antd/message';
...@@ -20,7 +20,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -20,7 +20,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
courseTypeArr = []; 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 { ...@@ -35,7 +35,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.initCourseType(); this.initCourseType();
// 获取存储的数据 // 获取存储的数据
(<any> window).courseware.getData((data) => { (<any>window).courseware.getData((data) => {
if (data) { if (data) {
this.item = data; this.item = data;
...@@ -61,36 +61,40 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -61,36 +61,40 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
init() { init() {
if(!this.item.picArr){ if (!this.item.picArr) {
this.item.picArr = []; this.item.picArr = [];
} }
if (!this.item.colorArr) {
this.item.colorArr = [];
}
} }
initColorArr(){ initColorArr() {
this.colorArr.push({code:'01',name:'红色', color:'#f3440d', picUrl:'assets/play/palette/red.png'}); 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 { ...@@ -121,7 +125,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存数据 * 储存数据
*/ */
save() { save() {
(<any> window).courseware.setData(this.item, null, this.saveKey); (<any>window).courseware.setData(this.item, null, this.saveKey);
this.refresh(); this.refresh();
} }
...@@ -150,27 +154,42 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -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; item[key] = event;
this.save(); this.save();
} }
validatorMaxLength(value, length){ validatorMaxLength(value, length) {
if (!value) { if (!value) {
return true; return true;
} }
const chr = value.replace(' ',''); const chr = value.replace(' ', '');
if (chr.length > length){ if (chr.length > length) {
let id = this.message.error('超过' + length +'个字母', { nzDuration: 0 }).messageId; let id = this.message.error('超过' + length + '个字母', { nzDuration: 0 }).messageId;
setTimeout(() => { setTimeout(() => {
this.message.remove(id); this.message.remove(id);
}, 3000); }, 3000);
return false; return false;
} }
else{ else {
return true; return true;
} }
} }
......
...@@ -66,8 +66,8 @@ export class PageBar extends Item { ...@@ -66,8 +66,8 @@ export class PageBar extends Item {
this._pageSize = pageSize; this._pageSize = pageSize;
this.width = 100; this.width = 91 * this.scaleX;
this.height = 40; this.height = 40 * this.scaleY;
const bg = new ShapeRect(); const bg = new ShapeRect();
bg.setSize(this.width, this.height); bg.setSize(this.width, this.height);
bg.alpha = 0; bg.alpha = 0;
...@@ -107,7 +107,7 @@ export class PageBar extends Item { ...@@ -107,7 +107,7 @@ export class PageBar extends Item {
} }
private showBtn() { protected showBtn() {
if(this.showPageBtn && this.totalPage > 1){ if(this.showPageBtn && this.totalPage > 1){
this.lastBtn.alpha = 1; this.lastBtn.alpha = 1;
...@@ -169,7 +169,7 @@ export class PageBar extends Item { ...@@ -169,7 +169,7 @@ export class PageBar extends Item {
} }
} }
private getData(pageNum : number){ protected getData(pageNum : number){
if(this.totalPage === 0){ if(this.totalPage === 0){
return []; return [];
...@@ -203,10 +203,22 @@ export class CyclePageBar extends PageBar{ ...@@ -203,10 +203,22 @@ export class CyclePageBar extends PageBar{
this.curPage = this.curPage + 1; this.curPage = this.curPage + 1;
if(this.curPage > this.totalPage){ if(this.curPage > this.totalPage){
if(this.totalPage === 0){
this.curPage = 0; this.curPage = 0;
} }
else{
this.curPage = 1;
}
}
let tempData = this.getData(this.curPage);
this.showBtn();
super.next(callback) if (callback) {
callback(tempData);
}
} }
last(callback) { last(callback) {
...@@ -217,6 +229,12 @@ export class CyclePageBar extends PageBar{ ...@@ -217,6 +229,12 @@ export class CyclePageBar extends PageBar{
this.curPage = this.totalPage; 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 { Item } from './Item';
import { ShapeRect, MySprite, shake } from './Unit'; import { ShapeRect, MySprite, shake, ShapeRectNew } from './Unit';
import { playAudio } from './AudioUtil'; import { playAudio } from './AudioUtil';
import { Star } from './StarUtil' import { Star } from './StarUtil'
import { PageBar, CyclePageBar } from './PageBar'; import { PageBar, CyclePageBar } from './PageBar';
...@@ -9,7 +9,7 @@ export class Stage extends Item { ...@@ -9,7 +9,7 @@ export class Stage extends Item {
data; data;
spacing = 27; spacing = 35;
cardArr = []; cardArr = [];
...@@ -79,14 +79,14 @@ export class Stage extends Item { ...@@ -79,14 +79,14 @@ export class Stage extends Item {
} }
isEnd(){ isEnd() {
let ended = true; 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]; let card = this.cardArr[i];
if(!card.answered){ if (!card.answered) {
ended = false; ended = false;
break; break;
} }
...@@ -107,14 +107,14 @@ export class Stage extends Item { ...@@ -107,14 +107,14 @@ export class Stage extends Item {
} }
private initPageBar() { 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.showPageBtn = true;
pageBar.init(this.cardArr, 4); pageBar.init(this.cardArr, 4);
pageBar.show(); pageBar.show();
this.pageBar = pageBar; this.pageBar = pageBar;
this.pageBar.x = (this.bg.width - this.pageBar.bg.width) / 2; 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); this.bg.addChild(pageBar.bg);
} }
...@@ -122,7 +122,7 @@ export class Stage extends Item { ...@@ -122,7 +122,7 @@ export class Stage extends Item {
let width = 0; let width = 0;
let cardWidth = 276 * this.scaleX; let cardWidth = 271 * this.scaleX;
if (this.tempCardArr) { if (this.tempCardArr) {
for (let i = 0; i < this.tempCardArr.length; ++i) { for (let i = 0; i < this.tempCardArr.length; ++i) {
...@@ -169,6 +169,8 @@ export class Card extends Item { ...@@ -169,6 +169,8 @@ export class Card extends Item {
cardBox: MySprite; cardBox: MySprite;
colorBg: ShapeRectNew;
set x(x) { set x(x) {
this._x = x; this._x = x;
...@@ -190,8 +192,8 @@ export class Card extends Item { ...@@ -190,8 +192,8 @@ export class Card extends Item {
this.picInfo = picInfo; this.picInfo = picInfo;
this.width = 276; this.width = 271;
this.height = 296; this.height = 304;
const bg = new ShapeRect(); const bg = new ShapeRect();
bg.setSize(this._width, this._height); bg.setSize(this._width, this._height);
...@@ -200,6 +202,15 @@ export class Card extends Item { ...@@ -200,6 +202,15 @@ export class Card extends Item {
bg.y = this.y; bg.y = this.y;
this.bg = bg; 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'); const cardBox = this.getPic('card_box');
cardBox.x = bg.width / 2; cardBox.x = bg.width / 2;
cardBox.y = bg.height / 2; cardBox.y = bg.height / 2;
...@@ -207,7 +218,7 @@ export class Card extends Item { ...@@ -207,7 +218,7 @@ export class Card extends Item {
this.cardBox = cardBox; this.cardBox = cardBox;
const cardLight = this.getPic('card_light'); 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.y = bg.height / 2 + 3 * this.scaleY;
cardLight.alpha = 0; cardLight.alpha = 0;
bg.addChild(cardLight, 3); bg.addChild(cardLight, 3);
...@@ -250,12 +261,23 @@ export class Card extends Item { ...@@ -250,12 +261,23 @@ export class Card extends Item {
} }
} }
hideLight(){ hideLight() {
this.cardLight.alpha = 0; this.cardLight.alpha = 0;
} }
fillColor(color){ fillColor(color) {
this.cardBox.color = 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) { checkRight(colorCode, color, callback = null, errCallback = null) {
...@@ -276,6 +298,7 @@ export class Card extends Item { ...@@ -276,6 +298,7 @@ export class Card extends Item {
private showErr(callback = null) { private showErr(callback = null) {
this.cardLight.alpha = 0; this.cardLight.alpha = 0;
this.clearColor();
playAudio(this.audioObj['wrong']); playAudio(this.audioObj['wrong']);
shake(this.bg, 5, callback); shake(this.bg, 5, callback);
} }
...@@ -284,11 +307,11 @@ export class Card extends Item { ...@@ -284,11 +307,11 @@ export class Card extends Item {
this.answered = true; this.answered = true;
playAudio(this.audioObj['star']); playAudio(this.audioObj['star']);
this.cardBox.color = color; this.fillColor(color)
this.cardLight.alpha = 0; this.cardLight.alpha = 0;
if(callback){ if (callback) {
callback(); callback();
} }
} }
......
...@@ -12,7 +12,7 @@ import { debounceTime } from 'rxjs/operators'; ...@@ -12,7 +12,7 @@ import { debounceTime } from 'rxjs/operators';
import TWEEN from '@tweenjs/tween.js'; import TWEEN from '@tweenjs/tween.js';
import { Title } from './Title'; import { Title } from './Title';
import { Palette } from './Palette'; import { Palette } from './Palette2';
import { Stage } from './Stage'; import { Stage } from './Stage';
import { Star } from './StarUtil' import { Star } from './StarUtil'
import { Petal } from './PetalUtil'; import { Petal } from './PetalUtil';
...@@ -620,7 +620,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -620,7 +620,7 @@ export class PlayComponent implements OnInit, OnDestroy {
let palette = new Palette(this.images, this.audioObj, this.mapScale, this.mapScale); let palette = new Palette(this.images, this.audioObj, this.mapScale, this.mapScale);
this.palette = palette; this.palette = palette;
palette.init(); palette.init(this.data.colorArr);
palette.bg.x = (this.canvasWidth - palette.bg.width) / 2; palette.bg.x = (this.canvasWidth - palette.bg.width) / 2;
palette.bg.y = this.canvasHeight - palette.bg.height; palette.bg.y = this.canvasHeight - palette.bg.height;
this.renderArr.push(palette.bg); this.renderArr.push(palette.bg);
...@@ -629,7 +629,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -629,7 +629,7 @@ export class PlayComponent implements OnInit, OnDestroy {
stage.width = this.canvasWidth; stage.width = this.canvasWidth;
stage.init(this.data); stage.init(this.data);
stage.x = (this.canvasWidth - stage.width) / 2; 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.stage = stage;
this.renderArr.push(stage.bg); this.renderArr.push(stage.bg);
} }
...@@ -697,6 +697,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -697,6 +697,7 @@ export class PlayComponent implements OnInit, OnDestroy {
//隐藏光效 //隐藏光效
if (this.curCard) { if (this.curCard) {
this.curCard.clearColor();
this.curCard.hideLight(); this.curCard.hideLight();
} }
this.curCard = null; this.curCard = null;
...@@ -781,6 +782,11 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -781,6 +782,11 @@ export class PlayComponent implements OnInit, OnDestroy {
if (touchedColorCard) { if (touchedColorCard) {
return; return;
} }
else{
if (this.curCard) {
this.curCard.clearColor();
}
}
} }
mapUp(event) { 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: ...@@ -5761,6 +5761,11 @@ ng-zorro-antd@^8.5.2:
date-fns "^1.30.1" date-fns "^1.30.1"
tslib "^1.9.0" 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: nice-try@^1.0.4:
version "1.0.5" version "1.0.5"
resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366" 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