added api connect, refactor styles

luckydiamond/src/assets/css/PagesStyles/jackpot-history.css

@@ -1,6 +1,5 @@
 .jackpot-history__content {
     display: flex;
-    flex-wrap: wrap;
     max-width: 80%;
     max-height: 800px;
     overflow-y: auto;
@@ -8,6 +7,9 @@
 }
 
 .jackpot-history__element {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
     margin: 15px;
 }
 

luckydiamond/src/assets/js/jackpot/JackpotLogic.js

@@ -85,3 +85,25 @@ export async function JoinJackpotGame(userData, amount) {
         console.log('Fetch error')
     }
 }
+
+export async function getJackpotHistoryGame () {
+    try {
+        const response = await fetch(`${BackendApiUrl}/GameJackpot/GetNewestJackpotGames`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            redirect: "follow"
+        })
+
+        if (!response.ok) {
+            console.log('Fetch error:', response.status)
+        }
+
+        console.log(response)
+        return await response.json()
+    }
+    catch (error) {
+        console.log('Fetch error')
+    }
+}

luckydiamond/src/pages/JackopthistoryPage.vue

@@ -8,44 +8,58 @@ t<template>
 
     <div class="jackpot-history">
       <div class="jackpot-history__content">
-<!--   TEMPLATE     -->
-
-        <div class="jackpot-history__element">
-          <div class="element-info">
-            <div class="element-info__icon">
-              <img src="@/assets/icons-test/user-icon-test.png">
+        <ul class="jackpot-history__element">
+          <li v-for="(game, index) in historyGame" :key="index">
+            <div class="jackpot-history__element">
+              <div class="element-info">
+                <div class="element-info__icon">
+                  <img :src="`https://avatar.spworlds.ru/face/55/${game.winnerUserName}`">
+                </div>
+                <div class="element-info__user-info">
+                  <h2 class="username">{{ game.winnerUserName }}</h2>
+                  <h2 class="user-deposit">
+                    {{ game.winStake }}
+                    <span class="img-width"><img src="@/assets/icons-profile/icon-diamond-ore.png"></span>
+                  </h2>
+                </div>
+              </div>
+              <div class="element-chance">
+                <h2>
+                  Шанс <span class="chance-style">{{ game.winnerPercentage.toFixed(2) }}%</span>
+                </h2>
+              </div>
             </div>
-            <div class="element-info__user-info">
-              <h2 class="username">FUpir</h2>
-              <h2 class="user-deposit">
-                1000
-                <span class="img-width"><img src="@/assets/icons-profile/icon-diamond-ore.png"></span>
-              </h2>
-            </div>
-          </div>
-          <div class="element-chance">
-            <h2>
-              Шанс <span class="chance-style">15.55%</span>
-            </h2>
-          </div>
-        </div>
-
-<!--   TEMPLATE     -->
+          </li>
+        </ul>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import { onMounted, reactive } from "vue";
+
 import ChatComponent from "@/components/ChatComponent.vue";
 import AsideBarElement from "@/components/AsidebarComponent.vue";
 import HeaderElementPage from "@/components/HeaderComponent.vue";
 
 import '@/assets/css/PagesStyles/jackpot-history.css'
+import {getJackpotHistoryGame} from "@/assets/js/jackpot/JackpotLogic";
 
 export default {
-  components: {HeaderElementPage, ChatComponent, AsideBarElement}
+  components: {HeaderElementPage, ChatComponent, AsideBarElement},
+  setup() {
+    let historyGame = reactive({})
 
+    onMounted(() => {
+      getJackpotHistoryGame()
+          .then(response => {
+            Object.assign(historyGame, response)
+          })
+    })
+
+    return { historyGame }
+  }
 }
 </script>