Backdrop when companion is openend

index.html

@@ -289,6 +289,7 @@
       </div>
     </div>
     <div id="backdrop"></div>
+    <div id="comp-backdrop"></div>
     <div id="intro-backdrop"></div>
     <script src="./main.ts"></script>
   </body>

src/helpers.ts

@@ -11,8 +11,8 @@ export function getEdgeDimensions({ size }: JSONSubproject): number {
 
 export function generateRandomEdgeCoordinates(): Coordinates {
   return {
-    x: mp5.random(150, SCREEN_WIDTH - 150),
+    x: mp5.random(200, SCREEN_WIDTH - 200),
-    y: mp5.random(150, SCREEN_HEIGHT - 150),
+    y: mp5.random(200, SCREEN_HEIGHT - 200),
   };
 }
 
@@ -115,7 +115,7 @@ export function generateRevealables(revealables: RevealableInterface[]): Reveala
       area: {
         x: coordinates.x,
         y: coordinates.y,
-        w: revealable.size < 50 ? 50 : revealable.size > 600 ? 600 : revealable.size,
+        w: revealable.size < 50 ? 50 : revealable.size > 400 ? 400 : revealable.size,
       },
     });
   });

src/scenes/DetailScene.ts

@@ -36,13 +36,17 @@ export class DetailScene {
       this.startTime = mp5.millis();
     }
 
-    if (mp5.millis() > this.startTime + 3000 && !this.wasInteractedWith) {
+    if (mp5.millis() > this.startTime + 6000 && !this.wasInteractedWith) {
       this.wasInteractedWith = true;
       store.getState().addUserMessage({
         inputWanted: false,
         text: 'Trouble knowing what to do? You should try clicking somewhere in order to spawn reveal bubbles. Try this in different parts of the canvas to see what you can find',
       });
-    } else if (mp5.millis() > this.startTime + 8000 && !this.wasHovered && this.wasInteractedWith) {
+    } else if (
+      mp5.millis() > this.startTime + 16000 &&
+      !this.wasHovered &&
+      this.wasInteractedWith
+    ) {
       this.wasHovered = true;
       store.getState().addUserMessage({
         inputWanted: false,

src/ui/companion.ts

@@ -23,6 +23,7 @@ export class Companion {
   messageTextRef: HTMLElement;
   messageInputRef: HTMLElement;
   messageButtonRef: HTMLElement;
+  backdrop: HTMLElement;
   hoverAnimation: any;
   message: CompanionMessage;
 
@@ -32,6 +33,7 @@ export class Companion {
     this.messageTextRef = document.getElementById('message-text');
     this.messageInputRef = document.getElementById('message-input');
     this.messageButtonRef = document.getElementById('message-confirm');
+    this.backdrop = document.getElementById('comp-backdrop');
 
     this.ref.addEventListener('click', () => this.handleClick());
     this.ref.addEventListener('mouseover', () => this.handleMouseEnter());
@@ -44,11 +46,13 @@ export class Companion {
     store.subscribe(
       (companionState) => {
         if (companionState === CompanionState.ACTIVE) {
+          this.backdrop.style.display = 'block';
           this.stopAwaitAnimation();
           this.showActiveShape();
           this.scaleUpCompanion();
           this.showMessage(this.message);
         } else if (companionState === CompanionState.IDLE) {
+          this.backdrop.style.display = 'none';
           this.scaleDownCompanion();
           this.showIdleShape();
           this.stopAwaitAnimation();

styles.scss

@@ -90,6 +90,7 @@ textarea {
 
   #companion {
     position: relative;
+    z-index: 10;
 
     &:hover {
       cursor: pointer;
@@ -145,6 +146,7 @@ textarea {
   #message {
     display: none;
     position: absolute;
+    z-index: 10;
     right: 60px;
     bottom: 50px;
     margin-right: 100px;
@@ -396,6 +398,17 @@ textarea {
   background-color: rgba(0, 0, 0, 0.7);
 }
 
+#comp-backdrop {
+  display: none;
+  position: fixed;
+  z-index: 3;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
 #intro-backdrop {
   display: block;
   position: fixed;