49 lines
1.8 KiB
JavaScript
49 lines
1.8 KiB
JavaScript
|
/**
|
||
|
|
* Generates a complete svg image from a PuzzleData object
|
||
|
|
*
|
||
|
|
* @param {PuzzleData} puzzleData
|
||
|
|
*/
|
||
|
|
export function getPuzzleSvg(puzzleData){
|
||
|
|
|
||
|
|
const textSize = 21
|
||
|
|
const textWeigth = 'normal'
|
||
|
|
const textColor = puzzleData.colors['text']
|
||
|
|
|
||
|
|
const shapeSVG = createShape(puzzleData.shape, puzzleData.colors['shape'])
|
||
|
|
const topText = createText(puzzleData.text[0].toUpperCase(), textColor, textSize, textWeigth, 31)
|
||
|
|
const bottomText = createText(puzzleData.text[1].toUpperCase(), textColor, textSize, textWeigth, 67)
|
||
|
|
const numberText = createText(puzzleData.number, puzzleData.colors['number'], 60, 100, 50, 'Arial, Helvetica')
|
||
|
|
|
||
|
|
return createSVG([shapeSVG, topText, bottomText, numberText])
|
||
|
|
}
|
||
|
|
|
||
|
|
// Takes multiple SVG strings and combines them to a svg
|
||
|
|
const createSVG = (elements) => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150"> ${elements.join("\n")} </svg>`
|
||
|
|
|
||
|
|
const createShape = (shape, color) => SHAPE_SVG[shape](color)
|
||
|
|
|
||
|
|
const SHAPE_SVG = {
|
||
|
|
"square" : (c) => `<rect fill=${c} stroke="#000" stroke-width="1" width="150" height="150"/>`,
|
||
|
|
"triangle": (c) => `<polygon fill=${c} stroke="#000" stroke-width="1" points="0 150 75 0 150 150 0 150"/>`,
|
||
|
|
"rectangle" : (c) =>`<rect y="30" fill=${c} stroke="#000" stroke-width="1" class="shape" width="150" height="90"/>`,
|
||
|
|
"circle" : (c) => `<circle fill=${c} stroke="#000" stroke-width="1" cx="75" cy="75" r="75"/>`,
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
const createText = (text, color, size, weight, y, font) => `
|
||
|
|
<text
|
||
|
|
stroke="black"
|
||
|
|
fill="${color}"
|
||
|
|
stroke-width="1"
|
||
|
|
style="font-size:${size}px;"
|
||
|
|
font-weight="${weight}"
|
||
|
|
font-family="${font || 'Archivo Black'}, sans-serif";
|
||
|
|
x="50%"
|
||
|
|
y="${y}%"
|
||
|
|
dominant-baseline="middle"
|
||
|
|
text-anchor="middle"
|
||
|
|
>
|
||
|
|
${text}
|
||
|
|
</text> `
|