zoriya/Chromacase
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added hover and clik effects

Browse Source
This commit is contained in:
Clément Le Bihan
2023-03-18 01:44:39 +01:00
parent eb100e843b
commit f43561460d
1 changed files with 89 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
front/components/VirtualPiano/Octave.tsx
View File

@@ -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>
);
};