Merge pull request #30 from LENpolygon/votingSystem

Voting system

Author: LENpolygon

public/css/global.css

@@ -191,7 +191,7 @@ section {
 
 .icon {
     cursor: move;
-    height: 4.8rem;
+    width: 4.8rem;
     margin: 0.2rem;
     max-height: 4.8rem;
     max-width: 4.8rem;

public/index.html

@@ -168,7 +168,7 @@ <h4 id="civilizationFocus"></h4>
         </article>
     </main>
     <footer>
-        age4builder.com v0.9.1 for the latest Age of Empires instalment. Copyright 2022 <a target="_blank"
+        age4builder.com v0.9.3 for the latest Age of Empires instalment. Copyright 2022 <a target="_blank"
             rel="noopener" data-track-outgoing="true" href="http://lenpolygon.com">LEN polygon</a>.
         Age of Empires IV and all its icons, artwork, and flair are property of Relic Entertainment, World's Edge &
         Xbox Game Studios. This website is for educational purposes only.

public/js/build.js

@@ -487,7 +487,7 @@ async function GetYourBuilds(uid) {
         // doc.data() is never undefined for query doc snapshots
         var docId = doc.id;
         var docData = doc.data();
-        html += `<tr><td><a href="#" class="delete-builds" bid="${docId}" style="color: red">Delete Build?</a></td>`;
+        html += `<tr><td><a href="#" class="delete-builds" bid="${docId}" style="color: red" onmouseover="this.style['text-decoration']='underline';" onmouseout="this.style['text-decoration']='none';">Delete Build?</a></td>`;
         html += "<td><img src=\"img/flag" + docData.civ + ".png\" height=\"24\" onerror=\"this.src = 'assets/placeholder.png';\"><a href=\"view.html?f=" + docId + "\"></img> " + escapeHtml(docData.title).substring(0, titleLength) + " (by " + escapeHtml(docData.user).substring(0, nameLength) + ")</a></td></tr>";
     });
     document.querySelector('#yourBuilds').innerHTML = `
@@ -502,13 +502,14 @@ async function GetYourBuilds(uid) {
         ${html}
         </tbody>
     </table>
-    <p style="color: red">Deleting builds cannot be undone! Click once, then refresh page and your build is gone!</p>
+    <p style="color: red">Deleting builds cannot be undone!!</p>
     `
     const deleteYourDocs = document.querySelectorAll('.delete-builds');
     deleteYourDocs.forEach(link => {
         link.addEventListener('click', (e) => {
             //console.log(link.getAttribute('bid'));
             deleteDoc(doc(db, "Age4Builds", link.getAttribute('bid')));
+            location.reload();
         })
     });
 }
@@ -605,6 +606,7 @@ auth.onAuthStateChanged(user => {
                 version: save[1],
                 patch: "14681",
                 likers: [],
+                dislikers: [],
                 likes: parseInt(document.getElementById("scoreU").value),
                 option: document.getElementById("optionsU").value,
                 score: 30

public/js/index.js

@@ -173,7 +173,7 @@ async function GetYourBuilds(uid) {
         // doc.data() is never undefined for query doc snapshots
         var docId = doc.id;
         var docData = doc.data();
-        html += `<tr><td><a href="#" class="delete-builds" bid="${docId}" style="color: red">Delete Build?</a></td>`;
+        html += `<tr><td><a href="#" class="delete-builds" bid="${docId}" style="color: red" onmouseover="this.style['text-decoration']='underline';" onmouseout="this.style['text-decoration']='none';">Delete Build?</a></td>`;
         html += "<td><img src=\"img/flag" + docData.civ + ".png\" height=\"24\" onerror=\"this.src = 'assets/placeholder.png';\"><a href=\"view.html?f=" + docId + "\"></img> " + escapeHtml(docData.title).substring(0, titleLength) + " (by " + escapeHtml(docData.user).substring(0, nameLength) + ")</a></td></tr>";
     });
     document.querySelector('#yourBuilds').innerHTML = `
@@ -188,13 +188,14 @@ async function GetYourBuilds(uid) {
         ${html}
         </tbody>
     </table>
-    <p style="color: red">Deleting builds cannot be undone! Click once, then refresh page and your build is gone!</p>
+    <p style="color: red">Deleting builds cannot be undone!!</p>
     `
     const deleteYourDocs = document.querySelectorAll('.delete-builds');
     deleteYourDocs.forEach(link => {
         link.addEventListener('click', (e) => {
             //console.log(link.getAttribute('bid'));
             deleteDoc(doc(db, "Age4Builds", link.getAttribute('bid')));
+            location.reload();
         })
     });
 }

public/js/view.js

@@ -21,7 +21,7 @@ const loadLimit = 20;
 const titleLength = 48;
 const nameLength = 24;
 var usp = new URLSearchParams(window.location.search);
-import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-app.js"; import firebaseConfig from '../json/fs.js'; const app = initializeApp(firebaseConfig); 
+import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-app.js"; import firebaseConfig from '../json/fs.js'; const app = initializeApp(firebaseConfig);
 import { getFirestore, doc, getDoc, setDoc, getDocs, collection, deleteDoc, query, updateDoc, addDoc, where, orderBy, limit } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-firestore.js"; const db = getFirestore();
 import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-auth.js"; const auth = getAuth();
 if (isNaN(usp.get("f"))) { // Update View counter
@@ -32,7 +32,7 @@ if (isNaN(usp.get("f"))) { // Update View counter
         //console.log(docData.timestamp);
         //console.log(Date.now());
         //console.log((Date.now()-docData.timestamp)/(1000*60*60*24));
-        var newScore = Math.max(docData.score - 10, Math.min(docData.score + 10, docData.views + docData.likes * 10 - Math.pow(Math.floor((Date.now() - docData.timestamp) / (1000 * 60 * 60 * 24)),1.337)));
+        var newScore = Math.max(docData.score - 10, Math.min(docData.score + 10, docData.views + Math.pow(docData.likes * 10, 1.069) - Math.pow(Math.floor((Date.now() - docData.timestamp) / (1000 * 60 * 60 * 24)), 1.337)));
         await updateDoc(
             ref, {
             views: docData.views + 1,
@@ -256,6 +256,63 @@ if (isNaN(usp.get("f"))) { // Update View counter
         document.getElementById("copyForOverlayBtn").addEventListener("click", copyForOverlay);
         document.getElementById("copyForOverlayBtnMobile").addEventListener("click", copyForOverlay);
 
+        //////////////////////////////////////////////////
+        // UPVOTE / DOWNVOTE SYSTEM
+        //////////////////////////////////////////////////
+        const usr = auth.currentUser;
+        if (usr != null) {
+            var liked = false;
+            var disliked = false;
+            var newDislikers = [];
+            if (docData.likers.includes(usr.uid)) {
+                liked = true;
+            } else if (docData.hasOwnProperty("dislikers")) {
+                newDislikers = docData.dislikers;
+                if (docData.dislikers.includes(usr.uid)) {
+                    disliked = true;
+                }
+            }
+            if (liked == false) {
+                document.querySelector('#upvote').addEventListener('click', (e) => {
+                    var newLikers = docData.likers;
+                    newLikers.push(usr.uid);
+                    var newLikes = docData.likes + 1;
+                    if (disliked == true) {
+                        newDislikers = newDislikers.filter(item => item !== usr.uid)
+                        newLikes += 1;
+                    }
+                    return updateDoc(
+                        ref, {
+                        likers: newLikers,
+                        dislikers: newDislikers,
+                        likes: newLikes
+                    }).catch((error) => {
+                        console.log("Unsuccesful operation, error: " + error);
+                    });
+                });
+            }
+            if (disliked == false) {
+                document.querySelector('#downvote').addEventListener('click', (e) => {
+
+                    newDislikers.push(usr.uid);
+                    var newLikes = docData.likes - 1;
+                    var newLikers = docData.likers;
+                    if (liked == true) {
+                        newLikers = newLikers.filter(item => item !== usr.uid)
+                        newLikes -= 1;
+                    }
+                    return updateDoc(
+                        ref, {
+                        likers: newLikers,
+                        dislikers: newDislikers,
+                        likes: newLikes
+                    }).catch((error) => {
+                        console.log("Unsuccesful operation, error: " + error);
+                    });
+                });
+            }
+        }
+
         //////////////////////////////////////////////////
         // READ json/icons.json data
         //////////////////////////////////////////////////
@@ -385,7 +442,7 @@ async function GetYourBuilds(uid) {
         // doc.data() is never undefined for query doc snapshots
         var docId = doc.id;
         var docData = doc.data();
-        html += `<tr><td><a href="#" class="delete-builds" bid="${docId}" style="color: red">Delete Build?</a></td>`;
+        html += `<tr><td><a href="#" class="delete-builds" bid="${docId}" style="color: red" onmouseover="this.style['text-decoration']='underline';" onmouseout="this.style['text-decoration']='none';">Delete Build?</a></td>`;
         html += "<td><img src=\"img/flag" + docData.civ + ".png\" height=\"24\" onerror=\"this.src = 'assets/placeholder.png';\"><a href=\"view.html?f=" + docId + "\"></img> " + escapeHtml(docData.title).substring(0, titleLength) + " (by " + escapeHtml(docData.user).substring(0, nameLength) + ")</a></td></tr>";
     });
     document.querySelector('#yourBuilds').innerHTML = `
@@ -400,13 +457,14 @@ async function GetYourBuilds(uid) {
         ${html}
         </tbody>
     </table>
-    <p style="color: red">Deleting builds cannot be undone! Click once, then refresh page and your build is gone!</p>
+    <p style="color: red">Deleting builds cannot be undone!!</p>
     `
     const deleteYourDocs = document.querySelectorAll('.delete-builds');
     deleteYourDocs.forEach(link => {
         link.addEventListener('click', (e) => {
             //console.log(link.getAttribute('bid'));
             deleteDoc(doc(db, "Age4Builds", link.getAttribute('bid')));
+            location.reload();
         })
     });
 }
@@ -492,4 +550,5 @@ const setupUI = (user) => {
 document.addEventListener('DOMContentLoaded', function () {
     var modals = document.querySelectorAll('.modal');
     M.Modal.init(modals);
-});
+});
+

public/view.html

@@ -134,6 +134,9 @@ <h2 class="title gold">Account details</h2><br />
             <h1 id="civilizationName"></h1>
             <h4 id="civilizationFocus"></h4>
           </div>
+          <h3 class="logged-out" style="text-align: right; margin-right: 1rem;">only <span class="gold">logged in users</span> can<br/><span class="gold">vote</span> for this build order</h3>
+          <h2 class="logged-in" style="text-align: right; margin-right: 1rem;">Vote:</h2>
+          <h3 class="logged-in" style="text-align: right; margin-right: 1rem;"><a href="#" class="gold" id="upvote" onmouseover="this.style['text-decoration']='underline';" onmouseout="this.style['text-decoration']='none';">++ good build order</a><br/><a href="#" style="color:crimson" id="downvote" onmouseover="this.style['text-decoration']='underline';" onmouseout="this.style['text-decoration']='none';">---&nbsp;&nbsp;&nbsp;bad build order</a></h3>
         </div>
         <table id="buildTable">
           <thead>
@@ -169,7 +172,7 @@ <h4 id="civilizationFocus"></h4>
     <div class="push"></div>
   </main>
   <footer>
-    age4builder.com v0.9.1 for the latest Age of Empires instalment. Copyright 2022 <a target="_blank" rel="noopener"
+    age4builder.com v0.9.3 for the latest Age of Empires instalment. Copyright 2022 <a target="_blank" rel="noopener"
       data-track-outgoing="true" href="http://lenpolygon.com">LEN polygon</a>.
     Age of Empires IV and all its icons, artwork, and flair are property of Relic Entertainment, World's Edge &
     Xbox Game Studios. This website is for educational purposes only.