-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
14 lines (14 loc) · 5.99 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="shortcut icon" href="img/logo/logo.png" type="image/png"><link rel="apple-touch-icon" href="img/logo/logo.png"><link rel="stylesheet" href="css/style.min.css"><title>至尊柏青哥</title></head><body><div id="app"><audio class="o-music" ref="musicDom" :key="musicId" autoplay loop preload="auto"><source :src="`music/music0${musicId}.mp3`" type="audio/mpeg"><source :src="`music/music0${musicId}.mp3`" type="audio/ogg"></audio><nav class="c-navbar"><div class="c-navbar__logo-wrap"><h1 class="c-navbar__title u-title">{{ config.data.title }}</h1></div></nav><main class="l-main"><div class="container-fluid"><div class="row l-main__box"><div class="col-7 l-main__jackpot"><template v-for="(item, index) in list.data" :key="item.name"><jackpot :data="item" :name="config.data.jackpotName[index]" :win-data="winData"></jackpot></template><div class="c-win" :class="{ 'is-active': isWin }"><div class="c-win__coin-wrap"><video class="c-win__coin" :key="videoSrc02" autoplay muted><source :src="`${videoSrc02}.webm`" type="video/webm"><source :src="`${videoSrc02}.mov`" type="video/mp4"></video></div><div class="c-win__coin-wrap"><video class="c-win__coin" :key="videoSrc01" autoplay muted><source :src="`${videoSrc01}.webm`" type="video/webm"><source :src="`${videoSrc01}.mov`" type="video/mp4"></video></div><h2 class="c-win__title" v-html="winLocation"></h2></div></div><div class="col-5 l-main__table"><table class="c-table" :class="{ '--none': recordList.data.length === 0 }"><thead><tr><th>時間</th><th>JP</th><th>分數</th><th>地區</th></tr></thead><tbody><tr class="c-table__tr --none" v-show="recordList.data.length === 0"><td colspan="4"><p>尚未有任何紀錄</p></td></tr><tr class="c-table__tr" v-for="(item, index) in recordList.data" :class="`--JP${indexFilter(item.name) + 1}`"><td><p v-for="time in spaceFilter(item.time)">{{ time }}</p></td><td>{{ config.data.jackpotName[indexFilter(item.name)] }}</td><td>{{ item.score }}</td><td><p v-for="location in spaceFilter(item.location)">{{ location }}</p></td></tr></tbody></table></div></div></div></main></div><script src="js/axios.min.js"></script><script src="js/vue.global.prod.js"></script><script src="js/coin.min.js"></script><script src="js/gsap.min.js"></script><script id="jackpot" type="text/x-template"><div class="c-jackpot" ref="jackpot" :class="{ 'is-active': props.winData.data.jackpot_id == props.data.jackpot_id }">
<div class="c-jackpot__wrap" ref="jackpotWrap">
<div class="c-jackpot__name">{{ props.name }}</div>
<div class="c-jackpot__score-wrap">
<div class="c-jackpot__score">{{ props.winData.data.jackpot_id == props.data.jackpot_id ? props.winData.data.win_score : props.data.win_score }}</div>
<div class="c-jackpot__range-wrap">
<p class="c-jackpot__machine">MEGA</p>
<p class="c-jackpot__range --min">{{ props.data.min_value }}</p>
<p class="c-jackpot__dash">—</p>
<p class="c-jackpot__range --max">{{ props.data.max_value }}</p>
</div>
</div>
</div>
</div></script><script>const{ref,computed,watch}=Vue,Jackpot={template:"#jackpot",props:{data:{type:Object,default:()=>({})},name:{type:Function,default:String},winData:{type:Object,default:()=>({})}},setup(a){const l=ref(null);onMounted(()=>{(()=>{const a=(t,e)=>Math.floor(Math.random()*(e-t)+t);setInterval(()=>{var t=a(-100,100),e=a(-20,20);l.value.style.transform=`translate(${t}px, ${e}px)`},2e3)})()});const n=ref(null);let o;return watch(()=>a.winData.data.jackpot_id,t=>{var e;t&&t===a.data.jackpot_id?(n.value.style.transform="",e=n.value.getBoundingClientRect().left-450,t=n.value.getBoundingClientRect().top,o=gsap.timeline(),o.fromTo(n.value,{position:"fixed",left:e,top:t,zIndex:99999},{left:window.innerWidth/2-n.value.clientWidth+"px",top:window.innerHeight/2-n.value.clientHeight+"px",duration:3.5,ease:"power1.out",delay:1===a.winData.data.videoType?4.7:11.5})):(o&&o.kill(),n.value.style.position="",n.value.style.left="",n.value.style.top="",n.value.style.transform="",n.value.style.zIndex="")}),{jackpot:n,jackpotWrap:l,props:a}}}</script><script>const{reactive,onMounted}=Vue,App={components:{Jackpot:Jackpot},setup(){const t=reactive({data:[]}),i=reactive({data:[]}),d=reactive({data:[]}),o=reactive({data:[]});let n=!1,a=0;const e=()=>{60===a&&window.location.reload(),a++,setTimeout(e,6e4)},u=()=>{axios.get(v.data.api).then(a=>{if(t.data=a.data,d.data=t.data.filter(a=>1===a.winning_status),0===i.data.length&&(i.data=a.data),0===o.data.length)o.data=d.data;else{const e=o.data.map(a=>a.jackpot_id);d.data.map(a=>{e.includes(a.jackpot_id)||o.data.push(a)})}0<o.data.length&&!1===n&&(n=!0,clearTimeout(s),r()),setTimeout(u,300)})},l=reactive({data:[]}),c=ref("");let s;const r=()=>{axios.get(v.data.apiRecord).then(a=>{l.data=a.data,s=setTimeout(r,12e4),n&&(a=l.data.find(a=>o.data[0].win_score==a.score),c.value=a?p(a.location).join("<br/>"):"",setTimeout(()=>{k(o.data[0])},1e3))})},v=reactive({data:{}});onMounted(()=>{document.addEventListener("click",function(){x.value.play()}),axios.get("database/config.json").then(a=>{v.data=a.data,u(),r(),e()})});const p=a=>a.split(" "),m=ref(!1),f=reactive({data:{}}),h=ref(""),T=ref("");let g,w;const k=a=>{m.value=!m.value,g=m.value?(f.data=a,j.value=1,h.value="video/video02",w=setTimeout(()=>{T.value="video/video01"},13e3),w=setTimeout(()=>{T.value=""},23e3),setTimeout(()=>{m.value=!1,f.data={},h.value="",T.value="",o.data.shift(),j.value=2,c.value="",n=!1},28e3)):(m.value=!1,f.data={},h.value="",clearTimeout(g),clearTimeout(w),null)},x=ref(null),j=ref(2);return{config:v,list:t,recordList:l,indexFilter:e=>{return i.data.findIndex(a=>a.name===e)},spaceFilter:p,isWin:m,winData:f,winLocation:c,videoSrc02:h,videoSrc01:T,handleWin:k,musicDom:x,musicId:j,handleMusic:a=>{j.value=a},handleMute:()=>{j.value=""}}}};Vue.createApp(App).mount("#app")</script></body></html>