breakout-custom/app/views/game.scala.html

@()

@main("Arkanoid Game") {

    <div id="mobileMessage" style="display: none; width: 100%; height: 100vh; flex-direction: column; justify-content: center; align-items: center;">
        <p style="width: 80%; max-width: 80vw;"><img src="/assets/images/image-casse-briques-mobile.png" alt="Capture d'écran du jeu casse-briques DéconstruIT" style="width: 100%; height: auto;"/></p>
        <p style="text-align: center; padding: 20px;">Le jeu de casse-briques DéconstruIT est disponible sur ordinateur seulement pour l'instant</p>
    </div>

    <div id="gameContainer" style="display: none;text-align:center; justify-content: center; align-items: center;">
        <canvas id="gameCanvas" width="540" height="675"></canvas>
    </div>

    <script src="@routes.Assets.versioned("javascripts/device-detection.js")"></script>
    <script>
            if (!isMobileDevice()) {
                var script = document.createElement('script');
                script.src = '@routes.Assets.versioned("javascripts/game.js")';
                document.body.appendChild(script);
            }
    </script>
}