Replace XMLHttpRequest with fetch API in levelControls.ts (#50)

- Modernize remote level loading with fetch API
- Simplify error handling
- Maintain same functionality
- Verified with Playwright and unit tests
- Fix Sass deprecation warnings
- Replace @import with @use directives
- Move @use statements to the top of the file
- Add @use "sass:math" and update random() function calls to math.random()
- Prepare for Dart Sass 3.0.0 compatibility

Resolves #48

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: cdroulers

src/block-fly/display/levelControls.ts

@@ -29,29 +29,18 @@ export function getDefaultLevels(): Promise<ILevelSet> {
 }
 
 export function getRemoteLevels(path: string): Promise<ILevelSet> {
-  return new Promise<ILevelSet>((resolve, reject) => {
-    const xhr = new XMLHttpRequest();
-
-    xhr.open("GET", path);
-    xhr.responseType = "json";
-
-    xhr.onload = () => {
-      if (xhr.status === 200) {
-        const json = typeof xhr.response === "string" ? JSON.parse(xhr.response) : xhr.response;
-        const levels = transformReponseToLevels(json, qualifyURL(path));
-        Storage.setItem(levels.uri, JSON.stringify(levels));
-        resolve(levels);
-      } else {
-        reject(Error("Cannot load levels; error : " + xhr.statusText));
+  return fetch(path)
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error(`Cannot load levels; error: ${response.status} ${response.statusText}`);
       }
-    };
-
-    xhr.onerror = () => {
-      reject(Error("There was a network error."));
-    };
-
-    xhr.send();
-  });
+      return response.json();
+    })
+    .then((json) => {
+      const levels = transformReponseToLevels(json, qualifyURL(path));
+      Storage.setItem(levels.uri, JSON.stringify(levels));
+      return levels;
+    });
 }
 
 export function getLevelsFromFile(file: File): Promise<ILevelSet> {

src/block-fly/stylesheets/fireworks.style.scss

@@ -1,4 +1,6 @@
 // Taken from https://codepen.io/yshlin/pen/ylDEk
+@use "sass:math";
+
 $particles: 50;
 $width: 500;
 $height: 500;
@@ -9,11 +11,11 @@ $box-shadow2: ();
 @for $i from 0 through $particles {
   $box-shadow:
     $box-shadow,
-    random($width) - calc($width / 2) +
+    math.random($width) - calc($width / 2) +
       px
-      random($height) - calc($height / 1.2) +
+      math.random($height) - calc($height / 1.2) +
       px
-      hsl(random(360), 100%, 50%);
+      hsl(math.random(360), 100%, 50%);
   $box-shadow2:
     $box-shadow2,
     0 0 #fff;

src/block-fly/stylesheets/site.style.scss

@@ -1,3 +1,7 @@
+@use "./mdl-overrides.style";
+@use "./dialog-polyfill.style";
+@use "./fireworks.style";
+
 :root {
   --very-dark-background: #333;
   --slightly-dark-background: #bbb;
@@ -80,7 +84,3 @@ a[href^="http://"], a[href^="https://"]
   background: center right no-repeat
     url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICB3aWR0aD0iMTAiCiAgIGhlaWdodD0iMTAiCiAgIGlkPSJzdmcyIj4KICA8bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE3Ij4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZwogICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKC04MjYuNDI4NTksLTY5OC43OTA3NykiCiAgICAgaWQ9ImxheWVyMSI+CiAgICA8cmVjdAogICAgICAgd2lkdGg9IjUuOTgyMTQyOSIKICAgICAgIGhlaWdodD0iNS45ODIxNDI5IgogICAgICAgeD0iODI2LjkyODU5IgogICAgICAgeT0iNzAyLjMwODY1IgogICAgICAgaWQ9InJlY3QyOTk2IgogICAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtzdHJva2U6IzAwNjZjYztzdHJva2Utd2lkdGg6MXB4O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1vcGFjaXR5OjEiIC8+CiAgICA8ZwogICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMC43MDcxMDY3OCwwLjcwNzEwNjc4LC0wLjcwNzEwNjc4LDAuNzA3MTA2NzgsNzYyLjg3LC0zNTkuODgzMzkpIgogICAgICAgaWQ9Imc0ODE1Ij4KICAgICAgPHBhdGgKICAgICAgICAgZD0ibSA3OTYuOTA4MTksNzAwLjI4MzE3IDMuNzAxMjcsLTMuNzAxMjYgMy44MTE3NCwzLjgxMTc1IC0wLjAxODksMi4yMDMzNiAtMS44NTIzNCwwIDAsMy44NTQzIC0zLjgwMjMzLDAgMCwtMy45NzEwOCAtMS44NTM2LDAgeiIKICAgICAgICAgaWQ9InBhdGg0Nzc3IgogICAgICAgICBzdHlsZT0iZmlsbDojMDA2NmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lIiAvPgogICAgICA8cGF0aAogICAgICAgICBkPSJtIDgwMC42MDk0Niw2OTguMDAyNDQgMy40Njk4NiwzLjQzODY1IC0yLjU3MDIsMCAwLDQuMDc0MzYgLTEuNzM2MiwwIDAsLTQuMDc0MzYgLTIuNjE3NTQsLTMuNmUtNCB6IgogICAgICAgICBpZD0icGF0aDQ3NzkiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiIC8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4K);
 }
-
-@import "./mdl-overrides.style";
-@import "./dialog-polyfill.style";
-@import "./fireworks.style";