diff --git a/app/assets/images/image-casse-briques-mobile.png b/app/assets/images/image-casse-briques-mobile.png new file mode 100644 index 0000000..5cbe2db Binary files /dev/null and b/app/assets/images/image-casse-briques-mobile.png differ diff --git a/app/views/game.scala.html b/app/views/game.scala.html index 78e3fe0..c56f1e8 100644 --- a/app/views/game.scala.html +++ b/app/views/game.scala.html @@ -1,6 +1,13 @@ @() @main("Arkanoid Game") { - +
+ +
+ + } \ No newline at end of file diff --git a/public/javascripts/device-detection.js b/public/javascripts/device-detection.js new file mode 100644 index 0000000..a6dbcd7 --- /dev/null +++ b/public/javascripts/device-detection.js @@ -0,0 +1,24 @@ +// public/javascripts/device-detection.js + +function isMobileDevice() { + return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1); +} + +function checkDeviceType() { + const gameContainer = document.getElementById('gameContainer'); + const mobileMessage = document.getElementById('mobileMessage'); + + if (isMobileDevice()) { + gameContainer.style.display = 'none'; + mobileMessage.style.display = 'block'; + } else { + gameContainer.style.display = 'block'; + mobileMessage.style.display = 'none'; + } +} + +// Run the check when the page loads +window.addEventListener('load', checkDeviceType); + +// Also run the check if the window is resized (in case of device rotation) +window.addEventListener('resize', checkDeviceType); diff --git a/public/stylesheets/main.css b/public/stylesheets/main.css index e69de29..c571b25 100644 --- a/public/stylesheets/main.css +++ b/public/stylesheets/main.css @@ -0,0 +1,5 @@ +#mobileMessage { + text-align: center; + padding: 20px; + font-family: Arial, sans-serif; +}