From 209b1915b0f1879d0055ea17f76464dddcf8089b Mon Sep 17 00:00:00 2001 From: Rasmus Luha Date: Sun, 5 Feb 2023 20:43:17 +0200 Subject: =?UTF-8?q?Hinnad=20m=C3=A4ng=20for=20Arimees=20+=20fonts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- rannak/mangud/partorg/plakat/main.js | 83 ++++++++++++++++++++++++++++++++++-- 1 file changed, 79 insertions(+), 4 deletions(-) (limited to 'rannak/mangud/partorg/plakat/main.js') diff --git a/rannak/mangud/partorg/plakat/main.js b/rannak/mangud/partorg/plakat/main.js index 48626c6..9ae8e54 100644 --- a/rannak/mangud/partorg/plakat/main.js +++ b/rannak/mangud/partorg/plakat/main.js @@ -4,6 +4,7 @@ document.addEventListener('DOMContentLoaded', () => { }); +console.log("FAAAAK"); /* Inital Setup*/ @@ -25,12 +26,16 @@ function copyImageToCanvas(image, x, y) { ctx.drawImage(image, 0, 0, canvas.width, canvas.height) } + + + // Initial Drawring setTimeout(() => { copyImageToCanvas(CurImage, canvasOffsetX, canvasOffsetY); }, 300); + window.onresize = () => { canvasOffsetX = canvas.offsetLeft; canvasOffsetY = canvas.offsetTop; @@ -44,20 +49,45 @@ window.onresize = () => { /* EventHandlers and stuff*/ +let addOnHasBeenAdded = false; +let addOnActive = false; +let newAddOn; +let hasPainted = false; + let isPainting = false; let lineWidth = 5; let startX; let startY; +const pildid = new Array(); +const addOns = new Array(); + toolbar.addEventListener('click', e => { + + //Plakatid const stalinImg = document.getElementById("stalin"); const veekogudImg = document.getElementById("veekogud"); - const pildid = new Array(); pildid.push(stalinImg); pildid.push(veekogudImg); + + //Addons + + const naziImg = document.getElementById("nazi"); + const lenin = document.getElementById("lenin"); + const redStar = document.getElementById("redStar"); + const stalinAddOn = document.getElementById("stalinAddOn"); + + addOns.push(naziImg); + addOns.push(lenin); + addOns.push(redStar); + addOns.push(stalinAddOn); + + + + if (e.target.id === "stalin" || e.target.id === "veekogud") { for (el in pildid) { pildid[el].classList.remove("picked"); @@ -72,17 +102,60 @@ toolbar.addEventListener('click', e => { } - if (e.target.id === 'clear') { + else if (e.target.id === 'clear') { ctx.clearRect(0, 0, canvas.width, canvas.height); copyImageToCanvas(CurImage, canvasOffsetX, canvasOffsetY); moveOnDisable(); } + + else if (e.target.id === 'nazi' || e.target.id === 'lenin' || e.target.id === 'redStar' || e.target.id === 'stalinAddOn') { + addOnActive = true; + document.body.style.cursor = "url('img/normalSelect.cur'), auto"; + + for (el in addOns) { + addOns[el].classList.remove("addOnPicked"); + } + + newAddOn = document.getElementById(e.target.id); + newAddOn.classList.add("addOnPicked"); + } + + +}); + + + +canvas.addEventListener('click', e => { + + if(addOnActive == true){ + addOnActive = false; + document.body.style.cursor = "auto"; + + for (el in addOns) { + addOns[el].classList.remove("addOnPicked"); + } + + let xCord = e.offsetX - (newAddOn.clientWidth / 2) + let yCord = e.offsetY - (newAddOn.clientHeight / 2) + ctx.drawImage(newAddOn, xCord, yCord, newAddOn.clientWidth, newAddOn.clientHeight); + + + addOnHasBeenAdded = true; + if (hasPainted) + moveOnEnable(); + } }); + + + + + /* Drawing stuff from here */ + toolbar.addEventListener('change', e => { if(e.target.id === 'stroke') { ctx.strokeStyle = e.target.value; @@ -108,7 +181,9 @@ const draw = (e) => { //ctx.lineTo(e.clientX - abiOffset, e.clientY); ctx.stroke(); - moveOnEnable(); + hasPainted = true; + if (addOnHasBeenAdded) + moveOnEnable(); } @@ -132,8 +207,8 @@ canvas.addEventListener('mousemove', draw); -// Move On Stuff +// Move On Stuff function moveOnEnable(){ const btn = document.querySelector(".moveOn"); -- cgit v1.2.3