55 lines
1.8 KiB
HTML
55 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>iPuzzle</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
html, body { width: 100%; height: 100%; background: #0d0d1a; overflow: hidden; }
|
||
body { display: flex; justify-content: center; align-items: center; }
|
||
#game-container canvas {
|
||
display: block;
|
||
/* Scale the 1920×1080 canvas to fit the viewport at 16:9.
|
||
- width: fills viewport width, height = 56.25% of that (9/16)
|
||
- max-height: 100vh prevents overflow on portrait/square displays;
|
||
max-width: 177.78vh (16/9 * 100) clamps width on tall displays. */
|
||
width: 100vw;
|
||
height: 56.25vw;
|
||
max-height: 100vh;
|
||
max-width: 177.78vh;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="game-container"></div>
|
||
|
||
<!-- Phaser 3.9 -->
|
||
<script src="https://cdn.jsdelivr.net/npm/phaser@3.9.0/dist/phaser.min.js"></script>
|
||
|
||
<!-- Utilities (no dependencies) -->
|
||
<script src="js/puzzle/ConnectorGeometry.js"></script>
|
||
<script src="js/puzzle/PuzzleGenerator.js"></script>
|
||
<script src="js/puzzle/PieceRenderer.js"></script>
|
||
<script src="js/puzzle/PieceObject.js"></script>
|
||
<script src="js/puzzle/GroupManager.js"></script>
|
||
<script src="js/puzzle/SnapDetector.js"></script>
|
||
<script src="js/puzzle/RoomCode.js"></script>
|
||
|
||
<!-- State -->
|
||
<script src="js/state/PuzzleState.js"></script>
|
||
<script src="js/state/StorageManager.js"></script>
|
||
|
||
<!-- Networking -->
|
||
<script src="js/net/NetworkManager.js"></script>
|
||
|
||
<!-- Scenes -->
|
||
<script src="js/scenes/MainMenuScene.js"></script>
|
||
<script src="js/scenes/NewPuzzleScene.js"></script>
|
||
<script src="js/scenes/PuzzleScene.js"></script>
|
||
|
||
<!-- Boot (last — references all scenes) -->
|
||
<script src="js/main.js"></script>
|
||
</body>
|
||
</html>
|