Merge pull request #38 from meteor/updating-tic-tac-toe-to-3.0

Updating to 3.0

Author: StorytellerCZ

tic-tac-toe/.meteor/packages

@@ -4,19 +4,19 @@
 # 'meteor add' and 'meteor remove' will edit this file for you,
 # but you can also edit it by hand.
 
-meteor-base@1.5.1             # Packages every Meteor app needs to have
-mobile-experience@1.1.0       # Packages for a great mobile UX
-mongo@1.15.0                   # The database Meteor supports right now
-reactive-var@1.0.11            # Reactive variable for tracker
+meteor-base@1.5.2-beta300.6             # Packages every Meteor app needs to have
+mobile-experience@1.1.1-beta300.6       # Packages for a great mobile UX
+mongo@2.0.0-beta300.6                   # The database Meteor supports right now
+reactive-var@1.0.13-beta300.6            # Reactive variable for tracker
 
-standard-minifier-css@1.8.1   # CSS minifier run for production mode
-standard-minifier-js@2.8.0    # JS minifier run for production mode
-es5-shim@4.8.0                # ECMAScript 5 compatibility for older browsers
-ecmascript@0.16.2              # Enable ECMAScript2015+ syntax in app code
-typescript@4.5.4              # Enable TypeScript syntax in .ts and .tsx modules
-shell-server@0.5.0            # Server-side component of the `meteor shell` command
-hot-module-replacement@0.5.1  # Update client in development without reloading the page
+standard-minifier-css@1.9.3-beta300.6   # CSS minifier run for production mode
+standard-minifier-js@3.0.0-beta300.6    # JS minifier run for production mode
+es5-shim@4.8.1-beta300.6                # ECMAScript 5 compatibility for older browsers
+ecmascript@0.16.8-beta300.6              # Enable ECMAScript2015+ syntax in app code
+typescript@5.3.3-beta300.6              # Enable TypeScript syntax in .ts and .tsx modules
+shell-server@0.6.0-beta300.6            # Server-side component of the `meteor shell` command
+hot-module-replacement@0.5.4-beta300.6  # Update client in development without reloading the page
 
-insecure@1.0.7                # Allow all DB writes from clients (for prototyping)
-static-html@1.3.2             # Define static page content in .html files
-react-meteor-data       # React higher-order component for reactively tracking Meteor data
+insecure@1.0.8-beta300.6                # Allow all DB writes from clients (for prototyping)
+static-html@1.3.3-beta300.6             # Define static page content in .html files
+react-meteor-data@3.0.0-beta300.1

tic-tac-toe/.meteor/release

@@ -1 +1 @@
-METEOR@2.7.3
+METEOR@3.0-beta.6

tic-tac-toe/.meteor/versions

@@ -1,72 +1,74 @@
-allow-deny@1.1.1
-autoupdate@1.8.0
-babel-compiler@7.9.2
-babel-runtime@1.5.1
-base64@1.0.12
-binary-heap@1.0.11
-blaze-tools@1.1.3
-boilerplate-generator@1.7.1
-caching-compiler@1.2.2
-caching-html-compiler@1.2.1
-callback-hook@1.4.0
-check@1.3.1
-ddp@1.4.0
-ddp-client@2.5.0
-ddp-common@1.4.0
-ddp-server@2.5.0
-diff-sequence@1.1.1
-dynamic-import@0.7.2
-ecmascript@0.16.2
-ecmascript-runtime@0.8.0
-ecmascript-runtime-client@0.12.1
-ecmascript-runtime-server@0.11.0
-ejson@1.1.2
-es5-shim@4.8.0
-fetch@0.1.1
-geojson-utils@1.0.10
-hot-code-push@1.0.4
-hot-module-replacement@0.5.1
-html-tools@1.1.3
-htmljs@1.1.1
-id-map@1.1.1
-insecure@1.0.7
-inter-process-messaging@0.1.1
-launch-screen@1.3.0
-logging@1.3.1
-meteor@1.10.0
-meteor-base@1.5.1
-minifier-css@1.6.1
-minifier-js@2.7.5
-minimongo@1.8.0
-mobile-experience@1.1.0
-mobile-status-bar@1.1.0
-modern-browsers@0.1.8
-modules@0.18.0
-modules-runtime@0.13.0
-modules-runtime-hot@0.14.0
-mongo@1.15.0
-mongo-decimal@0.1.3
-mongo-dev-server@1.1.0
-mongo-id@1.0.8
-npm-mongo@4.3.1
-ordered-dict@1.1.0
-promise@0.12.0
-random@1.2.0
-react-fast-refresh@0.2.3
-react-meteor-data@2.5.1
-reactive-var@1.0.11
-reload@1.3.1
-retry@1.1.0
-routepolicy@1.1.1
-shell-server@0.5.0
-socket-stream-client@0.5.0
-spacebars-compiler@1.3.1
-standard-minifier-css@1.8.2
-standard-minifier-js@2.8.1
-static-html@1.3.2
-templating-tools@1.2.2
-tracker@1.2.0
-typescript@4.5.4
-underscore@1.0.10
-webapp@1.13.1
-webapp-hashing@1.1.0
+allow-deny@2.0.0-beta300.6
+autoupdate@2.0.0-beta300.6
+babel-compiler@7.11.0-beta300.6
+babel-runtime@1.5.2-beta300.6
+base64@1.0.13-beta300.6
+binary-heap@1.0.12-beta300.6
+blaze-tools@2.0.0-alpha300.17
+boilerplate-generator@2.0.0-beta300.6
+caching-compiler@2.0.0-beta300.6
+caching-html-compiler@2.0.0-alpha300.17
+callback-hook@1.6.0-beta300.6
+check@1.3.3-beta300.6
+core-runtime@1.0.0-beta300.6
+ddp@1.4.2-beta300.6
+ddp-client@3.0.0-beta300.6
+ddp-common@1.4.1-beta300.6
+ddp-server@3.0.0-beta300.6
+diff-sequence@1.1.3-beta300.6
+dynamic-import@0.7.4-beta300.6
+ecmascript@0.16.8-beta300.6
+ecmascript-runtime@0.8.2-beta300.6
+ecmascript-runtime-client@0.12.2-beta300.6
+ecmascript-runtime-server@0.11.1-beta300.6
+ejson@1.1.4-beta300.6
+es5-shim@4.8.1-beta300.6
+facts-base@1.0.2-beta300.6
+fetch@0.1.4-beta300.6
+geojson-utils@1.0.12-beta300.6
+hot-code-push@1.0.5-beta300.6
+hot-module-replacement@0.5.4-beta300.6
+html-tools@2.0.0-alpha300.17
+htmljs@2.0.0-alpha300.17
+id-map@1.2.0-beta300.6
+insecure@1.0.8-beta300.6
+inter-process-messaging@0.1.2-beta300.6
+launch-screen@1.3.1-beta300.6
+logging@1.3.3-beta300.6
+meteor@2.0.0-beta300.6
+meteor-base@1.5.2-beta300.6
+minifier-css@2.0.0-beta300.6
+minifier-js@3.0.0-beta300.6
+minimongo@2.0.0-beta300.6
+mobile-experience@1.1.1-beta300.6
+mobile-status-bar@1.1.1-beta300.6
+modern-browsers@0.1.10-beta300.6
+modules@0.19.1-beta300.6
+modules-runtime@0.13.2-beta300.6
+modules-runtime-hot@0.14.3-beta300.6
+mongo@2.0.0-beta300.6
+mongo-decimal@0.1.4-beta300.6
+mongo-dev-server@1.1.1-beta300.6
+mongo-id@1.0.9-beta300.6
+npm-mongo@4.16.1-beta300.6
+ordered-dict@1.2.0-beta300.6
+promise@1.0.0-beta300.6
+random@1.2.2-beta300.6
+react-fast-refresh@0.2.8-beta300.6
+react-meteor-data@3.0.0-beta300.1
+reactive-var@1.0.13-beta300.6
+reload@1.3.2-beta300.6
+retry@1.1.1-beta300.6
+routepolicy@1.1.2-beta300.6
+shell-server@0.6.0-beta300.6
+socket-stream-client@0.5.2-beta300.6
+spacebars-compiler@2.0.0-alpha300.17
+standard-minifier-css@1.9.3-beta300.6
+standard-minifier-js@3.0.0-beta300.6
+static-html@1.3.3-beta300.6
+templating-tools@2.0.0-alpha300.17
+tracker@1.3.3-beta300.6
+typescript@5.3.3-beta300.6
+underscore@1.0.14-beta300.6
+webapp@2.0.0-beta300.6
+webapp-hashing@1.1.2-beta300.6

tic-tac-toe/imports/api/rooms.js

@@ -1,4 +1,5 @@
 import { Mongo } from "meteor/mongo";
+import { Meteor } from "meteor/meteor";
 
 export const RoomCollection = new Mongo.Collection("rooms");
 
@@ -21,47 +22,52 @@ function checkEndGame(gameState) {
 }
 
 Meteor.methods({
-  createRoom() {
-    const roomId = RoomCollection.insert({
+  async createRoom() {
+    const roomId = await RoomCollection.insertAsync({
       createdAt: new Date(),
       capacity: 2,
       gameState: new Array(9).fill("empty"),
       colorTurn: "cross",
-      winner: null
+      winner: null,
     });
-    return RoomCollection.findOne(roomId);
+    return RoomCollection.findOneAsync(roomId);
   },
-  joinRoom({ roomId }) {
-    RoomCollection.update({ _id: roomId, capacity: { $gte: 1 } }, { $inc: { capacity: -1 } })
-    const room = RoomCollection.findOne(roomId)
+  async joinRoom({ roomId }) {
+    await RoomCollection.updateAsync(
+      { _id: roomId, capacity: { $gte: 1 } },
+      { $inc: { capacity: -1 } }
+    );
+    const room = await RoomCollection.findOneAsync(roomId);
     if (!room) {
-      throw new Error("Room not found, or full!");
+      throw new Meteor.Error("Room not found, or full!");
     }
     return {
       room,
-      color: room.capacity === 1 ? "cross" : "circle"
+      color: room.capacity === 1 ? "cross" : "circle",
     };
   },
-  makePlay({ roomId, playState: { color, play } }) {
+  async makePlay({ roomId, playState: { color, play } }) {
     const otherColor = color === "cross" ? "circle" : "cross";
     const query = {
       _id: roomId,
       colorTurn: color,
       winner: null,
-      [`gameState.${play}`]: "empty"
+      [`gameState.${play}`]: "empty",
     };
-    RoomCollection.update(query, { $set: { colorTurn: otherColor, [`gameState.${play}`]: color } })
-    const room = RoomCollection.findOne(roomId)
+    await RoomCollection.updateAsync(query, {
+      $set: { colorTurn: otherColor, [`gameState.${play}`]: color },
+    });
+    const room = await RoomCollection.findOneAsync(roomId);
 
     if (!room) {
       throw new Meteor.Error("invalid-play");
     }
     const winner = checkEndGame(room.gameState);
     if (winner && winner !== "empty") {
-      RoomCollection.update(roomId, { $set: { winner } })
-      return RoomCollection.findOne(roomId)
+      await RoomCollection.updateAsync(roomId, { $set: { winner } });
+      return await RoomCollection.findOneAsync(roomId);
     }
 
     return room;
-  }
+  },
 });

tic-tac-toe/imports/ui/GameScreen.jsx

@@ -1,7 +1,7 @@
 import "./game.css";
 import React, { useEffect } from "react";
 import { useHistory, useLocation, useParams } from "react-router";
-import { useTracker } from "meteor/react-meteor-data";
+import { useTracker, useFind } from "meteor/react-meteor-data";
 import { RoomCollection } from "../api/rooms";
 
 const Slot = ({ id, room: { gameState, _id } }) => {
@@ -10,18 +10,21 @@ const Slot = ({ id, room: { gameState, _id } }) => {
   return (
     <div
       className="slot"
-      onClick={() => {
-        Meteor.call(
-          "makePlay",
-          { roomId: _id, playState: { play: id - 1, color } },
-          err => {
-            if (err && err.error === "invalid-play") {
-                alert("This move is invalid. You might need to wait for your turn!")
-            } else if(err) {
-                alert(err.message);
-            }
+      onClick={async () => {
+        try {
+          await Meteor.callAsync("makePlay", {
+            roomId: _id,
+            playState: { play: id - 1, color },
+          });
+        } catch (e) {
+          if (e.error === "invalid-play") {
+            alert(
+              "This move is invalid. You might need to wait for your turn!"
+            );
+          } else {
+            alert(e.message);
           }
-        );
+        }
       }}
     >
       {gameState[id - 1] === "cross" ? <img src={"/cross.png"} /> : ""}
@@ -34,15 +37,14 @@ export const GameScreen = () => {
   const { id } = useParams();
   const location = useLocation();
   const history = useHistory();
-
   const { color } = location.state;
   const roomLoading = useTracker(() => {
     // Note that this subscription will get cleaned up
     // when your component is unmounted or deps change.
     const handle = Meteor.subscribe("room", { _id: id });
     return !handle.ready();
   }, [id]);
-  const room = useTracker(() => RoomCollection.findOne({ _id: id }), [id]);
+  const [room] = useFind(() => RoomCollection.find({ _id: id }), [id]);
 
   useEffect(() => {
     if (room && room.winner) {

tic-tac-toe/imports/ui/RoomList.jsx

@@ -5,15 +5,15 @@ import { useHistory } from "react-router";
 
 export const RoomList = () => {
   const history = useHistory();
-  const listLoading = useSubscribe('rooms')
+  const listLoading = useSubscribe("rooms");
   const rooms = useFind(() => RoomCollection.find({}), []);
 
   if (listLoading()) return "Loading...";
   return (
     <div>
       <button
-        onClick={() => {
-          Meteor.call("createRoom");
+        onClick={async () => {
+          await Meteor.callAsync("createRoom");
         }}
       >
         {" "}
@@ -28,10 +28,8 @@ export const RoomList = () => {
             <button
               disabled={capacity <= 0}
               onClick={() => {
-                Meteor.call(
-                  "joinRoom",
-                  { roomId: _id },
-                  (err, { room, color }) => {
+                Meteor.callAsync("joinRoom", { roomId: _id }).then(
+                  ({ room, color }) => {
                     history.push(`/game/${room._id}`, { color });
                   }
                 );