diff --git a/public/js/lib/renderer/fretboard/css/i.css b/public/js/lib/renderer/fretboard/css/i.css index 7b929681..cd63aa63 100644 --- a/public/js/lib/renderer/fretboard/css/i.css +++ b/public/js/lib/renderer/fretboard/css/i.css @@ -1 +1 @@ -.fretTitle{color:#555;font-family:"Helvetica Neue",sans-serif;background:#eee;line-height:1.4;font-size:26px;margin:10px 0 15px 0;padding:5px;font-weight:900}section{padding:20px}.content{max-width:960px;margin:auto}.container{width:288px;margin:0 auto}.container_h{max-width:576px;margin:0 auto}@media all and (max-width: 383px){.container_h{max-width:288px}}@media all and (max-width: 576px){.container_h{width:384px}}.svg_wrapper{background-color:#fff;position:relative;height:0}.svg_wrapper svg.fretboard_bg{position:absolute;top:0;left:0;z-index:0}.svg_wrapper .cells{width:100%;height:100%;position:absolute;top:0;left:0;z-index:10}.svg_wrapper.v4{padding-top:91.6666666667%}.svg_wrapper.v5{padding-top:106.9444444444%}.svg_wrapper.v7{padding-top:137.5%}.svg_wrapper.v9{padding-top:168.0555555556%}.svg_wrapper.v12{padding-top:213.8888888889%}.svg_wrapper.v15{padding-top:259.7222222222%}.svg_wrapper.v .cell svg{width:12.5%;float:left;display:block}.svg_wrapper.v4 .cell svg{height:16.6666666667%}.svg_wrapper.v5 .cell svg{height:14.2857142857%}.svg_wrapper.v7 .cell svg{height:11.1111111111%}.svg_wrapper.v9 .cell svg{height:9.0909090909%}.svg_wrapper.v12 .cell svg{height:7.1428571429%}.svg_wrapper.v15 .cell svg{height:5.8823529412%}.svg_wrapper.h5{padding-top:85.7142857143%}.svg_wrapper.h6{padding-top:75%}.svg_wrapper.h7{padding-top:72.7272727273%}.svg_wrapper.h .cell svg{height:12.5%;float:left;display:block;z-index:2}.svg_wrapper.h5 .cell svg{width:14.2857142857%}.svg_wrapper.h6 .cell svg{width:12.5%}.svg_wrapper.h7 .cell svg{width:12.1212121212%}.cell.dot .fretb_dot{fill:#27a9e1}.cell.dot.root .fretb_dot{fill:#f05a28}.cell.dot.faded .fretb_dot{opacity:.25}.fretboard_bg .fret_bg rect{fill:#fff}.fretboard_bg .frets rect{fill:#ddd}.fretboard_bg .nut rect{fill:#6e6e6e}.fretboard_bg .strings rect{fill:#6e6e6e}.svg_wrapper.noNut .fretboard_bg .nut rect{fill:none}/*# sourceMappingURL=i.css.map */ +.fretTitle{color:#555;font-family:"Helvetica Neue",sans-serif;background:#eee;line-height:1.4;font-size:1.6em;margin:10px 0 10px 0;font-weight:900;padding:5px}section{padding:20px}.content{max-width:960px;margin:auto}.fretContainer{width:320px;margin:0 auto}.fretContainer_h{max-width:400px;margin:0 auto}@media all and (max-width: 400px){.fretContainer_h{max-width:288px}}@media all and (max-width: 420px){.fretContainer{max-width:220px}}.svg_wrapper{background-color:#fff;position:relative;height:0}.svg_wrapper svg.fretboard_bg{position:absolute;top:0;left:0;z-index:0}.svg_wrapper .cells{width:100%;height:100%;position:absolute;top:0;left:0;z-index:10}.svg_wrapper.v4{padding-top:91.6666666667%}.svg_wrapper.v5{padding-top:106.9444444444%}.svg_wrapper.v7{padding-top:137.5%}.svg_wrapper.v9{padding-top:168.0555555556%}.svg_wrapper.v12{padding-top:213.8888888889%}.svg_wrapper.v15{padding-top:259.7222222222%}.svg_wrapper.v .cell svg{width:12.5%;float:left;display:block}.svg_wrapper.v4 .cell svg{height:16.6666666667%}.svg_wrapper.v5 .cell svg{height:14.2857142857%}.svg_wrapper.v7 .cell svg{height:11.1111111111%}.svg_wrapper.v9 .cell svg{height:9.0909090909%}.svg_wrapper.v12 .cell svg{height:7.1428571429%}.svg_wrapper.v15 .cell svg{height:5.8823529412%}.svg_wrapper.h5{padding-top:85.7142857143%}.svg_wrapper.h6{padding-top:75%}.svg_wrapper.h7{padding-top:72.7272727273%}.svg_wrapper.h .cell svg{height:12.5%;float:left;display:block;z-index:2}.svg_wrapper.h5 .cell svg{width:14.2857142857%}.svg_wrapper.h6 .cell svg{width:12.5%}.svg_wrapper.h7 .cell svg{width:12.1212121212%}.cell.dot .fretb_dot{fill:#27a9e1}.cell.dot.root .fretb_dot{fill:#f05a28}.cell.dot.faded .fretb_dot{opacity:.25}.fretboard_bg .fret_bg rect{fill:#fff}.fretboard_bg .frets rect{fill:#ddd}.fretboard_bg .nut rect{fill:#6e6e6e}.fretboard_bg .strings rect{fill:#6e6e6e}.svg_wrapper.noNut .fretboard_bg .nut rect{fill:none}/*# sourceMappingURL=i.css.map */ diff --git a/public/js/lib/renderer/fretboard/fretboard.js b/public/js/lib/renderer/fretboard/fretboard.js index 92924984..fdd97fd6 100644 --- a/public/js/lib/renderer/fretboard/fretboard.js +++ b/public/js/lib/renderer/fretboard/fretboard.js @@ -20,19 +20,22 @@ const switchListV = { '^': `
${stringO}
`, x: `
${stringX}
`, '|': `
${dotEmpty}
`, - ' ': `
${dotEmpty}
` + ' ': `
${dotEmpty}
`, + '\n': `
${dotEmpty}
` } const switchListH = { o: `
${dotH}
`, '*': `
${dotH}
`, O: `
${dotH}
`, '-': `
${dotEmptyH}
`, - ' ': `
${dotEmptyH}
` + ' ': `
${dotEmptyH}
`, + '\n': `
${dotEmptyH}
${dotEmptyH}
` } export const renderFretBoard = (content, { title: fretTitle, type }) => { - const fretboardHTML = $('
') const fretType = type.split(' ') + const containerClass = fretType && fretType[0].startsWith('h') ? 'fretContainer_h' : 'fretContainer' + const fretboardHTML = $(`
`) $(fretboardHTML).append($(`
${fretTitle}
`)) @@ -47,11 +50,26 @@ export const renderFretBoard = (content, { title: fretTitle, type }) => { // create cells HTML const cellsHTML = $('
') - const switchList = fretbOrientation && fretbOrientation === 'vert' ? switchListV : switchListH + let switchList = '' + if (fretbOrientation && fretbOrientation === 'vert') { + switchList = switchListV + } else { + // calculate position + const emptyFill = new Array(Number(fretbLen) + 3).fill(' ').join('') + content = `${emptyFill}${content}` + + switchList = switchListH + } + const contentCell = content && content.split('') // Go through each ASCII character... + const numArray = [...Array(10).keys()].slice(1) contentCell && contentCell.forEach(char => { - if (switchList[char] !== undefined) { + if (numArray.toString().indexOf(char) !== -1) { + const numType = fretType && fretType[0].startsWith('h') ? '_h' : '' + const numSvg = require(`./svg/number${char}${numType}.svg`) + cellsHTML.append($(`
${numSvg}
`)) + } else if (switchList[char] !== undefined) { cellsHTML.append($(switchList[char])) } }) diff --git a/public/js/lib/renderer/fretboard/svg/number1.svg b/public/js/lib/renderer/fretboard/svg/number1.svg new file mode 100644 index 00000000..fb0cdbbe --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/number1.svg @@ -0,0 +1,10 @@ + + + + Rectangle + Created with Sketch. + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/number1_h.svg b/public/js/lib/renderer/fretboard/svg/number1_h.svg new file mode 100644 index 00000000..4474e81b --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/number1_h.svg @@ -0,0 +1,10 @@ + + + + Rectangle + Created with Sketch. + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/number2.svg b/public/js/lib/renderer/fretboard/svg/number2.svg new file mode 100644 index 00000000..54567ffe --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/number2.svg @@ -0,0 +1,10 @@ + + + + Rectangle + Created with Sketch. + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/number2_h.svg b/public/js/lib/renderer/fretboard/svg/number2_h.svg new file mode 100644 index 00000000..5e42c860 --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/number2_h.svg @@ -0,0 +1,10 @@ + + + + Rectangle + Created with Sketch. + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/number3.svg b/public/js/lib/renderer/fretboard/svg/number3.svg new file mode 100644 index 00000000..24cf30ae --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/number3.svg @@ -0,0 +1,10 @@ + + + + Rectangle + Created with Sketch. + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/number3_h.svg b/public/js/lib/renderer/fretboard/svg/number3_h.svg new file mode 100644 index 00000000..46cb3e89 --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/number3_h.svg @@ -0,0 +1,10 @@ + + + + Rectangle + Created with Sketch. + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/number4.svg b/public/js/lib/renderer/fretboard/svg/number4.svg new file mode 100644 index 00000000..c744dc1b --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/number4.svg @@ -0,0 +1,10 @@ + + + + Rectangle + Created with Sketch. + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/number4_h.svg b/public/js/lib/renderer/fretboard/svg/number4_h.svg new file mode 100644 index 00000000..488c0ac9 --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/number4_h.svg @@ -0,0 +1,10 @@ + + + + Rectangle + Created with Sketch. + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/number5.svg b/public/js/lib/renderer/fretboard/svg/number5.svg new file mode 100644 index 00000000..c8e95144 --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/number5.svg @@ -0,0 +1,10 @@ + + + + Rectangle + Created with Sketch. + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/number5_h.svg b/public/js/lib/renderer/fretboard/svg/number5_h.svg new file mode 100644 index 00000000..489d4b34 --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/number5_h.svg @@ -0,0 +1,10 @@ + + + + Rectangle + Created with Sketch. + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/number6.svg b/public/js/lib/renderer/fretboard/svg/number6.svg new file mode 100644 index 00000000..1c88dd0f --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/number6.svg @@ -0,0 +1,10 @@ + + + + Rectangle + Created with Sketch. + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/number6_h.svg b/public/js/lib/renderer/fretboard/svg/number6_h.svg new file mode 100644 index 00000000..8af61ec4 --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/number6_h.svg @@ -0,0 +1,10 @@ + + + + Rectangle + Created with Sketch. + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/number7.svg b/public/js/lib/renderer/fretboard/svg/number7.svg new file mode 100644 index 00000000..f20c30b0 --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/number7.svg @@ -0,0 +1,10 @@ + + + + Rectangle + Created with Sketch. + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/number7_h.svg b/public/js/lib/renderer/fretboard/svg/number7_h.svg new file mode 100644 index 00000000..419f9f9e --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/number7_h.svg @@ -0,0 +1,10 @@ + + + + Rectangle + Created with Sketch. + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/number8.svg b/public/js/lib/renderer/fretboard/svg/number8.svg new file mode 100644 index 00000000..5597c26d --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/number8.svg @@ -0,0 +1,10 @@ + + + + Rectangle + Created with Sketch. + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/number8_h.svg b/public/js/lib/renderer/fretboard/svg/number8_h.svg new file mode 100644 index 00000000..b879c00e --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/number8_h.svg @@ -0,0 +1,10 @@ + + + + Rectangle + Created with Sketch. + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/number9.svg b/public/js/lib/renderer/fretboard/svg/number9.svg new file mode 100644 index 00000000..a768620c --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/number9.svg @@ -0,0 +1,10 @@ + + + + Rectangle + Created with Sketch. + + + + + \ No newline at end of file diff --git a/public/js/lib/renderer/fretboard/svg/number9_h.svg b/public/js/lib/renderer/fretboard/svg/number9_h.svg new file mode 100644 index 00000000..c181d570 --- /dev/null +++ b/public/js/lib/renderer/fretboard/svg/number9_h.svg @@ -0,0 +1,10 @@ + + + + Rectangle + Created with Sketch. + + + + + \ No newline at end of file