create-asciitorium 0.1.21 → 0.1.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
@import url('https://fonts.cdnfonts.com/css/jetbrains-mono');
|
|
1
2
|
@font-face {
|
|
2
3
|
font-family: 'PrintChar21';
|
|
3
4
|
src:
|
|
@@ -9,15 +10,31 @@
|
|
|
9
10
|
}
|
|
10
11
|
|
|
11
12
|
body {
|
|
12
|
-
font-family: '
|
|
13
|
-
margin:
|
|
13
|
+
font-family: 'JetBrains Mono', sans-serif;
|
|
14
|
+
margin: 0;
|
|
14
15
|
background: black;
|
|
15
16
|
color: #3fff00;
|
|
16
17
|
|
|
17
|
-
/* Center the screen horizontally */
|
|
18
|
+
/* Center the screen both horizontally and vertically */
|
|
18
19
|
display: flex;
|
|
19
20
|
justify-content: center;
|
|
21
|
+
align-items: center;
|
|
20
22
|
height: 100vh; /* Full viewport height */
|
|
23
|
+
width: 100vw; /* Full viewport width */
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
#screen {
|
|
27
|
+
/* Use 90% of viewport dimensions to leave some margin */
|
|
28
|
+
width: 90vw;
|
|
29
|
+
height: 90vh;
|
|
30
|
+
margin: 0;
|
|
31
|
+
padding: 0;
|
|
32
|
+
overflow: hidden; /* Hide scrollbars for clean appearance */
|
|
33
|
+
|
|
34
|
+
/* Ensure monospace font for proper character sizing */
|
|
35
|
+
font-family: 'PrintChar21', 'Courier New', Courier, monospace;
|
|
36
|
+
font-size: 16px; /* Base font size for character measurement */
|
|
37
|
+
line-height: 1; /* Tight line spacing for ASCII art */
|
|
21
38
|
}
|
|
22
39
|
|
|
23
40
|
.inverted {
|
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
<html lang="en">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
|
-
<
|
|
6
|
-
<
|
|
5
|
+
<title>asciitorium</title>
|
|
6
|
+
<link rel="icon" type="image/png" href="/logo.png" />
|
|
7
7
|
<link rel="stylesheet" href="index.css" />
|
|
8
8
|
</head>
|
|
9
9
|
<body>
|
|
10
|
-
<
|
|
11
|
-
<script type="module" src="src/main.tsx"></script>
|
|
10
|
+
<pre id="screen">Loading...</pre>
|
|
11
|
+
<script type="module" src="/src/main.tsx"></script>
|
|
12
12
|
</body>
|
|
13
13
|
</html>
|
|
@@ -3,6 +3,7 @@ import {
|
|
|
3
3
|
AsciiArt,
|
|
4
4
|
Select,
|
|
5
5
|
Component,
|
|
6
|
+
Row,
|
|
6
7
|
PersistentState,
|
|
7
8
|
loadArt,
|
|
8
9
|
} from 'asciitorium';
|
|
@@ -12,6 +13,7 @@ import {
|
|
|
12
13
|
CelticBorderExample,
|
|
13
14
|
SelectExample,
|
|
14
15
|
MultiSelectExample,
|
|
16
|
+
RelativeSizingExample,
|
|
15
17
|
TextInputExample,
|
|
16
18
|
TabsExample,
|
|
17
19
|
TextExample,
|
|
@@ -34,6 +36,7 @@ const componentList = [
|
|
|
34
36
|
'Button',
|
|
35
37
|
'CelticBorder',
|
|
36
38
|
'MultiSelect',
|
|
39
|
+
'RelativeSizing',
|
|
37
40
|
'Select',
|
|
38
41
|
'Sliders',
|
|
39
42
|
'Tabs',
|
|
@@ -47,6 +50,7 @@ const examples = {
|
|
|
47
50
|
CelticBorder: CelticBorderExample,
|
|
48
51
|
Select: SelectExample,
|
|
49
52
|
MultiSelect: MultiSelectExample,
|
|
53
|
+
RelativeSizing: RelativeSizingExample,
|
|
50
54
|
TextInput: TextInputExample,
|
|
51
55
|
Sliders: SlidersExample,
|
|
52
56
|
Tabs: TabsExample,
|
|
@@ -55,26 +59,26 @@ const examples = {
|
|
|
55
59
|
};
|
|
56
60
|
|
|
57
61
|
const app = (
|
|
58
|
-
<App
|
|
62
|
+
<App>
|
|
59
63
|
<AsciiArt content={titleArt} align="center" gap={{ bottom: 2 }} />
|
|
60
|
-
<
|
|
64
|
+
<Row height="fit">
|
|
61
65
|
<Select
|
|
62
66
|
label="Components:"
|
|
63
|
-
width=
|
|
64
|
-
height=
|
|
67
|
+
width="30%"
|
|
68
|
+
height="fit"
|
|
65
69
|
items={componentList}
|
|
66
70
|
selectedItem={selectedComponent}
|
|
67
71
|
border
|
|
68
72
|
/>
|
|
69
73
|
<Component
|
|
70
|
-
width=
|
|
71
|
-
height=
|
|
74
|
+
width="fit"
|
|
75
|
+
height="fit"
|
|
72
76
|
dynamicContent={{
|
|
73
77
|
selectedKey: selectedComponent,
|
|
74
78
|
componentMap: examples,
|
|
75
79
|
}}
|
|
76
80
|
/>
|
|
77
|
-
</
|
|
81
|
+
</Row>
|
|
78
82
|
</App>
|
|
79
83
|
);
|
|
80
84
|
|