improve the whole user interface

sayjeyhi · Oct 30, 2024 · 4ce48da · 4ce48da
1 parent f73437a
commit 4ce48da
Show file tree

Hide file tree

Showing 19 changed files with 391 additions and 492 deletions.
diff --git a/index.html b/index.html
@@ -53,6 +53,14 @@
     })(window,document,'script','dataLayer','GTM-WMZX9BLX');</script>
     <!-- End Google Tag Manager -->
 
+    <script>
+      if ("paintWorklet" in CSS) {
+        CSS.paintWorklet.addModule(
+          "https://www.unpkg.com/[email protected]/squircle.min.js"
+        );
+      }
+    </script>
+
     <style>
       .loader {
         width: 88px;

diff --git a/src/atoms/audio.js b/src/atoms/audio.js
@@ -2,6 +2,6 @@ import { atomWithStorage } from 'jotai/utils'
 import { atom } from 'jotai'
 
 export const gameIsSoundsEnabledAtom = atomWithStorage('gameIsSoundsEnabled', false)
-export const isMusicEnabledAtom = atomWithStorage('isMusicEnabled', true)
+export const isMusicEnabledAtom = atomWithStorage('isMusicEnabled', false)
 
 export const isTalkingAtom = atom(false)
diff --git a/src/atoms/gameGuide.js b/src/atoms/gameGuide.js
diff --git a/src/components/2D/AboutMe.jsx b/src/components/2D/AboutMe.jsx
@@ -3,6 +3,7 @@ import { Section } from './Section'
 import { AnimatePresence } from 'framer-motion'
 import { useAtom, useAtomValue } from 'jotai'
 import { currentSectionAtom, isSidebarOpenedAtom } from '@/atoms/menu.js'
+import NameWithRandomDarkColors from '@/components/2D/NameWithRandomColors'
 
 export const AboutMeSection = props => {
   const [section, setSection] = useAtom(currentSectionAtom)
@@ -15,25 +16,46 @@ export const AboutMeSection = props => {
         <Section key="placeholder" />
       ) : (
         <Section key="me">
-          <h1 className="text-3xl font-extrabold leading-none md:text-5xl sm:text-3xl lg:text-7xl">
-            Hi, I&apos;m
-            <br />
-            <span className="bg-amber-50 px-1">Jafar Rezaei</span>
-          </h1>
-          <p className="text-xs sm:text-base w-1/2 lg:w-1/2 xl:w-2/3 2xl:w-full md:text-xl lg:text-2xl text-gray-600 mt-4">
-            A curious person who wants to improve stuff.
-            <br />
-            I&apos;m a software engineer and I&apos;m interested in web development.
-            <br />
-            with 9+ years of experience in software development.
-          </p>
+          <div className="window">
+            <h1 className="leading-none font-light text-xl sm:text-md">
+              <span className="bg-white">Hi, I&apos;m</span>
+              <br />
+              <br />
+              <NameWithRandomDarkColors />
+              <br />
+            </h1>
+            <p className="text-xs bg-white sm:text-base md:text-lg lg:text-lg text-black mt-6 pl-2 border-l-8 border-gray-300 border-opacity-50">
+              <span {...cursorHandlers}>A published author with 10+ years in the field,</span>
+              <br />
+              <span {...cursorHandlers} className="bg-white">
+                dedicated to learning, sharing insights,
+              </span>
+              <br />
+              <span {...cursorHandlers}>and building impactful solutions across borders. </span>
+              <br />
+            </p>
 
-          <button
-            onClick={() => setSection(1)}
-            className="transform px-2 py-1 lg:px-6 lg:py-4 mt-8 rounded-lg lg:rounded-3xl bg-primary shadow-2xl ring-primary shadow-primary text-base md:text-lg lg:text-2xl text-white outline-none focus:ring-4 active:scale-90 transition-transform"
-            {...cursorHandlers}>
-            Tell me more
-          </button>
+            <div className="italic text-white mt-5 text-base">
+              Maybe a &quot;Code Whisperer&quot;!?
+            </div>
+
+            <button
+              onClick={() => setSection(1)}
+              className="inline-flex generic-squircle transform px-2 py-1 font-bold lg:px-6 lg:py-4 mt-5 text-black text-base md:text-lg lg:text-xl active:scale-95 transition-transform"
+              {...cursorHandlers}>
+              Up for a magical twist?
+              <div id="mouse-scroll">
+                <div className="mouse">
+                  <div className="mouse-in"></div>
+                </div>
+                <div className="arrows">
+                  <span className="down-arrow-1"></span>
+                  <span className="down-arrow-2"></span>
+                  <span className="down-arrow-3"></span>
+                </div>
+              </div>
+            </button>
+          </div>
         </Section>
       )}
     </AnimatePresence>

diff --git a/src/components/2D/Cursor.jsx b/src/components/2D/Cursor.jsx
@@ -150,8 +150,8 @@ export const Cursor = () => {
   }, [menuOpened])
 
   const getCursorColor = () => {
-    if (isShowingFullInformationModal) return '#3b82f6'
-    return '#65a30c'
+    // if (isShowingFullInformationModal) return '#3b82f6'
+    return '#fff'
   }
 
   return (
@@ -162,54 +162,21 @@ export const Cursor = () => {
         position: 'absolute',
         pointerEvents: 'none',
         left: clientX,
-        top: clientY
+        top: clientY,
+        mixBlendMode: 'difference'
       }}>
-      {!isAudioActive && (
-        <div className="text-primary bold text-sm absolute w-[200px] -mt-12 -ml-[13px]">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            className="animate-[pulse_1.4s_cubic-bezier(1,0,0,1)_infinite]"
-            width="28"
-            height="28"
-            viewBox="0 0 24 24">
-            <g fill="none" stroke="currentColor" strokeWidth="1.5">
-              <path d="M7.016 17.042C6.768 17 6.512 17 6 17c-1.374 0-2.06 0-2.66-.277a3.215 3.215 0 0 1-1.381-1.3c-.314-.582-.35-1.186-.424-2.395A17.127 17.127 0 0 1 1.5 12c0-.323.013-.671.035-1.029c.073-1.208.11-1.813.424-2.394a3.215 3.215 0 0 1 1.38-1.3C3.94 7 4.627 7 6 7c.512 0 .768 0 1.016-.042a3 3 0 0 0 .712-.214c.23-.101.444-.242.871-.524l.22-.144C11.36 4.399 12.632 3.56 13.7 3.925c.205.07.403.17.58.295c.835.587.972 1.879 1.094 4.357" />
-              <path
-                d="M15.5 8.5V12c0 .532-.035 1.488-.087 2.605c-.14 3.018-.21 4.526-1.133 5.175a2.317 2.317 0 0 1-.58.295c-.967.33-2.102-.328-4.2-1.702C8.833 17.915 7.4 17 7 17"
-                opacity=".5"
-                className=""
-              />
-              <path
-                strokeLinecap="round"
-                d="M20 18s1.5-1.8 1.5-6c0-2.433-.503-4.061-.927-5M18 15s.5-.9.5-3c0-.862-.084-1.522-.183-2"
-                opacity=".5"
-              />
-              <path strokeLinecap="round" d="M22 2L2 22" />
-            </g>
-          </svg>
-        </div>
-      )}
       <svg
         width={60}
         height={60}
         viewBox="0 0 100 100"
         style={{
-          transform: `translate(-50%, -50%) scale(${isCursorActive ? 1.5 : 1})`,
+          transform: `translate(-50%, -50%) scale(${isCursorActive ? 2.3 : 1})`,
           transition: 'transform .25s ease-in-out',
-          stroke: isCursorActive ? getCursorColor() : 'transparent',
-          strokeWidth: isCursorActive ? 3 : 1,
-          fill: isCursorActive ? 'rgba(255,255,255,0.4)' : getCursorColor()
+          stroke: 'transparent',
+          strokeWidth: 1,
+          fill: getCursorColor()
         }}>
         <circle cx="50" cy="50" r="16" />
-        {!isAudioActive && (
-          <circle
-            className="animate-[ping_2s_cubic-bezier(0.18,0.89,0.32,1.27)_infinite] origin-center"
-            cx="50"
-            cy="50"
-            r="28"
-            style={{ opacity: 0.25 }}
-          />
-        )}
       </svg>
     </div>
   )

diff --git a/src/components/2D/Game/Components/Controls.jsx b/src/components/2D/Game/Components/Controls.jsx
@@ -53,7 +53,7 @@ export const Controls = ({ handleTogglePauseTheGame }) => {
   }
 
   return (
-    <div className="flex justify-between items-center absolute -bottom-28 w-full left-0 right-0">
+    <div className="flex justify-between items-center absolute -bottom-24 w-full left-0 right-0">
       <div className="flex ml-18 items-center font-semibold text-gray-800 pixel">
         Your Life:
         <div className="h-4 relative ml-2 w-48 rounded-full overflow-hidden">
@@ -184,7 +184,7 @@ export const Controls = ({ handleTogglePauseTheGame }) => {
         <button
           onClick={handleJumpToPrize}
           className="no-tooltip bg-primary ring-lime-600 focus:outline-lime-700 h-10 text-white rounded-2xl px-4 flex justify-center items-center pixel text-lg">
-          Jump to {nextPrize}
+          Show {nextPrize}
         </button>
       </div>
       <div />

diff --git a/src/components/2D/Game/Components/Guide.jsx b/src/components/2D/Game/Components/Guide.jsx
@@ -1,49 +1,21 @@
-import { useAtomValue } from 'jotai'
-import { currentGameGuideAtom, GAME_GUIDES, showGameGuideAtom } from '@/atoms/gameGuide.js'
-
-export const Guide = ({ dinoRef }) => {
-  const showGameGuide = useAtomValue(showGameGuideAtom)
-  const currentGameGuide = useAtomValue(currentGameGuideAtom)
+export const Guide = () => {
+  return (
+    <ul className="list-disc ml-8 mt-8 text-base text-gray-700 pixel">
+      <li>
+        <kbd>Space</kbd> shoot 🚀
+      </li>
 
-  if (!showGameGuide) return null
+      <li>
+        <kbd>D</kbd> or <kbd>➡️</kbd> defend🛡️
+      </li>
 
-  let content = null
-  switch (currentGameGuide) {
-    case GAME_GUIDES[0]:
-      content = (
-        <h1>
-          Press <kbd>D</kbd> or <kbd>➡</kbd> to defend
-        </h1>
-      )
-      break
-    case GAME_GUIDES[1]:
-      content = (
-        <h1>
-          Press <kbd>W</kbd> or <kbd>⬆</kbd> to jump
-        </h1>
-      )
-      break
-    case GAME_GUIDES[2]:
-      content = (
-        <h1>
-          Press <kbd>S</kbd> or <kbd>⬇</kbd> to sit
-        </h1>
-      )
-      break
-    case GAME_GUIDES[3]:
-      content = (
-        <h1>
-          Press <kbd>Space</kbd> to shoot
-        </h1>
-      )
-      break
-  }
+      <li>
+        <kbd>W</kbd> or <kbd>⬆️</kbd> jump 🚶
+      </li>
 
-  return (
-    <div
-      className="absolute bottom-56 w-72 bg-primary rounded-2xl p-4 pixel"
-      style={{ right: '200px' }}>
-      {content}
-    </div>
+      <li>
+        <kbd>S</kbd> or <kbd>⬇️</kbd> sit down
+      </li>
+    </ul>
   )
 }
diff --git a/src/components/2D/Game/Components/TopTexts.jsx b/src/components/2D/Game/Components/TopTexts.jsx
@@ -8,6 +8,7 @@ import {
 } from '@/atoms/game'
 import { useAtomValue } from 'jotai'
 import { gameEnableRewardsAtom, nextPrizeAtom } from '@/atoms/prizes.js'
+import { Guide } from '@/components/2D/Game/Components/Guide.jsx'
 
 export const TopTexts = ({ showingReward }) => {
   const isStarted = useAtomValue(gameIsStartedAtom)
@@ -27,10 +28,12 @@ export const TopTexts = ({ showingReward }) => {
             Press <kbd>Space</kbd> to start the game with interesting prizes! 🎁
           </span>
           <br />
-          <span className="text-lg">
-            {' '}
-            Use <kbd>Space</kbd> to shoot and defend yourself from the dinosaur. 🦖
-          </span>
+          {/*<span className="text-lg">*/}
+          {/*  {' '}*/}
+          {/*  Use <kbd>Space</kbd> to shoot and defend yourself from the dinosaur. 🦖*/}
+          {/*</span>*/}
+
+          <Guide />
         </div>
       )}
       {!isStarted && hasWon && !hasLoose && (

diff --git a/src/components/2D/Game/Game.jsx b/src/components/2D/Game/Game.jsx
@@ -91,7 +91,6 @@ export const GameSection = () => {
             showingReward={showingReward}
             handleTogglePauseTheGame={handleTogglePauseTheGame}
           />
-          <Guide dinoRef={dinoRef} />
         </div>
 
         <Audios

diff --git a/src/components/2D/Game/hooks/useGameInterval.js b/src/components/2D/Game/hooks/useGameInterval.js
@@ -9,7 +9,6 @@ import {
   scrollIntoView
 } from '@/atoms/game'
 import { isPrizeVisibleAtom } from '@/atoms/prizes.js'
-import { showGuideAtom } from '@/atoms/gameGuide.js'
 import { useScroll } from '@react-three/drei'
 
 export const useGameInterval = ({ victoryAudioRef }) => {
@@ -19,7 +18,6 @@ export const useGameInterval = ({ victoryAudioRef }) => {
   const isPaused = useAtomValue(gamePauseAtom)
   const isPrizeVisible = useAtomValue(isPrizeVisibleAtom)
   const score = useAtomValue(gameScoreAtom)
-  const showGameGuide = useSetAtom(showGuideAtom)
   const setScore = useSetAtom(gameSetScoreAtom)
   const setTime = useSetAtom(gameTimeAtom)
   const setIsPaused = useSetAtom(gamePauseAtom)
@@ -65,19 +63,6 @@ export const useGameInterval = ({ victoryAudioRef }) => {
       if (prevScore >= 700) {
         clearInterval(gameTimerRef.current)
       }
-
-      /**
-       * Show the guide
-       */
-      if (prevTime >= 2 && prevTime < 2.1) {
-        showGameGuide('defend')
-      } else if (prevTime >= 6 && prevTime < 6.1) {
-        showGameGuide('jump')
-      } else if (prevTime >= 13 && prevTime < 13.1) {
-        showGameGuide('sit')
-      } else if (prevTime >= 18 && prevTime < 18.1) {
-        showGameGuide('shoot')
-      }
     }, 400)
   }, [isStarted, isPaused, setScore, setTime])
 

diff --git a/src/components/2D/Game/hooks/useKeyboard.js b/src/components/2D/Game/hooks/useKeyboard.js
@@ -7,7 +7,6 @@ import {
   gamePlayerSetCurrentAction,
   gameSetIsStartedAtom
 } from '@/atoms/game'
-import { showGameGuideAtom } from '@/atoms/gameGuide.js'
 
 export const useKeyboard = ({
   handleTogglePauseTheGame,
@@ -18,7 +17,6 @@ export const useKeyboard = ({
   const isStarted = useAtomValue(gameIsStartedAtom)
   const [isPaused, setIsPaused] = useAtom(gamePauseAtom)
   const setIsStarted = useSetAtom(gameSetIsStartedAtom)
-  const setShowGuide = useSetAtom(showGameGuideAtom)
   const setCurrentAction = useSetAtom(gamePlayerSetCurrentAction)
 
   useEffect(() => {
@@ -51,23 +49,19 @@ export const useKeyboard = ({
             setCurrentAction(PLAYER_ACTIONS.shoot)
           }
           setIsPaused(false)
-          setShowGuide(false)
           e.preventDefault()
         }
         if (e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'a' || e.key === 'd') {
           setCurrentAction(PLAYER_ACTIONS.defend)
           setIsPaused(false)
-          setShowGuide(false)
           e.preventDefault()
         } else if (e.key === 'ArrowUp' || e.key === 'w') {
           setCurrentAction(PLAYER_ACTIONS.jump)
           setIsPaused(false)
-          setShowGuide(false)
           e.preventDefault()
         } else if (e.key === 'ArrowDown' || e.key === 's') {
           setCurrentAction(PLAYER_ACTIONS.sit)
           setIsPaused(false)
-          setShowGuide(false)
           e.preventDefault()
         } else if (e.key === 'Escape') {
           handleTogglePauseTheGame()
-Original file line number
+Diff line change
@@ Expand Up / @@ -91,7 +91,6 @@ export const GameSection = () => { @@
                 showingReward={showingReward}
                 handleTogglePauseTheGame={handleTogglePauseTheGame}
               />
-              <Guide dinoRef={dinoRef} />
             </div>
             <Audios
@@ Expand Down @@