super pre page on arena

src/components/PageHeader.vue

@@ -17,12 +17,14 @@
             <ul class="nav navbar-nav navbar-right">
               <li role="presentation"><a href="https://ygobbs.com/" target="_blank">{{lang.forum}} </a></li>
 
-              <li role="presentation"><a href="https://shop387046095.taobao.com/?spm=2013.1.1000126.2.61a97e3emY0JZB"
+              <li role="presentation"><a href="https://shop387046095.taobao.com/"
                   target="_blank">{{lang.shop}} </a>
               </li>
               <li role="presentation"><a href="#/ranking" >{{lang.rank}} </a></li>
               <li role="presentation"><a href="#/cards"  >{{lang.card_rank}} </a></li>
               <li role="presentation"><a href="#/rates" >{{lang.rates}} </a></li>
+              <li role="presentation"><a href="#/superpre">{{ lang.superpre }}</a></li>
+
               <!--    <li class="dropdown">
                 <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" href="#">
                   {{lang.card_rank}} <span class="caret"></span></a>
@@ -32,14 +34,11 @@
                 </ul>
               </li> -->
 
-              <li role="presentation"><a href=" https://event.ygobbs.com">{{lang.race}} </a></li>
-
-            
-
               <li class="dropdown">
                 <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" href="#">
                   {{lang.tool}} <span class="caret"></span></a>
                 <ul class="dropdown-menu" role="menu">
+                  <li role="presentation"><a href=" https://event.ygobbs.com">{{lang.race}} </a></li>
                   <li role="presentation"><a href="#/deckprint">{{lang.deckprint}} </a></li>
                   <li role="presentation"><a href="#/tabulate">{{lang.tabulate}} </a></li>
                   <li role="presentation"><a href="https://rep.ygobbs.com">{{lang.battlelog}} </a></li>
@@ -648,6 +647,13 @@ background-color: #283044;
     position: relative;
     overflow: hidden!important;
 }
+
+  .navbar-nav > li {
+    margin-right: 1px; /* Adjust the right margin */
+    /* Or you can adjust padding instead of margin */
+    /* padding-right: 10px; */
+  }
+
   /*body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}
 body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
 body .demo-class .layui-layer-btn a{background:#333;}

src/components/SuperPre.vue

+<template>
+    <div class="superpre-container">
+        <header>
+            <div class="container">
+            <section class="intro">
+                <h1>MC超先行更新进度&介绍</h1>
+                <p>MC超先行服是一个快速更新游戏王新卡的先行测试服务器。在正式更新之前，卡片都需经过超先行的测试。一般在有新卡情报公开的1天内便会更新。</p>
+            </section>
+            <section class="server-info">
+                <h2>MC超先行服主机地址</h2>
+                <p>主机地址：mygo.superpre.pro 端口:888</p>
+                <p>房间名留空时，既为匹配模式。与其他直连服务器使用方法相同。</p>
+                <p><a href="https://ygo233.com/usage" class="btn">直连服务器使用方法</a></p>
+                <p>若遇到了Bug需要反馈，请在<a href="https://ygobbs.com/c/10" class="feedback">MC社区BUG区</a>发帖反馈。</p>
+                <p>如果你想参与开发，请见本文：<a href="https://ygobbs.com/t/449691" class="download">YGOPro更新事务招人</a></p>
+                <p>更新时间：<span class="updateTime"></span></p>
+            </section>
+            <section class="update-method">
+                <h2>更新方法</h2>
+                <ol>
+                <li>先下载更新包：<a href="https://cdn02.moecube.com:444/ygopro-super-pre/archive/ygopro-super-pre.ypk" class="download">扩展包</a></li>
+                <li>你会下载到一个ypk文件。将文件放在你的ygopro/ygopro2/ygomobile游戏目录下的expansions文件夹。</li>
+                <li>如果你使用的是YGOMobile，也可以在YGOMobile自带的先行卡页面下载安装。</li>
+                </ol>
+                <p style="text-decoration: line-through;">有没有人能来拯救一下这个UI</p>
+            </section>
+            </div>
+        </header>
+        
+        <main>
+            <h1>超先行卡列表</h1>
+            <p>按发布时间排序，最新的卡在前</p>
+            <table id="preTable">
+                <thead>
+                <tr>
+                    <th>卡图</th>
+                    <th>效果</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr v-if="loading" class="loading">
+                    <td colspan="2">
+                    <span class="loader"></span>
+                    </td>
+                </tr>
+                <tr v-for="(card, index) in cards" :key="index">
+                    <td class="img">
+                    <img :src="card.picUrl" :alt="card.name" loading="lazy" class="card-image">
+                    </td>
+                    <td class="text">
+                    <p class="name">{{ card.name }}</p>
+                    <p class="overallString">{{ card.overallString }}</p>
+                    <p class="desc">{{ card.desc }}</p>
+                    <p class="time">发布日期：<span class="createTime">{{ formatDateFromUnixTimestamp(card.createTime) }}</span><br>
+                        最后更新：<span class="updateTime">{{ formatDateFromUnixTimestamp(card.updateTime) }}</span></p>
+                    </td>
+                </tr>
+                </tbody>
+                <tfoot v-if="showMore">
+                    <tr>
+                        <td colspan="2">
+                        查看更多（共<span>{{ cards.length }}</span>张）
+                        </td>
+                    </tr>
+                </tfoot>
+            </table>
+        </main>
+
+        <section class="comment">
+            <div id="tcomment"></div>
+        </section>
+
+        <button @click="returnToTop" class="return-to-top" v-if="showReturnToTopButton">
+            返回顶端
+        </button>
+    </div>
+
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      cards: [],
+      loading: true,
+      showMore: false,
+      showReturnToTopButton: false
+    };
+  },
+  mounted() {
+    this.getPre();
+    this.getVersion();
+    // this.initializeTwikoo();
+  },
+  methods: {
+
+    async getPre() {
+        try {
+            const res = await fetch('https://cdn02.moecube.com:444/ygopro-super-pre/data/test-release-v2.json');
+            const cards = await res.json();
+
+            this.cards = cards; 
+
+            this.loading = false;
+            console.log("line99", cards.length, this.showMore)
+            if (cards.length > 10) {
+            this.showMore = true; 
+            }
+            console.log("line104", cards.length, this.showMore)
+        } catch (error) {
+            console.error('Error fetching card data from test-release-v2.json:', error);
+        }
+    },
+
+    async getVersion() {
+      try {
+        let res = await fetch('https://cdn02.moecube.com:444/ygopro-super-pre/data/version.txt');
+        let version = await res.text();
+        document.querySelector('header .updateTime').innerText = this.formatDateFromUnixTimestamp(version);
+        document.querySelector('a.download').href = document.querySelector('a.download').href + "?v=" + version;
+      } catch (error) {
+        console.error('Error fetching version:', error);
+        // Handle error if necessary
+      }
+    },
+    formatDateFromUnixTimestamp(timestamp) {
+      var date = new Date(timestamp * 1000);
+      var year = date.getFullYear();
+      var month = ('0' + (date.getMonth() + 1)).slice(-2);
+      var day = ('0' + date.getDate()).slice(-2);
+      var hours = ('0' + date.getHours()).slice(-2);
+      var minutes = ('0' + date.getMinutes()).slice(-2);
+      var seconds = ('0' + date.getSeconds()).slice(-2);
+      var formattedDate = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
+      return formattedDate;
+    },
+    returnToTop() {
+        window.scrollTo({
+        top: 0,
+        behavior: 'smooth' // Optional: scroll behavior animation
+        });
+    },
+    // initializeTwikoo() {
+    //   twikoo.init({
+    //     envId: 'https://ygo233.com/tcomment',
+    //     el: '#tcomment',
+    //     path: 'mycard-pre'
+    //   });
+    // }
+  }
+}
+</script>
+  
+<style scoped>
+
+    .superpre-container {
+    background-color: #c5d0e8; 
+    padding-top: 60px;
+    }
+
+	header {
+	padding: 40px 0;
+	}
+
+	.container {
+	max-width: 800px;
+	margin: 0 auto;
+	padding: 0 20px;
+	}
+
+	.intro h1 {
+	color: #333;
+	font-size: 36px;
+	margin-bottom: 20px;
+	}
+
+	.intro p {
+	color: #666;
+	font-size: 18px;
+	line-height: 1.6;
+	}
+
+	.server-info, .update-method {
+	margin-top: 40px;
+	}
+
+	.server-info h2, .update-method h2 {
+	color: #333;
+	font-size: 24px;
+	margin-bottom: 20px;
+	}
+
+	.server-info p, .update-method p {
+	color: #666;
+	font-size: 16px;
+	margin-bottom: 15px;
+	}
+
+	.update-method ol {
+	list-style-type: decimal;
+	padding-left: 20px;
+	}
+
+	.update-method ol li {
+	color: #666;
+	font-size: 16px;
+	margin-bottom: 10px;
+	}
+
+	.btn {
+	display: inline-block;
+	background-color: #007bff;
+	color: #fff;
+	padding: 10px 20px;
+	text-decoration: none;
+	border-radius: 5px;
+	}
+
+	.btn:hover {
+	background-color: #0056b3;
+	}
+
+
+	main {
+		width: auto;
+		padding: 20px 200px;
+		background-color: #021123;
+		color: #c5d0e8;
+	}
+
+	#preTable {
+		width: 100%;
+		border: 0;
+	}
+
+	#preTable thead {
+		display: none;
+	}
+
+	.text {
+		vertical-align: top;
+	}
+
+	.name {
+		font-size: 22px;
+		font-weight: bold;
+	}
+
+	.time {
+		font-size: 12px;
+		color: #555555;
+	}
+
+	.loading td {
+		width: 100%;
+		height: 80px;
+		text-align: center;
+	}
+
+	.loading .loader {
+		width: 48px;
+		height: 48px;
+		border: 5px solid #FFF;
+		border-bottom-color: transparent;
+		border-radius: 50%;
+		display: inline-block;
+		box-sizing: border-box;
+		animation: rotation 1s linear infinite;
+	}
+
+    .card-image {
+        width: 199px; 
+        height: 290px;
+        object-fit: cover;
+        padding-top: 10px;
+        padding-bottom: 10px; 
+        padding-right: 10px;
+        align-items: center;
+		text-align: center;
+    }
+
+
+	@keyframes rotation {
+		0% {
+			transform: rotate(0deg);
+		}
+
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
+	#preList tr:nth-child(n+10) {
+		display: none;
+	}
+
+	#preList.expanded tr {
+		display: table-row;
+	}
+
+	#preTable tfoot {
+		display: none;
+	}
+
+	#preTable tfoot td {
+		height: 60px;
+		text-align: center;
+		vertical-align: middle;
+		cursor: pointer;
+		background-color: #072549;
+	}
+
+	section.comment {
+		width: auto;
+		padding: 20px 200px;
+		background-color: white;
+	}
+
+	footer {
+		width: auto;
+		height: 240px;
+		padding: 20px 200px;
+		text-align: center;
+		background: #021123;
+		color: #c5d0e8;
+	}
+
+	footer img {
+		width: 200px;
+		height: 200px;
+	}
+
+    .return-to-top {
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+        padding: 10px 20px;
+        background-color: #4caf50;
+        color: white;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        z-index: 999; /* Ensure the button is above other content */
+        }
+
+    .return-to-top:hover {
+        background-color: #45a049;
+    }
+</style>

src/components/lang.js

@@ -8,6 +8,7 @@ module.exports = {
     rank: '玩家排行',
     battlelog: '战报系统',
     card_rank: '卡片排行',
+    superpre: '超先行卡',
     race: '赛事系统',
     download: '下载',
     profile: '个人信息',
@@ -125,6 +126,7 @@ module.exports = {
     rank: 'User rank',
     battlelog: 'Battle log',
     card_rank: 'Meta Check',
+    superpre: 'Beta Cards',
     race: "Race",
     download: 'Download',
     profile: 'Profile',

src/router/index.js

@@ -17,6 +17,7 @@ import Vote from '@/components/Vote'
 import Ads from '@/components/Ads'
 import Deckprint from '@/components/Deckprint'
 import Tabulate from '@/components/Tabulate'
+import SuperPre from '@/components/SuperPre'
 // import konami from '@/components/konami'
 
 Vue.use(Router)
@@ -115,6 +116,11 @@ export default new Router({
           name: 'Ads',
           component: Ads
         },
+        {
+          path: '/superpre',
+          name: 'SuperPre',
+          component: SuperPre
+        },
       ]
     },