Skip to content

Implement full-screen touch joystick and fullscreen toggle #12

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Copilot wants to merge 13 commits into
base: main
Choose a base branch
from
Open

Implement full-screen touch joystick and fullscreen toggle #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
f1ada7d
Initial plan
Copilot Feb 10, 2026
df90b06
Add mobile touch controls and responsive canvas
Copilot Feb 10, 2026
8f53d91
Improve mobile detection and simplify touch controls
Copilot Feb 10, 2026
73e44d2
Add dynamic resize detection for touch controls
Copilot Feb 10, 2026
44451ae
Refactor magic numbers to constants in TouchControls
Copilot Feb 10, 2026
5f82f22
Fix landscape 16:9 touch controls and fullscreen support
Copilot Feb 10, 2026
b69b3d5
Refactor magic numbers to named constants in mobile detection
Copilot Feb 10, 2026
be87735
Implement full-screen joystick and fullscreen button
Copilot Feb 11, 2026
bafcf47
Address code review feedback - fix event casing, add constant, improv…
Copilot Feb 11, 2026
733c780
Fix mobile menu taps blocked by touch joystick handler
Linkatplug Feb 12, 2026
926672a
Merge pull request #17 from Linkatplug/codex/corrige-les-bugs-de-la-v…
Linkatplug Feb 12, 2026
f25de3e
Fix remaining mobile tap blocking and hide Android stats bar
Linkatplug Feb 12, 2026
f8795bb
Merge pull request #18 from Linkatplug/codex/corrige-les-bugs-de-la-v…
Linkatplug Feb 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
243 changes: 242 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Space InZader - Roguelite Space Shooter</title>
<style>
* {
Expand Down Expand Up @@ -1111,6 +1111,230 @@
margin: 5px 0;
font-size: 14px;
}

/* Mobile Touch Controls */
#touchControls {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
display: none;
}

#touchControls.active {
display: block;
}

.touch-joystick {
position: fixed;
width: 150px;
height: 150px;
background: rgba(0, 255, 255, 0.15);
border: 3px solid rgba(0, 255, 255, 0.4);
border-radius: 50%;
pointer-events: none;
touch-action: none;
transition: opacity 0.2s;
opacity: 0;
z-index: 100;
}

.touch-joystick-inner {
position: absolute;
top: 50%;
left: 50%;
width: 60px;
height: 60px;
background: rgba(0, 255, 255, 0.6);
border: 2px solid #00ffff;
border-radius: 50%;
transform: translate(-50%, -50%);
transition: none;
}

.touch-fire-button {
display: none; /* Hidden - game has auto-fire */
}

.touch-pause-button {
position: absolute;
top: 20px;
right: 20px;
width: 60px;
height: 60px;
background: rgba(0, 255, 255, 0.3);
border: 2px solid rgba(0, 255, 255, 0.5);
border-radius: 10px;
pointer-events: all;
touch-action: none;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: bold;
color: #00ffff;
z-index: 1000;
}

.touch-pause-button:active {
background: rgba(0, 255, 255, 0.5);
}

.touch-fullscreen-button {
position: absolute;
top: 90px;
right: 20px;
width: 60px;
height: 60px;
background: rgba(0, 255, 255, 0.3);
border: 2px solid rgba(0, 255, 255, 0.5);
border-radius: 10px;
pointer-events: all;
touch-action: none;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: bold;
color: #00ffff;
z-index: 1000;
}

.touch-fullscreen-button:active {
background: rgba(0, 255, 255, 0.5);
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
body {
overflow: hidden;
position: fixed;
width: 100%;
height: 100%;
}

#gameContainer {
width: 100%;
height: 100%;
box-shadow: none;
}

#gameCanvas {
width: 100% !important;
height: 100% !important;
border: none;
}

.title {
font-size: 28px;
margin-bottom: 20px;
}

.button {
padding: 12px 30px;
font-size: 14px;
margin: 8px;
}

.ship-selection {
grid-template-columns: 1fr;
gap: 15px;
margin: 20px;
max-width: 90%;
}

.ship-card {
padding: 15px;
}

.touch-pause-button {
top: 10px;
right: 10px;
width: 50px;
height: 50px;
font-size: 11px;
}

.touch-fullscreen-button {
top: 70px;
right: 10px;
width: 50px;
height: 50px;
font-size: 18px;
}
}

/* Portrait Mode Optimization */
@media (orientation: portrait) and (max-width: 768px) {
.ship-selection {
grid-template-columns: 1fr;
}
}

/* Landscape Mode Optimization for Mobile */
@media (orientation: landscape) and (max-height: 768px) {
body {
overflow: hidden;
position: fixed;
width: 100%;
height: 100%;
}

#gameContainer {
width: 100% !important;
height: 100% !important;
box-shadow: none;
}

#gameCanvas {
width: 100% !important;
height: 100% !important;
border: none;
}

.touch-pause-button {
top: 10px;
right: 10px;
width: 48px;
height: 48px;
font-size: 11px;
}

.touch-fullscreen-button {
top: 65px;
right: 10px;
width: 48px;
height: 48px;
font-size: 16px;
}

.ship-selection {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
margin: 10px;
max-width: 95%;
max-height: 80vh;
overflow-y: auto;
}

.ship-card {
padding: 10px;
font-size: 12px;
}

.title {
font-size: 24px;
margin-bottom: 15px;
}

.button {
padding: 8px 20px;
font-size: 12px;
margin: 5px;
}
}
</style>
</head>
<body>
Expand Down Expand Up @@ -1357,6 +1581,22 @@ <h4>🎮 CONTRÔLES</h4>
<p>🔫 Tir automatique sur l'ennemi le plus proche</p>
<p>✨ Collectez les orbes verts pour gagner XP</p>
</div>

<!-- Touch Controls (Mobile Only) -->
<div id="touchControls">
<div class="touch-joystick" id="touchJoystick">
<div class="touch-joystick-inner" id="touchJoystickInner"></div>
</div>
<div class="touch-fire-button" id="touchFireButton">
FIRE
</div>
<div class="touch-pause-button" id="touchPauseButton">
⏸
</div>
<div class="touch-fullscreen-button" id="touchFullscreenButton">
⛶
</div>
</div>
</div>
</div>

Expand All @@ -1367,6 +1607,7 @@ <h4>🎮 CONTRÔLES</h4>
<script src="js/utils/Logger.js"></script>
<script src="js/utils/DebugOverlay.js"></script>
<script src="js/utils/ScreenEffects.js"></script>
<script src="js/utils/TouchControls.js"></script>
<script src="js/core/ECS.js"></script>
<script src="js/core/GameState.js"></script>
<script src="js/data/WeaponData.js"></script>
Expand Down
5 changes: 4 additions & 1 deletion js/Game.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,9 @@ class Game {
this.audioManager = new AudioManager();
this.scoreManager = new ScoreManager();

// Touch controls for mobile
this.touchControls = typeof TouchControls !== 'undefined' ? new TouchControls(this.canvas) : null;

// Debug system
this.debugOverlay = null;

Expand All @@ -87,7 +90,7 @@ class Game {

// Game systems
this.systems = {
movement: new MovementSystem(this.world, this.canvas),
movement: new MovementSystem(this.world, this.canvas, this.touchControls),
particle: new ParticleSystem(this.world),
collision: new CollisionSystem(this.world, this.gameState, this.audioManager, null),
combat: new CombatSystem(this.world, this.gameState, this.audioManager),
Expand Down
20 changes: 14 additions & 6 deletions js/systems/MovementSystem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,11 @@
*/

class MovementSystem {
constructor(world, canvas) {
constructor(world, canvas, touchControls = null) {
this.world = world;
this.canvas = canvas;
this.keys = {};
this.touchControls = touchControls;
this.setupInputHandlers();
}

Expand Down Expand Up @@ -95,11 +96,18 @@ class MovementSystem {
let dx = 0;
let dy = 0;

// WASD or ZQSD movement
if (this.keys['w'] || this.keys['z']) dy -= 1;
if (this.keys['s']) dy += 1;
if (this.keys['a'] || this.keys['q']) dx -= 1;
if (this.keys['d']) dx += 1;
// Check for touch input first (mobile)
if (this.touchControls && this.touchControls.isEnabled()) {
const touchDir = this.touchControls.getDirection();
dx = touchDir.x;
dy = touchDir.y;
} else {
// WASD or ZQSD movement (keyboard)
if (this.keys['w'] || this.keys['z']) dy -= 1;
if (this.keys['s']) dy += 1;
if (this.keys['a'] || this.keys['q']) dx -= 1;
if (this.keys['d']) dx += 1;
}

// Check if player is actively moving
const hasInput = (dx !== 0 || dy !== 0);
Expand Down
Loading