Refactor the commanders list

[petrvecera]

https://coh2stats.com/commanders/wermacht

Right now we have a list like this:

The goal would be to have a list similar to the list as shown here https://coh2index.com/army/west_german.html (bottom of page)
but still maintain the description ...

Example:

Tasks:

• Swap the icon for the big one (it's in the assets, _large ... )
• Create a new component for the mini icon of bulletins (small icon which is suppose to be shown), icon should have tooltip with the name of bulletin
• Refactor the element in the list

[poly4concept]

Hi @petrvecera I would love to work on this also for the hactoberfest, pls do assign it for me
by the way, I can't seem to get hold of the assets folder, pls point it to me

[petrvecera]

There is several helper function to get the information needed. These functions are in files in folder packages/web/src/coh/
For example: packages/web/src/coh/commanders.ts and packages/web/src/coh/helpers.ts

The assets are in folder packages/web/public/resources/exportedIcons but there is lot of files - they are exported from the game. So we need to be smart about accessing them - that's why we have the helper functions in folder coh.

Some additional things which can help :

// Returns the full commander icon, more info in file packages/web/src/pages/commanders/commanderDetails.tsx
// This is the icon we want to show, probably we could scale it little bit down so it's not so big
getCommanderIconPath(commanderData.iconlarge)

I would definitely look into file packages/web/src/pages/commanders/commanderDetails.tsx because it has all the things we would like to use on the list. So you can found out how the things were created.

Each commander source data are saved in file: packages/web/src/coh/data/cu2021/commanderData.json
Example:

"186413": {
    "serverID": "186413",
    "commanderName": "Airborne Company",
    "description": "Focus your strategy around Allied air superiority. Deploy elite infantry units from the air and support them with weapon drops from cargo planes. If the enemy deploys heavy armor, call in a P-47 Thunderbolt to strafe the target.",
    "races": ["usf"],
    "iconSmall": "Icons_commander_portrait_us_forces_commander_01",
    "iconlarge": "Icons_commander_portrait_us_forces_commander_01_large",
    "abilities": [
      {
        "name": "Paratroopers",
        "description": "Paratroopers are elite infantry that are often deployed behind enemy lines to tackle key objectives and sow confusion.",
        "icon": "Icons_units_unit_aef_paratroopers"
      },
      {
        "name": "Paradrop M1 57mm Anti-Tank Gun",
        "description": "Paradrop in a M1 57mm Anti-Tank Gun to the battlefield that can be manned by allied infantry. This weapon is effective against armored vehicles.",
        "icon": "Icons_vehicles_vehicle_aef_57mm_paradrop_at_gun"
      },
      {
        "name": "Paradrop .50cal M2HB Heavy Machine Gun",
        "description": "Paradrop in a .50cal M2HB Heavy Machine Gun to the battlefield that can be manned by allied infantry. This weapon is effective against massed infantry when setup in a defensive position.",
        "icon": "Icons_commander_cmdr_aef_air_dropped_browning"
      },
      {
        "name": "P-47 Rocket Strike",
        "description": "A P-47 Thunderbolt will attack vehicles in the targeted area with its 5\" High Velocity Aircraft Rockets.",
        "icon": "Icons_commander_cmdr_aef_p47_rocket_strike"
      },
      {
        "name": "Pathfinders",
        "description": "Pathfinders can be deployed to the battlefield. Pathfinders are scout infantry who are powerful at long range and make it safer for troops to paradrop.",
        "icon": "Icons_units_unit_aef_pathfinders"
      }
    ]
  },

Again in the commander detail, here is example how the abilities are shown. They are as a array on each commander so we could add them directly to list component:

            <List
              itemLayout="horizontal"
              dataSource={commanderData.abilities}
              renderItem={(item: Record<string, any>) => (
                <List.Item>
                  <List.Item.Meta
                    avatar={
                      <div>
                        <Avatar
                          alt={item.name}
                          src={getExportedIconPath(item.icon)}
                          shape="square"
                          size={64}
                        />
                        <Badge count={0} overflowCount={999} showZero offset={[0, -32]}>
                          <></>
                        </Badge>
                      </div>
                    }
                    title={item.name}
                    description={item.description}
                  />
                </List.Item>
              )}
            />

[petrvecera]

Hi @poly4concept I wanted to check if you would have time to look into this or I should give it up for grabs for someone else. Thank you

[petrvecera]

Fixed by #115