feat: fetch images from storage

frontend/.env.development

 BACKEND_URL=http://localhost:8080
+STORAGE_URL=http://localhost:9000/oetzit/
 APP_VERSION=development

frontend/.env.production

 BACKEND_URL=https://kommul.eurac.edu/oetzit/
+STORAGE_URL=https://kommul.eurac.edu/oetzit-storage-api/words/

frontend/.env.staging

 BACKEND_URL=https://kommul-dev.eurac.edu/oetzit/
+STORAGE_URL=https://kommul-dev.eurac.edu/oetzit-storage-api/words/

frontend/src/js/backend.ts

@@ -9,11 +9,17 @@ import * as Types from "../../../backend/src/types";
 
 // TODO: raise an error if env var is missing
 const BACKEND_URL = new URL(process.env.BACKEND_URL ?? "");
+const STORAGE_URL = new URL(process.env.STORAGE_URL ?? "");
 
 const backend = axios.create({
   baseURL: BACKEND_URL.toString(),
 });
 
+const storage = axios.create({
+  baseURL: STORAGE_URL.toString(),
+  responseType: "arraybuffer",
+});
+
 export default {
   createDevice: () => backend.post<Types.Device>("/api/devices"),
   getDevice: (deviceId: string) =>
@@ -34,4 +40,6 @@ export default {
     backend.patch<Types.Clue>(`/api/clues/${clueId}`, data),
   createShot: (gameId: string, data: Types.ShotCreate) =>
     backend.post<Types.Shot>(`/api/games/${gameId}/shots`, data),
+  getWordImage: (pageId: string, wordId: string) =>
+    storage.get(`/${pageId}/${wordId}.png`),
 };

frontend/src/js/clue_payloads.ts

 import "phaser";
 
 import { Word } from "../../../backend/src/types";
+import backend from "./backend";
 import TEXT_STYLES from "./text_styles";
 
 interface CluePayload {
@@ -54,10 +55,23 @@ export class SpriteCluePayload
     this.baseHeight = baseHeight;
   }
 
-  loadWord(word: { id: string; image: string; ocr_transcript: string }) {
+  loadWord(word: {
+    id: string;
+    page_id: string;
+    word_id: string;
+    ocr_transcript: string;
+  }) {
     // NOTE: this is a throwaway key, we're not leveraging cache
     const textureKey = `${word.id}-${Date.now()}`;
-    this.scene.textures.addBase64(textureKey, word.image);
+
+    backend.getWordImage(word.page_id, word.word_id).then((response) => {
+      const data = Buffer.from(response.data, "binary").toString("base64");
+      this.scene.textures.addBase64(
+        textureKey,
+        `data:image/png;base64,${data}`,
+      );
+    });
+
     this.scene.textures.once("addtexture", () => {
       this.setTexture(textureKey);
       this.adjustTextureScale(word);