Merge pull request #33 from JMU-CS/dev

Dev
JMU-CS · Jul 31, 2024 · 1ae4028 · 1ae4028
2 parents 529cf4b + ee522eb
commit 1ae4028
Show file tree

Hide file tree

Showing 24 changed files with 841 additions and 239 deletions.
diff --git a/.gitignore b/.gitignore
@@ -7,10 +7,12 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
+# Local development
 node_modules
 dist
 dist-ssr
 *.local
+venv
 
 # Editor directories and files
 !.vscode/extensions.json

diff --git a/archive/errors.md b/archive/errors.md
@@ -0,0 +1,61 @@
+# Old Error Handling
+
+Previously, we showed error messages:
+
+1. In the block editor (as warning text)
+2. In the text editor (as annotations)
+3. In the output window (in red font)
+
+When we decided to do #3 only, a lot of code was no longer needed:
+
+* annotationsBuffer / textEditor.session.setAnnotations()
+* blockErrorsBuffer / addBlockErrors()
+* markersBuffer
+
+Larger code snippets are copied below for future reference.
+
+## Old Code Removed
+
+Removed global variables from common.js:
+
+```js
+export var blockErrorsBuffer = {};
+export var annotationsBuffer = [];
+export var markersBuffer = [];
+```
+
+Removed exported functions from common.js:
+
+```js
+/**
+ * This clears the output buffer. It also clears the ace error annotations.
+ * It does not clear what the user sees on their screen.
+ */
+export function clearOutput() {
+    const stdOut = document.querySelector('.stdout');
+    stdOut.innerHTML = '';
+}
+
+export function clearErrors() {
+    annotationsBuffer = [];
+    errorOutput = "";
+    blockErrorsBuffer = {};
+    markersBuffer.forEach((markerId) => {
+        textEditor.session.removeMarker(markerId);
+    });
+}
+
+export function addBlockErrors(workspace) {
+    for (var key in blockErrorsBuffer) {
+        var block = workspace.getBlockById(key);
+        block.setWarningText(blockErrorsBuffer[key]);
+    }
+}
+```
+
+Removed from `runTasks()` and `turnCodeToBlocks()`:
+
+```js
+textEditor.session.setAnnotations(annotationsBuffer);
+addBlockErrors(workspace);
+```
diff --git a/embed.html b/embed.html
@@ -51,7 +51,6 @@
 
     <!-- Output -->
     <div class="output">
-      <div class="clearOut">🗑</div>
       <p class="stdout"></p>
       <p class="stderr"></p>
     </div>

diff --git a/index.html b/index.html
@@ -8,14 +8,14 @@
   <link rel="stylesheet" href="/index.css">
   <link rel="icon" href="/fallen-leaf_1f342.ico" type="image/x-icon">
   <link rel="stylesheet"
-  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
 </head>
 
 <body>
 
-  <header>
-    <a class="report" href="https://docs.google.com/forms/d/e/1FAIpQLSeo2mUrrhNZejPch9UcQQDHWk5e6ql_xFfFSdS6oiaNA-Tk8Q/viewform?embedded=true">Report a bug <span class="material-symbols-rounded bug">pest_control</span></a>
-  </header>
+  <!-- <header>
+    <button class="report">Report a bug <span class="material-symbols-rounded bug">pest_control</span></button>
+  </header> -->
 
   <div class="container">
     <h1>Welcome to Praxly 🍂</h1>
@@ -34,12 +34,44 @@ <h1>Welcome to Praxly 🍂</h1>
     <div class="button-container">
       <button class="praxly-button ">Start Coding</button>
       <button class="github-button">GitHub Repo</button>
+      <button class="report-button">Report a bug <span class="material-symbols-rounded bug">pest_control</span></button>
     </div>
 
     <iframe width="100%" height="580" frameborder="0"
       src="/embed.html?button=both&result=both#code=%2F%2F%0A%2F%2F%20Sample%20Question%208%0A%2F%2F%0A%0Avoid%20swap(int%5B%5D%20arr%2C%20int%20i%2C%20int%20j)%0A%20%20%20%20int%20temp%20←%20arr%5Bi%5D%0A%20%20%20%20arr%5Bi%5D%20←%20arr%5Bj%5D%0A%20%20%20%20arr%5Bj%5D%20←%20temp%0Aend%20swap%0A%0Avoid%20sort(int%5B%5D%20arr%2C%20int%20len)%0A%20%20%20%20int%20pos%20←%200%0A%20%20%20%20while%20(pos%20<%20len)%0A%20%20%20%20%20%20%20%20if%20(pos%20%3D%3D%200)%0A%20%20%20%20%20%20%20%20%20%20%20%20pos%20←%20pos%20%2B%201%0A%20%20%20%20%20%20%20%20else%0A%20%20%20%20%20%20%20%20%20%20%20%20if%20(arr%5Bpos%5D%20>%20arr%5Bpos%20-%201%5D)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20pos%20←%20pos%20%2B%201%0A%20%20%20%20%20%20%20%20%20%20%20%20else%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20swap(arr%2C%20pos%2C%20pos%20-%201)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20pos%20←%20pos%20-%201%0A%20%20%20%20%20%20%20%20%20%20%20%20end%20if%0A%20%20%20%20%20%20%20%20end%20if%0A%20%20%20%20end%20while%0Aend%20sort%0A%0Aint%5B%5D%20numbers%20←%20%7B2%2C%201%2C%205%2C%203%2C%204%7D%0Asort(numbers%2C%205)%0Aprint%20numbers%0A">
     </iframe>
 
+    <h2>Praxly Team</h2>
+
+    <div class="people-container">
+      <div class="team-member">
+        <img class="member" src="people/saupp.png">
+        <h3>Ben Saupp</h3>
+        <div class="member-description"></div>
+      </div>
+      <div class="team-member">
+        <img class="member" src="people/macmillan.png">
+        <h3>Ellona Macmillan</h3>
+        <div class="member-description"></div>
+      </div>
+      <div class="team-member">
+        <img class="member" src="people/mayfield.jpg">
+        <h3>Dr. Chris Mayfield</h3>
+        <div class="member-description"></div>
+      </div>
+      <div class="team-member">
+        <img class="member" src="people/johnson.png">
+        <h3>Dr. Chris Johnson</h3>
+        <div class="member-description"></div>
+      </div>
+      <div class="team-member">
+        <img class="member" src="people/stewart.jpg">
+        <h3>Dr. Michael Stewart</h3>
+        <div class="member-description"></div>
+      </div>
+    </div>
+
+    <!-- <button class="learn-more">Learn More</button> -->
 
     <div class="footer">
       <img src="/images/NSF_logo.png" alt="NSF logo" class="logo">
@@ -56,6 +88,13 @@ <h1>Welcome to Praxly 🍂</h1>
   <script>
     const praxlyButton = document.querySelector('.praxly-button');
     const githubButton = document.querySelector('.github-button');
+    const peopleContainer = document.querySelector('.people-container');
+    const learnMoreButton = document.querySelector('.learn-more');
+    const reportButton = document.querySelector('.report-button');
+
+    reportButton.addEventListener('click', function () {
+      window.open("https://docs.google.com/forms/d/e/1FAIpQLSeo2mUrrhNZejPch9UcQQDHWk5e6ql_xFfFSdS6oiaNA-Tk8Q/viewform?embedded=true", '_blank');
+    })
 
     praxlyButton.addEventListener('click', function () {
       window.open("/main.html", "_blank");
@@ -64,6 +103,11 @@ <h1>Welcome to Praxly 🍂</h1>
     githubButton.addEventListener('click', function () {
       window.open("https://github.com/JMU-CS/praxly", '_blank');
     });
+
+    learnMoreButton?.addEventListener('click', function () {
+      peopleContainer.classList.toggle('active');
+      peopleContainer.classList.contains('active') ? learnMoreButton.textContent = 'Show Less' : learnMoreButton.textContent = 'Learn More';
+    });
   </script>
 
 </body>

diff --git a/main.html b/main.html
@@ -160,7 +160,6 @@ <h3>Example Programs</h2>
     </div>
     <div class="resizeBarBott"></div>
     <div class="output">
-      <div class="clearOut"><span class="material-symbols-rounded trash">delete</span></div>
       <p class="stdout"></p>
       <p class="stderr"></p>
     </div>

diff --git a/public/images/picture_of_Ben.png b/public/images/picture_of_Ben.png
diff --git a/public/index.css b/public/index.css
@@ -19,6 +19,7 @@ body {
   display: flex;
   gap: 20px;
   justify-content: center;
+  align-items: center;
   margin: 2rem;
 }
 
@@ -27,19 +28,23 @@ body {
   border-radius: 5px;
   cursor: pointer;
   font-weight: bold;
-  padding: 10px 20px;
   transition: background-color 0.5s;
 }
 
 .praxly-button {
   background-color: #2b5e7d;
-  color: white
+  color: white;
+  padding: 10px 20px;
 }
 
 .praxly-button:hover {
   background-color: #1a3f56;
 }
 
+.github-button {
+  padding: 10px 20px;
+}
+
 .github-button button {
   background-color: lightgray;
   color: black;
@@ -49,6 +54,16 @@ body {
   background-color: darkgray;
 }
 
+.report-button {
+  padding: 10px;
+  padding-right: 30px;
+  padding-left: 15px;
+}
+
+.report-button:hover {
+  background-color: darkgray;
+}
+
 .footer {
   align-items: center;
   display: flex;
@@ -66,22 +81,63 @@ body {
   line-height: 1.5;
 }
 
-.report {
-  color: #2b5e7d;
-  font-size: 25px;
+.report-button .material-symbols-rounded.bug {
+  font-size: 20px;
   position: absolute;
-  top: 0;
-  right: 0;
-  margin: 45px;
-  text-decoration: none;
+  transform: rotate(-45deg);
+  transition: transform 1s ease-in-out;
+  margin-left: 2px;
+  margin-top: -2px;
 }
 
-.report:hover {
-  color: #1a3f56;
+.report-button:hover .bug,
+.report-button .bug:hover {
+  transform: rotate(315deg);
 }
 
-.material-symbols-rounded.bug {
-  font-size: 29px;
-  position: absolute;
-  transform: rotate(-45deg);
+h2 {
+    margin-top: 2rem;
+}
+
+.people-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  max-width: 900px;
+}
+
+.team-member .member {
+  flex: 0 1 30%;
+  max-width: 100%;
+  border-radius: 50%;
+  height: 200px;
+  width: 200px;
+  padding: 15px;
+  object-fit: cover;
+}
+
+.team-member h3 {
+  margin: 0 0 15px;
+}
+
+.member-description {
+  display: none;
+  text-align: center;
+}
+
+.people-container.active .member-description {
+  display: block;
+}
+
+.learn-more {
+  background: transparent;
+  border: none;
+  text-decoration: underline;
+  border-radius: 0.2em;
+  font-size: 15px;
+  padding-top: 15px;
+}
+
+.learn-more:hover {
+  background-color: rgb(203, 203, 203);
 }
diff --git a/public/people/johnson.png b/public/people/johnson.png
diff --git a/public/people/macmillan.png b/public/people/macmillan.png
diff --git a/public/people/mayfield.jpg b/public/people/mayfield.jpg
diff --git a/public/people/saupp.png b/public/people/saupp.png
diff --git a/public/people/stewart.jpg b/public/people/stewart.jpg
diff --git a/public/images/user.png → public/people/user.png b/public/images/user.png → public/people/user.png
diff --git a/public/themes.css b/public/themes.css
@@ -526,7 +526,7 @@ body:not(.embed) .resizeBarY {
 
 body:not(.embed) #bottom-part {
   display: flex;
-  overflow: scroll;
+  overflow: auto;
   /* Add this */
   flex-direction: row-reverse;
   /* Add this */
@@ -546,16 +546,6 @@ body:not(.embed) #bottom-part {
   color: var(--output-text-color);
 }
 
-.clearOut {
-  display: none;
-  position: absolute;
-  font-size: x-large;
-  top: 5px;
-  right: 10px;
-  cursor: pointer;
-}
-
-
 .stdout {
   margin-top: 0;
 }