style fixes

.eslintrc.js

@@ -59,5 +59,7 @@ module.exports = {
     'promise/catch-or-return': 'off',
     'no-unused-vars': 'off',
     '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+    'react/destructuring-assignment': 'off',
+    'react/jsx-props-no-spreading': 'off',
   },
 };

src/consts/Balls.ts

@@ -38,3 +38,44 @@ export const Balls = [
   'Gigaton Ball',
   'Origin Ball',
 ];
+
+export enum Ball {
+  INVALID,
+  Master,
+  Ultra,
+  Great,
+  Poke,
+  Safari,
+  Net,
+  Dive,
+  Nest,
+  Repeat,
+  Timer,
+  Luxury,
+  Premier,
+  Dusk,
+  Heal,
+  Quick,
+  Cherish,
+  Fast,
+  Level,
+  Lure,
+  Heavy,
+  Love,
+  Friend,
+  Moon,
+  Sport,
+  Dream,
+  Beast,
+  Strange,
+  PokeHisui,
+  GreatHisui,
+  UltraHisui,
+  Feather,
+  Wing,
+  Jet,
+  HeavyHisui,
+  Leaden,
+  Gigaton,
+  Origin,
+}

src/renderer/app/Home.tsx

@@ -273,12 +273,7 @@ const Home = () => {
         PaperProps={{ sx: { height: 400 } }}
       >
         {selectedMon && (
-          <PokemonDisplay
-            mon={selectedMon}
-            updateMon={() => {}}
-            tab={tab}
-            setTab={setTab}
-          />
+          <PokemonDisplay mon={selectedMon} tab={tab} setTab={setTab} />
         )}
       </Dialog>
       <Dialog

src/renderer/components/DynamaxLevel.tsx

@@ -0,0 +1,36 @@
+import _ from 'lodash';
+
+interface DynamaxLevelProps {
+  level: number;
+}
+
+const dynamaxRowStyle = { display: 'flex', flexDirection: 'row' as 'row' };
+const dynamaxLevelStyle = {
+  height: 20,
+  width: 8,
+  marginRight: 4,
+};
+
+function dynamaxLevelColor(index: number): string {
+  const greenHex = (40 + index * 20)?.toString(16).padStart(2, '0');
+  return `#FF${greenHex}00`;
+}
+
+const DynamaxLevel = (props: DynamaxLevelProps) => {
+  const { level } = props;
+  return (
+    <div style={dynamaxRowStyle}>
+      {_.range(10).map((index: number) => (
+        <div
+          key={`dynamax_meter_${index}`}
+          style={{
+            backgroundColor: index < level ? dynamaxLevelColor(index) : 'grey',
+            ...dynamaxLevelStyle,
+          }}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default DynamaxLevel;

src/renderer/components/Markings.tsx

@@ -0,0 +1,76 @@
+import { CSSProperties } from 'react';
+import { marking } from 'types/types';
+
+interface MarkingsProps {
+  markings:
+    | [marking, marking, marking, marking, marking, marking]
+    | [marking, marking, marking, marking];
+}
+
+const markingsContainerStyle = {
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'center',
+  padding: 5,
+  backgroundColor: '#666',
+  marginTop: 10,
+  borderRadius: 5,
+} as CSSProperties;
+
+const getMarkingColor = (value: marking) => {
+  return ['grey', 'blue', 'red'][value];
+};
+
+const Markings = (props: MarkingsProps) => {
+  const { markings } = props;
+  return (
+    <div style={markingsContainerStyle}>
+      <span
+        className="No-Select"
+        style={{ color: getMarkingColor(markings[0]) }}
+      >
+        ●
+      </span>
+      <span
+        className="No-Select"
+        style={{ color: getMarkingColor(markings[1]) }}
+      >
+        ■
+      </span>
+      <span
+        className="No-Select"
+        style={{ color: getMarkingColor(markings[2]) }}
+      >
+        ▲
+      </span>
+      <span
+        className="No-Select"
+        style={{ color: getMarkingColor(markings[3]) }}
+      >
+        ♥
+      </span>
+      {markings[4] !== undefined ? (
+        <span
+          className="No-Select"
+          style={{ color: getMarkingColor(markings[4]) }}
+        >
+          ★
+        </span>
+      ) : (
+        <div />
+      )}
+      {markings[5] !== undefined ? (
+        <span
+          className="No-Select"
+          style={{ color: getMarkingColor(markings[5]) }}
+        >
+          ◆
+        </span>
+      ) : (
+        <div />
+      )}
+    </div>
+  );
+};
+
+export default Markings;

src/renderer/components/SheenStars.tsx

@@ -0,0 +1,103 @@
+import _ from 'lodash';
+import Sheen from 'renderer/images/icons/Sheen.gif';
+import { COLOPKM, PK3, PKM, XDPKM } from 'types/PKMTypes';
+import { Styles } from 'types/types';
+
+const styles = {
+  container: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    height: 40,
+  },
+  starRow: {
+    backgroundColor: '#666',
+    borderRadius: 5,
+    display: 'flex',
+    alignItems: 'center',
+    marginLeft: 10,
+    marginRight: 10,
+  },
+  star: {
+    height: 30,
+    objectFit: 'contain',
+  },
+} as Styles;
+
+interface SheenStarsProps {
+  mon: PKM;
+}
+
+const getSheenStars = (mon: PKM) => {
+  if (!mon.contest) {
+    return 0;
+  }
+  if (mon instanceof PK3 || mon instanceof COLOPKM || mon instanceof XDPKM) {
+    return mon.contest.sheen === 255
+      ? 10
+      : Math.floor(mon.contest.sheen / 29) + 1;
+  }
+  if (mon.contest.sheen < 22) {
+    return 0;
+  }
+  if (mon.contest.sheen < 43) {
+    return 1;
+  }
+  if (mon.contest.sheen < 64) {
+    return 2;
+  }
+  if (mon.contest.sheen < 86) {
+    return 3;
+  }
+  if (mon.contest.sheen < 107) {
+    return 4;
+  }
+  if (mon.contest.sheen < 128) {
+    return 5;
+  }
+  if (mon.contest.sheen < 150) {
+    return 6;
+  }
+  if (mon.contest.sheen < 171) {
+    return 7;
+  }
+  if (mon.contest.sheen < 192) {
+    return 8;
+  }
+  if (mon.contest.sheen < 214) {
+    return 9;
+  }
+  if (mon.contest.sheen < 235) {
+    return 10;
+  }
+  if (mon.contest.sheen < 255) {
+    return 11;
+  }
+  return 12;
+};
+
+const SheenStars = (props: SheenStarsProps) => {
+  const { mon } = props;
+
+  return (
+    <div style={styles.container}>
+      <p>Sheen:</p>
+      <div
+        style={{
+          ...styles.starRow,
+          width:
+            mon instanceof PK3 || mon instanceof COLOPKM || mon instanceof XDPKM
+              ? 300
+              : 360,
+        }}
+      >
+        {_.range(getSheenStars(mon)).map((level: number) => (
+          <img alt={`sheen star ${level}`} src={Sheen} style={styles.star} />
+        ))}
+      </div>
+      ({mon.contest?.sheen ?? '--'})
+    </div>
+  );
+};
+
+export default SheenStars;

src/renderer/components/ShinyLeaves.tsx

@@ -0,0 +1,76 @@
+import LeafCrown from '../images/icons/LeafCrown.png';
+import ShinyLeaf from '../images/icons/ShinyLeaf.png';
+
+const styles = {
+  crownIcon: {
+    height: 20,
+    imageRendering: 'pixelated' as 'pixelated',
+    filter: 'drop-shadow(1px 1px grey)',
+  },
+  leafIconFull: {
+    marginRight: -7,
+    height: 20,
+    width: 20,
+    imageRendering: 'pixelated' as 'pixelated',
+    filter: 'drop-shadow(1px 1px grey)',
+  },
+  leafIconEmpty: {
+    marginRight: -7,
+    height: 20,
+    width: 20,
+    imageRendering: 'pixelated' as 'pixelated',
+    filter: 'grayscale(100%) drop-shadow(1px 1px grey)',
+    opacity: 0.8,
+  },
+};
+
+interface ShinyLeafIconProps {
+  full: boolean;
+  index: number;
+}
+
+const ShinyLeafIcon = (props: ShinyLeafIconProps) => {
+  const { full, index } = props;
+  return (
+    <img
+      alt={`shiny leaf ${index + 1} (${full ? 'full' : 'empty'})`}
+      draggable={false}
+      src={ShinyLeaf}
+      style={{
+        ...(full ? styles.leafIconFull : styles.leafIconEmpty),
+        zIndex: index + 1,
+      }}
+    />
+  );
+};
+
+interface ShinyLeavesProps {
+  first: boolean;
+  second: boolean;
+  third: boolean;
+  fourth: boolean;
+  fifth: boolean;
+  crown: boolean;
+}
+
+const ShinyLeaves = (props: ShinyLeavesProps) => {
+  const { first, second, third, fourth, fifth, crown } = props;
+  return crown ? (
+    <img
+      alt="shiny_leaf_crown"
+      draggable={false}
+      src={LeafCrown}
+      style={styles.crownIcon}
+    />
+  ) : (
+    <div style={{ display: 'flex', flexDirection: 'row' }}>
+      <ShinyLeafIcon full={first} index={0} />
+      <ShinyLeafIcon full={second} index={1} />
+      <ShinyLeafIcon full={third} index={2} />
+      <ShinyLeafIcon full={fourth} index={3} />
+      <ShinyLeafIcon full={fifth} index={4} />
+    </div>
+  );
+};
+
+export default ShinyLeaves;

src/renderer/components/TypeIcon.tsx

@@ -0,0 +1,23 @@
+import { Types } from 'consts';
+import { Type } from 'types/types';
+
+interface TypeIconProps {
+  type?: Type;
+  typeIndex?: number;
+}
+
+const typeIconStyle = { height: 24, width: 24, marginRight: 5 };
+
+const TypeIcon = (props: TypeIconProps) => {
+  const type = props.type ?? Types[props.typeIndex ?? 0];
+  return (
+    <img
+      draggable={false}
+      alt={`${type} type`}
+      style={typeIconStyle}
+      src={`https://raw.githubusercontent.com/msikma/pokesprite/master/misc/types/gen8/${type.toLocaleLowerCase()}.png`}
+    />
+  );
+};
+
+export default TypeIcon;