Implement positioning for revealables

src/helpers.ts

@@ -89,3 +89,18 @@ export function getRevealablesforSubproject(
       type: RevealableTypes[revealable.type],
     }));
 }
+
+export function generateRevealableCoords(): Coordinates[] {
+  const areaWidth = mp5.width / 3;
+  const rowHeight = mp5.height / 2;
+
+  // Max. 6 revealables one in each area
+  return [
+    { x: mp5.random(25, areaWidth), y: mp5.random(25, rowHeight) },
+    { x: mp5.random(areaWidth, areaWidth * 2), y: mp5.random(25, rowHeight) },
+    { x: mp5.random(areaWidth * 2, areaWidth * 3), y: mp5.random(25, rowHeight) },
+    { x: mp5.random(25, areaWidth), y: mp5.random(rowHeight, rowHeight * 2) },
+    { x: mp5.random(areaWidth, areaWidth * 2), y: mp5.random(rowHeight, rowHeight * 2) },
+    { x: mp5.random(areaWidth * 2, areaWidth * 3), y: mp5.random(rowHeight, rowHeight * 2) },
+  ];
+}

src/scenes/DetailScene.ts

@@ -1,12 +1,15 @@
 import { mp5 } from '../../main';
 import { colors } from '../constants/colors';
+import { generateRevealableCoords } from '../helpers';
 import { Player } from '../sketchObjects/Player';
 import { Revealable, RevealableInterface } from '../sketchObjects/Revealable';
 import store from '../store';
+import { Coordinates } from '../types';
 
 export class DetailScene {
   player: Player;
   revealables: RevealableInterface[];
+  revealableCoords: Coordinates[];
   revealableObjects: Revealable[];
 
   constructor() {
@@ -14,8 +17,14 @@ export class DetailScene {
 
     store.subscribe((state) => {
       this.revealables = state.revealables;
+      this.revealableCoords = generateRevealableCoords();
       this.revealableObjects = this.revealables.map(
-        (revealable) => new Revealable(revealable, { x: 100, y: 200, w: 65 })
+        (revealable, i) =>
+          new Revealable(revealable, {
+            x: this.revealableCoords[i].x,
+            y: this.revealableCoords[i].y,
+            w: this.revealables[i].size,
+          })
       );
     });
   }

src/sketchObjects/Revealable.ts

@@ -15,6 +15,7 @@ export interface RevealableInterface {
   name: string;
   contents: string;
   url: string;
+  size: number;
   path?: string;
   imageUrl?: string;
 }

src/types.ts

@@ -16,6 +16,7 @@ export interface JSONSubproject {
     name: string;
     contents: string;
     url: string;
+    size: number;
     path?: string;
     imageUrl?: string;
   }>;