diff options
Diffstat (limited to 'rannak/mangud/partorg/plakat/main.js')
-rw-r--r-- | rannak/mangud/partorg/plakat/main.js | 222 |
1 files changed, 0 insertions, 222 deletions
diff --git a/rannak/mangud/partorg/plakat/main.js b/rannak/mangud/partorg/plakat/main.js deleted file mode 100644 index 9ae8e54..0000000 --- a/rannak/mangud/partorg/plakat/main.js +++ /dev/null @@ -1,222 +0,0 @@ -document.addEventListener('DOMContentLoaded', () => { - let btn = document.querySelector('.modalButton'); - btn.click(); -}); - - -console.log("FAAAAK"); - -/* Inital Setup*/ - -const canvas = document.getElementById('drawing-board'); -const toolbar = document.getElementById('toolbar'); -const ctx = canvas.getContext('2d'); - -let canvasOffsetX = canvas.offsetLeft; -let canvasOffsetY = canvas.offsetTop; - -let CurImage = document.getElementById("stalin"); - -canvas.width = window.innerWidth - canvasOffsetX; -canvas.height = window.innerHeight - canvasOffsetY; - - - -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; - canvas.width = window.innerWidth - canvasOffsetX; - canvas.height = window.innerHeight - canvasOffsetY; - copyImageToCanvas(CurImage, canvasOffsetX, canvasOffsetY); -} - - - - -/* 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"); - - 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"); - } - let newPicked = document.getElementById(e.target.id); - newPicked.classList.add("picked"); - - // Draw New Pick - CurImage = newPicked; - copyImageToCanvas(CurImage, canvasOffsetX, canvasOffsetY); - moveOnDisable(); - } - - - 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; - } - - if(e.target.id === 'lineWidth') { - lineWidth = e.target.value; - } - -}); - - - -const draw = (e) => { - if(!isPainting) { - return; - } - - ctx.lineWidth = lineWidth; - ctx.lineCap = 'round'; - - ctx.lineTo(e.clientX - canvasOffsetX, e.clientY); - //ctx.lineTo(e.clientX - abiOffset, e.clientY); - ctx.stroke(); - - hasPainted = true; - if (addOnHasBeenAdded) - moveOnEnable(); -} - - - -canvas.addEventListener('mousedown', (e) => { - isPainting = true; - startX = e.clientX; - startY = e.clientY; -}); - - - -canvas.addEventListener('mouseup', e => { - isPainting = false; - ctx.stroke(); - ctx.beginPath(); -}); - - -canvas.addEventListener('mousemove', draw); - - - - -// Move On Stuff - -function moveOnEnable(){ - const btn = document.querySelector(".moveOn"); - btn.disabled = false; - btn.onclick = () => location.href = "../sonaragastik"; -} - -function moveOnDisable(){ - const btn = document.querySelector(".moveOn"); - btn.disabled = true; -} |