From c525b29ceb91c0abacfe9916aafb1b0b48d47880 Mon Sep 17 00:00:00 2001 From: Rasmus Luha Date: Fri, 24 Feb 2023 17:31:06 +0200 Subject: =?UTF-8?q?Soome=20m=C3=A4ng=20added?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- rannak/mangud/partorg/plakat.bak/main.js | 224 +++++++++++++++++++++++++++++++ 1 file changed, 224 insertions(+) create mode 100644 rannak/mangud/partorg/plakat.bak/main.js (limited to 'rannak/mangud/partorg/plakat.bak/main.js') diff --git a/rannak/mangud/partorg/plakat.bak/main.js b/rannak/mangud/partorg/plakat.bak/main.js new file mode 100644 index 0000000..11809cb --- /dev/null +++ b/rannak/mangud/partorg/plakat.bak/main.js @@ -0,0 +1,224 @@ +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"); + const testing = document.getElementById("testing"); + + pildid.push(stalinImg); + pildid.push(veekogudImg); + pildid.push(testing); + + + //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" || e.target.id === "testing") { + 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; +} -- cgit v1.2.3