microsoft · liminzhu · Mar 28, 2016 · Mar 28, 2016 · Apr 6, 2016 · Apr 7, 2016
diff --git a/react-tic-tac-toe/.gitignore b/react-tic-tac-toe/.gitignore
@@ -0,0 +1,5 @@
+# compiled and bundled source
+dist
+
+# Node modules
+node_modules
diff --git a/react-tic-tac-toe/README.md b/react-tic-tac-toe/README.md
@@ -0,0 +1,16 @@
+# React Tic Tac Toe
+
+A game example built using [TypeScript](https://github.com/Microsoft/TypeScript) and [React](https://github.com/facebook/react), following guidelines from [react-webpack guide](https://github.com/Microsoft/TypeScript-Handbook/blob/master/pages/quick-start/react-webpack.md) from TypeScript handbook.
+
+## Build
+
+```
+npm install -g typescript webpack
+npm install
+npm link typescript
+webpack
+```
+
+## Run 
+
+Open ```index.html```.
diff --git a/react-tic-tac-toe/css/style.css b/react-tic-tac-toe/css/style.css
@@ -0,0 +1,118 @@
+html {
+ box-sizing: border-box;
+}
+* {
+ box-sizing: inherit;
+}
+
+.app {
+ font-family: 'Open Sans', sans-serif;
+ margin: 100px;
+ width: 500px;
+ margin-left: auto;
+ margin-right: auto;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.board {
+ position: relative;
+ width: 500px;
+ height:500px;
+}
+
+.cell {
+ float: left;
+ width: 33.3333%;
+ height: 33.3333%;
+ line-height: 166.67px;
+ color: black;
+ font-size: 90pt;
+ text-align: center;
+ border-color: orangered;
+ border-width: 3px;
+}
+.cell.top {
+ border-bottom-style:solid;
+}
+.cell.bottom {
+ border-top-style:solid;
+}
+.cell.left {
+ border-right-style:solid;
+}
+.cell.right {
+ border-left-style:solid;
+}
+
+.X{
+ animation-name: appear;
+ animation-duration: .3s;
+}
+.O{
+ animation-name: appear;
+ animation-duration: .3s;
+ animation-delay:.3s;
+ animation-fill-mode: forwards;
+ opacity: 0;
+}
+@keyframes appear {
+ from { font-size: 90pt; opacity: 0;}
+ to { font-size: 100pt; opacity: 1;}
+}
+
+.description{
+ cursor:pointer;
+ font-size:25px;
+ font-weight:bold;
+ padding:15px 0px;
+ position: relative;
+ display: inline-block;
+ width: 200px;
+ text-align: center;
+ margin-top: 30px;
+ margin-right: -35px;
+}
+.t1{
+ margin-left: 60px;
+}
+.t2{
+ margin-right: 60px;
+}
+
+.gameStateBar {
+ text-align: center;
+ font-size: 60px;
+ font-weight: bold;
+ height: 60px;
+}
+
+.restartBtn {
+ box-shadow: 3px 3px 9px 2px #54a3f7;
+ background-color:#007dc1;
+ border-radius:28px;
+ border:1px solid #124d77;
+ cursor:pointer;
+ color:#ffffff;
+ font-size:25px;
+ font-weight:bold;
+ padding:15px 36px;
+ text-decoration:none;
+ text-shadow:0px 0px 7px #154682;
+ position: relative;
+ display: block;
+ margin: 40px auto;
+ width: 160px;
+ text-align: center;
+}
+.restartBtn:hover {
+ background-color:#0061a7;
+}
+.restartBtn:active {
+ position:relative;
+ top:1px;
+}
diff --git a/react-tic-tac-toe/index.html b/react-tic-tac-toe/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <title>TicTacToe with TypeScript and React</title>
+ <link rel="stylesheet" href="css/style.css">
+ <script src="./node_modules/react/dist/react.js"></script>
+ <script src="./node_modules/react-dom/dist/react-dom.js"></script> 
+ </head>
+ <body>
+ <div id="content"></div>
+ <script src="./dist/bundle.js"></script>
+ </body>
+</html>
diff --git a/react-tic-tac-toe/layout.txt b/react-tic-tac-toe/layout.txt
@@ -0,0 +1,18 @@
+TicTacToe /
+ |---- css/ // css style sheets
+ |---- dist/ // folder for typescript-compiled and webpack-bundled js files 
+ |---- node_modules/ // dependent node modules
+ |---- src/ // .ts and .tsx source files
+ |---- app.tsx // the App React component
+ |---- board.tsx // the TicTacToe Board React component
+ |---- constants.ts // some shared constants and types
+ |---- gameStateBar.tsx // GameStatusBar React component
+ |---- restartBtn.tsx // RestartBtn React component
+ |---- typings/ // type definition .d.ts files
+ |---- index.html // web page for our app
+ |---- layout.html // project structure
+ |---- package.json // node package configuration file 
+ |---- README.md // RAEDME file 
+ |---- tsconfig.json // typescript configuration file
+ |---- typings.json // typings configuration file
+ |---- webpack.config.js // webpack configuration file
diff --git a/react-tic-tac-toe/package.json b/react-tic-tac-toe/package.json
@@ -0,0 +1,19 @@
+{
+ "name": "TicTacToe",
+ "version": "1.0.0",
+ "description": "Tic Tac Toe built with TypeScript and React",
+ "main": "index.js",
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "author": "Limin Zhu",
+ "license": "ISC",
+ "dependencies": {
+ "react": "^0.14.7",
+ "react-dom": "^0.14.7"
+ },
+ "devDependencies": {
+ "source-map-loader": "^0.1.5",
+ "ts-loader": "^0.8.1"
+ }
+}
diff --git a/react-tic-tac-toe/src/app.tsx b/react-tic-tac-toe/src/app.tsx
@@ -0,0 +1,26 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { Board } from "./Board";
+import { RestartBtn } from "./RestartBtn";
+import { GameStateBar } from "./GameStateBar";
+import { GameState } from "./constants";
+
+class App extends React.Component<void, void> {
+ render() {
+ return (
+ <div className="app"> 
+ <Board /> 
+ <div>
+ <span className="description t1"> Player(X) </span> 
+ <span className="description t2"> Computer(O) </span>
+ </div>
+ <RestartBtn /> 
+ <GameStateBar /> 
+ </div> 
+ )
+ }
+}
+
+ReactDOM.render(
+ <App />, document.getElementById("content")
+);