misc/vtm
0
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

[mod] token and tape style

Browse source
This commit is contained in:
fenris 2025-09-24 00:28:45 +02:00
parent 676d4e13f5
commit ae12d30b2a
3 changed files with 116 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
source/helpers/svg.ts
View file

@ -174,6 +174,64 @@ namespace lib_svg
}
/**
* @author kcf <vidofnir@folksprak.org>
*/
export function isogon
(
sides : int,
radius : float,
{
"tilt": tilt = 0,
"position": position = lib_vector.cartesian(0, 0),
"transformations": transformations = [],
"classes": classes = [],
}
:
{
tilt ?: float;
position ?: lib_vector.type_vector;
transformations ?: Array<string>;
classes ?: Array<string>;
}
=
{
}
)
: lib_xml.type_node
{
const factor : float = (1 / sides);
return (
path
(
(
lib_list.sequence(sides)
.map
(
i => (
lib_vector.add
(
lib_vector.polar
(
(((i * factor) + tilt) * (2 * Math.PI)),
radius
)
,
position
)
)
)
),
true,
{
"class": classes.join(" "),
"transform": transformations.join(" "),
}
)
);
}
/**
* @author kcf <vidofnir@folksprak.org>
*/

57
source/manifestation/svg/token.ts
View file

@ -82,15 +82,15 @@ namespace mod_vtm
let children_token : Array<lib_xml.type_node> = [];
// Stein
{
let node_stone : lib_xml.type_node = (
lib_xml.create_normal
const node_stone : lib_xml.type_node = (
lib_svg.isogon
(
"circle",
6,
0.1,
{
"cx": (0.0).toFixed(lib_svg.float_precision),
"cy": (0.0).toFixed(lib_svg.float_precision),
"r": (0.125).toFixed(lib_svg.float_precision),
"class": "stone",
"position": lib_vector.cartesian(0, 0),
"tilt": (1/4 + 1/12),
"classes": ["stone"],
}
)
);
@ -104,31 +104,38 @@ namespace mod_vtm
(
(symbol, index) =>
{
let r : float = 0.06125;
let x : float = (+0.1+(2*r*1.25)*index);
let y : float = (-0.1);
let node_entry : lib_xml.type_node = (
lib_xml.create_normal
const r : float = 0.0800;
const x : float = (+0.1+(2*r*1.25)*index);
const y : float = (-0.1);
const node_entry : lib_xml.type_node = (
lib_svg.group
(
"circle",
{
"cx": x.toFixed(lib_svg.float_precision),
"cy": y.toFixed(lib_svg.float_precision),
"r": r.toFixed(lib_svg.float_precision),
/*
"x": (x-r).toFixed(lib_svg.float_precision),
"y": (y-r).toFixed(lib_svg.float_precision),
"width": (2*r).toFixed(lib_svg.float_precision),
"height": (2*r).toFixed(lib_svg.float_precision),
*/
"class": (
"transform": (
[
lib_svg.translation(x, y),
lib_svg.rotation(index * (1/12)),
].join(" ")
)
},
[
lib_svg.isogon
(
3,
r,
{
"position": lib_vector.cartesian(0, 0),
"tilt": (1/4),
"classes":
[
"entry",
"symbol_" + symbol.toFixed(0),
].join(" ")
),
]
,
}
)
]
)
);
children_tape.push(node_entry);
}

27
source/manifestation/web/game.scss
View file

@ -30,6 +30,18 @@ $hue_symbol_3: (((($sigma*3)+$offset)%1)*360);
$saturation_symbol: 75%;
$lightness_symbol: 50%;
@keyframes spin
{
from
{
transform: rotate(0deg);
}
to
{
transform: rotate(360deg);
}
}
.frame
{
stroke: none;
@ -44,8 +56,12 @@ $lightness_symbol: 50%;
*/
}
.token
.stone
{
/*
stroke-width: 0.05;
stroke: hsl( 0, 0%, 0%);
*/
stroke: none;
fill: hsl( 0, 0%, 0%);
}
@ -109,10 +125,15 @@ $lightness_symbol: 50%;
.entry
{
/*
stroke: black;
stroke-width: 0.01;
*/
/*
stroke: none;
*/
animation-name: spin;
animation-duration: 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}