Load game-type-permitted units from server #24

Fixed Freestyle unit type max limits Converted unit type list to a map
pongstylin · Oct 4, 2019 · ab0ce1b · ab0ce1b
1 parent 0b039bc
commit ab0ce1b
Show file tree

Hide file tree

Showing 5 changed files with 128 additions and 122 deletions.
diff --git a/src/client/GameClient.js b/src/client/GameClient.js
@@ -41,6 +41,16 @@ export default class GameClient extends Client {
     return this._server.requestAuthorized(this.name, 'joinGame', args);
   }
 
+  getGameTypeConfig(gameType) {
+    // Authorization not required
+    return this._server.request(this.name, 'getGameTypeConfig', [gameType])
+      .then(data => {
+        if (data.limits)
+          data.limits.units.types = new Map(data.limits.units.types);
+
+        return data;
+      });
+  }
   getGameData(gameId) {
     // Authorization not required
     return this._server.request(this.name, 'getGame', [gameId]);

diff --git a/src/data/files/game_types.json b/src/data/files/game_types.json
@@ -31,17 +31,16 @@
         "units": {
           "max": 10,
 
-          "types": {
-            "Cleric": { "max":1 },
-            "DarkMagicWitch": { "max":1 },
-            "Pyromancer": { "max":2 },
-            "Enchantress": { "max":1 },
-            "Assassin": { "max":1 },
-            "Knight": { "max":3 },
-            "Scout": { "max":1 },
-            "LightningWard": { "max":1 },
-            "BarrierWard": { "max":1 }
-          }
+          "types": [
+            ["Knight",         { "max":3 }],
+            ["Pyromancer",     { "max":2 }],
+            ["Scout",          { "max":1 }],
+            ["Cleric",         { "max":1 }],
+            ["LightningWard",  { "max":1 }],
+            ["DarkMagicWitch", { "max":1 }],
+            ["Assassin",       { "max":1 }],
+            ["Enchantress",    { "max":1 }]
+          ]
         }
       },
       "sets": [{
@@ -71,17 +70,16 @@
         "units": {
           "max": 10,
 
-          "types": {
-            "Cleric": { "max":10 },
-            "DarkMagicWitch": { "max":10 },
-            "Pyromancer": { "max":10 },
-            "Enchantress": { "max":10 },
-            "Assassin": { "max":10 },
-            "Knight": { "max":3 },
-            "Scout": { "max":10 },
-            "LightningWard": { "max":10 },
-            "BarrierWard": { "max":10 }
-          }
+          "types": [
+            ["Knight",         { "max":3  }],
+            ["Pyromancer",     { "max":10 }],
+            ["Scout",          { "max":1  }],
+            ["Cleric",         { "max":10 }],
+            ["LightningWard",  { "max":1  }],
+            ["DarkMagicWitch", { "max":10 }],
+            ["Assassin",       { "max":10 }],
+            ["Enchantress",    { "max":10 }]
+          ]
         }
       },
       "sets": [{

diff --git a/src/server/GameService.js b/src/server/GameService.js
@@ -41,6 +41,7 @@ class GameService extends Service {
   will(client, messageType, bodyType) {
     // No authorization required
     if (bodyType === 'getGame') return true;
+    if (bodyType === 'getGameTypeConfig') return true;
 
     // Authorization required
     let clientPara = this.clientPara.get(client.id);
@@ -237,6 +238,9 @@ class GameService extends Service {
     return dataAdapter.createGame(gameOptions).then(game => game.id);
   }
 
+  async onGetGameTypeConfigRequest(client, gameType) {
+    return dataAdapter.getGameTypeConfig(gameType);
+  }
   async onGetGameRequest(client, gameId) {
     this.throttle(client.address, 'getGame');
 

diff --git a/src/setup.js b/src/setup.js
@@ -1,8 +1,56 @@
 import popup from 'components/popup.js';
 
 const authClient = Tactics.authClient;
+const gameClient = Tactics.gameClient;
 const SetSetup = Tactics.SetSetup;
 
+let setSetup;
+let team = {
+  colorId: 'Red',
+  set: [
+    // Back Row
+    {assignment:[5, 0], type:'Cleric'},
+    // Middle Row
+    {assignment:[2, 1], type:'DarkMagicWitch'},
+    {assignment:[3, 1], type:'Pyromancer'},
+    {assignment:[7, 1], type:'Pyromancer'},
+    {assignment:[8, 1], type:'Enchantress'},
+    // Front Row
+    {assignment:[1, 2], type:'Assassin'},
+    {assignment:[4, 2], type:'Knight'},
+    {assignment:[5, 2], type:'Knight'},
+    {assignment:[6, 2], type:'Knight'},
+    {assignment:[9, 2], type:'Scout'},
+  ]
+};
+
+var buttons = {
+  rotate: function ($button) {
+    let classesToToggle;
+
+    if ($button.hasClass('fa-rotate-90'))
+      classesToToggle = 'fa-rotate-90 fa-rotate-180';
+    else if ($button.hasClass('fa-rotate-180'))
+      classesToToggle = 'fa-rotate-180 fa-rotate-270';
+    else if ($button.hasClass('fa-rotate-270'))
+      classesToToggle = 'fa-rotate-270';
+    else
+      classesToToggle = 'fa-rotate-90';
+
+    $button.toggleClass(classesToToggle);
+    setSetup.rotateBoard(90);
+  },
+  sound: function ($button) {
+    $button.toggleClass('fa-bell fa-bell-slash');
+
+    Howler.mute($button.hasClass('fa-bell-slash'));
+  },
+};
+
+window.addEventListener('resize', () => {
+  if (setSetup) setSetup.resize();
+});
+
 window.addEventListener('DOMContentLoaded', async () => {
   let notice;
   if (navigator.onLine === false)
@@ -36,111 +84,57 @@ window.addEventListener('DOMContentLoaded', async () => {
   });
 });
 
-function load() {
-  let setSetup;
-  let team = {
-    colorId: 'Red',
-    set: [
-      // Back Row
-      {assignment:[5, 0], type:'Cleric'},
-      // Middle Row
-      {assignment:[2, 1], type:'DarkMagicWitch'},
-      {assignment:[3, 1], type:'Pyromancer'},
-      {assignment:[7, 1], type:'Pyromancer'},
-      {assignment:[8, 1], type:'Enchantress'},
-      // Front Row
-      {assignment:[1, 2], type:'Assassin'},
-      {assignment:[4, 2], type:'Knight'},
-      {assignment:[5, 2], type:'Knight'},
-      {assignment:[6, 2], type:'Knight'},
-      {assignment:[9, 2], type:'Scout'},
-    ]
-  };
-
-  var buttons = {
-    rotate: function ($button) {
-      let classesToToggle;
-
-      if ($button.hasClass('fa-rotate-90'))
-        classesToToggle = 'fa-rotate-90 fa-rotate-180';
-      else if ($button.hasClass('fa-rotate-180'))
-        classesToToggle = 'fa-rotate-180 fa-rotate-270';
-      else if ($button.hasClass('fa-rotate-270'))
-        classesToToggle = 'fa-rotate-270';
-      else
-        classesToToggle = 'fa-rotate-90';
-
-      $button.toggleClass(classesToToggle);
-      setSetup.rotateBoard(90);
-    },
-    sound: function ($button) {
-      $button.toggleClass('fa-bell fa-bell-slash');
-
-      Howler.mute($button.hasClass('fa-bell-slash'));
-    },
-  };
-
-  $(() => {
-    $('#loader').css({
-      top:($(window).height()/2)-($('#loader').height()/2)+'px',
-      left:($(window).width()/2)-($('#loader').width()/2)+'px',
-      visibility:'visible'
-    });
+async function load() {
+  $('#loader').css({
+    top:($(window).height()/2)-($('#loader').height()/2)+'px',
+    left:($(window).width()/2)-($('#loader').width()/2)+'px',
+    visibility:'visible'
+  });
 
-    if (Howler.noAudio)
-      $('BUTTON[name=sound]').toggleClass('hidden');
+  if (Howler.noAudio)
+    $('BUTTON[name=sound]').toggleClass('hidden');
 
-    $('BODY')
-      .on('mouseover','#app BUTTON:enabled', event => {
-        var $button = $(event.target);
+  $('BODY')
+    .on('mouseover','#app BUTTON:enabled', event => {
+      var $button = $(event.target);
 
-        // Ignore disabled buttons
-        if (window.getComputedStyle(event.target).cursor !== 'pointer')
-          return;
+      // Ignore disabled buttons
+      if (window.getComputedStyle(event.target).cursor !== 'pointer')
+        return;
 
-        Tactics.sounds.focus.play();
-      })
-      .on('click','#app BUTTON:enabled', event => {
-        var $button = $(event.target);
-        var handler = $button.data('handler') || buttons[$button.attr('name')];
+      Tactics.sounds.focus.play();
+    })
+    .on('click','#app BUTTON:enabled', event => {
+      var $button = $(event.target);
+      var handler = $button.data('handler') || buttons[$button.attr('name')];
 
-        // Ignore disabled buttons
-        if (window.getComputedStyle(event.target).cursor !== 'pointer')
-          return;
+      // Ignore disabled buttons
+      if (window.getComputedStyle(event.target).cursor !== 'pointer')
+        return;
 
-        handler($button);
+      handler($button);
 
-        Tactics.sounds.select.play();
-      });
+      Tactics.sounds.select.play();
+    });
 
-    $('#splash').show();
+  $('#splash').show();
 
-    Tactics.load([
-      'Knight',
-      'Pyromancer',
-      'Scout',
-      'Cleric',
-      'LightningWard',
-      'DarkMagicWitch',
-      'Assassin',
-      'Enchantress',
-    ], percent => {
-      $('#progress').width(percent);
-    }).then(() => {
-      setSetup = new SetSetup(team);
+  let gameType = new URL(location.href).searchParams.get('type');
+  let gameTypeConfig = await gameClient.getGameTypeConfig(gameType);
+  let unitTypes = gameTypeConfig.limits.units.types.keys();
 
-      $(setSetup.canvas)
-        .attr('id', 'board')
-        .appendTo('#field');
+  Tactics.load(unitTypes, percent => {
+    $('#progress').width(percent);
+  }).then(() => {
+    setSetup = new SetSetup(team);
 
-      setSetup.resize();
+    $(setSetup.canvas)
+      .attr('id', 'board')
+      .appendTo('#field');
 
-      $('#splash').hide();
-      $('#setup').css({ position:'', visibility:'' });
-    });
-  });
+    setSetup.resize();
 
-  $(window).on('resize', () => {
-    if (setSetup) setSetup.resize();
+    $('#splash').hide();
+    $('#setup').css({ position:'', visibility:'' });
   });
 }
diff --git a/src/tactics/core.js b/src/tactics/core.js
@@ -23,13 +23,13 @@ window.Tactics = (function () {
     gameClient: clientFactory('game'),
     chatClient: clientFactory('chat'),
     SetSetup: SetSetup,
+    loadedUnitTypes: new Set(),
 
     load: function (unitTypes, cb = () => {}) {
       return new Promise((resolve, reject) => {
         let resources = [];
         let loaded = 0;
         let loader = PIXI.loader;
-        let loadedUnitTypes = [];
         let effects = {};
 
         let progress = () => {
@@ -106,15 +106,15 @@ window.Tactics = (function () {
           progress();
         });
 
-        unitTypes.forEach(unitType => {
+        for (let unitType of unitTypes) {
+          if (this.loadedUnitTypes.has(unitType))
+            continue;
+          this.loadedUnitTypes.add(unitType);
+
           let unitData   = unitDataMap.get(unitType);
           let unitTypeId = unitTypeToIdMap.get(unitType);
           let sprites    = [];
 
-          if (loadedUnitTypes.includes(unitTypeId))
-            return;
-          loadedUnitTypes.push(unitTypeId);
-
           if (unitData.sounds) {
             Object.keys(unitData.sounds).forEach(name => {
               let sound = unitData.sounds[name];
@@ -218,7 +218,7 @@ window.Tactics = (function () {
               });
             });
           }
-        });
+        }
 
         loader
           .on('progress', progress)