no-hyperbole-game/index.html at main · No-hyperbole/no-hyperbole-game · 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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style/index.css" />
    <link rel="icon" type="image/x-icon" href="./favicon/favicon.png" />
    <title>no_hyperbole</title>
    <script src="./three.js build/three.js"></script>
    <script src="./three.js build/GLTFLoader.js"></script>
    <script src="./js/microphoneInput.js"></script>
    <script src="./js/visualiseMicrophone.js" type="module"></script>
    <script src="./js/gameConstants.js"></script>
    <script src="./js/getRandonInt.js"></script>
    <script src="./js/materialArray.js"></script>
    <script src="./js/splashScreenSlideOut.js"></script>
    <script src="./js/manipulateInstructionsVisibility.js"></script>
  </head>
  <body>
    <div class="splashScreen" onclick="splashScreenSlideOut()">
      <div class="splashScreen__logo">
        <img
          class="splashScreen__logo__graph"
          src="./logo/logoHyperbole.svg"
          alt="Graph of a hyperbole."
        />
        <img
          class="splashScreen__logo__text"
          src="./logo/logoText.svg"
          alt="Text saying `no` which is quite big. On the bottom right of it is a text saying `hyperbole`"
        />
      </div>
    </div>
    <div class="instructions">
      <div class="instructions__1">
        <div class="instructions__1__logo">
          <img
            class="instructions__1__logo__img"
            src="./logo/logoFull.svg"
            alt="A hyperbole, with words `no` in the upper left corner and `hyperbole` in the lower right"
          />
        </div>
        <div class="instructions__1__text">
          Can you feel that? It`s the aroma of the ozone, the purest smell in
          the world. The smell of a fresh start.
          <br />
          <br />
          Do not hyperbolize. Get rid of your worries. The only thing that
          matters is you and your breath.
        </div>
      </div>
      <div class="instructions__2">
        <div class="instructions__2__upperText1">Let`s fly. How?</div>
        <div class="instructions__2__upperText2">Invocate your mantra...</div>
        <div class="instructions__2__breatheAnimation">
          <img
            class="instructions__2__breatheAnimation__1"
            src="./breathe/1.svg"
            alt=""
          />
          <img
            class="instructions__2__breatheAnimation__2"
            src="./breathe/2.svg"
            alt=""
          />
          <img
            class="instructions__2__breatheAnimation__3"
            src="./breathe/3.svg"
            alt=""
          />
          <img
            class="instructions__2__breatheAnimation__4"
            src="./breathe/4.svg"
            alt=""
          />
          <img
            class="instructions__2__breatheAnimation__5"
            src="./breathe/5.svg"
            alt=""
          />
        </div>
        <div class="instructions__2__bottomText">Vocalize loud and clear!</div>
      </div>
      <div class="instructions__3">
        <button class="instructions__3__start" onclick="hideInstructions()">
          Start game
        </button>
      </div>
    </div>
    <button class="backToInstructions" onclick="showInstructions()">i</button>
    <canvas id="three.js"></canvas>
  </body>
</html>