Extended settings modal, credits modal, new banner, bug fixes

Author: faisalnjs

README.md

@@ -13,9 +13,9 @@ Next generation clicking: fixed, upgraded, and cloud hosted ☁️🚀
 - Class Make-up Modes
 - Many More Features
 
-![Wakatime](https://wakatime.com/badge/user/074621a8-639e-4f3e-b6d9-f23b6bb481a9/project/db7c4936-fbf0-463d-a191-cbc2481a5402.svg)
-![Github Issues](https://img.shields.io/github/issues/faisalnjs/virtual-clicker?style=flat&logo=github&label=GitHub%20Issues&color=mediumseagreen)
-![License](https://img.shields.io/github/license/faisalnjs/virtual-clicker?label=License)
+[![Wakatime](https://wakatime.com/badge/user/074621a8-639e-4f3e-b6d9-f23b6bb481a9/project/db7c4936-fbf0-463d-a191-cbc2481a5402.svg)](https://faisaln.com/portfolio/virtual-clicker)
+[![Github Issues](https://img.shields.io/github/issues/faisalnjs/virtual-clicker?style=flat&logo=github&label=GitHub%20Issues&color=mediumseagreen)](https://wakatime.com/@faisalnjs/projects/jsltfbfvue)
+[![License](https://img.shields.io/github/license/faisalnjs/virtual-clicker?label=License)](https://github.com/faisalnjs/Virtual-Clicker/blob/main/LICENSE)
 
 ## Development
 
@@ -24,28 +24,31 @@ Next generation clicking: fixed, upgraded, and cloud hosted ☁️🚀
 
 Vite will start a development server at `localhost:5173`
 
-### Credits
-
-- [khui0](https://github.com/khui0) - Commits before 5/21/2024
-
 ## Build
 
 `npm run build`
 
 Serve the files that are generated in `/dist`
 
-![Build](https://img.shields.io/github/actions/workflow/status/faisalnjs/virtual-clicker/deploy.yml?logo=github&label=Build&color=mediumseagreen)
+[![Build](https://img.shields.io/github/actions/workflow/status/faisalnjs/virtual-clicker/deploy.yml?logo=github&label=Build&color=mediumseagreen)](https://github.com/faisalnjs/Virtual-Clicker/actions/workflows/deploy.yml)
 
 ## Beta
 
-A beta version of this project is hosted on [Dango Web Solutions](https://dangoweb.com/?from=virtual-clicker) cloud hosting - free web hosting for Education. The beta version is updated with the latest changes from the [`beta`](https://github.com/faisalnjs/Virtual-Clicker/tree/beta) branch. The beta version is used for testing new features and bug fixes before they are deployed to production. The beta version is not guaranteed to be stable and may contain bugs or unfinished features.
+A beta version of this project is hosted on [Dango Web Solutions](https://dangoweb.com/?from=virtual-clicker) cloud hosting. The beta version is updated with the latest changes from the [`beta`](https://github.com/faisalnjs/Virtual-Clicker/tree/beta) branch, and is used for testing new features and bug fixes before they are deployed to production. The beta version is not guaranteed to be stable and may contain bugs or unfinished features.
 
 Files are transferred to the host using the GitHub Action automation workflow at [.github\workflows\deploy-beta.yml](https://github.com/faisalnjs/Virtual-Clicker/tree/main/.github/workflows/deploy-beta.yml).
 
+[![GitHub Actions - Deploy to Dango Web Solutions (Beta)](https://img.shields.io/github/actions/workflow/status/faisalnjs/virtual-clicker/deploy-beta.yml?logo=github&label=GitHub%20Actions%20-%20Deploy%20to%20Dango%20Web%20Solutions%20(Beta)&color=mediumseagreen)](https://github.com/faisalnjs/Virtual-Clicker/actions/workflows/deploy-beta.yml)
+
 ## Production
 
 This project is hosted on [Dango Web Solutions](https://dangoweb.com/?from=virtual-clicker) cloud hosting - free web hosting for Education.
 
 Files are transferred to the host using the GitHub Action automation workflow at [.github\workflows\deploy.yml](https://github.com/faisalnjs/Virtual-Clicker/tree/main/.github/workflows/deploy.yml).
 
-![GitHub Actions](https://img.shields.io/github/actions/workflow/status/faisalnjs/virtual-clicker/deploy.yml?logo=github&label=GitHub%20Actions&color=mediumseagreen)
+[![GitHub Actions - Deploy to Dango Web Solutions](https://img.shields.io/github/actions/workflow/status/faisalnjs/virtual-clicker/deploy.yml?logo=github&label=GitHub%20Actions%20-%20Deploy%20to%20Dango%20Web%20Solutions&color=mediumseagreen)](https://github.com/faisalnjs/Virtual-Clicker/actions/workflows/deploy.yml)
+
+## Credits
+
+- [khui0](https://github.com/khui0) - Commits before 5/21/2024 including original design and development, logo image
+- [faisalnjs](https://github.com/faisalnjs) - Commits after 5/21/2024 including set and FRQ input modes, make-up mode, banner image

banner.png

@@ -202,12 +202,14 @@ <h2 id="history-date"></h2>
   </dialog>
   <!-- Settings -->
   <dialog data-modal-page="settings" data-page-title="Settings">
+    <img src="banner.png" alt="Virtual Clicker Banner">
     <p id="version-string"><span class="version"></span></p>
     <button data-modal-view="settings/code">Seat Code</button>
     <button data-modal-view="settings/theme">Theme</button>
     <button data-modal-view="settings/keybinds">Keyboard Shortcuts</button>
     <button data-modal-view="settings/makeup">Make Up Clicks Mode On/Off</button>
     <button data-modal-view="settings/reset">Reset</button>
+    <button data-modal-view="settings/credits">Credits</button>
     <div class="row center">
       <a href="https://github.com/faisalnjs/virtual-clicker" class="icon"><i class="bi bi-github"></i></a>
       <a href="https://dangoweb.com/?from=virtual-clicker" class="icon"><i class="bi bi-cloud-fill"></i></a>
@@ -331,6 +333,10 @@ <h1 class="text-placeholder">000</h1>
         <button id="makeup-click-button">Make Up Clicks</button>
       </div>
     </div>
+    <div data-modal-page="credits" data-page-title="Credits">
+      <p><a href="https://github.com/khui0">khui0</a> - Commits before 5/21/2024 including original design and development, logo image</p>
+      <p><a href="https://github.com/faisalnjs">faisalnjs</a> - Commits after 5/21/2024 including set and FRQ input modes, make-up mode, banner image</p>
+    </div>
   </dialog>
   <dialog data-modal-page="clear-data-fix" data-page-title="Settings May Not Save">
     <p>

index.html

@@ -8,6 +8,7 @@ import { convertLatexToAsciiMath, convertLatexToMarkup, renderMathInElement } fr
 ``;
 
 try {
+  var period = document.getElementById("period-input").value;
   const questionInput = document.getElementById("question-input");
   const answerInput = document.getElementById("answer-input");
   const mf = document.getElementById("math-input");
@@ -56,7 +57,7 @@ try {
     // Populate seat code finder grid
     for (let col = 1; col <= 5; col++) {
       for (let row = 6; row > 0; row--) {
-        const period = document.getElementById("period-input").value;
+        period = document.getElementById("period-input").value;
         const code = period + row.toString() + col.toString();
         const button = new ui.Element("button", "", {
           click: () => {
@@ -68,6 +69,23 @@ try {
         ui.addTooltip(button, code);
       }
     }
+    document.getElementById("period-input").addEventListener("change", (e) => {
+      document.getElementById("seat-grid").innerHTML = "";
+      for (let col = 1; col <= 5; col++) {
+        for (let row = 6; row > 0; row--) {
+          period = document.getElementById("period-input").value;
+          const code = period + row.toString() + col.toString();
+          const button = new ui.Element("button", "", {
+            click: () => {
+              document.getElementById("code-input").value = code;
+              ui.view("settings/code");
+            },
+          }).element;
+          document.getElementById("seat-grid").append(button);
+          ui.addTooltip(button, code);
+        }
+      }
+    });
     // Update history feed
     updateHistory();
     // Focus answer input

src/clicker/clicker.js

@@ -21,6 +21,27 @@ dialog:modal {
   max-height: calc(100vh - 2rem);
 }
 
+dialog img {
+  border-radius: 0.5rem;
+}
+
+dialog #version-string {
+  margin-top: -37px;
+  margin-bottom: 9px;
+  margin-left: 5px;
+  padding: 3px 10px 1px 10px;
+  background-color: var(--text-color);
+  backdrop-filter: blur(5px);
+  width: fit-content;
+  color: var(--background-color);
+  border-radius: 0.25rem;
+  z-index: 1;
+}
+
+dialog #version-string span {
+  background: transparent;
+}
+
 div[data-modal-page] {
   display: flex;
   flex-direction: column;