partage/breakout-custom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adapter pour afficher une image statique sur mobile

Browse source
This commit is contained in:
François Pelletier 2024-09-01 12:57:09 -04:00
parent 3351771be7
commit 15957f0462
4 changed files with 37 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
app/assets/images/image-casse-briques-mobile.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 129 KiB

9
app/views/game.scala.html
View file

@ -1,6 +1,13 @@
@()
@main("Arkanoid Game") {
<canvas id="gameCanvas" width="540" height="675"></canvas>
<div id="gameContainer">
<canvas id="gameCanvas" width="540" height="675"></canvas>
</div>
<div id="mobileMessage" style="display: none;">
<p><img src="/assets/images/image-casse-briques-mobile.png" alt="Capture d'écran du jeu casse-briques DéconstruIT"/></p>
<p>Le jeu de casse-briques DéconstruIT est disponible sur ordinateur seulement pour l'instant</p>
</div>
<script src="@routes.Assets.versioned("javascripts/device-detection.js")"></script>
<script src="@routes.Assets.versioned("javascripts/game.js")"></script>
}

24
public/javascripts/device-detection.js Normal file
View file

@ -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);

5
public/stylesheets/main.css
View file

@ -0,0 +1,5 @@
#mobileMessage {
text-align: center;
padding: 20px;
font-family: Arial, sans-serif;
}