petJoy/index.html at main · RichardSabol/petJoy · 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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="en">
<head>
    <title>PC Grafika ThreeJS </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <link href="./css/styles.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"
          integrity="sha384-Bfad6CLCknfcloXFOyFnlgtENryhrpZCe29RTifKEixXQZ38WheV+i/6YWSzkz3V" crossorigin="anonymous"/>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script type="module" src="./js/require.js"></script>
    <script type="module" src="./js/ThreeScene.js"></script>
</head>
<body>

<div class="content" id="page">
    <div id="blocker">
        <div class="alert" id="alertBox">
            <i class="fa fa-exclamation-triangle"></i>
            <strong> Error!</strong> <span id="errorMessage"></span>
        </div>
        <div id="instructions" class="instructions">
            <h1>
                PetJoy
            </h1>
            <div class="spacer">
                <div class="line"></div>
                <i class="fa fa-paw"></i>
                <div class="line"></div>
            </div>
            <div class="deadMessage">
                <span class="deadmsg">Animal died. R. I. P. <i class="fas fa-cross"></i></span>
                <br>
                <div id="deadStats"></div>
            </div>
            <button class="button-55" id="resumeButton">Resume</button>
            <button class="button-55" id="saveButton">Save Game</button>
            <button class="button-55" id="playButton">New Game</button>
            <button class="button-55" id="loadButton">Load Game</button>
            <p>
                Move: WASD<br/>
                Crouch: SHIFT<br/>
                Crawl: CTRL(toggle)<br/>
                Look: MOUSE<br/>
            </p>
        </div>
        <div id="menu" class="instructions">
            <i class="backButton fa fa-arrow-left">Back</i>
            <p class="menuTitle">Choose your animal</p>
            <span class="animalOption" id="dog">Dog</span>
            <span class="animalOption" id="rabbit">Rabbit</span>
            <span class="animalOption" id="cat">Cat</span>
            <span class="animalOption" id="trex">T-Rex (without texture)</span>
            <span>Chicken is removed due to project size cuts :(</span>
            <button class="button-55" id="startButton">Start Game</button>
        </div>
        <div id="saves" class="instructions">
            <i class="backButton fa fa-arrow-left">Back</i>
            <table class='savesTable'></table>
        </div>
    </div>
    <div class="overlay">
        <div id="status">
            <span class="stat"><i class="fa fa-arrows-alt-v blue"></i><span id="age">Age: 0</span></span>
            <span class="stat"><i class="fa fa-heartbeat red"></i><span id="health">Health: 100</span></span>
            <span class="stat"><i class="fa fa-drumstick-bite brown"></i><span id="food">Food: 100</span></span>
            <span class="stat"><i class="fa fa-grin-beam yellow"></i><span id="happiness">Happiness: 100</span></span>
            <span class="stat"><i class="fa fa-poop brown1"></i><span id="cleanliness">Cleanliness: 100</span></span>
        </div>
        <div class="crossDiv">
            <span id="crosshair">+</span>
            <div id='tooltip'></div>
        </div>

    </div>

</div>
</body>
</html>