From 59e79e42cce0360e2bf59a5581ced1c57b61d8bd Mon Sep 17 00:00:00 2001 From: chaoyen1111 Date: Tue, 15 Nov 2022 16:20:31 +0800 Subject: [PATCH 1/5] fix: :recycle: refactor code --- css/main.css | 227 +++++++++++++++++++++++++++----------------------- index.html | 2 + js/main-en.js | 5 +- js/main.js | 7 +- 4 files changed, 134 insertions(+), 107 deletions(-) diff --git a/css/main.css b/css/main.css index c50095b..5a4ef7e 100644 --- a/css/main.css +++ b/css/main.css @@ -53,8 +53,8 @@ body { overflow: hidden; } -.content.loading *{ - opacity:0; +.content.loading * { + opacity: 0; } .panel { @@ -63,7 +63,7 @@ body { height: 100%; top: 0; left: 0; - transition:.3s; + transition: .3s; } /* setting */ @@ -153,13 +153,13 @@ body { background: rgba(100, 200, 255, .3); } -#setting #saveBtn{ +#setting #saveBtn { width: max-content; - font-size:1.2rem; - margin:30px auto 10px; - padding:10px 30px; - background:#e50; - border-radius:20px; + font-size: 1.2rem; + margin: 30px auto 10px; + padding: 10px 30px; + background: #e50; + border-radius: 20px; text-shadow: #900 0 0 5px; } @@ -306,12 +306,14 @@ body { z-index: 2; vertical-align: middle; } -#main01 footer .monster-btn svg{ - transition:.3s; - background:none; + +#main01 footer .monster-btn svg { + transition: .3s; + background: none; } -#main01 footer .monster-btn.click svg{ - width:90%; + +#main01 footer .monster-btn.click svg { + width: 90%; } /* main02 */ @@ -348,7 +350,7 @@ body { color: #ddd; margin: 0 auto; padding: 10px 1rem; - box-shadow:inset #ccc 0 0 0 0, #ccc 0 0 0 3px; + box-shadow: inset #ccc 0 0 0 0, #ccc 0 0 0 3px; border-radius: 10px; border-top-right-radius: 0; border-bottom-right-radius: 0; @@ -358,12 +360,12 @@ body { display: inline-block; font-size: 1.5rem; line-height: 1; - box-shadow:inset #ccc 0 0 0 0, #ccc 0 0 0 3px; + box-shadow: inset #ccc 0 0 0 0, #ccc 0 0 0 3px; border-radius: 10px; background: rgba(255, 255, 255, .1); color: #fff; vertical-align: top; - transition:.3s; + transition: .3s; padding: 10px 1rem; border-top-left-radius: 0; border-bottom-left-radius: 0; @@ -372,26 +374,26 @@ body { #main02 .input-group-button.click { background: rgba(255, 255, 255, .4); - box-shadow:inset #ccc 0 0 0 3px, #ccc 0 0 0 0; + box-shadow: inset #ccc 0 0 0 3px, #ccc 0 0 0 0; } #main02 .btn { display: inline-block; width: 38%; height: 14%; - box-shadow:inset #ccc 0 0 0 0, #ccc 0 0 0 3px; + box-shadow: inset #ccc 0 0 0 0, #ccc 0 0 0 3px; margin: 7px 5px; border-radius: 10px; background: rgba(255, 255, 255, .1); color: #fff; vertical-align: top; -webkit-user-select: none; - transition:.3s; + transition: .3s; } #main02 .btn.click { background: rgba(255, 255, 255, .4); - box-shadow:inset #ccc 0 0 0 3px, #ccc 0 0 0 0; + box-shadow: inset #ccc 0 0 0 3px, #ccc 0 0 0 0; } #main02 .btn::before { @@ -406,7 +408,7 @@ body { display: inline-block; vertical-align: middle; font-size: 1.5rem; - transition:.3s; + transition: .3s; } #main02 .btn.click span { @@ -414,122 +416,139 @@ body { } /* popup */ -#popup{ - top:20%; - left:15%; - width:70%; - height:max-content; - border:3px solid #fff; - z-index:20; - border-radius:20px; - padding:30px 10px; - text-align:center; - background:rgba(50,100,150,.9); - color:#fff; - opacity:0; +#popup { + top: 20%; + left: 15%; + width: 70%; + height: max-content; + border: 3px solid #fff; + z-index: 20; + border-radius: 20px; + padding: 30px 10px; + text-align: center; + background: rgba(50, 100, 150, .9); + color: #fff; + opacity: 0; pointer-events: none; - transition:.3s; + transition: .3s; } -#popup.show{ - top:17%; - opacity:1; + +#popup.show { + top: 17%; + opacity: 1; pointer-events: auto; } -#popup h4{ - font-size:1.1rem; - margin-bottom:10px; + +#popup h4 { + font-size: 1.1rem; + margin-bottom: 10px; } -#saveUrl{ - font-size:1.1rem; - width:100%; - word-wrap:break-word; + +#saveUrl { + font-size: 1.1rem; + width: 100%; + word-wrap: break-word; line-height: 1.5; } -#saveUrl::selection{ - color:#fff; - background:none; + +#saveUrl::selection { + color: #fff; + background: none; } -#copy{ - font-size:1.1rem; - padding:10px 30px; - width:max-content; - margin:20px auto 0; - background:#e50; - border-radius:20px; + +#copy { + font-size: 1.1rem; + padding: 10px 30px; + width: max-content; + margin: 20px auto 0; + background: #e50; + border-radius: 20px; } -#copy.copied{ + +#copy.copied { pointer-events: none; - opacity:.7; + opacity: .7; } -#popupClose{ - position:absolute; - width:40px; - height:40px; + +#popupClose { + position: absolute; + width: 40px; + height: 40px; border-radius: 50%; - border:3px solid #fff; - background:#123; - top:-18px; - right:-18px; + border: 3px solid #fff; + background: #123; + top: -18px; + right: -18px; } + #popupClose::before, -#popupClose::after{ - content:""; - position:absolute; - width:80%; - height:10%; +#popupClose::after { + content: ""; + position: absolute; + width: 80%; + height: 10%; transform-origin: 50% 50%; - background:#fff; - top:45%; - left:10%; + background: #fff; + top: 45%; + left: 10%; } -#popupClose::before{ - transform:rotate(45deg); + +#popupClose::before { + transform: rotate(45deg); } -#popupClose::after{ - transform:rotate(-45deg); + +#popupClose::after { + transform: rotate(-45deg); } /* message */ -#message{ - width:60%; - top:-10px; - left:20%; - height:max-content; - background:rgba(255,255,255,.2); - border:1px dashed #fff; - border-radius:20px; +#message { + width: 60%; + top: -10px; + left: 20%; + height: max-content; + background: rgba(255, 255, 255, .2); + border: 1px dashed #fff; + border-radius: 20px; padding: 0 10px; - opacity:0; - transition:.3s; + opacity: 0; + transition: .3s; pointer-events: none; } -#message.show{ - opacity:1; - top:15px; + +#message.show { + opacity: 1; + top: 15px; } -#message h4{ - color:#fff; - font-size:1.2rem; - text-align:center; - line-height:1.8; +#message h4 { + color: #fff; + font-size: 1.2rem; + text-align: center; + line-height: 1.8; } .noselect { - -webkit-touch-callout: none; /* iOS Safari */ - -webkit-user-select: none; /* Safari */ - -khtml-user-select: none; /* Konqueror HTML */ - -moz-user-select: none; /* Old versions of Firefox */ - -ms-user-select: none; /* Internet Explorer/Edge */ - user-select: none; /* Non-prefixed version, currently + -webkit-touch-callout: none; + /* iOS Safari */ + -webkit-user-select: none; + /* Safari */ + -khtml-user-select: none; + /* Konqueror HTML */ + -moz-user-select: none; + /* Old versions of Firefox */ + -ms-user-select: none; + /* Internet Explorer/Edge */ + user-select: none; + /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */ } input { /* Safari 和 Chrome，常用於iOS下移除內建樣式 */ - -webkit-appearance: none; + -webkit-appearance: none; /* FireFox */ - -moz-appearance: none; + -moz-appearance: none; appearance: none; } \ No newline at end of file diff --git a/index.html b/index.html index e6f1ab2..d40b309 100644 --- a/index.html +++ b/index.html @@ -86,6 +86,7 @@
diff --git a/js/main-en.js b/js/main-en.js index e3c3071..d83063c 100644 --- a/js/main-en.js +++ b/js/main-en.js @@ -380,7 +380,10 @@ // 處理中間圖片跟隨視窗大小移動位置 window.addEventListener('resize', () => { - location.reload(); + kebbi.style.left = `${(window.innerWidth - kebbi.offsetWidth) / 2}px` + kebbi.style.top = `${(window.innerHeight - kebbi.offsetHeight - document.getElementById('monster').offsetHeight) / 2}px` + circle.style.left = `${(window.innerWidth - circle.offsetWidth) / 2}px`; + circle.style.top = `${(content.offsetHeight * 0.8 - circle.offsetHeight) / 2}px`; }); }(); diff --git a/js/main.js b/js/main.js index 3b4cdcf..d467189 100644 --- a/js/main.js +++ b/js/main.js @@ -380,7 +380,10 @@ // 處理中間圖片跟隨視窗大小移動位置 window.addEventListener('resize', () => { - location.reload(); + kebbi.style.left = `${(window.innerWidth - kebbi.offsetWidth) / 2}px` + kebbi.style.top = `${(window.innerHeight - kebbi.offsetHeight - document.getElementById('monster').offsetHeight) / 2}px` + circle.style.left = `${(window.innerWidth - circle.offsetWidth) / 2}px`; + circle.style.top = `${(content.offsetHeight * 0.8 - circle.offsetHeight) / 2}px`; }); - + }(); From 653d8df02cfa58f4648646b811822964172e09ca Mon Sep 17 00:00:00 2001 From: chaoyen1111 Date: Tue, 15 Nov 2022 16:31:14 +0800 Subject: [PATCH 2/5] docs: :memo: update changelog --- CHANGELOG.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 48b06f6..194bd5f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## 2022.11.15 + +### Fixed + +- 使用手機開啟萬用遙控器輸入文字會刷新畫面，導致無法正常完成操作 + ## 2022.11.1 ### Fixed From c00dbc939ee7af10a374981e51d0a37f55ef6a0c Mon Sep 17 00:00:00 2001 From: chaoyen1111 Date: Tue, 15 Nov 2022 17:15:50 +0800 Subject: [PATCH 3/5] refactor: :recycle: update id & getItem name --- index-en.html | 948 ++++++++++++++++++++++++------------------------- index.html | 953 +++++++++++++++++++++++++------------------------- js/main-en.js | 6 +- js/main.js | 2 +- 4 files changed, 958 insertions(+), 951 deletions(-) diff --git a/index-en.html b/index-en.html index b55eee3..c5fa8d0 100644 --- a/index-en.html +++ b/index-en.html @@ -85,626 +85,628 @@ />
- diff --git a/index.html b/index.html index d40b309..a79c79b 100644 --- a/index.html +++ b/index.html @@ -86,628 +86,633 @@
diff --git a/js/main-en.js b/js/main-en.js index d83063c..8ed6c68 100644 --- a/js/main-en.js +++ b/js/main-en.js @@ -113,7 +113,7 @@ save(list); } else { // 讀取 localStorage 資料，沒有的話就套用預設值 - let read = JSON.parse(localStorage.getItem('kebbiMobileData')); + let read = JSON.parse(localStorage.getItem('kebbiMobileEnData')); if (read) { list = read; } @@ -157,7 +157,7 @@ // 暫存到 localStorage 的函式 function save(val) { - localStorage.setItem('kebbiMobileData', JSON.stringify(val)); + localStorage.setItem('kebbiMobileEnData', JSON.stringify(val)); } // input 欄位套用預設值 @@ -381,7 +381,7 @@ // 處理中間圖片跟隨視窗大小移動位置 window.addEventListener('resize', () => { kebbi.style.left = `${(window.innerWidth - kebbi.offsetWidth) / 2}px` - kebbi.style.top = `${(window.innerHeight - kebbi.offsetHeight - document.getElementById('monster').offsetHeight) / 2}px` + kebbi.style.top = `${(window.innerHeight - kebbi.offsetHeight - document.getElementById('monsterBlock').offsetHeight) / 2}px` circle.style.left = `${(window.innerWidth - circle.offsetWidth) / 2}px`; circle.style.top = `${(content.offsetHeight * 0.8 - circle.offsetHeight) / 2}px`; }); diff --git a/js/main.js b/js/main.js index d467189..2e07c7f 100644 --- a/js/main.js +++ b/js/main.js @@ -381,7 +381,7 @@ // 處理中間圖片跟隨視窗大小移動位置 window.addEventListener('resize', () => { kebbi.style.left = `${(window.innerWidth - kebbi.offsetWidth) / 2}px` - kebbi.style.top = `${(window.innerHeight - kebbi.offsetHeight - document.getElementById('monster').offsetHeight) / 2}px` + kebbi.style.top = `${(window.innerHeight - kebbi.offsetHeight - document.getElementById('monsterBlock').offsetHeight) / 2}px` circle.style.left = `${(window.innerWidth - circle.offsetWidth) / 2}px`; circle.style.top = `${(content.offsetHeight * 0.8 - circle.offsetHeight) / 2}px`; }); From 4242d6079cd104a222e25fd8cba3a9e2528f1cc6 Mon Sep 17 00:00:00 2001 From: chaoyen1111 Date: Wed, 16 Nov 2022 14:44:41 +0800 Subject: [PATCH 4/5] refactor: :recycle: refactor code --- js/main-en.js | 29 +++++++++++++---------------- js/main.js | 44 ++++++++++++++++++++------------------------ 2 files changed, 33 insertions(+), 40 deletions(-) diff --git a/js/main-en.js b/js/main-en.js index 8ed6c68..66df4aa 100644 --- a/js/main-en.js +++ b/js/main-en.js @@ -19,16 +19,18 @@ // 凱比機器人和中間的圓形 logo 定位 const kebbi = document.getElementById('svgKebbi'); const circle = document.querySelector('.circle'); + function imgPosition() { const ww = content.offsetWidth; const wh = content.offsetHeight; - const ox = (ww - kebbi.offsetWidth) / 2; - const oy = (wh * 0.8 - kebbi.offsetHeight) / 2; - kebbi.style.left = `${ox}px`; - kebbi.style.top = `${oy}px`; + kebbi.style.left = `${(ww - kebbi.offsetWidth) / 2}px`; + kebbi.style.top = `${(wh * 0.8 - kebbi.offsetHeight) / 2}px`; circle.style.width = `${ww * 0.4}px`; circle.style.height = `${ww * 0.4}px`; circle.style.left = `${(ww - circle.offsetWidth) / 2}px`; circle.style.top = `${(wh * 0.8 - circle.offsetHeight) / 2}px`; + } + + imgPosition(); // 預設值 let list = { @@ -292,10 +294,10 @@ // 邊界在中心的周圍 1/3 小車寬/高的距離 const kxCenter = kx + carSize.width / 2; // 車子中心點 x 座標 const kyCenter = ky + carSize.height / 2; // 車子中心點 y 座標 - const leftSide = ww * 0.5 - carSize.width / 3; // 左邊界，小於這個值，判定車子移動到左邊 - const rightSide = ww * 0.5 + carSize.width / 3; // 右邊界，大於這個值，判定車子移動到右邊 - const topSide = oy + carSize.height / 6; // 上邊界，小於這個值，判定車子移動到上面 - const bottomSide = oy + 5 * carSize.height / 6; // 下邊界，小於這個值，判定車子移動到下面 + const leftSide = content.offsetWidth * 0.5 - carSize.width / 3; // 左邊界，小於這個值，判定車子移動到左邊 + const rightSide = content.offsetWidth * 0.5 + carSize.width / 3; // 右邊界，大於這個值，判定車子移動到右邊 + const topSide = (content.offsetHeight * 0.8 - kebbi.offsetHeight) / 2 + carSize.height / 6; // 上邊界，小於這個值，判定車子移動到上面 + const bottomSide = (content.offsetHeight * 0.8 - kebbi.offsetHeight) / 2 + 5 * carSize.height / 6; // 下邊界，小於這個值，判定車子移動到下面 if (kxCenter < leftSide) { if (!send.left) { @@ -353,8 +355,8 @@ drag = false; kebbi.classList.remove('target'); kebbi.classList.add('reset'); - kebbi.style.left = `${ox}px`; - kebbi.style.top = `${oy}px`; + kebbi.style.left = `${(content.offsetWidth - kebbi.offsetWidth) / 2}px`; + kebbi.style.top = `${(content.offsetHeight * 0.8 - kebbi.offsetHeight) / 2}px`; } function updateCarSize() { @@ -379,11 +381,6 @@ } // 處理中間圖片跟隨視窗大小移動位置 - window.addEventListener('resize', () => { - kebbi.style.left = `${(window.innerWidth - kebbi.offsetWidth) / 2}px` - kebbi.style.top = `${(window.innerHeight - kebbi.offsetHeight - document.getElementById('monsterBlock').offsetHeight) / 2}px` - circle.style.left = `${(window.innerWidth - circle.offsetWidth) / 2}px`; - circle.style.top = `${(content.offsetHeight * 0.8 - circle.offsetHeight) / 2}px`; - }); + window.addEventListener('resize', imgPosition); }(); diff --git a/js/main.js b/js/main.js index 2e07c7f..8232ef1 100644 --- a/js/main.js +++ b/js/main.js @@ -19,16 +19,18 @@ // 凱比機器人和中間的圓形 logo 定位 const kebbi = document.getElementById('svgKebbi'); const circle = document.querySelector('.circle'); - const ww = content.offsetWidth; - const wh = content.offsetHeight; - const ox = (ww - kebbi.offsetWidth) / 2; - const oy = (wh * 0.8 - kebbi.offsetHeight) / 2; - kebbi.style.left = `${ox}px`; - kebbi.style.top = `${oy}px`; - circle.style.width = `${ww * 0.4}px`; - circle.style.height = `${ww * 0.4}px`; - circle.style.left = `${(ww - circle.offsetWidth) / 2}px`; - circle.style.top = `${(wh * 0.8 - circle.offsetHeight) / 2}px`; + function imgPosition() { + const ww = content.offsetWidth; + const wh = content.offsetHeight; + kebbi.style.left = `${(ww - kebbi.offsetWidth) / 2}px`; + kebbi.style.top = `${(wh * 0.8 - kebbi.offsetHeight) / 2}px`; + circle.style.width = `${ww * 0.4}px`; + circle.style.height = `${ww * 0.4}px`; + circle.style.left = `${(ww - circle.offsetWidth) / 2}px`; + circle.style.top = `${(wh * 0.8 - circle.offsetHeight) / 2}px`; + } + + imgPosition(); // 預設值 let list = { @@ -287,15 +289,14 @@ const kx = kebbi.offsetLeft; // 車子 left const ky = kebbi.offsetTop; // 車子 top const carSize = getCarSize(); - // 注意，小車一開始的中心點 y 座標，不等於畫面的中心點 y 座標。 // 邊界在中心的周圍 1/3 小車寬/高的距離 const kxCenter = kx + carSize.width / 2; // 車子中心點 x 座標 const kyCenter = ky + carSize.height / 2; // 車子中心點 y 座標 - const leftSide = ww * 0.5 - carSize.width / 3; // 左邊界，小於這個值，判定車子移動到左邊 - const rightSide = ww * 0.5 + carSize.width / 3; // 右邊界，大於這個值，判定車子移動到右邊 - const topSide = oy + carSize.height / 6; // 上邊界，小於這個值，判定車子移動到上面 - const bottomSide = oy + 5 * carSize.height / 6; // 下邊界，小於這個值，判定車子移動到下面 + const leftSide = content.offsetWidth * 0.5 - carSize.width / 3; // 左邊界，小於這個值，判定車子移動到左邊 + const rightSide = content.offsetWidth * 0.5 + carSize.width / 3; // 右邊界，大於這個值，判定車子移動到右邊 + const topSide = (content.offsetHeight * 0.8 - kebbi.offsetHeight) / 2 + carSize.height / 6; // 上邊界，小於這個值，判定車子移動到上面 + const bottomSide = (content.offsetHeight * 0.8 - kebbi.offsetHeight) / 2 + 5 * carSize.height / 6; // 下邊界，小於這個值，判定車子移動到下面 if (kxCenter < leftSide) { if (!send.left) { @@ -353,8 +354,8 @@ drag = false; kebbi.classList.remove('target'); kebbi.classList.add('reset'); - kebbi.style.left = `${ox}px`; - kebbi.style.top = `${oy}px`; + kebbi.style.left = `${(content.offsetWidth - kebbi.offsetWidth) / 2}px`; + kebbi.style.top = `${(content.offsetHeight * 0.8 - kebbi.offsetHeight) / 2}px`; } function updateCarSize() { @@ -379,11 +380,6 @@ } // 處理中間圖片跟隨視窗大小移動位置 - window.addEventListener('resize', () => { - kebbi.style.left = `${(window.innerWidth - kebbi.offsetWidth) / 2}px` - kebbi.style.top = `${(window.innerHeight - kebbi.offsetHeight - document.getElementById('monsterBlock').offsetHeight) / 2}px` - circle.style.left = `${(window.innerWidth - circle.offsetWidth) / 2}px`; - circle.style.top = `${(content.offsetHeight * 0.8 - circle.offsetHeight) / 2}px`; - }); - + window.addEventListener('resize', imgPosition); + }(); From ce64eebf56c2d50cca759392a13ff4a6b18e2326 Mon Sep 17 00:00:00 2001 From: chaoyen1111 Date: Wed, 16 Nov 2022 15:40:29 +0800 Subject: [PATCH 5/5] style: :art: format of the code --- js/main-en.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/js/main-en.js b/js/main-en.js index 66df4aa..60ba715 100644 --- a/js/main-en.js +++ b/js/main-en.js @@ -20,14 +20,14 @@ const kebbi = document.getElementById('svgKebbi'); const circle = document.querySelector('.circle'); function imgPosition() { - const ww = content.offsetWidth; - const wh = content.offsetHeight; - kebbi.style.left = `${(ww - kebbi.offsetWidth) / 2}px`; - kebbi.style.top = `${(wh * 0.8 - kebbi.offsetHeight) / 2}px`; - circle.style.width = `${ww * 0.4}px`; - circle.style.height = `${ww * 0.4}px`; - circle.style.left = `${(ww - circle.offsetWidth) / 2}px`; - circle.style.top = `${(wh * 0.8 - circle.offsetHeight) / 2}px`; + const ww = content.offsetWidth; + const wh = content.offsetHeight; + kebbi.style.left = `${(ww - kebbi.offsetWidth) / 2}px`; + kebbi.style.top = `${(wh * 0.8 - kebbi.offsetHeight) / 2}px`; + circle.style.width = `${ww * 0.4}px`; + circle.style.height = `${ww * 0.4}px`; + circle.style.left = `${(ww - circle.offsetWidth) / 2}px`; + circle.style.top = `${(wh * 0.8 - circle.offsetHeight) / 2}px`; } imgPosition();