index.html 8.88 KB
Newer Older
Rahix's avatar
Initial  
Rahix committed
1
2
3
4
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
Rahix's avatar
Rahix committed
5
    <title>Engel Simulator 2020</title>
Rahix's avatar
Initial  
Rahix committed
6
7
  </head>
  <body>
8
9
10
11
12
    <div class="noscript-overlay">
      <noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript>
    </div>
    <div class="game">
      <canvas id="game-canvas" width="1920" height="1080"></canvas>
Rahix's avatar
Rahix committed
13
14
      <svg id="ingame-ui" class="game-gui" viewBox="0 0 1920 1080" style="display: none">
        <text x="960" y="80" class="sanity">SANITY</text>
Rahix's avatar
Rahix committed
15
16
        <rect x="460" y="100" width="600" height="40" class="sanity-amount" id="sanity-amount" />
        <rect x="460" y="100" width="1000" height="40" class="sanity-outline" />
Rahix's avatar
Rahix committed
17

Rahix's avatar
Rahix committed
18
19
20
21
22
23
24
25
26
27
28
        <defs>
          <linearGradient id="objective-bg-gradient" x1="0" x2="0" y1="0" y2="1">
            <stop class="objective-background stop1" offset="0%" />
            <stop class="objective-background stop2" offset="100%" />
          </linearGradient>
        </defs>
        <rect x="0" y="0" width="400" height="250" class="objective-background"/>
        <text x="20" y="44" class="objective">Task:</text>
        <g id="ingame-objective" transform="translate(20, 64) scale(0.8)">
        </g>

Rahix's avatar
Rahix committed
29
30
31
32
33
34
35
36
37
38
39
40
41
        <g id="ingame-return-to-heaven" style="display: none">
          <defs>
            <filter id="blur-back-to-heaven">
              <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
            </filter>
          </defs>
          <rect x="160" y="190" width="1600" height="160" class="overlay-backdrop" filter="url(#blur-back-to-heaven)" />
          <text x="960" y="300" class="header">
            Returning to HEAVEN in
            <tspan id="ingame-return-secs">3</tspan>
            ...
          </text>
        </g>
Grisu's avatar
Grisu committed
42
43
44
45
46
47
48
49
50
51
52
53
        <g id="ingame-game-over" style="display: none">
          <defs>
            <filter id="blur-game-over">
              <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
            </filter>
          </defs>
          <rect x="160" y="190" width="1600" height="160" class="overlay-backdrop" filter="url(#blur-game-over)" />
          <text x="960" y="300" class="header">
            GAME OVER!
          </text>
        </g>

Rahix's avatar
Rahix committed
54
      </svg>
55
56
57
58
      <svg id="heaven-ui" class="game-gui" viewBox="0 0 1920 1080" style="display: none">
        <!-- GUI for the "heaven" -->
        <rect x="0" y="0" width="1920" height="1080" class="transparent-background" />
        <text x="960" y="140" class="header">Welcome to HEAVEN</text>
Rahix's avatar
Rahix committed
59

Rahix's avatar
Rahix committed
60
61
62
        <g transform="translate(250, 800)">
          <text x="0" y="-15" class="group-box-label">ANGEL STATS:</text>

Rahix's avatar
Rahix committed
63
64
65
66
67
68
          <text x="30" y="30" class="stats-label">Sanity remaining:</text>
          <text x="450" y="30" class="stats-number health" id="heaven-sanity">?</text>
          <text x="30" y="80" class="stats-label">Collected hours:</text>
          <text x="450" y="80" class="stats-number positive" id="heaven-collected-hours">?</text>
          <text x="30" y="130" class="stats-label">Hours still needed:</text>
          <text x="450" y="130" class="stats-number negative" id="heaven-needed-hours">?</text>
Rahix's avatar
Rahix committed
69
70
        </g>

71
72
73
74
        <g transform="translate(1100, 300)">
          <text x="0" y="-15" class="group-box-label">ASSIGNED SHIFT:</text>
          <rect x="0" y="0" width="600" height="500" class="group-box" />

75
76
77
          <text x="30" y="30" class="flowtext-header" id="heaven-shift-title">Collect empty bottes</text>
          <foreignObject x="30" y="80" width="540" height="315" class="flowtext">
            <div xmlns="http://www.w3.org/1999/xhtml" id="heaven-shift-description">
78
79
80
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
              at felis egestas, tristique risus nec, pulvinar nisi. Nullam
              tristique mi a arcu pellentesque hendrerit. Sed fermentum metus
81
              vel lorem molestie tristique. Fusce tempor metus a nibh.
82
83
            </div>
          </foreignObject>
84
85
86

          <text x="30" y="440" class="stats-label">Shift hours:</text>
          <text x="280" y="440" class="stats-number positive" id="heaven-shift-hours">?</text>
87
88
89
90
91
92
93
        </g>

        <g id="heaven-start-shift" transform="translate(1400, 880)" class="big-button button-1">
          <rect x="-302" y="-60" width="604" height="120" />
          <text x="0" y="0">START SHIFT</text>
        </g>
      </svg>
Rahix's avatar
Rahix committed
94
95
96
97
98
99
100
101
102
103
104
105
106
107
      <svg id="game-over-ui" class="game-gui" viewBox="0 0 1920 1080" style="display: none">
        <!-- GUI for the Game Over screen -->
        <rect x="0" y="0" width="1920" height="1080" class="background" />

        <text x="960" y="300" class="header">Game Over</text>

        <g id="game-over-replay" transform="translate(960, 500)" class="big-button button-1">
          <rect x="-350" y="-60" width="700" height="120" />
          <text x="0" y="0">Start New Game</text>
        </g>
        <g id="game-over-quit" transform="translate(960, 650)" class="big-button button-3">
          <rect x="-120" y="-60" width="240" height="120" />
          <text x="0" y="0">Quit</text>
        </g>
0mbi's avatar
0mbi committed
108
109
110
111
112
      </svg>	
      <svg id="win-ui" class="game-gui" viewBox="0 0 1920 1080" style="display: none">
        <!-- GUI for the WIN screen -->
        <rect x="0" y="0" width="1920" height="1080" class="transparent-background" />
        <text x="960" y="140" class="header">You have won!</text>
Rahix's avatar
Rahix committed
113
      </svg>
114
115
116
117
      <svg id="menu-ui" class="game-gui" viewBox="0 0 1920 1080" style="display: block">
        <!-- GUI for the main menu -->
        <rect x="0" y="0" width="1920" height="1080" class="background" />

Rahix's avatar
Rahix committed
118
        <text x="960" y="140" class="header">Engel Simulator 2020</text>
119
120
121
122
123

        <g id="main-menu-play" transform="translate(960, 500)" class="big-button button-1">
          <rect x="-150" y="-60" width="300" height="120" />
          <text x="0" y="0">PLAY</text>
        </g>
Rahix's avatar
Rahix committed
124
125
126
127
128
129
130

        <a href="https://gitlab.muc.ccc.de/engel-simulator-2020/game">
          <g transform="translate(960, 650)" class="big-button button-3">
            <rect x="-300" y="-60" width="600" height="120" />
            <text x="0" y="0">Hack the code</text>
          </g>
        </a>
131
132
      </svg>
      <svg class="game-gui" viewBox="0 0 1920 1080">
133
        <text x="10" y="1070" class="version-info" id="version-info">Unknown version ...</text>
Rahix's avatar
Rahix committed
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
        <!-- rc3 logo -->
        <g transform="translate(1780, 940) scale(0.2)">
          <defs>
            <style>
              .cls-1{fill:#240039}.cls-2{fill:#670096}.cls-3{fill:#450069}.cls-4{fill:#b239ff}
            </style>
          </defs>
          <rect x="1" y="1" width="576" height="575" fill="black"/>
          <path id="_240039" data-name="240039" class="cls-1" d="M143 240h97v288h-97z"/>
          <path id="_240039-2" data-name="240039" class="cls-1" d="M528 432h96v192h-96z"/>
          <path id="_670096" data-name="670096" class="cls-2" d="M528 47h96v97h-96z"/>
          <path id="_670096-2" data-name="670096" class="cls-2" d="M432 47h96v193h-96z"/>
          <path id="_670096-3" data-name="670096" class="cls-2" d="M336 47h96v97h-96z"/>
          <path id="_670096-4" data-name="670096" class="cls-2" d="M336 432h96v192h-96z"/>
          <path id="_670096-5" data-name="670096" class="cls-2" d="M240 336h96v288h-96z"/>
          <path id="_450069" data-name="450069" class="cls-3" d="M143 528h97v96h-97z"/>
          <path id="_450069-2" data-name="450069" class="cls-3" d="M528 143h96v289h-96z"/>
          <path id="_450069-3" data-name="450069" class="cls-3" d="M432 528h96v96h-96z"/>
          <path id="_450069-4" data-name="450069" class="cls-3" d="M240 47h96v289h-96z"/>
          <path id="b239ff" class="cls-4" d="M432 240h96v288h-96z"/>
          <path id="b239ff-2" data-name="b239ff" class="cls-4" d="M336 143h96v290h-96z"/>
          <path id="RC3_copy" data-name="RC3 copy" d="M222.7 545.4v-36.5l31.8-.2 30.8 36.7H310v-8.2L286 508.7h1a23.2 23.2 0 0023.1-22.9v-28.7a23.2 23.2 0 00-23-23h-88.3v111.3h24zm0-60.8V458h63v26.5h-63zm208.6 60.8v-24.2h-87.1v-63h87V434h-88a23 23 0 00-23 23v65.5a23 23 0 0023 22.9h88zm96.3 0a22.6 22.6 0 0022.4-22.5v-23a21.2 21.2 0 00-1.4-7.7 22.5 22.5 0 00-3.7-6.4 20.7 20.7 0 00.7-3.5 30.7 30.7 0 00.3-3.6v-22.3a22.4 22.4 0 00-22.5-22.4h-60.1a21.9 21.9 0 00-16 6.6 21.5 21.5 0 00-6.6 15.8v10h23.7v-8.7h57.8v19.8h-63.3V501h67.5v20.6h-62v-7.4h-23.7v8.6a22.7 22.7 0 0022.6 22.5h64.3z" fill="#fff" fill-rule="evenodd"/>
          <path id="rahmen_weiss" data-name="rahmen weiss" fill="none" stroke="#fff" stroke-width="7.6" d="M1.2-.2h576.3v576.3H1.2z"/>
        </g>
158
159
      </svg>
    </div>
Simon Goller's avatar
Simon Goller committed
160
161
162
163
164
165
166
167
168
169
    <div class="crash-screen">
      <div class="crash-screen-title">For Heaven's Sake!  It crashed!</div>
      <div class="reload-button">
        <button onclick="location.reload()">Restart Game</button>
        <a class="crash-screen-bugreport-link" href="https://gitlab.muc.ccc.de/engel-simulator-2020/game/-/issues/new">Report bug</a>
      </div>
      <div class="crash-screen-body">
        <pre class="crash-screen-error"></pre>
      </div>
    </div>
Rahix's avatar
Rahix committed
170
    <script src="./bundle.js"></script>
Rahix's avatar
Initial  
Rahix committed
171
172
  </body>
</html>