Skip to content

Commit 4ce48da

Browse files
sayjeyhisayjeyhi
committed
improve the whole user interface
1 parent f73437a commit 4ce48da

19 files changed

+391
-492
lines changed

‎index.html

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,14 @@
5353
})(window,document,'script','dataLayer','GTM-WMZX9BLX');</script>
5454
<!-- End Google Tag Manager -->
5555

56+
<script>
57+
if ("paintWorklet" in CSS) {
58+
CSS.paintWorklet.addModule(
59+
"https://www.unpkg.com/[email protected]/squircle.min.js"
60+
);
61+
}
62+
</script>
63+
5664
<style>
5765
.loader {
5866
width: 88px;

‎src/atoms/audio.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@ import { atomWithStorage } from 'jotai/utils'
22
import { atom } from 'jotai'
33

44
export const gameIsSoundsEnabledAtom = atomWithStorage('gameIsSoundsEnabled', false)
5-
export const isMusicEnabledAtom = atomWithStorage('isMusicEnabled', true)
5+
export const isMusicEnabledAtom = atomWithStorage('isMusicEnabled', false)
66

77
export const isTalkingAtom = atom(false)

‎src/atoms/gameGuide.js

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎src/components/2D/AboutMe.jsx

Lines changed: 40 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Section } from './Section'
33
import { AnimatePresence } from 'framer-motion'
44
import { useAtom, useAtomValue } from 'jotai'
55
import { currentSectionAtom, isSidebarOpenedAtom } from '@/atoms/menu.js'
6+
import NameWithRandomDarkColors from '@/components/2D/NameWithRandomColors'
67

78
export const AboutMeSection = props => {
89
const [section, setSection] = useAtom(currentSectionAtom)
@@ -15,25 +16,46 @@ export const AboutMeSection = props => {
1516
<Section key="placeholder" />
1617
) : (
1718
<Section key="me">
18-
<h1 className="text-3xl font-extrabold leading-none md:text-5xl sm:text-3xl lg:text-7xl">
19-
Hi, I&apos;m
20-
<br />
21-
<span className="bg-amber-50 px-1">Jafar Rezaei</span>
22-
</h1>
23-
<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">
24-
A curious person who wants to improve stuff.
25-
<br />
26-
I&apos;m a software engineer and I&apos;m interested in web development.
27-
<br />
28-
with 9+ years of experience in software development.
29-
</p>
19+
<div className="window">
20+
<h1 className="leading-none font-light text-xl sm:text-md">
21+
<span className="bg-white">Hi, I&apos;m</span>
22+
<br />
23+
<br />
24+
<NameWithRandomDarkColors />
25+
<br />
26+
</h1>
27+
<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">
28+
<span {...cursorHandlers}>A published author with 10+ years in the field,</span>
29+
<br />
30+
<span {...cursorHandlers} className="bg-white">
31+
dedicated to learning, sharing insights,
32+
</span>
33+
<br />
34+
<span {...cursorHandlers}>and building impactful solutions across borders. </span>
35+
<br />
36+
</p>
3037

31-
<button
32-
onClick={() => setSection(1)}
33-
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"
34-
{...cursorHandlers}>
35-
Tell me more
36-
</button>
38+
<div className="italic text-white mt-5 text-base">
39+
Maybe a &quot;Code Whisperer&quot;!?
40+
</div>
41+
42+
<button
43+
onClick={() => setSection(1)}
44+
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"
45+
{...cursorHandlers}>
46+
Up for a magical twist?
47+
<div id="mouse-scroll">
48+
<div className="mouse">
49+
<div className="mouse-in"></div>
50+
</div>
51+
<div className="arrows">
52+
<span className="down-arrow-1"></span>
53+
<span className="down-arrow-2"></span>
54+
<span className="down-arrow-3"></span>
55+
</div>
56+
</div>
57+
</button>
58+
</div>
3759
</Section>
3860
)}
3961
</AnimatePresence>

‎src/components/2D/Cursor.jsx

Lines changed: 8 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -150,8 +150,8 @@ export const Cursor = () => {
150150
}, [menuOpened])
151151

152152
const getCursorColor = () => {
153-
if (isShowingFullInformationModal) return '#3b82f6'
154-
return '#65a30c'
153+
// if (isShowingFullInformationModal) return '#3b82f6'
154+
return '#fff'
155155
}
156156

157157
return (
@@ -162,54 +162,21 @@ export const Cursor = () => {
162162
position: 'absolute',
163163
pointerEvents: 'none',
164164
left: clientX,
165-
top: clientY
165+
top: clientY,
166+
mixBlendMode: 'difference'
166167
}}>
167-
{!isAudioActive && (
168-
<div className="text-primary bold text-sm absolute w-[200px] -mt-12 -ml-[13px]">
169-
<svg
170-
xmlns="http://www.w3.org/2000/svg"
171-
className="animate-[pulse_1.4s_cubic-bezier(1,0,0,1)_infinite]"
172-
width="28"
173-
height="28"
174-
viewBox="0 0 24 24">
175-
<g fill="none" stroke="currentColor" strokeWidth="1.5">
176-
<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" />
177-
<path
178-
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"
179-
opacity=".5"
180-
className=""
181-
/>
182-
<path
183-
strokeLinecap="round"
184-
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"
185-
opacity=".5"
186-
/>
187-
<path strokeLinecap="round" d="M22 2L2 22" />
188-
</g>
189-
</svg>
190-
</div>
191-
)}
192168
<svg
193169
width={60}
194170
height={60}
195171
viewBox="0 0 100 100"
196172
style={{
197-
transform: `translate(-50%, -50%) scale(${isCursorActive ? 1.5 : 1})`,
173+
transform: `translate(-50%, -50%) scale(${isCursorActive ? 2.3 : 1})`,
198174
transition: 'transform .25s ease-in-out',
199-
stroke: isCursorActive ? getCursorColor() : 'transparent',
200-
strokeWidth: isCursorActive ? 3 : 1,
201-
fill: isCursorActive ? 'rgba(255,255,255,0.4)' : getCursorColor()
175+
stroke: 'transparent',
176+
strokeWidth: 1,
177+
fill: getCursorColor()
202178
}}>
203179
<circle cx="50" cy="50" r="16" />
204-
{!isAudioActive && (
205-
<circle
206-
className="animate-[ping_2s_cubic-bezier(0.18,0.89,0.32,1.27)_infinite] origin-center"
207-
cx="50"
208-
cy="50"
209-
r="28"
210-
style={{ opacity: 0.25 }}
211-
/>
212-
)}
213180
</svg>
214181
</div>
215182
)

‎src/components/2D/Game/Components/Controls.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export const Controls = ({ handleTogglePauseTheGame }) => {
5353
}
5454

5555
return (
56-
<div className="flex justify-between items-center absolute -bottom-28 w-full left-0 right-0">
56+
<div className="flex justify-between items-center absolute -bottom-24 w-full left-0 right-0">
5757
<div className="flex ml-18 items-center font-semibold text-gray-800 pixel">
5858
Your Life:
5959
<div className="h-4 relative ml-2 w-48 rounded-full overflow-hidden">
@@ -184,7 +184,7 @@ export const Controls = ({ handleTogglePauseTheGame }) => {
184184
<button
185185
onClick={handleJumpToPrize}
186186
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">
187-
Jump to {nextPrize}
187+
Show {nextPrize}
188188
</button>
189189
</div>
190190
<div />

‎src/components/2D/Game/Components/Guide.jsx

Lines changed: 16 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,21 @@
1-
import { useAtomValue } from 'jotai'
2-
import { currentGameGuideAtom, GAME_GUIDES, showGameGuideAtom } from '@/atoms/gameGuide.js'
3-
4-
export const Guide = ({ dinoRef }) => {
5-
const showGameGuide = useAtomValue(showGameGuideAtom)
6-
const currentGameGuide = useAtomValue(currentGameGuideAtom)
1+
export const Guide = () => {
2+
return (
3+
<ul className="list-disc ml-8 mt-8 text-base text-gray-700 pixel">
4+
<li>
5+
<kbd>Space</kbd> shoot 🚀
6+
</li>
77

8-
if (!showGameGuide) return null
8+
<li>
9+
<kbd>D</kbd> or <kbd>➡️</kbd> defend🛡️
10+
</li>
911

10-
let content = null
11-
switch (currentGameGuide) {
12-
case GAME_GUIDES[0]:
13-
content = (
14-
<h1>
15-
Press <kbd>D</kbd> or <kbd>➡</kbd> to defend
16-
</h1>
17-
)
18-
break
19-
case GAME_GUIDES[1]:
20-
content = (
21-
<h1>
22-
Press <kbd>W</kbd> or <kbd>⬆</kbd> to jump
23-
</h1>
24-
)
25-
break
26-
case GAME_GUIDES[2]:
27-
content = (
28-
<h1>
29-
Press <kbd>S</kbd> or <kbd>⬇</kbd> to sit
30-
</h1>
31-
)
32-
break
33-
case GAME_GUIDES[3]:
34-
content = (
35-
<h1>
36-
Press <kbd>Space</kbd> to shoot
37-
</h1>
38-
)
39-
break
40-
}
12+
<li>
13+
<kbd>W</kbd> or <kbd>⬆️</kbd> jump 🚶
14+
</li>
4115

42-
return (
43-
<div
44-
className="absolute bottom-56 w-72 bg-primary rounded-2xl p-4 pixel"
45-
style={{ right: '200px' }}>
46-
{content}
47-
</div>
16+
<li>
17+
<kbd>S</kbd> or <kbd>⬇️</kbd> sit down
18+
</li>
19+
</ul>
4820
)
4921
}

‎src/components/2D/Game/Components/TopTexts.jsx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
} from '@/atoms/game'
99
import { useAtomValue } from 'jotai'
1010
import { gameEnableRewardsAtom, nextPrizeAtom } from '@/atoms/prizes.js'
11+
import { Guide } from '@/components/2D/Game/Components/Guide.jsx'
1112

1213
export const TopTexts = ({ showingReward }) => {
1314
const isStarted = useAtomValue(gameIsStartedAtom)
@@ -27,10 +28,12 @@ export const TopTexts = ({ showingReward }) => {
2728
Press <kbd>Space</kbd> to start the game with interesting prizes! 🎁
2829
</span>
2930
<br />
30-
<span className="text-lg">
31-
{' '}
32-
Use <kbd>Space</kbd> to shoot and defend yourself from the dinosaur. 🦖
33-
</span>
31+
{/*<span className="text-lg">*/}
32+
{/* {' '}*/}
33+
{/* Use <kbd>Space</kbd> to shoot and defend yourself from the dinosaur. 🦖*/}
34+
{/*</span>*/}
35+
36+
<Guide />
3437
</div>
3538
)}
3639
{!isStarted && hasWon && !hasLoose && (

‎src/components/2D/Game/Game.jsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,6 @@ export const GameSection = () => {
9191
showingReward={showingReward}
9292
handleTogglePauseTheGame={handleTogglePauseTheGame}
9393
/>
94-
<Guide dinoRef={dinoRef} />
9594
</div>
9695

9796
<Audios

‎src/components/2D/Game/hooks/useGameInterval.js

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import {
99
scrollIntoView
1010
} from '@/atoms/game'
1111
import { isPrizeVisibleAtom } from '@/atoms/prizes.js'
12-
import { showGuideAtom } from '@/atoms/gameGuide.js'
1312
import { useScroll } from '@react-three/drei'
1413

1514
export const useGameInterval = ({ victoryAudioRef }) => {
@@ -19,7 +18,6 @@ export const useGameInterval = ({ victoryAudioRef }) => {
1918
const isPaused = useAtomValue(gamePauseAtom)
2019
const isPrizeVisible = useAtomValue(isPrizeVisibleAtom)
2120
const score = useAtomValue(gameScoreAtom)
22-
const showGameGuide = useSetAtom(showGuideAtom)
2321
const setScore = useSetAtom(gameSetScoreAtom)
2422
const setTime = useSetAtom(gameTimeAtom)
2523
const setIsPaused = useSetAtom(gamePauseAtom)
@@ -65,19 +63,6 @@ export const useGameInterval = ({ victoryAudioRef }) => {
6563
if (prevScore >= 700) {
6664
clearInterval(gameTimerRef.current)
6765
}
68-
69-
/**
70-
* Show the guide
71-
*/
72-
if (prevTime >= 2 && prevTime < 2.1) {
73-
showGameGuide('defend')
74-
} else if (prevTime >= 6 && prevTime < 6.1) {
75-
showGameGuide('jump')
76-
} else if (prevTime >= 13 && prevTime < 13.1) {
77-
showGameGuide('sit')
78-
} else if (prevTime >= 18 && prevTime < 18.1) {
79-
showGameGuide('shoot')
80-
}
8166
}, 400)
8267
}, [isStarted, isPaused, setScore, setTime])
8368

‎src/components/2D/Game/hooks/useKeyboard.js

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import {
77
gamePlayerSetCurrentAction,
88
gameSetIsStartedAtom
99
} from '@/atoms/game'
10-
import { showGameGuideAtom } from '@/atoms/gameGuide.js'
1110

1211
export const useKeyboard = ({
1312
handleTogglePauseTheGame,
@@ -18,7 +17,6 @@ export const useKeyboard = ({
1817
const isStarted = useAtomValue(gameIsStartedAtom)
1918
const [isPaused, setIsPaused] = useAtom(gamePauseAtom)
2019
const setIsStarted = useSetAtom(gameSetIsStartedAtom)
21-
const setShowGuide = useSetAtom(showGameGuideAtom)
2220
const setCurrentAction = useSetAtom(gamePlayerSetCurrentAction)
2321

2422
useEffect(() => {
@@ -51,23 +49,19 @@ export const useKeyboard = ({
5149
setCurrentAction(PLAYER_ACTIONS.shoot)
5250
}
5351
setIsPaused(false)
54-
setShowGuide(false)
5552
e.preventDefault()
5653
}
5754
if (e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'a' || e.key === 'd') {
5855
setCurrentAction(PLAYER_ACTIONS.defend)
5956
setIsPaused(false)
60-
setShowGuide(false)
6157
e.preventDefault()
6258
} else if (e.key === 'ArrowUp' || e.key === 'w') {
6359
setCurrentAction(PLAYER_ACTIONS.jump)
6460
setIsPaused(false)
65-
setShowGuide(false)
6661
e.preventDefault()
6762
} else if (e.key === 'ArrowDown' || e.key === 's') {
6863
setCurrentAction(PLAYER_ACTIONS.sit)
6964
setIsPaused(false)
70-
setShowGuide(false)
7165
e.preventDefault()
7266
} else if (e.key === 'Escape') {
7367
handleTogglePauseTheGame()

0 commit comments

Comments
 (0)