Add questions and constant movement for detail scene

index.html

@@ -226,21 +226,41 @@
           <p>Have fun! 🤟</p>
         </div>
         <div id="intro-step5">
-          <h1>Questions about this visualization sepcifically</h1>
+          <h1>Questions about this Project</h1>
           <p>
-            After the project-specific "knowledge" questions in the last step I want to get your
-            valuable input as a developer for the following questions:
+            Thanks for going through this visualization. It would be great if you could answer a set
+            of questions now:
           </p>
           <label for="k-1">
-            1) Do you remember any of the contributors of this project? Please name them below
+            1) Do you remember any of the contributors of this project? Please name those that you
+            remember below
             <textarea id="k-1" name="k-1"></textarea>
           </label>
+          <label for="k-2">
+            2) What were the two largest packages of this monorepo (not the npm packages, but the
+            ones the monorepo is made out of)?
+            <textarea id="k-2" name="k-2"></textarea>
+          </label>
+          <label for="k-3">
+            3) Which of the project's own packages was used most within other parts of the project?
+            <textarea id="k-3" name="k-3"></textarea>
+          </label>
+          <label for="k-4">
+            4) Any npm packages you've revealed in this project, that you can think of? did you take
+            a look at their respective websites?
+            <textarea id="k-4" name="k-4"></textarea>
+          </label>
+          <label for="k-5">
+            5) Have you taken a look at any of the files that were potentially "legacy" files? If
+            yes, did you agree on them being "refactor-worthy" or do you think they were fine as-is?
+            <textarea id="k-5" name="k-5"></textarea>
+          </label>
         </div>
         <div id="intro-step6">
           <h1>Questions about Play in Software Development</h1>
           <p>
-            After the project-specific "knowledge" questions in the last step I want to get your
-            valuable input as a developer for the following questions:
+            After the project-specific questions in the last step I want to get your valuable input
+            as a developer for the following questions:
           </p>
           <label for="fb-1">
             1) Would you say, that you have learned something about the underlying project from

src/sketchObjects/Player.ts

@@ -68,7 +68,7 @@ export class Player {
 
       revealedArea$.next({ x, y, w });
 
-      if (timeElapsedSinceRevealClick > 2000) {
+      if (timeElapsedSinceRevealClick > 2500) {
         this.showRevealEl = false;
         revealedArea$.next({ x: 0, y: 0, w: 0 });
       }

src/sketchObjects/Revealable.ts

@@ -4,7 +4,7 @@ import { areasColliding, playerHead$, revealedArea$ } from '../area';
 import { colors } from '../constants/colors';
 import { logger } from '../logger';
 import store from '../store';
-import { Area } from '../types';
+import { Area, Coordinates } from '../types';
 import { Commit } from '../ui/info';
 
 export enum RevealableTypes {
@@ -51,6 +51,9 @@ export class Revealable {
   isRevealed: boolean;
   wasInteractedWith: boolean;
   wasRevealed: boolean;
+  hasMovedAway: boolean;
+  newMovePosition: Coordinates;
+  originalMovePosition: Coordinates;
 
   minSize: number = 5;
   currentSize: number;
@@ -87,6 +90,14 @@ export class Revealable {
     this.currentSize = this.minSize;
     this.pulseCurrentSize = area.w;
     this.maxSize = area.w;
+    this.newMovePosition = {
+      x: this.area.x + mp5.random(-800, 800),
+      y: this.area.y + mp5.random(-800, 800),
+    };
+    this.originalMovePosition = {
+      x: this.area.x,
+      y: this.area.y,
+    };
 
     combineLatest([revealedArea$, playerHead$]).subscribe(([revealedArea, playerHead]) => {
       const isRevealed = areasColliding(revealedArea, {
@@ -141,6 +152,12 @@ export class Revealable {
     } else if (this.state === RevealableStates.REVEALED) {
       this.increaseSize();
 
+      if (!this.hasMovedAway) {
+        this.moveAway();
+      } else {
+        this.moveBack();
+      }
+
       mp5.fill(mp5.color(colors.greyLight));
       mp5.ellipse(this.area.x, this.area.y, this.currentSize);
     } else if (this.state === RevealableStates.FOUND) {
@@ -200,6 +217,78 @@ export class Revealable {
     }
   }
 
+  private moveAway() {
+    const boundaryX = mp5.width - 200;
+    const boundaryY = mp5.height - 200;
+
+    const newX = this.newMovePosition.x;
+    const newY = this.newMovePosition.y;
+
+    const limitedX = newX > boundaryX ? boundaryX : newX < 200 ? 200 : newX;
+    const limitedY = newY > boundaryY ? boundaryY : newY < 200 ? 200 : newY;
+
+    if (limitedX > this.area.x) {
+      this.area.x += 5;
+      if (limitedX <= this.area.x) {
+        this.area.x = limitedX;
+        this.hasMovedAway = true;
+      }
+    } else {
+      this.area.x -= 5;
+      if (limitedX >= this.area.x) {
+        this.area.x = limitedX;
+        this.hasMovedAway = true;
+      }
+    }
+
+    if (limitedY > this.area.y) {
+      this.area.y += 5;
+      if (limitedY <= this.area.y) {
+        this.area.y = limitedY;
+        this.hasMovedAway = true;
+      }
+    } else {
+      this.area.y -= 5;
+      if (limitedY >= this.area.y) {
+        this.area.y = limitedY;
+        this.hasMovedAway = true;
+      }
+    }
+  }
+
+  private moveBack() {
+    const newX = this.originalMovePosition.x;
+    const newY = this.originalMovePosition.y;
+
+    if (newX > this.area.x) {
+      this.area.x += 5;
+      if (newX <= this.area.x) {
+        this.area.x = newX;
+        this.hasMovedAway = false;
+      }
+    } else {
+      this.area.x -= 5;
+      if (newX >= this.area.x) {
+        this.area.x = newX;
+        this.hasMovedAway = false;
+      }
+    }
+
+    if (newY > this.area.y) {
+      this.area.y += 5;
+      if (newY <= this.area.y) {
+        this.area.y = newY;
+        this.hasMovedAway = false;
+      }
+    } else {
+      this.area.y -= 5;
+      if (newY >= this.area.y) {
+        this.area.y = newY;
+        this.hasMovedAway = false;
+      }
+    }
+  }
+
   private reduceSize() {
     if (this.currentSize > this.minSize) {
       this.currentSize -= 8;

src/store.ts

@@ -1,5 +1,4 @@
 import create from 'zustand/vanilla';
-import { devtools } from 'zustand/middleware';
 import { Scenes } from './scenes/scenes';
 import { CompanionMessage, CompanionState } from './ui/companion';
 import project from '../metadata/project.json';
@@ -27,11 +26,10 @@ export interface State {
   uid: string;
 }
 
-const store = create<State>(
-  devtools((set) => ({
+const store = create<State>((set) => ({
   uid: null,
   showScore: false,
-    currentIntroStep: 1,
+  currentIntroStep: 0,
   revealablesFinished: 0,
   currentScene: Scenes.OVERVIEW,
   currentSubproject: null,
@@ -54,7 +52,5 @@ const store = create<State>(
       ...state,
       revealables: getRevealablesforSubproject(projectName, project.subprojects),
     })),
-  }))
-);
-
+}));
 export default store;

src/ui/intro.ts

@@ -35,6 +35,10 @@ export class Intro {
   fb10: HTMLTextAreaElement;
 
   k1: HTMLTextAreaElement;
+  k2: HTMLTextAreaElement;
+  k3: HTMLTextAreaElement;
+  k4: HTMLTextAreaElement;
+  k5: HTMLTextAreaElement;
 
   errorRef: HTMLElement;
 
@@ -68,6 +72,10 @@ export class Intro {
     this.fb10 = document.querySelector('#fb-10');
 
     this.k1 = document.querySelector('#k-1');
+    this.k2 = document.querySelector('#k-2');
+    this.k3 = document.querySelector('#k-3');
+    this.k4 = document.querySelector('#k-4');
+    this.k5 = document.querySelector('#k-5');
 
     this.errorRef = document.querySelector('#intro-error');
 
@@ -196,7 +204,7 @@ export class Intro {
   }
 
   private sendKnowledgeQuestionAnswers() {
-    const answers = [this.k1.value];
+    const answers = [this.k1.value, this.k2.value, this.k3.value, this.k4.value, this.k5.value];
 
     logger.logQuestions(answers, true);
   }