• Index
• Search by APIs
• Search by Words
• Project Search

• Java
• Python
• JavaScript
• TypeScript
• C++
• Scala
• Blog

• monopoly-master
  • CONTRIBUTING-EN.md
  • lerna.json
  • .all-contributorsrc
  • client
    • src
      • App.tsx
      • reportWebVitals.ts
      • game
        • players
          • index.ts
          • players.tsx
        • index.ts
        • input-name-modal
          • index.ts
          • input-name-modal.tsx
        • game.tsx
        • board
          • cell.tsx
          • actions-popup
            • index.ts
            • actions-popup.tsx
          • images
          • cell-styled.ts
          • index.ts
          • board-styled.ts
          • board.tsx
          • board-cells.ts
          • chip
            • index.ts
            • chip.tsx
      • index.tsx
      • ui
        • radio
          • radio.tsx
          • index.ts
      • create-game
        • index.ts
        • game-setting-store.ts
        • create-game.tsx
      • api
        • io.ts
      • lib
        • uuid.ts
        • local-storage.ts
        • search-param.ts
        • dom.ts
      • setupTests.ts
      • index.css
      • core
        • game-store.ts
        • player-events.ts
      • normalize.css
      • react-app-env.d.ts
    • public
      • robots.txt
      • manifest.json
      • index.html
    • .prettierrc
    • README.md
    • package.json
    • tsconfig.json
    • .gitignore
  • LICENSE
  • CONTRIBUTING.md
  • README.md
  • package.json
  • server
    • src
      • services
        • game-service.ts
      • common
        • colors.ts
        • cells-data
          • index.ts
          • cells-price-data.ts
          • cells-data.ts
      • lib
        • random.ts
        • calc-cells-path.test.ts
        • calc-cells-path.ts
      • repositories
        • game-repository.ts
      • controllers
        • game-controller.ts
        • session-controller.ts
        • game-events-controller.ts
      • domains
        • player.ts
        • game.test.ts
        • game.ts
        • board.ts
        • cube.ts
    • .prettierrc
    • index.ts
    • jest.config.ts
    • package.json
    • tsconfig.json
    • nodemon.json
  • shared
    • game
      • index.ts
    • .prettierrc
    • index.ts
    • package-lock.json
    • board
      • cells-price.ts
      • board.ts
      • cube.ts
      • cell.ts
    • package.json
    • tsconfig.json
  • .gitignore
  • docs
    • assets
      • images
  • README-EN.md

import { memo } from 'react';
import { useSpring, animated } from 'react-spring';
import { easeQuadInOut } from 'd3-ease';

import styled from 'styled-components/macro';
import { ls } from '../../../lib/local-storage';
import { gameSettingStore } from '../../../create-game/game-setting-store';

const ChipWrapper = styled(animated.div)`
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  background-color: ${(p) => p.color};
  border: 2px solid #fff;
  border-radius: 50%;
  z-index: 1;
`;

export type PointType = { x: number; y: number; duration: number };

type ChipProps = {
  color: string;
  points: PointType[];
};

export const Chip = memo(
  ({ points, color }: ChipProps) => {
    const chipAnimatedDisabled = ls.get('chipAnimatedDisabled');

    const handleStartAnimation = () => {
      console.log('animation start');
      gameSettingStore.setChipMoveActive(true);
    };

    const handleEndAnimation = () => {
      console.log('animation end');
      gameSettingStore.setChipMoveActive(false);
    };

    const props = useSpring({
      // @ts-ignore
      to: async (animate: any) => {
        for (const { x, y, duration } of points) {
          await animate({
            transform: `translate(${x}px, ${y}px)`,
            config: {
              easing: easeQuadInOut,
              duration: chipAnimatedDisabled ? 0 : duration,
              precision: 0.01,
            },
          });
        }
      },
      from: {
        transform: `translate(${0}px, ${0}px)`,
      },
      onStart: handleStartAnimation,
      onRest: handleEndAnimation,
    });

    return <ChipWrapper color={color} style={props} />;
  },
  (prevProps, nextProps) => {
    return (
      JSON.stringify(prevProps.points) === JSON.stringify(nextProps.points)
    );
  },
);