Migrate to Vue3!!

ma2shita · Mar 3, 2021 · 2b7c9f0 · 2b7c9f0
1 parent 672c7cf
commit 2b7c9f0
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 32 deletions.
diff --git a/dealer.html b/dealer.html
@@ -8,7 +8,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
   <script src="//cdn.jsdelivr.net/npm/underscore@1.12.0/underscore-min.js"></script>
-  <script src="//jp.vuejs.org/js/vue.min.js"></script>
+  <script src="//unpkg.com/vue@next"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/seedrandom/3.0.5/seedrandom.min.js"></script>
   <!-- UIkit CSS -->
   <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/uikit@3.6.17/dist/css/uikit.min.css" />
@@ -83,13 +83,21 @@
 
 <script src="config.js"></script>
 <script>
-  const app1 = new Vue({
-    el: "#app1",
-    data: {
-      options: [],
-      latest: null,
-      results: [],
-      shuffling: false // for Ent.
+  const app1 = Vue.createApp({
+    data() {
+      return {
+        options: [],
+        latest: null,
+        results: [],
+        shuffling: false // for Ent.
+      }
+    },
+    created() {
+      if (sessionStorage.getItem('options') && sessionStorage.getItem('latest') && sessionStorage.getItem('results')) { // for UX
+        this.options = JSON.parse(sessionStorage.getItem('options'));
+        this.latest = sessionStorage.getItem('latest');
+        this.results = JSON.parse(sessionStorage.getItem('results'));
+      }
     },
     methods: {
       new_game: function () {
@@ -138,12 +146,8 @@
   });
 
   window.onload = function () {
-    if (sessionStorage.getItem('options') && sessionStorage.getItem('latest') && sessionStorage.getItem('results')) { // for UX
-      app1.options = JSON.parse(sessionStorage.getItem('options'));
-      app1.latest = sessionStorage.getItem('latest');
-      app1.results = JSON.parse(sessionStorage.getItem('results'));
-    }
-  };
+    app1.mount('#app1');
+  }
 </script>
 
 </html>
diff --git a/player.html b/player.html
@@ -8,7 +8,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
   <script src="//cdn.jsdelivr.net/npm/underscore@1.12.0/underscore-min.js"></script>
-  <script src="//jp.vuejs.org/js/vue.min.js"></script>
+  <script src="//unpkg.com/vue@next"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/seedrandom/3.0.5/seedrandom.min.js"></script>
   <!-- UIkit CSS -->
   <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/uikit@3.6.17/dist/css/uikit.min.css" />
@@ -92,18 +92,26 @@ <h3>注意点</h3>
 
 <script src="config.js"></script>
 <script>
-  const app1 = new Vue({
-    el: "#app1",
-    data: {
-      card_id: null,
-      playing: false,
-      cards: [
-        [[0, false], [0, false], [0, false], [0, false], [0, false]],
-        [[0, false], [0, false], [0, false], [0, false], [0, false]],
-        [[0, false], [0, false], [0, false], [0, false], [0, false]],
-        [[0, false], [0, false], [0, false], [0, false], [0, false]],
-        [[0, false], [0, false], [0, false], [0, false], [0, false]],
-      ]
+  const app1 = Vue.createApp({
+    data() {
+      return {
+        card_id: null,
+        playing: false,
+        cards: [
+          [[0, false], [0, false], [0, false], [0, false], [0, false]],
+          [[0, false], [0, false], [0, false], [0, false], [0, false]],
+          [[0, false], [0, false], [0, false], [0, false], [0, false]],
+          [[0, false], [0, false], [0, false], [0, false], [0, false]],
+          [[0, false], [0, false], [0, false], [0, false], [0, false]],
+        ]
+      }
+    },
+    created() {
+      if (sessionStorage.getItem('card_id') && sessionStorage.getItem('cards')) { // for UX
+        this.card_id = sessionStorage.getItem('card_id');
+        this.cards = JSON.parse(sessionStorage.getItem('cards'));
+        this.playing = true;
+      }
     },
     methods: {
       new_game: function () {
@@ -146,11 +154,7 @@ <h3>注意点</h3>
   });
 
   window.onload = function () {
-    if (sessionStorage.getItem('card_id') && sessionStorage.getItem('cards')) { // for UX
-      app1.card_id = sessionStorage.getItem('card_id');
-      app1.cards = JSON.parse(sessionStorage.getItem('cards'));
-      app1.playing = true;
-    }
+    app1.mount('#app1');
   };
 </script>