diff --git a/src/pages/home/Home.styled.ts b/src/pages/home/Home.styled.ts index f4fa242..dc7e53e 100644 --- a/src/pages/home/Home.styled.ts +++ b/src/pages/home/Home.styled.ts @@ -58,28 +58,6 @@ export const NarrowColumn = styled.div( ` ); -export const BaseLayoutElement = styled.div( - ({ theme: { custom } }) => css` - border: 1px solid ${custom.sys.colors.border}; - background: ${custom.sys.colors.container}; - transition: - background-color ${custom.sys.transitions.color}, - border-color ${custom.sys.transitions.color}; - margin: 0; - padding: 10px; - border-radius: 8px; - ` -); - -export const List = styled(BaseLayoutElement)` - display: flex; - flex-direction: column; - padding: 10px; - gap: 20px; - overflow: auto; - position: relative; -`; - export const sharedComponentStyles = ({ theme }: { theme: Theme }) => css` min-height: 10vh; @media (min-width: ${theme.custom.sys.breakpoints.desktop}px) { diff --git a/src/pages/home/sections/Callstack/Callstack.modal.tsx b/src/pages/home/sections/Callstack/Callstack.modal.tsx deleted file mode 100644 index f7d7c6a..0000000 --- a/src/pages/home/sections/Callstack/Callstack.modal.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import * as Styled from './Callstack.styled.ts'; -import InfoModal from 'components/Modal/Modal.tsx'; -import { Icon } from 'components/Icon/Icon.tsx'; -import { useTheme } from '@emotion/react'; - -function CallStackModal({ - isOpened, - toggle, -}: { - isOpened: boolean; - toggle: () => void; -}) { - const theme = useTheme(); - return ( - -

Call stack

- - - -

- A call stack is a mechanism for an interpreter to keep track of its - place in a script that calls multiple functions — what function is - currently being run and what functions are called from within that - function, etc. -

- - - ); -} - -export default CallStackModal; diff --git a/src/pages/home/sections/Callstack/Callstack.styled.ts b/src/pages/home/sections/Callstack/Callstack.styled.ts index bae8c48..bfa0b4b 100644 --- a/src/pages/home/sections/Callstack/Callstack.styled.ts +++ b/src/pages/home/sections/Callstack/Callstack.styled.ts @@ -1,52 +1,14 @@ import styled from '@emotion/styled'; import { css } from '@emotion/react'; -import { TransparentButton } from 'components/TransparentButton/TransparentButton.tsx'; +import { BaseQueue } from 'pages/home/sections/base/BaseQueue/BaseQueue.tsx'; -export const Callstack = styled.div( +export const Callstack = styled(BaseQueue)( ({ theme }) => css` - flex: 1; - display: flex; flex-direction: row-reverse; justify-content: end; - gap: 20px; @media (min-width: ${theme.custom.sys.breakpoints.desktop}px) { flex-direction: column-reverse; } ` ); - -export const CallstackElement = styled.div( - ({ theme: { custom } }) => css` - background: ${custom.com.queueElement.background}; - transition: background-color ${custom.sys.transitions.color}; - animation: ${custom.sys.animations.zoomIn}; - border: 1px solid ${custom.sys.colors.border}; - border-radius: 4px; - padding: 10px; - word-wrap: break-word; - word-break: break-word; - display: flex; - align-items: center; - justify-content: center; - flex: 1; - max-width: 33.33%; - - @media (min-width: ${custom.sys.breakpoints.desktop}px) { - max-width: unset; - flex-grow: 0; - } - ` -); - -export const InfoButton = styled(TransparentButton)` - position: absolute; - top: 8px; - right: 8px; -`; - -export const CloseButton = styled(TransparentButton)` - position: absolute; - top: 12px; - right: 12px; -`; diff --git a/src/pages/home/sections/Callstack/Callstack.tsx b/src/pages/home/sections/Callstack/Callstack.tsx index 79a95f4..eb19874 100644 --- a/src/pages/home/sections/Callstack/Callstack.tsx +++ b/src/pages/home/sections/Callstack/Callstack.tsx @@ -1,29 +1,54 @@ import * as Styled from './Callstack.styled.ts'; -import useBoolean from 'utils/hooks/useBoolean.ts'; -import { List } from '../../Home.styled.ts'; -import CallStackModal from './Callstack.modal.tsx'; import { useQueueManagerStore } from 'store/store.ts'; -import { Icon } from 'components/Icon/Icon.tsx'; -import { useTheme } from '@emotion/react'; +import { BaseModalSection } from 'pages/home/sections/base/BaseModalSection/BaseModalSection.tsx'; +import { BaseQueueElement } from 'pages/home/sections/base/BaseQueueElement/BaseQueueElement.tsx'; + +const ModalContent = ( + <> +

Call stack

+

+ A call stack is a mechanism for an interpreter to keep track of its place + in a script that calls multiple functions — what function is currently + being run and what functions are called from within that function, etc. +

+ + +); function CallStack({ className }: { className?: string }) { const tasks = useQueueManagerStore((state) => state.callstack); - const [isOpened, toggle] = useBoolean(false); - const theme = useTheme(); return ( - - CallStack + - - - {tasks.map((task) => ( - {task} + + {task} + ))} - - + ); } diff --git a/src/pages/home/sections/Configurator/Configurator.tsx b/src/pages/home/sections/Configurator/Configurator.tsx index f7f51a2..187611b 100644 --- a/src/pages/home/sections/Configurator/Configurator.tsx +++ b/src/pages/home/sections/Configurator/Configurator.tsx @@ -1,9 +1,9 @@ import * as Styled from './Configurator.styled.ts'; -import { BaseLayoutElement } from '../../Home.styled.ts'; import Controls from './Controls/Controls.tsx'; import Editor from './Editor/Editor.tsx'; import { codeExamples } from './Configurator.data.tsx'; import { useState } from 'react'; +import { BaseLayoutElement } from 'pages/home/sections/base/BaseLayoutElement/BaseLayoutElement.tsx'; export default function Configurator({ className }: { className?: string }) { const [text, setText] = useState(codeExamples[3].code); diff --git a/src/pages/home/sections/Console/Console.styled.ts b/src/pages/home/sections/Console/Console.styled.ts index b648ba6..10f5d33 100644 --- a/src/pages/home/sections/Console/Console.styled.ts +++ b/src/pages/home/sections/Console/Console.styled.ts @@ -1,41 +1,11 @@ import styled from '@emotion/styled'; import { css } from '@emotion/react'; +import { BaseQueue } from 'pages/home/sections/base/BaseQueue/BaseQueue.tsx'; -export const LogQueue = styled.div( +export const LogQueue = styled(BaseQueue)( ({ theme }) => css` - flex: 1; - display: flex; - justify-content: start; - gap: 20px; - @media (min-width: ${theme.custom.sys.breakpoints.desktop}px) { flex-direction: column; } ` ); - -export const Log = styled.div( - ({ - theme: { - custom: { sys, com }, - }, - }) => css` - background: ${com.queueElement.background}; - transition: background-color ${sys.transitions.color}; - animation: ${sys.animations.zoomIn}; - border: 1px solid ${sys.colors.border}; - border-radius: 4px; - padding: 10px; - word-wrap: break-word; - display: flex; - align-items: center; - justify-content: center; - flex: 1; - max-width: 33.33%; - - @media (min-width: ${sys.breakpoints.desktop}px) { - max-width: unset; - flex-grow: 0; - } - ` -); diff --git a/src/pages/home/sections/Console/Console.tsx b/src/pages/home/sections/Console/Console.tsx index 64a0ceb..21df228 100644 --- a/src/pages/home/sections/Console/Console.tsx +++ b/src/pages/home/sections/Console/Console.tsx @@ -1,19 +1,21 @@ import { useQueueManagerStore } from 'store/store.ts'; import * as Styled from './Console.styled.ts'; -import { List } from '../../Home.styled.ts'; +import { BaseSection } from 'pages/home/sections/base/BaseSection/BaseSection.tsx'; +import { BaseQueueElement } from 'pages/home/sections/base/BaseQueueElement/BaseQueueElement.tsx'; function Console({ className }: { className?: string }) { const tasks = useQueueManagerStore((state) => state.console); return ( - - Console + {tasks.map((log, i) => ( - {log} + + {log} + ))} - + ); } diff --git a/src/pages/home/sections/EventLoop/EventLoop.tsx b/src/pages/home/sections/EventLoop/EventLoop.tsx index d6993b7..c5594ed 100644 --- a/src/pages/home/sections/EventLoop/EventLoop.tsx +++ b/src/pages/home/sections/EventLoop/EventLoop.tsx @@ -1,11 +1,11 @@ import * as Styled from './EventLoop.styled.ts'; 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'; import { Icon } from 'components/Icon/Icon.tsx'; import { useTheme } from '@emotion/react'; +import { BaseLayoutElement } from 'pages/home/sections/base/BaseLayoutElement/BaseLayoutElement.tsx'; function EventLoop({ className }: { className?: string }) { const [isOpened, toggle] = useBoolean(false); diff --git a/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.modal.tsx b/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.modal.tsx deleted file mode 100644 index b14394f..0000000 --- a/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.modal.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import * as Styled from './MicroTasksQueue.styled.ts'; -import InfoModal from 'components/Modal/Modal.tsx'; -import { Icon } from 'components/Icon/Icon.tsx'; -import { useTheme } from '@emotion/react'; - -function MicroTasksQueueModal({ - isOpened, - toggle, -}: { - isOpened: boolean; - toggle: () => void; -}) { - const theme = useTheme(); - return ( - -

Microtasks

- - - -

- A microtask is a short function which is executed after the function or - program which created it exits and only if the JavaScript execution - stack is empty, but before returning control to the event loop being - used by the user agent to drive the script's execution environment. -

-

Events that can trigger new microtasks:

- - - ); -} - -export default MicroTasksQueueModal; diff --git a/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.styled.ts b/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.styled.ts deleted file mode 100644 index 12bcf05..0000000 --- a/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.styled.ts +++ /dev/null @@ -1,39 +0,0 @@ -import styled from '@emotion/styled'; -import { css } from '@emotion/react'; -import { TransparentButton } from 'components/TransparentButton/TransparentButton.tsx'; - -export const MicroTasksQueue = styled.div` - flex: 1; - display: flex; - justify-content: start; - gap: 20px; -`; - -export const MicroTask = styled.div( - ({ theme: { custom } }) => css` - background: ${custom.com.queueElement.background}; - transition: background-color ${custom.sys.transitions.color}; - animation: ${custom.sys.animations.zoomIn}; - border: 1px solid ${custom.sys.colors.border}; - flex: 1; - display: flex; - justify-content: center; - align-items: center; - border-radius: 4px; - max-width: 33.33%; - padding: 10px; - word-wrap: break-word; - ` -); - -export const InfoButton = styled(TransparentButton)` - position: absolute; - top: 8px; - right: 8px; -`; - -export const CloseButton = styled(TransparentButton)` - position: absolute; - top: 12px; - right: 12px; -`; diff --git a/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.tsx b/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.tsx index a5b012a..1c181d4 100644 --- a/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.tsx +++ b/src/pages/home/sections/MicroTasksQueue/MicroTasksQueue.tsx @@ -1,29 +1,41 @@ import { useQueueManagerStore } from 'store/store.ts'; -import * as Styled from './MicroTasksQueue.styled.ts'; -import useBoolean from 'utils/hooks/useBoolean.ts'; -import { List } from '../../Home.styled.ts'; -import MicroTasksQueueModal from './MicroTasksQueue.modal.tsx'; -import { Icon } from 'components/Icon/Icon.tsx'; -import { useTheme } from '@emotion/react'; +import { BaseModalSection } from 'pages/home/sections/base/BaseModalSection/BaseModalSection.tsx'; +import { BaseQueueElement } from 'pages/home/sections/base/BaseQueueElement/BaseQueueElement.tsx'; +import { BaseQueue } from 'pages/home/sections/base/BaseQueue/BaseQueue.tsx'; + +const ModalContent = ( + <> +

Microtasks

+

+ A microtask is a short function which is executed after the function or + program which created it exits and only if the JavaScript execution stack + is empty, but before returning control to the event loop being used by the + user agent to drive the script's execution environment. +

+

Events that can trigger new microtasks:

+ + +); function MicroTasksQueue({ className }: { className?: string }) { const tasks = useQueueManagerStore((state) => state.microtask); - const [isOpened, toggle] = useBoolean(false); - const theme = useTheme(); return ( - - Microtasks Queue - - - - + + {tasks.map((task) => ( - {task} + {task} ))} - - - + + ); } diff --git a/src/pages/home/sections/RequestAnimationFrameQueue/RequestAnimationFrameQueue.modal.tsx b/src/pages/home/sections/RequestAnimationFrameQueue/RequestAnimationFrameQueue.modal.tsx deleted file mode 100644 index 9637b9e..0000000 --- a/src/pages/home/sections/RequestAnimationFrameQueue/RequestAnimationFrameQueue.modal.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import * as Styled from './RequestAnimationFrameQueue.styled.ts'; -import InfoModal from 'components/Modal/Modal.tsx'; -import { Icon } from 'components/Icon/Icon.tsx'; -import { useTheme } from '@emotion/react'; - -function RequestAnimationFrameQueueModal({ - isOpened, - toggle, -}: { - isOpened: boolean; - toggle: () => void; -}) { - const theme = useTheme(); - return ( - -

RequestAnimationFrame

- - - -

- The window.requestAnimationFrame() method tells the browser you wish to - perform an animation. It requests the browser to call a user-supplied - callback function before the next repaint. -

-

- The frequency of calls to the callback function will generally match the - display refresh rate. The most common refresh rate is 60hz, (60 - cycles/frames per second), though 75hz, 120hz, and 144hz are also widely - used. -

-

- requestAnimationFrame() calls are paused in most browsers when running - in background tabs or hidden iframes, in order to improve performance - and battery life. -

- - ); -} - -export default RequestAnimationFrameQueueModal; diff --git a/src/pages/home/sections/RequestAnimationFrameQueue/RequestAnimationFrameQueue.styled.ts b/src/pages/home/sections/RequestAnimationFrameQueue/RequestAnimationFrameQueue.styled.ts deleted file mode 100644 index c4d0e45..0000000 --- a/src/pages/home/sections/RequestAnimationFrameQueue/RequestAnimationFrameQueue.styled.ts +++ /dev/null @@ -1,39 +0,0 @@ -import styled from '@emotion/styled'; -import { css } from '@mui/material'; -import { TransparentButton } from 'components/TransparentButton/TransparentButton.tsx'; - -export const CallbacksQueue = styled.div` - flex: 1; - display: flex; - justify-content: start; - gap: 20px; -`; - -export const Callback = styled.div( - ({ theme: { custom } }) => css` - background: ${custom.com.queueElement.background}; - transition: background-color ${custom.sys.transitions.color}; - animation: ${custom.sys.animations.zoomIn}; - border: 1px solid ${custom.sys.colors.border}; - flex: 1; - display: flex; - justify-content: center; - align-items: center; - border-radius: 4px; - max-width: 33.33%; - padding: 10px; - word-wrap: break-word; - ` -); - -export const InfoButton = styled(TransparentButton)` - position: absolute; - top: 8px; - right: 8px; -`; - -export const CloseButton = styled(TransparentButton)` - position: absolute; - top: 12px; - right: 12px; -`; diff --git a/src/pages/home/sections/RequestAnimationFrameQueue/RequestAnimationFrameQueue.tsx b/src/pages/home/sections/RequestAnimationFrameQueue/RequestAnimationFrameQueue.tsx index 06fadd3..2b2fdad 100644 --- a/src/pages/home/sections/RequestAnimationFrameQueue/RequestAnimationFrameQueue.tsx +++ b/src/pages/home/sections/RequestAnimationFrameQueue/RequestAnimationFrameQueue.tsx @@ -1,29 +1,45 @@ -import * as Styled from './RequestAnimationFrameQueue.styled.ts'; -import useBoolean from 'utils/hooks/useBoolean.ts'; -import { List } from '../../Home.styled.ts'; -import RequestAnimationFrameQueueModal from './RequestAnimationFrameQueue.modal.tsx'; import { useQueueManagerStore } from 'store/store.ts'; -import { Icon } from 'components/Icon/Icon.tsx'; -import { useTheme } from '@emotion/react'; +import { BaseModalSection } from 'pages/home/sections/base/BaseModalSection/BaseModalSection.tsx'; +import { BaseQueueElement } from 'pages/home/sections/base/BaseQueueElement/BaseQueueElement.tsx'; +import { BaseQueue } from 'pages/home/sections/base/BaseQueue/BaseQueue.tsx'; + +const ModalContent = ( + <> +

RequestAnimationFrame

+

+ The window.requestAnimationFrame() method tells the browser you wish to + perform an animation. It requests the browser to call a user-supplied + callback function before the next repaint. +

+

+ The frequency of calls to the callback function will generally match the + display refresh rate. The most common refresh rate is 60hz, (60 + cycles/frames per second), though 75hz, 120hz, and 144hz are also widely + used. +

+

+ requestAnimationFrame() calls are paused in most browsers when running in + background tabs or hidden iframes, in order to improve performance and + battery life. +

+ +); function RequestAnimationFrameQueue({ className }: { className?: string }) { const callbacks = useQueueManagerStore((state) => state.rafCallback); - const [isOpened, toggle] = useBoolean(false); - const theme = useTheme(); return ( - - RequestAnimationFrame callbacks - - - - + + {callbacks.map((callback) => ( - {callback} + {callback} ))} - - - + + ); } diff --git a/src/pages/home/sections/TasksQueue/TasksQueue.modal.tsx b/src/pages/home/sections/TasksQueue/TasksQueue.modal.tsx deleted file mode 100644 index bac8539..0000000 --- a/src/pages/home/sections/TasksQueue/TasksQueue.modal.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import * as Styled from './TasksQueue.styled.ts'; -import InfoModal from 'components/Modal/Modal.tsx'; -import { Icon } from 'components/Icon/Icon.tsx'; -import { useTheme } from '@emotion/react'; - -function TasksQueueModal({ - isOpened, - toggle, -}: { - isOpened: boolean; - toggle: () => void; -}) { - const theme = useTheme(); - return ( - -

Tasks

- - - -

- A task is anything which is scheduled to be run by the standard - mechanisms such as initially starting to run a program, an event being - dispatched asynchronously, or an interval or timeout being fired. These - all get scheduled on the task queue. -

-

- For example, tasks get added to the task queue when: -

-