Ev/intro touchup (#348)

- bodies enter/move towards bottom right corner
- skip button upper right
- visual touchups

src/anybody.js

@@ -6,6 +6,8 @@ import { utils } from 'ethers'
 import { bodyThemes } from './colors.js'
 import { loadFonts } from './fonts.js'
 import { Buttons } from './buttons.js'
+import { Intro } from './intro.js'
+import PAUSE_BODY_DATA from './pauseBodies'
 
 const GAME_LENGTH_BY_LEVEL_INDEX = [30, 10, 20, 30, 40, 50]
 const NORMAL_GRAVITY = 100
@@ -25,60 +27,6 @@ function intersectsButton(button, x, y) {
   )
 }
 
-const PAUSE_BODY_DATA = [
-  {
-    bodyIndex: 0,
-    radius: 51_000,
-    px: 500300,
-    py: 290750,
-    vx: 0,
-    vy: 0
-  },
-  // upper right
-  {
-    bodyIndex: 5,
-    radius: 11_000,
-    px: 793406,
-    py: 133029,
-    vx: 0,
-    vy: 0
-  },
-  // mid right
-  {
-    bodyIndex: 2,
-    radius: 23_000,
-    px: 825620,
-    py: 418711,
-    vx: -100000,
-    vy: -1111000
-  },
-  // upper left
-  {
-    bodyIndex: 1,
-    radius: 27_000,
-    px: 159878,
-    py: 234946,
-    vx: 0,
-    vy: 0
-  },
-  {
-    bodyIndex: 3,
-    radius: 19_000,
-    px: 229878,
-    py: 464946,
-    vx: 0,
-    vy: 0
-  },
-  {
-    bodyIndex: 4,
-    radius: 15_000,
-    px: 679878,
-    py: 668946,
-    vx: -100000,
-    vy: -1111000
-  }
-]
-
 const SECONDS_IN_A_DAY = 86400
 const currentDay = () =>
   Math.floor(Date.now() / 1000) -
@@ -90,6 +38,7 @@ export class Anybody extends EventEmitter {
     Object.assign(this, Visuals)
     Object.assign(this, Calculations)
     Object.assign(this, Buttons)
+    Object.assign(this, Intro)
 
     this.setOptions(options)
 
@@ -449,11 +398,6 @@ export class Anybody extends EventEmitter {
           this.level++
           this.restart(null, false)
         }
-        if (this.level == 0 && !this.paused) {
-          this.skipIntro()
-        } else if (this.paused) {
-          this.setPause(false)
-        }
         break
       case 'KeyR':
         if (this.level < 1) return
@@ -1015,26 +959,15 @@ export class Anybody extends EventEmitter {
   }
 
   missileClick(x, y) {
-    if (this.gameOver) return
-    if (
-      this.paused ||
-      (this.introStage !== this.totalIntroStages - 1 && this.level < 1)
-    )
-      return
-    if (this.introStage == this.totalIntroStages - 1 && this.level < 1) {
-      // NOTE: these values are in drawIntroStage2
-      const chunk_1 = 1.5 * this.P5_FPS
-      const chunk_2 = 2.5 * this.P5_FPS
-      const chunk_3 = 2 * this.P5_FPS
-      const levelMaxTime = chunk_1 + chunk_2 + chunk_3
-      if (this.levelCounting < levelMaxTime) return
-    }
+    if (this.gameOver || this.paused || this.missilesDisabled) return
+
     if (
       this.bodies.reduce((a, c) => a + c.radius, 0) == 0 ||
       this.frames - this.startingFrame >= this.timer
     ) {
       return
     }
+
     if (this.frames % this.stopEvery == 0) {
       console.log('MISSILE CANT BE FIRED ON EDGE ATM')
       this.shootMissileNextFrame = { x, y }

src/buttons.js

@@ -46,7 +46,7 @@ export const Buttons = {
 
     p.push()
     p.noStroke()
-    p.strokeWeight(button.active ? 1 : 3)
+    p.strokeWeight(button.active ? 1 : 2)
     p.textSize(textSize * scale)
     p.fill(button.disabled ? rgbaOpacity(bg, 0.4) : bg)
 

src/colors.js

@@ -4,10 +4,13 @@ const iris_50 = 'rgba(121, 88, 255, 1)'
 const iris_75 = 'rgba(23, 12, 67, 1)'
 const iris_100 = 'rgba(25, 15, 66, 1)'
 const teal_50 = 'rgba(137, 255, 248, 1)'
-const teal_75 = 'rgba(13, 61, 58, 1)'
+const teal_60 = '#4CB1AB'
+const teal_75 = '#0A3330'
+const teal_90 = '#062927'
 const flame_50 = 'rgba(255, 88, 88, 1)'
 const flame_75 = 'rgba(70, 12, 12, 1)'
 const pink_50 = 'rgba(255, 105, 177, 1)'
+const pink_60 = 'rgba(106, 16, 59, 1)'
 const pink_75 = 'rgba(59, 29, 43, 1)'
 const green_50 = 'rgba(125, 241, 115, 1)'
 const green_75 = 'rgba(4, 53, 0, 1)'
@@ -25,8 +28,6 @@ export const THEME = {
   // colors
   lime: 'rgba(125, 241, 115, 1)',
   lime_40: 'rgba(125, 241, 115, 0.4)',
-  pink: 'rgba(236, 205, 255, 1)',
-  pink_40: 'rgba(219, 115, 255, 1)',
   fuschia: 'rgba(155, 67, 232, 1)',
   red: 'rgba(255, 88, 88, 1)',
   maroon: 'rgba(53, 20, 20, 1)',
@@ -37,10 +38,15 @@ export const THEME = {
   iris_60,
   iris_75,
   teal_50,
+  teal_60,
   teal_75,
+  teal_90,
   flame_50,
   flame_75,
+  pink: 'rgba(236, 205, 255, 1)',
+  pink_40: 'rgba(219, 115, 255, 1)',
   pink_50,
+  pink_60,
   pink_75,
   green_50,
   green_75,