refactor: update wheel to svg

src/components/MoonIcon/MoonIcon.tsx

@@ -23,9 +23,9 @@ function MoonIcon({
 			<path
 				d="M3.32031 11.6835C3.32031 16.6541 7.34975 20.6835 12.3203 20.6835C16.1075 20.6835 19.3483 18.3443 20.6768 15.032C19.6402 15.4486 18.5059 15.6834 17.3203 15.6834C12.3497 15.6834 8.32031 11.654 8.32031 6.68342C8.32031 5.50338 8.55165 4.36259 8.96453 3.32996C5.65605 4.66028 3.32031 7.89912 3.32031 11.6835Z"
 				stroke={textColor}
-				stroke-width="2"
-				stroke-linecap="round"
-				stroke-linejoin="round"
+				strokeWidth="2"
+				strokeLinecap="round"
+				strokeLinejoin="round"
 			/>
 		</Styled.Sun>
 	);

src/components/SunIcon/SunIcon.tsx

@@ -23,9 +23,9 @@ function SunIcon({
 			<path
 				d="M12 3V4M12 20V21M4 12H3M6.31412 6.31412L5.5 5.5M17.6859 6.31412L18.5 5.5M6.31412 17.69L5.5 18.5001M17.6859 17.69L18.5 18.5001M21 12H20M16 12C16 14.2091 14.2091 16 12 16C9.79086 16 8 14.2091 8 12C8 9.79086 9.79086 8 12 8C14.2091 8 16 9.79086 16 12Z"
 				stroke={textColor}
-				stroke-width="2"
-				stroke-linecap="round"
-				stroke-linejoin="round"
+				strokeWidth="2"
+				strokeLinecap="round"
+				strokeLinejoin="round"
 			/>
 		</Styled.Sun>
 	);

src/emotion.d.ts

@@ -22,9 +22,21 @@ declare module '@emotion/react' {
 					normal: string;
 					contrast: string;
 				};
-				primary: string;
-				secondary: string;
-				tertiary: string;
+				primary: {
+					dim: string;
+					normal: string;
+					contrast: string;
+				};
+				secondary: {
+					dim: string;
+					normal: string;
+					contrast: string;
+				};
+				tertiary: {
+					dim: string;
+					normal: string;
+					contrast: string;
+				};
 			};
 		};
 	}

src/pages/home/Home.styled.ts

@@ -8,7 +8,7 @@ import TasksQueueBase from './sections/TasksQueue/TasksQueue.tsx';
 import MicroTasksQueueBase from './sections/MicroTasksQueue/MicroTasksQueue.tsx';
 import InfoBase from './sections/Info/Info.tsx';
 import ConfiguratorBase from './sections/Configurator/Configurator.tsx';
-import EventLoopBase from './sections/Wheel/Wheel.tsx';
+import EventLoopBase from 'pages/home/sections/EventLoop/EventLoop.tsx';
 
 export const sharedColumnStyles = ({ theme }: { theme: Theme }) => css`
 	display: flex;

src/pages/home/sections/Wheel/Wheel.modal.tsx → src/pages/home/sections/EventLoop/EventLoop.modal.tsx

@@ -1,7 +1,7 @@
-import * as Styled from './Wheel.styled.ts';
+import * as Styled from './EventLoop.styled.ts';
 import InfoModal from 'components/Modal/Modal.tsx';
 
-function WheelModal({
+function EventLoopModal({
 	isOpened,
 	toggle,
 }: {
@@ -38,4 +38,4 @@ function WheelModal({
 	);
 }
 
-export default WheelModal;
+export default EventLoopModal;

src/pages/home/sections/EventLoop/EventLoop.styled.ts

@@ -0,0 +1,17 @@
+import styled from '@emotion/styled';
+import InfoClosed from 'components/CloseIcon/InfoIcon.tsx';
+
+export const CloseIcon = styled(InfoClosed)`
+	position: absolute;
+	top: 16px;
+	right: 16px;
+`;
+
+export const EventLoopBody = styled.div`
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	flex: 1;
+	padding-top: 10px;
+`;

src/pages/home/sections/EventLoop/EventLoop.tsx

@@ -0,0 +1,24 @@
+import * as Styled from './EventLoop.styled.ts';
+import InfoIcon from 'components/InfoIcon/InfoIcon.tsx';
+import useBoolean from 'utils/hooks/useBoolean.ts';
+import { BaseLayoutElement } from 'pages/home/Home.styled.ts';
+import { EVENT_LOOP_ID } from 'utils/constants.ts';
+import EventLoopModal from './EventLoop.modal.tsx';
+import Wheel from 'pages/home/sections/EventLoop/Wheel/Wheel.tsx';
+
+function EventLoop({ className }: { className?: string }) {
+	const [isOpened, toggle] = useBoolean(false);
+
+	return (
+		<BaseLayoutElement className={className}>
+			<p id={EVENT_LOOP_ID}>Event Loop</p>
+			<Styled.EventLoopBody>
+				<InfoIcon onClick={toggle} />
+				<Wheel />
+				<EventLoopModal isOpened={isOpened} toggle={toggle} />
+			</Styled.EventLoopBody>
+		</BaseLayoutElement>
+	);
+}
+
+export default EventLoop;

src/pages/home/sections/Wheel/Wheel.data.ts → src/pages/home/sections/EventLoop/Wheel/Wheel.data.ts

@@ -1,4 +1,4 @@
-import { EventInterface } from './Wheel.types.ts';
+import { EventInterface } from '../EventLoop.types.ts';
 
 export const events: EventInterface[] = [
 	{

src/pages/home/sections/Wheel/Wheel.styled.ts → src/pages/home/sections/EventLoop/Wheel/Wheel.styled.ts

@@ -1,6 +1,5 @@
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';
-import InfoClosed from 'components/CloseIcon/InfoIcon.tsx';
 
 export const CircleContainer = styled.div(
 	({ theme }) => css`
@@ -79,18 +78,3 @@ export const Sector = styled.div<{
 		}
 	`;
 });
-
-export const CloseIcon = styled(InfoClosed)`
-	position: absolute;
-	top: 16px;
-	right: 16px;
-`;
-
-export const EventLoopBody = styled.div`
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	flex: 1;
-	padding-top: 10px;
-`;

src/pages/home/sections/EventLoop/Wheel/Wheel.tsx

@@ -0,0 +1,227 @@
+import * as Styled from './Wheel.styled.ts';
+import { useTheme } from '@emotion/react';
+import { useTimeStore, useWheelStore } from 'store/store.ts';
+import { useEffect } from 'react';
+
+const POINTER_TOP_ID = 'wheel-pointer-top';
+const POINTER_BOTTOM_ID = 'wheel-pointer-bottom';
+const POINTER_LEFT_ID = 'wheel-pointer-left';
+const POINTER_RIGHT_ID = 'wheel-pointer-right';
+const WHEEL_ID = 'wheel';
+
+const MICROTASK_CLASS = 'microtask';
+const MACROTASK_CLASS = 'macrotask';
+const RENDER_CLASS = 'render';
+
+const SEGMENT_OFFSET = -9;
+const POINTER_OFFSET = -99;
+
+function Wheel() {
+	const theme = useTheme();
+	const { render, macrotask, microtask } = useWheelStore((state) => state);
+
+	const colors = {
+		text: theme.custom.colors.onContainer.contrast,
+		pointer: theme.custom.colors.onContainer.contrast,
+		wheel: theme.custom.colors.onContainer.dim,
+		background: theme.custom.colors.container,
+		microtask: {
+			disabled: theme.custom.colors.primary.dim,
+			enabled: theme.custom.colors.primary.contrast,
+		},
+		macrotask: {
+			disabled: theme.custom.colors.secondary.dim,
+			enabled: theme.custom.colors.secondary.contrast,
+		},
+		render: {
+			disabled: theme.custom.colors.tertiary.dim,
+			enabled: theme.custom.colors.tertiary.contrast,
+		},
+	};
+
+	const fill = {
+		render: render ? colors.render.enabled : colors.render.disabled,
+		macrotask: macrotask ? colors.macrotask.enabled : colors.macrotask.disabled,
+		microtask: microtask ? colors.microtask.enabled : colors.microtask.disabled,
+	};
+
+	useEffect(() => {
+		return useTimeStore.subscribe(({ grad }) => {
+			const top = document.getElementById(POINTER_TOP_ID);
+			const right = document.getElementById(POINTER_RIGHT_ID);
+			const left = document.getElementById(POINTER_LEFT_ID);
+			const bottom = document.getElementById(POINTER_BOTTOM_ID);
+
+			const corrected = grad + POINTER_OFFSET;
+
+			if (top && right && left && bottom) {
+				top.style.transform = `rotate(${corrected}deg)`;
+				right.style.transform = `rotate(${corrected + 18}deg)`;
+				left.style.transform = `rotate(${corrected}deg)`;
+				bottom.style.transform = `rotate(${corrected}deg)`;
+			}
+		});
+	}, []);
+
+	return (
+		<Styled.CircleContainer>
+			<svg
+				id={WHEEL_ID}
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="-100 -100 200 200"
+			>
+				<defs>
+					<path
+						id="segment"
+						d="M 0 0 L 97 0 A 97 97 0 0 1 92.26036 29.96953 Z"
+					/>
+				</defs>
+				<path
+					id={POINTER_TOP_ID}
+					d="M 0 0 L 100 0 A 100 100 0 0 1 95.11 30.90 Z"
+					fill={colors.pointer}
+					transform={`rotate(${POINTER_OFFSET})`}
+				/>
+				<circle id="wheel" cx="0" cy="0" r="97" fill={colors.wheel} />
+				<use
+					href="#segment"
+					className={MICROTASK_CLASS}
+					fill={fill.microtask}
+					transform={`rotate(${SEGMENT_OFFSET - 30})`}
+				>
+					<title>Microtask</title>
+				</use>
+				<use
+					href="#segment"
+					className={RENDER_CLASS}
+					fill={fill.render}
+					transform="rotate(-9)"
+				>
+					<title>Render</title>
+				</use>
+				<use
+					href="#segment"
+					className={MICROTASK_CLASS}
+					fill={fill.microtask}
+					transform={`rotate(${SEGMENT_OFFSET + 30})`}
+				>
+					<title>Microtask</title>
+				</use>
+				<use
+					href="#segment"
+					className={MICROTASK_CLASS}
+					fill={fill.microtask}
+					transform={`rotate(${SEGMENT_OFFSET + 150})`}
+				>
+					<title>Microtask</title>
+				</use>
+				<use
+					href="#segment"
+					className={MACROTASK_CLASS}
+					fill={fill.macrotask}
+					transform={`rotate(${SEGMENT_OFFSET + 180})`}
+				>
+					<title>Task</title>
+				</use>
+				<use
+					href="#segment"
+					className={MICROTASK_CLASS}
+					fill={fill.microtask}
+					transform={`rotate(${SEGMENT_OFFSET + 210})`}
+				>
+					<title>Microtask</title>
+				</use>
+				<circle
+					id="center-mock-outer"
+					cx="0"
+					cy="0"
+					r="73"
+					fill={colors.background}
+				/>
+				<path
+					id={POINTER_BOTTOM_ID}
+					d="M 0 0 L 73 0 A 72 72 0 0 1 69.65 22.65 Z"
+					fill={colors.pointer}
+					transform={`rotate(${POINTER_OFFSET})`}
+				/>
+				<path
+					id={POINTER_LEFT_ID}
+					d="M 0 0 L 100 0"
+					stroke={colors.pointer}
+					strokeWidth="3"
+					transform={`rotate(${POINTER_OFFSET})`}
+				/>
+				<path
+					id={POINTER_RIGHT_ID}
+					d="M 0 0 L 100 0"
+					stroke={colors.pointer}
+					strokeWidth="3"
+					transform={`rotate(${POINTER_OFFSET + 18})`}
+				/>
+				<circle
+					id="center-mock-inner"
+					cx="0"
+					cy="0"
+					r="70"
+					fill={colors.background}
+				/>
+				<text
+					x="-81"
+					y="-39"
+					fill={colors.text}
+					font-size="9px"
+					font-weight="bold"
+				>
+					mT<title>Microtask</title>
+				</text>
+				<text
+					x="66"
+					y="-39"
+					fill={colors.text}
+					font-size="9px"
+					font-weight="bold"
+				>
+					mT<title>Microtask</title>
+				</text>
+				<text
+					x="66"
+					y="45"
+					fill={colors.text}
+					font-size="9px"
+					font-weight="bold"
+				>
+					mT<title>Microtask</title>
+				</text>
+				<text
+					x="-81"
+					y="45"
+					fill={colors.text}
+					font-size="9px"
+					font-weight="bold"
+				>
+					mT<title>Microtask</title>
+				</text>
+				<text
+					x="82"
+					y="3"
+					fill={colors.text}
+					font-size="9px"
+					font-weight="bold"
+				>
+					R<title>Render</title>
+				</text>
+				<text
+					x="-88"
+					y="3"
+					fill={colors.text}
+					font-size="9px"
+					font-weight="bold"
+				>
+					T<title>Task</title>
+				</text>
+			</svg>
+		</Styled.CircleContainer>
+	);
+}
+
+export default Wheel;