stemcstudio/Board.tsx

## README.md

      
    Raw
  

              README.md
            
          
    React

Copyright (c) 2015-2020 David Geo Holmes.

  
## Board.tsx
import * as React from 'react'
import { Component } from 'react'
import { Square } from './Square'

interface BoardProps {
}

interface BoardSpec {
}

export class Board extends Component<BoardProps, BoardSpec> {
    constructor(props: BoardProps) {
        super(props)
    }
    renderSquare(_i: number): JSX.Element {
        return <Square />
    }

    render(): JSX.Element {
        const status = 'Next player: X'

        return (
            <div>
                <div className="status">{status}</div>
                <div className="board-row">
                    {this.renderSquare(0)}
                    {this.renderSquare(1)}
                    {this.renderSquare(2)}
                </div>
                <div className="board-row">
                    {this.renderSquare(3)}
                    {this.renderSquare(4)}
                    {this.renderSquare(5)}
                </div>
                <div className="board-row">
                    {this.renderSquare(6)}
                    {this.renderSquare(7)}
                    {this.renderSquare(8)}
                </div>
            </div>
        )
    }
}

## generated.index.html
<!DOCTYPE html>
<html>

<head>
    <base href="/">
    <style>
        body {
            font: 14px "Century Gothic", Futura, sans-serif;
            margin: 20px;
        }

        ol,
        ul {
            padding-left: 30px;
        }

        .board-row:after {
            clear: both;
            content: "";
            display: table;
        }

        .status {
            margin-bottom: 10px;
        }

        .square {
            background: #fff;
            border: 1px solid #999;
            float: left;
            font-size: 24px;
            font-weight: bold;
            line-height: 34px;
            height: 34px;
            margin-right: -1px;
            margin-top: -1px;
            padding: 0;
            text-align: center;
            width: 34px;
        }

        .square:focus {
            outline: none;
        }

        .kbd-navigation .square:focus {
            background: #ddd;
        }

        .game {
            display: flex;
            flex-direction: row;
        }

        .game-info {
            margin-left: 20px;
        }
    </style>
    <script src="https://unpkg.com/systemjs@0.19.34/dist/system.js"></script>
</head>

<body>
    <script>
        System.config({
          "warnings": false,
          "map": {
            "prop-types": "https://unpkg.com/prop-types@15.8.1/umd/prop-types.js",
            "react": "https://unpkg.com/react@17.0.2/umd/react.development.js",
            "react-dom": "https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"
          }
        });
    </script>
    <div id="container"></div>


    <script>
        System.register("./index.js", ["react", "react-dom", "./Board.js"], function (exports_1, context_1) {
            "use strict";
            var __extends = (this && this.__extends) || (function () {
                var extendStatics = function (d, b) {
                    extendStatics = Object.setPrototypeOf ||
                        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
                        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
                    return extendStatics(d, b);
                };
                return function (d, b) {
                    if (typeof b !== "function" && b !== null)
                        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
                    extendStatics(d, b);
                    function __() { this.constructor = d; }
                    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
                };
            })();
            var React, react_1, react_dom_1, Board_1, Game;
            var __moduleName = context_1 && context_1.id;
            return {
                setters: [
                    function (React_1) {
                        React = React_1;
                        react_1 = React_1;
                    },
                    function (react_dom_1_1) {
                        react_dom_1 = react_dom_1_1;
                    },
                    function (Board_1_1) {
                        Board_1 = Board_1_1;
                    }
                ],
                execute: function () {
                    Game = (function (_super) {
                        __extends(Game, _super);
                        function Game(props) {
                            return _super.call(this, props) || this;
                        }
                        Game.prototype.render = function () {
                            return (React.createElement("div", { className: "game" },
                                React.createElement("div", { className: "game-board" },
                                    React.createElement(Board_1.Board, null)),
                                React.createElement("div", { className: "game-info" },
                                    React.createElement("div", null),
                                    React.createElement("ol", null))));
                        };
                        return Game;
                    }(react_1.Component));
                    react_dom_1.render(React.createElement(Game, null), document.getElementById('container'));
                }
            };
        });

        System.register("./Board.js", ["react", "./Square.js"], function (exports_1, context_1) {
            "use strict";
            var __extends = (this && this.__extends) || (function () {
                var extendStatics = function (d, b) {
                    extendStatics = Object.setPrototypeOf ||
                        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
                        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
                    return extendStatics(d, b);
                };
                return function (d, b) {
                    if (typeof b !== "function" && b !== null)
                        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
                    extendStatics(d, b);
                    function __() { this.constructor = d; }
                    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
                };
            })();
            var React, react_1, Square_1, Board;
            var __moduleName = context_1 && context_1.id;
            return {
                setters: [
                    function (React_1) {
                        React = React_1;
                        react_1 = React_1;
                    },
                    function (Square_1_1) {
                        Square_1 = Square_1_1;
                    }
                ],
                execute: function () {
                    Board = (function (_super) {
                        __extends(Board, _super);
                        function Board(props) {
                            return _super.call(this, props) || this;
                        }
                        Board.prototype.renderSquare = function (_i) {
                            return React.createElement(Square_1.Square, null);
                        };
                        Board.prototype.render = function () {
                            var status = 'Next player: X';
                            return (React.createElement("div", null,
                                React.createElement("div", { className: "status" }, status),
                                React.createElement("div", { className: "board-row" },
                                    this.renderSquare(0),
                                    this.renderSquare(1),
                                    this.renderSquare(2)),
                                React.createElement("div", { className: "board-row" },
                                    this.renderSquare(3),
                                    this.renderSquare(4),
                                    this.renderSquare(5)),
                                React.createElement("div", { className: "board-row" },
                                    this.renderSquare(6),
                                    this.renderSquare(7),
                                    this.renderSquare(8))));
                        };
                        return Board;
                    }(react_1.Component));
                    exports_1("Board", Board);
                }
            };
        });

        System.register("./Square.js", ["react"], function (exports_1, context_1) {
            "use strict";
            var __extends = (this && this.__extends) || (function () {
                var extendStatics = function (d, b) {
                    extendStatics = Object.setPrototypeOf ||
                        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
                        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
                    return extendStatics(d, b);
                };
                return function (d, b) {
                    if (typeof b !== "function" && b !== null)
                        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
                    extendStatics(d, b);
                    function __() { this.constructor = d; }
                    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
                };
            })();
            var React, react_1, Square;
            var __moduleName = context_1 && context_1.id;
            return {
                setters: [
                    function (React_1) {
                        React = React_1;
                        react_1 = React_1;
                    }
                ],
                execute: function () {
                    Square = (function (_super) {
                        __extends(Square, _super);
                        function Square(props) {
                            return _super.call(this, props) || this;
                        }
                        Square.prototype.render = function () {
                            return (React.createElement("button", { className: "square" }));
                        };
                        return Square;
                    }(react_1.Component));
                    exports_1("Square", Square);
                }
            };
        });
    </script>
    <script>
        System.defaultJSExtensions = true
        System.import('./index.js').catch(function(e) { console.error(e) })
    </script>
</body>

</html>

## index.html
<!DOCTYPE html>
<html>

<head>
    <base href='/'>
    <link rel='stylesheet' href='style.css'>
</head>

<body>
    <div id='container'></div>
</body>

</html>

## index.tsx
import * as React from 'react'
import { Component } from 'react'
import { render } from 'react-dom'
import { Board } from './Board'

interface GameProps {
}

interface GameSpec {
}

class Game extends Component<GameProps, GameSpec> {
    constructor(props: GameProps) {
        super(props)
    }
    render(): JSX.Element {
        return (
            <div className="game">
                <div className="game-board">
                    <Board />
                </div>
                <div className="game-info">
                    <div>{/* status */}</div>
                    <ol>{/* TODO */}</ol>
                </div>
            </div>
        )
    }
}

render<Game>(
    <Game />,
    document.getElementById('container')
)

## package.json
{
    "description": "React Official Tutorial Starter Code",
    "dependencies": {
        "csstype": "^3.0.10",
        "prop-types": "^15.8.1",
        "react": "^17.0.2",
        "react-dom": "^17.0.2"
    },
    "linting": true,
    "name": "react-official-tutorial",
    "version": "1.0.0",
    "author": "David Geo Holmes",
    "hideReferenceFiles": true,
    "noLoopCheck": true,
    "keywords": [
        "React",
        "Official",
        "Tutorial",
        "STEMCstudio",
        "Starter",
        "Code"
    ]
}

## Square.tsx
import * as React from 'react'
import { Component } from 'react'

interface SquareProps {
}

interface SquareSpec {
}

export class Square extends Component<SquareProps, SquareSpec> {
    constructor(props: SquareProps) {
        super(props)
    }
    render(): JSX.Element {
        return (
            <button className="square">
                {/* TODO */}
            </button>
        )
    }
}

## style.css
body {
    font: 14px "Century Gothic", Futura, sans-serif;
    margin: 20px;
}

ol,
ul {
    padding-left: 30px;
}

.board-row:after {
    clear: both;
    content: "";
    display: table;
}

.status {
    margin-bottom: 10px;
}

.square {
    background: #fff;
    border: 1px solid #999;
    float: left;
    font-size: 24px;
    font-weight: bold;
    line-height: 34px;
    height: 34px;
    margin-right: -1px;
    margin-top: -1px;
    padding: 0;
    text-align: center;
    width: 34px;
}

.square:focus {
    outline: none;
}

.kbd-navigation .square:focus {
    background: #ddd;
}

.game {
    display: flex;
    flex-direction: row;
}

.game-info {
    margin-left: 20px;
}

## tsconfig.json
{
    "allowJs": false,
    "declaration": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "jsx": "react",
    "module": "system",
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "preserveConstEnums": true,
    "removeComments": true,
    "sourceMap": false,
    "strict": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "target": "es5",
    "traceResolution": true
}

## tslint.json
{
    "rules": {
        "array-type": [
            true,
            "array"
        ],
        "curly": false,
        "comment-format": [
            true,
            "check-space"
        ],
        "eofline": true,
        "forin": true,
        "jsdoc-format": true,
        "new-parens": true,
        "no-conditional-assignment": false,
        "no-consecutive-blank-lines": true,
        "no-construct": true,
        "no-for-in-array": true,
        "no-inferrable-types": [
            true
        ],
        "no-magic-numbers": false,
        "no-shadowed-variable": true,
        "no-string-throw": true,
        "no-trailing-whitespace": [
            true,
            "ignore-jsdoc"
        ],
        "no-var-keyword": true,
        "one-variable-per-declaration": [
            true,
            "ignore-for-loop"
        ],
        "prefer-const": true,
        "prefer-for-of": true,
        "prefer-function-over-method": false,
        "prefer-method-signature": true,
        "radix": true,
        "semicolon": [
            true,
            "never"
        ],
        "trailing-comma": [
            true,
            {
                "multiline": "never",
                "singleline": "never"
            }
        ],
        "triple-equals": true,
        "use-isnan": true
    }
}
	import * as React from 'react'
	import { Component } from 'react'
	import { Square } from './Square'

	interface BoardProps {
	}

	interface BoardSpec {
	}

	export class Board extends Component<BoardProps, BoardSpec> {
	constructor(props: BoardProps) {
	super(props)
	}
	renderSquare(_i: number): JSX.Element {
	return <Square />
	}

	render(): JSX.Element {
	const status = 'Next player: X'

	return (
	<div>
	<div className="status">{status}</div>
	<div className="board-row">
	{this.renderSquare(0)}
	{this.renderSquare(1)}
	{this.renderSquare(2)}
	</div>
	<div className="board-row">
	{this.renderSquare(3)}
	{this.renderSquare(4)}
	{this.renderSquare(5)}
	</div>
	<div className="board-row">
	{this.renderSquare(6)}
	{this.renderSquare(7)}
	{this.renderSquare(8)}
	</div>
	</div>
	)
	}
	}
	<!DOCTYPE html>
	<html>

	<head>
	<base href="/">
	<style>
	body {
	font: 14px "Century Gothic", Futura, sans-serif;
	margin: 20px;
	}

	ol,
	ul {
	padding-left: 30px;
	}

	.board-row:after {
	clear: both;
	content: "";
	display: table;
	}

	.status {
	margin-bottom: 10px;
	}

	.square {
	background: #fff;
	border: 1px solid #999;
	float: left;
	font-size: 24px;
	font-weight: bold;
	line-height: 34px;
	height: 34px;
	margin-right: -1px;
	margin-top: -1px;
	padding: 0;
	text-align: center;
	width: 34px;
	}

	.square:focus {
	outline: none;
	}

	.kbd-navigation .square:focus {
	background: #ddd;
	}

	.game {
	display: flex;
	flex-direction: row;
	}

	.game-info {
	margin-left: 20px;
	}
	</style>
	<script src="https://unpkg.com/systemjs@0.19.34/dist/system.js"></script>
	</head>

	<body>
	<script>
	System.config({
	"warnings": false,
	"map": {
	"prop-types": "https://unpkg.com/prop-types@15.8.1/umd/prop-types.js",
	"react": "https://unpkg.com/react@17.0.2/umd/react.development.js",
	"react-dom": "https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"
	}
	});
	</script>
	<div id="container"></div>


	<script>
	System.register("./index.js", ["react", "react-dom", "./Board.js"], function (exports_1, context_1) {
	"use strict";
	var __extends = (this && this.__extends) \|\| (function () {
	var extendStatics = function (d, b) {
	extendStatics = Object.setPrototypeOf \|\|
	({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) \|\|
	function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
	return extendStatics(d, b);
	};
	return function (d, b) {
	if (typeof b !== "function" && b !== null)
	throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
	extendStatics(d, b);
	function __() { this.constructor = d; }
	d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
	};
	})();
	var React, react_1, react_dom_1, Board_1, Game;
	var __moduleName = context_1 && context_1.id;
	return {
	setters: [
	function (React_1) {
	React = React_1;
	react_1 = React_1;
	},
	function (react_dom_1_1) {
	react_dom_1 = react_dom_1_1;
	},
	function (Board_1_1) {
	Board_1 = Board_1_1;
	}
	],
	execute: function () {
	Game = (function (_super) {
	__extends(Game, _super);
	function Game(props) {
	return _super.call(this, props) \|\| this;
	}
	Game.prototype.render = function () {
	return (React.createElement("div", { className: "game" },
	React.createElement("div", { className: "game-board" },
	React.createElement(Board_1.Board, null)),
	React.createElement("div", { className: "game-info" },
	React.createElement("div", null),
	React.createElement("ol", null))));
	};
	return Game;
	}(react_1.Component));
	react_dom_1.render(React.createElement(Game, null), document.getElementById('container'));
	}
	};
	});

	System.register("./Board.js", ["react", "./Square.js"], function (exports_1, context_1) {
	"use strict";
	var __extends = (this && this.__extends) \|\| (function () {
	var extendStatics = function (d, b) {
	extendStatics = Object.setPrototypeOf \|\|
	({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) \|\|
	function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
	return extendStatics(d, b);
	};
	return function (d, b) {
	if (typeof b !== "function" && b !== null)
	throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
	extendStatics(d, b);
	function __() { this.constructor = d; }
	d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
	};
	})();
	var React, react_1, Square_1, Board;
	var __moduleName = context_1 && context_1.id;
	return {
	setters: [
	function (React_1) {
	React = React_1;
	react_1 = React_1;
	},
	function (Square_1_1) {
	Square_1 = Square_1_1;
	}
	],
	execute: function () {
	Board = (function (_super) {
	__extends(Board, _super);
	function Board(props) {
	return _super.call(this, props) \|\| this;
	}
	Board.prototype.renderSquare = function (_i) {
	return React.createElement(Square_1.Square, null);
	};
	Board.prototype.render = function () {
	var status = 'Next player: X';
	return (React.createElement("div", null,
	React.createElement("div", { className: "status" }, status),
	React.createElement("div", { className: "board-row" },
	this.renderSquare(0),
	this.renderSquare(1),
	this.renderSquare(2)),
	React.createElement("div", { className: "board-row" },
	this.renderSquare(3),
	this.renderSquare(4),
	this.renderSquare(5)),
	React.createElement("div", { className: "board-row" },
	this.renderSquare(6),
	this.renderSquare(7),
	this.renderSquare(8))));
	};
	return Board;
	}(react_1.Component));
	exports_1("Board", Board);
	}
	};
	});

	System.register("./Square.js", ["react"], function (exports_1, context_1) {
	"use strict";
	var __extends = (this && this.__extends) \|\| (function () {
	var extendStatics = function (d, b) {
	extendStatics = Object.setPrototypeOf \|\|
	({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) \|\|
	function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
	return extendStatics(d, b);
	};
	return function (d, b) {
	if (typeof b !== "function" && b !== null)
	throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
	extendStatics(d, b);
	function __() { this.constructor = d; }
	d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
	};
	})();
	var React, react_1, Square;
	var __moduleName = context_1 && context_1.id;
	return {
	setters: [
	function (React_1) {
	React = React_1;
	react_1 = React_1;
	}
	],
	execute: function () {
	Square = (function (_super) {
	__extends(Square, _super);
	function Square(props) {
	return _super.call(this, props) \|\| this;
	}
	Square.prototype.render = function () {
	return (React.createElement("button", { className: "square" }));
	};
	return Square;
	}(react_1.Component));
	exports_1("Square", Square);
	}
	};
	});
	</script>
	<script>
	System.defaultJSExtensions = true
	System.import('./index.js').catch(function(e) { console.error(e) })
	</script>
	</body>

	</html>
	import * as React from 'react'
	import { Component } from 'react'
	import { render } from 'react-dom'
	import { Board } from './Board'

	interface GameProps {
	}

	interface GameSpec {
	}

	class Game extends Component<GameProps, GameSpec> {
	constructor(props: GameProps) {
	super(props)
	}
	render(): JSX.Element {
	return (
	<div className="game">
	<div className="game-board">
	<Board />
	</div>
	<div className="game-info">
	<div>{/* status */}</div>
	<ol>{/* TODO */}</ol>
	</div>
	</div>
	)
	}
	}

	render<Game>(
	<Game />,
	document.getElementById('container')
	)
	{
	"description": "React Official Tutorial Starter Code",
	"dependencies": {
	"csstype": "^3.0.10",
	"prop-types": "^15.8.1",
	"react": "^17.0.2",
	"react-dom": "^17.0.2"
	},
	"linting": true,
	"name": "react-official-tutorial",
	"version": "1.0.0",
	"author": "David Geo Holmes",
	"hideReferenceFiles": true,
	"noLoopCheck": true,
	"keywords": [
	"React",
	"Official",
	"Tutorial",
	"STEMCstudio",
	"Starter",
	"Code"
	]
	}
	import * as React from 'react'
	import { Component } from 'react'

	interface SquareProps {
	}

	interface SquareSpec {
	}

	export class Square extends Component<SquareProps, SquareSpec> {
	constructor(props: SquareProps) {
	super(props)
	}
	render(): JSX.Element {
	return (
	<button className="square">
	{/* TODO */}
	</button>
	)
	}
	}
	{
	"allowJs": false,
	"declaration": true,
	"emitDecoratorMetadata": true,
	"experimentalDecorators": true,
	"jsx": "react",
	"module": "system",
	"noImplicitAny": true,
	"noImplicitReturns": true,
	"noImplicitThis": true,
	"noUnusedLocals": true,
	"noUnusedParameters": true,
	"preserveConstEnums": true,
	"removeComments": true,
	"sourceMap": false,
	"strict": true,
	"strictNullChecks": true,
	"suppressImplicitAnyIndexErrors": true,
	"target": "es5",
	"traceResolution": true
	}
	{
	"rules": {
	"array-type": [
	true,
	"array"
	],
	"curly": false,
	"comment-format": [
	true,
	"check-space"
	],
	"eofline": true,
	"forin": true,
	"jsdoc-format": true,
	"new-parens": true,
	"no-conditional-assignment": false,
	"no-consecutive-blank-lines": true,
	"no-construct": true,
	"no-for-in-array": true,
	"no-inferrable-types": [
	true
	],
	"no-magic-numbers": false,
	"no-shadowed-variable": true,
	"no-string-throw": true,
	"no-trailing-whitespace": [
	true,
	"ignore-jsdoc"
	],
	"no-var-keyword": true,
	"one-variable-per-declaration": [
	true,
	"ignore-for-loop"
	],
	"prefer-const": true,
	"prefer-for-of": true,
	"prefer-function-over-method": false,
	"prefer-method-signature": true,
	"radix": true,
	"semicolon": [
	true,
	"never"
	],
	"trailing-comma": [
	true,
	{
	"multiline": "never",
	"singleline": "never"
	}
	],
	"triple-equals": true,
	"use-isnan": true
	}
	}