webduinoio · GoGoPenguin · Jul 11, 2023 · Jul 10, 2023 · Jul 10, 2023 · Jul 10, 2023
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,37 @@
+<!--- Provide a general summary of your changes in the Title above -->
+
+## Description
+
+<!--- Describe your changes in detail -->
+
+## Motivation and Context
+
+<!--- Why is this change required? What problem does it solve? -->
+<!--- If it fixes an open issue, please link to the issue here. -->
+
+## How Has This Been Tested?
+
+<!--- Please describe in detail how you tested your changes. -->
+<!--- Include details of your testing environment, the tests you ran to -->
+<!--- see how your change affects other areas of the code, etc. -->
+
+## Screenshots (if appropriate)
+
+## Types of changes
+
+<!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: -->
+
+- [ ] Bug fix (non-breaking change which fixes an issue)
+- [ ] New feature (non-breaking change which adds functionality)
+- [ ] Breaking change (fix or feature that would cause existing functionality to change)
+
+## Checklist
+
+<!--- Go over all the following points, and put an `x` in all the boxes that apply. -->
+<!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->
+
+- [ ] My code follows the code style of this project.
+- [ ] My change requires a change to the documentation.
+- [ ] I have updated the documentation accordingly.
+- [ ] I have added tests to cover my changes.
+- [ ] All new and existing tests passed.
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,4 @@
+{
+  "tabWidth": 2,
+  "singleQuote": true
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "cSpell.words": ["aicar", "Broadcastor", "kebbi"]
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+- 增加凱比機器人圖像
 
 ## [v1.0.3] - 2023.2.7
 

diff --git a/css/main.css b/css/main.css
@@ -551,4 +551,17 @@ input {
   /* FireFox */
   -moz-appearance: none;
   appearance: none;
-}
+}
+
+body #svgKebbi .img-aicar,
+body #svgKebbi .img-kebbi {
+  display: none;
+}
+
+body.aicar #svgKebbi .img-aicar {
+  display: block;
+}
+
+body.kebbi #svgKebbi .img-kebbi {
+  display: block;
+}
diff --git a/index-en.html b/index-en.html
@@ -63,8 +63,14 @@
       </div>
       <div id="main01" class="panel noselect">
         <div id="svgKebbi" class="noselect">
-          <img id="face-01" src="./media/aicar1.svg" />
-          <img id="face-02" src="./media/aicar2.svg" />
+          <div id="face-01">
+            <img class="img-aicar" src="./media/aicar1.svg" />
+            <img class="img-kebbi" src="./media/kebbi1.svg" />
+          </div>
+          <div id="face-02">
+            <img class="img-aicar" src="./media/aicar2.svg" />
+            <img class="img-kebbi" src="./media/kebbi2.svg" />
+          </div>
         </div>
         <div class="circle">
           <svg
@@ -881,6 +887,7 @@ <h4>Saved Successfully</h4>
     <script src="js/mqttClient.min.js"></script>
     <script src="js/clipboard.min.js "></script>
     <script src="js/firebase.js"></script>
+    <script src="js/common.js"></script>
     <script src="js/main-en.js"></script>
 
     <script

diff --git a/index.html b/index.html
@@ -63,8 +63,14 @@
       </div>
       <div id="main01" class="panel noselect">
         <div id="svgKebbi" class="noselect">
-          <img id="face-01" src="./media/aicar1.svg" />
-          <img id="face-02" src="./media/aicar2.svg" />
+          <div id="face-01">
+            <img class="img-aicar" src="./media/aicar1.svg" />
+            <img class="img-kebbi" src="./media/kebbi1.svg" />
+          </div>
+          <div id="face-02">
+            <img class="img-aicar" src="./media/aicar2.svg" />
+            <img class="img-kebbi" src="./media/kebbi2.svg" />
+          </div>
         </div>
         <div class="circle">
           <svg
@@ -868,6 +874,7 @@ <h4>儲存成功</h4>
     <script src="js/mqttClient.min.js"></script>
     <script src="js/clipboard.min.js "></script>
     <script src="js/firebase.js"></script>
+    <script src="js/common.js"></script>
     <script src="js/main.js"></script>
 
     <script

diff --git a/js/common.js b/js/common.js
@@ -0,0 +1,16 @@
+~(async function () {
+  // 處理畫面中央的圖示變換
+  const handleImageType = () => {
+    const params = new URLSearchParams(window.location.search);
+    const type = params.get("type");
+
+    document.body.classList.remove("kebbi", "aicar");
+    if (type === "kebbi") {
+      document.body.classList.add("kebbi");
+    } else {
+      document.body.classList.add("aicar");
+    }
+  };
+
+  handleImageType();
+})();
diff --git a/js/main-en.js b/js/main-en.js
@@ -1,5 +1,4 @@
-~async function () {
-
+~(async function () {
   function handleCustomButton() {
     const sendButton = document.querySelector('.input-group-button');
     const customMessage = document.getElementById('customMessage');
@@ -64,34 +63,40 @@
     btn8: '9',
     btn8n: 'Button 9',
     btn9: '10',
-    btn9n: 'Button 10'
+    btn9n: 'Button 10',
   };
 
   const urlOrigin = location.origin;
   const urlPath = location.pathname;
   const urlHash = location.hash.replace('#', '');
   const config = {
-    databaseURL: "https://webbit-remote.firebaseio.com/"
+    databaseURL: 'https://webbit-remote.firebaseio.com/',
   };
   firebase.initializeApp(config);
   const database = firebase.database();
+  const urlObject = new URL(location.href);
 
   /* firebase 存檔 */
   const saveBtn = document.getElementById('saveBtn');
   const popup = document.getElementById('popup');
   const popupClose = document.getElementById('popupClose');
   const saveUrl = document.getElementById('saveUrl');
+  const getTimeForFirebase = () => {
+    const t = new Date();
+    return `${t.getFullYear()}/${
+      t.getMonth() * 1 + 1
+    }/${t.getDate()} ${t.getHours()}:${t.getMinutes()}:${t.getSeconds()}`;
+  };
   popupClose.addEventListener('click', () => {
     popup.classList.remove('show');
   });
   saveBtn.addEventListener('click', async function () {
-    let t = new Date();
-    list.time = `${t.getFullYear()}/${t.getMonth() * 1 + 1}/${t.getDate()} ${t.getHours()}:${t.getMinutes()}:${t.getSeconds()}`;
-    let write = await database.ref('/').push(list);
+    list.time = getTimeForFirebase();
+    const write = await database.ref('/').push(list);
+    urlObject.hash = write.key;
     popup.classList.add('show');
-    let url = `${urlOrigin}${urlPath}#${write.key}`;
-    saveUrl.innerText = url;
-    window.history.pushState({}, 0, url);
+    saveUrl.innerText = urlObject;
+    window.history.pushState({}, 0, urlObject);
     document.getSelection().removeAllRanges();
   });
 
@@ -108,10 +113,13 @@
   });
 
   /* firebase 讀檔 */
-  if (urlHash) {
-    list = await database.ref(urlHash).once('value').then(result => {
-      return result.val();
-    });
+  if (urlObject.hash) {
+    list = await database
+      .ref(urlObject.hash.substring(1))
+      .once('value')
+      .then((result) => {
+        return result.val();
+      });
     save(list);
   } else {
     // 讀取 localStorage 資料，沒有的話就套用預設值
@@ -148,11 +156,10 @@
     main01.classList.remove('hide');
   });
 
-
   // 顯示十顆按鈕的文字
   const btn = document.querySelectorAll('.btn');
   let btnObj = {};
-  btn.forEach(e => {
+  btn.forEach((e) => {
     btnObj[e.id] = document.getElementById(e.id);
     e.innerHTML = `<span>${list[e.id]}</span>`;
   });
@@ -164,12 +171,13 @@
 
   // input 欄位套用預設值
   const input = document.querySelectorAll('input');
-  input.forEach(e => {
+  input.forEach((e) => {
     let self = e;
     let m = self.getAttribute('m');
     self.value = list[m];
     self.addEventListener('input', () => {
-      window.history.pushState({}, 0, `${urlOrigin}${urlPath}`);
+      urlObject.hash = '';
+      window.history.pushState({}, 0, urlObject);
       list[m] = self.value;
       if (btnObj[m]) {
         btnObj[m].innerHTML = `<span>${self.value}</span>`;
@@ -196,10 +204,10 @@
     if (topic == list.topic1) {
       webduinoBroadcastor.send({
         topic: topic,
-        message: (msg).toString()
+        message: msg.toString(),
       });
     }
-  }
+  };
   // 接收 mqtt 訊號
   const message = document.getElementById('message');
   const messageH4 = document.querySelector('#message h4');
@@ -215,12 +223,12 @@
         }, 3000);
       }
     });
-  }
+  };
   mqttGet(list.topic2);
 
   // 下方怪獸按鈕點擊事件
   const monsterBtn = document.querySelectorAll('.monster-btn');
-  monsterBtn.forEach(e => {
+  monsterBtn.forEach((e) => {
     let self = e;
     self.addEventListener('click', () => {
       mqttPush(list.topic1, list[self.id]);
@@ -232,7 +240,7 @@
   });
 
   // 十顆按鈕點擊事件
-  btn.forEach(e => {
+  btn.forEach((e) => {
     let self = e;
     let msg = self.getAttribute('msg');
     self.addEventListener('click', () => {
@@ -251,15 +259,15 @@
     top: false,
     bottom: false,
     left: false,
-    right: false
+    right: false,
   };
   function sendCheck(type) {
     send = {
       center: false,
       top: false,
       bottom: false,
       left: false,
-      right: false
+      right: false,
     };
     if (type) {
       send[type] = true;
@@ -287,17 +295,21 @@
       }
       if (kebbi.classList.contains('target')) {
         const kx = kebbi.offsetLeft; // 車子 left
-        const ky = kebbi.offsetTop;  // 車子 top
+        const ky = kebbi.offsetTop; // 車子 top
         const carSize = getCarSize();
 
         // 注意，小車一開始的中心點 y 座標，不等於畫面的中心點 y 座標。
         // 邊界在中心的周圍 1/3 小車寬/高的距離
-        const kxCenter = kx + carSize.width / 2;  // 車子中心點 x 座標
+        const kxCenter = kx + carSize.width / 2; // 車子中心點 x 座標
         const kyCenter = ky + carSize.height / 2; // 車子中心點 y 座標
-        const leftSide = content.offsetWidth * 0.5 - carSize.width / 3;  // 左邊界，小於這個值，判定車子移動到左邊
+        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; // 下邊界，小於這個值，判定車子移動到下面
+        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) {
@@ -356,7 +368,9 @@
       kebbi.classList.remove('target');
       kebbi.classList.add('reset');
       kebbi.style.left = `${(content.offsetWidth - kebbi.offsetWidth) / 2}px`;
-      kebbi.style.top = `${(content.offsetHeight * 0.8 - kebbi.offsetHeight) / 2}px`;
+      kebbi.style.top = `${
+        (content.offsetHeight * 0.8 - kebbi.offsetHeight) / 2
+      }px`;
     }
 
     function updateCarSize() {
@@ -385,5 +399,4 @@
     kebbi.classList.remove('reset');
     imgPosition();
   });
-
-}();
+})();