From 40d015a15bee7d0a51c28e20c29ff7045419b8f5 Mon Sep 17 00:00:00 2001 From: Rasmus Luha Date: Sat, 17 Sep 2022 01:02:22 +0300 Subject: mangud showcase --- rannak/mangud/index.html | 73 ++++++++++++ rannak/mangud/perenaine/memori/img/alko.svg | 1 + rannak/mangud/perenaine/memori/img/butter.svg | 1 + rannak/mangud/perenaine/memori/img/jahu.svg | 85 +++++++++++++ rannak/mangud/perenaine/memori/img/pasta.svg | 164 ++++++++++++++++++++++++++ rannak/mangud/perenaine/memori/img/pesu.svg | 46 ++++++++ rannak/mangud/perenaine/memori/img/riis.svg | 14 +++ rannak/mangud/perenaine/memori/img/sokid.svg | 138 ++++++++++++++++++++++ rannak/mangud/perenaine/memori/img/sool.svg | 1 + rannak/mangud/perenaine/memori/img/suhkur.svg | 47 ++++++++ rannak/mangud/perenaine/memori/img/taga.svg | 62 ++++++++++ rannak/mangud/perenaine/memori/img/tikud.svg | 76 ++++++++++++ rannak/mangud/perenaine/memori/index.html | 142 ++++++++++++++++++++++ rannak/mangud/perenaine/memori/script.js | 76 ++++++++++++ rannak/mangud/perenaine/memori/style.css | 75 ++++++++++++ rannak/mangud/perenaine/memory/img/alko.svg | 1 - rannak/mangud/perenaine/memory/img/butter.svg | 1 - rannak/mangud/perenaine/memory/img/jahu.svg | 85 ------------- rannak/mangud/perenaine/memory/img/pasta.svg | 164 -------------------------- rannak/mangud/perenaine/memory/img/pesu.svg | 46 -------- rannak/mangud/perenaine/memory/img/riis.svg | 14 --- rannak/mangud/perenaine/memory/img/sokid.svg | 138 ---------------------- rannak/mangud/perenaine/memory/img/sool.svg | 1 - rannak/mangud/perenaine/memory/img/suhkur.svg | 47 -------- rannak/mangud/perenaine/memory/img/taga.svg | 62 ---------- rannak/mangud/perenaine/memory/img/tikud.svg | 76 ------------ rannak/mangud/perenaine/memory/index.html | 142 ---------------------- rannak/mangud/perenaine/memory/script.js | 76 ------------ rannak/mangud/perenaine/memory/style.css | 75 ------------ rannak/mangud/style.css | 22 ++++ 30 files changed, 1023 insertions(+), 928 deletions(-) create mode 100644 rannak/mangud/index.html create mode 100644 rannak/mangud/perenaine/memori/img/alko.svg create mode 100644 rannak/mangud/perenaine/memori/img/butter.svg create mode 100644 rannak/mangud/perenaine/memori/img/jahu.svg create mode 100644 rannak/mangud/perenaine/memori/img/pasta.svg create mode 100644 rannak/mangud/perenaine/memori/img/pesu.svg create mode 100644 rannak/mangud/perenaine/memori/img/riis.svg create mode 100644 rannak/mangud/perenaine/memori/img/sokid.svg create mode 100644 rannak/mangud/perenaine/memori/img/sool.svg create mode 100644 rannak/mangud/perenaine/memori/img/suhkur.svg create mode 100644 rannak/mangud/perenaine/memori/img/taga.svg create mode 100644 rannak/mangud/perenaine/memori/img/tikud.svg create mode 100644 rannak/mangud/perenaine/memori/index.html create mode 100644 rannak/mangud/perenaine/memori/script.js create mode 100644 rannak/mangud/perenaine/memori/style.css delete mode 100644 rannak/mangud/perenaine/memory/img/alko.svg delete mode 100644 rannak/mangud/perenaine/memory/img/butter.svg delete mode 100644 rannak/mangud/perenaine/memory/img/jahu.svg delete mode 100644 rannak/mangud/perenaine/memory/img/pasta.svg delete mode 100644 rannak/mangud/perenaine/memory/img/pesu.svg delete mode 100644 rannak/mangud/perenaine/memory/img/riis.svg delete mode 100644 rannak/mangud/perenaine/memory/img/sokid.svg delete mode 100644 rannak/mangud/perenaine/memory/img/sool.svg delete mode 100644 rannak/mangud/perenaine/memory/img/suhkur.svg delete mode 100644 rannak/mangud/perenaine/memory/img/taga.svg delete mode 100644 rannak/mangud/perenaine/memory/img/tikud.svg delete mode 100644 rannak/mangud/perenaine/memory/index.html delete mode 100644 rannak/mangud/perenaine/memory/script.js delete mode 100644 rannak/mangud/perenaine/memory/style.css create mode 100644 rannak/mangud/style.css (limited to 'rannak') diff --git a/rannak/mangud/index.html b/rannak/mangud/index.html new file mode 100644 index 0000000..f2318c6 --- /dev/null +++ b/rannak/mangud/index.html @@ -0,0 +1,73 @@ + + + + + + + Landing Page + + + + +

Mängud

+ +
+ +
+

Kaitseliitlane

+
    +
  1. Kuulsused
    2. +
  2. +
  3. +
+
+ +
+

Perenaine

+
    +
  1. Memori
    2. +
  2. +
  3. +
+
+ +
+

Üliõpilane

+
    +
  1. +
  2. +
  3. +
+
+
+

Partorg

+
    +
  1. +
  2. +
  3. +
+
+ +
+

Ärimees

+
    +
  1. +
  2. +
  3. +
+
+ +
+

Direktor

+
    +
  1. +
  2. +
  3. +
+
+ +
+ + + + diff --git a/rannak/mangud/perenaine/memori/img/alko.svg b/rannak/mangud/perenaine/memori/img/alko.svg new file mode 100644 index 0000000..e7bcc31 --- /dev/null +++ b/rannak/mangud/perenaine/memori/img/alko.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/rannak/mangud/perenaine/memori/img/butter.svg b/rannak/mangud/perenaine/memori/img/butter.svg new file mode 100644 index 0000000..48aeb4c --- /dev/null +++ b/rannak/mangud/perenaine/memori/img/butter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/rannak/mangud/perenaine/memori/img/jahu.svg b/rannak/mangud/perenaine/memori/img/jahu.svg new file mode 100644 index 0000000..3ac729f --- /dev/null +++ b/rannak/mangud/perenaine/memori/img/jahu.svg @@ -0,0 +1,85 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/rannak/mangud/perenaine/memori/img/pasta.svg b/rannak/mangud/perenaine/memori/img/pasta.svg new file mode 100644 index 0000000..d46b576 --- /dev/null +++ b/rannak/mangud/perenaine/memori/img/pasta.svg @@ -0,0 +1,164 @@ + + + + + macaroni + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + OpenClipart + + + Macaroni + 2011-01-20T19:40:03 + A large piece of macaroni style pasta. + https://openclipart.org/detail/105709 + + + AntumDeluge + + + + + food + macaroni + noodle + pasta + + + + + + + + + + + diff --git a/rannak/mangud/perenaine/memori/img/pesu.svg b/rannak/mangud/perenaine/memori/img/pesu.svg new file mode 100644 index 0000000..6d38faa --- /dev/null +++ b/rannak/mangud/perenaine/memori/img/pesu.svg @@ -0,0 +1,46 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/rannak/mangud/perenaine/memori/img/riis.svg b/rannak/mangud/perenaine/memori/img/riis.svg new file mode 100644 index 0000000..8376e61 --- /dev/null +++ b/rannak/mangud/perenaine/memori/img/riis.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/rannak/mangud/perenaine/memori/img/sokid.svg b/rannak/mangud/perenaine/memori/img/sokid.svg new file mode 100644 index 0000000..4d3eb3d --- /dev/null +++ b/rannak/mangud/perenaine/memori/img/sokid.svg @@ -0,0 +1,138 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/rannak/mangud/perenaine/memori/img/sool.svg b/rannak/mangud/perenaine/memori/img/sool.svg new file mode 100644 index 0000000..524cda1 --- /dev/null +++ b/rannak/mangud/perenaine/memori/img/sool.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/rannak/mangud/perenaine/memori/img/suhkur.svg b/rannak/mangud/perenaine/memori/img/suhkur.svg new file mode 100644 index 0000000..a82c743 --- /dev/null +++ b/rannak/mangud/perenaine/memori/img/suhkur.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/rannak/mangud/perenaine/memori/img/taga.svg b/rannak/mangud/perenaine/memori/img/taga.svg new file mode 100644 index 0000000..a81a7dc --- /dev/null +++ b/rannak/mangud/perenaine/memori/img/taga.svg @@ -0,0 +1,62 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/rannak/mangud/perenaine/memori/img/tikud.svg b/rannak/mangud/perenaine/memori/img/tikud.svg new file mode 100644 index 0000000..12be82c --- /dev/null +++ b/rannak/mangud/perenaine/memori/img/tikud.svg @@ -0,0 +1,76 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/rannak/mangud/perenaine/memori/index.html b/rannak/mangud/perenaine/memori/index.html new file mode 100644 index 0000000..c19c7d5 --- /dev/null +++ b/rannak/mangud/perenaine/memori/index.html @@ -0,0 +1,142 @@ + + + + + + Memori + + + + + + + +
+
+

Memori

+

Mängu läbimiseks leia üles kõik kümme paari

+
+
+ +
+ +
+ Butter + taga +
+ +
+ Butter + taga +
+ + +
+ tikud + taga +
+ +
+ Tikud + taga +
+ + +
+ Alko + taga +
+ +
+ Alko + taga +
+ + +
+ Jahu + taga +
+ +
+ Jahu + taga +
+ + +
+ Pasta + taga +
+ +
+ Pasta + taga +
+ + +
+ Pesu + taga +
+ +
+ Pesu + taga +
+ + +
+ Riis + taga +
+ +
+ Riis + taga +
+ + +
+ Sokid + taga +
+ +
+ sokid + taga +
+ + +
+ Sool + taga +
+ +
+ Sool + taga +
+ + +
+ suhkur + taga +
+ +
+ suhkur + taga +
+ +
+ +
+
+ Liigu Edasi +
+
+ + + + diff --git a/rannak/mangud/perenaine/memori/script.js b/rannak/mangud/perenaine/memori/script.js new file mode 100644 index 0000000..1a06fd9 --- /dev/null +++ b/rannak/mangud/perenaine/memori/script.js @@ -0,0 +1,76 @@ +const cards = document.querySelectorAll('.memory-card'); + +let hasFlippedCard = false; +let lockBoard = false; +let firstCard, secondCard; +let counter = 0; + +function flipCard() { + if (lockBoard) return; + if (this === firstCard) return; + + this.classList.add('flip'); + + if (!hasFlippedCard) { + hasFlippedCard = true; + firstCard = this; + + return; + } + + secondCard = this; + checkForMatch(); +} + +function checkForMatch() { + let isMatch = firstCard.dataset.framework === secondCard.dataset.framework; + + isMatch ? disableCards() : unflipCards(); +} + +function disableCards() { + firstCard.removeEventListener('click', flipCard); + secondCard.removeEventListener('click', flipCard); + counter++; + + console.log(counter) + if (counter >= 10) moveOnEnable(); + resetBoard(); +} + +function unflipCards() { + lockBoard = true; + + setTimeout(() => { + firstCard.classList.remove('flip'); + secondCard.classList.remove('flip'); + + resetBoard(); + }, 1500); +} + +function resetBoard() { + [hasFlippedCard, lockBoard] = [false, false]; + [firstCard, secondCard] = [null, null]; +} + +(function shuffle() { + cards.forEach(card => { + let randomPos = Math.floor(Math.random() * 12); + card.style.order = randomPos; + }); +})(); + +cards.forEach(card => card.addEventListener('click', flipCard)); + + +// Button func + +function moveOnEnable(){ + const button = document.querySelector(".btn"); + button.classList.remove('disabled'); + button.setAttribute('aria-disabled', false); + console.log("done"); + + counter = 0; +} diff --git a/rannak/mangud/perenaine/memori/style.css b/rannak/mangud/perenaine/memori/style.css new file mode 100644 index 0000000..600f91d --- /dev/null +++ b/rannak/mangud/perenaine/memori/style.css @@ -0,0 +1,75 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body { + height: 100vh; + display: flex; + background: #284F8F !important; +} + +.memory-game { + width: 640px; + height: 640px; + margin: auto; + display: flex; + flex-wrap: wrap; + perspective: 1000px; +} + +.memory-card { + width: calc(20% - 10px); + height: calc(25% - 10px); + margin: 5px; + position: relative; + transform: scale(1); + transform-style: preserve-3d; + transition: transform .5s; + box-shadow: 1px 1px 1px rgba(0,0,0,.3); +} + +.memory-card:active { + transform: scale(0.97); + transition: transform .2s; +} + +.memory-card.flip { + transform: rotateY(180deg); +} + +.front-face, +.back-face { + width: 100%; + height: 100%; + padding: 20px; + position: absolute; + border-radius: 5px; + background: #F1F5FF; + backface-visibility: hidden; +} + +.front-face { + transform: rotateY(180deg); +} + +/* Side stuff */ + +.left, .right{ + width: calc((100vw - 640px) / 2) !important; + position: relative; +} + +.left-text{ + text-align: center; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.left-text h1{ + font-weight: bold; + padding-bottom: 5px; +} diff --git a/rannak/mangud/perenaine/memory/img/alko.svg b/rannak/mangud/perenaine/memory/img/alko.svg deleted file mode 100644 index e7bcc31..0000000 --- a/rannak/mangud/perenaine/memory/img/alko.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/rannak/mangud/perenaine/memory/img/butter.svg b/rannak/mangud/perenaine/memory/img/butter.svg deleted file mode 100644 index 48aeb4c..0000000 --- a/rannak/mangud/perenaine/memory/img/butter.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/rannak/mangud/perenaine/memory/img/jahu.svg b/rannak/mangud/perenaine/memory/img/jahu.svg deleted file mode 100644 index 3ac729f..0000000 --- a/rannak/mangud/perenaine/memory/img/jahu.svg +++ /dev/null @@ -1,85 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/rannak/mangud/perenaine/memory/img/pasta.svg b/rannak/mangud/perenaine/memory/img/pasta.svg deleted file mode 100644 index d46b576..0000000 --- a/rannak/mangud/perenaine/memory/img/pasta.svg +++ /dev/null @@ -1,164 +0,0 @@ - - - - - macaroni - - - - - - - - - - - - - - - - - - - - image/svg+xml - - - - - OpenClipart - - - Macaroni - 2011-01-20T19:40:03 - A large piece of macaroni style pasta. - https://openclipart.org/detail/105709 - - - AntumDeluge - - - - - food - macaroni - noodle - pasta - - - - - - - - - - - diff --git a/rannak/mangud/perenaine/memory/img/pesu.svg b/rannak/mangud/perenaine/memory/img/pesu.svg deleted file mode 100644 index 6d38faa..0000000 --- a/rannak/mangud/perenaine/memory/img/pesu.svg +++ /dev/null @@ -1,46 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/rannak/mangud/perenaine/memory/img/riis.svg b/rannak/mangud/perenaine/memory/img/riis.svg deleted file mode 100644 index 8376e61..0000000 --- a/rannak/mangud/perenaine/memory/img/riis.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/rannak/mangud/perenaine/memory/img/sokid.svg b/rannak/mangud/perenaine/memory/img/sokid.svg deleted file mode 100644 index 4d3eb3d..0000000 --- a/rannak/mangud/perenaine/memory/img/sokid.svg +++ /dev/null @@ -1,138 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/rannak/mangud/perenaine/memory/img/sool.svg b/rannak/mangud/perenaine/memory/img/sool.svg deleted file mode 100644 index 524cda1..0000000 --- a/rannak/mangud/perenaine/memory/img/sool.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/rannak/mangud/perenaine/memory/img/suhkur.svg b/rannak/mangud/perenaine/memory/img/suhkur.svg deleted file mode 100644 index a82c743..0000000 --- a/rannak/mangud/perenaine/memory/img/suhkur.svg +++ /dev/null @@ -1,47 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/rannak/mangud/perenaine/memory/img/taga.svg b/rannak/mangud/perenaine/memory/img/taga.svg deleted file mode 100644 index a81a7dc..0000000 --- a/rannak/mangud/perenaine/memory/img/taga.svg +++ /dev/null @@ -1,62 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/rannak/mangud/perenaine/memory/img/tikud.svg b/rannak/mangud/perenaine/memory/img/tikud.svg deleted file mode 100644 index 12be82c..0000000 --- a/rannak/mangud/perenaine/memory/img/tikud.svg +++ /dev/null @@ -1,76 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/rannak/mangud/perenaine/memory/index.html b/rannak/mangud/perenaine/memory/index.html deleted file mode 100644 index c19c7d5..0000000 --- a/rannak/mangud/perenaine/memory/index.html +++ /dev/null @@ -1,142 +0,0 @@ - - - - - - Memori - - - - - - - -
-
-

Memori

-

Mängu läbimiseks leia üles kõik kümme paari

-
-
- -
- -
- Butter - taga -
- -
- Butter - taga -
- - -
- tikud - taga -
- -
- Tikud - taga -
- - -
- Alko - taga -
- -
- Alko - taga -
- - -
- Jahu - taga -
- -
- Jahu - taga -
- - -
- Pasta - taga -
- -
- Pasta - taga -
- - -
- Pesu - taga -
- -
- Pesu - taga -
- - -
- Riis - taga -
- -
- Riis - taga -
- - -
- Sokid - taga -
- -
- sokid - taga -
- - -
- Sool - taga -
- -
- Sool - taga -
- - -
- suhkur - taga -
- -
- suhkur - taga -
- -
- -
-
- Liigu Edasi -
-
- - - - diff --git a/rannak/mangud/perenaine/memory/script.js b/rannak/mangud/perenaine/memory/script.js deleted file mode 100644 index 1a06fd9..0000000 --- a/rannak/mangud/perenaine/memory/script.js +++ /dev/null @@ -1,76 +0,0 @@ -const cards = document.querySelectorAll('.memory-card'); - -let hasFlippedCard = false; -let lockBoard = false; -let firstCard, secondCard; -let counter = 0; - -function flipCard() { - if (lockBoard) return; - if (this === firstCard) return; - - this.classList.add('flip'); - - if (!hasFlippedCard) { - hasFlippedCard = true; - firstCard = this; - - return; - } - - secondCard = this; - checkForMatch(); -} - -function checkForMatch() { - let isMatch = firstCard.dataset.framework === secondCard.dataset.framework; - - isMatch ? disableCards() : unflipCards(); -} - -function disableCards() { - firstCard.removeEventListener('click', flipCard); - secondCard.removeEventListener('click', flipCard); - counter++; - - console.log(counter) - if (counter >= 10) moveOnEnable(); - resetBoard(); -} - -function unflipCards() { - lockBoard = true; - - setTimeout(() => { - firstCard.classList.remove('flip'); - secondCard.classList.remove('flip'); - - resetBoard(); - }, 1500); -} - -function resetBoard() { - [hasFlippedCard, lockBoard] = [false, false]; - [firstCard, secondCard] = [null, null]; -} - -(function shuffle() { - cards.forEach(card => { - let randomPos = Math.floor(Math.random() * 12); - card.style.order = randomPos; - }); -})(); - -cards.forEach(card => card.addEventListener('click', flipCard)); - - -// Button func - -function moveOnEnable(){ - const button = document.querySelector(".btn"); - button.classList.remove('disabled'); - button.setAttribute('aria-disabled', false); - console.log("done"); - - counter = 0; -} diff --git a/rannak/mangud/perenaine/memory/style.css b/rannak/mangud/perenaine/memory/style.css deleted file mode 100644 index 600f91d..0000000 --- a/rannak/mangud/perenaine/memory/style.css +++ /dev/null @@ -1,75 +0,0 @@ -* { - padding: 0; - margin: 0; - box-sizing: border-box; -} - -body { - height: 100vh; - display: flex; - background: #284F8F !important; -} - -.memory-game { - width: 640px; - height: 640px; - margin: auto; - display: flex; - flex-wrap: wrap; - perspective: 1000px; -} - -.memory-card { - width: calc(20% - 10px); - height: calc(25% - 10px); - margin: 5px; - position: relative; - transform: scale(1); - transform-style: preserve-3d; - transition: transform .5s; - box-shadow: 1px 1px 1px rgba(0,0,0,.3); -} - -.memory-card:active { - transform: scale(0.97); - transition: transform .2s; -} - -.memory-card.flip { - transform: rotateY(180deg); -} - -.front-face, -.back-face { - width: 100%; - height: 100%; - padding: 20px; - position: absolute; - border-radius: 5px; - background: #F1F5FF; - backface-visibility: hidden; -} - -.front-face { - transform: rotateY(180deg); -} - -/* Side stuff */ - -.left, .right{ - width: calc((100vw - 640px) / 2) !important; - position: relative; -} - -.left-text{ - text-align: center; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); -} - -.left-text h1{ - font-weight: bold; - padding-bottom: 5px; -} diff --git a/rannak/mangud/style.css b/rannak/mangud/style.css new file mode 100644 index 0000000..9519820 --- /dev/null +++ b/rannak/mangud/style.css @@ -0,0 +1,22 @@ +* { + box-sizing: border-box; +} + +body { + height: 100vh; +} + +h1{ + text-align: center; + margin-top: 20px; +} + +.main{ + display: flex; + max-width:1100px; + margin:auto +} + +.main div{ + width: 15%; +} -- cgit v1.2.3