refactor aspect_ratio field to use string type and update related com…

…ponents

backend/alembic/versions/0027_platforms_data.py

@@ -35,9 +35,9 @@ def upgrade() -> None:
         batch_op.add_column(
             sa.Column(
                 "aspect_ratio",
-                sa.Float(),
+                sa.String(length=10),
                 nullable=False,
-                server_default=str(DEFAULT_COVER_ASPECT_RATIO),
+                server_default=DEFAULT_COVER_ASPECT_RATIO,
             )
         )
     # ### end Alembic commands ###

backend/endpoints/responses/platform.py

@@ -23,7 +23,7 @@ class PlatformSchema(BaseModel):
     url_logo: str | None = None
     logo_path: str | None = None
     firmware: list[FirmwareSchema] = Field(default_factory=list)
-    aspect_ratio: float = DEFAULT_COVER_ASPECT_RATIO
+    aspect_ratio: str = DEFAULT_COVER_ASPECT_RATIO
     created_at: datetime
     updated_at: datetime
 

backend/models/platform.py

@@ -4,14 +4,14 @@
 
 from models.base import BaseModel
 from models.rom import Rom
-from sqlalchemy import Float, String, func, select
+from sqlalchemy import String, func, select
 from sqlalchemy.orm import Mapped, column_property, mapped_column, relationship
 
 if TYPE_CHECKING:
     from models.firmware import Firmware
 
 
-DEFAULT_COVER_ASPECT_RATIO = 2 / 3
+DEFAULT_COVER_ASPECT_RATIO = "2 / 3"
 
 
 class Platform(BaseModel):
@@ -37,8 +37,8 @@ class Platform(BaseModel):
         lazy="selectin", back_populates="platform"
     )
 
-    aspect_ratio: Mapped[float] = mapped_column(
-        Float, server_default=str(DEFAULT_COVER_ASPECT_RATIO)
+    aspect_ratio: Mapped[str] = mapped_column(
+        String, server_default=DEFAULT_COVER_ASPECT_RATIO
     )
 
     # This runs a subquery to get the count of roms for the platform

frontend/src/components/Gallery/AppBar/Platform/Base.vue

@@ -11,7 +11,6 @@ import PlatformIcon from "@/components/common/Platform/Icon.vue";
 import storeNavigation from "@/stores/navigation";
 import storeRoms from "@/stores/roms";
 import { storeToRefs } from "pinia";
-import { computed, ref, watch } from "vue";
 import { useDisplay } from "vuetify";
 
 // Props
@@ -20,41 +19,6 @@ const romsStore = storeRoms();
 const { currentPlatform } = storeToRefs(romsStore);
 const navigationStore = storeNavigation();
 const { activePlatformInfoDrawer } = storeToRefs(navigationStore);
-const selectedAspectRatio = ref(0);
-const aspectRatioOptions = computed(() => [
-  {
-    name: "2 / 3",
-    size: 2 / 3,
-    source: "SteamGridDB",
-  },
-  {
-    name: "3 / 4",
-    size: 3 / 4,
-    source: "IGDB / MobyGames",
-  },
-  {
-    name: "1 / 1",
-    size: 1 / 1,
-    source: "Old squared cases",
-  },
-]);
-
-watch(
-  () => currentPlatform.value?.aspect_ratio,
-  (aspectRatio) => {
-    if (aspectRatio) {
-      // Find the index of the aspect ratio option that matches the current aspect ratio
-      const defaultAspectRatio = aspectRatioOptions.value.findIndex(
-        (option) => Math.abs(option.size - aspectRatio) < 0.01, // Handle floating-point precision issues
-      );
-      // If a matching aspect ratio option is found, update the selectedAspectRatio
-      if (defaultAspectRatio !== -1) {
-        selectedAspectRatio.value = defaultAspectRatio;
-      }
-    }
-  },
-  { immediate: true }, // Execute the callback immediately with the current value
-);
 </script>
 
 <template>

frontend/src/components/Gallery/AppBar/Platform/PlatformInfoDrawer.vue

@@ -60,7 +60,7 @@ watch(
     if (aspectRatio) {
       // Find the index of the aspect ratio option that matches the current aspect ratio
       const defaultAspectRatio = aspectRatioOptions.value.findIndex(
-        (option) => Math.abs(option.size - aspectRatio) < 0.01, // Handle floating-point precision issues
+        (option) => option.name == aspectRatio,
       );
       // If a matching aspect ratio option is found, update the selectedAspectRatio
       if (defaultAspectRatio !== -1) {
@@ -91,7 +91,7 @@ async function setAspectRatio() {
       .updatePlatform({
         platform: {
           ...currentPlatform.value,
-          aspect_ratio: selectedOption.size,
+          aspect_ratio: selectedOption.name,
         },
       })
       .then(({ data }) => {
@@ -101,7 +101,7 @@ async function setAspectRatio() {
           color: "green",
         });
         if (currentPlatform.value) {
-          currentPlatform.value.aspect_ratio = selectedOption.size;
+          currentPlatform.value.aspect_ratio = selectedOption.name;
         }
       })
       .catch((error) => {

frontend/src/components/common/Game/Card/Base.vue

@@ -10,14 +10,14 @@ import storeDownload from "@/stores/download";
 import storeGalleryView from "@/stores/galleryView";
 import storeRoms from "@/stores/roms";
 import { type SimpleRom } from "@/stores/roms.js";
-import { onMounted, ref } from "vue";
+import { onMounted, ref, computed } from "vue";
 import { useTheme } from "vuetify";
 
 // Props
 const props = withDefaults(
   defineProps<{
     rom: SimpleRom | SearchRomSchema;
-    aspectRatio?: number;
+    aspectRatio?: string | number;
     transformScale?: boolean;
     titleOnHover?: boolean;
     showFlags?: boolean;
@@ -62,6 +62,13 @@ const card = ref();
 const theme = useTheme();
 const galleryViewStore = storeGalleryView();
 const collectionsStore = storeCollections();
+const computedAspectRatio = computed(() => {
+  const ratio =
+    props.aspectRatio ||
+    platfotmsStore.getAspectRatio(props.rom.platform_id) ||
+    galleryViewStore.defaultAspectRatioCover;
+  return parseFloat(ratio.toString());
+});
 
 // Functions
 onMounted(() => {
@@ -128,13 +135,7 @@ onMounted(() => {
                   ? rom.igdb_url_cover
                   : rom.moby_url_cover
           "
-          :aspect-ratio="
-            aspectRatio
-              ? aspectRatio
-              : platfotmsStore.getAspectRatio(rom.platform_id)
-                ? platfotmsStore.getAspectRatio(rom.platform_id)
-                : galleryViewStore.defaultAspectRatioCover
-          "
+          :aspect-ratio="computedAspectRatio"
         >
           <div v-bind="props" style="position: absolute; top: 0; width: 100%">
             <template v-if="titleOnHover">
@@ -209,7 +210,7 @@ onMounted(() => {
             <v-img
               :src="`/assets/default/cover/big_${theme.global.name.value}_missing_cover.png`"
               cover
-              :aspect-ratio="aspectRatio"
+              :aspect-ratio="computedAspectRatio"
             ></v-img>
           </template>
           <template #placeholder>

frontend/src/stores/platforms.ts

@@ -53,7 +53,9 @@ export default defineStore("platforms", {
     },
     getAspectRatio(platformId: number): number {
       const platform = this.allPlatforms.find((p) => p.id === platformId);
-      return platform && platform.aspect_ratio ? platform.aspect_ratio : 2 / 3;
+      return platform && platform.aspect_ratio
+        ? parseFloat(eval(platform.aspect_ratio as string))
+        : 2 / 3;
     },
   },
 });