progress

src/game/utilities/assets.ts

@@ -27,10 +27,16 @@ import tile6_3 from '@/assets/images/tiles/6-3.png'
 import tile6_4 from '@/assets/images/tiles/6-4.png'
 import tile6_5 from '@/assets/images/tiles/6-5.png'
 import tile6_6 from '@/assets/images/tiles/6-6.png'
-import dot from '@/assets/images/circle.png'
 import bgWood_1 from '@/assets/images/backgrounds/wood-1.jpg'
 import bg_1 from '@/assets/images/backgrounds/bg-1.png'
 import bg_green from '@/assets/images/backgrounds/bg-green.png'
+import bg_red from '@/assets/images/backgrounds/bg-red.png'
+import bg_yellow from '@/assets/images/backgrounds/bg-yellow.png'
+import snd_move_1 from '@/assets/sounds/move-1.mp3'
+import snd_move_2 from '@/assets/sounds/move-2.mp3'
+import snd_move_3 from '@/assets/sounds/move-3.mp3'
+import snd_move_4 from '@/assets/sounds/move-4.mp3'
+import snd_intro from '@/assets/sounds/intro.mp3'
 
 export const assets = [
   { alias: 'tile-back', src: tileBack },
@@ -62,8 +68,14 @@ export const assets = [
   { alias: 'tile-6_4', src: tile6_4 },
   { alias: 'tile-6_5', src: tile6_5 },
   { alias: 'tile-6_6', src: tile6_6 },
-  { alias: 'dot', src: dot },
   { alias: 'bg-wood-1', src: bgWood_1 },
-  { alias: 'bg-1', src: bg_1 },
-  { alias: 'bg-green', src: bg_green }
+  { alias: 'bg-gray', src: bg_1 },
+  { alias: 'bg-green', src: bg_green },
+  { alias: 'bg-red', src: bg_red },
+  { alias: 'bg-yellow', src: bg_yellow },
+  { alias: 'snd-move-1', src: snd_move_1 },
+  { alias: 'snd-move-2', src: snd_move_2 },
+  { alias: 'snd-move-3', src: snd_move_3 },
+  { alias: 'snd-move-4', src: snd_move_4 },
+  { alias: 'snd-intro', src: snd_intro },
 ]

src/game/utilities/fonts.ts

@@ -1,19 +1,27 @@
-import { Text, TextStyle } from 'pixi.js'
+import {
+  Container,
+  Text,
+  TextStyle,
+  type TextStyleAlign,
+  type TextStyleFontStyle,
+  type TextStyleFontWeight,
+  type TextStyleOptions,
+} from 'pixi.js'
 
 export const dropShadowStyle = {
   alpha: 0.5,
   angle: 0.3,
   blur: 5,
-  distance: 4
+  distance: 4,
 }
 
 export const mainText = new TextStyle({
   dropShadow: dropShadowStyle,
-  fill: '#b71a1a',
+  fill: '#aaaaaa',
   fontFamily: 'Arial, Helvetica, sans-serif',
   fontWeight: 'bold',
   letterSpacing: 1,
-  stroke: '#658f56'
+  stroke: '#565656',
 })
 
 export const playerNameText = new TextStyle({
@@ -23,12 +31,104 @@ export const playerNameText = new TextStyle({
   letterSpacing: 1,
   stroke: '#565656',
   fontSize: 15,
-  fontWeight: 'bold'
+  fontWeight: 'bold',
 })
 
-export function createText(str: string, x: number, y: number, style: TextStyle = mainText) {
+export const summaryTitle = new TextStyle({
+  dropShadow: dropShadowStyle,
+  fill: '#a2a2a2',
+  fontFamily: 'Arial, Helvetica, sans-serif',
+  letterSpacing: 1,
+  stroke: '#565656',
+  fontSize: 15,
+  fontWeight: 'bold',
+})
+
+export const scoreText = new TextStyle({
+  dropShadow: dropShadowStyle,
+  fill: '#aaaaaa',
+  fontFamily: 'Arial, Helvetica, sans-serif',
+  letterSpacing: 1,
+  stroke: '#565656',
+  fontSize: 32,
+  fontWeight: 'bold',
+})
+
+function getStyle(styleOptions: TextStyleOptions = {}) {
+  const {
+    fill = 0xa2a2a2,
+    stroke = 0x565656,
+    fontSize = 15,
+    fontFamily = 'Arial, Helvetica, sans-serif',
+    fontWeight = 'normal',
+    fontStyle = 'normal',
+    dropShadow,
+    letterSpacing = 1,
+  } = styleOptions
+  const style = new TextStyle({
+    fill,
+    fontFamily,
+    letterSpacing,
+    stroke,
+    fontSize,
+    fontStyle,
+    fontWeight: fontWeight as any,
+    dropShadow: dropShadow ? dropShadowStyle : undefined,
+  })
+  return style
+}
+
+export const whiteStyle = (
+  fontSize: number = 15,
+  fontWeight: TextStyleFontWeight = 'normal',
+  dropShadow: boolean = true,
+) =>
+  getStyle({
+    fontSize,
+    fontWeight,
+    dropShadow,
+  })
+
+export const yellowStyle = (
+  fontSize: number = 15,
+  fontWeight: TextStyleFontWeight = 'normal',
+  dropShadow: boolean = true,
+) =>
+  getStyle({
+    fill: 0xffff00,
+    fontSize,
+    fontWeight,
+    dropShadow,
+  })
+
+interface TextOptions {
+  text: string
+  x: number
+  y: number
+  style?: TextStyle
+  container?: Container
+  align?: 'left' | 'center' | 'right'
+  fontStyle?: TextStyleFontStyle
+}
+
+export function createText(textOptions: TextOptions) {
+  const defaultOptions = { style: whiteStyle(), align: 'center' }
+  const { text: str, x, y, style, container, align } = { ...defaultOptions, ...textOptions }
   const text = new Text({ text: str, style })
-  text.anchor.set(0.5, 0.5)
+
+  switch (align) {
+    case 'center':
+      text.anchor.set(0.5, 0.5)
+      break
+    case 'left':
+      text.anchor.set(0, 0.5)
+      break
+    case 'right':
+      text.anchor.set(1, 0.5)
+      break
+  }
+
+  if (container) container.addChild(text)
   text.x = x
   text.y = y
   return text