pieces

1 files changed, 94 insertions, 106 deletions

diff --git a/tools/genpieces.mjs b/tools/genpieces.mjs
index 01f3ab2..d52bf64 100644
--- a/tools/genpieces.mjs
+++ b/tools/genpieces.mjs
@@ -17,69 +17,99 @@ const color_pragmatic = make_piece_colors("#5f5c5c")
 const color_prussia = make_piece_colors("#005988")
 const color_saxony = make_piece_colors("#157d36")
 
-function print_cylinder(output, icon_file, c) {
-	let icon = fs.readFileSync(icon_file).toString('base64')
+const IMAGE_W = 40
+const IMAGE_H = Math.round( IMAGE_W * 3/4 )
+
+const RX = (IMAGE_W - 1) / 2
+const RY = (IMAGE_H - 1) / 2
+const SVG_W = RX * 2 + 3
+const SVG_H = RY * 2 + 3
+const CX = (RX * 2 + 3) / 2
+const CY = (RY * 2 + 3) / 2
+
+console.log("CYLINDER", SVG_W, SVG_H)
+
+function mkarc(cx, cy, rx, ry, h) {
+	return [
+		'M', cx - rx, cy,
+		'L', cx - rx, cy + h,
+		'A', rx, ry, 0, 0, 0, cx + rx, cy + h,
+		'L', cx + rx, cy,
+		'z'
+	].join(" ")
+}
+
+function print_cylinder(output, icon_file, c, TALL=15) {
+	let icon = icon_file ? fs.readFileSync(icon_file).toString('base64') : null
 	let svg = []
-	svg.push('<svg xmlns="http://www.w3.org/2000/svg" width="44" height="48">')
-	svg.push('<clipPath id="c"><ellipse cx="22" cy="15" rx="20.5" ry="13.5"/></clipPath>')
 
-	svg.push(`<linearGradient id="g">`)
-	svg.push(`<stop offset="0%" stop-color="${c[1]}"/>`)
-	svg.push(`<stop offset="50%" stop-color="${c[2]}"/>`)
-	svg.push(`<stop offset="100%" stop-color="${c[3]}"/>`)
-	svg.push('</linearGradient>')
+	svg.push(`<svg xmlns="http://www.w3.org/2000/svg" width="${SVG_W}" height="${SVG_H + TALL}">`)
+
+	if (icon)
+		svg.push(`<clipPath id="c"><ellipse cx="${CX}" cy="${CY}" rx="${RX}" ry="${RY}"/></clipPath>`)
+
+	if (1) {
+		svg.push(`<linearGradient id="g">`)
+		svg.push(`<stop offset="0%" stop-color="${c[1]}"/>`)
+		svg.push(`<stop offset="50%" stop-color="${c[2]}"/>`)
+		svg.push(`<stop offset="100%" stop-color="${c[3]}"/>`)
+		svg.push('</linearGradient>')
+		svg.push(`<path fill="url(#g)" stroke="${c[4]}" d="${mkarc(CX, CY, RX, RY, TALL)}"/>`)
+	} else {
+		svg.push(`<path fill="${c[1]}" stroke="${c[4]}" d="${mkarc(CX, CY, RX, RY, TALL)}"/>`)
+	}
 
-	svg.push(`<path fill="url(#g)" stroke="black" d="M1.5 15v18A20.5 13.5 0 0 0 22 46.5 20.5 13.5 0 0 0 42.5 33V15h-41z"/>`)
-	svg.push(`<image preserveAspectRatio="none" href="data:image/png;base64,${icon}" clip-path="url(#c)" x="1" y="1" width="42" height="28"/>`)
-	svg.push(`<ellipse fill="none" stroke="black" cx="22" cy="15" rx="20.5" ry="13.5"/>`)
+	if (icon) {
+		svg.push(`<image preserveAspectRatio="none" href="data:image/png;base64,${icon}" clip-path="url(#c)" x="1" y="1" width="${IMAGE_W}" height="${IMAGE_H}"/>`)
+		svg.push(`<ellipse fill="none" stroke="${c[4]}" cx="${CX}" cy="${CY}" rx="${RX}" ry="${RY}"/>`)
+	} else {
+		svg.push(`<ellipse fill="${c[0]}" stroke="${c[4]}" cx="${CX}" cy="${CY}" rx="${RX}" ry="${RY}"/>`)
+	}
 
 	svg.push('</svg>')
 	fs.writeFileSync(output, svg.join("\n") + "\n")
 }
 
 function print_disc(output, icon_file, c) {
-	let icon = fs.readFileSync(icon_file).toString('base64')
-	let svg = []
-	svg.push('<svg xmlns="http://www.w3.org/2000/svg" width="44" height="38">')
-	svg.push('<clipPath id="c"><ellipse cx="22" cy="15" rx="20.5" ry="13.5"/></clipPath>')
+	print_cylinder(output, icon_file, c, 8)
+}
 
-	svg.push(`<linearGradient id="g">`)
-	svg.push(`<stop offset="0%" stop-color="${c[1]}"/>`)
-	svg.push(`<stop offset="50%" stop-color="${c[2]}"/>`)
-	svg.push(`<stop offset="100%" stop-color="${c[3]}"/>`)
-	svg.push('</linearGradient>')
+const CUBE_SIDE = 20
+const CUBE_ASPECT = 3/4
+const CUBE_TALL = 15
 
-	svg.push(`<path fill="url(#g)" stroke="black" d="M1.5 15 v 8 a 20.5 13.5 0 0 0 20.5 13.5 20.5 13.5 0 0 0 20.5 -13.5 v -8"/>`)
-	svg.push(`<image preserveAspectRatio="none" href="data:image/png;base64,${icon}" clip-path="url(#c)" x="1" y="1" width="42" height="28"/>`)
-	svg.push(`<ellipse fill="none" stroke="black" cx="22" cy="15" rx="20.5" ry="13.5"/>`)
+const CUBE_W = Math.round( CUBE_SIDE * Math.sqrt(2) )
+const CUBE_H = Math.round( CUBE_SIDE * Math.sqrt(2) * CUBE_ASPECT )
 
-	svg.push('</svg>')
-	fs.writeFileSync(output, svg.join("\n") + "\n")
-}
+const CUBE_SVG_W = CUBE_W + 3
+const CUBE_SVG_H = CUBE_TALL + CUBE_H + 3
+
+console.log("CUBE", CUBE_SVG_W, CUBE_SVG_H, CUBE_W)
 
 function print_cube(output, c) {
 	let svg = []
 
-	let xo = 0
-	let yo = 0
-	let ys = 2/3
+	// let xo = 0
+	// let yo = 0
+	// let ys = 1 // 2/3
+
+	// let w = 20
+	// let d = Math.sqrt(w * w + w * w)
+	// let h = Math.round(w * 0.8)
 
-	let w = 20
-	let d = Math.sqrt(w * w + w * w)
-	let h = Math.round(w * 0.8)
+	let xo = 1.5
+	let yo = 1.5
+	let dx = CUBE_W
+	let dy = CUBE_H
+	let h = CUBE_TALL
 
 	let v = [
-		[ xo + (d/2), yo + (0) * ys ],
-		[ xo + (d), yo + (d/2) * ys ],
-		[ xo + (d/2), yo + (d) * ys ],
-		[ xo + (0), yo + (d/2) * ys ],
+		[ xo + (dx/2), yo + (0) ],
+		[ xo + (dx), yo + (dy/2) ],
+		[ xo + (dx/2), yo + (dy) ],
+		[ xo + (0), yo + (dy/2) ],
 	]
 
-	for (let xy of v) {
-		xy[0] = Math.round(xy[0]) + 0.5
-		xy[1] = Math.round(xy[1]) + 0.5
-	}
-
 	let v2 = [
 		[ v[1][0], v[1][1] ],
 		[ v[1][0], v[1][1] + h ],
@@ -107,7 +137,7 @@ function print_cube(output, c) {
 		[ v[3][0], v[3][1] ],
 	]
 
-	svg.push('<svg xmlns="http://www.w3.org/2000/svg" width="29" height="36">')
+	svg.push(`<svg xmlns="http://www.w3.org/2000/svg" width="${CUBE_SVG_W}" height="${CUBE_SVG_H}">`)
 
 	svg.push(`<path fill="${c[0]}" d="M${v}"/>`)
 	svg.push(`<path fill="${c[3]}" d="M${f1}"/>`)
@@ -119,33 +149,33 @@ function print_cube(output, c) {
 	fs.writeFileSync(output, svg.join("\n") + "\n")
 }
 
-print_cylinder("pieces/cylinder_austria_1.svg", "tools/cylinders/face_austria_1.png", color_austria)
-print_cylinder("pieces/cylinder_austria_2.svg", "tools/cylinders/face_austria_2.png", color_austria)
-print_cylinder("pieces/cylinder_austria_3.svg", "tools/cylinders/face_austria_3.png", color_austria)
-print_cylinder("pieces/cylinder_austria_4.svg", "tools/cylinders/face_austria_4.png", color_austria)
-print_cylinder("pieces/cylinder_austria_5.svg", "tools/cylinders/face_austria_5.png", color_austria)
-print_cylinder("pieces/cylinder_austria_6.svg", "tools/cylinders/face_austria_6.png", color_austria)
+print_cylinder("pieces/cylinder_austria_1.svg", "tools/cylinders.2x/face_austria_1.png", color_austria)
+print_cylinder("pieces/cylinder_austria_2.svg", "tools/cylinders.2x/face_austria_2.png", color_austria)
+print_cylinder("pieces/cylinder_austria_3.svg", "tools/cylinders.2x/face_austria_3.png", color_austria)
+print_cylinder("pieces/cylinder_austria_4.svg", "tools/cylinders.2x/face_austria_4.png", color_austria)
+print_cylinder("pieces/cylinder_austria_5.svg", "tools/cylinders.2x/face_austria_5.png", color_austria)
+print_cylinder("pieces/cylinder_austria_6.svg", "tools/cylinders.2x/face_austria_6.png", color_austria)
 
-print_cylinder("pieces/cylinder_bavaria_1.svg", "tools/cylinders/face_bavaria_1.png", color_bavaria)
+print_cylinder("pieces/cylinder_bavaria_1.svg", "tools/cylinders.2x/face_bavaria_1.png", color_bavaria)
 
-print_cylinder("pieces/cylinder_france_1.svg", "tools/cylinders/face_france_1.png", color_france)
-print_cylinder("pieces/cylinder_france_2.svg", "tools/cylinders/face_france_2.png", color_france)
-print_cylinder("pieces/cylinder_france_3.svg", "tools/cylinders/face_france_3.png", color_france)
-print_cylinder("pieces/cylinder_france_4.svg", "tools/cylinders/face_france_4.png", color_france)
-print_cylinder("pieces/cylinder_france_5.svg", "tools/cylinders/face_france_5.png", color_france)
+print_cylinder("pieces/cylinder_france_1.svg", "tools/cylinders.2x/face_france_1.png", color_france)
+print_cylinder("pieces/cylinder_france_2.svg", "tools/cylinders.2x/face_france_2.png", color_france)
+print_cylinder("pieces/cylinder_france_3.svg", "tools/cylinders.2x/face_france_3.png", color_france)
+print_cylinder("pieces/cylinder_france_4.svg", "tools/cylinders.2x/face_france_4.png", color_france)
+print_cylinder("pieces/cylinder_france_5.svg", "tools/cylinders.2x/face_france_5.png", color_france)
 
-print_cylinder("pieces/cylinder_pragmatic_1.svg", "tools/cylinders/face_pragmatic_1.png", color_pragmatic)
-print_cylinder("pieces/cylinder_pragmatic_2.svg", "tools/cylinders/face_pragmatic_2.png", color_pragmatic)
-print_cylinder("pieces/cylinder_pragmatic_3.svg", "tools/cylinders/face_pragmatic_3.png", color_pragmatic)
+print_cylinder("pieces/cylinder_pragmatic_1.svg", "tools/cylinders.2x/face_pragmatic_1.png", color_pragmatic)
+print_cylinder("pieces/cylinder_pragmatic_2.svg", "tools/cylinders.2x/face_pragmatic_2.png", color_pragmatic)
+print_cylinder("pieces/cylinder_pragmatic_3.svg", "tools/cylinders.2x/face_pragmatic_3.png", color_pragmatic)
 
-print_cylinder("pieces/cylinder_prussia_1.svg", "tools/cylinders/face_prussia_1.png", color_prussia)
-print_cylinder("pieces/cylinder_prussia_2.svg", "tools/cylinders/face_prussia_2.png", color_prussia)
-print_cylinder("pieces/cylinder_prussia_3.svg", "tools/cylinders/face_prussia_3.png", color_prussia)
-print_cylinder("pieces/cylinder_prussia_4.svg", "tools/cylinders/face_prussia_4.png", color_prussia)
+print_cylinder("pieces/cylinder_prussia_1.svg", "tools/cylinders.2x/face_prussia_1.png", color_prussia)
+print_cylinder("pieces/cylinder_prussia_2.svg", "tools/cylinders.2x/face_prussia_2.png", color_prussia)
+print_cylinder("pieces/cylinder_prussia_3.svg", "tools/cylinders.2x/face_prussia_3.png", color_prussia)
+print_cylinder("pieces/cylinder_prussia_4.svg", "tools/cylinders.2x/face_prussia_4.png", color_prussia)
 
-print_cylinder("pieces/cylinder_saxony_1.svg", "tools/cylinders/face_saxony_1.png", color_saxony)
+print_cylinder("pieces/cylinder_saxony_1.svg", "tools/cylinders.2x/face_saxony_1.png", color_saxony)
 
-print_disc("pieces/disc_hussar.svg", "tools/cylinders/face_hussar.png", color_austria)
+print_disc("pieces/disc_hussar.svg", "tools/cylinders.2x/face_hussar.png", color_austria)
 
 print_cube("pieces/cube_austria.svg", color_austria)
 print_cube("pieces/cube_bavaria.svg", color_bavaria)
@@ -153,45 +183,3 @@ print_cube("pieces/cube_france.svg", color_france)
 print_cube("pieces/cube_pragmatic.svg", color_pragmatic)
 print_cube("pieces/cube_prussia.svg", color_prussia)
 print_cube("pieces/cube_saxony.svg", color_saxony)
-
-let css = [ "/* TOKEN BORDER COLORS */" ]
-
-function border(base, sel) {
-	let rgb = parseHex(base)
-	// let hic = convertRgbToOklab(rgb); hic.l = Math.min(1,hic.l+0.1)
-	// let loc = convertRgbToOklab(rgb); loc.l = Math.max(0,loc.l-0.1)
-	// let shc = convertRgbToOklab(rgb); shc.l = Math.max(0,shc.l-0.4)
-	let hic = convertRgbToOklab(rgb); hic.l = Math.min(1,hic.l*1.2)
-	let loc = convertRgbToOklab(rgb); loc.l = Math.max(0,loc.l*0.8)
-	let shc = convertRgbToOklab(rgb); shc.l = Math.max(0,shc.l*0.4)
-	let sh = formatHex(shc)
-	let hi = formatHex(hic)
-	let lo = formatHex(loc)
-	css.push(`${sel} { background-color: ${base}; border-color: ${hi} ${lo} ${lo} ${hi}; box-shadow: 0 0 0 1px ${sh}, 0px 1px 4px #0008; }`)
-}
-
-border("#006cb7", "#token_total_support")
-border("#80643e", "#token_prop_card")
-border("#d74729", "#token_oppose_plus_bases")
-border("#004e81", "#token_el_presidente")
-border("#6a8796", "#token_aid")
-border("#01904b", ".token.shipment")
-border("#4b87c0", ".token.passive_support")
-border("#b75f61", ".token.passive_opposition")
-border("#0054a6", ".token.active_support")
-border("#991a1e", ".token.active_opposition")
-border("#0054a6", ".token.govt_control")
-border("#991a1e", ".token.farc_control")
-border("#ffc509", ".token.farc_zone")
-//border("#22010e", ".token.terror")
-border("#535052", ".token.terror")
-border("#535052", ".token.sabotage")
-border("#9dadb3", ".token.unshaded")
-border("#465c80", ".token.shaded")
-border("#6d5735", ".token.reminder.sucumbios")
-border("#cf1f30", ".token.reminder.senado_farc")
-border("#6d9f3b", ".token.reminder.senado_cartels")
-border("#ffcf00", ".token.reminder.senado_auc")
-border("#8dc73f", ".token.reminder.darien")
-
-console.log(css.join("\n"))