171 lines
4.5 KiB
Vue
171 lines
4.5 KiB
Vue
<template>
|
|
<div class="inspirationDiv">
|
|
<div class="inspirationHeader">
|
|
<div class="inspirationTitle">
|
|
<h1>Inspiration</h1>
|
|
</div>
|
|
<div class="searchInput">
|
|
<input
|
|
v-model="searchInputText"
|
|
type="text"
|
|
@input="searchGame()"
|
|
ref="inputField"
|
|
/>
|
|
</div>
|
|
<button @click="clearSearch()">Clear</button>
|
|
</div>
|
|
<transition-group
|
|
tag="ul"
|
|
name="inspirationList"
|
|
class="inspirationList"
|
|
ref="inspirationList"
|
|
>
|
|
<li v-for="game in showingGamesList" class="inspirationEntry" :key="game">
|
|
{{ game }}
|
|
</li>
|
|
</transition-group>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import arne from '../../arne.js'
|
|
import {mapState} from "vuex";
|
|
export default {
|
|
data() {
|
|
return {
|
|
allGamesList: [],
|
|
showingGamesList: [],
|
|
scrollDown: true,
|
|
searchInputText: "",
|
|
};
|
|
},
|
|
computed: {
|
|
...mapState(["reloadGamesList"]),
|
|
},
|
|
watch: {
|
|
reloadGamesList(newValue) {
|
|
if (newValue) {
|
|
this.reloadGames();
|
|
this.$store.dispatch("reloadGamesList", false);
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
clearSearch() {
|
|
this.searchInputText = "";
|
|
this.searchGame();
|
|
},
|
|
searchGame() {
|
|
this.showingGamesList = [];
|
|
for (const game of this.allGamesList) {
|
|
if (this.searchInputText === "" ||
|
|
game.toLowerCase().replace(/\s/g, "")
|
|
.includes(this.searchInputText.toLowerCase().replace(/\s/g, ""))) {
|
|
this.showingGamesList.push(game);
|
|
}
|
|
}
|
|
if (this.searchInputText.replace(/\s/g, "") !== "") {
|
|
this.showingGamesList.sort((n1, n2) => {
|
|
if (n1 > n2) {
|
|
return 1;
|
|
}
|
|
if (n1 < n2) {
|
|
return -1;
|
|
}
|
|
return 0;
|
|
});
|
|
}
|
|
},
|
|
scrollInspiration() {
|
|
let inspirationListDOM = document.querySelector(".inspirationList");
|
|
let scrollSpeed = 1;
|
|
let currentScrollLocation = 0;
|
|
|
|
currentScrollLocation = inspirationListDOM.scrollTop;
|
|
this.scrollDown
|
|
? inspirationListDOM.scrollBy(0, scrollSpeed)
|
|
: inspirationListDOM.scrollBy(0, -scrollSpeed);
|
|
|
|
if (currentScrollLocation === inspirationListDOM.scrollTop) {
|
|
this.scrollDown = !this.scrollDown;
|
|
}
|
|
},
|
|
reloadGames() {
|
|
this.axios({
|
|
method: "get",
|
|
url: `${arne.hostname}/music/all`,
|
|
})
|
|
.then((response) => {
|
|
this.allGamesList = response.data;
|
|
this.searchInputText = "";
|
|
this.searchGame();
|
|
this.$store.dispatch("updateHowManyGames", this.allGamesList.length);
|
|
})
|
|
.catch(function(error) {
|
|
console.log(error);
|
|
});
|
|
}
|
|
},
|
|
mounted() {
|
|
this.reloadGames();
|
|
window.setInterval(() => {
|
|
this.scrollInspiration();
|
|
}, 40);
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.inspirationDiv {
|
|
width: 38vw;
|
|
height: 20vh;
|
|
color: white;
|
|
}
|
|
|
|
.inspirationTitle {
|
|
display: flex;
|
|
flex: auto;
|
|
align-items: flex-start;
|
|
justify-content: flex-start;
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
.searchInput {
|
|
display: flex;
|
|
flex: auto;
|
|
align-items: flex-end;
|
|
justify-content: flex-end;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.inspirationHeader {
|
|
display: flex;
|
|
background-color: #333;
|
|
height: 5vh;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.inspirationList {
|
|
display: inline-block;
|
|
background-color: rgb(66, 66, 66);
|
|
width: 38vw;
|
|
height: 22vh;
|
|
list-style: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.inspirationEntry {
|
|
width: 100%;
|
|
max-width: 38vw;
|
|
padding: 0.3vh 0.8vh;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
@media only screen and (max-width: 1000px) {
|
|
.inspirationDiv {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|