my @tapstyle = (
@wrapstyle,
'{ line-height: 1ex }',
+ 'td:not(.sample) { vertical-align: top }',
'.sample { font-size: 80% }',
);
1,10,9,12,3,4,0, 14,23,22,25,16,17,26, # dark, light hues
);
+# Order to put similar sounds close to each other:
+# ┌ R Y G C B M X
+# ┌┼──────────────
+# W│ o e y h s f -
+# │muaixqgkdtbp l
+# K│ w n j c z v r
+
+my @hueletters = ((26) x 27);
+@hueletters[map { ord($_) - ord('a') } qw(
+ u a i x q g k d t b p m l w n j c z v r o e y h s f
+)] = @hueorder;
+
sub disptap {
my $code = shift;
my ($prefix, @dots) = $code =~ m/\A(-?)(\d)(\d)/ or return $code;
sub disphues {
my ($index, $hues, $opaque) = @_;
+ $index >= 0 or $index = 26;
my @lum = ($index % 3, $index / 3 % 3, $index / 9); # hue opacities (0..2)x3
my @lumf = $opaque ? ('hsl(%s,100%%,50%%)', 'hsl(%s,100%%,25%%)') :
('hsl(%s,100%%,50%%)', 'hsla(%s,100%%,50%%,.5)');
return sprintf(
- '<svg width="16" height="16" viewBox="0 0 22 22">%s</svg>',
+ '<svg width="16" height="16" viewBox="0 0 12 12">%s</svg>',
join '', map {
my $colf = $lumf[ $lum[$_] ];
!$colf ? () : sprintf('<circle cx="%d" cy="%d" r="%d" fill="%s"/>',
- 10 + $_, $_ == 1 ? 12 : 10, 10, sprintf($colf, $hues->[$_])
+ 5 + $_, $_ == 1 ? 7 : 5, 5, sprintf($colf, $hues->[$_])
);
} 0 .. 2
);
],
list => [
map { disphues($_, [180, 60, 300]) } # Cyan, Yellow, Magenta
- @hueorder[13..18, 19, 0..11, 20..25, 12, 26],
+# @hueorder[13..18, 19, 0..11, 20..25, 12, 26],
+ @hueletters
],
},
dni => {
title => "D'ni",
+ style => [
+ 'svg { border: 1px solid #000 }',
+ '.sample span + span svg { border-left: 0 }',
+ ],
list => [
map {
- state $window = 'M-.5,-.5H8.5V8.5H-.5Z';
state $v = [
'',
'M0,4 8,4',
'M4,-.5 0,4 4,8.5',
'M4,8 4,2 8,2',
];
- sprintf '<svg width="16" height="16" viewBox="-.5 -.5 9 9"><path d="%s"/></svg>',
- $window . ($h->[$_ % 5] . $v->[$_ / 5] || $v->[6]);
+ sprintf '<svg width="16" height="16" viewBox="0 0 8 8"><path d="%s"/></svg>',
+ $h->[$_ % 5] . $v->[$_ / 5] || $v->[6];
} 0 .. 5*5
],
},