components#PokeInfo TypeScript Examples

The following examples show how to use components#PokeInfo. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Pokestats.tsx    From nuzlocke with BSD 3-Clause "New" or "Revised" License 4 votes vote down vote up 
function Pokestats(): JSX.Element {
  const { t } = useTranslation('stats');
  const darkMode = useStore(useCallback((state) => state.darkMode, []));
  const teamPokemon = useStore(selectTeam);
  const faintedPokemon = useStore(selectFainted);
  const caughtPokemon = useStore(selectCaught);
  const failedPokemon = useStore(selectFailed);

  const panes = [
    {
      menuItem: (
        <Menu.Item key="overview">
          <SummarySVG className={styles.team} />
          {t('summary')}
        </Menu.Item>
      ),
      render: () => (
        <Tab.Pane>
          <Summary />
        </Tab.Pane>
      ),
    },
    {
      menuItem: (
        <Menu.Item key="Team">
          <TeamSVG className={styles.team} />
          {t('Team')}
          <Label>{teamPokemon?.length || 0}</Label>
        </Menu.Item>
      ),
      render: () => (
        <Tab.Pane attached={false} className={`${styles.box} ${styles.team}`}>
          {teamPokemon?.length > 0 ? (
            teamPokemon?.map((enc, i) => {
              const foundPokemon = POKEMAP.get(enc.pokemon);
              return (
                <div className={styles.member} key={`team-${enc.id}-${Number(i) + 1}`}>
                  <Popup
                    key={`team-${enc.id}-${i + 1}`}
                    inverted={darkMode}
                    on="click"
                    pinned
                    position="top center"
                    trigger={
                      <div className={styles.pokeball} data-testid={`team-${enc.id}`}>
                        <div className={styles.image}>
                          <PkmImage name={foundPokemon?.text} shiny={enc?.details?.shiny} />
                        </div>
                        <div className={styles.center} />
                      </div>
                    }
                  >
                    <PokeInfo encounter={enc} pokemon={foundPokemon} />
                  </Popup>
                  <div className={styles.memberText}>
                    <span>{enc.nickname || foundPokemon?.text}</span>
                    {!!enc?.details?.level && <span>Lv. {enc.details.level}</span>}
                  </div>
                  <div className={styles.lineOne} />
                  <div className={styles.lineTwo} />
                  <div className={styles.details}>
                    <Detail encounter={enc} />
                  </div>
                </div>
              );
            })
          ) : (
            <Tip missing={t('Team')} />
          )}
        </Tab.Pane>
      ),
    },
    {
      menuItem: (
        <Menu.Item key="Caught">
          <CaughtSVG className={styles.team} />
          {t('Caught')}
          <Label>{caughtPokemon?.length || 0}</Label>
        </Menu.Item>
      ),
      render: () => (
        <Tab.Pane attached={false} className={`${styles.box} ${styles.grass}`}>
          {caughtPokemon?.length > 0 ? (
            caughtPokemon?.map((enc, i) => {
              const foundPokemon = POKEMAP.get(enc.pokemon);
              return (
                <Popup
                  key={`caught-${enc.id}-${Number(i) + 1}`}
                  inverted={darkMode}
                  on="click"
                  pinned
                  position="top center"
                  trigger={
                    <div className={styles.pokemon} data-testid={`caught-${enc.id}`}>
                      <PkmImage name={foundPokemon?.text} shiny={enc?.details?.shiny} />
                    </div>
                  }
                >
                  <PokeInfo encounter={enc} pokemon={foundPokemon} />
                </Popup>
              );
            })
          ) : (
            <Tip missing={t('multi_status')} />
          )}
        </Tab.Pane>
      ),
    },
    {
      menuItem: (
        <Menu.Item key="failed">
          <FailedSVG className={styles.fainted} />
          {t('Failed')}
          <Label>{failedPokemon?.length || 0}</Label>
        </Menu.Item>
      ),
      render: () => (
        <Tab.Pane attached={false} className={`${styles.box} ${styles.sky}`}>
          {failedPokemon?.length > 0 ? (
            failedPokemon?.map((enc, i) => {
              const foundPokemon = POKEMAP.get(enc.pokemon);
              return (
                <Popup
                  key={`failed-${enc.id}-${Number(i) + 1}`}
                  inverted={darkMode}
                  on="click"
                  pinned
                  position="top center"
                  trigger={
                    <div className={styles.pokemon} data-testid={`failed-${enc.id}`}>
                      <PkmImage name={foundPokemon?.text} shiny={enc?.details?.shiny} />
                    </div>
                  }
                >
                  <PokeInfo encounter={enc} pokemon={foundPokemon} />
                </Popup>
              );
            })
          ) : (
            <Tip missing={t('Failed')} />
          )}
        </Tab.Pane>
      ),
    },
    {
      menuItem: (
        <Menu.Item key="fainted">
          <FaintedSVG className={styles.fainted} />
          {t('Fainted')}
          <Label>{faintedPokemon?.length || 0}</Label>
        </Menu.Item>
      ),
      render: () => (
        <Tab.Pane attached={false} className={`${styles.box} ${styles.crag}`}>
          {faintedPokemon?.length > 0 ? (
            faintedPokemon?.map((enc, i) => {
              const foundPokemon = POKEMAP.get(enc.pokemon);
              return (
                <Popup
                  key={`fainted-${enc.id}-${Number(i) + 1}`}
                  inverted={darkMode}
                  on="click"
                  pinned
                  position="top center"
                  trigger={
                    <div className={styles.pokemon} data-testid={`fainted-${enc.id}`}>
                      <PkmImage name={foundPokemon?.text} shiny={enc?.details?.shiny} />
                    </div>
                  }
                >
                  <PokeInfo encounter={enc} pokemon={foundPokemon} />
                </Popup>
              );
            })
          ) : (
            <Tip missing={t('Fainted')} />
          )}
        </Tab.Pane>
      ),
    },
  ];

  return (
    <div className={styles.pokestats}>
      <Tab className={styles.tabs} menu={{ secondary: true }} panes={panes} />
    </div>
  );
}
Example #2
Source File: Image.tsx    From nuzlocke with BSD 3-Clause "New" or "Revised" License 4 votes vote down vote up 
function Image({ forwardedRef, responsive = false }: ImageProps): JSX.Element {
  const { t } = useTranslation('stats');
  const badges = useStore(useCallback((state) => state.badges, []));
  const rules = useStore(useCallback((state) => state.rules, []));
  const selectedRuleset = useStore(useCallback((state) => state.selectedRuleset, []));
  const games = useStore(useCallback((state) => state.games, []));
  const teamPokemon = useStore(selectTeam);
  const boxedPokemon = useStore(selectBoxed);
  const faintedPokemon = useStore(selectFainted);
  const caughtPokemon = useStore(selectCaught);
  const completion = useStore(selectCompletion);
  const failedPokemon = useStore(selectFailed);
  const shinyPokemon = useStore(selectShiny);
  const selectedGame = useStore(
    useCallback((state) => state.selectedGame, []),
    shallow
  );
  const summary = useStore(
    useCallback(
      (state) => (state?.selectedGame?.value ? state.summary[state?.selectedGame?.value] : null),
      []
    )
  );
  const setDefaultSummary = useStore(useCallback((state) => state.setDefaultSummary, []));

  useEffect(() => {
    if (!!selectedGame && responsive && !summary) {
      setDefaultSummary();
    }
  }, [responsive, selectedGame, setDefaultSummary, summary]);

  const types = useMemo(() => {
    const TEMP = { ...TYPE_COUNT };

    games[selectedGame?.value]?.encounters?.forEach((enc) => {
      const foundPokemon = POKEMAP.get(enc.pokemon);
      if (foundPokemon) {
        TEMP[foundPokemon.type] += 1;
        if (foundPokemon.dualtype) {
          TEMP[foundPokemon.dualtype] += 1;
        }
      }
    });

    return Object.entries(TEMP).map((entry) => {
      return { title: entry[0] as Type, value: entry[1], color: TYPE_COLOR[entry[0] as Type] };
    });
  }, [games, selectedGame]);

  const getStatus = () => {
    switch (summary?.status) {
      case 0:
        return (
          <b style={{ color: '#FBD200' }}>
            {t('ongoing')} <Icon name="refresh" />
          </b>
        );
      case 1:
        return (
          <b style={{ color: 'green' }}>
            {t('complete')} <Icon name="check" />
          </b>
        );
      case 2:
      default:
        return (
          <b style={{ color: 'red' }}>
            {t('Failed')} <Icon name="x" />
          </b>
        );
    }
  };

  return (
    <div className={`${styles.summary} ${responsive ? styles.responsive : ''}`} ref={forwardedRef}>
      <div className={styles.header} data-testid={`image-header-${responsive}`}>
        <span className={styles.headerTitle}>{summary?.title}</span>
        {getStatus()}
        <div className={styles.badges}>
          {!!selectedGame &&
            badges[selectedGame?.value]?.map((badge, index) => {
              const badgeArr = games[selectedGame?.value]?.badge;
              return (
                <img
                  alt={badge.name}
                  className={`${styles.badge} ${
                    Array.isArray(badgeArr) && badgeArr?.includes(index) ? styles.active : ''
                  }`}
                  key={`${badge.name}-${badge.id}`}
                  src={BADGE_IMAGES[selectedGame?.value][index].src}
                />
              );
            })}
        </div>
      </div>
      <div className={styles.card}>
        <span className={styles.title}>{t('Team')}</span>
        {teamPokemon?.length > 0 ? (
          <div className={styles.team}>
            {teamPokemon?.map((enc) => {
              const foundPokemon = POKEMAP.get(enc.pokemon);
              return (
                <div className={styles.pokemon} key={`team-${enc.id}`}>
                  <div className={styles.image}>
                    <PkmImage name={foundPokemon?.text} shiny={enc?.details?.shiny} />
                  </div>
                  <PokeInfo encounter={enc} pokemon={foundPokemon} />
                  <Moves moves={enc?.details?.moves} />
                </div>
              );
            })}
          </div>
        ) : (
          <Tip missing={t('Team')} />
        )}
      </div>
      <div className={styles.row}>
        {summary?.encounters && (
          <div className={`${styles.card} ${styles.large}`}>
            <span className={styles.title}>{t('encounters')}</span>
            <div className={styles.encounters}>
              <div className={styles.completion}>
                <svg className={styles.circle} width="150" height="150" viewBox="0 0 150 150">
                  <circle className={styles.circlebg} cx={75} cy={75} r="70" strokeWidth="10px" />
                  <circle
                    className={styles.progress}
                    cx={75}
                    cy={75}
                    r="70"
                    strokeWidth="10px"
                    style={{
                      strokeDasharray: CALC,
                      strokeDashoffset: CALC - CALC * completion,
                    }}
                    transform="rotate(-90 75 75)"
                  />
                  <text className={styles.text} x="50%" y="50%" dy=".3em" textAnchor="middle">
                    {completion ? (completion * 100)?.toFixed(0) : 0}%
                  </text>
                </svg>
                <b>{t('completion')}</b>
              </div>
              <div className={styles.byType}>
                <b>{t('all_encounters_by')}</b>
                <div className={styles.byTypeContainer}>
                  {types.map((type) => {
                    return (
                      <div
                        className={styles.type}
                        key={`type-${type.title}`}
                        style={{ backgroundColor: type.color }}
                      >
                        {type.title} {type.value}
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>
          </div>
        )}
        {summary?.stats && (
          <div className={`${styles.card} ${styles.small}`}>
            <span className={styles.title}>{t('stats')}</span>
            <div className={styles.stat}>
              <CaughtSVG className={styles.team} />
              <b>{t('Caught')}</b>
              <Label>{caughtPokemon?.length || 0}</Label>
            </div>
            <div className={styles.stat}>
              <FailedSVG className={styles.team} />
              <b>{t('Failed')}</b>
              <Label>{failedPokemon?.length || 0}</Label>
            </div>
            <div className={styles.stat}>
              <FaintedSVG className={styles.team} />
              <b>{t('Fainted')}</b>
              <Label>{faintedPokemon?.length || 0}</Label>
            </div>
            <div className={styles.stat}>
              <ShinySVG className={styles.team} />
              <b>Shiny</b>
              <Label>{shinyPokemon?.length || 0}</Label>
            </div>
          </div>
        )}
      </div>
      {boxedPokemon?.length > 0 && summary?.boxed && (
        <div className={styles.row}>
          <div className={`${styles.card} ${styles.medium}`}>
            <span className={styles.title}>{t('boxed')}</span>
            <div className={styles.box}>
              {boxedPokemon.map((box, i) => {
                const foundPokemon = POKEMAP.get(box.pokemon);
                return (
                  <div
                    data-testid={`image-box-${i}-${responsive}`}
                    className={styles.pokeImg}
                    key={`boxed-${Number(i) + 1}`}
                  >
                    <PkmImage name={foundPokemon?.text} shiny={box?.details?.shiny} />
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      )}
      {faintedPokemon?.length > 0 && summary?.fainted && (
        <div className={styles.row}>
          <div className={`${styles.card} ${styles.medium}`}>
            <span className={styles.title}>{t('Fainted')}</span>
            <div className={styles.box}>
              {faintedPokemon.map((faint, i) => {
                const foundPokemon = POKEMAP.get(faint.pokemon);
                return (
                  <div
                    data-testid={`image-fainted-${i}-${responsive}`}
                    className={styles.pokeImg}
                    key={`fainted-${Number(i) + 1}`}
                  >
                    <PkmImage name={foundPokemon?.text} shiny={faint?.details?.shiny} />
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      )}
      <div className={styles.row}>
        {summary?.rules && rules[selectedRuleset] && (
          <div className={`${styles.card} ${styles.medium}`}>
            <span className={styles.title}>{t('rules')}</span>
            <div className={styles.rules}>
              {rules[selectedRuleset]?.map((rule, i) => {
                return <RuleContent hideSmart key={`sumrule-${Number(i) + 1}`} i={i} rule={rule} />;
              })}
            </div>
          </div>
        )}
        {summary?.showDescription && (
          <div className={`${styles.card} ${styles.medium}`}>
            <span className={styles.title}>{t('description')}</span>
            <p>{summary?.description || ''}</p>
          </div>
        )}
      </div>
      <span className={styles.credit}>https://nuzlocke.netlify.app</span>
    </div>
  );
}