scratchblocks
Version:
Make pictures of Scratch blocks from text.
215 lines (202 loc) • 5.38 kB
JavaScript
import SVG from "./draw.js"
import Filter from "./filter.js"
import cssContent from "./style.css.js"
export default class Style {
static get cssContent() {
return cssContent
}
static makeIcons() {
return [
SVG.el("path", {
d: "M1.504 21L0 19.493 4.567 0h1.948l-.5 2.418s1.002-.502 3.006 0c2.006.503 3.008 2.01 6.517 2.01 3.508 0 4.463-.545 4.463-.545l-.823 9.892s-2.137 1.005-5.144.696c-3.007-.307-3.007-2.007-6.014-2.51-3.008-.502-4.512.503-4.512.503L1.504 21z",
fill: "#3f8d15",
id: "greenFlag",
}),
SVG.el("polygon", {
points:
"6.3,0.4725 12.516,0.4725 18.585,6.3 18.585,12.495 12.495,18.585 6.3,18.585 0.483,12.495 0.483,6.3 ",
fill: "#bb0010",
id: "stopSign",
}),
SVG.el("path", {
d: "M6.724 0C3.01 0 0 2.91 0 6.5c0 2.316 1.253 4.35 3.14 5.5H5.17v-1.256C3.364 10.126 2.07 8.46 2.07 6.5 2.07 4.015 4.152 2 6.723 2c1.14 0 2.184.396 2.993 1.053L8.31 4.13c-.45.344-.398.826.11 1.08L15 8.5 13.858.992c-.083-.547-.514-.714-.963-.37l-1.532 1.172A6.825 6.825 0 0 0 6.723 0z",
fill: "#fff",
id: "turnRight",
}),
SVG.el("path", {
d: "M3.637 1.794A6.825 6.825 0 0 1 8.277 0C11.99 0 15 2.91 15 6.5c0 2.316-1.253 4.35-3.14 5.5H9.83v-1.256c1.808-.618 3.103-2.285 3.103-4.244 0-2.485-2.083-4.5-4.654-4.5-1.14 0-2.184.396-2.993 1.053L6.69 4.13c.45.344.398.826-.11 1.08L0 8.5 1.142.992c.083-.547.514-.714.963-.37l1.532 1.172z",
fill: "#fff",
id: "turnLeft",
}),
SVG.el("path", {
d: "M0 0L4 4L0 8Z",
fill: "#111",
id: "addInput",
}),
SVG.el("path", {
d: "M4 0L4 8L0 4Z",
fill: "#111",
id: "delInput",
}),
SVG.setProps(
SVG.group([
SVG.el("path", {
d: "M8 0l2 -2l0 -3l3 0l-4 -5l-4 5l3 0l0 3l-8 0l0 2",
fill: "#000",
opacity: "0.3",
}),
SVG.move(
-1,
-1,
SVG.el("path", {
d: "M8 0l2 -2l0 -3l3 0l-4 -5l-4 5l3 0l0 3l-8 0l0 2",
fill: "#fff",
opacity: "0.9",
}),
),
]),
{
id: "loopArrow",
},
),
SVG.setProps(
SVG.group([
SVG.el("rect", {
x: "0",
y: "0",
width: "12",
height: "14",
fill: "#000",
opacity: "0.25",
}),
SVG.el("rect", {
x: "1",
y: "1",
width: "1",
height: "13",
fill: "#fff",
}),
SVG.el("rect", {
x: "11",
y: "1",
width: "1",
height: "13",
fill: "#fff",
}),
SVG.el("rect", {
x: "2",
y: "1",
width: "9",
height: "1",
fill: "#fff",
}),
SVG.el("rect", {
x: "2",
y: "5",
width: "9",
height: "1",
fill: "#fff",
}),
SVG.el("rect", {
x: "2",
y: "9",
width: "9",
height: "1",
fill: "#fff",
}),
SVG.el("rect", {
x: "2",
y: "13",
width: "9",
height: "1",
fill: "#fff",
}),
SVG.el("rect", {
x: "2",
y: "2",
width: "9",
height: "2",
fill: "#ea8d1c",
}),
SVG.el("rect", {
x: "2",
y: "6",
width: "9",
height: "2",
fill: "#ea8d1c",
}),
SVG.el("rect", {
x: "2",
y: "10",
width: "9",
height: "2",
fill: "#ea8d1c",
}),
SVG.el("rect", {
x: "11",
y: "0",
width: "1",
height: "1",
fill: "#ea8d1c",
}),
SVG.el("rect", {
x: "0",
y: "13",
width: "1",
height: "1",
fill: "#ea8d1c",
}),
]),
{
id: "list",
},
),
]
}
static makeStyle() {
const style = SVG.el("style")
style.appendChild(SVG.cdata(Style.cssContent))
return style
}
static bevelFilter(id, inset) {
const f = new Filter(id)
const alpha = "SourceAlpha"
const s = inset ? -1 : 1
const blur = f.blur(1, alpha)
f.merge([
"SourceGraphic",
f.comp(
"in",
f.flood("#fff", 0.15),
f.subtract(alpha, f.offset(+s, +s, blur)),
),
f.comp(
"in",
f.flood("#000", 0.7),
f.subtract(alpha, f.offset(-s, -s, blur)),
),
])
return f.el
}
static darkFilter(id) {
const f = new Filter(id)
f.merge([
"SourceGraphic",
f.comp("in", f.flood("#000", 0.2), "SourceAlpha"),
])
return f.el
}
static darkRect(w, h, category, el) {
return SVG.setProps(
SVG.group([
SVG.setProps(el, {
class: `sb-${category} sb-darker`,
}),
]),
{ width: w, height: h },
)
}
static get defaultFontFamily() {
return "Lucida Grande, Verdana, Arial, DejaVu Sans, sans-serif"
}
}