Update index.php

ufak bir değişiklik, verileri güncelleyen samimi arkadaşım Ömer Arda (Kelo)'ya verileri yanlış girdiğinde Web konsolda gözükecek not değiştirildi :)

.gitignore

@@ -2,4 +2,5 @@ build/*
 *.tar.gz
 *.zip
 /vendor/
-config.php
+config.php
+data.toml

assets/css/yurdle.css

@@ -8,6 +8,17 @@
   border: 1px solid white;
 }
 
+.latest-guess {
+  visibility: hidden;
+  opacity: 0;
+}
+
+.latest-guess.fade {
+  visibility: inherit;
+  opacity: 1;
+  transition: opacity 1s;
+}
+
 .innot {
   text-align: center;
 }
@@ -27,8 +38,6 @@
   }
 }
 
-.guess-tr {}
-
 .guess-th {
   border: aliceblue 3px solid;
 }
@@ -69,4 +78,48 @@
 
 .type12::after {
   content: "👆"
+}
+
+
+/*  */
+/* AUTOCOMPLETE */
+/*  */
+
+.autocomplete {
+  /*the container must be positioned relative:*/
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+}
+
+.autocomplete-items {
+  box-sizing: border-box;
+  position: absolute;
+  border: 2px solid #10161d;
+  border-bottom: none;
+  border-top: none;
+  z-index: 99;
+  /*position the autocomplete items to be the same width as the container:*/
+  top: 100%;
+  left: 0;
+  right: 0;
+}
+
+.autocomplete-items div {
+  padding: 10px;
+  cursor: pointer;
+  background-color: #96939B;
+  border-bottom: 1px solid #10161d;
+}
+
+.autocomplete-items div:hover {
+  /*when hovering an item:*/
+  background-color: #00ADB5;
+  color: #e8e8e8;
+}
+
+.autocomplete-active {
+  /*when navigating through the items using the arrow keys:*/
+  background-color: #00ADB5 !important;
+  color: #e8e8e8;
 }

index.php

@@ -25,9 +25,9 @@
   min-height: 100vh;">
         <form class="centered" style="margin-top: 10vh;" action="index.php" method="post">
           <label style="margin-bottom:1vh;" for="mainInput">Yurtlu Öğrencinin İsmini Giriniz</label>
-          <div><input style="width:80%;" class="input" type="text" id="mainInput" name="mainInput" placeholder="İsim Soyisim" /><input style="width:20%;" class="input" type="submit" value="Dene" /></div>
+          <div class="autocomplete"><input style="width:80%;" class="input" type="text" id="mainInput" name="mainInput" placeholder="İsim Soyisim" /><input style="width:20%;" class="input" type="submit" value="Dene" /></div>
         </form>
-        <div id="tebriks">
+        <div id="tebriks" style="display: none;">
 
         </div>
         <div id="tahminler">
@@ -38,13 +38,19 @@
         <div id="notices">
 
         </div>
+
+        <div id="tsparticles"></div>
         <hr style="width: 100%; box-sizing: border-box;">
-        <div id="sorumli" style="margin-top:auto;text-align:center;">Veri Sorumlusu: <b>Ömer Arda Muratoğlu</b><br>Her türlü kaldırılmasını, eklenmesini ve/veya değiştirilmesi istediğiniz veriler için kendisi ile iletişime geçiniz !</div>
+        <div style="margin-top:5px;text-align:center;"> <b>Dünün Şanslı Kişisi:</b> <span id="previous-person"><i>yükleniyor</i></span></div>
+        <hr style="width: 100%; box-sizing: border-box;">
+        <div id="sorumli" style="margin-top:5px;text-align:center;">Veri Sorumlusu: <b>Ömer Arda Muratoğlu</b><br>Her türlü kaldırılmasını, eklenmesini ve/veya değiştirilmesi istediğiniz veriler için kendisi ile iletişime geçiniz !</div>
+        <hr style="width: 100%; box-sizing: border-box;">
+        <div style="margin-top:5px;text-align:center;">Fikir için <b>Cem Deniz Akdeniz</b>'e Teşekkürler !</div>
         <hr style="width: 100%; box-sizing: border-box;">
         <div style="text-align:center;">Son veri güncelleme: <span id="latest-data"></span>
         </div>
       </div>
-      <div style="text-align: center;align-self:center;"><a href="https://asandikci.com/bagis/">Bana Bi' Kahve Ismarla ☕</a></div>
+      <div style="text-align: center;align-self:center;background-color: darkblue;border-radius:10px; padding:1px;"><a style="color: orange;font-weight:800;" href="https://asandikci.com/bagis/">👉 Bana Bi' Kahve Ismarla ☕</a></div>
     </article>
 
     <footer>
@@ -54,18 +60,109 @@
 
 
 </body>
+<script>
+  function callConfetti() {
+    const duration = 10 * 1000,
+      animationEnd = Date.now() + duration,
+      defaults = {
+        startVelocity: 30,
+        spread: 360,
+        ticks: 60,
+        zIndex: 0
+      };
+
+    function randomInRange(min, max) {
+      return Math.random() * (max - min) + min;
+    }
+
+    const interval = setInterval(function() {
+      const timeLeft = animationEnd - Date.now();
+
+      if (timeLeft <= 0) {
+        return clearInterval(interval);
+      }
+
+      const particleCount = 50 * (timeLeft / duration);
+
+      // since particles fall down, start a bit higher than random
+      confetti(
+        Object.assign({}, defaults, {
+          particleCount,
+          origin: {
+            x: randomInRange(0.1, 0.3),
+            y: Math.random() - 0.2
+          },
+        })
+      );
+      confetti(
+        Object.assign({}, defaults, {
+          particleCount,
+          origin: {
+            x: randomInRange(0.7, 0.9),
+            y: Math.random() - 0.2
+          },
+        })
+      );
+    }, 250);
+  }
+</script>
+<script>
+  function updateData() {
+    xmlHttp = new XMLHttpRequest();
+    xmlHttp.onreadystatechange = function() {
+      if (this.readyState == 4 && this.status == 200) {
+        var response = xmlHttp.responseText
+        if (response.includes("parseError")) {
+          console.error("VERİLER YANLIŞ ŞEKİLDE GİRİLMİŞ, LÜTFEN ifl/YurdleBackend PROJESİNDEKİ VERİ DOSYASINI KONTROL EDİNİZ");
+          console.warn(response);
+        } else if (response.includes("fileError")) {
+          console.error("VERİ DOSYASI SUNUCUDA BULUNAMADI, SUNUCUYU KONTROL EDİNİZ");
+          console.warn(response);
+        } else if (response.includes("success")) {
+          console.info("VERİLER BAŞARIYLA GÜNCELLENDİ")
+        } else {
+          console.warn("VERİ GÜNCELLENİRKEN BİR HATA OLUŞTU, SAYFAYI YENİLEMEYİ DENEYİN");
+        }
+      }
+    };
+    params = "updateData=yes";
+    xmlHttp.open("POST", "src/server.php", true);
+    xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
+    xmlHttp.send(params);
+    flag = true;
+    return;
+  }
+
+  function getPreviousData() {
+    xmlHttp = new XMLHttpRequest();
+    xmlHttp.onreadystatechange = function() {
+      if (this.readyState == 4 && this.status == 200) {
+        var response = xmlHttp.responseText;
+        document.getElementById("previous-person").innerHTML = "<b style='color:red';>" + response + "</b>";
+        console.debug("Dünün Şanslı Kişisi: " + response);
+      }
+    };
+    params = "getPreviousPerson=yes";
+    xmlHttp.open("POST", "src/server.php", true);
+    xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
+    xmlHttp.send(params);
+    flag = true;
+  }
+</script>
 <script>
   function isSameDay(a, b) {
     return a.toDateString() == b.toDateString();
   }
-
+  getPreviousData();
   if (localStorage.getItem("win") == null) {
     localStorage.setItem("win", "none");
   }
+  flagConf = 1;
   document.getElementById("tebriks").style.display = "none";
   if (localStorage.getItem("win") != null && localStorage.getItem("win") === "winned") {
     document.getElementById("tebriks").style.display = "block";
     document.getElementById("tebriks").innerHTML = "Tebrikler, günün şanslı kişisini buldun!"
+    flagConf = 0;
   }
 
   // LOCAL STORAGE AND GUESS HANDLING
@@ -81,6 +178,7 @@
       localStorage.removeItem("guesses");
       localStorage.removeItem("latest_guess");
       localStorage.removeItem("win");
+      document.getElementById("tebriks").style.display = "none";
     }
     localStorage.setItem("latest_visit", date);
   }
@@ -146,6 +244,8 @@
       tr.appendChild(th);
     }
 
+    // REVIEW Daha optimize ve karışık olmayacak şekilde yazılabilir
+
     for (let i = gj["Guesses"].length - 1; i >= 0; i--) {
       // revit = gj["Guesses"].length - i - 1;
       const tr = document.createElement("tr");
@@ -158,7 +258,12 @@
         if (innerFlag) crit_num++;
         const td = document.createElement("td");
         const td_text = document.createTextNode(indata[key][1]);
+
+        // FIXME isim_soyisim renkli olmasın diye kontrol yapılıyor ama bu durumda isim soyisim haricinde diğer tüm özellikleri aynı olan başka biri daha olursa onu da doğru sayar !!!
         if (key != "isim_soyisim") {
+          if (i == gj["Guesses"].length - 1 && flagSame == 0) {
+            td.classList.add("latest-guess");
+          }
           switch (indata[key][0]) {
             case 0:
               td.classList.add("type0");
@@ -186,13 +291,34 @@
     }
   }
 
-  // console.log(gj);
+  var lat = document.getElementsByClassName("latest-guess");
-  if (crit_num == (true_num + 1)) // +1 isim_soyisim sayılmadığı için
+  var le = lat.length;
-  {
+
-    // console.warn(crit_num, true_num);
+  function delay(time) {
+    return new Promise(resolve => setTimeout(resolve, time));
+  }
+  async function delayeffect() {
+    for (let i = 0; i < lat.length; i++) {
+      const element = lat[i];
+      await delay(750);
+      element.classList.toggle('fade');
+    }
+  }
+  delayeffect();
+
+  async function yepwin() {
+    await delay(5000);
     document.getElementById("tebriks").style.display = "block";
     document.getElementById("tebriks").innerHTML = "Tebrikler, günün şanslı kişisini buldun!"
     localStorage.setItem("win", "winned");
+    if (flagConf) {
+      callConfetti();
+    }
+  }
+  // console.log(gj);
+  if (crit_num == (true_num + 1)) // +1 isim_soyisim sayılmadığı için
+  {
+    yepwin();
   }
 
 
@@ -210,8 +336,8 @@
     } else {
       innot = document.createElement("p");
       innot.classList.add("innot");
-      innot_text = document.createTextNode(element);
+      innot_text = element;
-      innot.appendChild(innot_text);
+      innot.innerHTML = innot_text;
       notic.appendChild(innot);
     }
   });
@@ -332,8 +458,25 @@
   }
 
   const persons2 = <?php echo json_encode(getAllPersonNames(), JSON_UNESCAPED_UNICODE) ?>;
-
+  persons2.sort();
   autocomplete(document.getElementById("mainInput"), persons2);
 </script>
+<script>
+  var t = setInterval(tick, 1000);
+
+  function tick() {
+    var curTime = new Date();
+    if (curTime.getHours() == 0 && curTime.getMinutes() == 0 && curTime.getSeconds() > 1 && curTime.getSeconds() < 3) {
+      console.debug("Kullanıcının Ekranı Açıkken Farklı Bir Güne Geçiş Yapıldı, Statlar Sıfırlanıyor ve Kullanıcı Bilgilendiriliyor");
+      localStorage.removeItem("guesses");
+      localStorage.removeItem("latest_guess");
+      localStorage.removeItem("win");
+      document.getElementById("tebriks").style.display = "none";
+      document.getElementById("tahminler").innerHTML = "<h2 style='text-align:center;'>Gece Yarısını Geçtiniz, Lütfen Sayfayı Yenile<span style='color:red;'>ME</span>den direkt yeni tahminizde bulununuz👆</h2><p style='text-align:center;'>Kullanıcının cihazının saati baz alınmıştır, sunucunun yenilenmesi için birkaç saniye daha beklemeniz gerekebilir</p>"
+    }
+  }
+</script>
+<script src="https://cdn.jsdelivr.net/npm/@tsparticles/confetti@3.0.3/tsparticles.confetti.bundle.min.js"></script>
+
 
 </html>

src/previous.php

@@ -0,0 +1 @@
+<?php $PREVIOUS_PERSON = "aliberk_sandikci24";

src/server.php

@@ -3,68 +3,110 @@
 use Yosymfony\Toml\Toml;
 
 include __DIR__ . '/todays.php';
+include __DIR__ . '/previous.php';
 include __DIR__ . '/../config.php';
 require __DIR__ . '/../vendor/autoload.php';
 
 $parser = new Toml();
 $dock_local_test = 1;
 
-# Fetch remote data each 1 hour
+# Fetch Remote data and update data.toml (running each 10 min with cronjob)
+function testData($toml)
+{
+  global $parser;
+  try {
+    $array = $parser::Parse($toml);
+  } catch (Exception $e) {
+    $ans = 'Caught exception: ' .  $e->getMessage() . "\n";
+    return $ans;
+  }
+  return 0;
+}
+
 function updateRemoteData()
 {
-  # PREREQUIRITIES Create a cronjob or a systemd service for update it regularly !
-
-  # GET FROM GIT WITH ACCESS TOKEN AND SAVE TO data.toml
-
   global $DATAACCESS_TOKEN;
+  global $APP_NAME;
   $string = file_get_contents("https://git.aliberksandikci.com.tr/api/v1/repos/ifl/YurdleBackend/raw/data.toml?access_token=" . $DATAACCESS_TOKEN);
   if ($string === FALSE) {
-    echo "Could not read the file.";
+    echo "fileError: Could not read the file or could not get the file from server";
+    return;
+  } else if (testData($string) != 0) {
+    echo "parseError: " . testData($string);
+    return;
   } else {
     $file = __DIR__ . "/../data.toml";
     file_put_contents($file, $string, LOCK_EX);
   }
+  chmod("$file", 0700);
+  chown("$file", $APP_NAME);
 
-  # REVIEW MAKE SURE FILE IS CHMOD 600 AND NOT ACCESSIBLE FROM USERSIDE !!!
+  parseTOML(); // not necessary
-
+  echo "success";
-
-  parseTOML(); # parse again after update
 }
 
+# get random person
+function randomizerr($array)
+{
+  srand();
+  $random_number =  random_int(0, count($array) - 1);
+  $choosen = $array[$random_number];
+  return $choosen;
+}
 
-# Choose the todays person, everyday TSI 03:00
+# Choose the todays person (running each day with cronjob)
 function chooseTodayPerson()
 {
-  # PREREQUIRIITES with cronjob or systemd, run this function everyday TSI 03.00
+  global $APP_NAME;
+  global $TODAYS_PERSON;
+  $data = parseTOML()["data"];
 
-  # parse toml
+  backupPreviousPerson($TODAYS_PERSON);
 
-  # get users array length
+  $personArr = array();
+  foreach ($data as $key => $value) {
+    array_push($personArr, $key);
+  }
 
-  # get a random number
 
-  # make this person todays person, change $TODAYS_PERSON variable in today.php
+
+  $choosen = randomizerr($personArr);
+  echo $choosen . "  -  " . $TODAYS_PERSON;
+  while ($choosen == $TODAYS_PERSON) {
+    echo "!!!";
+    $choosen = randomizerr($personArr);
+    echo $choosen . "  -  " . $TODAYS_PERSON;
+  }
+
+  $string = "<?php \$TODAYS_PERSON = \"$choosen\";";
+  $file = __DIR__ . "/todays.php";
+  file_put_contents($file, $string, LOCK_EX);
+  chmod("$file", 0700);
+  chown("$file", $APP_NAME);
+}
+
+# Backup previous person to previous.php file
+function backupPreviousPerson($previous)
+{
+  global $APP_NAME;
+
+  $string = "<?php \$PREVIOUS_PERSON = \"$previous\";";
+  $file = __DIR__ . "/previous.php";
+  file_put_contents($file, $string, LOCK_EX);
+  chmod("$file", 0700);
+  chown("$file", $APP_NAME);
+}
+
+# get Previous Person Name (isi_soyisim)
+function getPreviousPersonName()
+{
+  global $PREVIOUS_PERSON;
+  return parseTOML()["data"][$PREVIOUS_PERSON]["isim_soyisim"];
 }
 
 # Send all person names to frontend
 function getAllPersonNames()
 {
-  # Parse Toml
-  # get `users` array
-  # get isim_soyisim of each user in `users` array and add to newArr
-  # NewArr
-  # send these as arry to frontend 
-  # aliberk_sandikci24 -> "Aliberk Sandıkçı
-
-  // APPROACH 1: (needs public-> users array)
-  // $users = parseTOML()["public"]["users"];
-  // $arr = array();
-  // foreach ($users as $user) {
-  //   array_push($arr,  parseTOML()["data"][$user]["isim_soyisim"]);
-  // }
-  // return $arr;
-
-  //  APPROACH 2:
   $data = parseTOML()["data"];
   $arr = array();
   foreach ($data as $d) {
@@ -102,7 +144,6 @@ function sendDataDate()
     $arr[1] = date("d/m/Y H:i:s", filemtime(__DIR__ . "/" . $filename));
   }
 
-
   return $arr;
 }
 
@@ -178,7 +219,7 @@ function compareARR($guess, $todays, $krit)
 
   if ($equalNum == 0) {
     return 0;
-  } else if ($equalNum == count($todays)) {
+  } else if ($equalNum == count($todays) && $equalNum == count($guess)) {
     return 2;
   } else if ($equalNum >= 1) {
     return 1;
@@ -201,5 +242,11 @@ function parseTOML()
   return $array;
 }
 
-updateRemoteData();
+
-comparePerson('aliberk_sandikci24');
+if ($_POST['updateData'] != null && $_POST['updateData'] == "yes") {
+  updateRemoteData();
+}
+
+if ($_POST['getPreviousPerson'] != null && $_POST['getPreviousPerson'] == "yes") {
+  echo getPreviousPersonName();
+}

src/todays.php

@@ -1,2 +1 @@
-<?php
+<?php $TODAYS_PERSON = "aliberk_sandikci24";
-$TODAYS_PERSON = "burak_sina_akbudak24";