components#Moves TypeScript Examples

The following examples show how to use components#Moves. 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: BadgeDetail.tsx    From nuzlocke with BSD 3-Clause "New" or "Revised" License 4 votes vote down vote up 
function BadgeDetail({ selectedDetail }: BadgeDetailProps): JSX.Element {
  const { t } = useTranslation('badges');
  const [view, setView] = useState(0);
  const selectedGame = useStore(useCallback((state) => state.selectedGame, []));
  const darkMode = useStore(useCallback((state) => state.darkMode, []));
  const isSplit = !PHYS_SPEC_SPLIT.includes(selectedGame?.value);
  const colors = darkMode ? D_STAT_COLOR : STAT_COLOR;

  const getContent = () => {
    if (!!selectedDetail?.rematch && view === 1) {
      return selectedDetail.rematch;
    }
    return selectedDetail?.content;
  };
  return (
    <>
      <div className={styles.title}>{selectedDetail?.name}</div>
      {selectedDetail?.type === 'REMATCH' && (
        <div className={styles.rematch}>
          <Radio
            checked={view === 0}
            label={t('original')}
            onChange={(e: React.FormEvent<HTMLInputElement>, data: CheckboxProps) =>
              setView(data.value as number)
            }
            value={0}
          />
          <Radio
            checked={view === 1}
            label={t('rematch')}
            onChange={(e: React.FormEvent<HTMLInputElement>, data: CheckboxProps) =>
              setView(data.value as number)
            }
            value={1}
          />
        </div>
      )}
      <div className={styles.gymPokemon}>
        {getContent()?.map((pokemon, ind) => {
          const poke = POKEMAP.get(pokemon.id);
          let stats = undefined;
          try {
            stats = new Pokemon(GAME_GENERATION[selectedGame?.value], getSmogonName(poke.text), {
              level: pokemon?.level,
            });
          } catch {
            // do nothing
          }

          return (
            <div
              className={styles.pokemon}
              key={`pokemon-${pokemon.id}-${ind + 1}`}
              style={{ border: `2px solid ${TYPE_COLOR[poke?.type]}` }}
            >
              <div className={styles.pokemonHeader}>
                <div className={styles.pokemonName}>
                  {selectedDetail?.type === 'TRIAL' && ind === 0 && (
                    <span className={styles.totem}>TOTEM</span>
                  )}
                  {selectedDetail?.type === 'DYNAMAX' &&
                    ind === (selectedDetail?.content?.length ?? 0) - 1 && (
                      <span className={styles.totem}>DYNAMAX</span>
                    )}
                  <div className={styles.pokemonImage}>
                    <PkmImage name={poke?.text} />
                  </div>
                  <span>{poke?.text}</span>
                  <span>Lv. {pokemon?.level}</span>
                </div>
                <div className={styles.pokemonDetails}>
                  <PokemonType pokemon={poke} />
                  {!!pokemon?.ability && (
                    <div className={styles.pokemonLabel}>
                      <span>{t('ability')}:</span>
                      <span className={styles.value}>{pokemon?.ability}</span>
                    </div>
                  )}
                  {!!pokemon?.item && (
                    <div className={styles.pokemonLabel}>
                      <span>{t('item')}:</span>
                      <div className={styles.item}>
                        <span className={styles.value}>{pokemon?.item}</span>
                        <div className="pkitem-wrapper">
                          <div className={`pkitem pkitem-${getSmogonItemName(pokemon?.item)}`} />
                        </div>
                      </div>
                    </div>
                  )}
                </div>
              </div>
              <div className={styles.extendedDetails}>
                {stats?.stats && (
                  <div className={styles.stats}>
                    {Object.entries(stats.stats).map(([key, value]) => (
                      <React.Fragment key={`${key}-${value}`}>
                        <span className={styles.statLabel}>{t(key)}:</span>
                        <span style={{ color: colors[key][0] }}>{value}</span>
                        <div
                          className={styles.statBar}
                          style={{
                            width: `${(value / 450) * 100}%`,
                            backgroundColor: colors[key][0],
                            border: `1px solid ${colors[key][1]}`,
                          }}
                        />
                      </React.Fragment>
                    ))}
                  </div>
                )}
                <Moves moves={pokemon?.moves} showStatus={isSplit} />
              </div>
            </div>
          );
        })}
      </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>
  );
}