Merge pull request #69 from king8fisher/add-icons-to-statistics

README.md

@@ -37,7 +37,7 @@ SiegeEngineers combine/copy those:
 
 ## Assets Sources
 
-* `\Steam\steamapps\common\AoE2DE\widgetui\textures\ingame\staticons\`
+- `\Steam\steamapps\common\AoE2DE\widgetui\textures\ingame\staticons\`
 
 ## Intricacies
 

src/components/atoms/StatisticsBlock/index.tsx

@@ -0,0 +1,56 @@
+import { memo } from "react";
+import { IStatisticsUnitData } from "../../../data/model";
+import { getStatisticsImgUrl, roundTo } from "../../../helpers/tools";
+import { ContentWithTooltip } from "../ContentWithTooltip";
+import { FlexWrap, SingleImg, SingleSpan } from "./styles";
+
+const SingleStatisticsPresenter = memo(
+  ({ icon, amount, tooltip }: { icon: string; amount: number | string; tooltip: string }) => (
+    <ContentWithTooltip
+      tooltip={
+        <span>
+          <strong>{tooltip}: </strong>
+          {amount}
+        </span>
+      }
+    >
+      <SingleSpan className={amount == 0 ? "opacity-30" : ""}>
+        <SingleImg src={getStatisticsImgUrl(icon)} />
+        {amount}
+      </SingleSpan>
+    </ContentWithTooltip>
+  )
+);
+
+export const StatisticsBlock = memo(({ unitData }: { unitData: IStatisticsUnitData }) => {
+  return (
+    <FlexWrap>
+      <SingleStatisticsPresenter icon="hp" tooltip="Hit Points" amount={unitData.unitStatistics.HP} />
+      <SingleStatisticsPresenter icon="damage" tooltip="Attack" amount={unitData.unitStatistics.Attack} />
+      <SingleStatisticsPresenter icon="armor" tooltip="Pierce Armor" amount={unitData.unitStatistics.PierceArmor} />
+      <SingleStatisticsPresenter icon="armor" tooltip="Melee Armor" amount={unitData.unitStatistics.MeleeArmor} />
+      <SingleStatisticsPresenter
+        icon="accuracy"
+        tooltip="Accuracy Percent"
+        amount={`${unitData.unitStatistics.AccuracyPercent}%`}
+      />
+      <SingleStatisticsPresenter
+        icon="delay"
+        tooltip="Attack Delay Seconds"
+        amount={roundTo(unitData.unitStatistics.AttackDelaySeconds, 2)}
+      />
+      <SingleStatisticsPresenter
+        icon="garrison"
+        tooltip="GarrisonCapacity"
+        amount={unitData.unitStatistics.GarrisonCapacity}
+      />
+      <SingleStatisticsPresenter
+        icon="line-of-sight"
+        tooltip="Line Of Sight"
+        amount={unitData.unitStatistics.LineOfSight}
+      />
+      <SingleStatisticsPresenter icon="range" tooltip="Range" amount={unitData.unitStatistics.Range} />
+      <SingleStatisticsPresenter icon="speed" tooltip="Speed" amount={unitData.unitStatistics.Speed} />
+    </FlexWrap>
+  );
+});

src/components/atoms/StatisticsBlock/styles.ts

@@ -0,0 +1,25 @@
+import { styled } from "styled-components";
+
+export const FlexWrap = styled.div`
+  display: flex;
+  flex-grow: 1;
+  flex-wrap: wrap;
+  flex-direction: row;
+  gap: 0.25rem /* 4px */;
+`;
+
+export const SingleSpan = styled.span`
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  gap: 0;
+  align-items: center;
+  font-size: 0.875rem /* 14px */;
+  line-height: 1.25rem /* 20px */;
+  cursor: default;
+`;
+
+export const SingleImg = styled.img`
+  width: 1.25rem /* 20px */;
+  height: 1.25rem /* 20px */;
+`;

src/components/molecules/UnitLine/index.tsx

@@ -3,6 +3,7 @@ import { Cost, IUnitData } from "../../../data/model";
 import { getUnitImgUrl } from "../../../helpers/tools";
 import { UnitLineDiv } from "../../../styles";
 import { ContentWithTooltip } from "../../atoms/ContentWithTooltip";
+import { StatisticsBlock } from "../../atoms/StatisticsBlock";
 import { CostPresentation } from "../../atoms/UnitCost";
 
 interface IUnitLineProps {
@@ -16,7 +17,7 @@ export const UnitLine = ({ unit, cost }: IUnitLineProps) => {
       <ContentWithTooltip
         tooltip={
           <>
-            <span className="font-bold leading-6">{unit.extractedUnitData.name}</span>
+            <span className="font-bold leading-6">{unit.statisticsUnitData.name}</span>
             <span dangerouslySetInnerHTML={{ __html: unit.help.about }} />
             <span className="italic">
               <strong>Upgrades: </strong>
@@ -28,14 +29,14 @@ export const UnitLine = ({ unit, cost }: IUnitLineProps) => {
         <UnitLineDiv>
           <span className="flex flex-col gap-px items-center">
             <img src={getUnitImgUrl(unit.id)} className="w-6 h-6 flex-shrink-0 mt-[2px] rounded-sm ml-[4px]" />
-            <span className="text-xs">hp {unit.extractedUnitData.hp}</span>
-            <span className="text-xs">a {unit.extractedUnitData.attack}</span>
-            <span className="text-xs">pa {unit.extractedUnitData.pierceArmor}</span>
           </span>
-          <span className="mx-[4px] text-md break-words">{unit.extractedUnitData.name}</span>
+          <span className="mx-[4px] text-md break-words">{unit.statisticsUnitData.name}</span>
           <CostPresentation cost={cost} />
         </UnitLineDiv>
       </ContentWithTooltip>
+      <UnitLineDiv>
+        <StatisticsBlock unitData={unit.statisticsUnitData} />
+      </UnitLineDiv>
 
       <div className="flex">
         <div className="text-sm leading-1 flex flex-col gap-0 px-2 mt-1">

src/data/model.ts

@@ -1,5 +1,5 @@
 import dataSrc from "./data.json";
-import { Data } from "./data_json_types";
+import { Data, Unit } from "./data_json_types";
 import stringsSrc from "./strings.json";
 import { Strings } from "./strings_json.types";
 
@@ -18,23 +18,18 @@ export type armourData = {
   Class: number;
 };
 
-interface IExtractedUnitData {
+export interface IStatisticsUnitData {
   name: string;
-  hp: number;
-  attack: number;
-  pierceArmor: number;
+  unitStatistics: Unit;
 }
 
-export const extractUnitDataByID = (unitId: number): IExtractedUnitData => {
+export const extractUnitDataByID = (unitId: number): IStatisticsUnitData => {
   // data.data.units[561].LanguageNameId // 5458
   // strings[5458] // "Elite Mangudai"
   const d = data.data.units[unitId.toString()];
-
   return {
     name: strings[d.LanguageNameId],
-    hp: d.HP,
-    attack: d.Attack,
-    pierceArmor: d.PierceArmor,
+    unitStatistics: d,
   };
 };
 
@@ -157,7 +152,7 @@ export interface IUnitHelp {
 export interface IUnitData {
   id: number;
   /** Localized name of the unit */
-  extractedUnitData: IExtractedUnitData;
+  statisticsUnitData: IStatisticsUnitData;
   unitType: UnitType;
   help: IUnitHelp;
 }
@@ -172,7 +167,7 @@ export const allUnits = (civKey: string): IUnitData[] => {
   data.techtrees[civKey].units.forEach((id: number) => {
     entries.push({
       id: id,
-      extractedUnitData: extractUnitDataByID(id),
+      statisticsUnitData: extractUnitDataByID(id),
       unitType: UnitType.RegularUnit,
       help: unitHelpByID(id),
     });
@@ -185,7 +180,7 @@ export const imperialAgeUniqueUnit = (civKey: string): IUnitData => {
   const id = data.techtrees[civKey].unique.imperialAgeUniqueUnit as number;
   return {
     id: id,
-    extractedUnitData: extractUnitDataByID(id),
+    statisticsUnitData: extractUnitDataByID(id),
     unitType: UnitType.ImperialAgeUniqueUnit,
     help: unitHelpByID(id),
   };
@@ -195,7 +190,7 @@ export const castleAgeUniqueUnit = (civKey: string): IUnitData => {
   const id = data.techtrees[civKey].unique.castleAgeUniqueUnit as number;
   return {
     id: id,
-    extractedUnitData: extractUnitDataByID(id),
+    statisticsUnitData: extractUnitDataByID(id),
     unitType: UnitType.CastleAgeUniqueUnit,
     help: unitHelpByID(id),
   };
@@ -240,7 +235,7 @@ export const searchUnits = (like: string): IUnitCivData[] => {
   // TODO: Turn this into fuzzy search
   return matchUnits(
     getAllCivs(),
-    (u) => u.extractedUnitData.name.toLowerCase().indexOf(like) >= 0 || u.id.toString() == like
+    (u) => u.statisticsUnitData.name.toLowerCase().indexOf(like) >= 0 || u.id.toString() == like
   );
 };
 

src/helpers/tools.ts

@@ -11,8 +11,14 @@ export const getStyleForUnit = (unit: IUnitData) => {
   }
 };
 
+export const roundTo = (num: number, places: number) => {
+  return +(Math.round(parseFloat(num.toString() + "e+" + places)) + "e-" + places);
+};
+
 export const getResImgUrl = (type: string) => `r/${type}.png`;
 // export const getCivImgUrl = (civKey: string) => `https://aoe2techtree.net/img/Civs/${civKey.toLowerCase()}.png`;
 export const getCivImgUrl = (civKey: string) => `c/${civKey}.png`;
 // export const getUnitImgUrl = (unitId: number) => `https://aoe2techtree.net/img/Units/${unitId}.png`;
 export const getUnitImgUrl = (unitId: number) => `u/a/${unitId}.png`;
+
+export const getStatisticsImgUrl = (type: string) => `s/${type}.png`;

src/pages/Home/index.tsx

@@ -1,12 +1,12 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
+import SearchInput from "../../components/atoms/SearchInput";
 import { ButtonGroup, IFilterStats } from "../../components/molecules/ButtonGroup";
 import { CivView } from "../../components/molecules/CivView";
 import GenericUnitsView from "../../components/molecules/GenericUnitsView";
 import { ICivData, IGroupByUnitData, IUnitCivData, groupByUnitType, searchCivs, searchUnits } from "../../data/model";
 import { DataFilter } from "../../helpers/constants";
-import { Container } from "../../styles";
-import SearchInput from "../../components/atoms/SearchInput";
 import { useDebounce } from "../../helpers/debouncers";
+import { Container } from "../../styles";
 
 export interface ISearchResult {
   grouped: IGroupByUnitData[];
@@ -25,6 +25,8 @@ const Home = () => {
   }, []);
 
   const search = useCallback((nextSearchTerm: string) => {
+    nextSearchTerm = nextSearchTerm.trim();
+    if (nextSearchTerm.length < 2) nextSearchTerm = "";
     setLoading(true);
 
     const units = searchUnits(nextSearchTerm);

src/styles.ts

@@ -72,7 +72,6 @@ export const CardWrap = styled.div`
   flex-direction: column;
   border-radius: 0.375rem;
   width: 100%;
-  width: 100%;
   @media (min-width: 500px) {
     width: 50%;
   }