Implemented auto-size for Phaser blocks.

Use the value 0 to use the auto-size feature for Phaser blocks.
Adjusted the preview to represent the correct height and width.

Author: MarkusBordihn

src/blocks/phaser/game/javascript.js

@@ -29,8 +29,9 @@ Blockly.JavaScript['phaser_game'] = function(block) {
   let number_width = block.getFieldValue('width');
   let number_height = block.getFieldValue('height');
   return 'var obstacle_group;\n' +
-    'var game = new Phaser.Game(' + number_width + ', ' + number_height +
-    ', Phaser.AUTO, \'' + text_name + '\');\n';
+    'var game = new Phaser.Game(' + number_width + ' || window.innerWidth, ' +
+    number_height + ' || window.innerHeight, Phaser.AUTO, \'' +
+    text_name + '\');\n';
 };
 
 

src/ui/preview/preview.gss

@@ -55,8 +55,7 @@
 #{$prefix}preview-content iframe,
 #{$prefix}preview-content webview {
   flex: 1 1 auto;
-  min-height: 100vh;
-  min-width: 100vw;
+  min-height: calc(100vh - 26px - 34px);
 }
 
 #{$prefix}preview-infobar {

static_files/resources/examples/phaser/blocks/bouncing-cubes.cwc

@@ -5,14 +5,14 @@
       "name": "blockly",
       "type": "application/blockly+xml",
       "size": 1004,
-      "content": "<xml xmlns=\"http://www.w3.org/1999/xhtml\">\n  <block type=\"phaser_game\" x=\"-250\" y=\"-250\">\n    <field name=\"name\">Unnamed Game</field>\n    <field name=\"width\">400</field>\n    <field name=\"height\">600</field>\n    <next>\n      <block type=\"phaser_game_state\">\n        <field name=\"name\">main</field>\n        <field name=\"autostart\">true</field>\n        <statement name=\"state\">\n          <block type=\"phaser_preload\">\n            <next>\n              <block type=\"phaser_create\">\n                <next>\n                  <block type=\"phaser_input\">\n                    <next>\n                      <block type=\"phaser_update\">\n                        <next>\n                          <block type=\"phaser_render\" collapsed=\"true\"></block>\n                        </next>\n                      </block>\n                    </next>\n                  </block>\n                </next>\n              </block>\n            </next>\n          </block>\n        </statement>\n      </block>\n    </next>\n  </block>\n</xml>",
+      "content": "<xml xmlns=\"http://www.w3.org/1999/xhtml\">\n  <block type=\"phaser_game\" x=\"-250\" y=\"-250\">\n    <field name=\"name\">Unnamed Game</field>\n    <field name=\"width\">0</field>\n    <field name=\"height\">0</field>\n    <next>\n      <block type=\"phaser_game_state\">\n        <field name=\"name\">main</field>\n        <field name=\"autostart\">true</field>\n        <statement name=\"state\">\n          <block type=\"phaser_preload\">\n            <next>\n              <block type=\"phaser_create\">\n                <next>\n                  <block type=\"phaser_input\">\n                    <next>\n                      <block type=\"phaser_update\">\n                        <next>\n                          <block type=\"phaser_render\" collapsed=\"true\"></block>\n                        </next>\n                      </block>\n                    </next>\n                  </block>\n                </next>\n              </block>\n            </next>\n          </block>\n        </statement>\n      </block>\n    </next>\n  </block>\n</xml>",
       "version": 1
     },
     "__javascript__": {
       "name": "__javascript__",
       "type": "application/javascript",
       "size": 429,
-      "content": "var obstacle_group;\nvar game = new Phaser.Game(400, 600, Phaser.AUTO, 'Unnamed Game');\ngame.state.add('main', {\n  preload: function(e) {\n  },\n  create: function () {\n    if (navigator.userAgent == 'CwC sandbox') {game.time.desiredFps = 30;}\n    obstacle_group = game.add.group(undefined, 'obstacle_group');\n  },\n  input_: function(e) {\n  },\n  update: function(e) {\n    this.input_(e);\n  },\n  render: function(e) {\n  },\n}, true);\n",
+      "content": "",
       "version": 1
     }
   },