Skip to content

M
myProject
Commit 6590c944 authored by 实打实的's avatar 实打实的
Browse files
Options

upload

parents
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1183 additions and 0 deletions
.gitignore 0 → 100644
View file @ 6590c944
node_modules
\ No newline at end of file
package.json 0 → 100644
View file @ 6590c944
{
"name": "@spark/fillgrid",
"version": "1.0.0",
"main": "dist/bundle.js",
"types": "types/index.d.ts",
"license": "MIT",
"scripts": {
"dev": "npm-run-all -p -r dev:**",
"dev:me": "spark package pack -s src -o test/src/bundle.js -w",
"dev:test": "cd test && npm run dev",
"build": "tsc --outDir 'src-js' -t es2017 -d --declarationDir 'types' --jsx preserve && node scripts/copy-others.js 'src-js'",
"pack": "spark package pack -s src -o dist/bundle.js -p",
"declare": "tsc -d --declarationDir 'types' --emitDeclarationOnly",
"pub": "npm run build && read -p 'Input version: ' version && read -p 'Input remark: ' remark && spark package publish -s src -v $version -r $remark"
},
"dependencies": {
"@types/react": "^16.9.56",
"spark-wrapper-fyge": "^1.0.26"
},
"devDependencies": {
"tslib": "^2.0.1",
"npm-run-all": "^4.1.5",
"typescript": "^4.1.3",
"fs-extra": "^9.0.1",
"less": "^4.1.0"
}
}
readme.md 0 → 100644
View file @ 6590c944
# fillgrid
## Install
`yarn add @spark/fillgrid`
## Usage
```js
import {...} from '@spark/fillgrid'
```
## Contribute
1. `yarn dev` to develop package
2. `cd test && yarn && yarn dev` to develop test
## Publish
`npm run pub`
scripts/copy-others.js 0 → 100644
View file @ 6590c944
/**
* Created by rockyl on 2021/1/18.
*/
const fs = require('fs-extra')
const path = require('path')
function filter(file) {
let extname = path.extname(file);
return !(extname === '.tsx' || extname === '.ts');
}
fs.copySync('src', process.argv[2], {filter})
src/BackGround.ts 0 → 100644
View file @ 6590c944
import { Sprite, Texture, TextureCache } from 'spark-wrapper-fyge';
export class BackGround extends Sprite {
// constructor(props){
// super();
// }
bg: Sprite;
initBackGround(initW: number, initH: number){
this.bg = new Sprite(TextureCache['background']);
if(initW && initH)
this.bg.width = initW;
this.bg.height = initH;
this.addChild(this.bg);
}
}
\ No newline at end of file
src/Bird.ts 0 → 100644
View file @ 6590c944
import { Container, Sprite, TextureCache } from 'spark-wrapper-fyge';
import { GM } from './GameManager';
import MC from './MC';
export class Bird extends Sprite {
constructor(props){
super();
this.ct = new Container();
this.sourceAll = [];
}
private sourceAll: any[];
public velocityY: number = GM.Ins.velocityY;
private accelerationY: number = GM.Ins.accelerationY;
public status: number = 0; //小鸟飞行状态 -1 下降 0 平衡 1 上升
public mc: MC;
public ct: Container;
private _collsionW: number;
private _collsionH: number;
get collsionW() {
return this._collsionW;
}
get collsionH() {
return this._collsionH;
}
/**
* 小鸟初始化
*/
initBird(initX,initY){
this.sourceAll.push(TextureCache['bird1'], TextureCache['bird2'], TextureCache['bird3']);
const mc = new MC(this.sourceAll);
this.mc = mc;
mc.x = 0;
mc.y = 0;
mc.anchorX = mc.width / 2;
mc.anchorY = mc.height / 2;
this.ct.x = initX;
this.ct.y = initY;
this.ct.addChild(mc);
this.addChild(this.ct);
mc.play();
mc.loop();
this._collsionW = mc.width;
this._collsionH = mc.height;
}
/**
* 小鸟物理下降自然事件
*/
onDown(){
this.velocityY += this.accelerationY;
this.ct.y += this.velocityY;
this.changeAngle();
}
/**
* 小鸟向上抬头点击事件
*/
onHead(){
this.velocityY = -14;
this.ct.y += this.velocityY;
this.mc.rotation = -30;
}
/**
* 小鸟飞行角度更改
*/
changeAngle() {
if (this.status == -1) {
if ((this.mc.rotation + 3) <= 90) {
this.mc.rotation += 3;
}
} else if (this.status == 1) {
if ((this.mc.rotation - 3 >= -30)) {
this.mc.rotation -= 3;
}
} else {
this.mc.rotation = 0
}
}
/**
* 小鸟下落更改角度
*/
isDown(){
this.status = -1;
if ((this.mc.rotation + 3) <= 90) {
this.mc.rotation += 3;
}
}
}
\ No newline at end of file
src/BirdScene.ts 0 → 100644
View file @ 6590c944
import { WidgetBase, Event, MouseEvent, Container } from "spark-wrapper-fyge";
import { BackGround } from "./BackGround";
import { Bird } from "./Bird";
import { GM } from "./GameManager";
import { Land } from "./Land";
import { Pillar } from "./Pillar";
import { Score } from "./Score";
import Pool from "./Pool";
export class BirdScene extends WidgetBase {
private ct1: Container;
private ct2: Container;
private ct3: Container;
private ct4: Container;
private bg: BackGround;
private pr: Pillar;
private bd: Bird;
private ld: Land;
private sc: Score;
private pillars = [];
private lands = [];
onLaunched() {
GM.Ins.stageW = this.stage.viewRect.width;
GM.Ins.stageH = this.stage.viewRect.height;
this.initContainer();
this.addBackGround();
this.addPillar();
this.addBird();
this.addLand();
this.addScore();
this.stage.addEventListener(
Event.ENTER_FRAME,
this.onEnterFrame,
this
);
this.addEvent();
}
initContainer() {
this.ct1 = new Container();
this.ct2 = new Container();
this.ct3 = new Container();
this.ct4 = new Container();
this.addChildAt(this.ct1, 0);
this.addChildAt(this.ct2, 1);
this.addChildAt(this.ct3, 2);
this.addChildAt(this.ct4, 3);
}
/**
* 初始化背景
*/
addBackGround() {
this.bg = new BackGround();
this.ct1.addChild(this.bg);
this.bg.initBackGround(GM.Ins.stageW, GM.Ins.stageH);
}
/**
* 初始化柱子
*/
addPillar() {
this.pr = Pool.getItemByClass('pillar',Pillar);
GM.Ins.upH = GM.Ins.createRandom(1,400);
GM.Ins.downH = 1134 - GM.Ins.space - GM.Ins.upH;
this.ct2.addChild(this.pr);
this.pr.initPillar(1300, GM.Ins.space);
this.pillars.push(this.pr);
}
/**
* 初始化小鸟
*/
addBird() {
this.bd = new Bird({});
this.ct3.addChild(this.bd);
this.bd.initBird(GM.Ins.stageW / 2 - 150,GM.Ins.stageH / 2 - 150);
}
/**
* 初始化土地
*/
addLand() {
this.ld = new Land();
this.ct4.addChild(this.ld);
this.lands.push(this.ld);
this.ld.initLand(0,GM.Ins.stageH - 200,GM.Ins.stageW,150,GM.Ins.stageW,GM.Ins.stageH - 200,GM.Ins.stageW,150);
}
/**
* 初始化得分
*/
addScore() {
this.sc = new Score();
}
/**
* 帧事件
*/
onEnterFrame() {
if(GM.Ins._pause) return;
if(!GM.Ins._flag){
GM.Ins.isCreate = false;
}else{
GM.Ins.isCreate = true;
}
if(!GM.Ins._down){
if(this.bd.velocityY < 0){
this.bd.status = 1;
}else if(this.bd.velocityY > 0) {
this.bd.status = -1;
}else{
this.bd.status = 0;
}
GM.Ins._flag && this.bd.onDown(); //控制鸟是否能下落
this.pillars.forEach(i => i.moveOn(-2));
this.lands.forEach(i => i.onTick())
/**
* 生成下一个柱子
*/
if (this.pillars[this.pillars.length - 1].Ct.x <= 900) {
this.addPillar();
}
if(this.bd.ct.y + 20 >= GM.Ins.stageH - this.ld.y - 250){
/**
* 当小鸟碰到地面时游戏暂停
*/
GM.Ins._pause = true;
}
this.pillars.map((item,idx) => {
if(this.bd.ct.y <= 0){
if(this.bd.ct.x + this.bd.collsionW >= item.Ct.x){
console.log('撞了-------》》》')
this.stopGame();
}
}
if (this.bd.ct.x <= item.Ct.x + item.pW) {
const isCollideUp = this.checkCollide(this.bd.ct.x + this.bd.collsionW / 2, this.bd.ct.y + this.bd.collsionH / 2,
item.Ct.x + item.pW / 2, item.Ct.y + item.upH / 2, this.bd.collsionW / 2 + item.pW / 2, this.bd.collsionH / 2 + item.upH / 2);
//小鸟管道中心点以及宽高一半
const isCollideDown = this.checkCollide(this.bd.ct.x + this.bd.collsionW / 2, this.bd.ct.y + this.bd.collsionH / 2,
item.Ct.x + item.pW / 2, item.Ct.y + GM.Ins.space + item.upH + item.downH / 2, this.bd.collsionW / 2 + item.pW / 2, this.bd.collsionH / 2 + item.downH / 2);
// if (!this.debugMode)
if (isCollideUp || isCollideDown) {
console.log('撞了-------》》》')
this.stopGame();
}
}
//计算得分
if (!GM.Ins.status) {
if (this.isScore(this.bd.ct.x + this.bd.collsionW, item.Ct.x + item.pW / 2)) {
this.sc.Score += GM.Ins.scoreNum;
item.isUse();
console.log(this.sc.Score);
}
}
if (item.Ct.x <= -150) {
GM.Ins.status = false;
Pool.recover("pillar", item);
item && this.removeChild(item);
this.pillars.splice(idx, 1);
}
})
}else{
GM.Ins._flag && this.bd.onDown(); //如果小鸟状态是下坠则执行下落方法
this.bd.isDown();
}
if(this.bd.ct.y + 20 >= GM.Ins.stageH - this.ld.y - 250){
/**
* 当小鸟碰到地面时游戏暂停
*/
GM.Ins._pause = true;
GM.Ins._flag2 = true;
console.log("落到地面了-----》", GM.Ins._flag2);
}
}
addEvent() {
this.stage.addEventListener(
MouseEvent.MOUSE_DOWN,
this.moveUp,
this
);
}
onEvent(type, payload) {
GM.Ins._pause = payload;
}
checkCollide(x1, y1, x2, y2, x3, y3) {
const pointA = [x1, y1];
const pointB = [x2, y2];
const x0 = Math.abs(pointA[0] - pointB[0]);
const y0 = Math.abs(pointA[1] - pointB[1]);
return x0 < x3 && y0 < y3;
}
moveUp() {
if (GM.Ins._flag2) return;
this.bd.onHead();
if (GM.Ins.canClick) {
GM.Ins._flag = true;
this.bd.velocityY = -14;
if (this.bd.velocityY <= 0) {
return;
}
} else {
return;
}
}
stopGame(){
/**
* 改变down锁以及小鸟上升锁
*/
GM.Ins._down = true;
GM.Ins._flag2 = true;
}
/**
* 是否得分
* @param x1
* @param x2
* @returns boolean
*/
isScore(x1, x2) {
if (x1 >= x2) {
return true;
} else
return false;
}
}
\ No newline at end of file
src/GameManager.ts 0 → 100644
View file @ 6590c944
export class GM {
private static _instance: GM;
public upH: number;
public space: number = 280;
public stageW: number = 0;
public stageH: number = 0;
public pW: number = 150;
public downH: number;
public velocityY: number = 0;//小鸟的速度
public accelerationY: number = 0.8;//小鸟的加速度
public _pause: boolean = false;//游戏暂停开关
public _down: boolean = false;//判断小鸟是否下坠
public _flag: boolean = false;//控制小鸟是否能够下坠
public _flag2: boolean = false;//控制小鸟是否能够触发上升的点击事件
public isCreate: boolean = true;//判断
public status: boolean = false;//鸟是否经过
public canClick: boolean = true;//是否能点击
public scoreNum: number = 1;
public static get Ins() {
if (this._instance) return this._instance;
return this._instance = new GM();
}
createRandom(x,y){
let num: number = Math.floor((Math.random() + x) * y);
return num;
}
}
\ No newline at end of file
src/Land.ts 0 → 100644
View file @ 6590c944
import { Sprite, TextureCache } from 'spark-wrapper-fyge';
export interface IOnTick {
onTick();
}
export class Land extends Sprite implements IOnTick {
// constructor(props){
// super();
// }
private _bg1: Sprite;
private _bg2: Sprite;
initLand(x1,y1,w1,h1,x2,y2,w2,h2) {
var bg1: Sprite = new Sprite(TextureCache['land']);
bg1.x = x1;
bg1.y = y1;
bg1.width = w1;
bg1.height = h1;
var bg2: Sprite = new Sprite(TextureCache['land']);
bg2.x = x2;
bg2.y = y2;
bg2.width = w2;
bg2.height = h2;
this.addChild(bg1);
this.addChild(bg2);
this._bg1 = bg1;
this._bg2 = bg2;
}
onTick() {
const SPEED = 5;
this._bg1.x -= SPEED;
this._bg2.x -= SPEED;
const width = this._bg1.width;
if (this._bg1.x < -width) {
this._bg1.x = this._bg2.x + width;
}
if (this._bg2.x < -width) {
this._bg2.x = this._bg1.x + width;
}
}
}
\ No newline at end of file
src/MC.ts 0 → 100644
View file @ 6590c944
import {Sprite, TextureCache, Event} from 'spark-wrapper-fyge'
export default class MC extends Sprite{
/**
*
* @param sourceAll 所有的资源数组
*/
constructor(sourceAll) {
super();
//需要做锁步
this.count = 0;
this.sourceAll = sourceAll;
this.changeSource(sourceAll[0]);
this.currentFrame = 0;
this.totalFrames = sourceAll.length;
this.addEventListener(Event.ENTER_FRAME, this.onEnterFrame, this);
this.allTime = this.sourceAll.length / 10 * 1000;
}
isPlay: boolean = true;
count: number;
sourceAll: any[];
currentFrame:number;
totalFrames:number;
allTime:number;
startTime: number;
callback;
onEnterFrame() {
if (!this.isPlay) {
return;
}
var dataNow = Date.now();
var deltaTime = dataNow - this.startTime;
var scale = deltaTime / this.allTime;
if (scale >= 1) {
this.isPlay = false;
this.callback && this.callback();
}
else {
this.currentFrame = (scale * this.sourceAll.length) >> 0;
this.changeSource(this.sourceAll[this.currentFrame]);
}
this.loop();
}
/**
* 从0开始播
* 回调是播放完后做回收用的
*/
play(callback?) {
this.startTime = Date.now();
this.isPlay = true;
this.currentFrame = 0;
this.changeSource(this.sourceAll[this.currentFrame]);
this.callback = callback;
}
loop(){
if(this.currentFrame >= this.sourceAll.length - 1){
this.play();
}
}
/**
* 重置开始帧，不播放，好像基本用不到
*/
reset() {
this.isPlay = false;
this.currentFrame = 0;
this.changeSource(this.sourceAll[0]);
}
changeSource(source) {
if (source) {
this.texture = source;
// this.x = -this.texture.textureWidth / 2;
// this.y = -this.texture.textureHeight / 2;
}
else {
//表示为空
this.texture = null;
}
}
}
\ No newline at end of file
src/Pillar.ts 0 → 100644
View file @ 6590c944
import { Container, Sprite, TextureCache } from 'spark-wrapper-fyge';
import {GM} from './GameManager'
export class Pillar extends Sprite {
// constructor(props){
// super();
// }
public Ct: Container = new Container();
private pillarUp: Sprite;
private pillarDown: Sprite;
upH: number = GM.Ins.createRandom(1,400);
downH: number;
pW: number = GM.Ins.pW;
initPillar(initX,space){
this.Ct.x = initX;
this.downH = 1134 - GM.Ins.space - this.upH;
this.pillarUp = new Sprite(TextureCache['pipe']);
this.pillarUp.x = 0;
this.pillarUp.y = 0;
this.pillarUp.width = this.pW;
this.pillarUp.height = this.upH;
this.pillarUp.anchorY = this.upH*0.5;
this.pillarUp.scaleY = -1;
this.pillarDown = new Sprite(TextureCache['pipe']);
this.pillarDown.x = 0;
this.pillarDown.y = space + this.upH;
this.pillarDown.width = this.pW;
this.pillarDown.height = this.downH;
this.Ct.addChild(this.pillarUp);
this.Ct.addChild(this.pillarDown);
this.addChild(this.Ct);
}
/**
* 柱子的前进事件
*/
moveOn(velocityX: number){
if(!GM.Ins.isCreate) return;
this.Ct.x += velocityX*2;
}
/**
* 判断柱子是否有鸟经过
* @returns GM.Ins.status
*/
isUse(){
GM.Ins.status = true;
return GM.Ins.status;
}
}
\ No newline at end of file
src/Pool.ts 0 → 100644
View file @ 6590c944
import {Pillar} from './Pillar'
/**
* 对象池单例
*/
let _instance: Pool;
const getInstance = () => {
if (_instance) return _instance;
return (_instance = new Pool());
}
export default class Pool {
constructor(){
this._hash = {};
}
_hash: { [key: string]: any[] }
/**
* 通过对象类型获取对象
* @param sign
* @param cls
*/
static getItemByClass(sign: string, cls: any) {
const instance = getInstance();
instance._hash = instance._hash || {};
if(instance._hash[sign] == null){
instance._hash[sign] = [];
}
const list:Array<any> = instance._hash[sign];
for(let i = 0;i < 10;i++){
const pillar = new Pillar();
list.push(pillar);
}
if(list && list.length > 0){
return list.pop();
}else{
return new cls();
}
}
/**
* 主动回收对象
* @param sign
* @param item
*/
static recover(sign: string, item: any){
const instance = getInstance();
instance._hash = instance._hash || {};
instance._hash[sign] = instance._hash[sign] || [];
instance._hash[sign].push(item);
}
}
\ No newline at end of file
src/Score.ts 0 → 100644
View file @ 6590c944
export class Score {
private _score: number = 0;
private static _ins:Score = null;
public static get Ins(){
if(!this._ins){
this._ins = new Score();
}
return this._ins;
}
get Score():number{
return this._score;
}
set Score(v:number){
if(v == this._score)return;
this._score = v;
}
}
\ No newline at end of file
src/env.d.ts 0 → 100644
View file @ 6590c944
declare function getMetaConfig(id: string);
declare const PROCESS = 1;
declare const DOM_COMPONENT = 2;
declare const CANVAS_WIDGET = 3;
src/index.ts 0 → 100644
View file @ 6590c944
/**
* Created by rockyl on 2020/9/19.
*/
import {BirdScene} from "./BirdScene";
/**
* Fillgrid模块
* @description Fillgrid模块的工厂方法
* @ctype CANVAS_WIDGET
*/
export function Fillgrid() {
return new BirdScene(getMetaConfig('Fillgrid'));
}
src/meta.json 0 → 100644
View file @ 6590c944
{
"id": "Fillgrid",
"name": "占满格子",
"desc": "实现了占满格子模块",
"config": {
"Fillgrid": {
"props": [
{
"name": "textArray",
"alias": "文本组",
"type": "string",
"default": ["aaa", "bbb", "ccc", "ddd"]
}
],
"assets": [
{
"name": "齿轮",
"url": "//yun.duiba.com.cn/spark/assets/齿轮8.fce30eaadda192b44a1b80038011947830d45ad8.png",
"uuid": "image",
"ext": ".png"
},
{
"name":"背景",
"url":"//yun.duiba.com.cn/spark/assets/d6e7aa347a5b6e5d377e5a776a9dbf8ba98d72fb.png",
"uuid":"background1",
"ext":".png"
},
{
"name":"小鸟1",
"url":"//yun.duiba.com.cn/spark/assets/b05d7084f906f115fe41c70ef24378950512a0f8.png",
"uuid":"bird1",
"ext":".png"
},
{
"name":"小鸟2",
"url":"//yun.duiba.com.cn/spark/assets/a966c560c375b0a1b07976f1f321cb974776eb8c.png",
"uuid":"bird2",
"ext":".png"
},
{
"name":"小鸟3",
"url":"//yun.duiba.com.cn/spark/assets/7b60e20aaf2ba55d129dc454d32482779d27ad4c.png",
"uuid":"bird3",
"ext":".png"
},
{
"name":"静态背景",
"url":"//yun.duiba.com.cn/spark/assets/f08538d9333d68e1463f466bab512136a1c9b3bf.png",
"uuid":"background",
"ext":".png"
},
{
"name":"地板",
"url":"//yun.duiba.com.cn/spark/assets/493810b1cff09a633465ccdd0b2c297806a33602.png",
"uuid":"land",
"ext":".png"
},
{
"name":"管道",
"url":"//yun.duiba.com.cn/spark/assets/b704f311f4abe715cfbf94cae007f465b3a53119.png",
"uuid":"pipe",
"ext":".png"
}
],
"events": {
"in": {
"start": {
"alias": "开始"
},
"stop": {
"alias": "停止"
}
},
"out": {
"show_one": {
"alias": "展示一个文本",
"data": {
"text": "文本"
}
}
}
}
}
}
}
test/.env 0 → 100644
View file @ 6590c944
EXTEND_ESLINT = true
test/config-overrides.js 0 → 100644
View file @ 6590c944
/**
* Created by rockyl on 2020/11/20.
*/
const path = require('path');
module.exports = {
devServer: function(configFunction){
return function(proxy, allowedHost) {
const config = configFunction(proxy, allowedHost);
config.contentBase = [path.resolve('public'), path.resolve('../')];
return config;
};
}
}
test/package.json 0 → 100644
View file @ 6590c944
{
"name": "test",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3",
"@spark/ui": "^2.0.7"
},
"scripts": {
"dev": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-scripts ",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"sass": "^1.29.0",
"react-app-rewired": "^2.1.6"
}
}
test/public/index.html 0 → 100644
View file @ 6590c944
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<title>test: fillgrid</title>
<script src="//yun.duiba.com.cn/js-libs/rem/1.1.0/rem.min.js"></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
test/src/App.js 0 → 100644
View file @ 6590c944
import React, {useState, useRef} from 'react';
import './App.scss';
import {CanvasWidget} from '@spark/ui';
import {Fillgrid} from "./bundle";
/**
* 配置覆盖
*/
const widgetConfig = {
props: {
},
assets: [
{
"name": "红包",
"url": "//yun.duiba.com.cn/aurora/df6e289d635a6a2b4f3df055e00301f63b07d863.png",
"uuid": "image",
"ext": ".png"
},
],
}
function App() {
const [widgetVisible, setWidgetVisible] = useState(false);
const widgetRef = useRef();
function onReady(widget) {
console.log('CanvasWidget ready!')
}
/**
* 事件回调
*/
function onEvent(type, payload) {
}
function onAssetsProcess(loaded, total) {
console.log(`assets load process:${loaded}/${total}`)
}
function onAssetsComplete() {
console.log(`assets load complete`)
}
function onClickButton(type) {
switch (type) {
case 'setup':
setWidgetVisible(true);
break;
case 'unSetup':
setWidgetVisible(false);
break;
case 'pause':
widgetRef.current.emitEvent(type, true)
break;
case 'end':
break;
default:
// widgetRef.current.emitEvent(type)
break;
}
}
return (
<div className="App">
<div className="control-bar">
<button onClick={e => onClickButton('setup')}>setup</button>
<button onClick={e => onClickButton('unSetup')}>unSetup</button>
<button onClick={e => onClickButton('pause')}>pause</button>
</div>
{
widgetVisible ? <CanvasWidget ref={widgetRef} className="canvas-widget" widgetFactory={Fillgrid} widgetConfig={widgetConfig}
onEvent={onEvent}
onReady={onReady} onAssetsProcess={onAssetsProcess}
onAssetsComplete={onAssetsComplete}/> : null
}
</div>
);
}
export default App;
test/src/App.scss 0 → 100644
View file @ 6590c944
.App {
width: 100%;
height: 100%;
background-color: white;
label{
display: flex;
justify-content: space-between;
margin-bottom: 5px;
}
.canvas-widget {
width: 100%;
height: 100%;
}
.control-bar {
position: absolute;
right: 10px;
bottom: 10px;
}
}
test/src/App.test.js 0 → 100644
View file @ 6590c944
import React from 'react';
import { render } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
const { getByText } = render(<App />);
const linkElement = getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
test/src/bundle.js 0 → 100644
View file @ 6590c944
This diff is collapsed.
test/src/index.js 0 → 100644
View file @ 6590c944
import React from 'react';
import ReactDOM from 'react-dom';
import './index.scss';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
test/src/index.scss 0 → 100644
View file @ 6590c944
html, body, #root{
width: 100%;
height: 100%;
}
body {
margin: 0;
font-size: 14px;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
test/src/meta.json 0 → 100644
View file @ 6590c944
{
"Fillgrid": {
"props": {
"textArray": [
"aaa",
"bbb",
"ccc",
"ddd"
]
},
"assets": [
{
"name": "齿轮",
"url": "//yun.duiba.com.cn/spark/assets/齿轮8.fce30eaadda192b44a1b80038011947830d45ad8.png",
"uuid": "image",
"ext": ".png"
},
{
"name": "背景",
"url": "//yun.duiba.com.cn/spark/assets/d6e7aa347a5b6e5d377e5a776a9dbf8ba98d72fb.png",
"uuid": "background1",
"ext": ".png"
},
{
"name": "小鸟1",
"url": "//yun.duiba.com.cn/spark/assets/b05d7084f906f115fe41c70ef24378950512a0f8.png",
"uuid": "bird1",
"ext": ".png"
},
{
"name": "小鸟2",
"url": "//yun.duiba.com.cn/spark/assets/a966c560c375b0a1b07976f1f321cb974776eb8c.png",
"uuid": "bird2",
"ext": ".png"
},
{
"name": "小鸟3",
"url": "//yun.duiba.com.cn/spark/assets/7b60e20aaf2ba55d129dc454d32482779d27ad4c.png",
"uuid": "bird3",
"ext": ".png"
},
{
"name": "静态背景",
"url": "//yun.duiba.com.cn/spark/assets/f08538d9333d68e1463f466bab512136a1c9b3bf.png",
"uuid": "background",
"ext": ".png"
},
{
"name": "地板",
"url": "//yun.duiba.com.cn/spark/assets/493810b1cff09a633465ccdd0b2c297806a33602.png",
"uuid": "land",
"ext": ".png"
},
{
"name": "管道",
"url": "//yun.duiba.com.cn/spark/assets/b704f311f4abe715cfbf94cae007f465b3a53119.png",
"uuid": "pipe",
"ext": ".png"
}
],
"events": {
"in": {
"start": {
"alias": "开始"
},
"stop": {
"alias": "停止"
}
},
"out": {
"show_one": {
"alias": "展示一个文本",
"data": {
"text": "文本"
}
}
}
}
}
}
test/src/setupTests.js 0 → 100644
View file @ 6590c944
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom/extend-expect';
test/yarn.lock 0 → 100644
View file @ 6590c944
This diff is collapsed.
tsconfig.json 0 → 100644
View file @ 6590c944
{
"compilerOptions": {
"module": "ES6",
"target": "ES5",
"jsx": "react",
"allowJs": true,
"moduleResolution": "Node",
"allowSyntheticDefaultImports": true,
"resolveJsonModule": true,
"lib": [
"ES2015",
"DOM"
]
},
"include": ["src"]
}
yarn.lock 0 → 100644
View file @ 6590c944
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