diff options
Diffstat (limited to 'rannak/algus/utlused')
| -rw-r--r-- | rannak/algus/utlused/css/utlused.css | 128 | ||||
| -rw-r--r-- | rannak/algus/utlused/index.html | 80 | ||||
| -rw-r--r-- | rannak/algus/utlused/js/main.js | 209 |
3 files changed, 0 insertions, 417 deletions
diff --git a/rannak/algus/utlused/css/utlused.css b/rannak/algus/utlused/css/utlused.css deleted file mode 100644 index e7c5277..0000000 --- a/rannak/algus/utlused/css/utlused.css +++ /dev/null @@ -1,128 +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-botton: 0; - font-size: 1rem; - font-weight: normal; - text-align: center; - cursor: pointer; - border-radius: 4px; - background-color: #4BB543; - color: white; -} - -button:disabled{ - opacity: 0.5; -} - -/* 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 deleted file mode 100644 index f3e80f9..0000000 --- a/rannak/algus/utlused/index.html +++ /dev/null @@ -1,80 +0,0 @@ -<!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> - <button class="moveOn" disabled>Liigu Edasi</button> - </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 deleted file mode 100644 index 4262d41..0000000 --- a/rannak/algus/utlused/js/main.js +++ /dev/null @@ -1,209 +0,0 @@ -// 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 btn = document.querySelector(".moveOn"); - btn.disabled = false; - btn.onclick = () => location.href = "../../rolliValik"; - } - } // 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 = "../../rolliValik"; - } - - } - 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 |