Plakat

From 6a9499cea7df279407f61c55d1aa18bc23ff1869 Mon Sep 17 00:00:00 2001 From: Rasmus Luha Date: Mon, 26 Dec 2022 22:09:08 +0200 Subject: Plakat game --- rannak/mangud/index.html | 1 + rannak/mangud/partorg/plakat/img/stalin.jpg | Bin 0 -> 168805 bytes rannak/mangud/partorg/plakat/img/veekogud.jpg | Bin 0 -> 223291 bytes rannak/mangud/partorg/plakat/index.html | 95 +++++++++++++++ rannak/mangud/partorg/plakat/main.js | 141 +++++++++++++++++++++++ rannak/mangud/partorg/plakat/style.css | 132 +++++++++++++++++++++ rannak/mangud/uliopilane/utlused/css/utlused.css | 5 +- rannak/mangud/uliopilane/utlused/js/main.js | 2 +- 8 files changed, 373 insertions(+), 3 deletions(-) create mode 100644 rannak/mangud/partorg/plakat/img/stalin.jpg create mode 100644 rannak/mangud/partorg/plakat/img/veekogud.jpg create mode 100644 rannak/mangud/partorg/plakat/index.html create mode 100644 rannak/mangud/partorg/plakat/main.js create mode 100644 rannak/mangud/partorg/plakat/style.css diff --git a/rannak/mangud/index.html b/rannak/mangud/index.html index c7d08a9..d0394bd 100644 --- a/rannak/mangud/index.html +++ b/rannak/mangud/index.html @@ -45,6 +45,7 @@

diff --git a/rannak/mangud/partorg/plakat/img/stalin.jpg b/rannak/mangud/partorg/plakat/img/stalin.jpg new file mode 100644 index 0000000..bc0a3a5 Binary files /dev/null and b/rannak/mangud/partorg/plakat/img/stalin.jpg differ diff --git a/rannak/mangud/partorg/plakat/img/veekogud.jpg b/rannak/mangud/partorg/plakat/img/veekogud.jpg new file mode 100644 index 0000000..23f04ab Binary files /dev/null and b/rannak/mangud/partorg/plakat/img/veekogud.jpg differ diff --git a/rannak/mangud/partorg/plakat/index.html b/rannak/mangud/partorg/plakat/index.html new file mode 100644 index 0000000..9d1e89d --- /dev/null +++ b/rannak/mangud/partorg/plakat/index.html @@ -0,0 +1,95 @@ + + + + + + + Plakat + + + + + + +

+ + + +

+ + +

+ + + + + + + + + + + + + + + + diff --git a/rannak/mangud/partorg/plakat/main.js b/rannak/mangud/partorg/plakat/main.js new file mode 100644 index 0000000..6eb9281 --- /dev/null +++ b/rannak/mangud/partorg/plakat/main.js @@ -0,0 +1,141 @@ + +/* 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 isPainting = false; +let lineWidth = 5; +let startX; +let startY; + +toolbar.addEventListener('click', e => { + + const stalinImg = document.getElementById("stalin"); + const veekogudImg = document.getElementById("veekogud"); + + const pildid = new Array(); + pildid.push(stalinImg); + pildid.push(veekogudImg); + + 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(); + } + + + if (e.target.id === 'clear') { + ctx.clearRect(0, 0, canvas.width, canvas.height); + copyImageToCanvas(CurImage, canvasOffsetX, canvasOffsetY); + moveOnDisable(); + } + +}); + + + +/* 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(); + + 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 = ""; +} + +function moveOnDisable(){ + const btn = document.querySelector(".moveOn"); + btn.disabled = true; +} diff --git a/rannak/mangud/partorg/plakat/style.css b/rannak/mangud/partorg/plakat/style.css new file mode 100644 index 0000000..8d452ad --- /dev/null +++ b/rannak/mangud/partorg/plakat/style.css @@ -0,0 +1,132 @@ +body { + margin: 0 !important; + padding: 0 !important; + height: 100% !important; + overflow: hidden !important; + color: white !important; +} + + +/* Move on ja Sissejuhatus Button */ + +button:disabled{ + opacity: 0.5; + cursor: not-allowed; +} + +.moveOn{ + display: inline-block; + border: none; + padding: 6px 12px; + margin-botton: 0; + font-size: 1rem; + font-weight: normal; + text-align: center; + cursor: pointer; + border-radius: 4px; + background-color: #4BB543; + color: white; +} + +/* Modal Stuff */ + + +.closeModalButton { + border-radius: 50px; +} + +.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; +} + +.modalButton:hover{ + background-color: rgba(0,136,169,0.8) !important; +} + + + +/* Main */ + +.wrapper { + height: 100%; + display: flex; +} + +/* Toolbar */ + +.intro{ + text-align: center; + border-bottom: 2px solid gray; + padding: 7px; +} + + +#toolbar { + display: flex; + flex-direction: column; + align-items: center; + padding: 5px; + width: 20%; + min-width:350px; + background-color: #202020; +} + +#clear{ + background-color: #1565c0; + border: none; + border-radius: 4px; + font-size:1.3rem; + color:white; + padding: 2px; +} + +#toolbar * {margin-bottom: 6px;} +#toolbar input {width: 50%;} + +form { display: table !important;} +input { display: table-cell !important;} +.toolbarDiv {width: 100% !important;} +label { + display: table-cell !important; + font-size: 1.2rem !important; +} + + + +/* Img Picker */ +.pickingSec { + height: 50%; + overflow: hidden; + overflow-y: scroll; +} + +.valiTxt { + border-bottom: 4px solid gray; + padding-top: 10px; +} + +.picked{ + border: 2px solid lime; +} + +.pickImg { + width: 50%; + height: auto; + padding: 10px; + margin-left: calc(25% - 5px); +} + + + +/* Canvas */ +canvas{ + display: block; + margin: 0 auto; +} diff --git a/rannak/mangud/uliopilane/utlused/css/utlused.css b/rannak/mangud/uliopilane/utlused/css/utlused.css index b479b87..8a226b9 100644 --- a/rannak/mangud/uliopilane/utlused/css/utlused.css +++ b/rannak/mangud/uliopilane/utlused/css/utlused.css @@ -18,7 +18,7 @@ body { display: inline-block; border: none; padding: 6px 12px; - margin-botton: 0; + margin-left: 11%; font-size: 1rem; font-weight: normal; text-align: center; @@ -30,6 +30,7 @@ body { button:disabled{ opacity: 0.5; + cursor: not-allowed; } @@ -64,7 +65,7 @@ button:disabled{ /* later added stuff here */ .wrapper { - outline: 1px solid gold; + border-bottom: 3px solid gray; position: relative; display: flex; flex-wrap: wrap; diff --git a/rannak/mangud/uliopilane/utlused/js/main.js b/rannak/mangud/uliopilane/utlused/js/main.js index 4a14230..1e19210 100644 --- a/rannak/mangud/uliopilane/utlused/js/main.js +++ b/rannak/mangud/uliopilane/utlused/js/main.js @@ -78,7 +78,7 @@ if (`${isMobile() ? 'mobile' : 'not mobile'}` == 'not mobile') { if (counter == 6){ const btn = document.querySelector(".moveOn"); btn.disabled = false; - btn.onclick = () => location.href = "../../rolliValik"; + btn.onclick = () => location.href = ""; } } // If isCorrectMatchingEnd } // Drop Func End -- cgit v1.2.3

Kujunda Plakatit

Vali Plakat