example.js

/*

// Ratio attribute
.ratio-16-9 {
    width: 100%;
    padding-bottom: 56.25%;
    position: relative;
}

.ratio-4-3 {
    width: 100%;
    padding-bottom: 75%;
    position: relative;
}

#gamebody {
    margin-top: 44px;
    position: absolute;
    right: 20%; // size of the camera body
    padding-right: 44px; // gutter between camerabody and gamebody
}

#camerasbody {
    margin-top: 10px;
    position: fixed;
    right: 0px;
    margin-top: 33px;
}

*/


const screenShare = 0.75 // 75% of the viewport is ideally the game screen
    const inverseScreenShare = 1 / screenShare
    const aspectRatio = 0.75 // for 4:3
    const inverseAspectRatio = 1 / aspectRatio
    const navbarHeight = 58
    const chatboxHeight = 58
    const verticalMarginHeight = 21
    const maxHeight =
        dimensions.height -
        navbarHeight -
        2 * verticalMarginHeight -
        chatboxHeight
    const screenHeight = Math.min(
        dimensions.width / (inverseAspectRatio * inverseScreenShare),
        maxHeight
    )
    const screenWidth = (() => {
        if (screenHeight < maxHeight) {
            return screenShare * dimensions.width
        }
        return screenHeight * inverseAspectRatio
    })()
    const gutterWidth = 44 // fixed gutter between camera and game
    const camerasWidth = 0.2 * dimensions.width
    const contentWidth = screenWidth + gutterWidth + camerasWidth
    const minimumMargin = 22
    const marginRight = Math.max(
        (dimensions.width - contentWidth) / 2,
        minimumMargin
    )

    // 16-9
    // 4-3
    return (
        <Container fluid={true}>
            <div className="row">
                <div
                    id="gamebody"
                    className="col-xs-12 col-sm-12 col-md-10 col-lg-10 order-1"
                    style={{
                        maxWidth: `${screenWidth}px`,
                        marginRight: marginRight,
                    }}
                >
                    <div className="ratio-4-3">{mainSelection()}</div>
                </div>
                <div
                    id="camerasbody"
                    className="col-xs-2 col-sm-2 col-md-2 col-lg-2"
                    style={{
                        paddingBottom: screenHeight + 45,
                        marginRight: marginRight,
                    }}
                >
                    <div id="faces"/>
                </div>
            </div>
        </Container>
    )
}