From f43561460d7e23db1d583c04d526a108d9aa38ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Le=20Bihan?= <clement.lebihan773@gmail.com>
Date: Sat, 18 Mar 2023 01:44:39 +0100
Subject: [PATCH] Added hover and clik effects

---
 front/components/VirtualPiano/Octave.tsx | 149 ++++++++++++++---------
 1 file changed, 89 insertions(+), 60 deletions(-)

diff --git a/front/components/VirtualPiano/Octave.tsx b/front/components/VirtualPiano/Octave.tsx
index 97587cc..3fa0d62 100644
--- a/front/components/VirtualPiano/Octave.tsx
+++ b/front/components/VirtualPiano/Octave.tsx
@@ -45,71 +45,100 @@ const Octave = ({
 	const whiteKeys = keys.filter((k) => k?.accidental === undefined);
 	const blackKeys = keys.filter((k) => k?.accidental !== undefined);
 
-	const whiteKeyWidthExpr = '50px';
-	const whiteKeyHeightExpr = '200px';
-	const blackKeyWidthExpr = '25px';
-	const blackKeyHeightExpr = '100px';
+	const whiteKeyWidthExpr = "50px";
+	const whiteKeyHeightExpr = "200px";
+	const blackKeyWidthExpr = "25px";
+	const blackKeyHeightExpr = "100px";
 
 	return (
 		<Box width={"350px"} height={"200px"}>
-		<ZStack>
-			<Row>
-				{whiteKeys.map((key, i) => {
-					return (
-						<Pressable
-							key={i}
-							onPressIn={() => onNoteDown(key)}
-							onPressOut={() => onNoteUp(key)}
-						>
-							<Box
-								bg="white"
-								w="50px"
-								h="200px"
-								borderWidth="1px"
-								borderColor="black"
-								justifyContent="flex-end"
-								alignItems="center"
+			<ZStack>
+				<Row>
+					{whiteKeys.map((key, i) => {
+						return (
+							<Pressable
+								key={i}
+								onPressIn={() => onNoteDown(key)}
+								onPressOut={() => onNoteUp(key)}
 							>
-								<Text fontSize="xl">
-									{key.note}
-								</Text>
-							</Box>
-						</Pressable>
-					);
-				})}
-			</Row>
-			<Row>
-				{blackKeys.map((key, i) => {
-					return (
-						<Pressable
-							key={i}
-							onPressIn={() => onNoteDown(key)}
-							onPressOut={() => onNoteUp(key)}
-						>
-							<Box
-								bg="black"
-								w="25px"
-								h="120px"
-								borderWidth="1px"
-								borderColor="black"
-								color="white"
-								style={{
-									position: "absolute",
-									left: `${(i + ((i > 1) as unknown as number)) * 50 + (50 - (25 / 2))}px`,
-									top: "0px",
-									justifyContent: "flex-end",
-									alignItems: "center",
-								}}
+								{({ isHovered, isPressed }) => (
+									<Box
+										bg={
+											isHovered
+												? isPressed
+													? "gray.300"
+													: "gray.100"
+												: "white"
+										}
+										w="50px"
+										h="200px"
+										borderWidth="1px"
+										borderColor="black"
+										justifyContent="flex-end"
+										alignItems="center"
+									>
+										<Text
+											style={{
+												userSelect: "none",
+												WebkitUserSelect: "none",
+												MozUserSelect: "none",
+												msUserSelect: "none",
+											}}
+											fontSize="xl"
+										>
+											{key.note}
+										</Text>
+									</Box>
+								)}
+							</Pressable>
+						);
+					})}
+				</Row>
+				<Row>
+					{blackKeys.map((key, i) => {
+						return (
+							<Pressable
+								key={i}
+								onPressIn={() => onNoteDown(key)}
+								onPressOut={() => onNoteUp(key)}
 							>
-								<Text fontSize="xs" color="white">
-									{key.note + key.accidental}
-								</Text>
-							</Box>
-						</Pressable>
-					);
-				})}
-			</Row>
-		</ZStack>
+								{({ isHovered, isPressed }) => (
+									<Box
+										bg={isHovered ? (isPressed ? "gray.700" : "gray.800") : "black"}
+										w="25px"
+										h="120px"
+										borderWidth="1px"
+										borderColor="black"
+										color="white"
+										style={{
+											position: "absolute",
+											left: `${
+												(i + ((i > 1) as unknown as number)) * 50 + (50 - 25 / 2)
+											}px`,
+											top: "0px",
+											justifyContent: "flex-end",
+											alignItems: "center",
+										}}
+									>
+										<Text
+											style={{
+												userSelect: "none",
+												WebkitUserSelect: "none",
+												MozUserSelect: "none",
+												msUserSelect: "none",
+											}}
+											fontSize="xs"
+											color="white"
+										>
+											{key.note + key.accidental}
+										</Text>
+									</Box>
+								)}
+							</Pressable>
+						);
+					})}
+				</Row>
+			</ZStack>
 		</Box>
 	);
 };