Commit 37a10fcd authored by Luc Didry's avatar Luc Didry
Browse files

Fix #8

parent e85f236f
Pipeline #24005 passed with stage
in 15 seconds
......@@ -24,12 +24,29 @@
</div>
<div id="settings-block" class="hidden">
<div class="row">
<div class="six columns">
<label for="wemake-color">First line color</label>
<input id="wemake-color" type="color" value="#000000">
</div>
<div class="six columns">
<label for="porn-color">Second line color</label>
<input id="porn-color" type="color" value="#000000">
</div>
</div>
<div class="row">
<div class="six columns">
<label for="color">Background color</label>
<input id="color" type="color" value="#fcd205">
</div>
<div class="six columns">
<label for="rect-color">Rectangle color</label>
<input id="rect-color" type="color" value="#000000">
</div>
</div>
<div>
<label>Corner shape</label>
<input type="radio" name="corners" value="0">Square corners</input>
<input type="radio" name="corners" value="20" checked>Rounded corners</input>
<label for="color">Background color</label>
<input id="color" type="color" value="#fcd205">
</div>
<div>
<div class="four columns">
......
......@@ -67,31 +67,40 @@ var domIsReady = (function(domIsReady) {
}
var url = new URL(window.location);
if (url.searchParams.get('w') !== null) {
document.getElementById('wemake').value = url.searchParams.get('w');
document.getElementById('wemake').value = url.searchParams.get('w');
}
if (url.searchParams.get('wx') !== null) {
document.getElementById('wemake-x').value = url.searchParams.get('wx');
document.getElementById('wemake-x').value = url.searchParams.get('wx');
}
if (url.searchParams.get('wy') !== null) {
document.getElementById('wemake-y').value = url.searchParams.get('wy');
document.getElementById('wemake-y').value = url.searchParams.get('wy');
}
if (url.searchParams.get('ws') !== null) {
document.getElementById('wemake-size').value = url.searchParams.get('ws');
document.getElementById('wemake-size').value = url.searchParams.get('ws');
}
if (url.searchParams.get('wc') !== null) {
document.getElementById('wemake-color').value = url.searchParams.get('wc');
}
if (url.searchParams.get('p') !== null) {
document.getElementById('porn').value = url.searchParams.get('p');
document.getElementById('porn').value = url.searchParams.get('p');
}
if (url.searchParams.get('px') !== null) {
document.getElementById('porn-x').value = url.searchParams.get('px');
document.getElementById('porn-x').value = url.searchParams.get('px');
}
if (url.searchParams.get('py') !== null) {
document.getElementById('porn-y').value = url.searchParams.get('py');
document.getElementById('porn-y').value = url.searchParams.get('py');
}
if (url.searchParams.get('ps') !== null) {
document.getElementById('porn-size').value = url.searchParams.get('ps');
document.getElementById('porn-size').value = url.searchParams.get('ps');
}
if (url.searchParams.get('pc') !== null) {
document.getElementById('porn-color').value = url.searchParams.get('pc');
}
if (url.searchParams.get('co') !== null) {
document.getElementById('color').value = url.searchParams.get('co');
document.getElementById('color').value = url.searchParams.get('co');
}
if (url.searchParams.get('rc') !== null) {
document.getElementById('rect-color').value = url.searchParams.get('rc');
}
refreshText();
......@@ -99,13 +108,17 @@ var domIsReady = (function(domIsReady) {
})(document, window, domIsReady);
function reset() {
document.getElementById('wemake-x').value = "400";
document.getElementById('wemake-y').value = "160";
document.getElementById('wemake-size').value = "150";
document.getElementById('porn-x').value = "400";
document.getElementById('porn-y').value = "350";
document.getElementById('porn-size').value = "220";
document.getElementById('color').value = "#fcd205";
document.getElementById('wemake-x').value = "400";
document.getElementById('wemake-y').value = "160";
document.getElementById('wemake-size').value = "150";
document.getElementById('wemake-color').value = "#000000";
document.getElementById('porn-x').value = "400";
document.getElementById('porn-y').value = "350";
document.getElementById('porn-size').value = "220";
document.getElementById('porn-size').value = "220";
document.getElementById('porn-color').value = "#000000";
document.getElementById('color').value = "#fcd205";
document.getElementById('rect-color').value = "#000000";
var corners = document.getElementsByName('corners');
for (var i = 0; i < corners.length; i++) {
......@@ -124,11 +137,14 @@ function refreshText() {
var wx = document.getElementById('wemake-x');
var wy = document.getElementById('wemake-y');
var ws = document.getElementById('wemake-size');
var wc = document.getElementById('wemake-color');
var p = document.getElementById('porn');
var px = document.getElementById('porn-x');
var py = document.getElementById('porn-y');
var ps = document.getElementById('porn-size');
var pc = document.getElementById('porn-color');
var co = document.getElementById('color');
var rc = document.getElementById('rect-color');
var c = document.getElementById('canvas');
var ctx = c.getContext('2d');
......@@ -140,11 +156,14 @@ function refreshText() {
url.searchParams.set('wx', wx.value);
url.searchParams.set('wy', wy.value);
url.searchParams.set('ws', ws.value);
url.searchParams.set('wc', wc.value);
url.searchParams.set('p', p.value);
url.searchParams.set('px', px.value);
url.searchParams.set('py', py.value);
url.searchParams.set('ps', ps.value);
url.searchParams.set('pc', pc.value);
url.searchParams.set('co', co.value);
url.searchParams.set('rc', rc.value);
window.history.pushState("change", "WemaWema", url);
// background color
......@@ -160,18 +179,18 @@ function refreshText() {
// rounded rectangle
ctx.lineWidth = 20;
ctx.strokeStyle = 'rgb(0, 0, 0)';
ctx.strokeStyle = rc.value;
roundRect(ctx, 25, 25, 750, 350, 20, false);
ctx.textAlign="center";
// Write WE MAKE
ctx.font = 'bold '+parseInt(ws.value)+'px sans-serif';
ctx.fillStyle = 'rgba(0, 0, 0, 1)';
ctx.fillStyle = wc.value;
ctx.fillText(w.value, parseInt(wx.value), parseInt(wy.value), 725);
// Write new value
ctx.font = 'bold '+parseInt(ps.value)+'px sans-serif';
ctx.fillStyle = 'rgba(0, 0, 0, 1)';
ctx.fillStyle = pc.value
ctx.fillText(p.value, parseInt(px.value), parseInt(py.value), 725);
}
......
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