From e5070eb88e0cb127df14f1c53e4962d3919e76de Mon Sep 17 00:00:00 2001 From: Rasmus Luha Date: Tue, 10 Jan 2023 15:55:53 +0200 Subject: add Avatar to modals --- rannak/mangud/partorg/kuulsused/index.html | 8 +- rannak/mangud/partorg/kuulsused/pildid/avatar.png | Bin 0 -> 657556 bytes rannak/mangud/partorg/kuulsused/styles.css | 10 + rannak/mangud/partorg/plakat/img/avatar.png | Bin 0 -> 657556 bytes rannak/mangud/partorg/plakat/index.html | 8 +- rannak/mangud/partorg/plakat/style.css | 11 ++ rannak/mangud/partorg/sonaragastik/index.html | 8 +- .../mangud/partorg/sonaragastik/pildid/avatar.png | Bin 0 -> 657556 bytes rannak/mangud/partorg/sonaragastik/style.css | 14 ++ rannak/mangud/perenaine/memori/img/avatar.png | Bin 0 -> 703680 bytes rannak/mangud/perenaine/memori/index.html | 8 +- rannak/mangud/perenaine/memori/style.css | 12 ++ rannak/mangud/perenaine/ristsona/index.html | 8 +- rannak/mangud/perenaine/ristsona/pildid/avatar.png | Bin 0 -> 703680 bytes rannak/mangud/perenaine/ristsona/style.css | 11 ++ rannak/mangud/uliopilane/ajatelg/index.html | 8 +- rannak/mangud/uliopilane/ajatelg/pildid/avatar.png | Bin 0 -> 668741 bytes rannak/mangud/uliopilane/ajatelg/styles.css | 13 ++ rannak/mangud/uliopilane/tSark/img/avatar.png | Bin 0 -> 668741 bytes rannak/mangud/uliopilane/tSark/index.html | 8 +- rannak/mangud/uliopilane/tSark/style.css | 13 ++ rannak/mangud/uliopilane/utlused/css/utlused.css | 159 --------------- rannak/mangud/uliopilane/utlused/index.html | 12 +- rannak/mangud/uliopilane/utlused/js/main.js | 217 --------------------- rannak/mangud/uliopilane/utlused/main.js | 217 +++++++++++++++++++++ rannak/mangud/uliopilane/utlused/pildid/avatar.png | Bin 0 -> 668741 bytes rannak/mangud/uliopilane/utlused/utlused.css | 169 ++++++++++++++++ 27 files changed, 504 insertions(+), 410 deletions(-) create mode 100644 rannak/mangud/partorg/kuulsused/pildid/avatar.png create mode 100644 rannak/mangud/partorg/plakat/img/avatar.png create mode 100644 rannak/mangud/partorg/sonaragastik/pildid/avatar.png create mode 100644 rannak/mangud/perenaine/memori/img/avatar.png create mode 100644 rannak/mangud/perenaine/ristsona/pildid/avatar.png create mode 100644 rannak/mangud/uliopilane/ajatelg/pildid/avatar.png create mode 100644 rannak/mangud/uliopilane/tSark/img/avatar.png delete mode 100644 rannak/mangud/uliopilane/utlused/css/utlused.css delete mode 100644 rannak/mangud/uliopilane/utlused/js/main.js create mode 100644 rannak/mangud/uliopilane/utlused/main.js create mode 100644 rannak/mangud/uliopilane/utlused/pildid/avatar.png create mode 100644 rannak/mangud/uliopilane/utlused/utlused.css (limited to 'rannak/mangud') diff --git a/rannak/mangud/partorg/kuulsused/index.html b/rannak/mangud/partorg/kuulsused/index.html index 221580b..4dfe755 100644 --- a/rannak/mangud/partorg/kuulsused/index.html +++ b/rannak/mangud/partorg/kuulsused/index.html @@ -37,10 +37,10 @@
- - +
+ +
+ avatar
diff --git a/rannak/mangud/partorg/kuulsused/pildid/avatar.png b/rannak/mangud/partorg/kuulsused/pildid/avatar.png new file mode 100644 index 0000000..485a70c Binary files /dev/null and b/rannak/mangud/partorg/kuulsused/pildid/avatar.png differ diff --git a/rannak/mangud/partorg/kuulsused/styles.css b/rannak/mangud/partorg/kuulsused/styles.css index 7c8f16e..79b5177 100644 --- a/rannak/mangud/partorg/kuulsused/styles.css +++ b/rannak/mangud/partorg/kuulsused/styles.css @@ -6,6 +6,16 @@ margin-bottom: 20px !important; } +.avatar { + border-radius: 20px; + width: 100% !important; +} + +.modalHeaderWrapper{ + text-align: center; + margin: 0 !important; + width: 100% !important; +} .moveOn{ display: inline-block; diff --git a/rannak/mangud/partorg/plakat/img/avatar.png b/rannak/mangud/partorg/plakat/img/avatar.png new file mode 100644 index 0000000..485a70c Binary files /dev/null and b/rannak/mangud/partorg/plakat/img/avatar.png differ diff --git a/rannak/mangud/partorg/plakat/index.html b/rannak/mangud/partorg/plakat/index.html index 9d1e89d..a15849e 100644 --- a/rannak/mangud/partorg/plakat/index.html +++ b/rannak/mangud/partorg/plakat/index.html @@ -68,10 +68,10 @@
- - +
+ +
+ avatar
diff --git a/rannak/mangud/partorg/plakat/style.css b/rannak/mangud/partorg/plakat/style.css index 8d452ad..c2ed47b 100644 --- a/rannak/mangud/partorg/plakat/style.css +++ b/rannak/mangud/partorg/plakat/style.css @@ -8,6 +8,17 @@ body { /* Move on ja Sissejuhatus Button */ + +.avatar { + border-radius: 20px; + width: 100% !important; +} + +.modalHeaderWrapper{ + text-align: center; + margin: 0 !important; + width: 100% !important; +} button:disabled{ opacity: 0.5; diff --git a/rannak/mangud/partorg/sonaragastik/index.html b/rannak/mangud/partorg/sonaragastik/index.html index 095c110..11d31ec 100644 --- a/rannak/mangud/partorg/sonaragastik/index.html +++ b/rannak/mangud/partorg/sonaragastik/index.html @@ -50,10 +50,10 @@
- - +
+ +
+ avatar
diff --git a/rannak/mangud/partorg/sonaragastik/pildid/avatar.png b/rannak/mangud/partorg/sonaragastik/pildid/avatar.png new file mode 100644 index 0000000..485a70c Binary files /dev/null and b/rannak/mangud/partorg/sonaragastik/pildid/avatar.png differ diff --git a/rannak/mangud/partorg/sonaragastik/style.css b/rannak/mangud/partorg/sonaragastik/style.css index 7abfb14..a5d6004 100644 --- a/rannak/mangud/partorg/sonaragastik/style.css +++ b/rannak/mangud/partorg/sonaragastik/style.css @@ -28,6 +28,20 @@ button:disabled{ /* Modal Stuff */ +.avatar { + border-radius: 20px; + width: 100% !important; + width: 100% !important; +} + +.modalHeaderWrapper{ + text-align: center; + margin: 0 !important; + width: 100% !important; +} + + + .closeModalButton { border-radius: 50px; diff --git a/rannak/mangud/perenaine/memori/img/avatar.png b/rannak/mangud/perenaine/memori/img/avatar.png new file mode 100644 index 0000000..60987d3 Binary files /dev/null and b/rannak/mangud/perenaine/memori/img/avatar.png differ diff --git a/rannak/mangud/perenaine/memori/index.html b/rannak/mangud/perenaine/memori/index.html index 240a48e..c8fd288 100644 --- a/rannak/mangud/perenaine/memori/index.html +++ b/rannak/mangud/perenaine/memori/index.html @@ -32,10 +32,10 @@
- - +
+ +
+ avatar
diff --git a/rannak/mangud/perenaine/memori/style.css b/rannak/mangud/perenaine/memori/style.css index aed2515..6a29459 100644 --- a/rannak/mangud/perenaine/memori/style.css +++ b/rannak/mangud/perenaine/memori/style.css @@ -33,6 +33,18 @@ button:disabled{ /* Modal Stuff */ +.avatar { + border-radius: 20px; + width: 100% !important; +} + +.modalHeaderWrapper{ + text-align: center; + margin: 0 !important; + width: 100% !important; +} + + .closeModalButton { border-radius: 50px; diff --git a/rannak/mangud/perenaine/ristsona/index.html b/rannak/mangud/perenaine/ristsona/index.html index 5e106c7..e4de94f 100644 --- a/rannak/mangud/perenaine/ristsona/index.html +++ b/rannak/mangud/perenaine/ristsona/index.html @@ -58,10 +58,10 @@
- - +
+ +
+ avatar
diff --git a/rannak/mangud/perenaine/ristsona/pildid/avatar.png b/rannak/mangud/perenaine/ristsona/pildid/avatar.png new file mode 100644 index 0000000..60987d3 Binary files /dev/null and b/rannak/mangud/perenaine/ristsona/pildid/avatar.png differ diff --git a/rannak/mangud/perenaine/ristsona/style.css b/rannak/mangud/perenaine/ristsona/style.css index b37fc5d..147df2f 100644 --- a/rannak/mangud/perenaine/ristsona/style.css +++ b/rannak/mangud/perenaine/ristsona/style.css @@ -39,6 +39,17 @@ button:disabled{ /* Modal Stuff */ +.avatar { + border-radius: 20px; + width: 100% !important; +} + +.modalHeaderWrapper{ + text-align: center; + margin: 0 !important; + width: 100% !important; +} + .closeModalButton { diff --git a/rannak/mangud/uliopilane/ajatelg/index.html b/rannak/mangud/uliopilane/ajatelg/index.html index 54e958d..d4bd1c3 100644 --- a/rannak/mangud/uliopilane/ajatelg/index.html +++ b/rannak/mangud/uliopilane/ajatelg/index.html @@ -38,10 +38,10 @@
- - +
+ +
+ avatar
diff --git a/rannak/mangud/uliopilane/ajatelg/pildid/avatar.png b/rannak/mangud/uliopilane/ajatelg/pildid/avatar.png new file mode 100644 index 0000000..dd044fd Binary files /dev/null and b/rannak/mangud/uliopilane/ajatelg/pildid/avatar.png differ diff --git a/rannak/mangud/uliopilane/ajatelg/styles.css b/rannak/mangud/uliopilane/ajatelg/styles.css index 2585bc4..56f9ca6 100644 --- a/rannak/mangud/uliopilane/ajatelg/styles.css +++ b/rannak/mangud/uliopilane/ajatelg/styles.css @@ -39,6 +39,19 @@ button:disabled{ /* Modal Stuff */ +.avatar { + border-radius: 20px; + width: 100% !important; +} + +.modalHeaderWrapper{ + text-align: center; + margin: 0 !important; + width: 100% !important; +} + + + .closeModalButton { border-radius: 50px; } diff --git a/rannak/mangud/uliopilane/tSark/img/avatar.png b/rannak/mangud/uliopilane/tSark/img/avatar.png new file mode 100644 index 0000000..dd044fd Binary files /dev/null and b/rannak/mangud/uliopilane/tSark/img/avatar.png differ diff --git a/rannak/mangud/uliopilane/tSark/index.html b/rannak/mangud/uliopilane/tSark/index.html index 9fcbef6..789ad8f 100644 --- a/rannak/mangud/uliopilane/tSark/index.html +++ b/rannak/mangud/uliopilane/tSark/index.html @@ -27,10 +27,10 @@
- - +
+ +
+ avatar
diff --git a/rannak/mangud/uliopilane/tSark/style.css b/rannak/mangud/uliopilane/tSark/style.css index ff8a478..9696ffc 100644 --- a/rannak/mangud/uliopilane/tSark/style.css +++ b/rannak/mangud/uliopilane/tSark/style.css @@ -61,6 +61,19 @@ button:disabled{ /* Modal Stuff */ + +.avatar { + border-radius: 20px; + width: 100% !important; +} + +.modalHeaderWrapper{ + text-align: center; + margin: 0 !important; + width: 100% !important; +} + + .modal{ color: black !important; } diff --git a/rannak/mangud/uliopilane/utlused/css/utlused.css b/rannak/mangud/uliopilane/utlused/css/utlused.css deleted file mode 100644 index f4a3728..0000000 --- a/rannak/mangud/uliopilane/utlused/css/utlused.css +++ /dev/null @@ -1,159 +0,0 @@ -/* Mäng ise */ -@import url('https://fonts.googleapis.com/css?family=Montserrat'); - -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - font-family: 'Montserrat', sans-serif; - background-color: #eee; - color: #111; - touch-action: none; -} - -.moveOn{ - display: inline-block; - border: none; - padding: 6px 12px; - margin-left: 11%; - font-size: 1rem; - font-weight: normal; - text-align: center; - cursor: pointer; - border-radius: 4px; - background-color: #4BB543; - color: white; -} - -button:disabled{ - opacity: 0.5; - cursor: not-allowed; -} - - -/* Modal Stuff */ - - -.closeModalButton { - border-radius: 50px; -} - -.modalButton{ - position: absolute; - top: 0; - right: 0; - padding: 25px !important; - 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; - margin: 3% !important; - font-size: 1.05rem !important; - max-width: 10% !important; -} - -.modalButton:hover{ - background-color: rgba(0,136,169,0.8) !important; -} - - - - -/* later added stuff here */ - -.wrapper { - border-bottom: 3px solid gray; - position: relative; - display: flex; - flex-wrap: wrap; -} - -.empty { - width: 7rem; - height: 7rem; -} - -.drag { - position: absolute; - width: 7rem; - height: 7rem; - z-index: 1; -} - -.active { - background-color: grey !important; -} - -.done { - background-color: green !important; -} - -/* end of later added stuff */ - - -.draggable-elements { - display: flex; - justify-content: center; - margin: 2rem; -} -.draggable { - height: 5rem; - width: 5rem; - display: flex; - align-items: center; - justify-content: center; - font-size: 1.5rem; - margin: 0rem 1rem; - cursor: move; - transition: opacity 0.2s; -} - -.droppable { - height: 10rem; - width: 25rem; - margin: 1rem auto; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - text-align: center; - font-size: 8rem; - font-weight: bold; - background-color: #fff; - border: 3px dashed #111; - transition: border-width 0.2s, transform 0.2s, background-color 0.4s; -} -.droppable span { - font-size: 1.25rem; - pointer-events: none; /* The element is never the target of pointer events */ -} - -/* Drag and Drop Related Styling */ - -.droppable.droppable-hover { - /* background-color: #bee3f0; */ - border-width: 5px; - transform: scale(1.1); -} -.droppable.dropped { - border-style: solid; - color: #fff; -} -.droppable.dropped span { - font-weight: bolder; - margin-top: 0.5rem; -} -.droppable.dropped i { - pointer-events: none; -} -.draggable.dragged { - user-select: none; - cursor: default; -} -.draggable.dragged:hover { - opacity: 0.1; -} diff --git a/rannak/mangud/uliopilane/utlused/index.html b/rannak/mangud/uliopilane/utlused/index.html index c45ee26..3619059 100644 --- a/rannak/mangud/uliopilane/utlused/index.html +++ b/rannak/mangud/uliopilane/utlused/index.html @@ -5,7 +5,7 @@ Kuulsad Ütlused - + @@ -30,10 +30,10 @@
- - +
+ +
+ avatar
@@ -115,7 +115,7 @@
- + diff --git a/rannak/mangud/uliopilane/utlused/js/main.js b/rannak/mangud/uliopilane/utlused/js/main.js deleted file mode 100644 index 07b8d27..0000000 --- a/rannak/mangud/uliopilane/utlused/js/main.js +++ /dev/null @@ -1,217 +0,0 @@ -document.addEventListener('DOMContentLoaded', () => { - let btn = document.querySelector('.modalButton'); - btn.click(); -}); - - - -// Detecting part -const isMobile = function(){ - const match = window.matchMedia('(pointer:coarse)'); - return (match && match.matches) -} -console.log(`${isMobile() ? 'mobile' : 'not mobile'}`); - -// Global Variables for Mobile -let originalX = 0; -let originalY = 0; -let counter = 0; -let itemAppend = null; - -if (`${isMobile() ? 'mobile' : 'not mobile'}` == 'not mobile') { - - const draggableElements = document.querySelectorAll(".draggable"); - const droppableElements = document.querySelectorAll(".droppable"); - - draggableElements.forEach(elem => { - elem.addEventListener("dragstart", dragStart); // Fires as soon as the user starts dragging an item - This is where we can define the drag data - // elem.addEventListener("drag", drag); // Fires when a dragged item (element or text selection) is dragged - // elem.addEventListener("dragend", dragEnd); // Fires when a drag operation ends (such as releasing a mouse button or hitting the Esc key) - After the dragend event, the drag and drop operation is complete - }); - - droppableElements.forEach(elem => { - elem.addEventListener("dragenter", dragEnter); // Fires when a dragged item enters a valid drop target - elem.addEventListener("dragover", dragOver); // Fires when a dragged item is being dragged over a valid drop target, repeatedly while the draggable item is within the drop zone - elem.addEventListener("dragleave", dragLeave); // Fires when a dragged item leaves a valid drop target - elem.addEventListener("drop", drop); // Fires when an item is dropped on a valid drop target - }); - - // Drag and Drop Functions // - - //Events fired on the drag target - function dragStart(event) { - event.dataTransfer.setData("text", event.target.id); // or "text/plain" but just "text" would also be fine since we are not setting any other type/format for data value - } - - //Events fired on the drop target - function dragEnter(event) { - if(!event.target.classList.contains("dropped")) { - event.target.classList.add("droppable-hover"); - } - } - - function dragOver(event) { - if(!event.target.classList.contains("dropped")) { - event.preventDefault(); // Prevent default to allow drop - } - } - - function dragLeave(event) { - if(!event.target.classList.contains("dropped")) { - event.target.classList.remove("droppable-hover"); - } - } - - - function drop(event) { - - event.preventDefault(); // This is in order to prevent the browser default handling of the data - event.target.classList.remove("droppable-hover"); - const draggableElementData = event.dataTransfer.getData("text"); // Get the dragged data. This method will return any data that was set to the same type in the setData() method - const droppableElementData = event.target.getAttribute("data-draggable-id"); - const isCorrectMatching = draggableElementData === droppableElementData; - - if(isCorrectMatching) { - const draggableElement = document.getElementById(draggableElementData); - event.target.classList.add("dropped"); - // event.target.style.backgroundColor = draggableElement.style.color; // This approach works only for inline styles. A more general approach would be the following: - event.target.style.backgroundColor = window.getComputedStyle(draggableElement).color; - draggableElement.classList.add("dragged"); - draggableElement.setAttribute("draggable", "false"); - event.target.insertAdjacentHTML("afterbegin", ``); - - counter++; - console.log("counter:", counter) - if (counter == 6){ - const btn = document.querySelector(".moveOn"); - btn.disabled = false; - localStorage.setItem("roll", "Üliõpilase"); - btn.onclick = () => location.href = "../../../endPage"; - } - } // If isCorrectMatchingEnd - } // Drop Func End - -} // If Desktop End - - -//If mobile - -else{ - - const empty = Array.from(document.querySelectorAll('.empty')); - const drags = document.querySelectorAll('.drag'); - - drags.forEach(drag => { - drag.addEventListener('pointerdown', pointerDown); - drag.addEventListener('pointermove', pointerMove); - drag.addEventListener('pointerup', pointerUp); - }) - - - // Function when start touch - function pointerDown(e){ - e.preventDefault(); - - let remVal = parseInt(getComputedStyle(document.documentElement).fontSize); - originalTop = e.target.getBoundingClientRect().top - 2*remVal; - originalLeft = e.target.getBoundingClientRect().left - remVal; - } - - - // Function while movin - function pointerMove(e){ - e.preventDefault(); - - //Scrolling Part - if (window.innerHeight - e.screenY < 600){ - window.scrollBy({ - top: 100, // could be negative value - behavior: 'smooth' - }); - } - - else if (e.clientY < 200){ - window.scrollBy({ - top: -100, // could be negative value - behavior: 'smooth' - }); - } - - nimi = e.target; - if (!nimi.classList.contains('done')){ - - nimi.style.left = `${e.pageX - nimi.clientHeight/2}px`; - nimi.style.top = `${e.pageY - nimi.clientHeight/2}px`; - - empty.map(item => { - if ( - nimi.getBoundingClientRect().top + nimi.offsetWidth / 2 < item.getBoundingClientRect().bottom && - nimi.getBoundingClientRect().right - nimi.offsetWidth / 2 > item.getBoundingClientRect().left && - nimi.getBoundingClientRect().bottom - nimi.offsetWidth / 2 > item.getBoundingClientRect().top && - nimi.getBoundingClientRect().left + nimi.offsetWidth / 2 < item.getBoundingClientRect().right - ) { - item.classList.add('active'); - itemAppend = item; - } - else { - item.classList.remove('active'); - } - }); //empty.map loop end - } - - // if currentDrag has class done - else{ - console.log("has class done") - } - - } - - - // Function if touch is stopped - function pointerUp(e){ - e.preventDefault(); - - if (itemAppend != null){ - - if (itemAppend.classList.contains('active') && itemAppend.dataset.draggableId == this.id) { - this.classList.add('done') - this.parentElement.classList.add('done') - itemAppend.classList.add('done'); - itemAppend.classList.remove('active'); - - this.style.top = `${originalTop}px`; - this.style.left = `${originalLeft}px`; - //this.innerHTML=""; - - counter++; - console.log("counter:", counter) - if (counter == 6){ - const btn = document.querySelector(".moveOn"); - btn.disabled = false; - btn.onclick = () => location.href = "#"; - } - - } - else { - - this.style.top = `${originalTop}px`; - this.style.left = `${originalLeft}px`; - this.parentElement.appendChild(this); - itemAppend.classList.remove('active'); - } - } - else { - this.style.top = `${originalTop}px`; - this.style.left = `${originalLeft}px`; - console.log("FakAp"); - } // PointerUp Func End - - window.scroll({ - top: 0, - left: 0, - behavior: 'smooth' - }); - } - - -} // If mobile End diff --git a/rannak/mangud/uliopilane/utlused/main.js b/rannak/mangud/uliopilane/utlused/main.js new file mode 100644 index 0000000..07b8d27 --- /dev/null +++ b/rannak/mangud/uliopilane/utlused/main.js @@ -0,0 +1,217 @@ +document.addEventListener('DOMContentLoaded', () => { + let btn = document.querySelector('.modalButton'); + btn.click(); +}); + + + +// Detecting part +const isMobile = function(){ + const match = window.matchMedia('(pointer:coarse)'); + return (match && match.matches) +} +console.log(`${isMobile() ? 'mobile' : 'not mobile'}`); + +// Global Variables for Mobile +let originalX = 0; +let originalY = 0; +let counter = 0; +let itemAppend = null; + +if (`${isMobile() ? 'mobile' : 'not mobile'}` == 'not mobile') { + + const draggableElements = document.querySelectorAll(".draggable"); + const droppableElements = document.querySelectorAll(".droppable"); + + draggableElements.forEach(elem => { + elem.addEventListener("dragstart", dragStart); // Fires as soon as the user starts dragging an item - This is where we can define the drag data + // elem.addEventListener("drag", drag); // Fires when a dragged item (element or text selection) is dragged + // elem.addEventListener("dragend", dragEnd); // Fires when a drag operation ends (such as releasing a mouse button or hitting the Esc key) - After the dragend event, the drag and drop operation is complete + }); + + droppableElements.forEach(elem => { + elem.addEventListener("dragenter", dragEnter); // Fires when a dragged item enters a valid drop target + elem.addEventListener("dragover", dragOver); // Fires when a dragged item is being dragged over a valid drop target, repeatedly while the draggable item is within the drop zone + elem.addEventListener("dragleave", dragLeave); // Fires when a dragged item leaves a valid drop target + elem.addEventListener("drop", drop); // Fires when an item is dropped on a valid drop target + }); + + // Drag and Drop Functions // + + //Events fired on the drag target + function dragStart(event) { + event.dataTransfer.setData("text", event.target.id); // or "text/plain" but just "text" would also be fine since we are not setting any other type/format for data value + } + + //Events fired on the drop target + function dragEnter(event) { + if(!event.target.classList.contains("dropped")) { + event.target.classList.add("droppable-hover"); + } + } + + function dragOver(event) { + if(!event.target.classList.contains("dropped")) { + event.preventDefault(); // Prevent default to allow drop + } + } + + function dragLeave(event) { + if(!event.target.classList.contains("dropped")) { + event.target.classList.remove("droppable-hover"); + } + } + + + function drop(event) { + + event.preventDefault(); // This is in order to prevent the browser default handling of the data + event.target.classList.remove("droppable-hover"); + const draggableElementData = event.dataTransfer.getData("text"); // Get the dragged data. This method will return any data that was set to the same type in the setData() method + const droppableElementData = event.target.getAttribute("data-draggable-id"); + const isCorrectMatching = draggableElementData === droppableElementData; + + if(isCorrectMatching) { + const draggableElement = document.getElementById(draggableElementData); + event.target.classList.add("dropped"); + // event.target.style.backgroundColor = draggableElement.style.color; // This approach works only for inline styles. A more general approach would be the following: + event.target.style.backgroundColor = window.getComputedStyle(draggableElement).color; + draggableElement.classList.add("dragged"); + draggableElement.setAttribute("draggable", "false"); + event.target.insertAdjacentHTML("afterbegin", ``); + + counter++; + console.log("counter:", counter) + if (counter == 6){ + const btn = document.querySelector(".moveOn"); + btn.disabled = false; + localStorage.setItem("roll", "Üliõpilase"); + btn.onclick = () => location.href = "../../../endPage"; + } + } // If isCorrectMatchingEnd + } // Drop Func End + +} // If Desktop End + + +//If mobile + +else{ + + const empty = Array.from(document.querySelectorAll('.empty')); + const drags = document.querySelectorAll('.drag'); + + drags.forEach(drag => { + drag.addEventListener('pointerdown', pointerDown); + drag.addEventListener('pointermove', pointerMove); + drag.addEventListener('pointerup', pointerUp); + }) + + + // Function when start touch + function pointerDown(e){ + e.preventDefault(); + + let remVal = parseInt(getComputedStyle(document.documentElement).fontSize); + originalTop = e.target.getBoundingClientRect().top - 2*remVal; + originalLeft = e.target.getBoundingClientRect().left - remVal; + } + + + // Function while movin + function pointerMove(e){ + e.preventDefault(); + + //Scrolling Part + if (window.innerHeight - e.screenY < 600){ + window.scrollBy({ + top: 100, // could be negative value + behavior: 'smooth' + }); + } + + else if (e.clientY < 200){ + window.scrollBy({ + top: -100, // could be negative value + behavior: 'smooth' + }); + } + + nimi = e.target; + if (!nimi.classList.contains('done')){ + + nimi.style.left = `${e.pageX - nimi.clientHeight/2}px`; + nimi.style.top = `${e.pageY - nimi.clientHeight/2}px`; + + empty.map(item => { + if ( + nimi.getBoundingClientRect().top + nimi.offsetWidth / 2 < item.getBoundingClientRect().bottom && + nimi.getBoundingClientRect().right - nimi.offsetWidth / 2 > item.getBoundingClientRect().left && + nimi.getBoundingClientRect().bottom - nimi.offsetWidth / 2 > item.getBoundingClientRect().top && + nimi.getBoundingClientRect().left + nimi.offsetWidth / 2 < item.getBoundingClientRect().right + ) { + item.classList.add('active'); + itemAppend = item; + } + else { + item.classList.remove('active'); + } + }); //empty.map loop end + } + + // if currentDrag has class done + else{ + console.log("has class done") + } + + } + + + // Function if touch is stopped + function pointerUp(e){ + e.preventDefault(); + + if (itemAppend != null){ + + if (itemAppend.classList.contains('active') && itemAppend.dataset.draggableId == this.id) { + this.classList.add('done') + this.parentElement.classList.add('done') + itemAppend.classList.add('done'); + itemAppend.classList.remove('active'); + + this.style.top = `${originalTop}px`; + this.style.left = `${originalLeft}px`; + //this.innerHTML=""; + + counter++; + console.log("counter:", counter) + if (counter == 6){ + const btn = document.querySelector(".moveOn"); + btn.disabled = false; + btn.onclick = () => location.href = "#"; + } + + } + else { + + this.style.top = `${originalTop}px`; + this.style.left = `${originalLeft}px`; + this.parentElement.appendChild(this); + itemAppend.classList.remove('active'); + } + } + else { + this.style.top = `${originalTop}px`; + this.style.left = `${originalLeft}px`; + console.log("FakAp"); + } // PointerUp Func End + + window.scroll({ + top: 0, + left: 0, + behavior: 'smooth' + }); + } + + +} // If mobile End diff --git a/rannak/mangud/uliopilane/utlused/pildid/avatar.png b/rannak/mangud/uliopilane/utlused/pildid/avatar.png new file mode 100644 index 0000000..dd044fd Binary files /dev/null and b/rannak/mangud/uliopilane/utlused/pildid/avatar.png differ diff --git a/rannak/mangud/uliopilane/utlused/utlused.css b/rannak/mangud/uliopilane/utlused/utlused.css new file mode 100644 index 0000000..3835300 --- /dev/null +++ b/rannak/mangud/uliopilane/utlused/utlused.css @@ -0,0 +1,169 @@ +/* Mäng ise */ +@import url('https://fonts.googleapis.com/css?family=Montserrat'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Montserrat', sans-serif; + background-color: #eee; + color: #111; + touch-action: none; +} + +.moveOn{ + display: inline-block; + border: none; + padding: 6px 12px; + margin-left: 11%; + font-size: 1rem; + font-weight: normal; + text-align: center; + cursor: pointer; + border-radius: 4px; + background-color: #4BB543; + color: white; +} + +button:disabled{ + opacity: 0.5; + cursor: not-allowed; +} + + +/* Modal Stuff */ +.avatar { + border-radius: 20px; + width: 100% !important; +} + +.modalHeaderWrapper{ + text-align: center; + margin: 0 !important; + width: 100% !important; +} + + +.closeModalButton { + border-radius: 50px; +} + +.modalButton{ + position: absolute; + top: 0; + right: 0; + padding: 10px !important; + 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; + margin: 2% !important; + font-size: 1.05rem !important; + max-width: 10% !important; +} + +.modalButton:hover{ + background-color: rgba(0,136,169,0.8) !important; +} + + + + +/* later added stuff here */ + +.wrapper { + border-bottom: 3px solid gray; + position: relative; + display: flex; + flex-wrap: wrap; +} + +.empty { + width: 7rem; + height: 7rem; +} + +.drag { + position: absolute; + width: 7rem; + height: 7rem; + z-index: 1; +} + +.active { + background-color: grey !important; +} + +.done { + background-color: green !important; +} + +/* end of later added stuff */ + + +.draggable-elements { + display: flex; + justify-content: center; + margin: 2rem; +} +.draggable { + height: 5rem; + width: 5rem; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; + margin: 0rem 1rem; + cursor: move; + transition: opacity 0.2s; +} + +.droppable { + height: 10rem; + width: 25rem; + margin: 1rem auto; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + text-align: center; + font-size: 8rem; + font-weight: bold; + background-color: #fff; + border: 3px dashed #111; + transition: border-width 0.2s, transform 0.2s, background-color 0.4s; +} +.droppable span { + font-size: 1.25rem; + pointer-events: none; /* The element is never the target of pointer events */ +} + +/* Drag and Drop Related Styling */ + +.droppable.droppable-hover { + /* background-color: #bee3f0; */ + border-width: 5px; + transform: scale(1.1); +} +.droppable.dropped { + border-style: solid; + color: #fff; +} +.droppable.dropped span { + font-weight: bolder; + margin-top: 0.5rem; +} +.droppable.dropped i { + pointer-events: none; +} +.draggable.dragged { + user-select: none; + cursor: default; +} +.draggable.dragged:hover { + opacity: 0.1; +} -- cgit v1.2.3