Giter Club home page Giter Club logo

Comments (4)

poly4concept avatar poly4concept commented on August 30, 2024

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

from coh2stats.

petrvecera avatar petrvecera commented on August 30, 2024

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>
              )}
            />

from coh2stats.

petrvecera avatar petrvecera commented on August 30, 2024

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

from coh2stats.

petrvecera avatar petrvecera commented on August 30, 2024

Fixed by #115

from coh2stats.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.