resolve #27 use notification instead of alert

package.json

@@ -18,6 +18,7 @@
     "normalize.css": "^8.0.1",
     "vue": "^2.7.16",
     "vue-i18n": "^8.28.2",
+    "vue-notification": "^1.3.20",
     "vuex": "^3.6.2"
   },
   "devDependencies": {

src/components/App.vue

@@ -267,6 +267,7 @@
         </div>
       </div>
     </div>
+    <notifications :position="showOverlay || showDeckDiv ? 'top center' : 'bottom right'" :duration="3000" width="20%" :ignoreDuplicates="true"/>
   </div>
 </template>
 
@@ -361,6 +362,14 @@ export default {
     window.addEventListener('keydown', this.handleKeyDown);
   },
   methods: {
+    sendNotify(data) {
+      // send notify with unlimited time when in backend
+      if (document.hidden) {
+        data.duration = -1;
+        data.title = this.$t('Background message, click to hide')
+      }
+      this.$notify(data);
+    },
     getFailFunc(msg, stopServerConnection = false) {
       function failFunc(err) {
         this.make_alert(this.$t(msg) + err, err);
@@ -399,7 +408,10 @@ export default {
         console.log('PATCH', patch_message, Object.keys(patch_message.patch).length, 'KEYS');
         this.updateLocales(patch_message);
         this.$store.commit('updateDataByPatch', patch_message);
-        alert(this.$t('Connected to server.'));
+        this.sendNotify({
+          text: this.$t('Connected to server.'),
+          type: 'success'
+        });
         this.serverConnected = true;
         // when successfully connected, start auto refreshing immediately.
         this.refreshTimeout = setTimeout(() => this.refreshData(), 0);
@@ -442,26 +454,41 @@ export default {
       // before old connect server, this will check room name, and
       // update room name if it is valid.
       if (!this.checkRoomName()) {
-        alert(this.$t('Room name must be 4-12 characters, only contains alphabets, numbers or underscore(_).'));
+        this.sendNotify({
+          text: this.$t('Room name must be 4-12 characters, only contains alphabets, numbers or underscore(_).'),
+          type: 'error'
+        });
         return;
       }
       function postRoomNameSuccess(data) {
         let port = data.port;
         let status = data.status;
         console.log(port, status);
         if (status == 'failed') {
-          alert(this.$t('Create room failed. Please check backend output.'));
+          this.sendNotify({
+            text: this.$t('Create room failed. Please check backend output.'),
+            type: 'error'
+          });
           return;
         }
         if (status == 'full') {
-          alert(this.$t('Room is full. Please try to create new room later or enter existing rooms.'));
+          this.sendNotify({
+            text: this.$t('Room is full. Please try to create new room later or enter existing rooms.'),
+            type: 'error'
+          });
           return;
         }
         if (status == 'exist') {
-          alert(this.$t('Successfully enter room ') + this.roomName);
+          this.sendNotify({
+            text: this.$t('Successfully enter room ') + this.roomName,
+            type: 'success'
+          });
         }
         if (status == 'created') {
-          alert(this.$t('Successfully create room ') + this.roomName);
+          this.sendNotify({
+            text: this.$t('Successfully create room ') + this.roomName,
+            type: 'success'
+          });
         }
         let url = new URL(this.roomServerURL);
         url.port = port;
@@ -483,13 +510,19 @@ export default {
         if (target_class == 'HTTPRoomServer' && this.roomName == '') {
           // if is room server, but room name is empty, raise alert.
           let msg = this.$t('Server is room server, but room name is empty. Please input room name.');
-          alert(msg);
+          this.sendNotify({
+            text: msg,
+            type: 'error'
+          });
           return;
         }
         else if (target_class == 'HTTPServer' && this.roomName != '') {
           // if is match server, but room name is not empty, raise alert.
           let msg = this.$t('Server is match server, but room name is not empty. Please clear room name.');
-          alert(msg);
+          this.sendNotify({
+            text: msg,
+            type: 'error'
+          });
           return;
         }
         if (!obj.info || obj.info.class == 'HTTPServer') {
@@ -536,7 +569,10 @@ export default {
         this.requestData = [];
         this.processing = false;
         this.matchUUID = null;
-        if (make_alert) alert(this.$t('Game reset successfully!'));
+        if (make_alert) this.sendNotify({
+          text: this.$t('Game reset successfully!'),
+          type: 'success'
+        });
     },
     checkVersion(serverURL, callback = undefined) {
       function versionSuccess(obj) {
@@ -549,7 +585,10 @@ export default {
           version = version.replace(/\.post\d+$/, '');  // ignore post versions
           if (version != self_version) {
             let msg = this.$t('Server version is ') + version + this.$t(', but client version is ') + self_version + this.$t('. Client may not work properly.');
-            alert(msg);
+            this.sendNotify({
+              text: msg,
+              type: 'warn'
+            });
           }
         }
         if (callback) callback(obj);
@@ -643,7 +682,10 @@ export default {
     },
     make_alert(title, data) {
       console.error(data);
-      alert(title + this.$t('\nFind detail in console.'));
+      this.sendNotify({
+        text: title + this.$t('\nFind detail in console.'),
+        type: 'error'
+      });
       clearTimeout(this.refreshTimeout);
       this.refreshTimeout = null;
     },
@@ -1184,7 +1226,10 @@ export default {
       let current_index = this.currentDataIndex;
       let match = this.matchData[current_index];
       if (match.requests.length == 0) {
-        alert(this.$t('No available action at current index! cannot reset to this index.'));
+        this.sendNotify({
+          text: this.$t('No available action at current index! cannot reset to this index.'),
+          type: 'error'
+        });
         return;
       }
       let userConfirmation = confirm(
@@ -2349,4 +2394,10 @@ span {
   cursor: default;
 }
 
+#app .vue-notification {
+  font-size: 1.25vw;
+  padding: 0.5vw;
+  margin: 0.3vw;
+}
+
 </style>

src/components/Deck.vue

@@ -118,6 +118,14 @@ export default {
     this.selectedVersion = this.availableVersions[this.availableVersions.length - 1];
   },
   methods: {
+    sendNotify(data) {
+      // send notify with unlimited time when in backend
+      if (document.hidden) {
+        data.duration = -1;
+        data.title = this.$t('Background message, click to hide')
+      }
+      this.$notify(data);
+    },
     imgSrcError(event) {
       event.target.style.display = 'none';
 
@@ -175,12 +183,15 @@ export default {
       let nearestVersion = this.$store.getters.findNearestVersion(name, this.selectedVersion, this.$i18n.messages['en-US']);
       if (nearestVersion == null) {
         let type = name.split('/')[0];
-        alert(
-          this.$t('Version for ', { version: this.selectedVersion })
-          + this.$t(type == 'CHARACTOR' ? 'charactor: ' : 'card: ')
-          + this.$t(name)
-          + this.$t(' not exist!')
-        );
+        this.sendNotify({
+          text: (
+            this.$t('Version for ', { version: this.selectedVersion })
+            + this.$t(type == 'CHARACTOR' ? 'charactor: ' : 'card: ')
+            + this.$t(name)
+            + this.$t(' not exist!')
+          ),
+          type: 'error'
+        });
         return;
       }
       this.$store.commit('addDeckCard', {
@@ -279,7 +290,10 @@ export default {
     useDeckCode() {
       // Use the deck code
       if (this.inputDeckCode.length != 68) {
-        alert(this.$t('Deck code length should be 68!'));
+        this.sendNotify({
+          text: this.$t('Deck code length should be 68!'),
+          type: 'error'
+        });
         return;
       }
       try {
@@ -294,9 +308,16 @@ export default {
         decks[this.playerIdx] = deckDict;
         this.$store.commit('setDeck', decks);
         let message = this.$t('Deck code parsed successfully! Currently not uploaded to server, please upload manually.');
-        if (no_version.length > 0)
-          message += this.$t('\n\nWarning: the following cards/charactors are not available in selected version, they will be ignored:\n') + no_version.map((item) => this.$t(item.type + '/' + item.name)).join(', ');
-        alert(message);
+        this.sendNotify({
+          text: message,
+          type: 'success'
+        });
+        if (no_version.length > 0) {
+          this.sendNotify({
+            text: this.$t('\n\nWarning: the following cards/charactors are not available in selected version, they will be ignored:\n') + no_version.map((item) => this.$t(item.type + '/' + item.name)).join(', '),
+            type: 'warn'
+          });
+        }
         this.showDeckCodeDiv = false;
         this.$store.commit('addDeckModifyCounter', null);
       }
@@ -308,7 +329,10 @@ export default {
       function successFunc(data) {
         // console.log(data);
         if (data == 'error') return;
-        alert(this.$t('Deck uploaded successfully!'));
+        this.sendNotify({
+          text: this.$t('Deck uploaded successfully!'),
+          type: 'success'
+        });
         // this.$store.commit('setShowDeckDiv', false);
         this.$store.commit('resetDeckModifyCounter', null);
         if (callback) callback();
@@ -344,7 +368,10 @@ export default {
     },
     make_alert(title, data) {
       console.error(data);
-      alert(title + this.$t('\n\nFind detail in console.'));
+      this.sendNotify({
+        text: title + this.$t('\n\nFind detail in console.'),
+        type: 'error'
+      });
     },
     clearCards() {
       if (!this.cardModifiable) return;
@@ -381,14 +408,20 @@ export default {
         this.inputDeckCode = '';
       }
       catch (error) {
-        alert(this.$t('Error in getting deck code. ') + error);
+        this.sendNotify({
+          text: this.$t('Error in getting deck code. ') + error,
+          type: 'error'
+        });
         throw error;
       }
     },
     receiveDeckCodeFromServer() {
       // receive deck code from server and show div
       if (this.$store.state.deckModifyCounter > 0) {
-        alert(this.$t('Current deck is modified and not uploaded, please upload the deck before getting the deck code!'));
+        this.sendNotify({
+          text: this.$t('Current deck is modified and not uploaded, please upload the deck before getting the deck code!'),
+          type: 'warn'
+        });
         return;
       }
       const xhr = new XMLHttpRequest();
@@ -400,7 +433,10 @@ export default {
             this.inputDeckCode = '';
           }
           else {
-            alert(this.$t('Error in getting deck code. ') + xhr.responseText);
+            this.sendNotify({
+              text: this.$t('Error in getting deck code. ') + xhr.responseText,
+              type: 'error'
+            });
           }
         }
       };

src/index.js

@@ -3,9 +3,11 @@ import App from './components/App.vue';
 import store from './store';
 import VueI18n from 'vue-i18n'
 import i18n_data from './i18n';
+import Notifications from 'vue-notification'
 
 Vue.config.productionTip = false;
 Vue.use(VueI18n);
+Vue.use(Notifications);
 
 let i18n = new VueI18n(i18n_data);
 

src/locales/en-US.json

@@ -155,6 +155,7 @@
   "Animation frequency (ms):": "Animation speed (ms):",
   "Error in update match data. ": "Error in update match data. ",
   " is not equal to current match length ": " is not equal to current match length {n}. ",
+  "Background message, click to hide": "Background sent message, click to hide",
 
   "SKILL_TYPE/NORMAL_ATTACK": "Normal Attack",
   "SKILL_TYPE/ELEMENTAL_SKILL": "Elemental Skill",

src/locales/zh-CN.json

@@ -155,6 +155,7 @@
   "Animation frequency (ms):": "动画速度（毫秒）：",
   "Error in update match data. ": "更新对战数据时发生错误。",
   " is not equal to current match length ": " 与当前对战帧数长度 {n} 不相等。",
+  "Background message, click to hide": "后台发送消息，点击隐藏",
 
   "SKILL_TYPE/NORMAL_ATTACK": "普通攻击",
   "SKILL_TYPE/ELEMENTAL_SKILL": "元素战技",