Skip to content

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

super pre page on arena

parent 36f318b1
Pipeline #25412 passed with stage
    in 1 minute and 57 seconds
    Show whitespace changes
    Inline Side-by-side
    Showing with 369 additions and 6 deletions
    src/components/PageHeader.vue
    View file @ 9db408c0
    ......@@ -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 0 → 100644
    View file @ 9db408c0
    <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 @ 9db408c0
    ......@@ -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 @ 9db408c0
    ......@@ -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