Skip to content

Commit 5ba7b1f

Browse files
desgeekodesgeeko
committed
Import files for 0.1.0
1 parent b72463b commit 5ba7b1f

File tree

10 files changed

+398
-1
lines changed

10 files changed

+398
-1
lines changed

‎.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
*.log
3+

‎LICENSE

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
The MIT License (MIT)
22

3-
Copyright (c) 2015 Martin D.
3+
Copyright (c) 2015 desgeeko
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
# react-goban
2+
*React component displaying a Goban*

‎demo/demo.jsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
2+
var React = require('react');
3+
var ReactDOM = require('react-dom');
4+
var Goban = require('..').Goban;
5+
6+
var DemoApp = React.createClass({
7+
getInitialState: function() {
8+
var sample = {"P16":"black","Q4":"white","D4":"black","E16":"white"};
9+
return {position:sample};
10+
},
11+
render: function() {
12+
return (
13+
<div>
14+
<Goban size="19" theme="classic" stones={this.state.position}/>
15+
</div>
16+
);
17+
}
18+
});
19+
20+
21+
ReactDOM.render(
22+
<DemoApp />, document.getElementById('content')
23+
);

‎demo/index.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>SVGoban</title>
6+
<style>
7+
body {margin:0px;padding:0px;background-color:#DDDDDD; }
8+
#content {height:100vmin; width:100vmin; }
9+
</style>
10+
</head>
11+
<body>
12+
<div id="content"><p>Cannot display SVG!</p></div>
13+
<script src="./demo-bundle.js"></script>
14+
</body>
15+
</html>

‎index.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/**
2+
* react-goban
3+
* index.js
4+
*
5+
*/
6+
7+
exports.Goban = require('./lib/react-goban').Goban;
8+

‎lib/react-goban.js

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
/**
2+
* react-goban
3+
* react-goban.jsx
4+
*
5+
*/
6+
7+
/** @todo Split into multiple files (one per class)? */
8+
/** @todo Add Pure Render Mixin or shouldComponentUpdate tests in order to minimize redraws */
9+
10+
'use strict';
11+
12+
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
13+
14+
var React = require('react');
15+
var ReactDOM = require('react-dom');
16+
var SVGoban = require('svgoban');
17+
18+
/**
19+
* Converts shape list into React SVG elements.
20+
*
21+
* @param {Array} shape list
22+
* @returns {Array} React element list
23+
*/
24+
function toElem(shapes) {
25+
var typeofShape;
26+
var txt = null;
27+
var k = 0;
28+
for (var i = 0; i < shapes.length; i++) {
29+
typeofShape = shapes[i].type;
30+
if (typeofShape == "text") {
31+
txt = shapes[i].txt;
32+
delete shapes[i].txt;
33+
}
34+
if (shapes[i]['class']) {
35+
shapes[i].className = shapes[i]['class'];
36+
delete shapes[i]['class'];
37+
}
38+
delete shapes[i].type;
39+
shapes[i].key = k++;
40+
shapes[i] = React.createElement(typeofShape, shapes[i], txt);
41+
}
42+
return shapes;
43+
}
44+
45+
var LabelsLayer = React.createClass({
46+
displayName: 'LabelsLayer',
47+
48+
render: function render() {
49+
return React.createElement(
50+
'g',
51+
{ className: 'labels_layer' },
52+
toElem(SVGoban.shapeLabels(this.props.size))
53+
);
54+
}
55+
});
56+
57+
var GridLayer = React.createClass({
58+
displayName: 'GridLayer',
59+
60+
render: function render() {
61+
return React.createElement(
62+
'g',
63+
{ className: 'grid_layer' },
64+
toElem(SVGoban.shapeGrid(this.props.size))
65+
);
66+
}
67+
});
68+
69+
var StarPointsLayer = React.createClass({
70+
displayName: 'StarPointsLayer',
71+
72+
render: function render() {
73+
return React.createElement(
74+
'g',
75+
{ className: 'starpoints_layer' },
76+
toElem(SVGoban.shapeStarPoints(this.props.size))
77+
);
78+
}
79+
});
80+
81+
var StonesLayer = React.createClass({
82+
displayName: 'StonesLayer',
83+
84+
render: function render() {
85+
return React.createElement(
86+
'g',
87+
{ className: 'stones_layer' },
88+
toElem(SVGoban.shapeStones(this.props.size, this.props.set))
89+
);
90+
}
91+
});
92+
93+
var Style = React.createClass({
94+
displayName: 'Style',
95+
96+
render: function render() {
97+
return React.createElement(
98+
'style',
99+
null,
100+
SVGoban.Themes[this.props.theme]()
101+
);
102+
}
103+
});
104+
105+
var Definitions = React.createClass({
106+
displayName: 'Definitions',
107+
108+
shouldComponentUpdate: function shouldComponentUpdate(nextProps, nextState) {
109+
return false;
110+
},
111+
render: function render() {
112+
var b = SVGoban.defineRadialColors("black");
113+
var w = SVGoban.defineRadialColors("white");
114+
return React.createElement(
115+
'defs',
116+
null,
117+
React.createElement(
118+
'radialgradient',
119+
_extends({ id: "blackgrad" }, b.gradient),
120+
React.createElement('stop', { offset: '0%', style: { "stop-color": b.a, "stop-opacity": "1" } }),
121+
React.createElement('stop', { offset: '100%', style: { "stop-color": b.z, "stop-opacity": "1" } })
122+
),
123+
React.createElement(
124+
'radialgradient',
125+
_extends({ id: "whitegrad" }, w.gradient),
126+
React.createElement('stop', { offset: '0%', style: { "stop-color": w.a, "stop-opacity": "1" } }),
127+
React.createElement('stop', { offset: '100%', style: { "stop-color": w.z, "stop-opacity": "1" } })
128+
)
129+
);
130+
}
131+
});
132+
133+
/** @todo Add property to handle SVG className (next color to play) */
134+
135+
var Goban = React.createClass({
136+
displayName: 'Goban',
137+
138+
render: function render() {
139+
var viewBox = SVGoban.shapeArea().join(" ");
140+
return React.createElement(
141+
'div',
142+
{ className: 'svgoban' },
143+
React.createElement(
144+
'svg',
145+
{ id: 'goban', className: 'board black', viewBox: viewBox, xmlns: 'http://www.w3.org/2000/svg', version: '1.1', height: '100%' },
146+
React.createElement(Style, { theme: this.props.theme }),
147+
React.createElement(Definitions, null),
148+
React.createElement('rect', { className: 'wood', height: '100%', width: '100%', y: '0', x: '0' }),
149+
React.createElement(GridLayer, { size: this.props.size }),
150+
React.createElement(StarPointsLayer, { size: this.props.size }),
151+
React.createElement(LabelsLayer, { size: this.props.size }),
152+
React.createElement(StonesLayer, { size: this.props.size, set: this.props.stones })
153+
)
154+
);
155+
}
156+
});
157+
158+
exports.Goban = Goban;

‎makefile

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
2+
BROWSERIFY=./node_modules/.bin/browserify
3+
BABEL=./node_modules/.bin/babel
4+
5+
SRC_DIR=./src
6+
LIB_DIR=./lib
7+
DEMO_DIR=./demo
8+
9+
all: lib demo
10+
11+
lib: $(LIB_DIR)/react-goban.js
12+
demo: $(DEMO_DIR)/demo-bundle.js
13+
14+
$(LIB_DIR)/react-goban.js: $(SRC_DIR)/react-goban.jsx
15+
mkdir -p $(LIB_DIR)
16+
$(BABEL) $< -o $@
17+
18+
$(DEMO_DIR)/demo-bundle.js: $(DEMO_DIR)/demo.jsx $(SRC_DIR)/react-goban.jsx
19+
$(BROWSERIFY) -t babelify $< -o $@
20+
21+
clean:
22+
rm $(DEMO_DIR)/demo-bundle.js
23+
rm $(LIB_DIR)/react-goban.js
24+
25+
.PHONY: clean demo
26+

‎package.json

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"name": "react-goban",
3+
"version": "0.1.0",
4+
"description": "React component displaying a Goban",
5+
"main": "index.js",
6+
"scripts": {
7+
"test": "echo \"Error: no test specified\" && exit 1"
8+
},
9+
"repository": {
10+
"type": "git",
11+
"url": "git+https://github.com/desgeeko/react-goban.git"
12+
},
13+
"keywords": [
14+
"go",
15+
"goban",
16+
"react",
17+
"react-component",
18+
"svgoban",
19+
"svg"
20+
],
21+
"author": "Martin D. <desgeeko@gmail.com>",
22+
"license": "MIT",
23+
"bugs": {
24+
"url": "https://github.com/desgeeko/react-goban/issues"
25+
},
26+
"homepage": "https://github.com/desgeeko/react-goban#readme",
27+
"dependencies": {
28+
"react": "^0.14.0",
29+
"react-dom": "^0.14.0",
30+
"svgoban": "^0.1.0"
31+
},
32+
"devDependencies": {
33+
"babel": "^5.8.29",
34+
"babelify": "^6.4.0",
35+
"browserify": "^12.0.0"
36+
}
37+
}

0 commit comments

Comments
 (0)