- Version 0.10.3

  - Improve FontAwesome icons for goruped actions
  - Add icon to the log for grouped actions

- Version 0.10.2
  - Add FontAwesome
  - Add custom icon support to recipes/common actions
  - Add icons to Common Actions/recipes tab

.devcontainer/devcontainer.json

@@ -38,7 +38,7 @@
   "forwardPorts": [],
 
   // Use 'postCreateCommand' to run commands after the container is created.
-  "postCreateCommand": "./setup-nvm.sh && yarn install && ./install-globals.sh && ./install-copilot-cli.sh && ./setup-shell-config.sh && export $(grep -v '^#' ${DOTENV_CONFIG_PATH} | xargs)"
+  "postCreateCommand": "export $(grep -v '^#' /workspaces/dominion-assistant/.env | xargs) && ./fontawesome-npmrc.sh && ./setup-nvm.sh && yarn install && ./install-globals.sh && ./install-copilot-cli.sh && ./setup-shell-config.sh && export $(grep -v '^#' ${DOTENV_CONFIG_PATH} | xargs)"
 
   // Configure tool-specific properties.
   // "customizations": {},

.env.example

@@ -1 +1,2 @@
-CODACY_PROJECT_TOKEN=your-codacy-project-token
+CODACY_PROJECT_TOKEN=your-codacy-project-token
+FONTAWESOME_KEY=your-fontawesome-key

.github/workflows/deploy-to-s3.yml

@@ -21,6 +21,11 @@ jobs:
         with:
           node-version: '20'
 
+      - name: Set up FontAwesome NPM registry
+        run: ./fontawesome-npmrc.sh
+        env:
+          FONTAWESOME_KEY: ${{ secrets.FONTAWESOME_KEY }}
+
       - name: Install dependencies
         run: yarn install
 
@@ -59,6 +64,11 @@ jobs:
         with:
           node-version: '20'
 
+      - name: Set up FontAwesome NPM registry
+        run: ./fontawesome-npmrc.sh
+        env:
+          FONTAWESOME_KEY: ${{ secrets.FONTAWESOME_KEY }}
+
       - name: Install dependencies
         run: yarn install
 

.gitignore

@@ -1,6 +1,7 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
 /.env
+/.npmrc
 
 # game storage
 /game-storage/

README.md

@@ -106,6 +106,7 @@ A popup should offer to open the application in a browser.
 
 - Copy the .env.example in the project root to .env
 - Fill in the CODACY_PROJECT_TOKEN from https://app.codacy.com/gh/Digital-Defiance/DominionAssistant/settings/coverage
+- Fill in the FONTAWESOME_KEY from https://fontawesome.com/kits/1111eb8cf6/package
 - Save the .env file
 
 4. When prompted, click "Reopen in Container" or use the command palette (F1) and select "Remote-Containers: Reopen in Container".
@@ -200,6 +201,19 @@ Join our community of developers.
 
 ## Changelog
 
+### Thu Nov 07 02:06:00 2024
+
+- Version 0.10.3
+  - Improve FontAwesome icons for goruped actions
+  - Add icon to the log for grouped actions
+
+### Thu Nov 07 00:40:00 2024
+
+- Version 0.10.2
+  - Add FontAwesome
+  - Add custom icon support to recipes/common actions
+  - Add icons to Common Actions/recipes tab
+
 ### Wed Nov 06 23:09:00 2024
 
 - Version 0.10.1

fontawesome-npmrc.sh

@@ -0,0 +1,5 @@
+#!/bin/bash
+
+echo "@fortawesome:registry=https://npm.fontawesome.com/
+@awesome.me:registry=https://npm.fontawesome.com/
+//npm.fontawesome.com/:_authToken=$FONTAWESOME_KEY" > .npmrc

package.json

@@ -19,8 +19,13 @@
   },
   "private": true,
   "dependencies": {
+    "@awesome.me/kit-1111eb8cf6": "^1.0.4",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
+    "@fortawesome/fontawesome-common-types": "^6.6.0",
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/pro-solid-svg-icons": "^6.6.0",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@mui/icons-material": "^6.1.3",
     "@mui/material": "^6.1.3",
     "chart.js": "^4.4.5",

src/components/GameInterface.tsx

@@ -28,7 +28,7 @@ import { IGame } from '@/game/interfaces/game';
 import { deepClone } from '@/game/utils';
 import TurnAdjustmentsSummary from '@/components/TurnAdjustments';
 import FloatingCounter from '@/components/FloatingCounter';
-import { RecipesComponent } from '@/components/Recipes';
+import { RecipesList } from '@/components/RecipeList';
 import ForwardRefBox from './ForwardRefBox';
 
 interface GameInterfaceProps {
@@ -168,7 +168,7 @@ const GameInterface: FC<GameInterfaceProps> = ({ nextTurn, endGame, undoLastActi
           )}
           {tabValue === 1 && <TurnAdjustmentsSummary />}
           {tabValue === 2 && <SupplyCounts />}
-          {tabValue === 3 && <RecipesComponent viewBoxRef={viewBoxRef} />}
+          {tabValue === 3 && <RecipesList viewBoxRef={viewBoxRef} />}
         </ForwardRefBox>
       </Container>
       <FabContainer>

src/components/GameLogEntry.tsx

@@ -28,6 +28,7 @@ import { AdjustmentActions } from '@/game/constants';
 import ColoredPlayerName from '@/components/ColoredPlayerName';
 import { getAdjustedDurationFromCacheByIndex } from '@/game/dominion-lib-time';
 import '@/styles.scss';
+import { Recipes } from './Recipes';
 
 interface GameLogEntryProps {
   logIndex: number;
@@ -186,6 +187,16 @@ const GameLogEntry: FC<GameLogEntryProps> = ({ logIndex, entry, onOpenTurnAdjust
               {relevantPlayer !== undefined && !isNotTriggeredByPlayer && (
                 <ColoredPlayerName player={relevantPlayer} marginDirection="right" />
               )}
+              {entry.action === GameLogAction.GROUPED_ACTION &&
+                entry.actionKey &&
+                Recipes[entry.actionKey] && (
+                  <Box
+                    component="span"
+                    sx={{ fontSize: '16px', display: 'inline-flex', alignItems: 'center', mr: 1 }}
+                  >
+                    {Recipes[entry.actionKey].icon}
+                  </Box>
+                )}
               <Typography variant="body2" component="span">
                 {actionText}
               </Typography>

src/components/RecipeCard.tsx

@@ -5,13 +5,14 @@ import {
   prepareGroupedActionTriggers,
 } from '@/game/dominion-lib-log';
 import { IGroupedAction } from '@/game/interfaces/grouped-action';
-import { Recipes } from '@/game/recipes';
-import { Box, Link } from '@mui/material';
+import { RecipeKey, Recipes } from '@/components/Recipes';
+import { Box, Link, Typography } from '@mui/material';
+import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 import { useGameContext } from '@/components/GameContext';
 import { useAlert } from '@/components/AlertContext';
 
 interface RecipeCardProps {
-  recipeKey: string;
+  recipeKey: RecipeKey;
   recipe: IGroupedAction;
 }
 
@@ -30,7 +31,8 @@ export const RecipeCard: FC<RecipeCardProps> = ({ recipeKey, recipe }) => {
         groupedAction,
         new Date(),
         applyGroupedActionSubAction,
-        prepareGroupedActionTriggers
+        prepareGroupedActionTriggers,
+        recipeKey
       );
       setGameState(newGame);
     } catch (error) {
@@ -43,9 +45,21 @@ export const RecipeCard: FC<RecipeCardProps> = ({ recipeKey, recipe }) => {
   };
 
   return (
-    <Box key={recipeKey}>
-      <Link href="#" onClick={(event) => handleRecipe(event, recipeKey)}>
-        {recipe.name}
+    <Box key={recipeKey} display="flex" alignItems="center" height="28px">
+      <Link
+        href="#"
+        onClick={(event) => handleRecipe(event, recipeKey)}
+        sx={{ display: 'flex', alignItems: 'center' }}
+      >
+        <Box
+          component="span"
+          sx={{ fontSize: '26px', display: 'flex', alignItems: 'center', width: '30px' }}
+        >
+          {recipe.icon ?? <PlayArrowIcon />}
+        </Box>
+        <Typography className="recipe-name" sx={{ ml: 1 }}>
+          {recipe.name}
+        </Typography>
       </Link>
     </Box>
   );

src/components/RecipeList.tsx

@@ -0,0 +1,59 @@
+import React, { CSSProperties, FC, memo, RefObject, useEffect, useState } from 'react';
+import TabTitle from '@/components/TabTitle';
+import { Recipes } from '@/components/Recipes';
+import { FixedSizeList } from 'react-window';
+import { RecipeCard } from '@/components/RecipeCard';
+
+interface RecipesProps {
+  viewBoxRef: RefObject<HTMLDivElement>;
+}
+
+export const RecipesList: FC<RecipesProps> = ({ viewBoxRef }) => {
+  const [listHeight, setListHeight] = useState<number>(
+    viewBoxRef.current?.getBoundingClientRect().height ?? 0
+  );
+  const [listWidth, setListWidth] = useState<number>(
+    viewBoxRef.current?.getBoundingClientRect().width ?? 0
+  );
+  const MemoizedRecipeCard = memo(RecipeCard);
+
+  useEffect(() => {
+    const handleResize = () => {
+      const viewBoxBound = viewBoxRef.current?.getBoundingClientRect();
+      const viewBoxHeight = viewBoxBound?.height ?? 0;
+      const viewBoxWidth = viewBoxBound?.width ?? 0;
+      setListHeight(viewBoxHeight);
+      setListWidth(viewBoxWidth);
+    };
+
+    window.addEventListener('resize', handleResize);
+    handleResize(); // Set initial height
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [viewBoxRef]);
+
+  const recipesArray = Object.entries(Recipes);
+
+  const Row = ({ index, style }: { index: number; style: CSSProperties }) => (
+    <div style={style}>
+      <MemoizedRecipeCard recipeKey={recipesArray[index][0]} recipe={recipesArray[index][1]} />
+    </div>
+  );
+
+  return (
+    <>
+      <TabTitle>Common Actions</TabTitle>
+      <FixedSizeList
+        height={listHeight}
+        width={listWidth}
+        itemCount={recipesArray.length}
+        itemSize={28}
+        style={{ width: '100%' }}
+      >
+        {Row}
+      </FixedSizeList>
+    </>
+  );
+};