MeechaPooch · rgantzos · Feb 20, 2023 · May 31, 2023
diff --git a/backend/index.js b/backend/index.js
@@ -156,6 +156,10 @@ io.on('connection', (client) => {
      })
 });
 
+app.post("/report/chat//:project/", async function(req, res) {
+     console.log(`A USER JUST REPORTED THE CHAT IN PROJECT ${req.params.project}`)
+})
+
 app.post('/newProject/:scratchId/:owner',(req,res)=>{
      console.log('yeetee')
      if(sanitize(req.params.scratchId + '') == '') {res.send({err:'invalid scratch id'}); return}

diff --git a/extension/popups/popup.css b/extension/popups/popup.css
@@ -4,6 +4,56 @@ body {
     background-color: rgb(0, 153, 255);  */
     display:flex;
     flex-direction: column;
+    width: 300px;
+    height: calc(500px - 3.5rem);
+    padding-top: 3.5rem;
+}
+
+input#searchh {
+    width: 100%;
+    outline: none;
+    border: 0px;
+    background: #eaeaea;
+    padding: 0.5rem;
+    border-radius: 0.25rem;
+}
+
+button#submit {
+    background: #ff00e6;
+    outline: 0px;
+    border: 0px;
+    border-radius: 0.25rem;
+    position: relative;
+    top: 0px;
+    transition: top .3s;
+    color: white;
+    cursor: pointer;
+    width: 3rem;
+    margin-left: .5rem;
+}
+
+button#submit:hover {
+    top: .5rem;
+}
+
+.nav {
+    background-color: #ff00e6;
+    padding: .5rem;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    width: calc(100vw - 1rem);
+    text-align: center;
+}
+
+.nav img {
+    height: 2.5rem;
+    transform: rotate(0deg);
+    transition: transform .3s;
+}
+
+.nav img:hover {
+    transform: rotate(360deg);
 }
 
 
@@ -45,6 +95,39 @@ ul{
 }
 
 .x{
-    color:black;
+    color: white;
     font-size: small;
+    background-color: #ff00e6;
+    color: white;
+    padding: 0.25rem;
+    border-radius: 0.25rem;
+    position: relative;
+    cursor: pointer;
+    padding-top: 0.15rem;
+    position: relative;
+    top: 0px;
+    transition: top .3s;
+}
+
+.x:hover {
+    top: .25rem;
+}
+
+button.viewall {
+    width: 100%;
+    padding: .5rem;
+    border-radius: .25rem;
+    background-color: #ff00e6;
+    color: white;
+    outline: none;
+    border: 0px;
+    margin-bottom: 2rem;
+    position: relative;
+    top: 0px;
+    transition: top .3s;
+    cursor: pointer;
+}
+
+button.viewall:hover {
+    top: .5rem;
 }
diff --git a/extension/popups/popup.html b/extension/popups/popup.html
@@ -3,6 +3,9 @@
         <link rel="stylesheet" href="popup.css">
     </head>
     <body>
+        <div class="nav">
+            <img src="/icon128.png">
+        </div>
         <div id="normal">
        <h1 style="margin: 0; line-height: 23px;" id="listtitle"> Allow List:</h1>
         <info>
@@ -20,6 +23,7 @@ <h1 style="margin: 0; line-height: 23px;" id="listtitle"> Allow List:</h1>
 <ul id="friends">
     Loading...
 </ul>
+<button class="viewall">View Projects</button>
 
 <a id="discord" style="display: flex; align-self: center;" href="#" ><img width=20px; style="margin-right: 3px" src='https://camo.githubusercontent.com/dd996eca28d9aa495eb8c42afd580cf4dededc85d75d65945555cfa026780e27/68747470733a2f2f692e696d6775722e636f6d2f363249755141702e706e67'/>Join The Discord</a>
 <a id="support" style="display: flex; align-self: center;" href="#" >Support Blocklive<img height=18px; style="margin-left: 5px;" src="https://bmc-dev.s3.us-east-2.amazonaws.com/assets/icons/bmc_icon_black.png"></a>

diff --git a/extension/popups/script.js b/extension/popups/script.js
@@ -1,3 +1,9 @@
+document.querySelector("button.viewall").addEventListener("click", function() {
+    chrome.tabs.create({
+        url: "/projects/index.html"
+    })
+})
+
 chrome.runtime.sendMessage({meta:"getUsernamePlus"},function(info){
     let username = info.uname
 

diff --git a/extension/projects/index.html b/extension/projects/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Projects | Blocklive</title>
+        <link rel="stylesheet" href="/projects/style.css">
+    </head>
+    <body>
+        <div class="nav">
+            <img src="/icon128.png">
+        </div>
+        <h1>My Projects</h1>
+        <p>These are all of the Blocklive projects that you have access to. Clicking on them will open them in the editor.</p>
+        <div class="projects"></div>
+    </body>
+    <script src="/projects/script.js"></script>
+</html>
diff --git a/extension/projects/script.js b/extension/projects/script.js
@@ -0,0 +1,31 @@
+async function getProjects() {
+  res = await fetch("https://scratch.mit.edu/session/?blreferer", {
+    headers: {
+      "X-Requested-With": "XMLHttpRequest",
+    },
+  });
+  let json = await res.json();
+  var data = await (await fetch(`https://spore.us.to:4000/userProjectsScratch/${json.user.username}/`)).json()
+  data.forEach(function(project) {
+    var div = document.createElement("div")
+    div.className = "project"
+
+    var img = document.createElement("img")
+    img.src = `https://cdn2.scratch.mit.edu/get_image/project/${project.scratchId}_480x360.png`
+
+    var title = document.createElement("span")
+    title.className = "title"
+    title.textContent = project.title
+
+    div.appendChild(img)
+    div.appendChild(title)
+    document.querySelector(".projects").appendChild(div)
+
+    div.addEventListener("click", function() {
+        chrome.tabs.create({
+            url: `https://scratch.mit.edu/projects/${project.scratchId}/editor`
+        })
+    })
+  })
+}
+getProjects()
diff --git a/extension/projects/style.css b/extension/projects/style.css
@@ -0,0 +1,56 @@
+body {
+    text-align: center;
+    padding-top: 4rem;
+}
+
+.project {
+    width: 15rem;
+    display: inline-block;
+    background-color: #eaeaea80;
+    padding: .8rem;
+    border-radius: .5rem;
+    margin: .5rem;
+    cursor: pointer;
+    transform: scale(1);
+    transition: transform .3s;
+}
+
+.project:hover {
+    transform: scale(1.05);
+}
+
+.project img {
+    width: 100%;
+    border-radius: .5rem;
+}
+
+.project .title {
+    color: #ff00e6;
+    margin-top: 1rem;
+    display: block;
+    font-weight: bold;
+    font-size: 1rem;
+    margin-left: .25rem;
+    height: 3rem;
+    overflow-y: auto;
+}
+
+.nav {
+    background-color: #ff00e6;
+    padding: .5rem;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    width: calc(100vw - 1rem);
+    text-align: center;
+}
+
+.nav img {
+    height: 2.5rem;
+    transform: rotate(0deg);
+    transition: transform .3s;
+}
+
+.nav img:hover {
+    transform: rotate(360deg);
+}
diff --git a/extension/scripts/editor.js b/extension/scripts/editor.js
@@ -2749,6 +2749,7 @@ bl-msg{
     max-width: 80%;
     margin-left: 15px;
     background-color: rgb(255, 255, 255);
+    overflow-wrap: break-word;
 }
 bl-msg-sender-name{
     font-style:italic;
@@ -3027,13 +3028,58 @@ async function addMessage(msg) {
     }
     let msgElem = document.createElement('bl-msg')
     msgElem.innerText = msg.text 
+    addReportFunction(msgElem)
     if(msg.sender == uname) {msgElem.classList.add('mymsg')}
     msgsElem.appendChild(msgElem)
-
     msgsElem.scrollTop = msgsElem.scrollHeight;
+
 
+}
+
+function addReportFunction(msg) {
+    msg.addEventListener("contextmenu", function(e) {
+        e.preventDefault()
+        if (!document.querySelector(".report-chat")) {
+            var reportChatModal = document.createElement("div")
+            reportChatModal.className = "report-chat"
+            reportChatModal.innerHTML = `
+                <h3>Would you like to report this chat to the Blocklive team?</h3><p>Please don't false report, it takes up our time and it isn't actually that funny :(</p>
+                <button class="button">Report</button><button class="button">Cancel</button>
+            `
+            document.body.appendChild(reportChatModal)
+            var style = document.createElement("style")
+            style.textContent = `
+            .report-chat {
+                width: 40vw;
+                height: 40vh;
+                background-color: white;
+                border-radius: .5rem;
+                box-shadow: 0 0 11px black;
+                z-index: 9999999;
+                left: 30vw;
+                top: 30vh;
+                position: fixed;
+                padding: 1rem;
+            }
 
+            .report-chat button {
+            margin-right: .5rem;
+            }
+            `
+            document.body.appendChild(style)
+            reportChatModal.querySelectorAll("button")[0].onclick = async function() {
+                reportChatModal.remove()
+                await fetch("https://spore.us.to:4000/report/chat/"+bl_projectId+"/", {
+        method: "POST",
+                })
+            }
+            reportChatModal.querySelectorAll("button")[1].onclick = function() {
+                reportChatModal.remove()
+            }
+            }
+    })
 }
+
 function postMessageBubble() {
     let inputElem = document.querySelector('bl-chat-input')
     let messageText = inputElem.innerText

diff --git a/tests/chat/index.html b/tests/chat/index.html
@@ -275,6 +275,7 @@
         msgsElem.appendChild(unameElem)
     }
     let msgElem = document.createElement('bl-msg')
+    addReportFunction(msgElem)
     msgElem.innerText = msg.text 
     if(msg.sender == uname) {msgElem.classList.add('mymsg')}
     msgsElem.appendChild(msgElem)
@@ -287,6 +288,50 @@
 })
 document.querySelector('bl-chat-send-button').onclick = postMessageBubble
 
+function addReportFunction(msg) {
+    msg.addEventListener("contextmenu", function(e) {
+        e.preventDefault()
+        if (!document.querySelector(".report-chat")) {
+            var reportChatModal = document.createElement("div")
+            reportChatModal.className = "report-chat"
+            reportChatModal.innerHTML = `
+                <h3>Would you like to report this chat to the Blocklive team?</h3><p>Please don't false report, it takes up our time and it isn't actually that funny :(</p>
+                <button class="button">Report</button><button class="button">Cancel</button>
+            `
+            document.body.appendChild(reportChatModal)
+            var style = document.createElement("style")
+            style.textContent = `
+            .report-chat {
+                width: 40vw;
+                height: 40vh;
+                background-color: white;
+                border-radius: .5rem;
+                box-shadow: 0 0 11px black;
+                z-index: 9999999;
+                left: 30vw;
+                top: 30vh;
+                position: fixed;
+                padding: 1rem;
+            }
+
+            .report-chat button {
+            margin-right: .5rem;
+            }
+            `
+            document.body.appendChild(style)
+            reportChatModal.querySelectorAll("button")[0].onclick = async function() {
+                reportChatModal.remove()
+                await fetch("https://spore.us.to:4000/report/chat/"+bl_projectId+"/", {
+        method: "POST",
+                })
+            }
+            reportChatModal.querySelectorAll("button")[1].onclick = function() {
+                reportChatModal.remove()
+            }
+            }
+    })
+}
+
 function postMessageBubble() {
     let inputElem = document.querySelector('bl-chat-input')
     let messageText = inputElem.innerText