From 66af95b9e2652042b1895813cc4fb33eacb26a1b Mon Sep 17 00:00:00 2001
From: Kostya <ckutls228@gmail.com>
Date: Sun, 7 Apr 2024 19:47:30 +0300
Subject: [PATCH] added normal version for game history

---
 .../css/PagesStyles/jackpot-history.css       | 67 ++++++++++++++++++
 luckydiamond/src/pages/JackopthistoryPage.vue | 70 +++++++++++++++++++
 2 files changed, 137 insertions(+)
 create mode 100644 luckydiamond/src/assets/css/PagesStyles/jackpot-history.css
 create mode 100644 luckydiamond/src/pages/JackopthistoryPage.vue

diff --git a/luckydiamond/src/assets/css/PagesStyles/jackpot-history.css b/luckydiamond/src/assets/css/PagesStyles/jackpot-history.css
new file mode 100644
index 0000000..221dc06
--- /dev/null
+++ b/luckydiamond/src/assets/css/PagesStyles/jackpot-history.css
@@ -0,0 +1,67 @@
+.jackpot-history__content {
+    display: flex;
+    max-height: 800px;
+    overflow-y: auto;
+    margin: 0 auto;
+}
+
+.jackpot-history__element {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    margin: 15px;
+}
+
+.abc {
+
+}
+
+.element-info {
+    display: flex;
+    align-items: center;
+}
+
+.element-info .element-info__icon img {
+    height: 50px;
+}
+
+.element-info .element-info__user-info {
+    margin-left: 4px;
+}
+
+.element-info .element-info__user-info .username {
+    color: #515D83;
+    font-family: 'Montserrat';
+    font-weight: 700;
+    font-size: 20px;
+}
+
+.element-info .element-info__user-info .user-deposit {
+    font-family: 'Montserrat';
+    font-weight: 700;
+    font-size: 20px;
+
+}
+
+.element-info .element-info__user-info .img-width img {
+    width: 16px;
+    height: 16px;
+}
+
+.element-chance {
+    margin-top: 10px;
+}
+
+.element-chance h2 {
+    font-family: 'Montserrat';
+    font-weight: 700;
+    font-size: 18px;
+    text-align: center;
+    background: #27345C;
+    border-radius: 7px;
+}
+
+.element-chance .chance-style {
+    color: #EF4444;
+    margin-left: 2px;
+}
\ No newline at end of file
diff --git a/luckydiamond/src/pages/JackopthistoryPage.vue b/luckydiamond/src/pages/JackopthistoryPage.vue
new file mode 100644
index 0000000..0280b99
--- /dev/null
+++ b/luckydiamond/src/pages/JackopthistoryPage.vue
@@ -0,0 +1,70 @@
+t<template>
+  <div class="jackpot-history__content-grid">
+    <aside-bar-element/>
+
+    <chat-component/>
+
+    <header-element-page/>
+
+    <div class="jackpot-history">
+      <div class="jackpot-history__content">
+        <ul class="jackpot-history__element">
+          <li v-for="(game, index) in historyGame" :key="index">
+            <div class="abc">
+              <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.toFixed(2) }}
+                      <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>
+          </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},
+  setup() {
+    let historyGame = reactive({})
+
+    onMounted(() => {
+      getJackpotHistoryGame()
+          .then(response => {
+            Object.assign(historyGame, response)
+          })
+    })
+
+    return { historyGame }
+  }
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file