Skip to content

Commit

Permalink
Prettier
Browse files Browse the repository at this point in the history
  • Loading branch information
@microbit-matt-hillsdon
microbit-matt-hillsdon committed May 29, 2024
1 parent ffca62f commit a492d04
Show file tree
Hide file tree
Showing 6 changed files with 327 additions and 284 deletions.
60 changes: 27 additions & 33 deletions src/editor/codemirror/helper-widgets/openWidgets.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,28 +17,28 @@ export const OpenReactComponent = ({
});
}, [loc, view]);
return (
<Button onClick={handleClick} size="xs">Open</Button>
<Button onClick={handleClick} size="xs">
Open
</Button>
);
};


function createSoundWavePath(): string {
let pathData = 'M0,12';
let pathData = "M0,12";

const totalPoints = 18;

const totalPoints = 18;
const stepSize = 24 / totalPoints;


const stepSize = 24 / totalPoints;
for (let i = 0; i < totalPoints; i++) {
const x = i * stepSize;
const angle = (x / totalPoints) * 3 * Math.PI;

for (let i = 0; i < totalPoints; i++) {
const x = i * stepSize;
const angle = (x / totalPoints) * 3 * Math.PI;
const heightVariation = Math.cos(angle) * 6;
const y1 = 12 + heightVariation;
const y2 = 12 - heightVariation;

const heightVariation = Math.cos(angle) * 6;
const y1 = 12 + heightVariation;
const y2 = 12 - heightVariation;

pathData += ` M${x},${y1} L${x},${y2}`;
pathData += ` M${x},${y1} L${x},${y2}`;
}

return pathData;
Expand All @@ -51,9 +51,6 @@ export const OpenSoundComponent = ({
loc: number;
view: EditorView;
}) => {



const handleClick = useCallback(() => {
view.dispatch({
effects: [openWidgetEffect.of(loc)],
Expand All @@ -63,20 +60,17 @@ export const OpenSoundComponent = ({
const soundWavePath = createSoundWavePath();

return (
<Button onClick={handleClick} size="sm" height="25px" marginBottom="3px" marginLeft="5px" style={{ padding: '3px 3px' }}>
<svg
width="20"
height="18"
viewBox="0 0 24 24"
fill="none"
>
<path
d={soundWavePath}
stroke="green"
strokeWidth="1"
fill="none"
/>
</svg>
</Button>
<Button
onClick={handleClick}
size="sm"
height="25px"
marginBottom="3px"
marginLeft="5px"
style={{ padding: "3px 3px" }}
>
<svg width="20" height="18" viewBox="0 0 24 24" fill="none">
<path d={soundWavePath} stroke="green" strokeWidth="1" fill="none" />
</svg>
</Button>
);
};
};
140 changes: 72 additions & 68 deletions src/editor/codemirror/helper-widgets/setPixelWidget.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,81 +46,85 @@ const MicrobitSinglePixelGrid: React.FC<MicrobitSinglePixelGridProps> = ({

return (
<div>
<Box ml="10px" style={{ marginRight: "4px" }}>
<Box ml="10px" style={{ marginRight: "4px" }}>
<Button size="xs" onClick={onCloseClick} bg="white">
X
</Button>
</Box>
<Box // TODO: copy to allow other widgets to access bg and close
display="flex"
flexDirection="row"
justifyContent="flex-start"
width="250px"
background="snow"
border='1px solid lightgray'
boxShadow='0 0 10px 5px rgba(173, 216, 230, 0.7)'
>
<Box>
<Box
bg="white"
p="10px"
borderRadius="0px"
border="1px solid black"
style={{ marginLeft: "15px", marginTop: "15px", marginBottom: "15px" }}
>
{[...Array(5)].map((_, gridY) => (
<Box key={gridY} display="flex">
{[...Array(5)].map((_, gridX) => (
<Box key={gridX} display="flex" mr="0px">
<Button
height="32px"
width="30px"
p={0}
borderRadius={0}
bgColor={
gridX === x && gridY === y
? `rgba(255, 0, 0, ${brightness / 9})`
: "rgba(255, 255, 255, 0)"
}
border={
gridX === x && gridY === y
? "2px solid black"
: "1px solid black"
}
_hover={{
bgColor:
</Box>
<Box // TODO: copy to allow other widgets to access bg and close
display="flex"
flexDirection="row"
justifyContent="flex-start"
width="250px"
background="snow"
border="1px solid lightgray"
boxShadow="0 0 10px 5px rgba(173, 216, 230, 0.7)"
>
<Box>
<Box
bg="white"
p="10px"
borderRadius="0px"
border="1px solid black"
style={{
marginLeft: "15px",
marginTop: "15px",
marginBottom: "15px",
}}
>
{[...Array(5)].map((_, gridY) => (
<Box key={gridY} display="flex">
{[...Array(5)].map((_, gridX) => (
<Box key={gridX} display="flex" mr="0px">
<Button
height="32px"
width="30px"
p={0}
borderRadius={0}
bgColor={
gridX === x && gridY === y
? `rgba(255, 0, 0, ${brightness / 9})`
: "rgba(255, 255, 255, 0.5)",
}}
onClick={() => handlePixelClick(gridX, gridY)}
/>
</Box>
))}
</Box>
))}
: "rgba(255, 255, 255, 0)"
}
border={
gridX === x && gridY === y
? "2px solid black"
: "1px solid black"
}
_hover={{
bgColor:
gridX === x && gridY === y
? `rgba(255, 0, 0, ${brightness / 9})`
: "rgba(255, 255, 255, 0.5)",
}}
onClick={() => handlePixelClick(gridX, gridY)}
/>
</Box>
))}
</Box>
))}
</Box>
</Box>
<Box ml="10px" style={{ marginTop: "15px" }}>
<Slider
aria-label="brightness"
defaultValue={brightness}
min={0}
max={9}
step={1}
height="182px"
orientation="vertical"
_focus={{ boxShadow: "none" }}
_active={{ bgColor: "transparent" }}
onChange={handleSliderChange}
>
<SliderTrack>
<SliderFilledTrack bg={calculateColor()} />
</SliderTrack>
<SliderThumb />
</Slider>
</Box>
</Box>
<Box ml="10px" style={{ marginTop: "15px" }}>
<Slider
aria-label="brightness"
defaultValue={brightness}
min={0}
max={9}
step={1}
height="182px"
orientation="vertical"
_focus={{ boxShadow: "none" }}
_active={{ bgColor: "transparent" }}
onChange={handleSliderChange}
>
<SliderTrack>
<SliderFilledTrack bg={calculateColor()} />
</SliderTrack>
<SliderThumb />
</Slider>
</Box>
</Box>
</div>
);
};
Expand Down
139 changes: 74 additions & 65 deletions src/editor/codemirror/helper-widgets/showImageWidget.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,76 +47,85 @@ const MicrobitMultiplePixelsGrid: React.FC<MultiMicrobitGridProps> = ({

return (
<div>
<Box ml="10px" style={{ marginRight: "4px" }}>
<Box ml="10px" style={{ marginRight: "4px" }}>
<Button size="xs" onClick={onCloseClick} bg="white">
X
</Button>
</Box>
<Box // TODO: copy to allow other widgets to access bg and close
display="flex"
flexDirection="row"
justifyContent="flex-start"
width="250px"
background="snow"
border='1px solid lightgray'
boxShadow='0 0 10px 5px rgba(173, 216, 230, 0.7)'
>
<Box>
<Box
bg="white"
p="10px"
borderRadius="0px"
border="1px solid black"
style={{ marginLeft: "15px", marginTop: "15px", marginBottom: "15px" }}
>
{[...Array(5)].map((_, gridY) => (
<Box key={gridY} display="flex">
{[...Array(5)].map((_, gridX) => (
<Box key={gridX} display="flex" mr="0px">
<Button
height="32px"
width="30px"
p={0}
borderRadius={0}
bgColor={`rgba(255, 0, 0, ${selectedPixels[gridY][gridX] / 9})`}
border={
selectedPixel?.x === gridX && selectedPixel.y === gridY
? "2px solid white"
: "0.5px solid white"
}
_hover={{
bgColor: currentBrightness > 0
? `rgba(255, 100, 100, ${selectedPixels[gridY][gridX] / 9})`
: "rgba(255, 255, 255, 0.5)",
}}
onClick={() => handlePixelClick(gridX, gridY)}
/>
</Box>
))}
</Box>
))}
</Box>
</Box>
<Box ml="10px" style={{ marginTop: "15px" }}>
<Slider
aria-label="brightness"
defaultValue={currentBrightness}
min={0}
max={9}
step={1}
height="182px"
orientation="vertical"
_focus={{ boxShadow: "none" }}
_active={{ bgColor: "transparent" }}
onChange={(value) => handleBrightnessChange(value)}
>
<SliderTrack>
<SliderFilledTrack bg={calculateColor()} />
</SliderTrack>
<SliderThumb />
</Slider>
<Box // TODO: copy to allow other widgets to access bg and close
display="flex"
flexDirection="row"
justifyContent="flex-start"
width="250px"
background="snow"
border="1px solid lightgray"
boxShadow="0 0 10px 5px rgba(173, 216, 230, 0.7)"
>
<Box>
<Box
bg="white"
p="10px"
borderRadius="0px"
border="1px solid black"
style={{
marginLeft: "15px",
marginTop: "15px",
marginBottom: "15px",
}}
>
{[...Array(5)].map((_, gridY) => (
<Box key={gridY} display="flex">
{[...Array(5)].map((_, gridX) => (
<Box key={gridX} display="flex" mr="0px">
<Button
height="32px"
width="30px"
p={0}
borderRadius={0}
bgColor={`rgba(255, 0, 0, ${
selectedPixels[gridY][gridX] / 9
})`}
border={
selectedPixel?.x === gridX && selectedPixel.y === gridY
? "2px solid white"
: "0.5px solid white"
}
_hover={{
bgColor:
currentBrightness > 0
? `rgba(255, 100, 100, ${
selectedPixels[gridY][gridX] / 9
})`
: "rgba(255, 255, 255, 0.5)",
}}
onClick={() => handlePixelClick(gridX, gridY)}
/>
</Box>
))}
</Box>
))}
</Box>
</Box>
<Box ml="10px" style={{ marginTop: "15px" }}>
<Slider
aria-label="brightness"
defaultValue={currentBrightness}
min={0}
max={9}
step={1}
height="182px"
orientation="vertical"
_focus={{ boxShadow: "none" }}
_active={{ bgColor: "transparent" }}
onChange={(value) => handleBrightnessChange(value)}
>
<SliderTrack>
<SliderFilledTrack bg={calculateColor()} />
</SliderTrack>
<SliderThumb />
</Slider>
</Box>
</Box>
</Box>
</div>
);
};
Expand Down
Loading

0 comments on commit a492d04

Please sign in to comment.