Added map quality option and selector in map select screen

src/components/map/MapInteraction.js

@@ -32,9 +32,8 @@ function MapInteraction({
 }) {
   let mapSourceMap = map;
   if (map && map.type === "file") {
-    // if no file loaded but we have other resolutions
-    if (map.resolutions.length > 0 && !map.file) {
-      mapSourceMap = map.resolutions[map.resolutions.length - 1];
+    if (map.resolutions && map.quality !== "original") {
+      mapSourceMap = map.resolutions[map.quality];
     }
   }
 

src/components/map/MapSettings.js

@@ -15,6 +15,14 @@ import { isEmpty } from "../../helpers/shared";
 
 import Divider from "../Divider";
 
+const qualitySettings = [
+  { id: "low", name: "Low" },
+  { id: "medium", name: "Medium" },
+  { id: "high", name: "High" },
+  { id: "ultra", name: "Ultra High" },
+  { id: "original", name: "Original" },
+];
+
 function MapSettings({
   map,
   mapState,
@@ -102,6 +110,26 @@ function MapSettings({
               Show Grid
             </Label>
           </Flex>
+          <Flex my={2} sx={{ alignItems: "center" }}>
+            <Box sx={{ width: "50%" }}>
+              <Label>Map Quality</Label>
+              <Select
+                my={1}
+                value={!mapEmpty && map.quality}
+                disabled={mapEmpty || map.type === "default"}
+                onChange={(e) => onSettingsChange("quality", e.target.value)}
+              >
+                {qualitySettings.map((quality) => (
+                  <option key={quality.id} value={quality.id}>
+                    {quality.name}
+                  </option>
+                ))}
+              </Select>
+            </Box>
+            <Label sx={{ width: "50%" }} ml={2}>
+              Size: XX
+            </Label>
+          </Flex>
           <Divider fill />
           <Box my={2} sx={{ flexGrow: 1 }}>
             <Label>Allow Others to Edit</Label>

src/components/map/MapTile.js

@@ -21,7 +21,7 @@ function MapTile({
   const isDefault = map.type === "default";
 
   const mapSource = useDataSource(
-    isDefault ? map : map.resolutions.length > 0 ? map.resolutions[0] : map,
+    isDefault ? map : map.resolutions.low ? map.resolutions.low : map,
     defaultMapSources,
     unknownSource
   );

src/modals/SelectMapModal.js

@@ -21,11 +21,14 @@ const defaultMapProps = {
   // TODO: add support for hex horizontal and hex vertical
   gridType: "grid",
   showGrid: false,
+  quality: "original",
 };
 
 const mapResolutions = [
-  { size: 256, quality: 0.25 },
-  { size: 1024, quality: 0.5 },
+  { size: 512, quality: 0.25, id: "low" },
+  { size: 1024, quality: 0.5, id: "medium" },
+  { size: 2048, quality: 0.75, id: "high" },
+  { size: 4096, quality: 0.8, id: "ultra" },
 ];
 
 function SelectMapModal({
@@ -111,7 +114,7 @@ function SelectMapModal({
     return new Promise((resolve, reject) => {
       image.onload = async function () {
         // Create resolutions
-        const resolutions = [];
+        const resolutions = {};
         for (let resolution of mapResolutions) {
           if (Math.max(image.width, image.height) > resolution.size) {
             const resized = await resizeImage(
@@ -121,12 +124,13 @@ function SelectMapModal({
               resolution.quality
             );
             const resizedBuffer = await blobToBuffer(resized.blob);
-            resolutions.push({
+            resolutions[resolution.id] = {
               file: resizedBuffer,
               width: resized.width,
               height: resized.height,
               type: "file",
-            });
+              id: resolution.id,
+            };
           }
         }
 

src/routes/Game.js

@@ -120,7 +120,7 @@ function Game() {
     // they have an outdated version
     if (mapData.type === "file") {
       const { file, resolutions, ...rest } = mapData;
-      peer.connection.send({ id: "map", data: { ...rest, resolutions: [] } });
+      peer.connection.send({ id: "map", data: { ...rest } });
     } else {
       peer.connection.send({ id: "map", data: mapData });
     }
@@ -336,24 +336,41 @@ function Game() {
     // Send full map data including file
     if (data.id === "mapRequest") {
       const map = getMap(data.data);
-      peer.connection.send({
-        id: "mapResponse",
-        data: { id: map.id, resolutions: map.resolutions },
-      });
-      peer.connection.send({
-        id: "mapResponse",
-        data: { id: map.id, file: map.file },
-      });
+
+      function respond(file) {
+        peer.connection.send({
+          id: "mapResponse",
+          data: { id: map.id, file },
+        });
+      }
+
+      switch (map.quality) {
+        case "low":
+          respond(map.resolutions.low.file);
+          break;
+        case "medium":
+          respond(map.resolutions.low.file);
+          respond(map.resolutions.medium.file);
+          break;
+        case "high":
+          respond(map.resolutions.medium.file);
+          respond(map.resolutions.high.file);
+          break;
+        case "ultra":
+          respond(map.resolutions.medium.file);
+          respond(map.resolutions.ultra.file);
+          break;
+        case "original":
+          respond(map.resolutions.medium.file);
+          respond(map.file);
+          break;
+        default:
+          respond(map.file);
+      }
     }
     // A new map response with a file attached
     if (data.id === "mapResponse") {
-      let update = {};
-      if (data.data.file) {
-        update.file = data.data.file;
-      }
-      if (data.data.resolutions) {
-        update.resolutions = data.data.resolutions;
-      }
+      let update = { file: data.data.file };
       const map = getMap(data.data.id);
       updateMap(map.id, update).then(() => {
         setCurrentMap({ ...map, ...update });