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

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

• react-memory-game-master
  • .eslintignore
  • src
    • pages
      • Game
        • GameControlBar
          • index.tsx
          • styles.ts
        • GameWinMessage
          • index.tsx
          • styles.ts
        • index.tsx
        • IconList.ts
        • GameCards
          • index.tsx
          • styles.ts
        • useClearGameState.ts
        • styles.ts
        • types.ts
        • useCheckGameEnd.ts
        • GameContext.ts
      • App
        • index.tsx
      • DifficultyChooser
        • index.tsx
        • styles.ts
    • index.tsx
    • hooks
      • useArrayShuffle.ts
      • index.ts
      • useTypedSelector.ts
      • useTimer.ts
    • components
      • DifficultyItem
        • index.tsx
        • styles.ts
      • Card
        • index.tsx
        • styles.ts
      • AlertModal
        • index.tsx
        • styles.ts
    • styled.d.ts
    • store
      • actions
        • index.ts
        • GameConfigAction.ts
        • ThemeActions.ts
      • reducers
        • ThemeReducer.ts
        • GameConfigReducer.ts
      • index.ts
    • config
      • Difficulties.ts
      • StorageKeys.ts
      • IconLibrary.ts
    • types
      • GameConfig.ts
      • Theme.ts
    • styles
      • Global.ts
      • Theme.ts
    • react-app-env.d.ts
  • public
    • index.html
  • LICENSE
  • .editorconfig
  • README.md
  • package.json
  • .eslintrc.js
  • tsconfig.json
  • .gitignore
  • .prettierrc.js

import styled, { css, FlattenSimpleInterpolation } from 'styled-components'

const ButtonHeight = 42

export const Container = styled.div`
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  height: 64px;
  background: ${({ theme }): string => theme.controlBar};
  user-select: none;
  padding: 0 24px;

  @media only screen and (max-width: 400px) {
    padding: 0 8px;
  }
`

export const LeftSideContainer = styled.div`
  display: flex;
  align-items: center;
  flex: 1;
`

export const BackButton = styled.div`
  margin-right: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  border: 1px solid ${({ theme }): string => theme.secondaryText};
  min-height: ${ButtonHeight}px;
  min-width: ${ButtonHeight}px;
  font-size: 2rem;
  cursor: pointer;
  transition: all 0.2s ease-in-out;

  &:hover {
    background: ${({ theme }): string => theme.accent};
    color: white;
  }
`

export const DifficultyIndicator = styled.div`
  @media only screen and (max-width: 700px) {
    display: none;
  }
`

export const RightSideContainer = styled.div`
  display: flex;
  align-items: center;
  padding-right: 24px;
`

export const TimerText = styled.span``

export const Timer = styled.div`
  display: flex;
  align-items: center;
  padding: 0 24px;
  ${TimerText} {
    margin-left: 8px;
  }
`

export const ButtonText = styled.span`
  @media only screen and (max-width: 500px) {
    display: none;
  }
`

export const Button = styled.div`
  display: flex;
  align-items: center;
  height: ${ButtonHeight}px;
  padding: 0 24px;
  border-radius: 5px;
  border: 1px solid ${({ theme }): string => theme.secondaryText};
  cursor: pointer;
  transition: all 0.2s ease-in-out;

  &:hover {
    background: ${({ theme }): string => theme.accent};
    color: white;
  }

  ${ButtonText} {
    margin-left: 16px;
  }
`

export const PlayPauseButton = styled(Button)`
  margin-right: 8px;
`

const DisabledButtonStyle = css`
  background: transparent !important;
  border: 1px solid transparent;
  cursor: not-allowed;
`

export const RestartButton = styled(Button)<{ isPaused?: boolean }>`
  ${({ isPaused }): FlattenSimpleInterpolation | null =>
    !isPaused ? DisabledButtonStyle : null}
`