preparing user list object for red layer in double

This commit is contained in:
Hepatica
2024-04-06 19:15:15 +02:00
parent dace90acdf
commit 43c090693b

View File

@@ -121,13 +121,29 @@
</div> </div>
</div> </div>
<h1>fds</h1> <h1>fds</h1>
<div> <!-- <div> -->
<div v-for="user in users" :key="user.id" class="double-user-icon"> <!-- <div v-for="user in users" :key="user.id" class="double-user-icon">
<img :src="user.image" alt="User Icon" class="double-user-icon-img" /> <img :src="user.image" alt="User Icon" class="double-user-icon-img" />
<span class="double-user-name">{{ user.name }}</span> <span class="double-user-name">{{ user.name }}</span>
<span class="double-number-color">{{ user.amount }}</span>
</div> -->
<div v-for="user in users" :key="user.id" class="double-user-icon">
<img :src="user.image" alt="User Icon" class="double-user-icon-img" />
<span class="double-user-name">{{ user.name }}</span>
<span class="double-number-color">{{ user.amount }}</span> <span class="double-number-color">{{ user.amount }}</span>
</div> </div>
</div> <div class="double-ui-component">
<img src="path_to_your_avatar.png" alt="Avatar" width="40" height="40">
<div class="double-username">FUpir</div>
<div class="double-score">
500
<img src="path_to_your_coin.png" alt="Coin">
</div>
</div>
<!-- </div> -->
</div> </div>
</div> </div>
<div class="col-md-4" style="padding-left: 0px"> <div class="col-md-4" style="padding-left: 0px">
@@ -195,12 +211,13 @@ export default {
}, },
data() { data() {
return { return {
JackpotNumbers, JackpotNumbers
users: []
}; };
}, },
async created() {}, async created() {},
setup() { setup() {
const users = ref([]);
const slides = reactive([ const slides = reactive([
{ {
img: require("@/assets/icons-games/double-game/RectangleGreenDouble.png"), img: require("@/assets/icons-games/double-game/RectangleGreenDouble.png"),
@@ -257,7 +274,7 @@ export default {
onMounted(() => { onMounted(() => {
loadGameHistory(); loadGameHistory();
this.users = this.fetchUsers(); users.value = fetchUsers();
// if (slides.length == 0) { // if (slides.length == 0) {
// for (let i = 1; i < 29; i++) { // for (let i = 1; i < 29; i++) {
// if (i == 15 || i == 28) { // if (i == 15 || i == 28) {
@@ -368,6 +385,13 @@ export default {
targetColor.value = ""; targetColor.value = "";
} }
function fetchUsers() {
return [
{ id: 1, name: 'Alice', amount: 100, image: 'path/to/alice.png' },
{ id: 2, name: 'Bob', amount: 200, image: 'path/to/bob.png' },
];
}
return { return {
slides, slides,
slidesHistory, slidesHistory,
@@ -377,6 +401,7 @@ export default {
timeToGame, timeToGame,
handleStepCarousel, handleStepCarousel,
stopAutoPlay, stopAutoPlay,
users,
}; };
}, },
}; };