Mirrors/gamebrary
2
0
Fork 0
mirror of https://github.com/romancm/gamebrary synced 2024-11-23 19:53:14 +00:00
Code Issues Projects Releases Packages Wiki Activity

game backrop placeholder and scroll to top on route change

Browse source
This commit is contained in:
Gamebrary 2021-09-24 07:15:55 -07:00
parent a86eaeb813
commit 2e9ebd2020
1 changed files with 32 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/pages/GamePage.vue
View file

@ -1,13 +1,16 @@
<template lang="html">
<div class="mt-3">
<div class="pt-3 game-page" ref="gamePage">
<!-- TODO: add -->
<!-- <b-button>Back to board</b-button> -->
<game :game="game" :loading="loading" />
<div class="game-backdrop" :style="`background-image: url(${backdropUrl})`" />
</div>
</template>
<script>
import Game from '@/components/Game';
import { mapState } from 'vuex';
export default {
components: {
@ -22,13 +25,25 @@ export default {
},
computed: {
...mapState(['board']),
gameId() {
return this.$route.params.gameId;
},
backdropUrl() {
const screenshots = this.game && this.game.screenshots;
return screenshots && screenshots.length
? `https://images.igdb.com/igdb/image/upload/t_screenshot_huge_2x/${screenshots[0].image_id}.jpg`
: '';
},
},
watch: {
gameId(gameId) {
document.getElementsByTagName('main')[0].scrollTop = 0;
if (gameId) this.loadGame();
// TODO: handle missing id, redirect? 404? search?
},
@ -57,4 +72,20 @@ export default {
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.game-page {
z-index: 1;
// position: fixed;
}
.game-backdrop {
width: 100%;
height: 100vw;
// position: fixed;
// top: 0;
backdrop-filter: grayscale(0.5) opacity(0.8) /* ...and on and on... */;
background-repeat: no-repeat;
background-size: contain;
// opacity: 0.1;
z-index: 0;
}
</style>