11

b91f817a · wildfirecode13 · 6a35d3a2 · b91f817a · b91f817a · b91f817a
Commit b91f817a authored Jan 18, 2021 by wildfirecode13
12 changed files
--- a/.gitignore
+++ b/.gitignore
+node_modules
\ No newline at end of file
--- a/config-overrides.js
+++ b/config-overrides.js
+/**
+ * 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;
+		};
+	}
+}
--- a/package.json
+++ b/package.json
+{
+  "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"
+  }
+}
--- a/public/index.html
+++ b/public/index.html
+<!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: testcanvas</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>
--- a/src/App.js
+++ b/src/App.js
+import React, { useRef } from 'react';
+import './App.scss';
+import { CanvasWidget } from '@spark/ui';
+import { Testcanvas } from "./bundle";
+
+/**
+ * 配置覆盖
+ */
+const widgetConfig = {
+	props: {
+		textArray: [1, 2, 3]
+	},
+	assets: [
+		{
+			"name": "红包",
+			"url": "//yun.duiba.com.cn/aurora/df6e289d635a6a2b4f3df055e00301f63b07d863.png",
+			"uuid": "image",
+			"ext": ".png"
+		},
+	],
+}
+
+function App() {
+	const widgetRef = useRef();
+
+	function onReady(widget) {
+		console.log('CanvasWidget ready!');
+	}
+
+	/**
+	 * 事件回调
+	 */
+	function onEvent(type, payload) {
+		console.log(type, payload);
+	}
+
+	function onAssetsProcess(loaded, total) {
+		console.log(`assets load process:${loaded}/${total}`)
+	}
+
+	function onAssetsComplete() {
+		console.log(`assets load complete`)
+	}
+
+	return (
+		<div className="App">
+			<CanvasWidget ref={widgetRef} className="canvas-widget" widgetFactory={Testcanvas} widgetConfig={widgetConfig}
+				onEvent={onEvent}
+				onReady={onReady} onAssetsProcess={onAssetsProcess}
+				onAssetsComplete={onAssetsComplete} />
+		</div>
+	);
+}
+
+export default App;
--- a/src/App.scss
+++ b/src/App.scss
+.App {
+	width: 100%;
+	height: 100%;
+
+	label{
+		display: flex;
+		justify-content: space-between;
+		margin-bottom: 5px;
+	}
+
+	.canvas-widget {
+		width: 100%;
+		height: 100%;
+	}
+
+	.control-bar {
+		position: absolute;
+		right: 10px;
+		bottom: 10px;
+	}
+}
--- a/src/App.test.js
+++ b/src/App.test.js
+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();
+});
--- a/src/bundle.js
+++ b/src/bundle.js
+import { WidgetBase, TextField } from 'spark-wrapper-fyge';
+import metaConfig from './meta.json';
+
+/**
+ * Created by rockyl on 2020/11/14.
+ * 一个简单示例
+ */
+class GameStage extends WidgetBase {
+    onLaunched() {
+        let label = new TextField();
+        label.text = 'Hello game.';
+        label.fillColor = '#000';
+        label.size = 40;
+        this.addChild(label);
+    }
+    onDestroy() {
+    }
+    start() {
+    }
+    stop() {
+    }
+}
+
+/**
+ * Created by rockyl on 2020/9/19.
+ */
+/**
+ * Testcanvas模块
+ * @description Testcanvas模块的工厂方法
+ * @ctype CANVAS_WIDGET
+ */
+function Testcanvas() {
+    return new GameStage(getMetaConfig('Testcanvas'));
+}
+function getMetaConfig(id){
+	return metaConfig[id]
+}
+//===== END APPEND CODE =====
+
+export { Testcanvas };
--- a/src/index.js
+++ b/src/index.js
+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
--- a/src/index.scss
+++ b/src/index.scss
+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;
+}
--- a/src/meta.json
+++ b/src/meta.json
+{
+	"Testcanvas": {
+		"props": {
+			"textArray": [
+				"aaa",
+				"bbb",
+				"ccc",
+				"ddd"
+			]
+		},
+		"assets": [
+			{
+				"name": "齿轮",
+				"url": "//yun.duiba.com.cn/spark/assets/齿轮8.fce30eaadda192b44a1b80038011947830d45ad8.png",
+				"uuid": "image",
+				"ext": ".png"
+			}
+		],
+		"events": {
+			"in": {
+				"start": {
+					"alias": "开始"
+				},
+				"stop": {
+					"alias": "停止"
+				}
+			},
+			"out": {
+				"show_one": {
+					"alias": "展示一个文本",
+					"data": {
+						"text": "文本"
+					}
+				}
+			}
+		}
+	}
+}
--- a/src/setupTests.js
+++ b/src/setupTests.js
+// 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';