Merge pull request #96 from PSDTools/map-fixes

Backport Refactors from PHS-Map

Author: lishaduck

.gitattributes

@@ -0,0 +1,3 @@
+/.yarn/releases/** binary
+/.yarn/plugins/** binary
+*.lockb diff=lockb

.github/workflows/main.yml

@@ -30,23 +30,27 @@ jobs:
 
       - name: Install bun
         uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: 1.0.29
 
       - name: Cache
-        uses: actions/[email protected]
+        uses: actions/cache@13aacd865c20de90d75de3b17ebe84f7a17d57d2 # v4.0.0
+        id: cache
         with:
           path: |
             .turbo
             node_modules
             ~/.bun/install/cache
-          key: ${{ runner.os }}-bun-turbo-${{ hashFiles('**/turbo.json') }}
+          key: ${{ runner.os }}-${{ runner.arch }}-node_modules-${{ hashFiles('**/bun.lockb', '**/turbo.json') }}
 
       - name: Install dependencies
-        run: bun install --frozen-lockfile
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: bun --bun install --frozen-lockfile
+        env:
+          SHARP_IGNORE_GLOBAL_LIBVIPS: 1
 
       - name: Lint & Build
-        # Use --bun once the next release is cut.
-        # Right now, bun is incorrectly parsing dotfiles.
-        run: bun run turbo build
+        run: bun --bun run turbo build
 
       - name: Redirect 404 to Index for SPA
         run: cp dist/index.html dist/404.html

.nvmrc

@@ -0,0 +1 @@
+v21.6.2

.vscode/settings.json

@@ -7,9 +7,9 @@
     }
   },
   "explorer.fileNesting.patterns": {
-    ".replit": "replit.nix",
-    "package.json": "package-lock.json",
-    "REAME*": "*.${capture}"
+    "package.json": ".prettierrc, .prettierignore, bun.lockb, eslint.config.js, turbo.json",
+    "README*": "*.${capture}",
+    ".replit": "replit.*"
   },
   "cSpell.enableFiletypes": ["!typescript"],
   "prettier.prettierPath": "./node_modules/prettier/index.cjs"

bun.lockb

@@ -1,43 +1,44 @@
-// @ts-check
 import { sheriff } from "eslint-config-sheriff";
 import { defineFlatConfig } from "eslint-define-config";
 
+/**
+ * @type import("@sherifforg/types").SheriffSettings
+ */
 const sheriffOptions = {
   react: false,
   lodash: false,
   next: false,
   playwright: false,
   jest: false,
   vitest: false,
+  // astro: false, // THIS DOESN'T DO ANYTHING!
   pathsOveriddes: {
     tsconfigLocation: [
       "./tsconfig.json",
       "./tsconfig.sw.json",
       "./tsconfig.eslint.json",
     ],
-    ignores: [
-      "**/node_modules/**",
-      "**/dist/**",
-      "**/dev-dist/**",
-      "**/build/**",
-      "**/.yarn/**",
-      "**/.pnp.*",
-    ],
   },
 };
 
+/**
+ * @type import("eslint-define-config").FlatESLintConfig[]
+ */
+// @ts-expect-error: null and undefined are different.
+const sheriffRules = sheriff(sheriffOptions);
+
 export default defineFlatConfig([
-  ...sheriff(sheriffOptions),
+  ...sheriffRules,
   {
     files: ["**/*.ts"],
     rules: {
-      "padding-line-between-statements": "off",
       "@typescript-eslint/naming-convention": "off",
       "prefer-destructuring": "off",
-      "unicorn/prefer-query-selector": "off",
+      "@typescript-eslint/prefer-destructuring": "warn",
+      "unicorn/prefer-query-selector": "warn",
       "func-style": ["error", "declaration", { allowArrowFunctions: true }],
       "no-plusplus": ["error", { allowForLoopAfterthoughts: true }],
-      "operator-assignment": ["off", "always"],
+      "operator-assignment": ["warn", "always"],
       "@typescript-eslint/no-non-null-assertion": "off",
       "no-console": "warn",
       "no-negated-condition": "off",
@@ -47,6 +48,10 @@ export default defineFlatConfig([
         { "ts-expect-error": true, "ts-check": false },
       ],
       "import/no-unresolved": [2, { ignore: ["^virtual:"] }],
+      "@typescript-eslint/prefer-function-type": "warn",
+      "@typescript-eslint/explicit-function-return-type": "warn",
+      "@typescript-eslint/promise-function-async": "warn",
+      "@typescript-eslint/strict-boolean-expressions": "warn",
     },
   },
 ]);

eslint.config.js

@@ -5,49 +5,35 @@
     <meta name="viewport" content="width=device-width" />
     <base href="/" />
     <title>GPA Calculator</title>
-    <link
-      href="/AppImages/android/android-launchericon-512-512.png"
-      rel="shortcut icon"
-    />
     <script type="module" src="/src/script.ts"></script>
     <script src="https://cdn.tailwindcss.com"></script>
   </head>
   <body
     id=""
     class="bg-[url('/GPA_Calculator/bground.png')]"
-    onload="getStorage()"
+    onload="startApp()"
   >
     <!-- The overlay -->
-    <div id="mySidenav" class="overlay">
+    <div id="mySidenav" class="overlay w-0">
       <!-- Button to close the overlay navigation -->
       <a href="javascript:void(0)" class="closebtn" onclick="toggleNav(false)"
         >&times;</a
       >
 
       <!-- Overlay content -->
-      <form class="overlay-content text-white">
-        <label>
-          <button
-            type="submit"
-            id="clearDataButton"
-            style="background-color: #00d5ff; color: black"
-            onclick="clearData()"
-          >
-            Clear Grade Data
-          </button>
-          <p class="text-sm mt-4">Note: This action refreshes the page.</p>
-        </label>
-
-        <!-- <button id="darkModeButton" onclick="darkMode()">Dark Mode</button> -->
-        <p></p>
+      <form class="overlay-content text-white flex flex-col">
+        <p class="text-white text-sm mt-4">These actions refresh the page.</p>
         <button
+          class="text-white m-2"
           type="submit"
-          style="background-color: #00d5ff; color: black"
-          onclick="clearAll()"
+          id="clearDataButton"
+          onclick="clearData()"
         >
+          Clear Grade Data
+        </button>
+        <button class="text-white m-2" type="submit" onclick="clearAll()">
           Clear All Site Data
         </button>
-        <p></p>
       </form>
     </div>
 
@@ -59,7 +45,6 @@
           type="button"
           onclick="toggleNav(true)"
           class="pb-8 text-xl text-white rounded-full w-8 h-8"
-          style="background-color: #00d5ff; color: black"
         >
           ☰
         </button>
@@ -86,56 +71,7 @@
       </div>
     </div>
 
-    <!-- Side Navigation -->
-    <!-- <nav id="mySidebar">
-      <button onclick="w3_close()">Close <i></i></button>
-      <p></p>
-      <button onclick="document.getElementById('id01').style.display='block'">
-        Select Grade Level
-      </button>
-      <p></p>
-      <button id="darkModeButton" onclick="darkMode()">Dark Mode</button>
-      <p></p>
-      <p></p>
-
-      <p>Note: This action refreshes the page.</p>
-      <p></p>
-      <button onclick="clearAll()">Clear All Site Data</button>
-      <p></p>
-
-    <!- Google Translate -->
-    <!-- <div id="google_translate_element"></div> -->
-    <!-- <script type="text/javascript">
-        // <![CDATA[
-        function googleTranslateElementInit() {
-          new google.translate.TranslateElement(
-            {
-              pageLanguage: "en",
-              layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
-            },
-            "google_translate_element"
-          );
-        }
-        // ]]>
-      </script>
-      <script
-        src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
-        type="text/javascript"
-      ></script> -->
-    <!-- </nav> -->
-
-    <!-- Header -->
-    <header id="myHeader">
-      <!-- <i onclick="w3_open()"></i>
-      <div>
-        <h4 class="absolute top-0 left-0 shadow-lg p-4 text-white bg-black">
-          Pattonville
-        </h4>
-        <input onclick="hsmsSwap()" type="checkbox" id="hsmsInput" checked />
-
-        <h1>GPA Calculator</h1>
-      </div> -->
-    </header>
+    <header id="myHeader"></header>
     <div class="lg:pb-8 lg:flex h-full text-white">
       <div
         class="basis-1/3 lg:rounded-br-lg lg:px-10 lg:pt-8 p-8 bg-black lg:h-screen"
@@ -145,7 +81,6 @@ <h5>How to use!</h5>
           Input number of classes you are taking and press "Submit", then input
           your grades under "Grades".
         </p>
-        <p></p>
         <p id="Directions2">
           Your class data will then be saved to your device. This is so if you
           refresh, your data is saved!
@@ -161,107 +96,23 @@ <h5>How to use!</h5>
           <button
             onclick="classAmount()"
             class="text-black px-1 rounded-sm"
-            style="background-color: #00d5ff; color: black"
             type="submit"
           >
             Submit
           </button>
         </form>
-        <p></p>
       </div>
 
       <div class="lg:w-2/3 lg:px-16 px-4 lg:p-8 p-4" id="c">
         <h5>Grades:</h5>
-        <p></p>
         <div id="temp1"></div>
         <div
           class="lg:drop-shadow-2xl lg:fixed static lg:right-16 lg:bottom-16 p-4 bg-black rounded-lg text-white"
         >
           <h2 class="" id="gpa">No Data</h2>
         </div>
         <p id="saved"></p>
-        <!-- <button id="gpaButton" onclick="loadgpa()">
-          Calculate GPA and Save
-        </button> -->
       </div>
     </div>
-
-    <!-- <div id="id01" class="">
-      <div class="">
-        <header class="">
-          <h3>Choose Your Grade Level</h3>
-        </header>
-        <div class="">
-          <h4 id="modalClass">Middle School</h4>
-          <label class="switch">
-            <span></span>
-          </label>
-          <p></p>
-          <span
-            onclick="document.getElementById('id01').style.display='none'"
-            class=""
-            >Ok</span
-          >
-          <p></p>
-        </div>
-        <footer class="">
-          <p>This can be changed later inside the menu.</p>
-        </footer>
-      </div>
-    </div> -->
-
-    <!-- Easter Egg -->
-
-    <!-- Footer -->
-    <footer id="myFooter">
-      <!-- <h3>About</h3>
-      Easter egg
-      <p>.... . .-.. .-.. --- / - .... . .-. . -.-.--</p>
-      <!- Info -->
-      <!--
-      <p>
-        Created by Parker Hasenkamp for the
-        <a href="https://psdr3.org" target="_blank"
-          >Pattonville School District</a
-        >
-      </p>
-      <p>
-        My submission for the 2021
-        <a href="https://www.congressionalappchallenge.us/" target="_blank"
-          >Congressional App Challenge!</a
-        >
-      </p> -->
-    </footer>
-    <!--Smooth Scroll Buttons-->
-    <!-- <script type="module">
-      import $ from "jquery";
-
-      $(document).ready(function () {
-        // Add smooth scrolling to all links
-        $("a").on("click", function (event) {
-          // Make sure this.hash has a value before overriding default behavior
-          if (this.hash !== "") {
-            // Prevent default anchor click behavior
-            event.preventDefault();
-
-            // Store hash
-            var hash = this.hash;
-
-            // Using jQuery's animate() method to add smooth page scroll
-            // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
-            $("html, body").animate(
-              {
-                scrollTop: $(hash).offset().top,
-              },
-              1000,
-              function () {
-                // Add hash (#) to URL when done scrolling (default click behavior)
-                window.location.hash = hash;
-              }
-            );
-          } // #ENDIF
-        });
-      });
-    </script> -->
   </body>
 </html>