Initial commit for react-tic-tac-toe sample

react-tic-tac-toe/.gitignore

@@ -0,0 +1,2 @@
+# Node
+node_modules

react-tic-tac-toe/README.md

@@ -0,0 +1,14 @@
+# 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```.

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;
+}