this repo has no description
adding files to make a progressive web app
+131
+16
.github/workflows/build.yml
+16
.github/workflows/build.yml
···
321
321
emcmake cmake -DBUILD_SDLGPU=On -DCMAKE_BUILD_TYPE=$BUILD_TYPE ..
322
322
cmake --build . --config $BUILD_TYPE --parallel
323
323
cp html/export.html bin/index.html
324
+
cp bin/tic80.js webapp/tic80.js
325
+
cp bin/tic80.wasm webapp/tic80.wasm
324
326
325
327
- name: Deploy
326
328
uses: actions/upload-artifact@v2
···
330
332
build/bin/tic80.js
331
333
build/bin/tic80.wasm
332
334
build/bin/index.html
335
+
336
+
- name: Deploy WebApp
337
+
uses: actions/upload-artifact@v2
338
+
with:
339
+
name: 'tic80-webapp'
340
+
path: |
341
+
build/webapp/index.html
342
+
build/webapp/serviceworker.js
343
+
build/webapp/tic80-180.png
344
+
build/webapp/tic80-192.png
345
+
build/webapp/tic80-512.png
346
+
build/webapp/tic80.webmanifest
347
+
build/webapp/tic80.js
348
+
build/webapp/tic80.wasm
+47
build/webapp/index.html
+47
build/webapp/index.html
···
1
+
<!DOCTYPE html>
2
+
<html lang="en">
3
+
<head>
4
+
<meta charset="utf-8">
5
+
<meta name="viewport" content="width=device-width, initial-scale=1">
6
+
<meta name="theme-color" content="#f4f4f4"/>
7
+
8
+
<link rel="manifest" href="tic80.webmanifest">
9
+
<link rel="apple-touch-icon" sizes="180x180" href="/tic80-180.png">
10
+
<link rel="apple-touch-icon" sizes="192x192" href="/tic80-192.png">
11
+
<link rel="apple-touch-icon" sizes="512x512" href="/tic80-512.png">
12
+
13
+
<title>TIC-80</title>
14
+
15
+
<style type="text/css">
16
+
#game-frame > div { font-size: 44px; font-family: monospace; font-weight: bold;}
17
+
.game { width: 100vw; height: 100vh; }
18
+
</style>
19
+
</head>
20
+
<body style="margin:0; padding:0;">
21
+
22
+
<div class="game" style="margin: 0; position: relative; background: #1a1c2c;">
23
+
<div id="game-frame" style="position: absolute; margin: 0 auto; opacity: 1; background: #1a1c2c; width: 100%; height: 100%;">
24
+
<div style="display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;">
25
+
<img src="tic80-512.png"></img>
26
+
</div>
27
+
</div>
28
+
<canvas style="width: 100%; height: 100%; margin: 0 auto; display: block; image-rendering: pixelated;" id="canvas" oncontextmenu="event.preventDefault()" onmousedown="window.focus()"></canvas>
29
+
</div>
30
+
31
+
<script type="text/javascript">
32
+
var Module = {
33
+
canvas: document.getElementById('canvas')
34
+
}
35
+
36
+
navigator.serviceWorker.register('/serviceworker.js');
37
+
38
+
setTimeout(function() {
39
+
const scriptTag = document.createElement('script');
40
+
scriptTag.src = '/tic80.js';
41
+
42
+
document.body.appendChild(scriptTag);
43
+
document.getElementById('game-frame').remove()
44
+
}, 2000);
45
+
</script>
46
+
</body>
47
+
</html>
+39
build/webapp/serviceworker.js
+39
build/webapp/serviceworker.js
···
1
+
const version = 'tic80-v1'
2
+
const assets = [
3
+
'/',
4
+
'/index.html',
5
+
'/tic80.js',
6
+
'/tic80.wasm',
7
+
'/tic80-180.png',
8
+
'/tic80-192.png',
9
+
'/tic80-512.png',
10
+
'/serviceworker.js',
11
+
'/tic80.webmanifest'
12
+
]
13
+
14
+
self.addEventListener('install', function(event) {
15
+
console.log('serviceworker installing')
16
+
caches.open(version)
17
+
.then(function(cache) {
18
+
console.log('service worker loading assets')
19
+
return cache.addAll(assets);
20
+
})
21
+
});
22
+
23
+
self.addEventListener('fetch', function(event) {
24
+
event.respondWith(
25
+
caches.match(event.request)
26
+
.then(function(response) {
27
+
if (response) {
28
+
console.log(`service worker cache hit ${event.request}`)
29
+
return response;
30
+
}
31
+
console.log(`service worker cache miss ${event.request}`)
32
+
return fetch(event.request);
33
+
}
34
+
)
35
+
);
36
+
});
37
+
38
+
console.log('service worker loaded')
39
+
build/webapp/tic80-180.png
build/webapp/tic80-180.png
This is a binary file and will not be displayed.
build/webapp/tic80-192.png
build/webapp/tic80-192.png
This is a binary file and will not be displayed.
build/webapp/tic80-512.png
build/webapp/tic80-512.png
This is a binary file and will not be displayed.
+29
build/webapp/tic80.webmanifest
+29
build/webapp/tic80.webmanifest
···
1
+
{
2
+
"background_color": "#1a1c2c",
3
+
"theme_color": "#f4f4f4",
4
+
"description": "TIC-80 is a fantasy computer for making, playing and sharing tiny games.",
5
+
"display": "fullscreen",
6
+
"icons": [
7
+
{
8
+
"src": "tic80-180.png",
9
+
"sizes": "180x180",
10
+
"type": "image/png",
11
+
"purpose": "any maskable"
12
+
},
13
+
{
14
+
"src": "tic80-192.png",
15
+
"sizes": "192x192",
16
+
"type": "image/png",
17
+
"purpose": "any maskable"
18
+
},
19
+
{
20
+
"src": "tic80-512.png",
21
+
"sizes": "512x512",
22
+
"type": "image/png",
23
+
"purpose": "any maskable"
24
+
}
25
+
],
26
+
"name": "TIC-80 Tiny Computer",
27
+
"short_name": "TIC-80",
28
+
"start_url": "/index.html"
29
+
}