Update wheels modal

aukus-devs · Dec 15, 2024 · d1f24f4 · d1f24f4
1 parent 0ef3315
commit d1f24f4
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 8 deletions.
diff --git a/src/components/MainMenu.tsx b/src/components/MainMenu.tsx
@@ -11,7 +11,7 @@ import useScreenSize from 'src/context/useScreenSize'
 import MainMenuMobile from './MainMenuMobile'
 import Clock from './Clock'
 import MultistreamButton from 'src/pages/players/components/MultistreamButton'
-import DifficultyButton from 'src/pages/rules/components/DifficultyButton'
+import WheelButton from 'src/pages/rules/components/WheelButton'
 import { useTime } from 'src/context/TimeProvider'
 import { playerDisplayName } from 'src/pages/player/components/utils'
 import useLocalStorage from 'src/context/useLocalStorage'
@@ -76,7 +76,7 @@ export default function MainMenu({
   }
 
   if (!leftSlot && currentUser) {
-    leftSlot = <DifficultyButton />
+    leftSlot = <WheelButton />
   }
 
   if (!rightSlot) {

diff --git a/src/pages/map/MapPage.tsx b/src/pages/map/MapPage.tsx
@@ -5,7 +5,7 @@ import MapComponent from './components/MapComponent'
 import TimelapseProvider from './hooks/useTimelapse'
 import useScreenSize from 'src/context/useScreenSize'
 import MapComponentMobile from './components/MapComponentMobile'
-import DifficultyButton from '../rules/components/DifficultyButton'
+import WheelButton from '../rules/components/DifficultyButton'
 import { useUser } from 'src/context/UserProvider'
 
 export default function MapPage() {

diff --git a/src/pages/rules/components/SheikhWheel.tsx b/src/pages/rules/components/SheikhWheel.tsx
@@ -0,0 +1,32 @@
+import { Box } from '@mui/material'
+import { Color } from 'src/utils/types'
+
+export default function SheikhWheel() {
+  return (
+    <Box display={'flex'} justifyContent={'center'}>
+      <Box
+        style={{
+          position: 'absolute',
+          width: '700px',
+          backgroundColor: Color.greyDark,
+          height: '10px',
+          // display: 'none',
+        }}
+      />
+      <Box>
+        <iframe
+          src="https://wheelofnames.com/ru/th2-utw"
+          title="Колесо шейх-момента"
+          width={'700px'}
+          height={'700px'}
+          style={{
+            border: 'none',
+            padding: 0,
+            margin: 0,
+            overflow: 'hidden',
+          }}
+        />
+      </Box>
+    </Box>
+  )
+}
diff --git a/...ges/rules/components/DifficultyButton.tsx → src/pages/rules/components/WheelButton.tsx b/...ges/rules/components/DifficultyButton.tsx → src/pages/rules/components/WheelButton.tsx
@@ -11,9 +11,16 @@ import { useState } from 'react'
 import DifficultyWheel from './DifficultyWheel'
 import WheelIcon from 'assets/icons/wheel.svg?react'
 import { Close } from '@mui/icons-material'
+import SheikhWheel from './SheikhWheel'
+import { Link } from 'react-router-dom'
+import LinkSpan from 'src/components/LinkSpan'
+import { Color } from 'src/utils/types'
 
-export default function DifficultyButton() {
+export default function WheelButton() {
   const [modalOpen, setModalOpen] = useState(false)
+  const [wheelType, setWheelType] = useState<'difficulty' | 'sheikh'>(
+    'difficulty'
+  )
 
   const resetScroll = (e: React.UIEvent<HTMLDivElement>) => {
     const target = e.target as HTMLDivElement
@@ -29,7 +36,7 @@ export default function DifficultyButton() {
         <WheelIcon
           style={{ marginRight: '8px', width: '19px', height: '19px' }}
         />
-        Колесо сложности
+        Колеса
       </Button>
       <Dialog
         open={modalOpen}
@@ -39,13 +46,30 @@ export default function DifficultyButton() {
         <DialogTitle style={{ padding: 0, margin: 0 }}>
           <Box
             width={'100%'}
-            fontSize={'32px'}
+            // fontSize={'32px'}
             marginBottom={'0px'}
             display={'flex'}
             position={'relative'}
             marginTop={'20px'}
+            justifyContent={'center'}
           >
-            <Box margin={'0 auto'}>Ролл сложности игры</Box>
+            <Box marginRight="50px">
+              <Link to="#" onClick={() => setWheelType('difficulty')}>
+                <LinkSpan
+                  color={Color.blue}
+                  active={wheelType === 'difficulty'}
+                >
+                  Ролл сложности
+                </LinkSpan>
+              </Link>
+            </Box>
+            <Box>
+              <Link to="#" onClick={() => setWheelType('sheikh')}>
+                <LinkSpan color={Color.orange} active={wheelType === 'sheikh'}>
+                  Ролл шейх-момента
+                </LinkSpan>
+              </Link>
+            </Box>
             <Box position={'absolute'} right={'40px'}>
               <IconButton
                 aria-label="close"
@@ -61,7 +85,8 @@ export default function DifficultyButton() {
           </Box>
         </DialogTitle>
         <DialogContent style={{ overflow: 'hidden' }} onScroll={resetScroll}>
-          <DifficultyWheel />
+          {wheelType === 'difficulty' && <DifficultyWheel />}
+          {wheelType === 'sheikh' && <SheikhWheel />}
         </DialogContent>
       </Dialog>
     </>