From 4a75cdd4afd3aea2abe3d905c00d65f0a0152a78 Mon Sep 17 00:00:00 2001
From: Joseph Garcia <joseph@homegames.io>
Date: Sun, 21 Aug 2022 14:51:01 -0700
Subject: [PATCH] [63] Add maxPlayers, disable joining full sessions (#64)

* add maxPlayers, disable joining full sessions

* move max players text
---
 src/dashboard/game-modal.js     | 54 +++++++++++++++++++++++++--------
 src/games/clicktionary/index.js |  3 +-
 2 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/src/dashboard/game-modal.js b/src/dashboard/game-modal.js
index e3c40568..9496f5cc 100644
--- a/src/dashboard/game-modal.js
+++ b/src/dashboard/game-modal.js
@@ -56,6 +56,29 @@ const thumbnailSection = ({ gameKey, gameMetadata }) => {
     return thumbnail;
 };
 
+
+const metadataSection = ({ gameKey, gameMetadata}) => {
+    const section = new GameNode.Shape({
+        shapeType: Shapes.POLYGON,
+        coordinates2d: ShapeUtils.rectangle(0, 0, 0, 0)
+    });
+
+    const maxPlayers = new GameNode.Text({
+        textInfo: {
+            x: 3, 
+            y: 20,
+            align: 'left',
+            color: COLORS.HG_BLACK,
+            size: 1.5,
+            text: 'Max players: ' + (gameMetadata?.maxPlayers || 'N/A')
+        }
+    });
+
+    section.addChildren(maxPlayers)
+
+    return section;
+};
+
 const infoSection = ({ gameKey, gameMetadata}) => {
     const infoContainer = new GameNode.Shape({
         shapeType: Shapes.POLYGON,
@@ -142,7 +165,7 @@ const createSection = ({ gameKey, onCreateSession, isReviewed = false }) => {
 
         const warningTextHead = new GameNode.Text({
             textInfo: {
-                text: 'This game version has not been reviewed',// by a Homegames administrator.',
+                text: 'This game version has not been reviewed',
                 x: 50,
                 y: 88.5,
                 align: 'center',
@@ -269,7 +292,7 @@ const unverifiedGameVersionWarning = () => {
     return warningContainer;
 };
 
-const joinSection = ({ gameKey, activeSessions, onJoinSession, page = 0, pageSize = 2 }) => {
+const joinSection = ({ gameKey, gameMetadata, activeSessions, onJoinSession, page = 0, pageSize = 2 }) => {
     const joinContainer = new GameNode.Shape({
         shapeType: Shapes.POLYGON,
         coordinates2d: ShapeUtils.rectangle(0, 0, 0, 0)
@@ -307,17 +330,20 @@ const joinSection = ({ gameKey, activeSessions, onJoinSession, page = 0, pageSiz
 
             const startingY = 67;
             for (let i = 0; i < pageContent.length; i++) {
-                const optionWrapper = new GameNode.Shape({
-                    shapeType: Shapes.POLYGON,
-                    coordinates2d: ShapeUtils.rectangle(60, startingY + (10 * i), 30, 8),
-                    fill: COLORS.WHITE,
-                    onClick: () => onJoinSession(pageContent[i])
-                });
+                pageContent[i].getPlayers(players => {
 
-                const sessionPlayerCount = activeSessions.filter(s => s.id === pageContent[i].id).length;
+                    const gameFull = gameMetadata?.maxPlayers && players.length >= gameMetadata.maxPlayers;
 
-                pageContent[i].getPlayers(players => {
+                    const optionWrapper = new GameNode.Shape({
+                        shapeType: Shapes.POLYGON,
+                        coordinates2d: ShapeUtils.rectangle(60, startingY + (10 * i), 30, 8),
+                        fill: gameFull ? COLORS.GRAY : COLORS.WHITE,
+                        onClick: gameFull ? null : () => onJoinSession(pageContent[i])
+                    });
 
+                    const sessionPlayerCount = activeSessions.filter(s => s.id === pageContent[i].id).length;
+
+                    const playerText = gameMetadata?.maxPlayers ? `${players.length} / ${gameMetadata.maxPlayers} ${gameMetadata.maxPlayers > 1 ? 'players' : 'player'}` : `${players.length} ${players.length > 1 ? 'players' : 'player'}`
                     const optionText = new GameNode.Text({
                         textInfo: {
                             x: 61,
@@ -325,7 +351,7 @@ const joinSection = ({ gameKey, activeSessions, onJoinSession, page = 0, pageSiz
                             align: 'left',
                             size: 1,
                             color: COLORS.HG_BLACK,
-                            text: `Session ${pageContent[i].id} - ${players.length} players`
+                            text: `Session ${pageContent[i].id} - ${playerText}`
                         }
                     });
 
@@ -461,12 +487,14 @@ const gameModal = ({
 
     const info = infoSection({ gameKey, gameMetadata });
 
+    const metadata = metadataSection({ gameKey, gameMetadata });
+
     const isReviewed = thisVersion.isReviewed;
 
     const create = createSection({ gameKey, onCreateSession, isReviewed });
 
-    const join = joinSection({ gameKey, activeSessions, onJoinSession });
-    modal.addChildren(close, info, create, join);
+    const join = joinSection({ gameKey, gameMetadata, activeSessions, onJoinSession });
+    modal.addChildren(close, info, metadata, create, join);
 
     if (versionId !== 'local-game-version') {   
         const selector = versionSelector({ gameKey, currentVersion: thisVersion, onVersionChange, otherVersions });
diff --git a/src/games/clicktionary/index.js b/src/games/clicktionary/index.js
index 1825ff04..9885ead5 100644
--- a/src/games/clicktionary/index.js
+++ b/src/games/clicktionary/index.js
@@ -11,7 +11,8 @@ class Clicktionary extends Game {
             description: 'ayy lmao this is a test',
             author: 'Joseph Garcia',
             thumbnail: '4b5f169186bc542e14b5d001d25ce6bb',
-            squishVersion: '0756'
+            squishVersion: '0756',
+            maxPlayers: 2
         };
     }