A Simple Game: Add width and height parameters to embed-gwt.html and make it responsive (#256)

Author: Hyperion2400

_includes/embed-gwt.html

@@ -1,12 +1,40 @@
 <style>
     .embed-container {
-      position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;
+        position: relative;
+        max-width: 100%;
+        margin: 1em auto; /* auto left and right to center div in case width is smaller than available space */
+
+        {% if include.width and include.height %}
+            /* set width and height explicitly if they are given */
+            width: {{include.width}}px;
+            height: {{include.height}}px;
+        {% else %}
+            /* otherwise default to 16:9 ratio */
+            height: 0;
+            padding-bottom: 56.25%;
+        {% endif %}
     }
-    .embed-container iframe , .embed-container object, .embed-container embed {
-      position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+
+    /* set height based on ratio if screen width is smaller than given width to avoid black bars */
+    {% if include.width and include.height %}
+        @media only screen and (max-width: {{include.width}}px) {
+            .embed-container {
+                height: 0;
+                padding-bottom: calc({{include.height}} / {{include.width}} * 100%);
+            }
+        }
+    {% endif %}
+
+    .embed-container iframe, .embed-container object, .embed-container embed {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
     }
+
     .embed-container iframe {
-      border:0;
+        border: 0;
     }
 </style>
 

wiki/misc/wiki-style-guide.md

@@ -81,11 +81,13 @@ Videos can be included like this:
 
 Actual libGDX examples can be embedded via GWT as iframes. To do this, use the `embed-gwt` element on a wiki page:
 ```yml
-{% raw %}{% include embed-gwt.html dir='viewport-example' %}{% endraw %}
+{% raw %}{% include embed-gwt.html dir='viewport-example' width="800" height="500" %}{% endraw %}
 ```
 
 `dir` refers to the directory in the [libgdx-wiki-examples](https://github.com/libgdx/libgdx-wiki-examples) repo, where the source code of the examples is located. In particular, it denotes the path to the root folder of the example's Gradle project (without leading and trailing slashes; in this case, `viewport-example` refers to the  `/viewport-example/` folder which contains `/html/build.gradle`). The examples are automatically built via GH Actions (by calling `./gradlew html:dist`) and then deployed through GH Pages.
 
+If `width` and `height` are **both** set they are used for the container dimensions. They represent the dimensions in pixels and must be given as raw numbers without units.
+
 To style the embedded content, use the `containerstyle` and `iframestyle` attributes.
 
 ## Renaming pages

wiki/start/a-simple-game.md

@@ -7,7 +7,7 @@ redirect_from:
 
 Let's make a game! Game design is hard, but if you break up the process into small, achievable goals, you'll be able to produce wonders. In this simple game tutorial, you will learn how to make a basic game from scratch. These are the essential skills that you will build on in future projects. You may watch the [video tutorial](https://youtu.be/aipDYyh1Mlc), however you should come back here for the code examples.
 
-{% include embed-gwt.html dir='a-simple-game' %}
+{% include embed-gwt.html dir='a-simple-game' width="800" height="500" %}
 
 As you can see with the live demo, we're going to make a basic game where you control a bucket to collect water droplets falling from the sky. There is no score or end goal. Just enjoy the experience! Here are the steps that we will use to split up the game design process: