Use common styles

Engine/src/states/Menu.ts

@@ -6,6 +6,7 @@ import { GameState } from './Game'
 import { SpriteInstance } from '../shared/sprites'
 import { animals } from '../data/animals'
 import { segments } from '../shared/segments'
+import { bodyTextStyle, buttonBlurStyle, buttonHoverStyle } from '../styles'
 
 interface MenuItem {
   text: PIXI.Text,
@@ -16,6 +17,9 @@ export function MenuState(ctx: ContextI): StateI {
   let scaryBoi = new SpriteInstance('ui.menu.decorative.scary-boi.0')
   let scaryBun = new SpriteInstance('ui.menu.decorative.scary-bun.0')
 
+  container.addChild(scaryBoi.container)
+  container.addChild(scaryBun.container)
+
   // Animal Selections
   let animalSprites: SpriteInstance[] = Object.keys(animals).map(v => {
     let s = new SpriteInstance(`${v}.animal.stand.west.0`)
@@ -70,14 +74,7 @@ export function MenuState(ctx: ContextI): StateI {
   ]
   selectedSegmentItem.style.fill = ['#000000']
 
-
-  let selectedText = new PIXI.Text(selectedAnimalName, new PIXI.TextStyle({
-    fontFamily: 'Arial',
-    fontSize: 30,
-    dropShadow: true,
-    fill: ['#ffffff'],
-    stroke: '#99ff99',
-  }))
+  let selectedText = new PIXI.Text(selectedAnimalName, bodyTextStyle())
 
   let text = new PIXI.Text('GGJ22', new PIXI.TextStyle({
     fontFamily: 'Arial',
@@ -87,42 +84,24 @@ export function MenuState(ctx: ContextI): StateI {
     stroke: '#000000',
   }))
 
-  let hoverStyle = new PIXI.TextStyle({
-    fontFamily: 'Arial',
-    fontSize: 50,
-    dropShadow: true,
-    stroke: '#ffffff',
-    fill: '#9999dd',
-  })
-  let blurStyle = new PIXI.TextStyle({
-    fontFamily: 'Arial',
-    fontSize: 50,
-    dropShadow: true,
-    fill: ['#ffffff'],
-    stroke: '#000000',
-  })
-
   let menuItems: PIXI.Text[] = []
 
   {
-    let el = new PIXI.Text('Start Game', blurStyle)
+    let el = new PIXI.Text('Start Game', buttonBlurStyle())
     el.interactive = true
     el.on('pointerdown', () => {
       ctx.push(GameState(ctx, selectedAnimalName, selectedSegmentName))
     })
     el.on('pointerover', () => {
-      el.style = hoverStyle
+      el.style = buttonHoverStyle()
     })
     el.on('pointerout', () => {
-      el.style = blurStyle
+      el.style = buttonHoverStyle()
     })
     menuItems.push(el)
     container.addChild(el)
   }
 
-  container.addChild(scaryBoi.container)
-  container.addChild(scaryBun.container)
-
   container.addChild(text)
   container.addChild(selectedText)