create-asciitorium 0.1.41 → 0.1.43
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.
|
@@ -0,0 +1,307 @@
|
|
|
1
|
+
import {
|
|
2
|
+
App,
|
|
3
|
+
Text,
|
|
4
|
+
Button,
|
|
5
|
+
Select,
|
|
6
|
+
Option,
|
|
7
|
+
OptionGroup,
|
|
8
|
+
TextInput,
|
|
9
|
+
Row,
|
|
10
|
+
Column,
|
|
11
|
+
Art,
|
|
12
|
+
Keybind,
|
|
13
|
+
State,
|
|
14
|
+
} from 'asciitorium';
|
|
15
|
+
|
|
16
|
+
// ============================================================================
|
|
17
|
+
// Test 1: Size Behavior
|
|
18
|
+
// ============================================================================
|
|
19
|
+
console.log('TEST 1: Size Behavior');
|
|
20
|
+
|
|
21
|
+
const test1Width = new State(0);
|
|
22
|
+
const test1Height = new State(0);
|
|
23
|
+
|
|
24
|
+
// ============================================================================
|
|
25
|
+
// Test 2: Text Newlines
|
|
26
|
+
// ============================================================================
|
|
27
|
+
console.log('TEST 2: Text Newlines (pilcrow vs backslash-n)');
|
|
28
|
+
|
|
29
|
+
// ============================================================================
|
|
30
|
+
// Test 3: State Reactivity
|
|
31
|
+
// ============================================================================
|
|
32
|
+
console.log('TEST 3: State Reactivity');
|
|
33
|
+
|
|
34
|
+
const reactiveCount = new State(0);
|
|
35
|
+
const reactiveName = new State('Initial');
|
|
36
|
+
|
|
37
|
+
// Verify State subscription works
|
|
38
|
+
reactiveCount.subscribe((value) => {
|
|
39
|
+
console.log(`✅ State subscription triggered: count = ${value}`);
|
|
40
|
+
});
|
|
41
|
+
|
|
42
|
+
// ============================================================================
|
|
43
|
+
// Test 4: Button Auto-sizing
|
|
44
|
+
// ============================================================================
|
|
45
|
+
console.log('TEST 4: Button Auto-sizing');
|
|
46
|
+
|
|
47
|
+
const buttonClicks = new State(0);
|
|
48
|
+
|
|
49
|
+
// ============================================================================
|
|
50
|
+
// Test 5: Select with Options
|
|
51
|
+
// ============================================================================
|
|
52
|
+
console.log('TEST 5: Select Component');
|
|
53
|
+
|
|
54
|
+
const selectedFruit = new State<string>('apple');
|
|
55
|
+
const selectedWeapon = new State<string>('sword');
|
|
56
|
+
|
|
57
|
+
selectedFruit.subscribe((value) => {
|
|
58
|
+
console.log(`✅ Selected fruit changed to: ${value}`);
|
|
59
|
+
});
|
|
60
|
+
|
|
61
|
+
// ============================================================================
|
|
62
|
+
// Test 6: TextInput with State
|
|
63
|
+
// ============================================================================
|
|
64
|
+
console.log('TEST 6: TextInput Component');
|
|
65
|
+
|
|
66
|
+
const textValue = new State('');
|
|
67
|
+
const numberValue = new State(42);
|
|
68
|
+
|
|
69
|
+
// ============================================================================
|
|
70
|
+
// Test 7: Keybind Tests
|
|
71
|
+
// ============================================================================
|
|
72
|
+
console.log('TEST 7: Keybind Component');
|
|
73
|
+
|
|
74
|
+
const keybindTriggerCount = new State(0);
|
|
75
|
+
const keybindDisabled = new State(false);
|
|
76
|
+
|
|
77
|
+
// ============================================================================
|
|
78
|
+
// Test 8: Column Width Default
|
|
79
|
+
// ============================================================================
|
|
80
|
+
console.log('TEST 8: Column Width Behavior');
|
|
81
|
+
|
|
82
|
+
// ============================================================================
|
|
83
|
+
// Test 9: Row Width Default
|
|
84
|
+
// ============================================================================
|
|
85
|
+
console.log('TEST 9: Row Width Behavior');
|
|
86
|
+
|
|
87
|
+
// ============================================================================
|
|
88
|
+
// Test 10: Art Component
|
|
89
|
+
// ============================================================================
|
|
90
|
+
console.log('TEST 10: Art Component (if art files exist)');
|
|
91
|
+
|
|
92
|
+
// ============================================================================
|
|
93
|
+
// Render App
|
|
94
|
+
// ============================================================================
|
|
95
|
+
|
|
96
|
+
const app = (
|
|
97
|
+
<App>
|
|
98
|
+
{/* Keybinds for testing */}
|
|
99
|
+
<Keybind
|
|
100
|
+
keyBinding="k"
|
|
101
|
+
action={() => {
|
|
102
|
+
keybindTriggerCount.value++;
|
|
103
|
+
console.log(`✅ Keybind 'k' triggered: ${keybindTriggerCount.value}`);
|
|
104
|
+
}}
|
|
105
|
+
disabled={keybindDisabled}
|
|
106
|
+
/>
|
|
107
|
+
<Keybind
|
|
108
|
+
keyBinding="d"
|
|
109
|
+
action={() => {
|
|
110
|
+
keybindDisabled.value = !keybindDisabled.value;
|
|
111
|
+
console.log(`🔄 Keybind disabled toggled: ${keybindDisabled.value}`);
|
|
112
|
+
}}
|
|
113
|
+
/>
|
|
114
|
+
<Keybind
|
|
115
|
+
keyBinding="c"
|
|
116
|
+
action={() => {
|
|
117
|
+
reactiveCount.value++;
|
|
118
|
+
}}
|
|
119
|
+
/>
|
|
120
|
+
|
|
121
|
+
<Column width="100%" gap={1}>
|
|
122
|
+
{/* Header */}
|
|
123
|
+
<Text border={true} textAlign="center" width="100%">
|
|
124
|
+
ASCIITORIUM Reference Validation Tests
|
|
125
|
+
</Text>
|
|
126
|
+
|
|
127
|
+
{/* Test 1: Size Behavior */}
|
|
128
|
+
<Text border={true} width="100%">
|
|
129
|
+
TEST 1: Size Behavior
|
|
130
|
+
</Text>
|
|
131
|
+
<Row gap={2}>
|
|
132
|
+
<Column gap={1}>
|
|
133
|
+
<Text border={true} width={30}>
|
|
134
|
+
Fixed width (30)
|
|
135
|
+
</Text>
|
|
136
|
+
<Text border={true}>
|
|
137
|
+
Auto width (omitted)
|
|
138
|
+
</Text>
|
|
139
|
+
<Text border={true}>
|
|
140
|
+
Width should fit this content exactly plus border
|
|
141
|
+
</Text>
|
|
142
|
+
</Column>
|
|
143
|
+
<Column gap={1}>
|
|
144
|
+
<Button width={25}>Fixed Width Button</Button>
|
|
145
|
+
<Button>Auto-calculated</Button>
|
|
146
|
+
<Button>Wider Button Text Content</Button>
|
|
147
|
+
</Column>
|
|
148
|
+
</Row>
|
|
149
|
+
|
|
150
|
+
{/* Test 2: Text Newlines */}
|
|
151
|
+
<Text border={true} width="100%">
|
|
152
|
+
TEST 2: Text Newlines
|
|
153
|
+
</Text>
|
|
154
|
+
<Row gap={2}>
|
|
155
|
+
<Text border={true} width={30}>
|
|
156
|
+
Using pilcrow:¶Line 1¶Line 2¶Line 3
|
|
157
|
+
</Text>
|
|
158
|
+
<Text border={true} width={30}>
|
|
159
|
+
Using \n:
|
|
160
|
+
Line 1
|
|
161
|
+
Line 2
|
|
162
|
+
Line 3
|
|
163
|
+
</Text>
|
|
164
|
+
</Row>
|
|
165
|
+
|
|
166
|
+
{/* Test 3: State Reactivity */}
|
|
167
|
+
<Text border={true} width="100%">
|
|
168
|
+
TEST 3: State Reactivity
|
|
169
|
+
</Text>
|
|
170
|
+
<Column gap={1}>
|
|
171
|
+
<Text border={true}>
|
|
172
|
+
Reactive count: {reactiveCount} (Press [C] to increment)
|
|
173
|
+
</Text>
|
|
174
|
+
<Text border={true}>
|
|
175
|
+
Count value via .value: {reactiveCount.value}
|
|
176
|
+
</Text>
|
|
177
|
+
<Button onClick={() => reactiveCount.value++}>
|
|
178
|
+
Increment (count: {reactiveCount})
|
|
179
|
+
</Button>
|
|
180
|
+
<Button onClick={() => reactiveName.value = 'Changed!'}>
|
|
181
|
+
Change Name
|
|
182
|
+
</Button>
|
|
183
|
+
<Text border={true}>
|
|
184
|
+
Name: {reactiveName}
|
|
185
|
+
</Text>
|
|
186
|
+
</Column>
|
|
187
|
+
|
|
188
|
+
{/* Test 4: Button Auto-sizing */}
|
|
189
|
+
<Text border={true} width="100%">
|
|
190
|
+
TEST 4: Button Auto-sizing
|
|
191
|
+
</Text>
|
|
192
|
+
<Column gap={1}>
|
|
193
|
+
<Button onClick={() => buttonClicks.value++}>
|
|
194
|
+
Click
|
|
195
|
+
</Button>
|
|
196
|
+
<Button onClick={() => buttonClicks.value++}>
|
|
197
|
+
Medium Button
|
|
198
|
+
</Button>
|
|
199
|
+
<Button onClick={() => buttonClicks.value++}>
|
|
200
|
+
This is a very long button label
|
|
201
|
+
</Button>
|
|
202
|
+
<Text>Button clicks: {buttonClicks}</Text>
|
|
203
|
+
</Column>
|
|
204
|
+
|
|
205
|
+
{/* Test 5: Select */}
|
|
206
|
+
<Text border={true} width="100%">
|
|
207
|
+
TEST 5: Select Component
|
|
208
|
+
</Text>
|
|
209
|
+
<Row gap={2}>
|
|
210
|
+
<Column gap={1}>
|
|
211
|
+
<Text>Simple Select:</Text>
|
|
212
|
+
<Select selected={selectedFruit} width={30} height={10}>
|
|
213
|
+
<Option value="apple" label="Apple" />
|
|
214
|
+
<Option value="banana" label="Banana" />
|
|
215
|
+
<Option value="cherry" label="Cherry" />
|
|
216
|
+
<Option value="date" label="Date" />
|
|
217
|
+
</Select>
|
|
218
|
+
<Text>Selected: {selectedFruit}</Text>
|
|
219
|
+
</Column>
|
|
220
|
+
<Column gap={1}>
|
|
221
|
+
<Text>Grouped Select:</Text>
|
|
222
|
+
<Select selected={selectedWeapon} width={30} height={12}>
|
|
223
|
+
<OptionGroup label="Melee">
|
|
224
|
+
<Option value="sword" label="Sword" />
|
|
225
|
+
<Option value="axe" label="Axe" />
|
|
226
|
+
<Option value="mace" label="Mace" />
|
|
227
|
+
</OptionGroup>
|
|
228
|
+
<OptionGroup label="Ranged">
|
|
229
|
+
<Option value="bow" label="Bow" />
|
|
230
|
+
<Option value="crossbow" label="Crossbow" />
|
|
231
|
+
</OptionGroup>
|
|
232
|
+
</Select>
|
|
233
|
+
<Text>Selected: {selectedWeapon}</Text>
|
|
234
|
+
</Column>
|
|
235
|
+
</Row>
|
|
236
|
+
|
|
237
|
+
{/* Test 6: TextInput */}
|
|
238
|
+
<Text border={true} width="100%">
|
|
239
|
+
TEST 6: TextInput Component
|
|
240
|
+
</Text>
|
|
241
|
+
<Column gap={1}>
|
|
242
|
+
<Text>String Input:</Text>
|
|
243
|
+
<TextInput value={textValue} placeholder="Enter text..." width={40} />
|
|
244
|
+
<Text>Value: [{textValue}]</Text>
|
|
245
|
+
|
|
246
|
+
<Text>Number Input:</Text>
|
|
247
|
+
<TextInput value={numberValue} width={20} />
|
|
248
|
+
<Text>Number value: {numberValue}</Text>
|
|
249
|
+
</Column>
|
|
250
|
+
|
|
251
|
+
{/* Test 7: Keybind */}
|
|
252
|
+
<Text border={true} width="100%">
|
|
253
|
+
TEST 7: Keybind Component
|
|
254
|
+
</Text>
|
|
255
|
+
<Column gap={1}>
|
|
256
|
+
<Text>
|
|
257
|
+
Press [K] to trigger keybind (count: {keybindTriggerCount})
|
|
258
|
+
</Text>
|
|
259
|
+
<Text>
|
|
260
|
+
Press [D] to toggle keybind disabled: {keybindDisabled.value ? 'DISABLED' : 'ENABLED'}
|
|
261
|
+
</Text>
|
|
262
|
+
<Text>
|
|
263
|
+
Press [C] to increment counter via keybind
|
|
264
|
+
</Text>
|
|
265
|
+
</Column>
|
|
266
|
+
|
|
267
|
+
{/* Test 8: Column Width */}
|
|
268
|
+
<Text border={true} width="100%">
|
|
269
|
+
TEST 8: Column Width (auto-sizes to children)
|
|
270
|
+
</Text>
|
|
271
|
+
<Column gap={1} border={true}>
|
|
272
|
+
<Text>Short</Text>
|
|
273
|
+
<Text>This is much longer text content</Text>
|
|
274
|
+
<Text>Medium length</Text>
|
|
275
|
+
</Column>
|
|
276
|
+
|
|
277
|
+
{/* Test 9: Row Width */}
|
|
278
|
+
<Text border={true} width="100%">
|
|
279
|
+
TEST 9: Row Width (default: fill)
|
|
280
|
+
</Text>
|
|
281
|
+
<Row gap={2} border={true}>
|
|
282
|
+
<Text>Item 1</Text>
|
|
283
|
+
<Text>Item 2</Text>
|
|
284
|
+
<Text>Item 3</Text>
|
|
285
|
+
</Row>
|
|
286
|
+
|
|
287
|
+
{/* Test 10: Art (if available) */}
|
|
288
|
+
<Text border={true} width="100%">
|
|
289
|
+
TEST 10: Art Component (requires art files)
|
|
290
|
+
</Text>
|
|
291
|
+
<Column gap={1}>
|
|
292
|
+
<Text>If art/asciitorium.art exists, it should render below:</Text>
|
|
293
|
+
{/* Uncomment if you have art files:
|
|
294
|
+
<Art src="asciitorium" align="center" />
|
|
295
|
+
*/}
|
|
296
|
+
<Text>Art test skipped (no art files in template)</Text>
|
|
297
|
+
</Column>
|
|
298
|
+
|
|
299
|
+
{/* Instructions */}
|
|
300
|
+
<Text border={true} width="100%" textAlign="center">
|
|
301
|
+
Press [Ctrl+C] to exit | [Tab] to navigate
|
|
302
|
+
</Text>
|
|
303
|
+
</Column>
|
|
304
|
+
</App>
|
|
305
|
+
);
|
|
306
|
+
|
|
307
|
+
await app.start();
|