part 1 - data sync

hiukim · hiukim · commit 3c85a5d0467f · 2016-08-09T00:44:29.000+08:00
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/.meteor/.finished-upgraders b/.meteor/.finished-upgraders
@@ -0,0 +1,14 @@
+# This file contains information which helps Meteor properly upgrade your
+# app when you run 'meteor update'. You should check it into version control
+# with your project.
+
+notices-for-0.9.0
+notices-for-0.9.1
+0.9.4-platform-file
+notices-for-facebook-graph-api-2
+1.2.0-standard-minifiers-package
+1.2.0-meteor-platform-split
+1.2.0-cordova-changes
+1.2.0-breaking-changes
+1.3.0-split-minifiers-package
+1.4.0-remove-old-dev-bundle-link
diff --git a/.meteor/.gitignore b/.meteor/.gitignore
@@ -0,0 +1 @@
+local
diff --git a/.meteor/.id b/.meteor/.id
@@ -0,0 +1,7 @@
+# This file contains a token that is unique to your project.
+# Check it into your repository along with the rest of this directory.
+# It can be used for purposes such as:
+#   - ensuring you don't accidentally deploy one app on top of another
+#   - providing package authors with aggregated statistics
+
+7m234ynbgevk1q3x9sj
diff --git a/.meteor/packages b/.meteor/packages
@@ -0,0 +1,22 @@
+# Meteor packages used by this project, one per line.
+# Check this file (and the other files in this directory) into your repository.
+#
+# 'meteor add' and 'meteor remove' will edit this file for you,
+# but you can also edit it by hand.
+
+meteor-base@1.0.4             # Packages every Meteor app needs to have
+mobile-experience@1.0.4       # Packages for a great mobile UX
+mongo@1.1.10                   # The database Meteor supports right now
+blaze-html-templates@1.0.4    # Compile .html files into Meteor Blaze views
+reactive-var@1.0.10            # Reactive variable for tracker
+jquery@1.11.9                  # Helpful client-side library
+tracker@1.1.0                 # Meteor's client-side reactive programming library
+
+standard-minifier-css@1.1.8   # CSS minifier run for production mode
+standard-minifier-js@1.1.8    # JS minifier run for production mode
+es5-shim@4.6.13                # ECMAScript 5 compatibility for older browsers.
+ecmascript@0.5.7              # Enable ECMAScript2015+ syntax in app code
+
+autopublish@1.0.7             # Publish all data to the clients (for prototyping)
+insecure@1.0.7                # Allow all DB writes from clients (for prototyping)
+react-meteor-data
diff --git a/.meteor/platforms b/.meteor/platforms
@@ -0,0 +1,2 @@
+server
+browser
diff --git a/.meteor/release b/.meteor/release
@@ -0,0 +1 @@
+METEOR@1.4.0.1
diff --git a/.meteor/versions b/.meteor/versions
@@ -0,0 +1,71 @@
+allow-deny@1.0.5
+autopublish@1.0.7
+autoupdate@1.2.11
+babel-compiler@6.9.0
+babel-runtime@0.1.10
+base64@1.0.9
+binary-heap@1.0.9
+blaze@2.1.8
+blaze-html-templates@1.0.4
+blaze-tools@1.0.9
+boilerplate-generator@1.0.9
+caching-compiler@1.0.6
+caching-html-compiler@1.0.6
+callback-hook@1.0.9
+check@1.2.3
+ddp@1.2.5
+ddp-client@1.2.9
+ddp-common@1.2.6
+ddp-server@1.2.10
+deps@1.0.12
+diff-sequence@1.0.6
+ecmascript@0.5.7
+ecmascript-runtime@0.3.12
+ejson@1.0.12
+es5-shim@4.6.13
+fastclick@1.0.12
+geojson-utils@1.0.9
+hot-code-push@1.0.4
+html-tools@1.0.10
+htmljs@1.0.10
+http@1.1.8
+id-map@1.0.8
+insecure@1.0.7
+jquery@1.11.9
+launch-screen@1.0.12
+livedata@1.0.18
+logging@1.1.14
+meteor@1.2.16
+meteor-base@1.0.4
+minifier-css@1.2.13
+minifier-js@1.2.13
+minimongo@1.0.17
+mobile-experience@1.0.4
+mobile-status-bar@1.0.12
+modules@0.7.5
+modules-runtime@0.7.5
+mongo@1.1.10
+mongo-id@1.0.5
+npm-mongo@1.5.45
+observe-sequence@1.0.12
+ordered-dict@1.0.8
+promise@0.8.3
+random@1.0.10
+react-meteor-data@0.2.9
+reactive-var@1.0.10
+reload@1.1.10
+retry@1.0.8
+routepolicy@1.0.11
+spacebars@1.0.12
+spacebars-compiler@1.0.12
+standard-minifier-css@1.1.8
+standard-minifier-js@1.1.8
+templating@1.1.14
+templating-tools@1.0.4
+tmeasday:check-npm-versions@0.2.0
+tracker@1.1.0
+ui@1.0.11
+underscore@1.0.9
+url@1.0.10
+webapp@1.3.10
+webapp-hashing@1.0.9
diff --git a/client/main.css b/client/main.css
@@ -0,0 +1,6 @@
+table.game-board tr td {
+  border: 1px solid black;
+  width: 30px;
+  height: 30px;
+  text-align: center;
+}
diff --git a/client/main.html b/client/main.html
@@ -0,0 +1,6 @@
+<head>
+  <title>my-game-site</title>
+</head>
+<body>
+  <div id="render-target"></div>
+</body>
diff --git a/client/main.jsx b/client/main.jsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { Meteor } from 'meteor/meteor';
+import { render } from 'react-dom';
+import App from '../imports/ui/App.jsx';
+
+Meteor.startup(() => {
+    render(<App />, document.getElementById('render-target'));
+});
diff --git a/imports/api/collections/games.js b/imports/api/collections/games.js
@@ -0,0 +1,3 @@
+import { Mongo } from 'meteor/mongo';
+
+export default Games = new Mongo.Collection('games');
diff --git a/imports/ui/App.jsx b/imports/ui/App.jsx
@@ -0,0 +1,22 @@
+import React, { Component } from 'react';
+import { createContainer } from 'meteor/react-meteor-data';
+import Games from '../api/collections/games.js';
+import GameBoard from './GameBoard.jsx';
+
+class App extends Component {
+  render() {
+    return (
+      <div>
+        {this.props.game?
+          <GameBoard game={this.props.game}/>
+        : null}
+      </div>
+    )
+  }
+}
+
+export default createContainer(() => {
+  return {
+    game: Games.findOne()
+  };
+}, App);
diff --git a/imports/ui/GameBoard.jsx b/imports/ui/GameBoard.jsx
@@ -0,0 +1,56 @@
+import React, { Component } from 'react';
+
+export default class GameBoard extends Component {
+  currentPlayer() {
+    // determine the current player by counting the filled cells
+    // if even, then it's first player, otherwise it's second player
+    let filledCount = 0;
+    for (let r = 0; r < 3; r++) {
+      for (let c = 0; c < 3; c++) {
+        if (this.props.game.board[r][c] !== null) filledCount++;
+      }
+    }
+    return (filledCount % 2 === 0? 0: 1);
+  }
+
+  handleCellClick(row, col) {
+    let currentPlayer = this.currentPlayer();
+    let game = this.props.game;
+    game.board[row][col] = currentPlayer;
+    Games.update(game._id, {
+      $set: {board: game.board}
+    });
+  }
+
+  renderCell(row, col) {
+    let value = this.props.game.board[row][col];
+    if (value === 0) return (<td>O</td>);
+    if (value === 1) return (<td>X</td>);
+    if (value === null) return (
+      <td onClick={this.handleCellClick.bind(this, row, col)}></td>
+    );
+  }
+  render() {
+    return (
+      <table className="game-board">
+        <tbody>
+          <tr>
+            {this.renderCell(0, 0)}
+            {this.renderCell(0, 1)}
+            {this.renderCell(0, 2)}
+          </tr>
+          <tr>
+            {this.renderCell(1, 0)}
+            {this.renderCell(1, 1)}
+            {this.renderCell(1, 2)}
+          </tr>
+          <tr>
+            {this.renderCell(2, 0)}
+            {this.renderCell(2, 1)}
+            {this.renderCell(2, 2)}
+          </tr>
+        </tbody>
+      </table>
+    )
+  }
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "my-game-site",
+  "private": true,
+  "scripts": {
+    "start": "meteor run"
+  },
+  "dependencies": {
+    "meteor-node-stubs": "~0.2.0",
+    "react": "^15.3.0",
+    "react-addons-pure-render-mixin": "^15.3.0",
+    "react-dom": "^15.3.0"
+  }
+}
diff --git a/server/main.js b/server/main.js
@@ -0,0 +1,14 @@
+import { Meteor } from 'meteor/meteor';
+import Games from '../imports/api/collections/games.js'; // import Games collection
+
+Meteor.startup(() => {
+  // code to run on server at startup
+
+  Games.remove({});  // remove all existing game documents
+
+  let gameDoc = {
+    board: [[null, null, null], [null, null, null], [null, null, null]]
+  };
+
+  Games.insert(gameDoc); // insert a new game document into the collection
+});

-Original file line number
+Diff line change
@@ @@ -0,0 +1,22 @@ @@
 +# Meteor packages used by this project, one per line.
 +# Check this file (and the other files in this directory) into your repository.
 +#
 +# 'meteor add' and 'meteor remove' will edit this file for you,
 +# but you can also edit it by hand.
++
 +[email protected]             # Packages every Meteor app needs to have
 +[email protected]       # Packages for a great mobile UX
 +[email protected]                   # The database Meteor supports right now
 +[email protected]    # Compile .html files into Meteor Blaze views
 +[email protected]            # Reactive variable for tracker
 +[email protected]                  # Helpful client-side library
 +[email protected]                 # Meteor's client-side reactive programming library
++
 +[email protected]   # CSS minifier run for production mode
 +[email protected]    # JS minifier run for production mode
 +[email protected]                # ECMAScript 5 compatibility for older browsers.
 +[email protected]              # Enable ECMAScript2015+ syntax in app code
++
 +[email protected]             # Publish all data to the clients (for prototyping)
 +[email protected]                # Allow all DB writes from clients (for prototyping)
 +react-meteor-data