ThomasFfefefef commited on
Commit
7126d8c
1 Parent(s): 49bd424

Update demo

Browse files
Build/SoccerTwos.data.gz CHANGED
@@ -1,3 +1,3 @@
1
  version https://git-lfs.github.com/spec/v1
2
- oid sha256:d2e3182a6cbd843fff4b49e4cc94ce69fa3e7c8455d597299c9dced8621e5b5e
3
- size 5080850
 
1
  version https://git-lfs.github.com/spec/v1
2
+ oid sha256:38ce10af8b4a258d0aa033facb40d306f04cebcda313c83e9621566fa17b493f
3
+ size 5080843
TemplateData/favicon.ico CHANGED
TemplateData/style.css CHANGED
@@ -1,16 +1,105 @@
1
- body { padding: 0; margin: 0 }
2
- #unity-container { position: absolute }
3
- #unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
4
- #unity-container.unity-mobile { width: 100%; height: 100% }
5
- #unity-canvas { background: #231F20 }
6
- .unity-mobile #unity-canvas { width: 100%; height: 100% }
7
- #unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
8
- #unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
9
- #unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; margin-left: 6.5px; background: url('progress-bar-empty-dark.png') no-repeat center }
10
- #unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }
11
- #unity-footer { position: relative }
12
- .unity-mobile #unity-footer { display: none }
13
- #unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center }
14
- #unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
15
- #unity-fullscreen-button { float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
16
- #unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ html {
2
+ box-sizing: border-box;
3
+ }
4
+ *, *:before, *:after {
5
+ box-sizing: inherit;
6
+ }
7
+ html, body {
8
+ height: 100%;
9
+ }
10
+ canvas {
11
+ display: block;
12
+ }
13
+ body {
14
+ margin: 0;
15
+ }
16
+ #unity-container {
17
+ width: 100%;
18
+ height: 100%;
19
+ }
20
+ #unity-canvas {
21
+ width: 100%;
22
+ height: 100%;
23
+ background: #231F20;
24
+ }
25
+ #loading-cover {
26
+ position: absolute;
27
+ top: 0;
28
+ left: 0;
29
+ width: 100%;
30
+ height: 100%;
31
+ display: flex;
32
+ justify-content: center;
33
+ align-items: center;
34
+ }
35
+ #unity-loading-bar {
36
+ flex: 1 1 auto;
37
+ display: flex;
38
+ flex-direction: column;
39
+ justify-content: center;
40
+ align-items: center;
41
+ }
42
+ #unity-logo {
43
+ text-align: center;
44
+ }
45
+ #unity-logo img {
46
+ max-width: 80%;
47
+ }
48
+ #unity-progress-bar-empty {
49
+ width: 80%;
50
+ height: 24px;
51
+ margin: 10px 20px 20px 10px;
52
+ text-align: left;
53
+ border: 1px solid white;
54
+ padding: 2px;
55
+ }
56
+ #unity-progress-bar-full {
57
+ width: 0%;
58
+ height: 100%;
59
+ background: #ffd21e;
60
+ }
61
+ .light #unity-progress-bar-empty {
62
+ border-color: black;
63
+ }
64
+ .light #unity-progress-bar-full {
65
+ background: black;
66
+ }
67
+
68
+ #unity-fullscreen-button {
69
+ position: absolute;
70
+ right: 10px;
71
+ bottom: 10px;
72
+ width: 38px;
73
+ height: 38px;
74
+ background: url('fullscreen-button.png') no-repeat center;
75
+ background-size: contain;
76
+ }
77
+
78
+ .spinner,
79
+ .spinner:after {
80
+ border-radius: 50%;
81
+ width: 5em;
82
+ height: 5em;
83
+ }
84
+ .spinner {
85
+ margin: 10px;
86
+ font-size: 10px;
87
+ position: relative;
88
+ text-indent: -9999em;
89
+ border-top: 1.1em solid rgba(255, 255, 255, 0.2);
90
+ border-right: 1.1em solid rgba(255, 255, 255, 0.2);
91
+ border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
92
+ border-left: 1.1em solid #ffffff;
93
+ transform: translateZ(0);
94
+ animation: spinner-spin 1.1s infinite linear;
95
+ }
96
+ @keyframes spinner-spin {
97
+ 0% {
98
+ transform: rotate(0deg);
99
+ }
100
+ 100% {
101
+ transform: rotate(360deg);
102
+ }
103
+ }
104
+
105
+
index.html CHANGED
@@ -3,61 +3,30 @@
3
  <head>
4
  <meta charset="utf-8">
5
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6
- <title>Unity WebGL Player | SoccerTwos</title>
 
7
  <link rel="shortcut icon" href="TemplateData/favicon.ico">
8
  <link rel="stylesheet" href="TemplateData/style.css">
9
  </head>
10
- <body>
11
  <div id="unity-container" class="unity-desktop">
12
- <canvas id="unity-canvas" width=960 height=600></canvas>
 
 
13
  <div id="unity-loading-bar">
14
- <div id="unity-logo"></div>
15
- <div id="unity-progress-bar-empty">
16
  <div id="unity-progress-bar-full"></div>
17
  </div>
18
- </div>
19
- <div id="unity-warning"> </div>
20
- <div id="unity-footer">
21
- <div id="unity-webgl-logo"></div>
22
- <div id="unity-fullscreen-button"></div>
23
- <div id="unity-build-title">SoccerTwos</div>
24
  </div>
25
  </div>
 
26
  <script>
27
- var container = document.querySelector("#unity-container");
28
- var canvas = document.querySelector("#unity-canvas");
29
- var loadingBar = document.querySelector("#unity-loading-bar");
30
- var progressBarFull = document.querySelector("#unity-progress-bar-full");
31
- var fullscreenButton = document.querySelector("#unity-fullscreen-button");
32
- var warningBanner = document.querySelector("#unity-warning");
33
-
34
- // Shows a temporary message banner/ribbon for a few seconds, or
35
- // a permanent error message on top of the canvas if type=='error'.
36
- // If type=='warning', a yellow highlight color is used.
37
- // Modify or remove this function to customize the visually presented
38
- // way that non-critical warnings and error messages are presented to the
39
- // user.
40
- function unityShowBanner(msg, type) {
41
- function updateBannerVisibility() {
42
- warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
43
- }
44
- var div = document.createElement('div');
45
- div.innerHTML = msg;
46
- warningBanner.appendChild(div);
47
- if (type == 'error') div.style = 'background: red; padding: 10px;';
48
- else {
49
- if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
50
- setTimeout(function() {
51
- warningBanner.removeChild(div);
52
- updateBannerVisibility();
53
- }, 5000);
54
- }
55
- updateBannerVisibility();
56
- }
57
-
58
- var buildUrl = "Build";
59
- var loaderUrl = buildUrl + "/SoccerTwos.loader.js";
60
- var config = {
61
  dataUrl: buildUrl + "/SoccerTwos.data.gz",
62
  frameworkUrl: buildUrl + "/SoccerTwos.framework.js.gz",
63
  codeUrl: buildUrl + "/SoccerTwos.wasm.gz",
@@ -65,50 +34,54 @@
65
  companyName: "Unity Technologies",
66
  productName: "SoccerTwos",
67
  productVersion: "1.0",
68
- showBanner: unityShowBanner,
69
  };
70
 
71
- // By default Unity keeps WebGL canvas render target size matched with
72
- // the DOM size of the canvas element (scaled by window.devicePixelRatio)
73
- // Set this to false if you want to decouple this synchronization from
74
- // happening inside the engine, and you would instead like to size up
75
- // the canvas DOM size and WebGL render target sizes yourself.
76
- // config.matchWebGLToCanvasSize = false;
 
77
 
78
- if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
79
- // Mobile device style: fill the whole browser client area with the game canvas:
 
 
 
 
 
 
 
 
 
 
 
 
80
 
81
- var meta = document.createElement('meta');
82
- meta.name = 'viewport';
83
- meta.content = 'width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, shrink-to-fit=yes';
84
- document.getElementsByTagName('head')[0].appendChild(meta);
85
  container.className = "unity-mobile";
86
- canvas.className = "unity-mobile";
87
-
88
- // To lower canvas resolution on mobile devices to gain some
89
- // performance, uncomment the following line:
90
- // config.devicePixelRatio = 1;
91
-
92
- unityShowBanner('WebGL builds are not supported on mobile devices.');
93
- } else {
94
- // Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
95
-
96
- canvas.style.width = "960px";
97
- canvas.style.height = "600px";
98
  }
 
99
 
100
- loadingBar.style.display = "block";
101
-
102
- var script = document.createElement("script");
103
  script.src = loaderUrl;
104
  script.onload = () => {
105
  createUnityInstance(canvas, config, (progress) => {
106
- progressBarFull.style.width = 100 * progress + "%";
 
 
107
  }).then((unityInstance) => {
108
- loadingBar.style.display = "none";
109
- fullscreenButton.onclick = () => {
110
- unityInstance.SetFullscreen(1);
111
- };
 
 
 
 
 
112
  }).catch((message) => {
113
  alert(message);
114
  });
 
3
  <head>
4
  <meta charset="utf-8">
5
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
7
+ <title>SoccerTwos</title>
8
  <link rel="shortcut icon" href="TemplateData/favicon.ico">
9
  <link rel="stylesheet" href="TemplateData/style.css">
10
  </head>
11
+ <body class="dark">
12
  <div id="unity-container" class="unity-desktop">
13
+ <canvas id="unity-canvas"></canvas>
14
+ </div>
15
+ <div id="loading-cover" style="display:none;">
16
  <div id="unity-loading-bar">
17
+ <div id="unity-logo"><img src="logo.png"></div>
18
+ <div id="unity-progress-bar-empty" style="display: none;">
19
  <div id="unity-progress-bar-full"></div>
20
  </div>
21
+ <div class="spinner"></div>
 
 
 
 
 
22
  </div>
23
  </div>
24
+ <div id="unity-fullscreen-button" style="display: none;"></div>
25
  <script>
26
+ const hideFullScreenButton = "";
27
+ const buildUrl = "Build";
28
+ const loaderUrl = buildUrl + "/SoccerTwos.loader.js";
29
+ const config = {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
30
  dataUrl: buildUrl + "/SoccerTwos.data.gz",
31
  frameworkUrl: buildUrl + "/SoccerTwos.framework.js.gz",
32
  codeUrl: buildUrl + "/SoccerTwos.wasm.gz",
 
34
  companyName: "Unity Technologies",
35
  productName: "SoccerTwos",
36
  productVersion: "1.0",
 
37
  };
38
 
39
+ const container = document.querySelector("#unity-container");
40
+ const canvas = document.querySelector("#unity-canvas");
41
+ const loadingCover = document.querySelector("#loading-cover");
42
+ const progressBarEmpty = document.querySelector("#unity-progress-bar-empty");
43
+ const progressBarFull = document.querySelector("#unity-progress-bar-full");
44
+ const fullscreenButton = document.querySelector("#unity-fullscreen-button");
45
+ const spinner = document.querySelector('.spinner');
46
 
47
+ const canFullscreen = (function() {
48
+ for (const key of [
49
+ 'exitFullscreen',
50
+ 'webkitExitFullscreen',
51
+ 'webkitCancelFullScreen',
52
+ 'mozCancelFullScreen',
53
+ 'msExitFullscreen',
54
+ ]) {
55
+ if (key in document) {
56
+ return true;
57
+ }
58
+ }
59
+ return false;
60
+ }());
61
 
62
+ if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
 
 
 
63
  container.className = "unity-mobile";
64
+ config.devicePixelRatio = 1;
 
 
 
 
 
 
 
 
 
 
 
65
  }
66
+ loadingCover.style.display = "";
67
 
68
+ const script = document.createElement("script");
 
 
69
  script.src = loaderUrl;
70
  script.onload = () => {
71
  createUnityInstance(canvas, config, (progress) => {
72
+ spinner.style.display = "none";
73
+ progressBarEmpty.style.display = "";
74
+ progressBarFull.style.width = `${100 * progress}%`;
75
  }).then((unityInstance) => {
76
+ loadingCover.style.display = "none";
77
+ if (canFullscreen) {
78
+ if (!hideFullScreenButton) {
79
+ fullscreenButton.style.display = "";
80
+ }
81
+ fullscreenButton.onclick = () => {
82
+ unityInstance.SetFullscreen(1);
83
+ };
84
+ }
85
  }).catch((message) => {
86
  alert(message);
87
  });
logo.png ADDED