feat(#185): added score store and component (#50)

public/images/switchOff.svg

@@ -0,0 +1,25 @@
+<svg width="30" height="20" viewBox="0 0 30 20" fill="none"
+	xmlns="http://www.w3.org/2000/svg">
+	<path fill-rule="evenodd" clip-rule="evenodd" d="M18 16H23C26.866 16 30 12.866 30 9C30 5.13401 26.866 2 23 2H18V3H23C26.3137 3 29 5.68629 29 9C29 12.3137 26.3137 15 23 15H18V16Z" fill="#656565"/>
+	<rect x="16" y="2" width="5" height="1" rx="0.5" fill="#656565"/>
+	<rect x="16" y="15" width="5" height="1" rx="0.5" fill="#656565"/>
+	<g filter="url(#filter0_d)">
+		<rect x="2" y="1" width="16" height="16" rx="8" fill="#999999"/>
+		<rect x="2" y="1" width="16" height="16" rx="8" fill="url(#paint0_radial)" fill-opacity="0.25"/>
+	</g>
+	<defs>
+		<filter id="filter0_d" x="0" y="0" width="20" height="20" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+			<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+			<feOffset dy="1"/>
+			<feGaussianBlur stdDeviation="1"/>
+			<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+			<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+			<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+		</filter>
+		<radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(10 6.5) rotate(90) scale(10.5)">
+			<stop stop-color="white"/>
+			<stop offset="1"/>
+		</radialGradient>
+	</defs>
+</svg>

public/images/switchOn.svg

@@ -0,0 +1,25 @@
+<svg width="30" height="20" viewBox="0 0 30 20" fill="none"
+	xmlns="http://www.w3.org/2000/svg">
+	<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2L7 2C3.13401 2 -9.49935e-07 5.13401 -6.11959e-07 9C-2.73984e-07 12.866 3.13401 16 7 16L12 16L12 15L7 15C3.68629 15 1 12.3137 0.999999 9C0.999999 5.68629 3.68629 3 7 3L12 3L12 2Z" fill="#656565"/>
+	<rect x="14" y="16" width="5" height="1" rx="0.5" transform="rotate(180 14 16)" fill="#656565"/>
+	<rect x="14" y="3" width="5" height="1" rx="0.5" transform="rotate(180 14 3)" fill="#656565"/>
+	<g filter="url(#filter0_d)">
+		<rect x="28" y="17" width="16" height="16" rx="8" transform="rotate(180 28 17)" fill="#F2C94C"/>
+		<rect x="28" y="17" width="16" height="16" rx="8" transform="rotate(180 28 17)" fill="url(#paint0_radial)" fill-opacity="0.25"/>
+	</g>
+	<defs>
+		<filter id="filter0_d" x="10" y="0" width="20" height="20" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+			<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+			<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+			<feOffset dy="1"/>
+			<feGaussianBlur stdDeviation="1"/>
+			<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
+			<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+			<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+		</filter>
+		<radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(36 22.5) rotate(90) scale(10.5)">
+			<stop stop-color="white"/>
+			<stop offset="1"/>
+		</radialGradient>
+	</defs>
+</svg>

src/config/lexics/authenticated.tsx

@@ -1,6 +1,7 @@
 export const authenticatedLexics = {
   basketball: 6960,
   football: 6958,
+  hide_score: 12982,
   hockey: 6959,
   logout: 4306,
   player: 630,

src/features/App/AuthenticatedApp.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react'
+import React from 'react'
 import {
   Route,
   Redirect,
@@ -16,13 +16,13 @@ import { PlayerPage } from 'features/PlayerPage'
 import { TournamentPage } from 'features/TournamentPage'
 import { LanguageSelect } from 'features/LanguageSelect'
 import { UserAccount } from 'features/UserAccount'
-import { ToggleScore } from 'features/ToggleScore'
+import { ScoreStore, ToggleScore } from 'features/ToggleScore'
 
 export const AuthenticatedApp = () => {
   useLexicsConfig(authenticatedLexics)
 
   return (
-    <Fragment>
+    <ScoreStore>
       <ToggleScore />
       <LanguageSelect />
       <Switch>
@@ -51,6 +51,6 @@ export const AuthenticatedApp = () => {
 
         <Redirect to={PAGES.home} />
       </Switch>
-    </Fragment>
+    </ScoreStore>
   )
 }

src/features/ToggleScore/index.tsx

@@ -1,5 +1,20 @@
 import React from 'react'
 
-import { Wrapper } from './styled'
+import { useScoreStore } from './store'
+import {
+  Switch,
+  Title,
+  Icon,
+} from './styled'
 
-export const ToggleScore = () => <Wrapper />
+export * from './store'
+
+export const ToggleScore = () => {
+  const { isVisible, toggle } = useScoreStore()
+  return (
+    <Switch onClick={toggle}>
+      <Title t='hide_score' />
+      <Icon isOn={isVisible} />
+    </Switch>
+  )
+}

src/features/ToggleScore/store.tsx

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react'
+import React, {
+  createContext,
+  useContext,
+} from 'react'
+
+import { useToggle } from 'hooks'
+
+type ScoreStore = {
+  isVisible: boolean,
+  toggle: () => void,
+}
+
+type Props = { children: ReactNode }
+
+const ScoreContext = createContext({} as ScoreStore)
+
+export const ScoreStore = ({ children }: Props) => {
+  const { isOpen, toggle } = useToggle()
+
+  return (
+    <ScoreContext.Provider value={{ isVisible: isOpen, toggle }}>
+      {children}
+    </ScoreContext.Provider>
+  )
+}
+
+export const useScoreStore = () => useContext(ScoreContext)

src/features/ToggleScore/styled.tsx

@@ -1,3 +1,43 @@
 import styled from 'styled-components/macro'
 
-export const Wrapper = styled.div``
+import { T9n } from 'features/T9n'
+
+export const Switch = styled.div`
+  position: absolute;
+  right: 99px;
+  top: 32px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+`
+
+export const Title = styled(T9n)`
+  font-style: normal;
+  font-weight: 600;
+  font-size: 14px;
+  letter-spacing: -0.03em;
+  color: #999999;
+  margin-right: 5px;
+`
+
+type IconProps = {
+  isOn: boolean,
+}
+
+export const Icon = styled.div<IconProps>`
+  width: 28px;
+  height: 16px;
+  color: white;
+  background-repeat: no-repeat;
+  ${({ isOn }) => (
+    isOn
+      ? `
+        background-image: url(/images/switchOn.svg);
+        background-position: 0 -1px;
+      `
+      : `
+        background-image: url(/images/switchOff.svg);
+        background-position: -2px -1px;
+      `
+  )};
+`