diff options
Diffstat (limited to 'rannak/algus/utlused')
| -rw-r--r-- | rannak/algus/utlused/css/utlused.css | 110 | ||||
| -rw-r--r-- | rannak/algus/utlused/index.html | 80 | ||||
| -rw-r--r-- | rannak/algus/utlused/js/main.js | 210 |
3 files changed, 400 insertions, 0 deletions
diff --git a/rannak/algus/utlused/css/utlused.css b/rannak/algus/utlused/css/utlused.css new file mode 100644 index 0000000..4f63f54 --- /dev/null +++ b/rannak/algus/utlused/css/utlused.css @@ -0,0 +1,110 @@ +/* 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; +} + +/* later added stuff here */ + +.wrapper { + outline: 1px solid gold; + 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/algus/utlused/index.html b/rannak/algus/utlused/index.html new file mode 100644 index 0000000..ffdd8b4 --- /dev/null +++ b/rannak/algus/utlused/index.html @@ -0,0 +1,80 @@ +<!DOCTYPE html> +<html lang="ru"> + +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Kuulsad Ütlused</title> + <link rel="stylesheet" href="css/utlused.css"> + + <link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet"> + <link rel="stylesheet" type=text/css href="utlused.css"> + <!-- Bootstrap - CSS only --> + <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"> + +</head> +<body class="bg-dark"> + <div class="wrapper container draggable-elements align-items-center"> + + <div class="empty "> + <div class="drag draggable" draggable="true" style="color: #ff6384;" id="valk">Heinz Valk</div> + </div> + + <div class="empty "> + <div class="drag draggable" draggable="true" style="color: #36a2eb;" id="savisaar"> Edgar Savisaar </div> + </div> + + + <div class="empty "> + <div class="drag draggable" draggable="true" style="color: #ffce56;" id="leemet"> Jüri Leesment </div> + </div> + + <div class="empty "> + <div class="drag draggable" draggable="true" style="color: #69359c;" id="runnel"> Hando Runnel </div> + </div> + + + <div class="empty "> + <div class="drag draggable" draggable="true" style="color: #377f44;" id="interrinne"> Interrinde toeatjad </div> + </div> + + <div class="empty "> + <div class="drag draggable" draggable="true" style="color: #141414;" id="uksveel"> Üks veel? </div> + </div> + + + <div class="row"> + <div> + <a href="../../rolliValik/index.html" class="btn-success btn disabled" role="button" aria-disabled="true">Liigu Edasi</a> + </div> + </div> <!-- Row End --> + + + + </div> + + <div class="container"> + + <div class="row"> + <div class="droppable col-12 col-sm-6 empty" data-draggable-id="leemet"><span>"Eestlane olen ja eestlaseks jään"</span></div> + <div class="droppable col-12 col-sm-6 empty" data-draggable-id="valk"><span>"Ükskord me võidame niikuinii" (Eestimaa Laul 11.09.1988)</span></div> + </div> + + <div class="row"> + <div class="droppable col-12 col-sm-6 empty" data-draggable-id="savisaar"><span>"Toompead rünnatakse! Ma kordan - Toompead rünnatakse!"</span></div> + <div class="droppable col-12 col-sm-6 empty" data-draggable-id="runnel"><span>"Maa tuleb täita lastega" (ans. Justamendi laul 1987)</span></div> + </div> + + <div class="row"> + <div class="droppable col-12 col-sm-6 empty" data-draggable-id="interrinne"><span>"Арнольд Рюйтель, выходи один!" 15.05.1990"</span></div> + <div class="droppable col-12 col-sm-6 empty" data-draggable-id="uksveel"><span>"Üks ütlus tuleks ehk veel siia?"</span></div> + </div> + + </div> + + + </div> + + <script src="js/main.js"></script> +</body> +</html> diff --git a/rannak/algus/utlused/js/main.js b/rannak/algus/utlused/js/main.js new file mode 100644 index 0000000..a67b6bd --- /dev/null +++ b/rannak/algus/utlused/js/main.js @@ -0,0 +1,210 @@ +// 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", `<i class="fas fa-${draggableElementData}"></i>`); + + counter++; + console.log("counter:", counter) + if (counter == 6){ + const button = document.querySelector(".btn"); + button.classList.remove('disabled'); + button.setAttribute('aria-disabled', false); + console.log("done"); + } + } // 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 button = document.querySelector(".btn"); + button.parentElement.classList.remove('btn'); + button.setAttribute('aria-disabled', false); + } + + } + 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 |