feat: implement the compound pattern in pokemon style

Author: code-mattclaffey

src/course/02-lessons/01-Bronze/ConditionalRendering/exercise/exercise.tsx

@@ -9,15 +9,15 @@ interface ITrainerProps {
 // @ts-expect-error
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const PokemonTrainerStatus = (props: ITrainerProps) => {
-  // 1a - 👨🏻💻 add a useState that has false as default. Name the variable [hasGymBadges, setHasGymBadges]
+  // 1a - 💻 add a useState that has false as default. Name the variable [hasGymBadges, setHasGymBadges]
 
-  // 1b - 👨🏻💻 create me a onEarnBadge function which setHasGymBadges to be true
+  // 1b - 💻 create me a onEarnBadge function which setHasGymBadges to be true
 
-  // 1c - 👨🏻💻 create me a onLoseBadges function which setHasGymBadges to be false
+  // 1c - 💻 create me a onLoseBadges function which setHasGymBadges to be false
 
-  // 1d - 👨🏻💻 if hasGymBadges, return a button called "Reset Journey" with the onClick of onLoseBadges
-  // 1e - 👨🏻💻 if hasGymBadges, return some text called "Welcome Gym Leader {props.trainerName}! 🏆"
+  // 1d - 💻 if hasGymBadges, return a button called "Reset Journey" with the onClick of onLoseBadges
+  // 1e - 💻 if hasGymBadges, return some text called "Welcome Gym Leader {props.trainerName}! 🏆"
 
-  // 1f - 👨🏻💻 add onClick function onEarnBadge to the button
+  // 1f - 💻 add onClick function onEarnBadge to the button
   return <Button>🎯 Challenge Gym Leader</Button>;
-};
+};

src/course/02-lessons/01-Bronze/Hooks/exercise/exercise.tsx

@@ -34,7 +34,7 @@ const WILD_POKEMON = [
   { id: 3, name: 'Pikachu', type: 'Electric', captureRate: 0.3 }
 ];
 
-// 1A 👨🏻💻 - We need to refactor this to be called usePokemonCapture
+// 1A 💻 - We need to refactor this to be called usePokemonCapture
 export const PokemonCaptureSystem = ({
   children
 }: IPokemonCaptureProps) => {
@@ -76,10 +76,10 @@ export const PokemonCaptureSystem = ({
   };
 
   const restockPokeballs = (amount: number = 5) => {
-    setPokeballs(prev => prev + amount);
+    setPokeballs((prev) => prev + amount);
   };
 
-  // 1C 👨🏻💻 - Just return the object instead of children
+  // 1C 💻 - Just return the object instead of children
   return children({
     wildPokemon,
     pokeballs,
@@ -96,7 +96,7 @@ export const PokemonCaptureSystem = ({
 // Let's make a component which uses the usePokemonCapture hook and takes an area prop
 
 export const Exercise = () => {
-  // 1E 👨🏻💻 - call the usePokemonCapture hook here
+  // 1E 💻 - call the usePokemonCapture hook here
   return (
     <div className="p-6 bg-green-50 rounded-lg">
       <h2 className="text-2xl font-bold mb-4">
@@ -123,7 +123,10 @@ export const Exercise = () => {
                   Captured: {capturedPokemon.length} Pokemon
                 </p>
               </div>
-              <Button onClick={() => restockPokeballs()} disabled={pokeballs >= 20}>
+              <Button
+                onClick={() => restockPokeballs()}
+                disabled={pokeballs >= 20}
+              >
                 🛍️ Buy Pokeballs (+5)
               </Button>
             </div>

src/course/02-lessons/01-Bronze/PropsCombination/exercise/exercise.tsx

@@ -2,7 +2,7 @@ import classnames from 'classnames';
 
 /*
 
-  1a👨🏻💻 group the following together:
+  1a💻 group the following together:
 
   * pokemon - pokemonName, pokemonType, pokemonHp, pokemonLevel
   * attack - attackName, attackDamage, attackDescription
@@ -31,7 +31,7 @@ interface IPokemonCardProps {
 }
 
 /*
-  1b👨🏻💻 Update the props to match the new grouped types defined above.
+  1b💻 Update the props to match the new grouped types defined above.
 */
 export const Exercise = ({
   pokemonName,
@@ -56,7 +56,7 @@ export const Exercise = ({
     2a 🤔 Could we destructure the image to be [small, medium, large]?
   */
   /*
-    1c👨🏻💻 Update the props in the jsx to use the grouped structure
+    1c💻 Update the props in the jsx to use the grouped structure
   */
   return (
     <article

src/course/02-lessons/01-Bronze/Slots/exercise/exercise.tsx

@@ -1,45 +1,47 @@
 import classNames from 'classnames';
 
-// 👨🏻💻 1A - This component uses individual props for each map location. Can we refactor it to use slots instead?
+// 💻 1A - This component uses individual props for each map location. Can we refactor it to use slots instead?
 interface IPokemonMap {
   className?: string;
-  
+
   // North area props
   showNorthArea?: boolean;
   northAreaName?: string;
   northAreaIcon?: string;
   northAreaColor?: string;
-  
-  // South area props  
+
+  // South area props
   showSouthArea?: boolean;
   southAreaName?: string;
   southAreaIcon?: string;
   southAreaColor?: string;
-  
+
   // East area props
   showEastArea?: boolean;
   eastAreaName?: string;
   eastAreaIcon?: string;
   eastAreaColor?: string;
-  
+
   // West area props
   showWestArea?: boolean;
   westAreaName?: string;
   westAreaIcon?: string;
   westAreaColor?: string;
-  
+
   // Center area props
   showCenterArea?: boolean;
   centerAreaName?: string;
   centerAreaIcon?: string;
   centerAreaColor?: string;
 }
 
-const mapContainerClasses = 'grid grid-cols-3 grid-rows-3 gap-2 w-80 h-80 p-4 bg-green-100 rounded-lg border-2 border-green-300';
-const areaClasses = 'flex flex-col items-center justify-center p-3 rounded-lg border-2 text-sm font-bold text-white shadow-md';
+const mapContainerClasses =
+  'grid grid-cols-3 grid-rows-3 gap-2 w-80 h-80 p-4 bg-green-100 rounded-lg border-2 border-green-300';
+const areaClasses =
+  'flex flex-col items-center justify-center p-3 rounded-lg border-2 text-sm font-bold text-white shadow-md';
 
-// 👨🏻💻 1B - Look at all these props and conditional logic! This is hard to maintain.
-// 👨🏻💻 1C - Refactor this to use northSlot, southSlot, eastSlot, westSlot, centerSlot instead
+// 💻 1B - Look at all these props and conditional logic! This is hard to maintain.
+// 💻 1C - Refactor this to use northSlot, southSlot, eastSlot, westSlot, centerSlot instead
 export const PokemonMap = ({
   className,
   showNorthArea,
@@ -67,100 +69,133 @@ export const PokemonMap = ({
     <div className={classNames(mapContainerClasses, className)}>
       {/* Empty top-left */}
       <div></div>
-      
+
       {/* North area */}
-      <div className={classNames(areaClasses, northAreaColor || 'bg-gray-400')}>
+      <div
+        className={classNames(
+          areaClasses,
+          northAreaColor || 'bg-gray-400'
+        )}
+      >
         {showNorthArea && (
           <>
             <span className="text-2xl mb-1">{northAreaIcon}</span>
-            <span className="text-xs text-center">{northAreaName}</span>
+            <span className="text-xs text-center">
+              {northAreaName}
+            </span>
           </>
         )}
       </div>
-      
+
       {/* Empty top-right */}
       <div></div>
-      
+
       {/* West area */}
-      <div className={classNames(areaClasses, westAreaColor || 'bg-gray-400')}>
+      <div
+        className={classNames(
+          areaClasses,
+          westAreaColor || 'bg-gray-400'
+        )}
+      >
         {showWestArea && (
           <>
             <span className="text-2xl mb-1">{westAreaIcon}</span>
-            <span className="text-xs text-center">{westAreaName}</span>
+            <span className="text-xs text-center">
+              {westAreaName}
+            </span>
           </>
         )}
       </div>
-      
+
       {/* Center area */}
-      <div className={classNames(areaClasses, centerAreaColor || 'bg-gray-400')}>
+      <div
+        className={classNames(
+          areaClasses,
+          centerAreaColor || 'bg-gray-400'
+        )}
+      >
         {showCenterArea && (
           <>
             <span className="text-2xl mb-1">{centerAreaIcon}</span>
-            <span className="text-xs text-center">{centerAreaName}</span>
+            <span className="text-xs text-center">
+              {centerAreaName}
+            </span>
           </>
         )}
       </div>
-      
+
       {/* East area */}
-      <div className={classNames(areaClasses, eastAreaColor || 'bg-gray-400')}>
+      <div
+        className={classNames(
+          areaClasses,
+          eastAreaColor || 'bg-gray-400'
+        )}
+      >
         {showEastArea && (
           <>
             <span className="text-2xl mb-1">{eastAreaIcon}</span>
-            <span className="text-xs text-center">{eastAreaName}</span>
+            <span className="text-xs text-center">
+              {eastAreaName}
+            </span>
           </>
         )}
       </div>
-      
+
       {/* Empty bottom-left */}
       <div></div>
-      
+
       {/* South area */}
-      <div className={classNames(areaClasses, southAreaColor || 'bg-gray-400')}>
+      <div
+        className={classNames(
+          areaClasses,
+          southAreaColor || 'bg-gray-400'
+        )}
+      >
         {showSouthArea && (
           <>
             <span className="text-2xl mb-1">{southAreaIcon}</span>
-            <span className="text-xs text-center">{southAreaName}</span>
+            <span className="text-xs text-center">
+              {southAreaName}
+            </span>
           </>
         )}
       </div>
-      
+
       {/* Empty bottom-right */}
       <div></div>
     </div>
   );
 };
 
-// 👨🏻💻 1D - Look at how verbose these prop combinations are!
-// 👨🏻💻 1E - Refactor these to use slots: northSlot={<LocationCard />}, centerSlot={<TownCard />}, etc.
+// 💻 1D - Look at how verbose these prop combinations are!
+// 💻 1E - Refactor these to use slots: northSlot={<LocationCard />}, centerSlot={<TownCard />}, etc.
 export const Exercise = () => (
   <div className="p-6 bg-blue-50 rounded-lg border-2 border-blue-200">
-    <h2 className="text-2xl font-bold mb-4 text-blue-800">🗺️ Pokemon World Map</h2>
-    
+    <h2 className="text-2xl font-bold mb-4 text-blue-800">
+      🗺️ Pokemon World Map
+    </h2>
+
     <PokemonMap
       showNorthArea={true}
       northAreaName="Viridian Forest"
       northAreaIcon="🌲"
       northAreaColor="bg-green-600"
-      
       showSouthArea={true}
       southAreaName="Route 1"
       southAreaIcon="🛤️"
       southAreaColor="bg-yellow-600"
-      
       showEastArea={true}
       eastAreaName="Power Plant"
       eastAreaIcon="⚡"
       eastAreaColor="bg-yellow-500"
-      
       showWestArea={true}
       westAreaName="Mt. Silver"
       westAreaIcon="🏔️"
       westAreaColor="bg-gray-600"
-      
       showCenterArea={true}
       centerAreaName="Pallet Town"
       centerAreaIcon="🏠"
       centerAreaColor="bg-blue-600"
     />
   </div>
-);
+);