index.html 6.35 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
18
19
20
21
22
23
24
25
26
27
28
29
30

        <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>
Rahix's avatar
Rahix committed
31
      </svg>
32
33
34
35
      <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
36

Rahix's avatar
Rahix committed
37
38
39
40
41
42
43
44
45
        <g transform="translate(250, 800)">
          <text x="0" y="-15" class="group-box-label">ANGEL STATS:</text>

          <text x="30" y="30" class="stats-label">Collected hours:</text>
          <text x="450" y="30" class="stats-number positive" id="heaven-collected-hours">?</text>
          <text x="30" y="80" class="stats-label">Hours still needed:</text>
          <text x="450" y="80" class="stats-number negative" id="heaven-needed-hours">?</text>
        </g>

46
47
48
49
        <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" />

50
51
52
          <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">
53
54
55
              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
56
              vel lorem molestie tristique. Fusce tempor metus a nibh.
57
58
            </div>
          </foreignObject>
59
60
61

          <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>
62
63
64
65
66
67
68
69
70
71
72
        </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>
      <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
73
        <text x="960" y="140" class="header">Engel Simulator 2020</text>
74
75
76
77
78

        <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
79
80
81
82
83
84
85

        <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>
86
87
      </svg>
      <svg class="game-gui" viewBox="0 0 1920 1080">
88
        <text x="10" y="1070" class="version-info" id="version-info">Unknown version ...</text>
Rahix's avatar
Rahix committed
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
        <!-- 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>
113
114
      </svg>
    </div>
Rahix's avatar
Rahix committed
115
    <script src="./bundle.js"></script>
Rahix's avatar
Initial  
Rahix committed
116
117
  </body>
</html>