Commit 9a7a33f4 authored by Luc Didry's avatar Luc Didry
Browse files

Add ability to change first phrase too. + rounded/square corners

/spend 20m
parent 74996b67
Pipeline #23817 passed with stage
in 18 seconds
......@@ -13,8 +13,12 @@
<div class="container">
<h1>WemaWema</h1>
<p>
<label for="wemake">WE MAKE</label>
<input id="wemake" placeholder="PORN" type="text" value="PORN" autofocus> <a class="button" href="#" id="download">Download</a>
<input id="wemake" placeholder="WE MAKE" type="text" value="WE MAKE">
<input id="porn" placeholder="PORN" type="text" value="PORN" autofocus> <a class="button" href="#" id="download">Download</a>
</p>
<p>
<input type="radio" name="corners" value="0">Square corners</input>
<input type="radio" name="corners" value="20" checked>Rounded corners</input>
</p>
<canvas id="canvas" width="800" height="400"></canvas>
</div>
......
......@@ -26,16 +26,27 @@ var domIsReady = (function(domIsReady) {
(function(document, window, domIsReady, undefined) {
domIsReady(function() {
document.querySelector('#wemake').addEventListener('keyup', function() {
refreshText();
document.querySelectorAll('input[type="text"]').forEach(function(e) {
e.addEventListener('keyup', function() {
refreshText();
});
e.addEventListener('paste', function() {
refreshText();
});
});
document.querySelectorAll('input[type="radio"]').forEach(function(e) {
e.addEventListener('click', function() {
refreshText();
});
});
document.querySelector('#download').addEventListener('click', function() {
this.download = 'WeMake.png';
this.href = document.getElementById('canvas').toDataURL().replace("image/png", "image/octet-stream");
});
if (window.location.hash)
document.querySelector('#wemake').value = decodeURIComponent(window.location.hash.substr(1));
if (window.location.hash) {
document.querySelector('#porn').value = decodeURIComponent(window.location.hash.substr(1));
}
refreshText();
});
......@@ -43,15 +54,24 @@ var domIsReady = (function(domIsReady) {
function refreshText(useValue) {
var w = document.getElementById('wemake');
var p = document.getElementById('porn');
var c = document.getElementById('canvas');
var ctx = c.getContext('2d');
ctx.clearRect(0, 0, c.width, c.height);
// update URL fragment
window.location.hash = "#" + w.value;
window.location.hash = "#" + p.value;
// background color
var radius = 20;
var corners = document.getElementsByName('corners');
for (var i = 0; i < corners.length; i++) {
if (corners[i].checked) {
radius = parseInt(corners[i].value);
}
}
ctx.fillStyle = 'rgba(252, 210, 5, 1)';
roundRect(ctx, 0, 0, c.width, c.height, 20, true, false);
roundRect(ctx, 0, 0, c.width, c.height, radius, true, false);
// rounded rectangle
ctx.lineWidth = 20;
......@@ -62,12 +82,12 @@ function refreshText(useValue) {
// Write WE MAKE
ctx.font = 'bold 150px sans-serif';
ctx.fillStyle = 'rgba(0, 0, 0, 1)';
ctx.fillText('WE MAKE', 400, 160, 725);
ctx.fillText(w.value, 400, 160, 725);
// Write new value
ctx.font = 'bold 220px sans-serif';
ctx.fillStyle = 'rgba(0, 0, 0, 1)';
ctx.fillText(w.value, 400, 350, 725);
ctx.fillText(p.value, 400, 350, 725);
}
function roundRect(ctx, x, y, width, height, radius, fill, stroke) {
......
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