diff options
-rw-r--r-- | tools/color.js | 55 | ||||
-rw-r--r-- | tools/genlayout.js | 59 | ||||
-rw-r--r-- | tools/gentextures.sh | 3 | ||||
-rw-r--r-- | tools/layout.svg | 208 | ||||
-rw-r--r-- | tools/maketoken.js | 50 | ||||
-rw-r--r-- | tools/rock_overlay@2x.png | bin | 0 -> 160515 bytes |
6 files changed, 375 insertions, 0 deletions
diff --git a/tools/color.js b/tools/color.js new file mode 100644 index 0000000..d645df7 --- /dev/null +++ b/tools/color.js @@ -0,0 +1,55 @@ +function rgb_to_hsl(rgb, add=0, scale=1) { + if (typeof rgb === "string") { + if (rgb[0] === "#") + rgb = rgb.substring(1) + rgb = parseInt(rgb, 16) + } + + let r = ((rgb >> 16) & 255) / 255 + let g = ((rgb >> 8) & 255) / 255 + let b = ((rgb) & 255) / 255 + let cmin = Math.min(r, g, b) + let cmax = Math.max(r, g, b) + let delta = cmax - cmin + let h = 0, s = 0, l = 0 + + if (delta == 0) + h = 0 + else if (cmax == r) + h = ((g - b) / delta) % 6 + else if (cmax == g) + h = (b - r) / delta + 2 + else + h = (r - g) / delta + 4 + + h = Math.round(h * 60) + + if (h < 0) + h += 360 + + l = (cmax + cmin) / 2 + + s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1)) + + l = Math.max(0, Math.min(1, l * scale + add)) + + s = Math.round(s * 100) + l = Math.round(l * 100) + + return "hsl(" + h + "," + s + "%," + l + "%)" +} + +function foo(sel, rgb) { + let bg = rgb_to_hsl(rgb, 0.00, 1.00) + let hi = rgb_to_hsl(rgb, 0.10, 1.00) + let sh = rgb_to_hsl(rgb, -0.10, 1.00) + let bd = rgb_to_hsl(rgb, 0.00, 0.33) + console.log(sel + ` { background-color: ${bg}; border-color: ${hi} ${sh} ${sh} ${hi}; box-shadow: 0 0 0 1px ${bd}, 0px 1px 4px #0008; }`) +} + +foo(".tile.red", "ef0d0e") +foo(".tile.white", "efefef") +foo(".tile.blue", "1895d7") +foo(".tile.gold", "ebce42") +foo(".tile.green", "426545") + diff --git a/tools/genlayout.js b/tools/genlayout.js new file mode 100644 index 0000000..2191d90 --- /dev/null +++ b/tools/genlayout.js @@ -0,0 +1,59 @@ +const fs = require("fs") + +const { round, floor, ceil } = Math + +let boxes = {} +let mode, name, x, y, w, h, cx, cy, rx, ry +let scale = 0.75 + +function flush() { + if (mode === 'rect') { + boxes[name] = [ x * scale |0, y * scale |0, w * scale |0, h * scale |0 ] + } + if (mode === 'circle') { + x = cx - rx + y = cy - ry + w = rx * 2 + h = ry * 2 + boxes[name] = [ x * scale |0, y * scale |0, w * scale |0, h * scale |0 ] + } + x = y = w = h = cx = cy = rx = ry = 0 + name = null +} + +for (let line of fs.readFileSync("tools/layout.svg", "utf-8").split("\n")) { + line = line.trim() + if (line.startsWith("<rect")) { + flush() + mode = "rect" + x = y = w = h = 0 + } else if (line.startsWith("<ellipse")) { + flush() + mode = "circle" + cx = cy = rx = ry = 0 + } else if (line.startsWith('x="')) + x = round(Number(line.split('"')[1])) + else if (line.startsWith('y="')) + y = round(Number(line.split('"')[1])) + else if (line.startsWith('width="')) + w = round(Number(line.split('"')[1])) + else if (line.startsWith('height="')) + h = round(Number(line.split('"')[1])) + else if (line.startsWith('cx="')) + cx = round(Number(line.split('"')[1])) + else if (line.startsWith('cy="')) + cy = round(Number(line.split('"')[1])) + else if (line.startsWith('rx="')) + rx = round(Number(line.split('"')[1])) + else if (line.startsWith('ry="')) + ry = round(Number(line.split('"')[1])) + else if (line.startsWith('inkscape:label="')) + name = line.split('"')[1] +} + +flush() + +console.log("const boxes = {") +for (let key in boxes) + console.log("\t\"" + key + "\": " + JSON.stringify(boxes[key]) + ",") +console.log("}") diff --git a/tools/gentextures.sh b/tools/gentextures.sh new file mode 100644 index 0000000..4caaa9e --- /dev/null +++ b/tools/gentextures.sh @@ -0,0 +1,3 @@ +#!/bin/bash +pngtopnm tools/rock_overlay@2x.png | pnmnorm | pgmtoppm "#606060-#696969" | ppmquant 2 | pnmtopng > background.png +zopflipng -y background.png background.png diff --git a/tools/layout.svg b/tools/layout.svg new file mode 100644 index 0000000..a1fb011 --- /dev/null +++ b/tools/layout.svg @@ -0,0 +1,208 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + width="1100" + height="850" + viewBox="0 0 1100 850" + sodipodi:docname="layout.svg" + inkscape:version="1.0.2 (e86c870879, 2021-01-15)" + version="1.1" + id="svg3"> + <metadata + id="metadata9"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + </cc:Work> + </rdf:RDF> + </metadata> + <defs + id="defs7" /> + <sodipodi:namedview + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1" + objecttolerance="10" + gridtolerance="10" + guidetolerance="10" + inkscape:pageopacity="0" + inkscape:pageshadow="2" + inkscape:window-width="640" + inkscape:window-height="480" + id="namedview5" + showgrid="true" + inkscape:zoom="0.66869141" + inkscape:cx="969.03764" + inkscape:cy="358.11193" + inkscape:current-layer="svg3" + inkscape:document-rotation="0"> + <inkscape:grid + type="xygrid" + id="grid13" /> + </sodipodi:namedview> + <image + sodipodi:absref="/home/tor/src/rally/public/field-of-the-cloth-of-gold/map100.png" + xlink:href="../map100.png" + width="1100" + height="850" + preserveAspectRatio="none" + id="image10" + sodipodi:insensitive="true" + style="image-rendering:pixelated" + inkscape:svg-dpi="1" /> + <rect + style="fill:#000000;fill-opacity:0.378049;stroke-width:0.991903;stroke-linecap:round;stroke-linejoin:bevel" + id="rect18" + width="62" + height="61" + x="89" + y="141" + ry="0.75204438" + inkscape:label="dragon" /> + <rect + style="fill:#000000;fill-opacity:0.378049;stroke-width:0.983871;stroke-linecap:round;stroke-linejoin:bevel" + id="rect18-3" + width="61" + height="61" + x="88" + y="219" + ry="0.75204444" + inkscape:label="oval_dragon" /> + <rect + style="fill:#000000;fill-opacity:0.378049;stroke-width:0.983871;stroke-linecap:round;stroke-linejoin:bevel" + id="rect18-3-6" + width="61" + height="61" + x="208" + y="220" + ry="0.75204444" + inkscape:label="oval_secrecy" /> + <rect + style="fill:#000000;fill-opacity:0.378049;stroke-width:0.983871;stroke-linecap:round;stroke-linejoin:bevel" + id="rect18-3-6-7" + width="61" + height="61" + x="350" + y="220" + ry="0.75204444" + inkscape:label="oval_gold" /> + <rect + style="fill:#000000;fill-opacity:0.378049;stroke-width:0.983871;stroke-linecap:round;stroke-linejoin:bevel" + id="rect18-3-6-7-5" + width="61" + height="61" + x="492" + y="220" + ry="0.75204444" + inkscape:label="oval_blue" /> + <rect + style="fill:#000000;fill-opacity:0.378049;stroke-width:0.983871;stroke-linecap:round;stroke-linejoin:bevel" + id="rect18-3-6-7-5-3" + width="61" + height="61" + x="634" + y="220" + ry="0.75204444" + inkscape:label="oval_white" /> + <rect + style="fill:#000000;fill-opacity:0.378049;stroke-width:0.983871;stroke-linecap:round;stroke-linejoin:bevel" + id="rect18-3-6-7-5-3-5" + width="61" + height="61" + x="776" + y="220" + ry="0.75204444" + inkscape:label="oval_red" /> + <rect + style="fill:#000000;fill-opacity:0.378049;stroke-width:0.983871;stroke-linecap:round;stroke-linejoin:bevel" + id="rect18-3-6-7-5-3-5-6" + width="61" + height="61" + x="918" + y="220" + ry="0.75204444" + inkscape:label="oval_purple" /> + <rect + style="fill:#000000;fill-opacity:0.378049;stroke-linecap:round;stroke-linejoin:bevel" + id="rect171" + width="82" + height="82" + x="196" + y="299" + ry="0.75204402" + inkscape:label="square_secrecy" /> + <rect + style="fill:#000000;fill-opacity:0.378049;stroke-linecap:round;stroke-linejoin:bevel" + id="rect171-2" + width="82" + height="82" + x="338" + y="299" + ry="0.75204402" + inkscape:label="square_gold" /> + <rect + style="fill:#000000;fill-opacity:0.378049;stroke-width:1;stroke-linecap:round;stroke-linejoin:bevel" + id="rect171-2-9" + width="82" + height="82" + x="480" + y="300" + ry="0.75204402" + inkscape:label="square_blue" /> + <rect + style="fill:#000000;fill-opacity:0.378049;stroke-width:1;stroke-linecap:round;stroke-linejoin:bevel" + id="rect171-2-9-1" + width="82" + height="82" + x="622" + y="300" + ry="0.75204402" + inkscape:label="square_white" /> + <rect + style="fill:#000000;fill-opacity:0.378049;stroke-width:1;stroke-linecap:round;stroke-linejoin:bevel" + id="rect171-2-9-1-2" + width="82" + height="82" + x="764" + y="300" + ry="0.75204402" + inkscape:label="square_red" /> + <rect + style="fill:#000000;fill-opacity:0.378049;stroke-width:1;stroke-linecap:round;stroke-linejoin:bevel" + id="rect171-2-9-1-7" + width="82" + height="82" + x="906" + y="300" + ry="0.75204402" + inkscape:label="square_purple" /> + <rect + style="fill:#000000;fill-opacity:0.378049;stroke-width:0.975773;stroke-linecap:round;stroke-linejoin:bevel" + id="rect18-3-6-7-5-0" + width="60" + height="61" + x="478" + y="443" + ry="0.75204444" + inkscape:label="0" /> + <rect + style="fill:#000000;fill-opacity:0.378049;stroke-width:0.975773;stroke-linecap:round;stroke-linejoin:bevel" + id="rect18-3-6-7-5-0-9" + width="60" + height="61" + x="998" + y="730" + ry="0.75204444" + sodipodi:insensitive="true" + inkscape:label="39" /> +</svg> diff --git a/tools/maketoken.js b/tools/maketoken.js new file mode 100644 index 0000000..525e68f --- /dev/null +++ b/tools/maketoken.js @@ -0,0 +1,50 @@ +const fs = require("node:fs") + +function print_cylinder(output, w, h, tall, color) { + let xoff = 1.5 + let yoff = 1.5 + + let total_w = w + xoff * 2 + let total_h = h + tall + yoff * 2 + + let cx = xoff + w / 2 + let cy = yoff + h / 2 + + let rx = w / 2 + let ry = h / 2 + + let svg = [] + svg.push(`<svg xmlns="http://www.w3.org/2000/svg" width="${total_w}" height="${total_h}">`) + + svg.push(`<linearGradient id="g">`) + svg.push(`<stop offset="0%" stop-color="${color[2]}"/>`) + svg.push(`<stop offset="20%" stop-color="${color[3]}"/>`) + svg.push(`<stop offset="50%" stop-color="${color[4]}"/>`) + svg.push(`<stop offset="80%" stop-color="${color[3]}"/>`) + svg.push(`<stop offset="100%" stop-color="${color[2]}"/>`) + svg.push(`</linearGradient>`) + + let path = [] + path.push("M", xoff, cy) + path.push("v", tall) + path.push("a", rx, ry, 0, 0, 0, w, 0) + path.push("v", -tall) + + svg.push(`<path stroke-width="1" fill="url(#g)" stroke="${color[0]}" d="${path.join(" ")}"/>`) + svg.push(`<ellipse stroke-width="1" fill="${color[1]}" stroke="${color[0]}" cx="${cx}" cy="${cy}" rx="${rx}" ry="${ry}"/>`) + + svg.push('</svg>') + + fs.writeFileSync(output, svg.join("\n") + "\n") +} + +let WHITE = [ 'hsl(0,0%,30%)', 'hsl(0,0%,90%)', 'hsl(0,0%,70%)', 'hsl(0,0%,80%)', 'hsl(0,0%,83%)' ] +let RED = [ 'hsl(359,85%,20%)', 'hsl(359,85%,50%)', 'hsl(359,85%,35%)', 'hsl(359,85%,45%)', 'hsl(359,85%,48%)' ] +let BLUE = [ 'hsl(220,85%,25%)', 'hsl(220,85%,55%)', 'hsl(220,85%,40%)', 'hsl(220,85%,50%)', 'hsl(220,85%,53%)' ] + +// let W = 50, H = 33, T = 22 +let W = 38, H = 25, T = 16 + +print_cylinder("images/token_white.svg", W, H, T, WHITE) +print_cylinder("images/token_red.svg", W, H, T, RED) +print_cylinder("images/token_blue.svg", W, H, T, BLUE) diff --git a/tools/rock_overlay@2x.png b/tools/rock_overlay@2x.png Binary files differnew file mode 100644 index 0000000..8710ab6 --- /dev/null +++ b/tools/rock_overlay@2x.png |