create-asciitorium 0.1.27 → 0.1.29
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.
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# create-asciitorium
|
|
2
2
|
|
|
3
|
-
`create-asciitorium` is a command-line tool that helps you quickly scaffold a new [asciitorium](
|
|
3
|
+
`create-asciitorium` is a command-line tool that helps you quickly scaffold a new [asciitorium](https://github.com/iroknee/asciitorium) project. It sets up all the necessary files, folders, and dependencies so you can start building ASCII art-based web applications with minimal setup.
|
|
4
4
|
|
|
5
5
|
## Features
|
|
6
6
|
|
|
@@ -14,10 +14,10 @@
|
|
|
14
14
|
|
|
15
15
|
### Installation
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
To start a new asciitorium project:
|
|
18
18
|
|
|
19
19
|
```bash
|
|
20
|
-
npm create asciitorium
|
|
20
|
+
npm create asciitorium my-app
|
|
21
21
|
```
|
|
22
22
|
|
|
23
23
|
This will create a new directory with the specified project name, scaffold the project, and install dependencies.
|
|
@@ -41,19 +41,54 @@ npm run build
|
|
|
41
41
|
|
|
42
42
|
### Other Scripts
|
|
43
43
|
|
|
44
|
-
|
|
44
|
+
Asciitorium supports viewing ascii art files. There are a few easy ways to create some specific ascii art, including FIGlet fonts and mazes/maps.
|
|
45
|
+
|
|
46
|
+
To generate FIGlet ASCII art assets (automatically placed in public/art):
|
|
45
47
|
|
|
46
48
|
```bash
|
|
47
49
|
npm run figlet font "a phrase"
|
|
48
50
|
```
|
|
49
51
|
|
|
50
|
-
|
|
52
|
+
#### FIGlet Examples
|
|
53
|
+
|
|
54
|
+
Here are some practical examples for generating ASCII art:
|
|
55
|
+
|
|
56
|
+
```bash
|
|
57
|
+
# Generate a game title
|
|
58
|
+
npm run figlet big "DUNGEON QUEST"
|
|
59
|
+
|
|
60
|
+
# Create a welcome message
|
|
61
|
+
npm run figlet standard "Welcome"
|
|
62
|
+
|
|
63
|
+
# Generate stylized text for menus
|
|
64
|
+
npm run figlet small "Main Menu"
|
|
65
|
+
|
|
66
|
+
# Create decorative headers
|
|
67
|
+
npm run figlet banner "Level 1"
|
|
68
|
+
|
|
69
|
+
# Generate large title text
|
|
70
|
+
npm run figlet block "GAME OVER"
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
#### Popular FIGlet Fonts
|
|
74
|
+
|
|
75
|
+
Some commonly used fonts include:
|
|
76
|
+
|
|
77
|
+
- `big` - Large, bold letters
|
|
78
|
+
- `standard` - Default FIGlet font
|
|
79
|
+
- `small` - Compact text
|
|
80
|
+
- `banner` - Wide banner-style text
|
|
81
|
+
- `block` - Solid block letters
|
|
82
|
+
- `slant` - Italicized appearance
|
|
83
|
+
- `shadow` - Text with shadow effect
|
|
84
|
+
|
|
85
|
+
You may also list all available FIGlet fonts supported:
|
|
51
86
|
|
|
52
87
|
```bash
|
|
53
88
|
npm run figlet:fonts
|
|
54
89
|
```
|
|
55
90
|
|
|
56
|
-
|
|
91
|
+
To generate ASCII maze files (placed in public/art/mazes):
|
|
57
92
|
|
|
58
93
|
```bash
|
|
59
94
|
node scripts/maze-builder.js <width> <height> <filename> [--smooth]
|
|
@@ -69,7 +104,7 @@ The `--smooth` flag uses Unicode box drawing characters for improved visual appe
|
|
|
69
104
|
|
|
70
105
|
A typical generated project will look like:
|
|
71
106
|
|
|
72
|
-
```
|
|
107
|
+
```bash
|
|
73
108
|
my-asciitorium-app/
|
|
74
109
|
├── public/
|
|
75
110
|
│ ├── art/
|
|
@@ -94,11 +129,7 @@ my-asciitorium-app/
|
|
|
94
129
|
|
|
95
130
|
## Learn More
|
|
96
131
|
|
|
97
|
-
- [Asciitorium Documentation](
|
|
98
|
-
|
|
99
|
-
## 📝 Changelog
|
|
100
|
-
|
|
101
|
-
See [CHANGELOG.md](../../CHANGELOG.md) for detailed release notes and migration guides.
|
|
132
|
+
- [Asciitorium Documentation](https://github.com/iroknee/asciitorium)
|
|
102
133
|
|
|
103
134
|
## License
|
|
104
135
|
|
|
@@ -1,39 +1,39 @@
|
|
|
1
1
|
§ {"loop":true,"duration":120}
|
|
2
2
|
_ _ _ _
|
|
3
3
|
__ _ ___ ___(_|_) |_ ___ _ __(_)_ _ _ __ ___
|
|
4
|
-
|
|
5
|
-
| (_|
|
|
6
|
-
|
|
4
|
+
/ _` / __|/ __| | | __/ _ \| '__| | | | | '_ ` _ \
|
|
5
|
+
| (_| \__ \ (__| | | || (_) | | | | |_| | | | | | |
|
|
6
|
+
\__,_|___/\___|_|_|\__\___/|_| |_|\__,_|_| |_| |_|
|
|
7
7
|
¶ {"duration":8000}
|
|
8
8
|
_ _ _
|
|
9
|
-
__ _ ___ ___(_| )
|
|
10
|
-
|
|
11
|
-
| (_|
|
|
12
|
-
|
|
9
|
+
__ _ ___ ___(_| )| _ ___ _ __(_)_ _ _ __ .
|
|
10
|
+
/ _` / __|/ __| | | __/ _ \| '__| | | | | '_ ` _ \.
|
|
11
|
+
| (_| \__ \ (__| | | || (_) | | | | |_| | | | | | |
|
|
12
|
+
\__,_|___/\___|_|_|\__\___/|_| |_|\__,_|_| |_| |_|
|
|
13
13
|
¶ {"duration":1000}
|
|
14
14
|
. _ * _ * .
|
|
15
15
|
__ _ ___ ___(_|_).|_ * _ __(_)_ _ * __
|
|
16
|
-
|
|
17
|
-
| (_|
|
|
18
|
-
|
|
16
|
+
/ _` / __|/ _ . | __/ . \ '__| | | | ' ` \ .
|
|
17
|
+
| (_| \__ (__| *|.| || (_) | * | | |_| *| | | │ .
|
|
18
|
+
\__,_|___/\__ ._|_|\__\ * /|_| .|\__ |_| |_│
|
|
19
19
|
¶ {"duration":140}
|
|
20
20
|
* _ * . * . *
|
|
21
21
|
__ * (_|_) . * _ __ . . __
|
|
22
|
-
|
|
23
|
-
| * *
|
|
24
|
-
. .|___
|
|
22
|
+
/ ` __| | __/ * \ '__| * ` \
|
|
23
|
+
| * * \__ | | || (_) | . | * * | | │
|
|
24
|
+
. .|___/ |_| \__\___/|_| . . |_| . |_│
|
|
25
25
|
¶ {"duration":140}
|
|
26
26
|
. * . _ * . . .
|
|
27
27
|
__ * * (_|_). . * _ * . __
|
|
28
|
-
|
|
29
|
-
| (_| *
|
|
30
|
-
. ._|___
|
|
28
|
+
/ _` * __| | __/ * * \ '__| . * _ \
|
|
29
|
+
| (_| * \__ | || (_) . | * . * | | │
|
|
30
|
+
. ._|___/ |_| \__\ * |_| . * |_| |_│
|
|
31
31
|
¶ {"duration":160}
|
|
32
32
|
. * . _ * . * . .
|
|
33
33
|
* . (_|_) . . * . * .
|
|
34
|
-
|
|
35
|
-
| * *
|
|
36
|
-
. .|___
|
|
34
|
+
/ ` * __| __/ * . * . * . \
|
|
35
|
+
| * * \__ | (_)* . * . * . | │
|
|
36
|
+
. .|___/ |_| * . * . . |_|
|
|
37
37
|
¶ {"duration":140}
|
|
38
38
|
. * . . * . .
|
|
39
39
|
. . . * . * .
|
|
@@ -107,5 +107,5 @@
|
|
|
107
107
|
|
|
108
108
|
_ _ _ _
|
|
109
109
|
__ _ ___ ___(_|_) |_ ___ _ __(_)_ _ _ __ ___
|
|
110
|
-
|
|
111
|
-
| (_|
|
|
110
|
+
/ _` / __|/ __| | | __/ _ \| '__| | | | | '_ ` _ \
|
|
111
|
+
| (_| \__ \ (__| | | || (_) | | | | |_| | | | | | |
|
|
@@ -1,81 +1,83 @@
|
|
|
1
1
|
import {
|
|
2
2
|
App,
|
|
3
|
-
|
|
3
|
+
Art,
|
|
4
4
|
Select,
|
|
5
|
-
|
|
5
|
+
Switch,
|
|
6
6
|
Row,
|
|
7
7
|
PersistentState,
|
|
8
|
-
|
|
8
|
+
Text,
|
|
9
9
|
} from 'asciitorium';
|
|
10
10
|
|
|
11
11
|
import {
|
|
12
12
|
ButtonExample,
|
|
13
13
|
CelticBorderExample,
|
|
14
|
+
FormExample,
|
|
14
15
|
MultiSelectExample,
|
|
15
|
-
|
|
16
|
+
LayoutSizingExample,
|
|
16
17
|
TabsExample,
|
|
17
|
-
|
|
18
|
+
ArtExample,
|
|
18
19
|
SlidersExample,
|
|
19
|
-
|
|
20
|
-
AsciiMazeExample,
|
|
20
|
+
MazeExample,
|
|
21
21
|
} from 'asciitorium/examples';
|
|
22
22
|
|
|
23
|
-
// Load the title ASCII art
|
|
24
|
-
const titleArt = await loadArt('./art/asciitorium.txt');
|
|
25
|
-
|
|
26
23
|
// Main state for component selection with persistence
|
|
27
|
-
const selectedComponent = new PersistentState(
|
|
28
|
-
'Button',
|
|
29
|
-
'demo-selected-component'
|
|
30
|
-
);
|
|
24
|
+
const selectedComponent = new PersistentState('Art', 'demo-selected-component');
|
|
31
25
|
|
|
32
26
|
// Component list for navigation
|
|
33
27
|
const componentList = [
|
|
34
|
-
'
|
|
35
|
-
'AsciiMaze',
|
|
28
|
+
'Art',
|
|
36
29
|
'Button',
|
|
37
30
|
'CelticBorder',
|
|
38
31
|
'Form',
|
|
32
|
+
'Maze',
|
|
39
33
|
'MultiSelect',
|
|
40
|
-
'
|
|
34
|
+
'LayoutSizing',
|
|
41
35
|
'Sliders',
|
|
42
36
|
'Tabs',
|
|
43
37
|
];
|
|
44
38
|
|
|
45
39
|
// Component mapping for dynamic content
|
|
46
40
|
const examples = {
|
|
47
|
-
|
|
48
|
-
AsciiMaze: AsciiMazeExample,
|
|
41
|
+
Art: ArtExample,
|
|
49
42
|
Button: ButtonExample,
|
|
50
43
|
CelticBorder: CelticBorderExample,
|
|
44
|
+
Form: FormExample,
|
|
45
|
+
Maze: MazeExample,
|
|
51
46
|
MultiSelect: MultiSelectExample,
|
|
52
|
-
|
|
47
|
+
LayoutSizing: LayoutSizingExample,
|
|
53
48
|
Sliders: SlidersExample,
|
|
54
|
-
Form: FormExample,
|
|
55
49
|
Tabs: TabsExample,
|
|
56
50
|
};
|
|
57
51
|
|
|
58
52
|
const app = (
|
|
59
53
|
<App>
|
|
60
|
-
<
|
|
61
|
-
|
|
54
|
+
<Art
|
|
55
|
+
src={'./art/asciitorium.txt'}
|
|
56
|
+
style={{ align: 'center', gap: { bottom: 2 } }}
|
|
57
|
+
/>
|
|
58
|
+
<Row style={{ height: 'fill' }}>
|
|
62
59
|
<Select
|
|
63
60
|
label="Components:"
|
|
64
|
-
|
|
65
|
-
|
|
61
|
+
style={{
|
|
62
|
+
width: '30%',
|
|
63
|
+
height: 'fill',
|
|
64
|
+
}}
|
|
66
65
|
items={componentList}
|
|
67
66
|
selectedItem={selectedComponent}
|
|
68
|
-
border
|
|
69
67
|
/>
|
|
70
|
-
<
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
selectedKey: selectedComponent,
|
|
75
|
-
componentMap: examples,
|
|
68
|
+
<Switch
|
|
69
|
+
style={{
|
|
70
|
+
width: 'fill',
|
|
71
|
+
height: 'fill',
|
|
76
72
|
}}
|
|
73
|
+
selectedKey={selectedComponent}
|
|
74
|
+
componentMap={examples}
|
|
77
75
|
/>
|
|
78
76
|
</Row>
|
|
77
|
+
<Text
|
|
78
|
+
content="Navigation: ↑↓ or W/S to browse • [Space]/[Enter] to select • [Tab] to switch focus"
|
|
79
|
+
style={{ align: 'center', gap: { top: 1 } }}
|
|
80
|
+
/>
|
|
79
81
|
</App>
|
|
80
82
|
);
|
|
81
83
|
|