Implement positioning for revealables

metadata/project.json

@@ -9,6 +9,7 @@
           "type": "LEGACY",
           "name": "trieNode",
           "path": "src/trieNode.ts",
+          "size": 85,
           "contents": "This file is a bit long, you might want to take a clear look and refactor it. The contributors of this subpackage could help here. Try to reveal them to see their contact info.",
           "url": "https://github.com/ethereumjs/ethereumjs-monorepo/blob/master/packages/trie/src/trieNode.ts",
           "imageUrl": null
@@ -17,6 +18,7 @@
           "type": "CONTRIBUTOR",
           "name": "Holger Drewes (holgerd77)",
           "path": null,
+          "size": 40,
           "contents": "This contributor has a lot of commits in this sub package, below you can find the contact information and a few commits from this repo.",
           "url": "https://github.com/ethereumjs/ethereumjs-monorepo/blob/master/packages/trie/src/trieNode.ts",
           "imageUrl": "https://avatars.githubusercontent.com/u/931137?v=4"
@@ -25,6 +27,7 @@
           "type": "PACKAGE",
           "name": "chalk",
           "path": "https://github.com/ethereumjs/ethereumjs-monorepo/blob/master/packages/client/package.json",
+          "size": 65,
           "contents": "This package is used in this part of the project. Take a look at the documentation in order to make yourself familiar with it",
           "url": "https://github.com/chalk/chalk",
           "imageUrl": null

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;
   }>;