From 9630b16f16f3ed06490133a5d66efe3f20976027 Mon Sep 17 00:00:00 2001
From: wuilliam104286 <wuilliamolgo104286@gmail.com>
Date: Wed, 30 Sep 2020 22:10:28 +0800
Subject: [PATCH] css

---
 index.html        |  36 ++++++++++----
 service-worker.js | 117 +++++++++++++++++++++++++++++++++++++---------
 2 files changed, 121 insertions(+), 32 deletions(-)

diff --git a/index.html b/index.html
index d68f407..4ba5377 100644
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=1.0, user-scalable=no">
 	<meta http-equiv="X-UA-Compatible" content="ie=edge">
+	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
 	<link rel="manifest" href="manifest.json">
 	<title>SuperTNT Classic Mode</title>
 </head>
@@ -37,7 +38,7 @@
 			-webkit-align-items: center;
 			-ms-flex-align: center;
 			align-items: flex-start;
-			background-color: #70c4ce;
+			background-color: #000000;
 		}
 
 		canvas {
@@ -99,12 +100,18 @@
 			width: 98px;
 			height: 100px;
 			font-size: 50px;
+			color: #ffffff;
+			background-color: rgb(0, 0, 0);
+			border: 2px #ffffff solid;
 		}
 
 		.y-way input {
 			width: 200px;
 			height: 100px;
 			font-size: 50px;
+			color: #ffffff;
+			background-color: rgb(0, 0, 0);
+			border: 2px #ffffff solid;
 		}
 	</style>
 	<div class="content">
@@ -119,24 +126,24 @@
 					<br>
 				</div>
 				<div class="y-way">
-					<input class="tnt2" type="button" value="⊠">
-					<br>
-					<br>
 					<input class="up2" type="button" value="⇧">
 					<br>
 					<br>
 					<input class="down2" type="button" value="⇩">
+					<br>
+					<br>
+					<input class="tnt2" type="button" value="⊠">
 				</div>
 			</div>
 			<div id="p1ctrl" class="btn">
 				<div class="y-way">
-					<input class="up1" type="button" value="⇧">
+					<input class="tnt1" type="button" value="⊠">
 					<br>
 					<br>
-					<input class="down1" type="button" value="⇩">
+					<input class="up1" type="button" value="⇧">
 					<br>
 					<br>
-					<input class="tnt1" type="button" value="⊠">
+					<input class="down1" type="button" value="⇩">
 				</div>
 				<div class="x-way">
 					<br>
@@ -151,8 +158,8 @@
 
 		</div>
 		<a id="gamePlayBtn" class="gamePlayBtn" style="display: none;"><img src="./images/4YtokZ.png" alt=""></a>
-		<h1 id="reload_back" class="reload_back">第一次載入可能較久...</h1>
-		<h1 id="reload" class="reload">第一次載入可能較久...</h1>
+		<h1 id="reload_back" class="reload_back">載入中...</h1>
+		<h1 id="reload" class="reload">載入中...</h1>
 		<div id="animation_container" style="background-color:rgba(255, 204, 153, 1.00); width:640px; height:480px">
 			<canvas id="canvas" width="640" height="480"
 				style="position: absolute; display: block; background-color:rgba(255, 204, 153, 1.00);"></canvas>
@@ -172,7 +179,11 @@ <h1 id="reload" class="reload">第一次載入可能較久...</h1>
 					|| navigator.userAgent.match(/Windows Phone/i)
 				) {
 					if (window.DeviceOrientationEvent) {
-						alert("請轉為橫屏!");
+						Swal.fire(
+							'請轉為橫屏!',
+							'',
+							'info'
+						)
 					}
 					return true;
 				}
@@ -183,6 +194,11 @@ <h1 id="reload" class="reload">第一次載入可能較久...</h1>
 			if (!detectmob()) {
 				document.querySelector(".ctrl").style.display = 'none';
 			}
+			if (!localStorage.getItem('seted')) {
+				document.getElementById("reload_back").innerHTML = "請重啟遊戲以加載資源";
+				document.getElementById("reload").innerHTML = "請重啟遊戲以加載資源";
+				localStorage.setItem('seted', "true");
+			}
 		</script>
 </body>
 
diff --git a/service-worker.js b/service-worker.js
index 6d5630b..c3f2202 100644
--- a/service-worker.js
+++ b/service-worker.js
@@ -1,31 +1,103 @@
+const filesToCache = [
+    './',
+    './index.html',
+    './createjs-2015.11.26.min.js',
+    './vb.js',
+    './index.js',
+    './images/4YtokZ.png',
+    './images/vb_atlas_.png',
+    './images/vb_atlas_2.png',
+    './images/vb_atlas_3.png',
+    './images/vb_atlas_4.png',
+    './images/vb_atlas_5.png',
+    './assets/bgm1.mp3',
+    './assets/bgm4.mp3',
+    './assets/bgm6.mp3',
+    './assets/bgm8.mp3',
+    './assets/explode1.mp3',
+    './assets/explode2.mp3',
+    './assets/explode3.mp3',
+    './assets/explode4.mp3',
+    './assets/fuse.mp3',
+    './assets/point.mp3',
+    './assets/dead.mp3',
+    'https://cdn.jsdelivr.net/npm/sweetalert2@10'
+];
+
+const cacheName = 'static';
+
+self.addEventListener('activate', event => {
+	console.log('now ready to handle fetches!');
+	  event.waitUntil(
+		caches.keys().then(function(cacheName) {
+			var promiseArr = cacheName.map(function(item) {
+				if (item !== cacheName) {
+					// Delete that cached file
+					return caches.delete(item);
+				}
+			})
+			return Promise.all(promiseArr);
+		})
+	); // end e.waitUntil
+});
+
+// install
+self.addEventListener('install', event => {
+    console.log('installing…');
+    event.waitUntil(
+        caches.open(cacheName).then(cache => {
+            console.log('Caching app ok');
+            return cache.addAll(filesToCache);
+        })
+    );
+});
+
+self.addEventListener('fetch', event => {
+    const dataUrl = 'https://wuilliam104286.github.io/SuperTNT_web_version/';
+	event.respondWith(
+		caches.match(event.request).then(function (response) {
+			return response || fetch(event.request).then(res =>
+				// 存 caches 之前，要先打開 caches.open(cacheName)
+				caches.open(cacheName)
+				.then(function(cache) {
+					// cache.put(key, value)
+					// 下一次 caches.match 會對應到 event.request
+					cache.put(event.request, res.clone());
+					return res;
+				})
+			);
+		})
+	);
+}); 
+/*
 self.addEventListener('install', function(event){
     console.log('[SW] 安裝(Install) Service Worker!',event);
     event.waitUntil(
         caches.open('static')
                     .then(function (cache) {
                         cache.addAll([
-                            './',
-                            './index.html',
-                            './createjs-2015.11.26.min.js',
-                            './vb.js',
-                            './index.js',
-                            './images/4YtokZ.png',
-                            './images/vb_atlas_.png',
-                            './images/vb_atlas_2.png',
-                            './images/vb_atlas_3.png',
-                            './images/vb_atlas_4.png',
-                            './images/vb_atlas_5.png',
-                            './assets/bgm1.mp3',
-                            './assets/bgm4.mp3',
-                            './assets/bgm6.mp3',
-                            './assets/bgm8.mp3',
-                            './assets/explode1.mp3',
-                            './assets/explode2.mp3',
-                            './assets/explode3.mp3',
-                            './assets/explode4.mp3',
-                            './assets/fuse.mp3',
-                            './assets/point.mp3',
-                            './assets/dead.mp3'
+                            '/',
+                            '/index.html',
+                            '/createjs-2015.11.26.min.js',
+                            '/vb.js',
+                            '/index.js',
+                            '/images/4YtokZ.png',
+                            '/images/vb_atlas_.png',
+                            '/images/vb_atlas_2.png',
+                            '/images/vb_atlas_3.png',
+                            '/images/vb_atlas_4.png',
+                            '/images/vb_atlas_5.png',
+                            '/assets/bgm1.mp3',
+                            '/assets/bgm4.mp3',
+                            '/assets/bgm6.mp3',
+                            '/assets/bgm8.mp3',
+                            '/assets/explode1.mp3',
+                            '/assets/explode2.mp3',
+                            '/assets/explode3.mp3',
+                            '/assets/explode4.mp3',
+                            '/assets/fuse.mp3',
+                            '/assets/point.mp3',
+                            '/assets/dead.mp3'
                         ]);
                     })
     );
@@ -74,3 +146,4 @@ self.addEventListener('fetch', function(event) {
       })
     );
   });
+*/
\ No newline at end of file