final-project-thalassia/index.html at main · SapienzaInteractiveGraphicsCourse/final-project-thalassia · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Thalassia — a cozy sailing game</title>
    <link rel="stylesheet" href="css/style.css">

    <!-- Resolve 'three' to the copy in lib/ so the repo
         is self-contained (as requested, though I might
         change this later on). -->
    <script type="importmap">
    {
        "imports": {
            "three": "./lib/three.module.js"
        }
    }
    </script>
</head>
<body>
    <!-- three.js creates the canvas and appends it to body from main.js -->

    <div id="fps">FPS: <span id="fps-value">60</span></div>

    <div id="hud">
        <div id="hud-title">⛵ Thalassia</div>
        <div id="hud-controls">
            <div><b>W / S</b> — accelerate / brake</div>
            <div><b>A / D</b> — steer left / right</div>
            <div><b>Space</b> — raise / lower sails</div>
            <div><b>N</b> — day / night &nbsp; <b>M</b> — sound &nbsp; <b>J</b> — journal</div>
            <div><b>Mouse drag</b> — orbit camera</div>
            <div><b>Mouse wheel</b> — field of view</div>
            <div><b>Esc</b> — pause</div>
        </div>
        <div id="hud-sail">Sails: <span id="sail-state">raised</span></div>
        <div id="hud-bottles">🍾 Bottles: <span id="bottle-count">0</span></div>
    </div>
    <!-- Bottom-left control panel (day/night, sound) built by js/ui.js -->
    <!-- code starts from main.js -->
    <script type="module" src="js/main.js"></script>
</body>
</html>