Commit 01c0c043 authored by Luc Didry's avatar Luc Didry
Browse files

Fix #11

parent b811e641
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
id="svg3336"
version="1.1"
inkscape:version="0.92.2 (5c3e80d, 2017-08-06)"
xml:space="preserve"
width="259.44876"
height="160.2975"
viewBox="0 0 259.44876 160.2975"
sodipodi:docname="matrice.svg"><metadata
id="metadata3342"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs3340"><clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath3354"><path
d="M 36.539,199.742 H 245.617 V 43.836 H 36.539 Z"
id="path3356"
inkscape:connector-curvature="0" /></clipPath><clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath3364"><path
d="M 41,65 H 241 V 180 H 41 Z"
id="path3366"
inkscape:connector-curvature="0" /></clipPath><clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath3376"><path
d="M 20.602,218.406 H 262.559 V 0 H 20.602 Z"
id="path3378"
inkscape:connector-curvature="0" /></clipPath><clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath3386"><path
d="m 57,76 h 168 v 90 H 57 Z"
id="path3388"
inkscape:connector-curvature="0" /></clipPath></defs><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1680"
inkscape:window-height="1020"
id="namedview3338"
showgrid="false"
inkscape:zoom="2.4724595"
inkscape:cx="87.139873"
inkscape:cy="64.418753"
inkscape:window-x="0"
inkscape:window-y="30"
inkscape:window-maximized="0"
inkscape:current-layer="g3344"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0" /><g
id="g3344"
inkscape:groupmode="layer"
inkscape:label="beuvery"
transform="matrix(1.25,0,0,-1.25,-46.62625,232.3825)"><g
id="g3346"><path
d="M 37.301,185.906 H 244.86 V 57.668 H 37.301 Z"
style="fill:#fcd205;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path3348"
inkscape:connector-curvature="0" /></g><g
id="g3350"><g
id="g3352"
clip-path="url(#clipPath3354)"><g
id="g3358"
transform="translate(0,-0.593994)"><g
id="g3360"><g
id="g3362"
clip-path="url(#clipPath3364)"><g
id="g3368"><path
d="M 229.969,179.566 H 52.191 c -5.625,0 -10.199,-4.562 -10.199,-10.168 V 75.367 c 0,-5.609 4.574,-10.176 10.196,-10.176 h 177.781 c 5.621,0 10.195,4.563 10.195,10.172 v 94.032 c 0,5.609 -4.57,10.171 -10.195,10.171 m 2.867,-104.203 c 0,-1.574 -1.289,-2.859 -2.867,-2.859 H 52.188 c -1.583,0 -2.868,1.285 -2.868,2.863 v 94.031 c 0,1.575 1.289,2.86 2.871,2.86 v -0.004 h 177.778 c 1.578,0 2.867,-1.281 2.867,-2.859 z"
style="fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="path3370"
inkscape:connector-curvature="0" /></g></g></g></g></g></g><g
id="g3372"><g
id="g3374"
clip-path="url(#clipPath3376)"><g
id="g3380"
transform="translate(0,-0.593994)"><g
id="g3382"><g
id="g3384"
clip-path="url(#clipPath3386)"><g
id="g3390"><text
transform="matrix(0.79394895,0,0,-1,55.165753,77.85142)"
style="font-variant:normal;font-weight:bold;line-height:0%;font-family:'DejaVu Sans';-inkscape-font-specification:DejaVuSans-Bold;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="text3392"><tspan
x="0 49.83622 107.70615 160.1295"
y="0"
sodipodi:role="line"
id="tspan3394"
style="font-size:68.08226776px;line-height:1.25">PORN</tspan></text>
<text
transform="matrix(0.77053415,0,0,-1,56.264105,135.59389)"
style="font-variant:normal;font-weight:bold;line-height:0%;font-family:'DejaVu Sans';-inkscape-font-specification:DejaVuSans-Bold;writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
id="text3396"><tspan
x="0 45.555542 73.764458 88.137375 129.23235 161.1584 193.12575"
y="0"
sodipodi:role="line"
id="tspan3398"
style="font-size:41.30148697px;line-height:1.25">WE MAKE</tspan></text>
</g></g></g></g></g></g></g></svg>
\ No newline at end of file
......@@ -53,12 +53,19 @@
<hr>
<div class="row">
<div class="six columns">
<label for="bg-type">Background type</label>
<select id="bg-type">
<option value="plain" selected>Plain color</option>
<option value="gradient">Gradient color</option>
<option value="rainbow">Rainbow flag</option>
</select>
<div class="six columns">
<label for="add-glitter">Add glitter</label>
<input id="add-glitter" type="checkbox">
</div>
<div class="six columns">
<label for="bg-type">Background type</label>
<select id="bg-type">
<option value="plain" selected>Plain color</option>
<option value="gradient">Gradient color</option>
<option value="rainbow">Rainbow flag</option>
<option value="img">Image</option>
</select>
</div>
</div>
<div class="six columns" id="bg-color">
<label for="color">Background color</label>
......@@ -84,6 +91,14 @@
</select>
</div>
</div>
<div class="hidden six columns" id="bg-img-settings">
<label for="bg-img">Choose the background image</label>
<select id="bg-img">
<option value="beer" selected>Beer</option>
<option value="glitter">Glitter</option>
<option value="rainbow-flag">Rainbow flag</option>
</select>
</div>
</div>
<hr>
<div class="row">
......
......@@ -32,15 +32,13 @@ var hideSettings = 'Hide advanced settings';
domIsReady(function() {
// Try to get a translation
var userLang = navigator.language || navigator.userLanguage;
console.log(userLang);
var xhr = new XMLHttpRequest();
xhr.open('GET', 'locales/'+userLang+'.json');
xhr.responseType = 'json';
xhr.onload = function() {
if (xhr.readyState == 4 && xhr.status === 200) {
var locale = xhr.response;
console.log(locale);
['wemake', 'porn', 'filename', 'corners', 'wemake-color', 'porn-color', 'rect-color', 'bg-type', 'color', 'bgr-color', 'egr-color', 'wemake-x', 'wemake-y', 'wemake-size', 'porn-x', 'porn-y', 'porn-size'].forEach(function(e) {
['wemake', 'porn', 'filename', 'corners', 'wemake-color', 'porn-color', 'rect-color', 'add-glitter', 'bg-type', 'color', 'bgr-color', 'egr-color', 'bg-img', 'wemake-x', 'wemake-y', 'wemake-size', 'porn-x', 'porn-y', 'porn-size'].forEach(function(e) {
if (locale[e] !== undefined) {
document.querySelector('label[for="'+e+'"]').innerText = locale[e];
}
......@@ -51,7 +49,7 @@ var hideSettings = 'Hide advanced settings';
if (locale['corners-square'] !== undefined) {
document.querySelector('#corners option[value="0"]').innerText = locale['corners-square'];
}
['plain', 'gradient', 'rainbow', 'lr', 'rl', 'tb', 'bt', 'r'].forEach(function(e) {
['plain', 'gradient', 'rainbow', 'img', 'lr', 'rl', 'tb', 'bt', 'r', 'beer', 'glitter', 'rainbow-flag'].forEach(function(e) {
if (locale[e] !== undefined) {
document.querySelector('option[value="'+e+'"]').innerText = locale[e];
}
......@@ -95,7 +93,7 @@ var hideSettings = 'Hide advanced settings';
refreshFilename();
});
});
document.querySelectorAll('select,input[type="number"],input[type="color"]').forEach(function(e) {
document.querySelectorAll('select,input[type="number"],input[type="color"],input[type="checkbox"]').forEach(function(e) {
e.addEventListener('change', function() {
refreshText();
});
......@@ -194,6 +192,9 @@ var hideSettings = 'Hide advanced settings';
if (url.searchParams.get('co') !== null) {
document.getElementById('color').value = url.searchParams.get('co');
}
if (url.searchParams.get('gli') !== null) {
document.getElementById('add-glitter').checked = url.searchParams.get('gli');
}
if (url.searchParams.get('bgt') !== null) {
document.getElementById('bg-type').value = url.searchParams.get('bgt');
}
......@@ -209,6 +210,9 @@ var hideSettings = 'Hide advanced settings';
if (url.searchParams.get('or') !== null) {
document.getElementById('gr-orientation').value = url.searchParams.get('or');
}
if (url.searchParams.get('bgi') !== null) {
document.getElementById('bg-img').value = url.searchParams.get('bgi');
}
if (url.searchParams.get('cor') !== null) {
document.getElementById('corners').value = url.searchParams.get('cor');
}
......@@ -227,14 +231,22 @@ function toggleBgSettings() {
case 'plain':
show('bg-color');
hide('gradient-settings');
hide('bg-img-settings');
break;
case 'gradient':
hide('bg-color');
show('gradient-settings');
hide('bg-img-settings');
break;
case 'img':
hide('bg-color');
hide('gradient-settings');
show('bg-img-settings');
break;
default:
hide('bg-color');
hide('gradient-settings');
hide('bg-img-settings');
}
}
......@@ -264,12 +276,15 @@ function reset() {
document.getElementById('porn-color').value = "#000000";
document.getElementById('color').value = "#fcd205";
document.getElementById('rect-color').value = "#000000";
document.getElementById('add-glitter').checked = false;
document.getElementById('bg-type').value = 'plain';
document.getElementById('gr-orientation').value = 'lr';
document.getElementById('bg-img').value = 'beer';
document.getElementById('corners').value = '20';
show('bg-color');
hide('gradient-settings');
hide('bg-img-settings');
refreshText();
}
......@@ -301,11 +316,13 @@ function refreshText() {
var ps = document.getElementById('porn-size');
var pc = document.getElementById('porn-color');
var co = document.getElementById('color');
var gli = document.getElementById('add-glitter');
var bgt = document.getElementById('bg-type');
var rc = document.getElementById('rect-color');
var bgr = document.getElementById('bgr-color');
var egr = document.getElementById('egr-color');
var or = document.getElementById('gr-orientation');
var bgi = document.getElementById('bg-img');
var cor = document.getElementById('corners');
var c = document.getElementById('canvas');
......@@ -327,11 +344,13 @@ function refreshText() {
url.searchParams.set('ps', ps.value);
url.searchParams.set('pc', pc.value);
url.searchParams.set('co', co.value);
url.searchParams.set('gli', gli.checked);
url.searchParams.set('bgt', bgt.value);
url.searchParams.set('rc', rc.value);
url.searchParams.set('bgr', bgr.value);
url.searchParams.set('egr', egr.value);
url.searchParams.set('or', or.value);
url.searchParams.set('bgi', bgi.value);
url.searchParams.set('cor', cor.value);
window.history.pushState("change", "WemaWema", url);
......@@ -372,6 +391,20 @@ function refreshText() {
ctx.fillStyle = grd;
svg.fillStyle = grd2;
break;
case 'img':
var background = new Image();
var img = 'img/'+bgi.value
if (parseInt(cor.value) === 20) {
img += '-round';
}
background.src = img+'.png';
background.onload = function() {
ctx.drawImage(background, 0, 0);
svg.drawImage(background, 0, 0);
drawOver(ctx, svg, rc, ws, wc, w, wx, wy, ps, pc, p, px, py, gli);
}
return;
break;
case 'rainbow':
var grd = ctx.createLinearGradient(400, 0, 400, c.height);
var grd2 = svg.createLinearGradient(400, 0, 400, c.height);
......@@ -394,6 +427,10 @@ function refreshText() {
roundRect(ctx, 0, 0, c.width, c.height, parseInt(cor.value), true, false);
roundRect(svg, 0, 0, c.width, c.height, parseInt(cor.value), true, false);
drawOver(ctx, svg, rc, ws, wc, w, wx, wy, ps, pc, p, px, py, gli);
}
function drawOver(ctx, svg, rc, ws, wc, w, wx, wy, ps, pc, p, px, py, gli) {
// Inside rounded rectangle
ctx.lineWidth = 20;
svg.lineWidth = 20;
......@@ -420,7 +457,17 @@ function refreshText() {
ctx.fillText(p.value, parseInt(px.value), parseInt(py.value), 725);
svg.fillText(p.value, parseInt(px.value), parseInt(py.value), 725);
document.getElementById('svg').innerHTML = svg.getSerializedSvg();
if (gli.checked) {
var glitter = new Image();
glitter.src = 'img/glitter-calc.png';
glitter.onload = function() {
ctx.drawImage(glitter, 0, 0);
svg.drawImage(glitter, 0, 0);
document.getElementById('svg').innerHTML = svg.getSerializedSvg();
}
} else {
document.getElementById('svg').innerHTML = svg.getSerializedSvg();
}
}
function roundRect(ctx, x, y, width, height, radius, fill, stroke) {
......
......@@ -8,10 +8,12 @@
"wemake-color": "Couleur de la première ligne",
"porn-color": "Couleur de la seconde ligne",
"rect-color": "Couleur du rectangle",
"add-glitter": "Ajouter des paillettes",
"bg-type": "Type de fond",
"plain": "Couleur unie",
"gradient": "Dégradé de couleurs",
"rainbow": "Drapeau arc-en-ciel",
"img": "Image",
"color": "Couleur de fond",
"bgr-color": "Première couleur du dégradé",
"egr-color": "Seconde couleur du dégradé",
......@@ -21,6 +23,10 @@
"tb": "De haut en bas",
"bt": "De bas en haut",
"r": "Radial",
"bg-img": "Choisissez l’image de fond",
"beer": "Bière",
"glitter": "Paillettes",
"rainbow-flag": "Drapeau arc-en-ciel",
"wemake-x": "Abscisse de la première ligne",
"wemake-y": "Ordonnée de la première ligne",
"wemake-size": "Taille du texte de la première ligne",
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment