Skip to content

Y
Ygopro Arena Web
Commit 59394043 authored by Tang Xinwei's avatar Tang Xinwei
Browse files
Options

Merge branch 'super_pre_page' into 'master' 

Add super pre page on arena

See merge request !2
parents 36f318b1 9db408c0
Pipeline #25413 passed with stages
      in 2 minutes and 9 seconds
      Hide whitespace changes
      Inline Side-by-side
      Showing with 369 additions and 6 deletions
      src/components/PageHeader.vue
      View file @ 59394043
      ......@@ -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,18 +34,15 @@
      </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>
      <li role="presentation"><a href="#/download">{{lang.download}} </a></li>
      <li role="presentation"><a href="#/download">{{lang.download}} </a></li>
      </ul>
      </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 0 → 100644
      View file @ 59394043
      <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
      View file @ 59394043
      ......@@ -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
      View file @ 59394043
      ......@@ -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
      },
      ]
      },
      ......
      Markdown is supported
      0% or
      You are about to add 0 people to the discussion. Proceed with caution.
      Finish editing this message first!
      Please register or to comment