Skip to content

Commit 03b43d6

Browse files
wraitiiwraitii
committed
Attempt at making faucet look better on iOs
1 parent f030966 commit 03b43d6

File tree

2 files changed

+106
-110
lines changed

2 files changed

+106
-110
lines changed

‎front/src/App.css‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -362,12 +362,11 @@ body {
362362
position: absolute;
363363
width: 50px;
364364
height: 50px;
365-
background-image: url(/orange.svg);
365+
background-image: url(/orange.png);
366366
background-size: contain;
367367
background-repeat: no-repeat;
368368
pointer-events: none;
369369
transform-origin: center;
370-
transition: transform 0.2s ease-out;
371370
}
372371

373372
.orange.sliced {
@@ -387,7 +386,7 @@ body {
387386
position: absolute;
388387
width: 50px;
389388
height: 50px;
390-
background-image: url(/orange.svg);
389+
background-image: url(/orange.png);
391390
background-size: contain;
392391
background-repeat: no-repeat;
393392
pointer-events: none;
@@ -397,22 +396,26 @@ body {
397396

398397
.orange-half.top {
399398
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
400-
transform: translate(-50%, -50%) rotate(var(--rotation)) translateY(-10px);
399+
transform: translateX(var(--x-offset)) translateY(var(--y-offset)) translate(-50%, -50%) rotate(var(--rotation))
400+
translateY(-10px);
401401
}
402402

403403
.orange-half.bottom {
404404
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
405-
transform: translate(-50%, -50%) rotate(var(--rotation)) translateY(10px);
405+
transform: translateX(var(--x-offset)) translateY(var(--y-offset)) translate(-50%, -50%) rotate(var(--rotation))
406+
translateY(10px);
406407
}
407408

408409
@keyframes flyAway {
409410
0% {
410411
opacity: 1;
411-
transform: translate(-50%, -50%) rotate(var(--rotation)) translateY(0);
412+
transform: translateX(var(--x-offset)) translateY(var(--y-offset)) translate(-50%, -50%) rotate(var(--rotation))
413+
translateY(0);
412414
}
413415
100% {
414416
opacity: 0;
415-
transform: translate(-50%, -50%) rotate(var(--rotation)) translateY(var(--fly-distance));
417+
transform: translateX(var(--x-offset)) translateY(var(--y-offset)) translate(-50%, -50%) rotate(var(--rotation))
418+
translateY(var(--fly-distance));
416419
}
417420
}
418421

@@ -677,12 +680,11 @@ pre {
677680
position: absolute;
678681
width: 50px;
679682
height: 50px;
680-
background-image: url(/bomb.svg);
683+
background-image: url(/bomb.png);
681684
background-size: contain;
682685
background-repeat: no-repeat;
683686
pointer-events: none;
684687
transform-origin: center;
685-
transition: transform 0.2s ease-out;
686688
}
687689

688690
.bomb.sliced {
@@ -693,7 +695,7 @@ pre {
693695
position: absolute;
694696
width: 50px;
695697
height: 50px;
696-
background-image: url(/bomb.svg);
698+
background-image: url(/bomb.png);
697699
background-size: contain;
698700
background-repeat: no-repeat;
699701
pointer-events: none;
@@ -703,12 +705,14 @@ pre {
703705

704706
.bomb-half.top {
705707
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
706-
transform: translate(-50%, -50%) rotate(var(--rotation)) translateY(-10px);
708+
transform: translateX(var(--x-offset)) translateY(var(--y-offset)) translate(-50%, -50%) rotate(var(--rotation))
709+
translateY(-10px);
707710
}
708711

709712
.bomb-half.bottom {
710713
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
711-
transform: translate(-50%, -50%) rotate(var(--rotation)) translateY(10px);
714+
transform: translateX(var(--x-offset)) translateY(var(--y-offset)) translate(-50%, -50%) rotate(var(--rotation))
715+
translateY(10px);
712716
}
713717

714718
/* Media query pour les écrans plus larges */

‎front/src/App.tsx‎

Lines changed: 90 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -210,80 +210,76 @@ function App() {
210210
}, 1000);
211211
}, []);
212212

213-
const sliceBomb = useCallback(
214-
async (bombId: number) => {
215-
if (!wallet || !wallet.address) return;
216-
try {
217-
await window.bombMutex.acquire();
218-
const bomb = bombs.find((b) => b.id === bombId);
219-
if (!bomb || bomb.sliced || window.slicedBombs.has(bombId)) return;
220-
221-
// Vibrate for 200ms when slicing a bomb (longer vibration for bombs)
222-
if ("vibrate" in navigator) {
223-
navigator.vibrate([1000]);
224-
}
213+
const sliceBomb = async (bombId: number) => {
214+
if (!wallet || !wallet.address) return;
215+
try {
216+
await window.bombMutex.acquire();
217+
const bomb = bombs.find((b) => b.id === bombId);
218+
if (!bomb || bomb.sliced || window.slicedBombs.has(bombId)) return;
219+
220+
// Vibrate for 200ms when slicing a bomb (longer vibration for bombs)
221+
if ("vibrate" in navigator) {
222+
navigator.vibrate([1000]);
223+
}
225224

226-
// Play bomb sound
227-
const bombAudio = new Audio(bombSound);
228-
bombAudio.play();
225+
// Play bomb sound
226+
const bombAudio = new Audio(bombSound);
227+
bombAudio.play();
229228

230-
// Create explosion effect instead of juice effect
231-
createExplosionEffect(bomb.x, bomb.y);
229+
// Create explosion effect instead of juice effect
230+
createExplosionEffect(bomb.x, bomb.y);
232231

233-
// Apply cumulative penalty
234-
const newPenalty = bombPenalty + 10;
235-
setBombPenalty(newPenalty);
236-
localStorage.setItem("bombPenalty", newPenalty.toString());
232+
// Apply cumulative penalty
233+
const newPenalty = bombPenalty + 10;
234+
setBombPenalty(newPenalty);
235+
localStorage.setItem("bombPenalty", newPenalty.toString());
237236

238-
// Trigger score shake animation
239-
setIsScoreShaking(true);
240-
setTimeout(() => setIsScoreShaking(false), 500);
237+
// Trigger score shake animation
238+
setIsScoreShaking(true);
239+
setTimeout(() => setIsScoreShaking(false), 500);
241240

242-
setBombs((prev) => prev.map((b) => (b.id === bombId ? { ...b, sliced: true } : b)));
241+
setBombs((prev) => prev.map((b) => (b.id === bombId ? { ...b, sliced: true } : b)));
243242

244-
window.slicedBombs.add(bombId);
245-
} finally {
246-
window.bombMutex.release();
247-
}
248-
},
249-
[bombs, bombPenalty, createExplosionEffect]
250-
);
243+
window.slicedBombs.add(bombId);
244+
} finally {
245+
window.bombMutex.release();
246+
}
247+
};
251248

252-
const sliceOrange = useCallback(
253-
async (orangeId: number) => {
254-
if (!wallet || !wallet.address) return;
255-
try {
256-
await window.orangeMutex.acquire();
257-
const orange = oranges.find((o) => o.id === orangeId);
258-
if (!orange || orange.sliced || window.slicedOranges.has(orangeId)) return;
259-
260-
// Vibrate for 50ms when slicing an orange
261-
if ("vibrate" in navigator) {
262-
navigator.vibrate(150);
263-
}
249+
const sliceOrange = async (orangeId: number) => {
250+
if (!wallet || !wallet.address) return;
251+
try {
252+
await window.orangeMutex.acquire();
253+
const orange = oranges.find((o) => o.id === orangeId);
254+
if (!orange || orange.sliced || window.slicedOranges.has(orangeId)) return;
264255

265-
// Play random slice sound
266-
const sliceSounds = [slice1, slice2, slice3];
267-
const randomSound = sliceSounds[Math.floor(Math.random() * sliceSounds.length)];
268-
const audio = new Audio(randomSound);
269-
audio.play();
270-
271-
// Créer l'effet de jus
272-
createJuiceEffect(orange.x, orange.y);
273-
274-
// Only send blob tx if no bomb penalty is active
275-
if (bombPenalty === 0) {
276-
// Send blob tx
277-
const blobTransfer = transfer("faucet", wallet.address, "oranj", BigInt(1), 1);
278-
const blobClick = blob_click(0);
279-
280-
const identity = `${wallet.address}@${blobClick.contract_name}`;
281-
const blobTx: BlobTransaction = {
282-
identity,
283-
blobs: [blobTransfer, blobClick],
284-
};
285-
const txHash = await nodeService.sendBlobTx(blobTx);
256+
// Vibrate for 50ms when slicing an orange
257+
if ("vibrate" in navigator) {
258+
navigator.vibrate(150);
259+
}
286260

261+
// Play random slice sound
262+
const sliceSound = [slice1, slice2, slice3];
263+
const audio = new Audio(sliceSound[Math.floor(Math.random() * sliceSound.length)]);
264+
// Reset audio if already playing
265+
audio.currentTime = 0;
266+
audio.play();
267+
268+
// Créer l'effet de jus
269+
createJuiceEffect(orange.x, orange.y);
270+
271+
// Only send blob tx if no bomb penalty is active
272+
if (bombPenalty === 0) {
273+
// Send blob tx
274+
const blobTransfer = transfer("faucet", wallet.address, "oranj", BigInt(1), 1);
275+
const blobClick = blob_click(0);
276+
277+
const identity = `${wallet.address}@${blobClick.contract_name}`;
278+
const blobTx: BlobTransaction = {
279+
identity,
280+
blobs: [blobTransfer, blobClick],
281+
};
282+
nodeService.sendBlobTx(blobTx).then((txHash) => {
287283
// Add transaction to the list
288284
setTransactions((prev) =>
289285
[
@@ -294,24 +290,23 @@ function App() {
294290
...prev,
295291
].slice(0, 10)
296292
); // Keep only the last 10 transactions
293+
});
297294

298-
setCount((c) => c + 1);
299-
} else {
300-
// Reduce bomb penalty
301-
const newPenalty = bombPenalty - 1;
302-
setBombPenalty(newPenalty);
303-
localStorage.setItem("bombPenalty", newPenalty.toString());
304-
}
295+
setCount((c) => c + 1);
296+
} else {
297+
// Reduce bomb penalty
298+
const newPenalty = bombPenalty - 1;
299+
setBombPenalty(newPenalty);
300+
localStorage.setItem("bombPenalty", newPenalty.toString());
301+
}
305302

306-
setOranges((prev) => prev.map((o) => (o.id === orangeId ? { ...o, sliced: true } : o)));
303+
setOranges((prev) => prev.map((o) => (o.id === orangeId ? { ...o, sliced: true } : o)));
307304

308-
window.slicedOranges.add(orangeId);
309-
} finally {
310-
window.orangeMutex.release();
311-
}
312-
},
313-
[oranges, bombPenalty, wallet?.address]
314-
);
305+
window.slicedOranges.add(orangeId);
306+
} finally {
307+
window.orangeMutex.release();
308+
}
309+
};
315310

316311
const createSliceEffect = useCallback((points: { x: number; y: number }[]) => {
317312
if (!gameAreaRef.current || points.length < 2) return;
@@ -778,10 +773,8 @@ function App() {
778773
className={`orange ${orange.sliced ? "sliced" : ""}`}
779774
style={
780775
{
781-
left: `${orange.x}px`,
782-
top: `${orange.y}px`,
783776
"--rotation": `${orange.rotation}deg`,
784-
transform: `translate(-50%, -50%) rotate(${orange.rotation}deg)`,
777+
transform: `translateX(${orange.x}px) translateY(${orange.y}px) translate(-50%, -50%) rotate(${orange.rotation}deg)`,
785778
} as React.CSSProperties
786779
}
787780
/>
@@ -791,8 +784,8 @@ function App() {
791784
className="orange-half top"
792785
style={
793786
{
794-
left: `${orange.x}px`,
795-
top: `${orange.y}px`,
787+
"--x-offset": `${orange.x}px`,
788+
"--y-offset": `${orange.y}px`,
796789
"--rotation": `${orange.rotation}deg`,
797790
"--fly-distance": "-50px",
798791
transform: `translate(-50%, -50%) rotate(${orange.rotation}deg)`,
@@ -803,8 +796,8 @@ function App() {
803796
className="orange-half bottom"
804797
style={
805798
{
806-
left: `${orange.x}px`,
807-
top: `${orange.y}px`,
799+
"--x-offset": `${orange.x}px`,
800+
"--y-offset": `${orange.y}px`,
808801
"--rotation": `${orange.rotation}deg`,
809802
"--fly-distance": "50px",
810803
transform: `translate(-50%, -50%) rotate(${orange.rotation}deg)`,
@@ -821,10 +814,8 @@ function App() {
821814
className={`bomb ${bomb.sliced ? "sliced" : ""}`}
822815
style={
823816
{
824-
left: `${bomb.x}px`,
825-
top: `${bomb.y}px`,
826817
"--rotation": `${bomb.rotation}deg`,
827-
transform: `translate(-50%, -50%) rotate(${bomb.rotation}deg)`,
818+
transform: `translateX(${bomb.x}px) translateY(${bomb.y}px) translate(-50%, -50%) rotate(${bomb.rotation}deg)`,
828819
} as React.CSSProperties
829820
}
830821
/>
@@ -834,23 +825,23 @@ function App() {
834825
className="bomb-half top"
835826
style={
836827
{
837-
left: `${bomb.x}px`,
838-
top: `${bomb.y}px`,
828+
"--x-offset": `${bomb.x}px`,
829+
"--y-offset": `${bomb.y}px`,
839830
"--rotation": `${bomb.rotation}deg`,
840831
"--fly-distance": "-50px",
841-
transform: `translate(-50%, -50%) rotate(${bomb.rotation}deg)`,
832+
transform: `translateX(${bomb.x}px) translateY(${bomb.y}px) translate(-50%, -50%) rotate(${bomb.rotation}deg)`,
842833
} as React.CSSProperties
843834
}
844835
/>
845836
<div
846837
className="bomb-half bottom"
847838
style={
848839
{
849-
left: `${bomb.x}px`,
850-
top: `${bomb.y}px`,
840+
"--x-offset": `${bomb.x}px`,
841+
"--y-offset": `${bomb.y}px`,
851842
"--rotation": `${bomb.rotation}deg`,
852843
"--fly-distance": "50px",
853-
transform: `translate(-50%, -50%) rotate(${bomb.rotation}deg)`,
844+
transform: `translateX(${bomb.x}px) translateY(${bomb.y}px) translate(-50%, -50%) rotate(${bomb.rotation}deg)`,
854845
} as React.CSSProperties
855846
}
856847
/>
@@ -864,8 +855,9 @@ function App() {
864855
className="orange-juice"
865856
style={
866857
{
867-
left: `${particle.x}px`,
868-
top: `${particle.y}px`,
858+
/*left: `${particle.x}px`,
859+
top: `${particle.y}px`,*/
860+
transform: `translateX(${particle.x}px) translateY(${particle.y}px)`,
869861
opacity: Math.max(0, 1 - particle.time / 1.5),
870862
} as React.CSSProperties
871863
}

0 commit comments

Comments
 (0)