diff --git a/views/pages/tour.js b/views/pages/tour.js index 1d9ad3c..684f4ee 100644 --- a/views/pages/tour.js +++ b/views/pages/tour.js @@ -203,10 +203,9 @@ function step2() {
- + Unfortunately, it looks like canvas is not supported in your browser - ${renderedImages}
diff --git a/views/partials/tour-scripts.js b/views/partials/tour-scripts.js index e5f8c68..9e39f57 100644 --- a/views/partials/tour-scripts.js +++ b/views/partials/tour-scripts.js @@ -3,7 +3,9 @@ $("#fetch-claim-uri").val(""); // reset + detectLanguageAndUpdate(); +initCanvas(); @@ -36,6 +38,7 @@ $("body").on("click", "[data-action]", event => { $("#step1-page").hide(); $("#step2-page").show(); + $(".hook__page__content__meme__thumbnail").click(); $("#step3-page").hide(); break; @@ -53,6 +56,15 @@ $("body").on("click", "[data-action]", event => { } }); +$("body").on("click", ".hook__page__content__meme__thumbnail", event => { + $(".hook__page__content__meme__thumbnail").removeClass("selected"); + + event.currentTarget.className += " selected"; + updateCanvas(event.currentTarget); +}); + +$("#meme-top-line, #meme-bottom-line").on("keyup", () => updateCanvas()); + // H E L P E R S @@ -88,7 +100,7 @@ function fetchMetadata(metadataId) { /** TODO: [ ] Style code with highlightjs - [ ] Add copy to explain that the lbry app has to be running in order to follow example + [✓] Add copy to explain that the lbry app has to be running in order to follow example */ $("#step1-placeholder").html(` @@ -104,6 +116,63 @@ function fetchMetadata(metadataId) { $("#step1-selections").hide(); } -send(JSON.stringify({ +function clearCanvas(canvas) { + const ctx = canvas.getContext("2d"); + + ctx.save(); + ctx.globalCompositeOperation = "copy"; + ctx.strokeStyle = "transparent"; + ctx.beginPath(); + ctx.lineTo(0, 0); + ctx.stroke(); + ctx.restore(); +} + +function initCanvas() { + const canvas = document.getElementById("meme-canvas"); + const canvasWidth = 400; + const canvasHeight = 300; + const ctx = canvas.getContext("2d"); + const img = document.getElementById("base-image"); + + clearCanvas(canvas); + + ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight); + ctx.fillStyle = "white"; + ctx.font = "bold 28px Karla"; + ctx.lineJoin = "round"; + ctx.lineWidth = 4; + ctx.strokeStyle = "black"; + ctx.textAlign = "center"; + ctx.textBaseline = "top"; + ctx.strokeText($("#meme-top-line").val().toUpperCase(), canvasWidth / 2, 20); + ctx.strokeText($("#meme-bottom-line").val().toUpperCase(), canvasWidth / 2, (canvasHeight - 40)); + ctx.fillText($("#meme-top-line").val().toUpperCase(), canvasWidth / 2, 20); + ctx.fillText($("#meme-bottom-line").val().toUpperCase(), canvasWidth / 2, (canvasHeight - 40)); +} + +function updateCanvas(imageSource) { + const canvas = document.getElementById("meme-canvas"); + const canvasWidth = 400; + const canvasHeight = 300; + const ctx = canvas.getContext("2d"); + const img = document.getElementById("base-image"); + + clearCanvas(canvas); + + if (imageSource) { + ctx.drawImage(imageSource, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight); + img.src = imageSource.src; + } ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight, 0, 0, canvasWidth, canvasHeight); + + ctx.strokeText($("#meme-top-line").val().toUpperCase(), canvasWidth / 2, 20); + ctx.strokeText($("#meme-bottom-line").val().toUpperCase(), canvasWidth / 2, (canvasHeight - 40)); + ctx.fillText($("#meme-top-line").val().toUpperCase(), canvasWidth / 2, 20); + ctx.fillText($("#meme-bottom-line").val().toUpperCase(), canvasWidth / 2, (canvasHeight - 40)); +} + + + +send(JSON.stringify({ // TODO: Remove this "message": "Landed on Tour" }));