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")
+);