@@ -17,7 +16,7 @@

Kujunda Plakatit

Vali Välja Üks plakat ja muuda/lisa selle kujundust vastavalt enda äranägemise järgi

Vali välja üks plakat ja muuda/lisa selle kujundust vastavalt enda äranägemisele.

@@ -25,22 +24,27 @@ Sissejuhatus +

- +

+ +

- @@ -50,8 +54,21 @@ Veekogude Plakat

+ + +

Vali Lisasid

+ - + + + +

@@ -76,7 +93,18 @@ 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"); diff --git a/rannak/mangud/partorg/plakat/style.css b/rannak/mangud/partorg/plakat/style.css index bc5c2c4..215c073 100644 --- a/rannak/mangud/partorg/plakat/style.css +++ b/rannak/mangud/partorg/plakat/style.css @@ -1,7 +1,13 @@ body { - height: 100% !important; - overflow: hidden !important; - color: white !important; + height: 100%; + overflow: hidden; + color: white; + background-color: #43464b; +} + +h1 { + color: #a1000e; + font-weight: bold; } @@ -9,15 +15,15 @@ body { .avatar { border-radius: 20px; - width: 100% !important; - max-width: 15rem !important; + width: 100%; + max-width: 15rem; } .modalHeaderWrapper{ text-align: center; - margin: 0 !important; - width: 100% !important; + margin: 0; + width: 100%; } button:disabled{ @@ -47,18 +53,18 @@ button:disabled{ } .modalButton{ - background-color: rgba(0,136,169,1) !important; - border: none !important; - border-radius: 50px !important; - cursor: pointer !important; - transition: all 0.3 ease 0 !important; - font-size: 1.2rem !important; - text-align: center !important; - margin-left: 30px !important; + background-color: rgba(0,136,169,1); + border: none; + border-radius: 50px; + cursor: pointer; + transition: all 0.3 ease 0; + font-size: 1.2rem; + text-align: center; + margin-left: 30px; } .modalButton:hover{ - background-color: rgba(0,136,169,0.8) !important; + background-color: rgba(0,136,169,0.8); } @@ -71,7 +77,6 @@ button:disabled{ } /* Toolbar */ - .intro{ text-align: center; border-bottom: 2px solid gray; @@ -86,7 +91,7 @@ button:disabled{ padding: 5px; width: 20%; min-width:350px; - background-color: #202020; + background-color: #43464b; } #clear{ @@ -99,14 +104,18 @@ button:disabled{ } #toolbar * {margin-bottom: 6px;} -#toolbar input {width: 50%;} +#toolbar input {width: 4rem;} + +.toolbarDiv {width: 100%;} + +form { + display: flex; + align-items: center; +} -form { display: table !important;} -input { display: table-cell !important;} -.toolbarDiv {width: 100% !important;} label { - display: table-cell !important; - font-size: 1.2rem !important; + display: table-cell; + font-size: 1.2rem; } @@ -118,15 +127,24 @@ label { overflow-y: scroll; } + .valiTxt { border-bottom: 4px solid gray; padding-top: 10px; } + .picked{ border: 2px solid lime; } + +.addOnPicked{ + border: 2px solid aqua; +} + + + .pickImg { width: 50%; height: auto; @@ -141,3 +159,30 @@ canvas{ display: block; margin: 0 auto; } + + + + + +/* Responsivness */ + +@media screen and (max-width: 1400px) { + .pickImg { + width: 30%; + height: auto; + padding: 7px; + margin-left: calc(7% - 21px); + } + +} + + +@media screen and (max-width: 900px) { + .pickImg { + width: 24%; + height: auto; + padding: 3px; + margin-left: calc(1% - 10px); + } + +} -- cgit v1.2.3