restyle title screen, show mint btn (TODO: hide on opensea)

src/anybody.js

@@ -28,65 +28,53 @@ function intersectsButton(button, x, y) {
 const PAUSE_BODY_DATA = [
   {
     bodyIndex: 0,
-    radius: 36000,
-    px: 149311,
-    py: 901865,
+    radius: 51000,
+    px: 500300,
+    py: 290750,
     vx: 0,
     vy: 0
   },
+  // upper right
   {
     bodyIndex: 1,
-    radius: 32000,
-    px: 309311,
-    py: 121865,
-    vx: 0,
-    vy: 0
-  },
-  {
-    bodyIndex: 2,
-    radius: 30000,
-    px: 850311,
-    py: 811865,
-    vx: 0,
-    vy: 0
-  },
-  {
-    bodyIndex: 3,
     radius: 7000,
-    px: 833406,
-    py: 103029,
+    px: 793406,
+    py: 133029,
     vx: 0,
     vy: 0
   },
+  // mid right
   {
-    bodyIndex: 4,
+    bodyIndex: 2,
     radius: 20000,
-    px: 705620,
-    py: 178711,
+    px: 825620,
+    py: 418711,
     vx: -100000,
     vy: -1111000
   },
+  // upper left
   {
-    bodyIndex: 5,
+    bodyIndex: 3,
     radius: 17000,
-    px: 139878,
-    py: 454946,
+    px: 159878,
+    py: 234946,
     vx: 0,
     vy: 0
   },
+  // 
   {
-    bodyIndex: 6,
+    bodyIndex: 4,
     radius: 9000,
-    px: 289878,
-    py: 694946,
+    px: 229878,
+    py: 464946,
     vx: 0,
     vy: 0
   },
   {
-    bodyIndex: 7,
+    bodyIndex: 5,
     radius: 14000,
-    px: 589878,
-    py: 694946,
+    px: 679878,
+    py: 668946,
     vx: -100000,
     vy: -1111000
   }
@@ -244,10 +232,11 @@ export class Anybody extends EventEmitter {
     this.shaking = 0
     this.explosionSmoke = []
     this.gunSmoke = []
-    this.date = new Date(this.day * 1000)
-      .toISOString()
-      .split('T')[0]
-      .replace(/-/g, '.')
+    this.date = new Date(this.day * 1000).toLocaleDateString( 'en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    })
     this.framesTook = false
     this.showProblemRankingsScreenAt = -1
     this.saveStatus = 'unsaved' // 'unsaved' -> 'validating' -> 'validated' -> 'saving' -> 'saved' | 'error'
@@ -519,8 +508,8 @@ export class Anybody extends EventEmitter {
       this.pauseBodies = PAUSE_BODY_DATA.map((b) =>
         this.bodyDataToBodies.call(this, b)
       )
-      this.pauseBodies[1].c = this.getBodyColor(this.day + 1, 0)
-      this.pauseBodies[2].c = this.getBodyColor(this.day + 2, 0)
+      // preview other bodies
+      // this.pauseBodies[0].c = this.getBodyColor(this.day + 13, 0)
       this.paused = newPauseState
       this.willUnpause = false
       delete this.beganUnpauseAt

src/buttons.js

@@ -68,7 +68,7 @@ export const Buttons = {
         text,
         // tweak to center, somethign about the font
         x + width / 2 + textSize * 0.13,
-        y + height / 2 + textSize * 0.06
+        y + height / 2 + textSize * 0.05
       )
     }
 

src/colors.js

@@ -1,7 +1,8 @@
+const iris_30 = 'rgba(163, 140, 222, 1)'
+const iris_60 = 'rgba(88, 59, 209, 1)'
 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 iris_60 = 'rgba(88, 59, 209, 1)'
-const iris_30 = 'rgba(163, 140, 222, 1)'
 const teal_50 = 'rgba(137, 255, 248, 1)'
 const teal_75 = 'rgba(13, 61, 58, 1)'
 const flame_50 = 'rgba(255, 88, 88, 1)'
@@ -13,25 +14,27 @@ const green_75 = 'rgba(4, 53, 0, 1)'
 const yellow_50 = 'rgba(252, 255, 105, 1)'
 const yellow_75 = 'rgba(58, 59, 29, 1)'
 const violet_25 = 'rgba(236, 205, 255, 1)'
-const violet_50 = 'rgba(160, 67, 232, 1)'
+const violet_50 = 'rgba(155, 67, 232, 1)'
 
 export const THEME = {
   bg: 'rgb(20,20,20)',
   fg: 'white',
   bodiesTheme: 'blues',
   border: iris_60,
+  borderWt: 2,
   // 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(160, 67, 232, 1)',
+  fuschia: 'rgba(155, 67, 232, 1)',
   red: 'rgba(255, 88, 88, 1)',
   maroon: 'rgba(53, 20, 20, 1)',
   textFg: iris_50,
   textBg: iris_100,
   iris_30,
   iris_60,
+  // iris_75,
   teal_50,
   teal_75,
   flame_50,

src/visuals.js

@@ -431,7 +431,7 @@ export const Visuals = {
 
     const p = this.p
 
-    const unpauseDuration = this.level == 0 ? 2 : 0
+    const unpauseDuration = this.level == 0 ? 1.8 : 0
     const unpauseFrames = unpauseDuration * this.P5_FPS
     if (this.willUnpause && !this.beganUnpauseAt) {
       this.willUnpause = true
@@ -451,21 +451,49 @@ export const Visuals = {
       const fadeOut = this.p.map(fadeOutProgress, 0, fadeOutFrames, 1, 0)
       p.fill(rgbaOpacity(THEME.pink, fadeOut))
     } else {
+      // draw box
+      p.stroke(THEME.iris_60)
+      p.strokeWeight(THEME.borderWt)
+      p.noFill()
+      p.rect(40, 60, 920, 860, 32, 32, 32, 32)
+
+      // date
+      p.textFont(fonts.body)
+      p.textSize(52)
+      const dateWidth = p.textWidth(this.date)
+      const dateBgWidth = dateWidth + 48
+      p.fill('black')
+      p.stroke(THEME.iris_60)
+      p.strokeWeight(THEME.borderWt)
+      p.rect(
+        80,
+        30,
+        dateBgWidth,
+        60,
+        80
+      )
+      p.textAlign(p.LEFT, p.CENTER)
+      p.fill(THEME.violet_25)
+      p.noStroke()
+      p.text(this.date, 80 + 48 / 2, 30 + 60 / 2)
+
       p.fill(THEME.pink)
     }
-    this.drawPauseBodies()
-
+
     // draw logo
     p.textFont(fonts.dot)
-    p.textSize(200)
+    p.textSize(180)
     p.textAlign(p.LEFT, p.TOP)
     p.noStroke()
-    const titleY = this.windowHeight / 2 - 270
-    drawKernedText(p, 'Anybody', 46, titleY, 0.8)
-    drawKernedText(p, 'Problem', 46, titleY + 240, 2)
+    const titleY = 480 // this.windowHeight / 2 - 270
+    drawKernedText(p, 'Anybody', 92, titleY, 0.8)
+    drawKernedText(p, 'Problem', 92, titleY + 183, 2)
+
+    this.drawPauseBodies()
+
     if (!this.willUnpause) {
       // play button
-      this.drawFatButton({
+      this.drawButton({
         text: 'PLAY',
         onClick: () => {
           if (this.popup !== null) return
@@ -511,28 +539,31 @@ export const Visuals = {
         },
         fg: THEME.violet_50,
         bg: THEME.pink,
-        bottom: 120,
+        width: 410,
+        height: 108,
+        textSize: 78,
+        x: 508,
+        y: 862,
         p
       })
 
-      // date
-      p.textFont(fonts.body)
-      p.textSize(24)
-      const dateWidth = p.textWidth(this.date)
-      const dateBgWidth = dateWidth + 48
-      const dateBgHeight = 32
-      const dateBottomY = this.windowHeight - 58
-      p.fill(THEME.textBg)
-      p.rect(
-        this.windowWidth / 2 - dateBgWidth / 2,
-        dateBottomY - dateBgHeight / 2,
-        dateBgWidth,
-        dateBgHeight,
-        20
-      )
-      p.textAlign(p.CENTER, p.CENTER)
-      p.fill(THEME.textFg)
-      p.text(this.date, this.windowWidth / 2, dateBottomY)
+      // mint button
+      this.drawButton({
+        text: 'MINT',
+        onClick: () => {
+          this.emit('mint')
+        },
+        fg: THEME.violet_25,
+        bg: '#241465', // THEME.iris_75,
+        width: 410,
+        height: 108,
+        textSize: 78,
+        x: 82,
+        y: 862,
+        p
+      })
+
+      p.pop()
     }
   },
   drawBodyOutlines() {
@@ -1786,7 +1817,7 @@ export const Visuals = {
     // Bottom left corner coordinates
     let startX = 0
     let startY = this.windowHeight
-    this.p.strokeWeight(2)
+    this.p.strokeWeight(THEME.borderWt)
 
     const crossHairSize = 25
 
@@ -1874,7 +1905,7 @@ export const Visuals = {
       p.fill(color)
     } else {
       p.noFill()
-      p.strokeWeight(2)
+      p.strokeWeight(THEME.borderWt)
       p.stroke(color)
     }
     for (let a = rotateBy; a < p.TWO_PI + rotateBy; a += angle) {
@@ -2352,7 +2383,7 @@ export const Visuals = {
 
       const bodyCopy = {
         bodyIndex: body.bodyIndex,
-        hero: i < 3,
+        hero: !i,
         c: body.c,
         radius: body.radius,
         velocity: this.p.createVector(body.velocity.x, body.velocity.y),