From ed51facac6fb3632a679b94b40f4ecbfa0260441 Mon Sep 17 00:00:00 2001 From: Gabriel Grubba <70247653+Grubba27@users.noreply.github.com> Date: Fri, 22 Mar 2024 10:41:15 -0300 Subject: [PATCH] Updating to 3.0 --- tic-tac-toe/.meteor/packages | 28 ++--- tic-tac-toe/.meteor/release | 2 +- tic-tac-toe/.meteor/versions | 146 +++++++++++++------------- tic-tac-toe/imports/api/rooms.js | 38 ++++--- tic-tac-toe/imports/ui/GameScreen.jsx | 30 +++--- tic-tac-toe/imports/ui/RoomList.jsx | 12 +-- tic-tac-toe/package-lock.json | 12 +-- 7 files changed, 138 insertions(+), 130 deletions(-) diff --git a/tic-tac-toe/.meteor/packages b/tic-tac-toe/.meteor/packages index a0f81d9..c35fde3 100644 --- a/tic-tac-toe/.meteor/packages +++ b/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 diff --git a/tic-tac-toe/.meteor/release b/tic-tac-toe/.meteor/release index 66dd7b6..ecc41d1 100644 --- a/tic-tac-toe/.meteor/release +++ b/tic-tac-toe/.meteor/release @@ -1 +1 @@ -METEOR@2.7.3 +METEOR@3.0-beta.6 diff --git a/tic-tac-toe/.meteor/versions b/tic-tac-toe/.meteor/versions index 4b80e8b..a202d44 100644 --- a/tic-tac-toe/.meteor/versions +++ b/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 diff --git a/tic-tac-toe/imports/api/rooms.js b/tic-tac-toe/imports/api/rooms.js index 0239dfd..8030c09 100644 --- a/tic-tac-toe/imports/api/rooms.js +++ b/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; - } + }, }); diff --git a/tic-tac-toe/imports/ui/GameScreen.jsx b/tic-tac-toe/imports/ui/GameScreen.jsx index 9943016..f3186e4 100644 --- a/tic-tac-toe/imports/ui/GameScreen.jsx +++ b/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 (
{ - 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" ? : ""} @@ -34,7 +37,6 @@ 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 @@ -42,7 +44,7 @@ export const GameScreen = () => { 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) { diff --git a/tic-tac-toe/imports/ui/RoomList.jsx b/tic-tac-toe/imports/ui/RoomList.jsx index 8dc85a4..850ad68 100644 --- a/tic-tac-toe/imports/ui/RoomList.jsx +++ b/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 (