Skip to content

Commit 2489a4c

Browse files
Jimmy LeeJimmy Lee
Jimmy Lee
authored and
Jimmy Lee
committed
adjustment: move canvas elements into modals, force min-width for some demos
1 parent d85ba2a commit 2489a4c

9 files changed

+263
-89
lines changed

‎app/page.tsx‎

Lines changed: 41 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,6 @@ import BlockLoader from '@components/BlockLoader';
1919
import Breadcrumbs from '@components/BreadCrumbs';
2020
import Button from '@components/Button';
2121
import ButtonGroup from '@components/ButtonGroup';
22-
import CanvasPlatformer from '@components/CanvasPlatformer';
23-
import CanvasSnake from '@components/CanvasSnake';
2422
import Card from '@components/Card';
2523
import CardDouble from '@components/CardDouble';
2624
import Checkbox from '@components/Checkbox';
@@ -45,14 +43,16 @@ import Indent from '@components/Indent';
4543
import Input from '@components/Input';
4644
import IntDevLogo from '@components/svg/IntDevLogo';
4745
import ListItem from '@components/ListItem';
48-
import MatrixLoader from '@components/MatrixLoader';
4946
import Message from '@components/Message';
5047
import MessageViewer from '@components/MessageViewer';
5148
import MessagesInterface from '@components/examples/MessagesInterface';
5249
import ModalAlert from '@components/modals/ModalAlert';
50+
import ModalCanvasSnake from '@components/modals/ModalCanvasSnake';
51+
import ModalCanvasPlatformer from '@components/modals/ModalCanvasPlatformer';
5352
import ModalChess from '@components/modals/ModalChess';
5453
import ModalCreateAccount from '@components/modals/ModalCreateAccount';
5554
import ModalError from '@components/modals/ModalError';
55+
import ModalMatrixModes from '@components/modals/ModalMatrixModes';
5656
import ModalStack from '@components/ModalStack';
5757
import ModalTrigger from '@components/ModalTrigger';
5858
import Navigation from '@components/Navigation';
@@ -494,26 +494,6 @@ export default async function Page(props) {
494494
<br />
495495
</Accordion>
496496

497-
<Accordion defaultValue={false} title="CANVAS PLATFORMER">
498-
This canvas component provides a basic starting point for building a 2D platform game directly on a canvas element. It currently supports simple character jumping and rudimentary collision detection, making it easy to set up a foundational scene.
499-
<br />
500-
<br />
501-
<Card title="EXAMPLE">
502-
<CanvasPlatformer rows={12} />
503-
</Card>
504-
<br />
505-
</Accordion>
506-
507-
<Accordion defaultValue={false} title="CANVAS SNAKE">
508-
This canvas component provides a simple demo of the classic Snake game. It includes basic mechanics like movement and growth, while also demonstrating how to freeze the game state when the canvas loses focus, ensuring a smooth user experience.
509-
<br />
510-
<br />
511-
<Card title="EXAMPLE">
512-
<CanvasSnake rows={12} />
513-
</Card>
514-
<br />
515-
</Accordion>
516-
517497
<Accordion defaultValue={true} title="CARDS">
518498
Cards are MS-DOS–inspired sections designed to group related content and actions. They can serve as standalone features or function as part of a larger application. Each card clearly outlines key information, making it easier for users to identify and interact with important details.
519499
<br />
@@ -594,11 +574,13 @@ export default async function Page(props) {
594574
<br />
595575
<br />
596576
<Card title="EN PASSANT">
597-
<Chessboard board={Constants.CHESSBOARD_CHECKMATE_STEP_ONE} />
598-
&nbsp;
599-
<Chessboard board={Constants.CHESSBOARD_CHECKMATE_STEP_TWO} />
600-
&nbsp;
601-
<Chessboard board={Constants.CHESSBOARD_CHECKMATE_STEP_THREE} />
577+
<Row style={{ whiteSpace: 'nowrap' }}>
578+
<Chessboard board={Constants.CHESSBOARD_CHECKMATE_STEP_ONE} />
579+
&nbsp;
580+
<Chessboard board={Constants.CHESSBOARD_CHECKMATE_STEP_TWO} />
581+
&nbsp;
582+
<Chessboard board={Constants.CHESSBOARD_CHECKMATE_STEP_THREE} />
583+
</Row>
602584
</Card>
603585
</Accordion>
604586
<br />
@@ -693,7 +675,9 @@ int main() {
693675
<br />
694676
<br />
695677
<Card>
696-
<DashboardRadar />
678+
<Row style={{ whiteSpace: 'nowrap', minWidth: '70ch' }}>
679+
<DashboardRadar />
680+
</Row>
697681
</Card>
698682
<br />
699683
</Accordion>
@@ -1059,24 +1043,38 @@ int main() {
10591043
<br />
10601044
</Accordion>
10611045

1062-
<Accordion defaultValue={false} title="MATRIX LOADER">
1063-
A Matrix Loader (screen) is a visual element that simulates the iconic green, cascading code streams featured in the Matrix films. These screens often serve as dynamic backdrops, thematic treatments, or stylized representations of complex digital data. This version fits SRCL's theming and monospace font usage.
1064-
<br />
1065-
<br />
1066-
<Card title="KATAKANA DEFAULT">
1067-
<MatrixLoader rows={32} mode="katakana" />
1068-
</Card>
1069-
<Card title="GREEK LTR">
1070-
<MatrixLoader direction="left-to-right" rows={8} mode="greek" />
1071-
</Card>
1072-
<br />
1073-
</Accordion>
1074-
10751046
<Accordion defaultValue={true} title="MODAL">
10761047
Modals are dialog boxes or popups that overlay the main content, requiring user interaction. They are used to capture inputs, display information, or focus on specific tasks without leaving the current context, often accompanied by an overlay to maintain focus
10771048
<br />
10781049
<br />
10791050
<Card title="EXAMPLE">
1051+
<ModalTrigger
1052+
modal={ModalCanvasSnake}
1053+
modalProps={{
1054+
buttonText: 'GAME OVER',
1055+
}}
1056+
>
1057+
<ActionButton>Render Canvas Snake</ActionButton>
1058+
</ModalTrigger>
1059+
1060+
<ModalTrigger
1061+
modal={ModalCanvasPlatformer}
1062+
modalProps={{
1063+
buttonText: 'GAME OVER',
1064+
}}
1065+
>
1066+
<ActionButton>Render Canvas Platformer</ActionButton>
1067+
</ModalTrigger>
1068+
1069+
<ModalTrigger
1070+
modal={ModalMatrixModes}
1071+
modalProps={{
1072+
buttonText: 'CLOSE',
1073+
}}
1074+
>
1075+
<ActionButton>Render Modal Matrix Modes</ActionButton>
1076+
</ModalTrigger>
1077+
10801078
<ModalTrigger
10811079
modal={ModalChess}
10821080
modalProps={{
@@ -1399,7 +1397,7 @@ int main() {
13991397
<br />
14001398
</Accordion>
14011399

1402-
<Accordion defaultValue={true} title="Table">
1400+
<Accordion defaultValue={true} title="TABLE">
14031401
A simple, declarative table component designed to streamline the creation of tables in JSX. It provides greater control over the structure and layout while evoking the aesthetics of old terminal interfaces (like MS-DOS).
14041402
<br />
14051403
<br />

‎components/SidebarLayout.module.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
display: flex;
33
align-items: flex-start;
44
justify-content: space-between;
5+
white-space: pre-wrap;
56
}
67

78
.sidebar {

‎components/examples/Denabase.tsx‎

Lines changed: 48 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -15,52 +15,54 @@ const Denabase = (props) => {
1515
return (
1616
<>
1717
<Card style={{ overflowWrap: 'break-word' }}>
18-
<RowSpaceBetween>
19-
<ActionButton>TR5342120027455925897981</ActionButton>
20-
<ActionButton>02.14.2021</ActionButton>
21-
</RowSpaceBetween>
22-
<Divider type="GRADIENT" />
23-
T-CA-AA-AA-TA-TC-GG-GC-AC-AT-TA-TT-TA-TT-TG-CC-GC-TC-GG-GA-AG-TA-GA-A
24-
<br />
25-
A-TG-GT-AC-AT-GT-GT-TT-TA-TG-AT-TT-CT-CG-CA-GT-GA-AA-AA-GC-AA-CG-AA-C
26-
<br />
27-
C-TC-GC-CC-TT-AG-AT-TC-TA-TA-GC-TG-CT-CT-GA-GA-CC-GC-AC-TG-GC-AA-GC-A
28-
<br />
29-
G-AA-AC-TC-CG-CA-TT-CA-GG-CA-GT-CC-TC-CA-TG-CA-CT-TC-CT-GC-CT-GT-CT-G
30-
<br />
31-
C-TG-AA-CC-TA-TT-AT-TA-GA-GA-TG-GA-CT-GC-AG-TT-CT-CA-AT-CA-CA-CG-GA-T
32-
<br />
33-
C-TG-AT-AC-CT-GC-TG-GT-AT-GT-TC-CT-GA-TA-CC-CA-CA-GA-CA-GC-GC-CC-GA-A
34-
<br />
35-
T-TT-TG-GC-AA-CC-GA-AC-TT-CT-CA-AC-AA-AA-CC-GC-CT-AG-TT-GC-TA-AT-TT-G
36-
<br />
37-
G-TG-AC-CT-GA-CT-GA-AT-TG-TC-AT-TA-AA-CA-CT-CC-TG-CT-AA-GA-TG-CG-AA-G
38-
<br />
39-
C-TA-TT-AT-AG-TG-TT-TT-GT-AC-AG-GC-TA-TT-TT-GC-GT-GA-AA-CG-CA-AA-CG-C
40-
<br />
41-
G-TT-GC-AT-TT-CA-GA-AT-TC-CG-TG-CA-TA-GT-TA-TC-TC-AT-GC-CG-TG-CT-CT-T
42-
<br />
43-
G-AT-TA-TT-GA-CA-TA-TG-CA-GT-TC-GT-CC-TA-AT-CC-GC-GC-CT-GG-TC-TT-TA-G
44-
<br />
45-
T-CA-CT-AA-CC-GA-CC-CT-TA-GT-AT-TG-TT-CT-CT-CA-AC-AA-AA-TG-TG-TT-AA-A
46-
<br />
47-
C-CG-GC-AT-AA-TC-TG-GT-GA-TC-GG-GA-GA-TC-CA-GA-GA-AA-CA-CA-CC-TT-GG-G
48-
<br />
49-
C-TA-GA-TG-CC-CT-AC-AT-TA-GA-TA-AG-GG-GT-CT-AT-AC-GG-GC-GG-GG-TT-AG-T
50-
<br />
51-
A-CA-CC-TT-GA-GC-GT-AT-AG-GA-GA-GT-AA-CG-AG-GT-GG-TT-GT-CG-TG-GG-AG-G
52-
<br />
53-
A-GG-AG-TA-TG-TT-CT-CC-CT-TA-CT-AG-TT-GC-CG-AT-AA-CA-GA-TA-CT-GA-TG-T
54-
<br />
55-
C-TG-GT-AA-TT-GC-CA-GT-CA-TG-GT-TG-TA-GT-AG-CC-GG-GA-CC-CG-CA-GT-CT-G
56-
<br />
57-
G-GT-AG-CG-CC-TA-AC-AG-AT-AA-GG-GG-GC-CT-AC-TC-CC-GC-CC-TG-GT-CG-GC-C
58-
<br />
59-
T-GA-TC-AT-AA-AC-CT-CT-GT-AA-TA-CC-AT-GG-GC-CA-CG-TT-AG-GC-GT-CG-AT-G
60-
<br />
61-
C-CG-GA-CC-CA-TA-TC-TT-TA-CA-TC-AT-CT-CT-TT-CA-TA-GA-AG-TA-CC-CA-CT-T
62-
<br />
63-
<Divider type="GRADIENT" />
18+
<Row style={{ minWidth: '70ch' }}>
19+
<RowSpaceBetween>
20+
<ActionButton>TR5342120027455925897981</ActionButton>
21+
<ActionButton>02.14.2021</ActionButton>
22+
</RowSpaceBetween>
23+
<Divider type="GRADIENT" />
24+
T-CA-AA-AA-TA-TC-GG-GC-AC-AT-TA-TT-TA-TT-TG-CC-GC-TC-GG-GA-AG-TA-GA-A
25+
<br />
26+
A-TG-GT-AC-AT-GT-GT-TT-TA-TG-AT-TT-CT-CG-CA-GT-GA-AA-AA-GC-AA-CG-AA-C
27+
<br />
28+
C-TC-GC-CC-TT-AG-AT-TC-TA-TA-GC-TG-CT-CT-GA-GA-CC-GC-AC-TG-GC-AA-GC-A
29+
<br />
30+
G-AA-AC-TC-CG-CA-TT-CA-GG-CA-GT-CC-TC-CA-TG-CA-CT-TC-CT-GC-CT-GT-CT-G
31+
<br />
32+
C-TG-AA-CC-TA-TT-AT-TA-GA-GA-TG-GA-CT-GC-AG-TT-CT-CA-AT-CA-CA-CG-GA-T
33+
<br />
34+
C-TG-AT-AC-CT-GC-TG-GT-AT-GT-TC-CT-GA-TA-CC-CA-CA-GA-CA-GC-GC-CC-GA-A
35+
<br />
36+
T-TT-TG-GC-AA-CC-GA-AC-TT-CT-CA-AC-AA-AA-CC-GC-CT-AG-TT-GC-TA-AT-TT-G
37+
<br />
38+
G-TG-AC-CT-GA-CT-GA-AT-TG-TC-AT-TA-AA-CA-CT-CC-TG-CT-AA-GA-TG-CG-AA-G
39+
<br />
40+
C-TA-TT-AT-AG-TG-TT-TT-GT-AC-AG-GC-TA-TT-TT-GC-GT-GA-AA-CG-CA-AA-CG-C
41+
<br />
42+
G-TT-GC-AT-TT-CA-GA-AT-TC-CG-TG-CA-TA-GT-TA-TC-TC-AT-GC-CG-TG-CT-CT-T
43+
<br />
44+
G-AT-TA-TT-GA-CA-TA-TG-CA-GT-TC-GT-CC-TA-AT-CC-GC-GC-CT-GG-TC-TT-TA-G
45+
<br />
46+
T-CA-CT-AA-CC-GA-CC-CT-TA-GT-AT-TG-TT-CT-CT-CA-AC-AA-AA-TG-TG-TT-AA-A
47+
<br />
48+
C-CG-GC-AT-AA-TC-TG-GT-GA-TC-GG-GA-GA-TC-CA-GA-GA-AA-CA-CA-CC-TT-GG-G
49+
<br />
50+
C-TA-GA-TG-CC-CT-AC-AT-TA-GA-TA-AG-GG-GT-CT-AT-AC-GG-GC-GG-GG-TT-AG-T
51+
<br />
52+
A-CA-CC-TT-GA-GC-GT-AT-AG-GA-GA-GT-AA-CG-AG-GT-GG-TT-GT-CG-TG-GG-AG-G
53+
<br />
54+
A-GG-AG-TA-TG-TT-CT-CC-CT-TA-CT-AG-TT-GC-CG-AT-AA-CA-GA-TA-CT-GA-TG-T
55+
<br />
56+
C-TG-GT-AA-TT-GC-CA-GT-CA-TG-GT-TG-TA-GT-AG-CC-GG-GA-CC-CG-CA-GT-CT-G
57+
<br />
58+
G-GT-AG-CG-CC-TA-AC-AG-AT-AA-GG-GG-GC-CT-AC-TC-CC-GC-CC-TG-GT-CG-GC-C
59+
<br />
60+
T-GA-TC-AT-AA-AC-CT-CT-GT-AA-TA-CC-AT-GG-GC-CA-CG-TT-AG-GC-GT-CG-AT-G
61+
<br />
62+
C-CG-GA-CC-CA-TA-TC-TT-TA-CA-TC-AT-CT-CT-TT-CA-TA-GA-AG-TA-CC-CA-CT-T
63+
<br />
64+
<Divider type="GRADIENT" />
65+
</Row>
6466
</Card>
6567
<br />
6668
<Card>

‎components/modals/ModalCanvasPlatformer.module.scss‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
@keyframes fadeIn {
2+
from {
3+
opacity: 0;
4+
transform: translateY(88px);
5+
}
6+
to {
7+
opacity: 1;
8+
transform: translateY(0px);
9+
}
10+
}
11+
12+
.root {
13+
animation: fadeIn 0.3s ease-out;
14+
background: var(--theme-background-modal);
15+
box-shadow: 0 0 0 1ch var(--theme-border-subdued);
16+
display: block;
17+
font-weight: 400;
18+
margin: 0 auto;
19+
max-width: 64ch;
20+
padding: calc(var(--font-size) * var(--theme-line-height-base)) 2ch calc(var(--font-size) * var(--theme-line-height-base)) 2ch;
21+
user-select: none;
22+
width: 100%;
23+
}

‎components/modals/ModalCanvasPlatformer.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
'use client';
2+
3+
import styles from '@components/modals/ModalCanvasPlatformer.module.scss';
4+
5+
import * as React from 'react';
6+
import * as Utilities from '@common/utilities';
7+
8+
import { useModals } from '@components/page/ModalContext';
9+
10+
import Button from '@components/Button';
11+
import CanvasPlatformer from '@components/CanvasPlatformer';
12+
import Card from '@components/Card';
13+
14+
interface ModalCanvasPlatformerProps {
15+
buttonText?: string | any;
16+
}
17+
18+
function ModalCanvasPlatformer({ buttonText }: ModalCanvasPlatformerProps) {
19+
const { close } = useModals();
20+
21+
return (
22+
<div className={styles.root}>
23+
<Card title="ALERT">
24+
<CanvasPlatformer rows={12} />
25+
<br />
26+
<br />
27+
<Button onClick={() => close()}>{Utilities.isEmpty(buttonText) ? 'Close' : buttonText}</Button>
28+
</Card>
29+
</div>
30+
);
31+
}
32+
33+
export default ModalCanvasPlatformer;

‎components/modals/ModalCanvasSnake.module.scss‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
@keyframes fadeIn {
2+
from {
3+
opacity: 0;
4+
transform: translateY(88px);
5+
}
6+
to {
7+
opacity: 1;
8+
transform: translateY(0px);
9+
}
10+
}
11+
12+
.root {
13+
animation: fadeIn 0.3s ease-out;
14+
background: var(--theme-background-modal);
15+
box-shadow: 0 0 0 1ch var(--theme-border-subdued);
16+
display: block;
17+
font-weight: 400;
18+
margin: 0 auto;
19+
max-width: 64ch;
20+
padding: calc(var(--font-size) * var(--theme-line-height-base)) 2ch calc(var(--font-size) * var(--theme-line-height-base)) 2ch;
21+
user-select: none;
22+
width: 100%;
23+
}

‎components/modals/ModalCanvasSnake.tsx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
'use client';
2+
3+
import styles from '@components/modals/ModalCanvasSnake.module.scss';
4+
5+
import * as React from 'react';
6+
import * as Utilities from '@common/utilities';
7+
8+
import { useModals } from '@components/page/ModalContext';
9+
10+
import Button from '@components/Button';
11+
import CanvasSnake from '@components/CanvasSnake';
12+
import Card from '@components/Card';
13+
14+
interface ModalCanvasSnakeProps {
15+
buttonText?: string | any;
16+
}
17+
18+
function ModalCanvasSnake({ buttonText }: ModalCanvasSnakeProps) {
19+
const { close } = useModals();
20+
21+
return (
22+
<div className={styles.root}>
23+
<Card title="CANVAS PLATFORMER">
24+
<CanvasSnake rows={12} />
25+
<br />
26+
<br />
27+
<Button onClick={() => close()}>{Utilities.isEmpty(buttonText) ? 'Close' : buttonText}</Button>
28+
</Card>
29+
</div>
30+
);
31+
}
32+
33+
export default ModalCanvasSnake;

‎components/modals/ModalMatrixModes.module.scss‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
@keyframes fadeIn {
2+
from {
3+
opacity: 0;
4+
transform: translateY(88px);
5+
}
6+
to {
7+
opacity: 1;
8+
transform: translateY(0px);
9+
}
10+
}
11+
12+
.root {
13+
animation: fadeIn 0.3s ease-out;
14+
background: var(--theme-background-modal);
15+
box-shadow: 0 0 0 1ch var(--theme-border-subdued);
16+
display: block;
17+
font-weight: 400;
18+
margin: 0 auto;
19+
max-width: 64ch;
20+
padding: calc(var(--font-size) * var(--theme-line-height-base)) 2ch calc(var(--font-size) * var(--theme-line-height-base)) 2ch;
21+
user-select: none;
22+
width: 100%;
23+
}

0 commit comments

Comments
 (0)