Skip to content

Commit f8ef6e2

Browse files
authored
feat(tutorials) | fix(modals) | opt(menus)
* feat(tutorials) | fix(modals) * rewrite(menus) * fix(tests) unit & e2e * fix(modal) add cleanup
1 parent e89fc50 commit f8ef6e2

File tree

90 files changed

+10854
-254
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

90 files changed

+10854
-254
lines changed

docs/other-tools.md

Lines changed: 8 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -169,39 +169,17 @@ else
169169
fi
170170
```
171171

172-
### Git LFS (Large File Storage)
172+
### Optimizing Tutorial Images
173173

174-
For managing large binary files (artwork examples, test fixtures).
175-
176-
**Installation:**
174+
When adding new tutorial preview images, optimize them with a tool like [imagemagick](https://imagemagick.org/script/download.php) limiting their palettes to only 16 colors and stripping any metadata.
177175

178176
```bash
179-
# Ubuntu/Debian
180-
sudo apt install git-lfs
181-
182-
# macOS
183-
brew install git-lfs
184-
185-
# Initialize in repo
186-
git lfs install
187-
```
188-
189-
**Usage:**
190-
191-
```bash
192-
# Track specific file types
193-
git lfs track "*.xb"
194-
git lfs track "*.bin"
195-
git lfs track "*.png"
196-
197-
# List tracked patterns
198-
git lfs track
199-
200-
# List tracked files
201-
git lfs ls-files
202-
203-
# Pull LFS files
204-
git lfs pull
177+
#!/bin/sh
178+
for file in *; do
179+
if [ -f "$file" ] && [ "./$file" != "$0" ]; then
180+
convert "$file" -colors 16 -strip "$file"
181+
fi
182+
done
205183
```
206184

207185
## Code Quality Tools

eslint.config.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,8 +49,10 @@ export default [
4949
crypto: 'readonly',
5050
document: 'readonly',
5151
existsSync: 'readonly',
52+
fetch: 'readonly',
5253
indexedDB: 'readonly',
5354
localStorage: 'readonly',
55+
location: 'readonly',
5456
mkdirSync: 'readonly',
5557
navigator: 'readonly',
5658
performance: 'readonly',

src/ansi/ANSI-TUT.002.ans

5.71 KB
Binary file not shown.

src/ansi/ANSI-TUT.002.png

11.3 KB
Loading

src/ansi/ANSI-TUT.004.ans

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+

2+
 This tutorial was done by Halaster of Fire, taken from P1's AnsiHelp File. 
3+
 
4+
5+
how to draw the halaster way (part1 of ?) - by halaster[fire president/acid '95]�����--���������������������������������������������������-�����������������
6+
��������������� shape -
7+
���������������
8+
��������������� ok .. here, we have a very simple shape. that's
9+
��������������� neat, if you want a very simple ansi.
10+
��������������� the first rule of halaster shading is to never
11+
��������������� leave any shape in it's basic form. so we're gonna
12+
��������������� distort this little bugger .. .like a so.
13+
14+
����ܲ
15+
���������������� fucked up shape -
16+
����������������
17+
����������������� so it may not look grand now, just bear with me.
18+
����������������� at least it was a little harder to draw than
19+
����������������� the regular square.
20+
����������������
21+
����������������
22+
������
23+
����ܲ
24+
���������������� color -
25+
����������������
26+
����������������� there are two main types of colors in ansi. one type
27+
����������������� shades real well, the other doesn't. simple, eh?
28+
�����������������
29+
���������������� i'll show you how to shade both.
30+
����������������
31+
������
32+
33+
����ܲ color that shades good -
34+
����������bright
35+
����������� �� ok, here i've chosen cyan .. one of the easiest to shade
36+
����������������� colors .. now, the first thing to do is to decide
37+
����������������� where the light source will be.
38+
�����������������
39+
���������������� for this example, i've chosen dark to be lower-left.
40+
 dark����������� and bright to be upper-right.
41+
������
42+
43+
����ܲ
44+
���� � ��߲�����
45+
���� ����� ���� color swirls -
46+
����������� ����
47+
����������������� i never ever ever do straight line bright spots and only
48+
�� ������������� use ��� shading as detail work. here i've mapped out the۲��� ������� bright spots.
49+
����������ܰ����
50+
������
51+
52+
����ܲ <-yes
53+
���� � �߲��۲ 
54+
���� ����� ���� cartoon borders -
55+
����������� ����
56+
����������������� another neat trick is to use cartoon borders on the
57+
�� ������������� edges oh a shape .. i only do it with brights, however.
58+
۲��� ������� this square really doesn't show the potential of borders
59+
no-> ����������ܰ���� that well .. i suggest you look at some other pics. :)
60+
������
61+
62+
����ܲ
63+
���� � �߲����  extremes -
64+
���� ����� ����
65+
����������� ���� the next step in halshade is to go to extremes .. this
66+
����������������� means little bright spots and little spots of complete
67+
�� ������������� black should be in the center of the shade regions.
68+
۲��� �������
69+
۰��������ܰ���� color 7, 15, and color 0 work best for this.
70+
������
71+
����ܲ
72+
���� � �߲����  the 'plus' -
73+
��� ����� ����
74+
�� ������� ���� a great shading technique that i picked up from lord
75+
����������������� jazz, sushi-x and maestro is the plus. while some people�� ���ܲ�������� hate it, i think it's a great way to add 'grit' to a pic.۲��� ��������
76+
۰��������ܰ���� the chromatic �� is a nice touch, too.
77+
������
78+
����ܲ
79+
���� � �߲����  random shade -
80+
��� ��� ����
81+
�� ������� ���� i like to throw random colors into my work ..
82+
����������������� but i always choose colors that are in other parts
83+
�� ���ܲ�������� of the picture .. for example, imagine that there's
84+
۲��� ���� � � a blue square nearby for this example.
85+
۰��������ܰ����
86+
������
87+
����ܲ
88+
��ܲ �� �߲���۱ the pnakotic -
89+
��� ��� ����
90+
�� ������� ���� here's something i learned from pnakotic.
91+
�����������������
92+
�� ���ܲ�������� � = � � = � � = � � = � � = � � = �
93+
۲��� ���� � �
94+
����������ܰ���� throw in the high intensity f1 and 2's to add more grit.
95+
������also use f3's of the primary color.
96+
97+
here����ܲ
98+
���� �� �߲���۱ the � and � reversal -
99+
��� ��� ����
100+
here �� ������� ���� another neat trick is swapping �'s for �'s and vice-
101+
����������������� versa .. check it out.
102+
�� ���ܲ�������� 
103+
۲��� ���� � � here
104+
����������ܰ���� 
105+
������here
106+
107+
 ����ܲ
108+
���� �� �߲���۱ last touches -
109+
��� � ����
110+
��  � � hal ���� here's where you do pic-specific things. like your
111+
���� ����������� initials and stuff. or extra random shading.
112+
�� ���ܲ�������� 
113+
۲��� ���  � �
114+
�����۲���ܰ���� 
115+
������
116+
117+
 which do you prefer? :)
118+
119+
 ����ܲ
120+
���� �� �߲���۱���������������
121+
��� � �������������������
122+
��  � � hal ����<- halshade!(c)��������������� 
123+
���� ���������������������� ��� 
124+
�� ���ܲ��������leading brand -> ۱������������� 
125+
۲��� ���  � �۲������������� 
126+
�����۲���ܰ���� �۲������������ 
127+
������
128+
129+
hard color -
130+
 ����ܲ
131+
���������߲����� the only thing you'll have to do with hard colors
132+
���������������� is eliminate the extremes and, sometimes, cut out all
133+
���������hal����� color 8 .. check this red square.
134+
޲���������������
135+
ޱ�����߰�������� hard colors = red, green and blue.
136+
 � ������������
137+
 �� ��������� if you really need the full shape, you can use light
138+
    color 8 shading.
139+

140+
141+
thanks for your time and have fun drawring! if this has been useful at all,
142+
drop me a line at the regency to let me know.
143+
   - halaster[fire]
144+
145+
---[eof]
146+
SAUCE00Halshade!(c) Halaster Fire 19960503S%P�

src/ansi/ANSI-TUT.004.png

9.93 KB
Loading

0 commit comments

Comments
 (0)