Skip to content

Commit 07b024d

Browse files
ParthPatel2000ParthPatel2000
committed
updated the mobile layout to use the same css as desktop
1 parent 98f587b commit 07b024d

4 files changed

Lines changed: 92 additions & 67 deletions

File tree

‎src/Layout.jsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,18 +33,27 @@ export default function Layout({ children }) {
3333
}}
3434
/> */}
3535

36-
{/* Fractals */}
36+
{/* Free Floating Particles */}
3737
<Particles
3838
className="absolute inset-0 w-full h-full z-0"
3939
init={particlesInit}
4040
options={{
4141
background: { color: "#0f0f0f" },
42-
fpsLimit: 60,
42+
fpsLimit: 90,
4343
interactivity: {
4444
events: {
4545
onHover: { enable: true, mode: "repulse" },
4646
onClick: { enable: true, mode: "push" },
4747
},
48+
modes: {
49+
repulse: {
50+
distance: 150, // <--- this is the repulse radius
51+
duration: 0.4, // optional, how long the repulse lasts
52+
},
53+
push: {
54+
quantity: 4,
55+
},
56+
},
4857
},
4958
particles: {
5059
number: { value: 20, limit: 20, density: { enable: true, area: 800 } },

‎src/game_2048/TwoZeroFourEight.jsx‎

Lines changed: 58 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ export default function TwoZeroFourEight() {
8787
const handleTouchStart = (e) => {
8888
touchStartX = e.changedTouches[0].screenX;
8989
touchStartY = e.changedTouches[0].screenY;
90-
90+
9191
// Check if touch started on game board
9292
const target = e.target;
9393
isGameBoardTouch = target.closest('.game-board-area') !== null;
@@ -102,7 +102,7 @@ export default function TwoZeroFourEight() {
102102

103103
const handleTouchEnd = (e) => {
104104
if (!isGameBoardTouch) return; // Only handle swipes that started on game board
105-
105+
106106
touchEndX = e.changedTouches[0].screenX;
107107
touchEndY = e.changedTouches[0].screenY;
108108
handleSwipe();
@@ -316,7 +316,7 @@ export default function TwoZeroFourEight() {
316316
{["maximizeScore", "maximizeMerges", "clusterTiles", "monotonicity", "expectiMax", "neuralNet", "pythonQ"].map(model => (
317317
<button
318318
key={model}
319-
className={`px-2 py-1 rounded ${aiModel === model ? "bg-blue-600 text-white" : "bg-gray-200"}`}
319+
className={`px-2 py-1 ${aiModel === model ? "bg-blue-600 text-white" : "bg-gray-700/30"} backdrop-blur-sm flex flex-wrap gap-2 justify-center rounded `}
320320
onClick={() => {
321321
setAiModel(model);
322322
if (model === "expectiMax") {
@@ -346,10 +346,10 @@ export default function TwoZeroFourEight() {
346346
<div className="glassmorphic p-4">
347347
<h3 className="font-semibold mb-2">ExpectiMax</h3>
348348
<div className="flex flex-col gap-2">
349-
<label className="text-sm">ExpectiMax Depth</label>
349+
<label className="text-sm ">ExpectiMax Depth</label>
350350
<input
351351
type="number"
352-
className="border rounded p-1"
352+
className="border rounded p-1 ml-2 text-black"
353353
value={expectiMaxDepth}
354354
onChange={(e) => setExpectiMaxDepth(parseInt(e.target.value))}
355355
/>
@@ -360,7 +360,7 @@ export default function TwoZeroFourEight() {
360360
<input
361361
type="number"
362362
step="0.1"
363-
className="border rounded p-1 ml-2"
363+
className="text-black border rounded p-1 ml-2"
364364
value={value}
365365
onChange={(e) => {
366366
saveExpectiMaxWeights({ ...expectiMaxWeights, [key]: parseFloat(e.target.value) });
@@ -393,65 +393,70 @@ export default function TwoZeroFourEight() {
393393
</div>
394394

395395
{/* Mobile Layout - Hidden on desktop */}
396-
<div className="md:hidden px-4 pb-4">
397-
{/* Stats at top on mobile */}
398-
<div className="bg-white rounded-lg shadow-md p-4 mb-4">
396+
<div className="md:hidden px-4 pb-4 space-y-4">
397+
398+
{/* Stats Panel */}
399+
<div className="glassmorphic p-4 border border-white/30 text-white">
399400
<div className="flex justify-between items-center">
400401
<div>
401402
<p className="text-sm">Score: <span className="font-semibold">{score}</span></p>
402403
<p className="text-sm">Moves: <span className="font-semibold">{moves}</span></p>
403404
{isGameOver && <p className="text-red-500 font-bold text-sm">Game Over!</p>}
404405
</div>
405-
<button onClick={handleRestart} className="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600">
406+
<button
407+
onClick={handleRestart}
408+
className="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600"
409+
>
406410
Restart
407411
</button>
408412
</div>
409413
</div>
410414

411-
{/* Game board centered */}
412-
<div className="flex justify-center mb-4">
413-
<div className="select-none game-board-area touch-none"> {/* Prevent text selection and default touch behaviors */}
415+
{/* Game Board */}
416+
<div className="flex justify-center">
417+
<div className="select-none game-board-area touch-none">
414418
<GameBoard board={board} />
415419
</div>
416420
</div>
417421

418-
{/* Controls below board */}
419-
<div className="bg-white rounded-lg shadow-md p-4 mb-4">
422+
{/* Controls Panel */}
423+
<div className="glassmorphic p-4 border border-white/30 text-white flex flex-col gap-2">
420424
<h2 className="font-bold mb-2">Controls</h2>
421-
<div className="flex gap-2">
422-
<button
423-
onClick={handleAi}
424-
className="flex-1 px-3 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 text-sm"
425-
>
426-
Next AI Move
427-
</button>
428-
<button
429-
onClick={() => {
430-
if (isGameOver) handleRestart();
431-
setIsAiRunning(!isAiRunning);
432-
}}
433-
className={`flex-1 px-3 py-2 text-sm ${isAiRunning ? "bg-red-500 hover:bg-red-600" : "bg-green-500 hover:bg-green-600"} text-white rounded`}
434-
>
435-
{isAiRunning ? "Stop AI" : "Start AI"}
436-
</button>
437-
</div>
425+
<button
426+
onClick={handleAi}
427+
className="px-3 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 w-full text-sm"
428+
>
429+
Next AI Move
430+
</button>
431+
<button
432+
onClick={() => {
433+
if (isGameOver) handleRestart();
434+
setIsAiRunning(!isAiRunning);
435+
}}
436+
className={`px-3 py-2 w-full text-sm rounded text-white ${isAiRunning ? "bg-red-500 hover:bg-red-600" : "bg-green-500 hover:bg-green-600"
437+
}`}
438+
>
439+
{isAiRunning ? "Stop AI" : "Start AI"}
440+
</button>
438441
</div>
439442

440-
{/* AI Model Selector - Collapsible on mobile */}
441-
<div className="bg-white rounded-lg shadow-md p-4 mb-4">
442-
<h3 className="font-semibold mb-2 cursor-pointer select-none flex justify-between items-center"
443+
{/* AI Model Selector */}
444+
<div className="glassmorphic p-4 border border-white/30 text-white">
445+
<h3
446+
className="font-semibold mb-2 cursor-pointer select-none flex justify-between items-center"
443447
onClick={() => setIsHeuristicModelSelectorOpen(!isHeuristicModelSelectorOpen)}
444448
>
445449
<span>AI Models</span>
446450
<span>{isHeuristicModelSelectorOpen ? "−" : "+"}</span>
447451
</h3>
448452

449453
{isHeuristicModelSelectorOpen && (
450-
<div className="grid grid-cols-2 gap-2">
454+
<div className="flex flex-col gap-2">
451455
{["maximizeScore", "maximizeMerges", "clusterTiles", "monotonicity", "expectiMax", "neuralNet", "pythonQ"].map(model => (
452456
<button
453457
key={model}
454-
className={`px-2 py-1 rounded text-xs ${aiModel === model ? "bg-blue-600 text-white" : "bg-gray-200"}`}
458+
className={`px-2 py-1 rounded text-sm w-full ${aiModel === model ? "bg-blue-600 text-white" : "bg-gray-700/30"
459+
} backdrop-blur-sm flex justify-center`}
455460
onClick={() => {
456461
setAiModel(model);
457462
if (model === "expectiMax") {
@@ -464,41 +469,42 @@ export default function TwoZeroFourEight() {
464469
}
465470
}}
466471
>
467-
{model === "maximizeScore" ? "Max Score" :
468-
model === "maximizeMerges" ? "Max Merges" :
469-
model === "clusterTiles" ? "Cluster" :
470-
model === "monotonicity" ? "Monotonic" :
472+
{model === "maximizeScore" ? "Maximize Score" :
473+
model === "maximizeMerges" ? "Maximize Merges" :
474+
model === "clusterTiles" ? "Cluster Tiles" :
475+
model === "monotonicity" ? "Monotonicity" :
471476
model === "expectiMax" ? "ExpectiMax" :
472-
model === "neuralNet" ? "Neural Net" :
473-
"Q-Learning"}
477+
model === "neuralNet" ? "Neural Network" :
478+
"Q Learning"}
474479
</button>
475480
))}
476481
</div>
477482
)}
478483
</div>
479484

480-
{/* ExpectiMax Weights - Show on mobile when ExpectiMax is selected */}
485+
{/* ExpectiMax Weights */}
481486
{(aiModel === "expectiMax" || aiModel === "pythonQ") && (
482-
<div className="bg-white rounded-lg shadow-md p-4">
487+
<div className="glassmorphic p-4 border border-white/30 text-white flex flex-col gap-2">
483488
<h3 className="font-semibold mb-2">ExpectiMax Settings</h3>
484-
<div className="space-y-3">
485-
<div>
486-
<label className="text-sm block mb-1">Depth</label>
489+
490+
<div className="flex flex-col gap-2">
491+
<div className="flex flex-col">
492+
<label className="text-sm mb-1">Depth</label>
487493
<input
488494
type="number"
489-
className="border rounded p-2 w-full"
495+
className="border rounded p-2 w-full text-black"
490496
value={expectiMaxDepth}
491497
onChange={(e) => setExpectiMaxDepth(parseInt(e.target.value))}
492498
/>
493499
</div>
494500

495501
{Object.entries(expectiMaxWeights).map(([key, value]) => (
496-
<div key={key}>
497-
<label className="text-sm capitalize block mb-1">{key} Weight</label>
502+
<div key={key} className="flex flex-col">
503+
<label className="text-sm mb-1 capitalize">{key} Weight</label>
498504
<input
499505
type="number"
500506
step="0.1"
501-
className="border rounded p-2 w-full"
507+
className="border rounded p-2 w-full text-black"
502508
value={value}
503509
onChange={(e) => {
504510
saveExpectiMaxWeights({ ...expectiMaxWeights, [key]: parseFloat(e.target.value) });

‎src/game_tictactoe/TicTacToe.jsx‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -64,22 +64,15 @@ export default function TicTacToe() {
6464
};
6565

6666
return (
67-
<div className="mt-4">
68-
<div className="flex justify-left items-center ">
69-
<button onClick={resetGame} className="mb-4 p-2 bg-blue-500 text-white rounded">
70-
Reset Game
71-
</button>
72-
<button onClick={() => alert("Tic Tac Toe is a simple two-player game where players take turns marking Xs and Os on a 3x3 grid. The first player to get three of their marks in a row (horizontally, vertically, or diagonally) wins the game. If all nine squares are filled and neither player has three in a row, the game is a draw.")} className="mb-4 ml-4 p-2 bg-green-500 text-white rounded">
73-
How to Play
74-
</button>
75-
</div>
67+
<div className="flex flex-col items-center mt-4 space-y-4">
68+
7669
<div className="flex justify-center items-center">
7770
<h3 className="p-3 text-white justify-center">Winner: {winner}</h3>
7871
<h3 className="p-3 text-white justify-center">Current Player: {currentPlayer}</h3>
7972
</div>
80-
<div className="inline-block glassmorphic p-5 mx-auto">
73+
<div className="inline-block glassmorphic p-5 mx-auto ">
8174
{/* Game board will go here */}
82-
<div className="grid grid-cols-3 gap-4">
75+
<div className="grid grid-cols-3 gap-4 text-black">
8376
<button
8477
onClick={() => handleClick(0)}
8578
className="relative w-24 h-24 bg-gray-300 flex items-center justify-center text-4xl font-bold"
@@ -143,8 +136,17 @@ export default function TicTacToe() {
143136
>
144137
{board[8]}
145138
</button>
146-
139+
147140
</div>
141+
142+
</div>
143+
<div className="flex items-center ">
144+
<button onClick={resetGame} className="mb-4 p-2 bg-blue-500 text-white rounded">
145+
Reset Game
146+
</button>
147+
<button onClick={() => alert("Tic Tac Toe is a simple two-player game where players take turns marking Xs and Os on a 3x3 grid. The first player to get three of their marks in a row (horizontally, vertically, or diagonally) wins the game. If all nine squares are filled and neither player has three in a row, the game is a draw.")} className="mb-4 ml-4 p-2 bg-green-500 text-white rounded">
148+
How to Play
149+
</button>
148150
</div>
149151
</div>
150152
);

‎src/index.css‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,13 @@
44

55
/* index.css */
66
.glassmorphic {
7-
@apply bg-gray-800/30 backdrop-blur-sm rounded-2xl shadow-2xl z-50 border border-white/30 text-white ;
7+
@apply bg-gray-800/30 backdrop-blur-sm rounded-lg shadow-2xl z-50 border border-white/30 text-white ;
8+
}
9+
10+
.glassmorphic-light {
11+
@apply bg-gray-200/30 backdrop-blur-sm rounded-lg shadow-2xl z-50 border border-white/30 text-white ;
12+
}
13+
14+
.buttons {
15+
@apply backdrop-blur-sm flex flex-wrap gap-2 justify-center bg-gray-700/30 ;
816
}

0 commit comments

Comments
 (0)