Flexible placements of title & counters

[fractalbach]

1. Separate the Title and counters from the SVG element.
2. Use CSS to define if the Counters are placed on the sides of the page vs. the top.

height > width:

• Counters appear on the top, side by side.
• game area fully reaches the sides.

+---------------------+
 ↺      Title     ⌂  
+----------+----------+
|    1     |     2    |
+----------+----------+
|                     |
|                     |
|        Game         |
|                     |
|                     |
+---------------------+

width > height

• Counters appear far-left and far-right.
• Game area is centered

+-------------------------------------------+
    ↺              Title              ⌂  
+---------+----------------------+----------+
|         |                      |          |
|         |                      |          |
|    1    |                      |     2    |
|         |         Game         |          |
|         |                      |          |
|         |                      |          |
|         |                      |          |
+---------+----------------------+----------+

[fractalbach]

Some experiments with the flex box css look like this:

Landscape

Portrait

CSS Code

    /* =========================================
     *  CSS for screen layout
     * ----------------------------------------- 
     */
    html {
        height: 100%;
    }
    body {  
        font-family: sans-serif;
        background: #000;
        background: radial-gradient( #000 50%, #020,  #202 ); 
        overflow: auto;
        margin: auto auto;
        display: flex;
        flex-flow: row wrap;
        align-items: flex-start;

        text-align: center;
    }
    #landscape_zone {
        display: flex;
        flex-flow: row wrap;
        align-items: flex-start;

        height: calc(90% - 2em);
    }

    #highest_title {
        text-align: center;
        margin: auto auto;
    }
@media screen and (orientation: landscape) { 
    body {
        height: 100%;
    }
    svg {
        order:3;
        margin: auto auto;
    }
    #exp_counter2 {
        order:4;
    }
    #landscape_zone {
        flex-flow: nowrap;
        margin: 0 auto;
        width: 100%;
    }

} 
@media screen and (orientation: portrait) {
    body  {
        flex-flow: row wrap; 
    }
    aside {
        flex: 1 auto;
    }
    #landscape_zone {
        width: 100%;
    }
}

    #experiment_title {
        color:#FFF; 
        border: solid #FFF;
        width: 100%;
        font-size: 2em;
        margin: 0 auto;
    }
    #exp_counter1 {
        color: #FFF;
        border: solid #FFF;
        padding: 0;
        margin: auto;

    }
    #exp_counter2 {
        color: #FFF;
        border: solid #FFF;
        margin: auto;

    }
    #gameSVG {
        position: relative;
        margin: auto auto;
        width: 100%;
        height: 100%;
    }

[fractalbach]

Although there is potential for a more interesting user interface by using the flex box, and it should be experimented with, it seems to be introducing more oddities and issues than it is worth (for the moment).

• The portrait view (if there were several minor tweaks) so far is looks the nicest.
• The landscape view has the potential to save the most screen space, especially when viewed on a phone.

Closing this for now, but might re-investigate later.

[fractalbach]

It can be done.