refactoring, adaptive, fx bomb

src/configs/phaser.js

@@ -1,7 +1,32 @@
+const DEFAULT_WIDTH = 800
+const DEFAULT_HEIGHT= 800
+const MAX_WIDTH = 1920
+const MAX_HEIGHT = 1920
+const SCALE_MODE = 'FIT' /* (FIT, SMOOTH) */
+
 export default {
-  parent: 'game',
-  transparent: true,
+  /* custom properties */
+  DEFAULT_WIDTH,
+  DEFAULT_HEIGHT,
+  MAX_WIDTH,
+  MAX_HEIGHT,
+  SCALE_MODE,
+
+  orientation: 'landscape',
+  styles: {
+    colorText: 0x222222,
+    fontSize: 18,
+    fontSizeH3: 24
+  },
+
+  /* phaser properties */
+  disableContextMenu: true,
+  autoFocus: true,
+  pixelArt: false,
   antialias: true,
+  transparent: false,
+  parent: 'game',
+
   physics: {
     default: 'arcade',
     arcade: {
@@ -10,16 +35,8 @@ export default {
     },
   },
   scale: {
-    parent: 'game',
-    mode: Phaser.Scale.FIT,
-    autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
-    min: {
-      width: 320,
-      height: 320,
-    },
-    max: {
-      width: 1980,
-      height: 1980,
-    },
+    mode: 0, /* 0 - NONE */
+    width: DEFAULT_WIDTH,
+    height: DEFAULT_HEIGHT,
   },
 }

src/index.js

@@ -1,4 +1,4 @@
-import { Game } from 'phaser'
+import AppGame from '@/objects/AppGame'
 
 import configPhaser from '@/configs/phaser'
 
@@ -22,6 +22,7 @@ require('@/assets/styles/index.styl')
 
 const config = {
   ...configPhaser,
+
   plugins: {
     global: [
       { key: 'BtnPlugin', plugin: BtnPlugin, start: true },
@@ -44,4 +45,14 @@ const config = {
   ],
 }
 
-new Game(config)
+window.addEventListener('load', () =>
+{
+  const game = new AppGame(config)
+
+  window.addEventListener('resize', () =>
+  {
+    game.resize()
+  })
+
+  game.resize()
+})

src/objects/Bonus.js → src/models/Bonus.js

@@ -1,13 +1,9 @@
-import bonusModel from '@/models/BonusModel'
-
 export default class Bonus
 {
   #params
 
-  constructor ({ name, title, amount, params })
+  constructor ({ name = null, title = null, amount = 0, params = {} })
   {
-    Object.assign(this, bonusModel)
-    this.model = bonusModel
     this.name = name
     this.title = title
     this.amount = amount

src/objects/AppGame.js

@@ -0,0 +1,72 @@
+import { Game } from 'phaser'
+
+export default class AppGame extends Game
+{
+  constructor(config)
+  {
+    super(config)
+
+    this.#initCustomParameters(config)
+  }
+
+  #initCustomParameters (config)
+  {
+    Object.keys(config).forEach(key =>
+      {
+        if (this.config[key] === undefined)
+        {
+          this.config[key] = config[key]
+        }
+      })
+  }
+
+  resize ()
+  {
+    const w = window.innerWidth
+    const h = window.innerHeight
+
+    const width = this.config.DEFAULT_WIDTH
+    const height = this.config.DEFAULT_HEIGHT
+    const maxWidth = this.config.MAX_WIDTH
+    const maxHeight = this.config.MAX_HEIGHT
+    const scaleMode = this.config.SCALE_MODE
+
+    const scale = Math.min(w / width, h / height)
+    const newWidth = Math.min(w / scale, maxWidth)
+    const newHeight = Math.min(h / scale, maxHeight)
+
+    const defaultRatio = width / height
+    const maxRatioWidth = maxWidth / height
+    const maxRatioHeight = width / maxHeight
+
+    /* smooth scaling */
+    let smooth = 1
+    if (scaleMode === 'SMOOTH')
+    {
+      const maxSmoothScale = 1.15
+      const getValuePercentFromRange = (value, min, max) =>
+      {
+        return (value - min) / (max - min)
+      }
+      if (width / height < w / h)
+      {
+        smooth =
+          -getValuePercentFromRange(newWidth / newHeight, defaultRatio, maxRatioWidth) / (1 / (maxSmoothScale - 1)) + maxSmoothScale
+      } else {
+        smooth =
+          -getValuePercentFromRange(newWidth / newHeight, defaultRatio, maxRatioHeight) / (1 / (maxSmoothScale - 1)) + maxSmoothScale
+      }
+    }
+
+    /* resize the game */
+    this.scale.resize(newWidth * smooth, newHeight * smooth)
+
+    /* scale the width and height of the css */
+    this.canvas.style.width = newWidth * scale + 'px'
+    this.canvas.style.height = newHeight * scale + 'px'
+
+    /* center the game with css margin */
+    this.canvas.style.marginTop = `${(h - newHeight * scale) / 2}px`
+    this.canvas.style.marginLeft = `${(w - newWidth * scale) / 2}px`
+  }
+}

src/objects/SceneLevel.js

@@ -31,6 +31,9 @@ export default class SceneLevel extends SceneGame
   {
     super.create()
 
+    this.padding = 20
+    this.bonusesBlocks = {}
+
     this.scoresService.init({
       scoresTarget: this.targetScoresCount,
       movesLimit: this.maxMovesCount,
@@ -53,7 +56,7 @@ export default class SceneLevel extends SceneGame
         this.bonusesBlocks[name].update(bonus)
       })
 
-    this.grid.gridUpdate()
+    this.grid.update()
   }
 
   audioManage ()
@@ -66,47 +69,78 @@ export default class SceneLevel extends SceneGame
 
   draw ()
   {
-    this.bonusesBlocks = []
-    const { fontFamily, colorTextBar } = this.configGame
-    const { width } = this.cameras.main
+    const { width } = this.game.scale
+
+    this.containerRight = this.add.container(width / 2 + 150, 0)
+
+    this.#drawTopBar()
+    this.#drawGrid()
+    this.#drawScoreBar()
+    this.#drawBonuses()
+  }
+
+  #drawTopBar ()
+  {
+    const { width } = this.game.scale
+    this.topBar = this.add.topBar(width / 2, 0)
+
+    this.containerRight.setY(this.topBar.displayHeight + this.padding)
+  }
+
+  #drawGrid ()
+  {
+    const { width } = this.game.scale
+    const x = 0
+    const y = this.topBar.displayHeight + this.padding
+
+    this.grid = this.add.gridTiles(x, y, this.gridTilesParams)
+      .on('clickOnTile', (...args) => this.clickOnTile(...args))
+
+    this.grid.setX(width / 2 - (this.grid.displayWidth - 6))
+  }
+
+  #drawScoreBar ()
+  {
+    const x = 0
+    const y = 50
+
+    this.scoreBar = this.add.scoreBar(x, y)
+    this.containerRight.add(this.scoreBar)
+      .setSize(this.scoreBar.displayWidth, this.scoreBar.displayHeight * 2)
+  }
+
+  #drawBonuses ()
+  {
+    const title = 'Bonuses:'
     const bonuses = this.bonusesService.getBonusesList()
-    const padding = 20
+
+    if (!bonuses.length) return
+
+    const { fontFamily, colorTextBar } = this.configGame
+    const yTitle = this.scoreBar.displayHeight + this.padding + 40
+    const width = this.containerRight.displayWidth
+    console.log(width);
+
     const styleText = {
       fontFamily,
       fontSize: 24,
       textAlign: 'center',
       color: colorTextBar,
     }
 
-    this.topBar = this.add.topBar()
+    this.textTitle = this.add.text(width / 2, yTitle, title, styleText)
+      .setOrigin(.5, 0)
 
-    this.grid = this.add.gridTiles(padding, 120, this.gridTilesParams)
-      .on('clickOnTile', (tile) => this.clickOnTile(tile))
-
-    this.scoreBar = this.add.scoreBar(0, 160)
-    this.scoreBar.setX(width - this.scoreBar.displayWidth - padding)
-
-    if (bonuses.length)
-    {
-      this.add.text(
-          width - this.scoreBar.displayWidth / 2 - padding,
-          this.scoreBar.y + this.scoreBar.displayHeight + padding,
-          'Bonuses:',
-          styleText,
-        )
-        .setOrigin(.5, 0)
-    }
+    const yBonus = yTitle + this.textTitle.displayHeight + this.padding
 
     bonuses.forEach((bonus, i) =>
       {
-        const { displayWidth, displayHeight, y } = this.scoreBar
-        const bonusY = y + displayHeight + 60
-
-        this.bonusesBlocks[bonus.name] = this.add.bonusBlock(0, bonusY, bonus)
-
-        const bonusX = width - displayWidth - 70 + this.bonusesBlocks[bonus.name].displayWidth * i
-        this.bonusesBlocks[bonus.name].setX(bonusX)
+        this.bonusesBlocks[bonus.name] = this.add.bonusBlock(0, yBonus, bonus)
+        const x = this.bonusesBlocks[bonus.name].displayWidth * i
+        this.bonusesBlocks[bonus.name].setX(x)
       })
+
+    this.containerRight.add([this.textTitle, ...Object.values(this.bonusesBlocks)])
   }
 
   clickOnTile ({ isCondition, tilesTarget })