Skip to content

Commit 1080f99

Browse files
keillerakeillera
committed
Add a nft games ranking.
1 parent 83db550 commit 1080f99

File tree

17 files changed

+796
-216
lines changed

17 files changed

+796
-216
lines changed

‎app/components/atoms/TagInfo.vue‎

Lines changed: 230 additions & 125 deletions
Large diffs are not rendered by default.

‎app/components/organisms/BcgRanking.vue‎

Lines changed: 384 additions & 17 deletions
Large diffs are not rendered by default.

‎app/components/organisms/CategoryNotices.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
<template>
22
<div class="area-category-notices-container js-scrollable">
3-
<nuxt-link class="description" to="/campaigns">
4-
NFTもらえる一覧
3+
<nuxt-link class="description" to="/nft_games">
4+
👑NFTゲームランキング
55
</nuxt-link>
6-
<nuxt-link class="description" to="/esports">
7-
GameFi大会
6+
<nuxt-link class="description" to="/campaigns">
7+
🎁NFTもらえる一覧
88
</nuxt-link>
99
</div>
1010
</template>

‎app/components/pages/NewArticleList.vue‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
<template>
22
<div
33
class="new-article-list-container"
4-
:class="{ 'with-ranking': isWithRanking, 'with-ranking-notices': isWithRankingNotices }"
4+
:class="{ 'with-ranking': isWithRanking, 'with-notices': isWithNotices }"
55
>
66
<app-header />
77
<default-header-nav />
88
<category-notices v-if="$route.query.topic === 'game'" />
9-
<bcg-ranking-top v-if="$route.query.topic === 'game'" />
109
<coin-ranking-top v-if="$route.query.topic === 'crypto'" />
1110
<article-type-select-nav />
1211
<article-card-list :articles="newArticles" />
@@ -21,7 +20,6 @@ import AppHeader from '../organisms/AppHeader'
2120
import DefaultHeaderNav from '../molecules/DefaultHeaderNav'
2221
import CategoryNotices from '../organisms/CategoryNotices'
2322
import CoinRankingTop from '../organisms/CoinRankingTop'
24-
import BcgRankingTop from '../organisms/BcgRankingTop'
2523
import ArticleTypeSelectNav from '../organisms/ArticleTypeSelectNav'
2624
import ArticleCardList from '../organisms/ArticleCardList'
2725
import TheLoader from '../atoms/TheLoader'
@@ -34,14 +32,13 @@ export default {
3432
DefaultHeaderNav,
3533
CategoryNotices,
3634
CoinRankingTop,
37-
BcgRankingTop,
3835
ArticleTypeSelectNav,
3936
ArticleCardList,
4037
TheLoader,
4138
AppFooter
4239
},
4340
computed: {
44-
isWithRankingNotices() {
41+
isWithNotices() {
4542
return ['game'].includes(this.$route.query.topic)
4643
},
4744
isWithRanking() {
@@ -156,19 +153,18 @@ export default {
156153
grid-template-rows: 100px auto 84px minmax(0, 1fr) 75px 75px;
157154
min-height: 100vh;
158155
}
159-
.new-article-list-container.with-ranking-notices {
156+
.new-article-list-container.with-notices {
160157
/* prettier-ignore */
161158
grid-template-areas:
162159
"app-header app-header app-header "
163160
"nav nav nav "
164161
"... notices ... "
165-
"... ranking ... "
166162
"article-type-select-nav article-type-select-nav article-type-select-nav"
167163
"... ... ... "
168164
"... article-card-list ... "
169165
"... loader ... "
170166
"app-footer app-footer app-footer ";
171-
grid-template-rows: 100px auto 36px auto 49px 17.5px minmax(0, 1fr) 75px 75px;
167+
grid-template-rows: 100px auto 36px 49px 17.5px minmax(0, 1fr) 75px 75px;
172168
}
173169
174170
.new-article-list-container.with-ranking {

app/components/pages/BcgRanking.vue renamed to app/components/pages/NftGames.vue

Lines changed: 6 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,19 @@
11
<template>
22
<div class="bcg-ranking-container">
33
<app-header />
4-
<default-header-nav />
54
<bcg-ranking />
65
<app-footer />
76
</div>
87
</template>
98

109
<script>
1110
import AppHeader from '../organisms/AppHeader'
12-
import DefaultHeaderNav from '../molecules/DefaultHeaderNav'
1311
import BcgRanking from '../organisms/BcgRanking'
1412
import AppFooter from '../organisms/AppFooter'
1513
1614
export default {
1715
components: {
1816
AppHeader,
19-
DefaultHeaderNav,
2017
BcgRanking,
2118
AppFooter
2219
}
@@ -29,35 +26,29 @@ export default {
2926
/* prettier-ignore */
3027
grid-template-areas:
3128
"app-header app-header app-header "
32-
"nav nav nav "
3329
"... ranking ... "
3430
"app-footer app-footer app-footer ";
3531
grid-template-columns: minmax(0, 1fr) 1080px minmax(0, 1fr);
36-
grid-template-rows: 100px auto minmax(1080px, auto) 75px;
32+
grid-template-rows: 100px minmax(0, auto) 75px;
3733
min-height: 100vh;
3834
}
3935
4036
@media screen and (max-width: 1296px) {
4137
.bcg-ranking-container {
42-
grid-template-columns: minmax(0, 1fr) 710px minmax(0, 1fr);
38+
grid-template-columns: minmax(0, 1fr) 1080px minmax(0, 1fr);
4339
}
4440
}
4541
46-
@media screen and (max-width: 920px) {
42+
@media screen and (max-width: 1080px) {
4743
.bcg-ranking-container {
48-
grid-template-columns: minmax(0, 1fr) 340px minmax(0, 1fr);
44+
grid-template-columns: 32px minmax(0, 1fr) 32px;
4945
}
5046
}
5147
5248
@media screen and (max-width: 550px) {
5349
.bcg-ranking-container {
54-
grid-template-columns: minmax(0, 1fr) 340px minmax(0, 1fr);
55-
}
56-
}
57-
58-
@media screen and (max-width: 370px) {
59-
.bcg-ranking-container {
60-
grid-template-columns: 10px minmax(0, 1fr) 10px;
50+
grid-template-columns: 0 minmax(0, 1fr) 0;
51+
grid-template-rows: 100px minmax(0, auto) min-content;
6152
}
6253
}
6354
</style>

‎app/components/pages/PopularArticleList.vue‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
<template>
22
<div
33
class="popular-article-list-container"
4-
:class="{ 'with-ranking': isWithRanking, 'with-ranking-notices': isWithRankingNotices }"
4+
:class="{ 'with-ranking': isWithRanking, 'with-notices': isWithNotices }"
55
>
66
<app-header />
77
<default-header-nav />
88
<category-notices v-if="$route.query.topic === 'game'" />
9-
<bcg-ranking-top v-if="$route.query.topic === 'game'" />
109
<coin-ranking-top v-if="$route.query.topic === 'crypto'" />
1110
<article-type-select-nav />
1211
<article-card-list :articles="popularArticles" />
@@ -21,7 +20,6 @@ import AppHeader from '../organisms/AppHeader'
2120
import DefaultHeaderNav from '../molecules/DefaultHeaderNav'
2221
import CategoryNotices from '../organisms/CategoryNotices'
2322
import CoinRankingTop from '../organisms/CoinRankingTop'
24-
import BcgRankingTop from '../organisms/BcgRankingTop'
2523
import ArticleTypeSelectNav from '../organisms/ArticleTypeSelectNav'
2624
import ArticleCardList from '../organisms/ArticleCardList'
2725
import TheLoader from '../atoms/TheLoader'
@@ -34,7 +32,6 @@ export default {
3432
DefaultHeaderNav,
3533
CategoryNotices,
3634
CoinRankingTop,
37-
BcgRankingTop,
3835
ArticleTypeSelectNav,
3936
ArticleCardList,
4037
TheLoader,
@@ -48,7 +45,7 @@ export default {
4845
}
4946
},
5047
computed: {
51-
isWithRankingNotices() {
48+
isWithNotices() {
5249
return ['game'].includes(this.$route.query.topic)
5350
},
5451
isWithRanking() {
@@ -157,19 +154,18 @@ export default {
157154
min-height: 100vh;
158155
}
159156
160-
.popular-article-list-container.with-ranking-notices {
157+
.popular-article-list-container.with-notices {
161158
/* prettier-ignore */
162159
grid-template-areas:
163160
"app-header app-header app-header "
164161
"nav nav nav "
165162
"... notices ... "
166-
"... ranking ... "
167163
"article-type-select-nav article-type-select-nav article-type-select-nav"
168164
"... ... ... "
169165
"... article-card-list ... "
170166
"... loader ... "
171167
"app-footer app-footer app-footer ";
172-
grid-template-rows: 100px auto 36px auto 49px 17.5px minmax(0, 1fr) 75px 75px;
168+
grid-template-rows: 100px auto 36px 49px 17.5px minmax(0, 1fr) 75px 75px;
173169
}
174170
175171
.popular-article-list-container.with-ranking {

‎app/components/pages/TagArticleList.vue‎

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@
22
<div
33
class="tag-article-list"
44
:class="{
5-
'defined-tag': definedTag,
5+
'defined-game': isDefinedGame,
66
'defined-tag-background': definedTag && definedTag.backgroundUrl
77
}"
88
:style="tagStyle"
99
>
1010
<app-header />
11-
<tag-info v-if="definedTag" :tagInfo="definedTag" />
11+
<tag-info v-if="isDefinedGame" :tagInfo="definedTag" />
1212
<div v-else-if="isNFTOwner" class="area-tag">
1313
{{ $route.params.tag }}
1414
<p class="tag-description">
@@ -18,8 +18,9 @@
1818
<div v-else class="area-tag">
1919
{{ $route.params.tag }}
2020
</div>
21-
<div class="area-nav">
22-
<span class="nav-content">
21+
<div class="area-nav" :class="{ 'defined-game': isDefinedGame }">
22+
<item-label v-if="isDefinedGame" :labelName="`新着記事`" :addLink="``" :addText="``" />
23+
<span v-else class="nav-content">
2324
新着記事
2425
</span>
2526
</div>
@@ -39,6 +40,7 @@ import { mapGetters, mapActions } from 'vuex'
3940
import AppHeader from '../organisms/AppHeader'
4041
import SearchArticleCardList from '../organisms/SearchArticleCardList'
4142
import TagInfo from '../atoms/TagInfo'
43+
import ItemLabel from '../atoms/ItemLabel'
4244
import TheLoader from '../atoms/TheLoader'
4345
import AppFooter from '../organisms/AppFooter'
4446
import { isPageScrollable, isScrollBottom } from '~/utils/client'
@@ -47,6 +49,7 @@ export default {
4749
components: {
4850
AppHeader,
4951
TagInfo,
52+
ItemLabel,
5053
SearchArticleCardList,
5154
TheLoader,
5255
AppFooter
@@ -61,6 +64,9 @@ export default {
6164
definedTag() {
6265
return this.eventsInfo.find((definedTag) => definedTag.key === this.$route.params.tag)
6366
},
67+
isDefinedGame() {
68+
return Object.keys(this.nftGameInfo).length > 0
69+
},
6470
isNFTOwner() {
6571
return this.$route.params.tag === 'NFTオーナー'
6672
},
@@ -73,7 +79,8 @@ export default {
7379
return null
7480
},
7581
...mapGetters('article', ['tagArticles', 'eventsInfo']),
76-
...mapGetters('presentation', ['tagArticlesScrollHeight'])
82+
...mapGetters('presentation', ['tagArticlesScrollHeight']),
83+
...mapGetters('nftGames', ['nftGameInfo'])
7784
},
7885
mounted() {
7986
window.addEventListener('scroll', this.infiniteScroll)
@@ -153,8 +160,8 @@ export default {
153160
"... loader ... "
154161
"app-footer app-footer app-footer";
155162
min-height: 100vh;
156-
&.defined-tag {
157-
grid-template-rows: 100px 200px 26px minmax(0, 1fr) 75px 75px;
163+
&.defined-game {
164+
grid-template-rows: 100px auto 26px minmax(0, 1fr) 75px 75px;
158165
}
159166
&.defined-tag-background {
160167
background: var(--background);
@@ -180,6 +187,10 @@ export default {
180187
grid-template-areas:
181188
'nav-content ...';
182189
border-bottom: 1px solid #f0f0f0;
190+
&.defined-game {
191+
margin-top: 6px;
192+
border-bottom: 0;
193+
}
183194
184195
.nav-content {
185196
grid-area: nav-content;
@@ -202,8 +213,8 @@ export default {
202213
@media screen and (max-width: 920px) {
203214
.tag-article-list {
204215
grid-template-columns: minmax(0, 1fr) 340px minmax(0, 1fr);
205-
&.defined-tag {
206-
grid-template-rows: 100px 245px 26px minmax(0, 1fr) 75px 75px;
216+
&.defined-game {
217+
grid-template-rows: 100px auto 26px minmax(0, 1fr) 75px 75px;
207218
}
208219
&.defined-tag-background {
209220
background: none;
@@ -214,8 +225,8 @@ export default {
214225
@media screen and (max-width: 640px) {
215226
.tag-article-list {
216227
grid-template-rows: 100px 40px 26px minmax(0, 1fr) 75px min-content;
217-
&.defined-tag {
218-
grid-template-rows: 100px 245px 26px minmax(0, 1fr) 75px min-content;
228+
&.defined-game {
229+
grid-template-rows: 100px auto 26px minmax(0, 1fr) 75px min-content;
219230
}
220231
}
221232
}

‎app/pages/category/game/bcg_ranking.vue‎

Lines changed: 0 additions & 28 deletions
This file was deleted.

‎app/pages/nft_games/index.vue‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<template>
2+
<nft-games />
3+
</template>
4+
5+
<script>
6+
import NftGames from '~/components/pages/NftGames'
7+
8+
export default {
9+
components: {
10+
NftGames
11+
},
12+
head: {
13+
title: 'NFTゲーム-ランキング',
14+
link: [{
15+
rel: 'stylesheet',
16+
href: 'https://unpkg.com/vue-easytable/libs/theme-default/index.css'
17+
}],
18+
meta: [
19+
{
20+
hid: 'og:title',
21+
property: 'og:title',
22+
content: 'NFTゲーム-ランキング | ALIS'
23+
},
24+
{
25+
hid: 'og:description',
26+
property: 'og:description',
27+
content: 'NFTゲーム-ランキング'
28+
}
29+
]
30+
}
31+
}
32+
</script>

‎app/pages/tag/_tag.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export default {
3131
3232
try {
3333
await store.dispatch('article/getTagArticles', { tag })
34+
await store.dispatch('nftGames/getNftGameInfo', { tag })
3435
} catch (e) {
3536
error({ statusCode: 500 })
3637
}

0 commit comments

Comments
 (0)