Merge pull request #18 from x-team/dev

Merging dev into main

Author: ccmoralesj

Diff for: src/AppMenu.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import { Link } from "react-router-dom";
 
+import useCurrentUser from "./hooks/useCurrentUser";
+
 import playerSvg from "./assets/icons/player.svg";
 import skull from "./assets/icons/skull.svg";
 import sword from "./assets/icons/sword.svg";
@@ -12,30 +14,34 @@ interface GamesHQRouteOption {
   name: string;
   icon: string;
   to: string;
+  necessaryCapability: string;
 }
 export const AppMenu = ({ children }: { children: JSX.Element }) => {
+  const { currentUser } = useCurrentUser();
+
   const inspectRoutes = [
-    { name: "Inspect Arena", to: "/inspect/arena", icon: playerSvg },
+    { name: "Inspect Arena", to: "/inspect/arena", icon: playerSvg, necessaryCapability: "THE_ARENA_READ" },
   ];
 
   const databaseRoutes = [
     /* { name: "Players", to: "/players", icon: playerSvg }, */
-    { name: "Weapons", to: "/weapons", icon: sword },
+    { name: "Weapons", to: "/weapons", icon: sword, necessaryCapability: "WEAPONS_READ" },
     /* { name: "Traits", to: "/traits", icon: trait }, */
   ];
 
   const towerRoutes = [
-    { name: "Tower Game", to: "/tower/status", icon: playerSvg },
-    { name: "Enemies", to: "/enemies", icon: skull },
-    { name: "Floors", to: "/floors", icon: floor },
+    { name: "Tower Game", to: "/tower/status", icon: playerSvg, necessaryCapability: "THE_TOWER_READ" },
+    { name: "Enemies", to: "/enemies", icon: skull, necessaryCapability: "ENEMY_READ" },
+    { name: "Floors", to: "/floors", icon: floor, necessaryCapability: "THE_TOWER_READ" },
   ];
 
-  const arenaRoutes = [{ name: "Zones", to: "/zones", icon: zone }];
+  const arenaRoutes = [{ name: "Zones", to: "/zones", icon: zone, necessaryCapability: "ZONE_READ" }];
 
-  const gameDevRoutes = [{ name: "Games", to: "/games", icon: games }];
+  const gameDevRoutes = [{ name: "Games", to: "/games", icon: games, necessaryCapability: "MY_GAME_READ" }];
 
   const generateRouteList = (route: GamesHQRouteOption[]) => {
-    return route.map((route, i) => (
+
+    return route.map((route, i) => ( route.necessaryCapability && currentUser?.capabilities.includes(route.necessaryCapability) && 
       <ul className="pt-4" key={i}>
         <Link to={route.to} className="items-center">
           <li className="flex text-gray-400 hover:text-gray-700 items-center">
@@ -46,6 +52,7 @@ export const AppMenu = ({ children }: { children: JSX.Element }) => {
       </ul>
     ));
   };
+  
   return (
     <div className="flex h-screen bg-white">
       <nav className="w-80 font-medium text-base bg-gray-50 h-full py-4">
@@ -54,34 +61,48 @@ export const AppMenu = ({ children }: { children: JSX.Element }) => {
         </div>
         <div className="px-8 flex-col flex">
           <span className="pt-4" />
-          <span className="uppercase py-1 text-xs text-gray-400 font-semibold">
-            MY GAMES
-          </span>
-
-          {generateRouteList(gameDevRoutes)}
-
-          <span className="uppercase py-1 text-xs text-gray-400 font-semibold mt-12">
-            INSPECT LIVE GAMES
-          </span>
-
-          {generateRouteList(inspectRoutes)}
+          {currentUser?.capabilities.includes('MY_GAME_READ') && (
+            <>
+              <span className="uppercase py-1 text-xs text-gray-400 font-semibold">
+                MY GAMES
+              </span>
+              
+              {generateRouteList(gameDevRoutes)}
+              
+              <span className="uppercase py-1 text-xs text-gray-400 font-semibold mt-12">
+                INSPECT LIVE GAMES
+              </span>
+    
+              {generateRouteList(inspectRoutes)}
+            </>
 
-          <span className="uppercase py-1 text-xs text-gray-400 font-semibold mt-12">
-            GENERAL
-          </span>
+          )}
+          
+          {currentUser?.capabilities.includes('WEAPONS_READ') && (
+            <>
+              <span className="uppercase py-1 text-xs text-gray-400 font-semibold mt-12">
+                GENERAL
+              </span>
 
-          {generateRouteList(databaseRoutes)}
+              {generateRouteList(databaseRoutes)}
+            </>
+          )}
 
           <span className="uppercase py-1 text-xs text-gray-400 font-semibold mt-12">
             THE TOWER
           </span>
 
           {generateRouteList(towerRoutes)}
-          <span className="uppercase py-1 text-xs text-gray-400 font-semibold mt-12">
-            THE ARENA
-          </span>
 
-          {generateRouteList(arenaRoutes)}
+          {currentUser?.capabilities.includes('THE_ARENA_READ') && (
+            <>
+              <span className="uppercase py-1 text-xs text-gray-400 font-semibold mt-12">
+                THE ARENA
+              </span>
+
+              {generateRouteList(arenaRoutes)}
+            </>
+          )}
         </div>
       </nav>
       <div className="w-full min-w-0 px-16 py-8">{children}</div>

Diff for: src/pages/InspectArenaPage.tsx

@@ -19,7 +19,7 @@ const InspectArenaPage = function InspectArenaPage(props: any) {
 
     const arenaPlayers = get(
         arenaGame,
-        "_arena._players",
+        "_arenaPlayers",
         []
     ) as IArenaPlayer[];
 

Diff for: src/types.d.ts

@@ -167,6 +167,7 @@ interface IGame {
   endedAt: string;
   _gameTypeId: number;
   _arena: IArenaGame;
+  _arenaPlayers: [IArenaPlayer];
 }
 
 interface IGameWithTower extends IGame {
@@ -181,7 +182,7 @@ interface IArenaGame {
   currentRingDeactivation: number;
   inactiveZonePenaltyPower: number;
   _gameId: number;
-  _players: [IArenaPlayer];
+
 }
 
 interface IArenaRoundAction {
@@ -280,6 +281,7 @@ interface GamesAPIUSer {
   profilePictureUrl: string;
   role: number;
   isAdmin: boolean;
+  capabilities: string[];
 }
 
 interface GamesAPISession {