mirror of
https://github.com/yawaflua/LuckyDiamond.git
synced 2025-12-10 04:09:29 +02:00
Merge branch 'main' into DevelopMadara
This commit is contained in:
Hepatica
@@ -191,4 +191,4 @@
|
||||
|
||||
.mention-message {
|
||||
background-color: rgb(169, 113, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,13 +1,3 @@
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.payment-modal {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
|
||||
442
luckydiamond/src/assets/css/PagesStyles/games-pages/crash.css
Normal file
442
luckydiamond/src/assets/css/PagesStyles/games-pages/crash.css
Normal file
@@ -0,0 +1,442 @@
|
||||
.crash-content {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
grid-template-rows: repeat(5, 1fr);
|
||||
gap: 0.625rem; /* 10px в рем */
|
||||
grid-auto-flow: row;
|
||||
grid-template-areas:
|
||||
"crashgame crashgame crashgame crashgame crashgame crashgame"
|
||||
"crashgame crashgame crashgame crashgame crashgame crashgame"
|
||||
"crashgame crashgame crashgame crashgame crashgame crashgame"
|
||||
"crashplayers crashplayers crashplayers crashplayers crashplayers crashplayers"
|
||||
"crashplayers crashplayers crashplayers crashplayers crashplayers crashplayers";
|
||||
background: #17181C;
|
||||
box-shadow: 0 0.25rem #00000040;
|
||||
border-radius: 1.25rem;
|
||||
|
||||
.grid-crash .chat {
|
||||
height: 96.8%;
|
||||
}
|
||||
|
||||
.crash-game {
|
||||
background: #22252F;
|
||||
border-radius: 1.25rem;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0px #00000040;
|
||||
width: 95%;
|
||||
height: 29.6875rem;
|
||||
margin: 2.5625rem auto 0 auto;
|
||||
}
|
||||
|
||||
.crash-game__content {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* Crash-Window */
|
||||
|
||||
.crash-game__start-window {
|
||||
margin-left: 30px;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.crash-game__start-window .crash__game-name {
|
||||
margin: 62px 0 2px 0;
|
||||
font-family: 'Montserrat Alternates';
|
||||
font-weight: 700;
|
||||
font-size: 26px;
|
||||
color: #fff;
|
||||
box-shadow: 1px 1px 1px 0px #00000001;
|
||||
}
|
||||
|
||||
.crash-game__start-window p {
|
||||
font-family: 'Montserrat Alternates';
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF85;
|
||||
}
|
||||
|
||||
.crash-game-window__inputs {
|
||||
margin-top: 29px;
|
||||
}
|
||||
|
||||
.crash-label {
|
||||
font-family: 'Montserrat Alternates';
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
color: #44C6EF54;
|
||||
margin: 0 0 4px 4px;
|
||||
}
|
||||
|
||||
.input-style-crash {
|
||||
width: 347px;
|
||||
height: 40px;
|
||||
border: 2px solid #2B3458;
|
||||
border-radius: 15px;
|
||||
background: #22252F;
|
||||
}
|
||||
|
||||
.diamond-input-crash {
|
||||
margin-left: -25px;
|
||||
}
|
||||
|
||||
.input-style-crash__text {
|
||||
font-family: 'Montserrat Alternates';
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
padding-left: 35px;
|
||||
}
|
||||
|
||||
.crash-input-deposit .diamonds-btns__display {
|
||||
margin: 8px 0 19px -22px;
|
||||
}
|
||||
|
||||
.crash-input-deposit #max-button {
|
||||
padding: 4px 10px;
|
||||
}
|
||||
|
||||
.crash-input-deposit .diamond-icon {
|
||||
left: 12px;
|
||||
}
|
||||
|
||||
.crash-game-window__btn-start {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 23px;
|
||||
}
|
||||
|
||||
.crash-game-window__btn-start button {
|
||||
margin-bottom: 5px;
|
||||
background: #EF4444;
|
||||
border: unset;
|
||||
border-radius: 10px;
|
||||
width: 300px;
|
||||
height: 60px;
|
||||
font-family: 'Inter';
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.claim-btn-crash__prize {
|
||||
background: #4E5EF2 !important;
|
||||
}
|
||||
|
||||
.waiting-btn-crash {
|
||||
background: #3D3F48 !important;
|
||||
}
|
||||
|
||||
.crash-window__line {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.line-crash {
|
||||
width: 2px;
|
||||
height: 474px;
|
||||
background: #30364F;
|
||||
position: relative;
|
||||
top: -342px;
|
||||
left: 10%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.crash-game__content .error-block {
|
||||
top: 425px;
|
||||
}
|
||||
|
||||
/* /Crash-Window */
|
||||
|
||||
/* Crash-Graph */
|
||||
|
||||
.crash-game__graph {
|
||||
width: 800px;
|
||||
top: 200px;
|
||||
left: 600px;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
|
||||
.chart-container canvas {
|
||||
background-color: transparent !important;
|
||||
width: 800px !important;
|
||||
height: 400px !important;
|
||||
transition: .3s ease;
|
||||
}
|
||||
|
||||
.lost-ratio {
|
||||
color: #EF4444;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* /Crash-Graph */
|
||||
|
||||
/* Crash-Players */
|
||||
|
||||
.user-crash {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
margin-left: 400px;
|
||||
}
|
||||
|
||||
.user-list {
|
||||
overflow-y: auto;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.user-crash-content {
|
||||
background: linear-gradient(90deg, rgba(34, 37, 47, 0.8) -0.54%, rgba(34, 37, 47, 0.8) 83.03%, rgba(73, 59, 74, 0.64) 103.54%);
|
||||
display: grid;
|
||||
justify-content: space-between;
|
||||
grid-template-columns: repeat(5, 50px) 100px;
|
||||
gap: 0px 0px;
|
||||
grid-auto-flow: row;
|
||||
grid-template-areas:
|
||||
"username username bid bid ... status";
|
||||
margin: 10px auto;
|
||||
width: 90%;
|
||||
height: 70px;
|
||||
border-radius: 18px;
|
||||
}
|
||||
|
||||
.user-crash-content__lose {
|
||||
background: linear-gradient(90deg, #22252F -0.54%, #322733 83.25%, #B53938 103.54%) !important;
|
||||
}
|
||||
|
||||
.user-crash-content__win {
|
||||
background: linear-gradient(90deg, #22252F -0.54%, #22252F 84.17%, rgba(42, 110, 57, 0.87) 103.54%);
|
||||
}
|
||||
|
||||
.user-name-crash {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 10px;
|
||||
grid: 'username';
|
||||
}
|
||||
|
||||
.user-name-crash h2 {
|
||||
margin-left: 8px;
|
||||
color: #61647F;
|
||||
font-family: 'Montserrat';
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.user-name-crash img {
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.user-bid-crash {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
grid-area: bid;
|
||||
}
|
||||
|
||||
.user-bid-crash h2 {
|
||||
color: #848484;
|
||||
font-weight: 700;
|
||||
font-family: 'Montserrat';
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.user-bid-crash img {
|
||||
margin: 5px 0 0 5px;
|
||||
}
|
||||
|
||||
.user-game-status-crash {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
grid-area: status;
|
||||
}
|
||||
|
||||
.user-game-status-crash h2 {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.wingame__win-bid-crash {
|
||||
color: #28BD49 !important;
|
||||
}
|
||||
|
||||
.ingame-crash {
|
||||
color: #61647F;
|
||||
font-family: 'Montserrat';
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
background: #22252F;
|
||||
box-shadow: 0px 4px 4px 0px #00000040;
|
||||
border-radius: 5px;
|
||||
width: 70px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.lostgame-crash {
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
font-family: 'Montserrat';
|
||||
background: #EF4847;
|
||||
box-shadow: 0px 4px 4px 0px #00000040;
|
||||
border-radius: 5px;
|
||||
margin-left: -26px;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.wingame-crash {
|
||||
box-shadow: 0px 4px 4px 0px #00000040;
|
||||
font-family: 'Montserrat';
|
||||
font-weight: 700;
|
||||
color: #28BD49;
|
||||
border: 1px solid #28BD49;
|
||||
border-radius: 5px;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.ratio {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: -390px;
|
||||
font-size: 34px;
|
||||
font-weight: 700;
|
||||
font-family: 'Montserrat';
|
||||
}
|
||||
|
||||
.time {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
font-size: 34px;
|
||||
font-weight: 700;
|
||||
font-family: 'Montserrat';
|
||||
}
|
||||
|
||||
/* /Crash-Players */
|
||||
|
||||
/* Notification */
|
||||
|
||||
.notification-crash {
|
||||
text-align: center;
|
||||
top: 20%;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
background: #000;
|
||||
width: 200px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
/* /Notification */
|
||||
|
||||
/* Media */
|
||||
|
||||
@media screen and (max-width: 1740px) and (min-width: 1400px) {
|
||||
.crash-game__content .error-block{
|
||||
top: 407px !important;
|
||||
}
|
||||
.crash-game__graph {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
top: 190px;
|
||||
left: 570px;
|
||||
}
|
||||
.crash-input-deposit .btn-style__diamonds button {
|
||||
padding: 4px 18px !important;
|
||||
}
|
||||
.chart-container {
|
||||
width: 500px !important;
|
||||
height: 500px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1400px) and (min-width: 1200px) {
|
||||
.header__nav nav a {
|
||||
font-size: 16px;
|
||||
}
|
||||
.crash-game__content .error-block{
|
||||
top: 405px !important;
|
||||
}
|
||||
.crash-game__graph {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
top: 180px;
|
||||
left: 550px;
|
||||
}
|
||||
.chart-container {
|
||||
width: 400px !important;
|
||||
height: 400px !important;
|
||||
}
|
||||
.crash-input-deposit .btn-style__diamonds button {
|
||||
padding: 4px 18px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 950px) and (min-height: 915px) {
|
||||
.grid-crash .chat {
|
||||
height: 92.5%;
|
||||
}
|
||||
.crash-game__players {
|
||||
height: 270px;
|
||||
}
|
||||
.crash-game-players__content {
|
||||
height: 230px;
|
||||
}
|
||||
.ratio {
|
||||
top: -380px;
|
||||
}
|
||||
.time {
|
||||
left: 45%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-height: 915px) and (min-height: 890px) {
|
||||
.grid-crash .chat {
|
||||
height: 100%;
|
||||
}
|
||||
.chat__content--users {
|
||||
height: 58vh;
|
||||
}
|
||||
.crash-game {
|
||||
height: 40vh;
|
||||
}
|
||||
.crash-game__players {
|
||||
height: 290px;
|
||||
}
|
||||
.crash-game-players__content {
|
||||
height: 250px;
|
||||
}
|
||||
.crash-game__graph {
|
||||
height: 100px !important;
|
||||
top: 200px;
|
||||
}
|
||||
#line-chart {
|
||||
height: 300px !important;
|
||||
}
|
||||
.ratio {
|
||||
top: -320px;
|
||||
}
|
||||
.time {
|
||||
left: 40%;
|
||||
}
|
||||
.line-crash {
|
||||
height: 366px;
|
||||
}
|
||||
}}
|
||||
|
||||
@media screen and (min-height: 950px) {
|
||||
.chat {
|
||||
height: 88vh !important;
|
||||
}
|
||||
}
|
||||
|
||||
/*.crash-game__graph {*/
|
||||
/* width: 800px;*/
|
||||
/* top: 200px;*/
|
||||
/* left: 600px;*/
|
||||
/* position: fixed;*/
|
||||
/*}*/
|
||||
|
||||
|
||||
/*.chart-container canvas {*/
|
||||
/* background-color: transparent !important;*/
|
||||
/* width: 800px !important;*/
|
||||
/* height: 400px !important;*/
|
||||
/* transition: .3s ease;*/
|
||||
/*}*/
|
||||
|
||||
/* /Media */
|
||||
@@ -1,17 +1,3 @@
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.saper {
|
||||
display: flex;
|
||||
padding-top: 10%;
|
||||
@@ -190,7 +176,7 @@ input[type="number"]::-webkit-outer-spin-button {
|
||||
font-family: Inter;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
padding: 4px 15px;
|
||||
padding: 4px 13px;
|
||||
}
|
||||
|
||||
.saper-start__btns {
|
||||
@@ -253,7 +239,7 @@ input[type="number"]::-webkit-outer-spin-button {
|
||||
|
||||
.error-block {
|
||||
position: absolute;
|
||||
top: 440px;
|
||||
top: 445px;
|
||||
}
|
||||
|
||||
.error-block h2 {
|
||||
@@ -483,7 +469,9 @@ input[type="number"]::-webkit-outer-spin-button {
|
||||
.saper-game__content {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.error-block {
|
||||
top: 425px;
|
||||
}
|
||||
.saper-start {
|
||||
width: 30%;
|
||||
height: 500px;
|
||||
@@ -562,7 +550,9 @@ input[type="number"]::-webkit-outer-spin-button {
|
||||
.bg-two {
|
||||
left: 300px;
|
||||
}
|
||||
|
||||
.error-block {
|
||||
top: 410px;
|
||||
}
|
||||
.saper-game__content {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
@@ -377,4 +377,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* /Media */
|
||||
@media screen and (min-height: 910px) {
|
||||
.chat {
|
||||
height: 87vh !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* /Media */
|
||||
|
||||
@@ -11,68 +11,120 @@ ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
body, html {
|
||||
body,
|
||||
html {
|
||||
background: #121212;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* /Global Settings */
|
||||
|
||||
/* Content Grid */
|
||||
|
||||
.content-grid {
|
||||
display: grid;
|
||||
grid-template-columns: .35fr repeat(5, 1fr) 1fr;
|
||||
grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
|
||||
grid-template-rows: auto 0fr repeat(4, 1fr);
|
||||
grid-auto-columns: 1fr;
|
||||
grid-auto-flow: row;
|
||||
grid-template-areas:
|
||||
"menu header header header header header header"
|
||||
"menu main main main main main chat"
|
||||
"menu main main main main main chat"
|
||||
"menu gamemode gamemode gamemode gamemode gamemode chat"
|
||||
"menu gamemode gamemode gamemode gamemode gamemode chat"
|
||||
"menu gamemode gamemode gamemode gamemode gamemode chat";
|
||||
"menu header header header header header header"
|
||||
"menu main main main main main chat"
|
||||
"menu main main main main main chat"
|
||||
"menu gamemode gamemode gamemode gamemode gamemode chat"
|
||||
"menu gamemode gamemode gamemode gamemode gamemode chat"
|
||||
"menu gamemode gamemode gamemode gamemode gamemode chat";
|
||||
height: 100%;
|
||||
grid-gap: 10px;
|
||||
grid-gap: 0.625rem;
|
||||
}
|
||||
|
||||
.content__grid-profile {
|
||||
display: grid;
|
||||
grid-template-columns: .35fr repeat(5, 1fr) 1fr;
|
||||
grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
|
||||
grid-template-rows: auto 0fr repeat(4, 1fr);
|
||||
grid-auto-columns: 1fr;
|
||||
grid-auto-flow: row;
|
||||
grid-template-areas:
|
||||
"menu header header header header header header"
|
||||
"menu profile profile profile profile profile chat"
|
||||
"menu profile profile profile profile profile chat"
|
||||
"menu profile profile profile profile profile chat"
|
||||
"menu profile profile profile profile profile chat"
|
||||
"menu profile profile profile profile profile chat"
|
||||
"menu profile profile profile profile profile chat";
|
||||
grid-gap: 10px;
|
||||
"menu header header header header header header"
|
||||
"menu profile profile profile profile profile chat"
|
||||
"menu profile profile profile profile profile chat"
|
||||
"menu profile profile profile profile profile chat"
|
||||
"menu profile profile profile profile profile chat"
|
||||
"menu profile profile profile profile profile chat"
|
||||
"menu profile profile profile profile profile chat"
|
||||
"menu profile profile profile profile profile chat";
|
||||
grid-gap: 0.625rem;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.content-grid--saper {
|
||||
display: grid;
|
||||
grid-auto-columns: 1fr;
|
||||
grid-template-columns: .35fr repeat(5, 1fr) 1fr;
|
||||
grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
|
||||
grid-template-rows: auto 0fr repeat(4, 1fr);
|
||||
grid-template-areas:
|
||||
"menu header header header header header header"
|
||||
"menu saper saper saper saper saper chat"
|
||||
"menu saper saper saper saper saper chat"
|
||||
"menu saper saper saper saper saper chat"
|
||||
"menu saper saper saper saper saper chat"
|
||||
"menu saper saper saper saper saper chat"
|
||||
"menu saper saper saper saper saper chat";
|
||||
grid-gap: 10px;
|
||||
"menu header header header header header header"
|
||||
"menu saper saper saper saper saper chat"
|
||||
"menu saper saper saper saper saper chat"
|
||||
"menu saper saper saper saper saper chat"
|
||||
"menu saper saper saper saper saper chat"
|
||||
"menu saper saper saper saper saper chat"
|
||||
"menu saper saper saper saper saper chat";
|
||||
grid-gap: 0.625rem;
|
||||
}
|
||||
|
||||
.content-grid--jackpot {
|
||||
display: grid;
|
||||
grid-auto-columns: 1fr;
|
||||
grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
|
||||
grid-template-rows: auto 0fr repeat(4, 1fr);
|
||||
grid-template-areas:
|
||||
"menu header header header header header header"
|
||||
"menu jackpot jackpot jackpot jackpot jackpot chat"
|
||||
"menu jackpot jackpot jackpot jackpot jackpot chat"
|
||||
"menu jackpot jackpot jackpot jackpot jackpot chat"
|
||||
"menu jackpot jackpot jackpot jackpot jackpot chat"
|
||||
"menu jackpot jackpot jackpot jackpot jackpot chat"
|
||||
"menu jackpot jackpot jackpot jackpot jackpot chat";
|
||||
grid-gap: 0.625rem;
|
||||
}
|
||||
|
||||
.grid-crash {
|
||||
display: grid;
|
||||
grid-template-columns: 0.35fr repeat(5, 1fr) 1fr;
|
||||
grid-template-rows: auto 0fr repeat(4, 1fr);
|
||||
grid-auto-columns: 1fr;
|
||||
gap: 0.625rem;
|
||||
grid-auto-flow: row;
|
||||
grid-template-areas:
|
||||
"menu header header header header header header"
|
||||
"menu crash crash crash crash crash chat"
|
||||
"menu crash crash crash crash crash chat"
|
||||
"menu crash crash crash crash crash chat"
|
||||
"menu crash crash crash crash crash chat"
|
||||
"menu crash crash crash crash crash chat"
|
||||
"menu crash crash crash crash crash chat";
|
||||
}
|
||||
|
||||
/* /Content Grid */
|
||||
|
||||
@@ -80,9 +132,9 @@ body, html {
|
||||
|
||||
.header {
|
||||
grid-area: header;
|
||||
border-radius: 20px;
|
||||
border-radius: 1.25rem;
|
||||
background: #17181C;
|
||||
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
||||
box-shadow: 0px 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.25);
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
@@ -93,8 +145,8 @@ body, html {
|
||||
.menu {
|
||||
grid-area: menu;
|
||||
background: #17181C;
|
||||
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 20px;
|
||||
box-shadow: 0px 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 1.25rem;
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
@@ -105,9 +157,9 @@ body, html {
|
||||
.chat {
|
||||
grid-area: chat;
|
||||
background: #16171B;
|
||||
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
|
||||
filter: drop-shadow(0px 0.25rem 0.25rem rgba(0, 0, 0, 0.25));
|
||||
border-radius: 0;
|
||||
/* border-radius: 20px; */
|
||||
/* border-radius: 1.25rem; */
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
@@ -142,10 +194,20 @@ body, html {
|
||||
display: flex;
|
||||
grid-area: profile;
|
||||
height: 95%;
|
||||
border-radius: 50px;
|
||||
border-radius: 3.125rem;
|
||||
background: #17181C;
|
||||
box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
||||
margin: 10px 39px 18px 13px;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.25);
|
||||
margin: 0.625rem 2.438rem 1.125rem 1.125rem;
|
||||
}
|
||||
|
||||
.jackpot {
|
||||
display: flex;
|
||||
grid-area: jackpot;
|
||||
height: 95%;
|
||||
border-radius: 3.125rem;
|
||||
background: #17181C;
|
||||
box-shadow: 0.25rem 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.25);
|
||||
margin: 0.625rem 2.438rem 1.125rem 1.125rem;
|
||||
}
|
||||
|
||||
/* /Profile */
|
||||
@@ -159,6 +221,22 @@ body, html {
|
||||
|
||||
/* /Saper */
|
||||
|
||||
/* Crash */
|
||||
|
||||
.crash-content {
|
||||
grid-area: crash;
|
||||
}
|
||||
|
||||
.crash-game {
|
||||
grid-area: crashgame;
|
||||
}
|
||||
|
||||
.crash-game__players {
|
||||
grid-area: crashplayers;
|
||||
}
|
||||
|
||||
/* /Crash */
|
||||
|
||||
/* Media */
|
||||
|
||||
/* /Media */
|
||||
@@ -1,66 +1,70 @@
|
||||
// import { BackendWebSocketUrl } from '@/properties/Сonfig.js';
|
||||
// import { eventBus } from "@/main";
|
||||
// import {
|
||||
// GetCookie
|
||||
// } from "@/assets/js/storage/CookieStorage.js";
|
||||
//
|
||||
// let webSocket;
|
||||
//
|
||||
// export function ConnectToChat() {
|
||||
// try {
|
||||
// webSocket = new WebSocket(BackendWebSocketUrl);
|
||||
//
|
||||
// webSocket.onopen = function () {
|
||||
// console.log('Connection established');
|
||||
// };
|
||||
//
|
||||
// webSocket.onmessage = function (event) {
|
||||
//
|
||||
// const dataObject = JSON.parse(event.data);
|
||||
//
|
||||
// if (dataObject && Object.prototype.hasOwnProperty.call(dataObject, 'SpUserName') && Object.prototype.hasOwnProperty.call(dataObject, 'Message')) {
|
||||
// eventBus.emit('dataChat', event.data);
|
||||
// }
|
||||
//
|
||||
// console.log('Message from Server:', event.data);
|
||||
// };
|
||||
//
|
||||
// webSocket.onclose = function () {
|
||||
//
|
||||
// webSocket = new WebSocket(BackendWebSocketUrl);
|
||||
//
|
||||
// console.log('Connection closed and reconnected');
|
||||
// };
|
||||
//
|
||||
// webSocket.onerror = function (event) {
|
||||
// console.error('WebSocket Error:', event);
|
||||
// };
|
||||
// } catch (error) {
|
||||
// console.error('Error in ConnectToChat:', error);
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// export function SendMessageToChat(message) {
|
||||
// try {
|
||||
//
|
||||
// if (!GetCookie("SpUserName") && !GetCookie("AUTHTOKEN") && !GetCookie("SearchToken")) {
|
||||
// return;
|
||||
// }
|
||||
//
|
||||
// const userCredentials = {
|
||||
// SearchToken: GetCookie("SearchToken"),
|
||||
// AUTHTOKEN: GetCookie("AUTHTOKEN")
|
||||
// };
|
||||
//
|
||||
// const messageObject = {
|
||||
// UserCredentials: userCredentials,
|
||||
// Message: message,
|
||||
// MessageType: "Chat"
|
||||
// };
|
||||
//
|
||||
// webSocket.send(JSON.stringify(messageObject));
|
||||
//
|
||||
// } catch (error) {
|
||||
// console.error('Error in ConnectToChat:', error);
|
||||
// }
|
||||
// }
|
||||
import { BackendWebSocketUrl } from '@/properties/Сonfig.js';
|
||||
import { eventBus } from "@/main";
|
||||
import {
|
||||
GetCookie
|
||||
} from "@/assets/js/storage/CookieStorage.js";
|
||||
|
||||
let webSocket;
|
||||
|
||||
export function ConnectToChat() {
|
||||
try {
|
||||
webSocket = new WebSocket(BackendWebSocketUrl);
|
||||
|
||||
webSocket.onopen = function () {
|
||||
console.log('Connection established');
|
||||
};
|
||||
|
||||
webSocket.onmessage = function (event) {
|
||||
|
||||
const dataObject = JSON.parse(event.data);
|
||||
|
||||
if (dataObject && Object.prototype.hasOwnProperty.call(dataObject, 'SpUserName') && Object.prototype.hasOwnProperty.call(dataObject, 'Message')) {
|
||||
eventBus.emit('dataChat', event.data);
|
||||
console.log('CHAT')
|
||||
}
|
||||
else {
|
||||
eventBus.emit('crash', event.data)
|
||||
}
|
||||
|
||||
// console.log('Message from Server:', event.data);
|
||||
};
|
||||
|
||||
webSocket.onclose = function () {
|
||||
|
||||
webSocket = new WebSocket(BackendWebSocketUrl);
|
||||
|
||||
console.log('Connection closed and reconnected');
|
||||
};
|
||||
|
||||
webSocket.onerror = function (event) {
|
||||
console.error('WebSocket Error:', event);
|
||||
};
|
||||
} catch (error) {
|
||||
console.error('Error in ConnectToChat:', error);
|
||||
}
|
||||
}
|
||||
|
||||
export function SendMessageToChat(message) {
|
||||
try {
|
||||
|
||||
if (!GetCookie("SpUserName") && !GetCookie("AUTHTOKEN") && !GetCookie("SearchToken")) {
|
||||
return;
|
||||
}
|
||||
|
||||
const userCredentials = {
|
||||
SearchToken: GetCookie("SearchToken"),
|
||||
AUTHTOKEN: GetCookie("AUTHTOKEN")
|
||||
};
|
||||
|
||||
const messageObject = {
|
||||
UserCredentials: userCredentials,
|
||||
Message: message,
|
||||
MessageType: "Chat"
|
||||
};
|
||||
|
||||
webSocket.send(JSON.stringify(messageObject));
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error in ConnectToChat:', error);
|
||||
}
|
||||
}
|
||||
63
luckydiamond/src/assets/js/games/crash/CrashAPI.js
Normal file
63
luckydiamond/src/assets/js/games/crash/CrashAPI.js
Normal file
@@ -0,0 +1,63 @@
|
||||
import { BackendApiUrl } from '@/properties/Сonfig.js';
|
||||
|
||||
export async function JoinCrashGame(userData, amount) {
|
||||
const data = {
|
||||
userCredentials: {
|
||||
searchToken: userData.searchToken,
|
||||
authtoken: userData.authtoken
|
||||
},
|
||||
bid: amount
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`${BackendApiUrl}/GameCrash/JoinCrashGame`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(data),
|
||||
redirect: 'follow'
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
console.log('Fetch error:', response.status)
|
||||
}
|
||||
|
||||
console.log(response)
|
||||
return await response.json()
|
||||
}
|
||||
catch (error) {
|
||||
console.log('Fetch error')
|
||||
}
|
||||
}
|
||||
|
||||
export async function ExitAndTakeMoneyFromCrashGame(userData) {
|
||||
const data = {
|
||||
exitUserCredentials: {
|
||||
searchToken: userData.searchToken,
|
||||
authtoken: userData.authtoken
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`${BackendApiUrl}/GameCrash/ExitAndTakeMoneyFromCrashGame`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(data),
|
||||
redirect: 'follow'
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
console.log('Fetch error:', response.status)
|
||||
}
|
||||
|
||||
console.log(response)
|
||||
return await response.json()
|
||||
}
|
||||
catch (error) {
|
||||
console.log('Fetch error')
|
||||
}
|
||||
|
||||
}
|
||||
@@ -7,7 +7,7 @@
|
||||
<div class="menu__btns--gamemodes">
|
||||
<div class="menu__content--gamemodes">
|
||||
<a href="#"><img class="menu__content--slots-icon" src="../assets/icons-menu/slots-icon.svg"></a>
|
||||
<a href="#"><img class="menu__content--cruch-icon" src="../assets/icons-menu/crush-icon.svg"></a>
|
||||
<a href="#" @click="$router.push({ name: 'crash' })"><img class="menu__content--cruch-icon" src="../assets/icons-menu/crush-icon.svg"></a>
|
||||
<a href="#"><img src="../assets/icons-menu/case-icon.png"></a>
|
||||
<a href="#" @click="$router.push({ name: 'saper' })"><img class="menu__content--bomb-icon" src="../assets/icons-menu/bomb-icon.svg"></a>
|
||||
</div>
|
||||
|
||||
@@ -19,11 +19,11 @@
|
||||
<input :class="{ 'animate-start-btn' : errorDeposit }" class="deposit-amount__input" v-model="amount" type="number" />
|
||||
<div class="deposit-btns">
|
||||
<ul class="display-btns btns-style-diamonds">
|
||||
<li v-for="number in PaymentsModalNumbers" :key="number">
|
||||
<li v-for="(number, index) in PaymentsModalNumbers" :key="index">
|
||||
<button
|
||||
@click="clickedBtnChoice(number, number.diamonds)"
|
||||
@click="clickedBtnChoice(index, number.diamonds)"
|
||||
:class="{
|
||||
'btn-click': clickedBtn === number,
|
||||
'btn-click': clickedBtn === index,
|
||||
[number]: clickedBtn === number,
|
||||
}"
|
||||
>
|
||||
@@ -132,7 +132,6 @@ export default {
|
||||
amount: 0,
|
||||
amountWithdraw: 0,
|
||||
balance: 0,
|
||||
amountSave: 1,
|
||||
card: '',
|
||||
promocode: '',
|
||||
promocodeBase: ['ANTI-GRIF'],
|
||||
@@ -145,8 +144,6 @@ export default {
|
||||
captchaToken: null,
|
||||
clickedBtn: "",
|
||||
url: "",
|
||||
offBtn: true,
|
||||
offAgree: true,
|
||||
completeValidtaion: {
|
||||
amountsaving: true,
|
||||
cardsaving: false,
|
||||
@@ -174,44 +171,36 @@ export default {
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// amount(newAmount) {
|
||||
// this.offBtn = true;
|
||||
// if (this.amount > 0 && this.amount !== "") {
|
||||
// setTimeout(() => {
|
||||
// try {
|
||||
// GettingMoneyOperation(newAmount).then((response) => {
|
||||
// console.log("Payments Modal Working!: ", response);
|
||||
// this.url = response;
|
||||
// this.offBtn = false;
|
||||
// });
|
||||
// } catch (e) {
|
||||
// console.error("Error in PaymentModal!", e);
|
||||
// }
|
||||
// }, 2000);
|
||||
// }
|
||||
// },
|
||||
// amountWithdraw(newAmount) {
|
||||
// this.completeValidtaion.amountsaving = false
|
||||
// if (newAmount > 0) {
|
||||
// this.amountSave = newAmount
|
||||
// this.completeValidtaion.amountsaving = true
|
||||
// console.log(this.completeValidtaion)
|
||||
// }
|
||||
// },
|
||||
// card(newAmount) {
|
||||
// this.completeValidtaion.cardsaving = false
|
||||
// const cardPattern = /^\d{5}$/;
|
||||
// if(cardPattern.test(newAmount)) {
|
||||
// this.offAgree = false
|
||||
// this.completeValidtaion.cardsaving = true
|
||||
// }
|
||||
// },
|
||||
// agreeUser(newAgree) {
|
||||
// this.completeValidtaion.agreesaving = false
|
||||
// if (newAgree !== false) {
|
||||
// this.completeValidtaion.agreesaving = true
|
||||
// }
|
||||
// },
|
||||
amount(DepositCount) {
|
||||
console.log(DepositCount)
|
||||
if (![1, 5, 10, 50, 100, 1000].includes(DepositCount)) {
|
||||
this.clickedBtn = null
|
||||
}
|
||||
else {
|
||||
let index
|
||||
switch (DepositCount) {
|
||||
case 1:
|
||||
index = 0
|
||||
break
|
||||
case 5:
|
||||
index = 1
|
||||
break
|
||||
case 10:
|
||||
index = 2
|
||||
break
|
||||
case 50:
|
||||
index = 3
|
||||
break
|
||||
case 100:
|
||||
index = 4
|
||||
break
|
||||
case 1000:
|
||||
index = 5
|
||||
break
|
||||
}
|
||||
this.clickedBtnChoice(index, DepositCount)
|
||||
}
|
||||
},
|
||||
completeValidtaion: {
|
||||
handler() {
|
||||
this.completeValidationCheck()
|
||||
@@ -219,11 +208,6 @@ export default {
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
checkOffBtn() {
|
||||
return this.checkBtn();
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
closeModal() {
|
||||
return this.$emit("closemodal");
|
||||
@@ -279,17 +263,6 @@ export default {
|
||||
}
|
||||
},
|
||||
async RedirectedMethodTransferMoneyToSp() {
|
||||
// setTimeout(async () => {
|
||||
// try {
|
||||
// WithdrawMoneyOperation(this.amountSave, this.card.toString(), this.captchaToken).then((response) => {
|
||||
// console.log(`work withdraw - ${response}`)
|
||||
// })
|
||||
// }
|
||||
// catch (e) {
|
||||
// console.error(`Error in wihdrawmoney operation - ${e}`)
|
||||
// }
|
||||
// await this.$emit('notifacetionmoney')
|
||||
// }, 4000)
|
||||
this.v$.$touch()
|
||||
|
||||
if (this.v$.amountWithdraw.$error) {
|
||||
@@ -334,17 +307,10 @@ export default {
|
||||
})
|
||||
}
|
||||
},
|
||||
// checkBtn() {
|
||||
// if (this.offBtn === false) {
|
||||
// if (this.agreeUser !== false) {
|
||||
// return false;
|
||||
// }
|
||||
// }
|
||||
// return true;
|
||||
// },
|
||||
clickedBtnChoice(index, content) {
|
||||
this.clickedBtn = index;
|
||||
this.amount = content;
|
||||
console.log(index)
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<div class="time" v-if="crashdata.Status === 'WaitingForPlayers'"><h2>{{ crashdata.WaitingTime ? crashdata.WaitingTime.toFixed(1) : '' }} сек.</h2></div>
|
||||
<LineChart
|
||||
:chart-data="data"
|
||||
:options="options"
|
||||
v-else
|
||||
/>
|
||||
<h2 class="ratio" :class="{ 'lost-ratio' : crashdata.Status === 'GameEnd' }">{{ crashdata.CurrentX ? crashdata.CurrentX.toFixed(2) : '' }}x</h2>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { LineChart } from "vue-chart-3";
|
||||
import {
|
||||
Chart,
|
||||
LineController,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement,
|
||||
} from "chart.js";
|
||||
|
||||
Chart.register(
|
||||
LineController,
|
||||
CategoryScale,
|
||||
LinearScale,
|
||||
PointElement,
|
||||
LineElement
|
||||
);
|
||||
|
||||
export default {
|
||||
components: { LineChart },
|
||||
props: {
|
||||
crashdata: Object
|
||||
},
|
||||
mounted() {
|
||||
this.data = this.chartData;
|
||||
this.updateData();
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataValues: [],
|
||||
numberGraph: 1,
|
||||
labels: [" "],
|
||||
data: null,
|
||||
options: {
|
||||
plugins: {
|
||||
title: {
|
||||
text: "Line",
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
},
|
||||
y: {
|
||||
grid: {
|
||||
display: false
|
||||
}
|
||||
}
|
||||
},
|
||||
animation: false,
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
chartData() {
|
||||
return {
|
||||
labels: this.labels,
|
||||
datasets: [
|
||||
{
|
||||
label: "Foo",
|
||||
data: this.dataValues,
|
||||
borderColor: '#4E5EF2',
|
||||
pointStyle: "circle",
|
||||
pointRadius: 0,
|
||||
pointHoverRadius: 2,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
crashdata: {
|
||||
handler: 'updateData',
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
updateData() {
|
||||
let nextDataValue
|
||||
if (this.crashdata.Status === 'WaitingForPlayers') {
|
||||
this.data = this.chartData;
|
||||
this.labels = [""];
|
||||
this.dataValues = [this.numberGraph, this.numberGraph];
|
||||
}
|
||||
else if (this.crashdata.Status === 'InGame') {
|
||||
if (this.dataValues.length === 0) {
|
||||
this.dataValues = [this.crashdata.CurrentX, this.crashdata.CurrentX]
|
||||
nextDataValue = this.crashdata.CurrentX
|
||||
this.numberGraph = this.crashdata.CurrentX
|
||||
|
||||
this.data = this.chartData
|
||||
this.labels.push("")
|
||||
this.dataValues.push(nextDataValue)
|
||||
}
|
||||
|
||||
this.numberGraph = this.numberGraph + .01
|
||||
nextDataValue = this.numberGraph
|
||||
|
||||
this.data = this.chartData;
|
||||
this.labels.push("");
|
||||
this.dataValues.push(nextDataValue);
|
||||
}
|
||||
else if (this.crashdata.Status === 'GameEnd') {
|
||||
this.dataValues = []
|
||||
this.numberGraph = 1
|
||||
}
|
||||
else {
|
||||
console.log('Error game')
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -50,7 +50,8 @@
|
||||
<div :class="'linecontent-' + mode.id">
|
||||
<div class="container">
|
||||
<h1 class="title-firstline">{{ mode.title }}</h1>
|
||||
<a href="#" class="line__btn">play <span class="line__btn--elm">></span></a>
|
||||
<!-- <a href="#" class="line__btn">play <span class="line__btn--elm">></span></a> -->
|
||||
<a href="#" @click="$router.push({ name: 'jackpot' })" class="line__btn">play <span class="line__btn--elm">></span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line__img">
|
||||
|
||||
@@ -1,11 +1,326 @@
|
||||
<template>
|
||||
<crash-graph-component></crash-graph-component>
|
||||
<div class="grid-crash">
|
||||
|
||||
<aside-bar-component></aside-bar-component>
|
||||
|
||||
<chat-component></chat-component>
|
||||
|
||||
<header-component></header-component>
|
||||
|
||||
<div class="crash-content">
|
||||
<section class="crash-game">
|
||||
<div class="crash-game__content">
|
||||
<div class="crash-game__start-window">
|
||||
<h2 class="crash__game-name">Краш</h2>
|
||||
<p>Жди момента и забирай выигрыш</p>
|
||||
<div class="crash-game-window__inputs">
|
||||
<div class="crash-deposit">
|
||||
<h3 class="crash-label">Сумма депозита</h3>
|
||||
<div class="crash-input-deposit">
|
||||
<img class="diamond-icon" src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png">
|
||||
<input class="input-style-crash input-style-crash__text diamond-input-crash" type="number" v-model="amountDeposit">
|
||||
<div class="diamonds__btns btn-style__diamonds">
|
||||
<ul class="diamonds-btns__display">
|
||||
<li v-for="(item, index) in SaperNumbers" :key="index">
|
||||
<button @click="clickedBtnChoice(index, item.diamonds)" :class="{ 'btn-click': clickedBtn === index, [index]: clickedBtn === index }" :id="item.diamonds === 'max' ? 'max-button' : null" v-if="item.diamonds !== undefined">{{ item.diamonds }}</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="error-block" v-if="ErrorClick">
|
||||
<h2>{{ textError }}</h2>
|
||||
</div>
|
||||
<div class="crash-game-window__btn-start">
|
||||
<button v-if="startGame && crashObject.Status !== 'WaitingForPlayers'" @click="clickClaimDep" class="claim-btn-crash__prize">Забрать {{ getUserPrize.toFixed(2) }} АР</button>
|
||||
<button v-if="startGame && crashObject.Status === 'WaitingForPlayers'" class="waiting-btn-crash">Ожидание игроков...</button>
|
||||
<button v-if="!startGame" :disabled="offBtn" @click="clickPlayBtn" :class="{ 'animate-start-btn': ErrorClick }">Начать игру</button>
|
||||
</div>
|
||||
<div class="crash-window__line">
|
||||
<div class="line-crash">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="crash-game__graph">
|
||||
<crash-graph-component :crashdata="crashObject"></crash-graph-component>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="crash-game__players" v-if="crashObject && crashObject.Players">
|
||||
<div class="crash-game-players__content">
|
||||
<ul class="user-list" v-if="crashObject.Players.length">
|
||||
<li class="user-crash" v-for="(player, index) in crashObject.Players.sort((a, b) => b.Bid - a.Bid)" :key="index">
|
||||
<div class="user-crash-content" :class="{ 'user-crash-content__lose' : crashObject.Status === 'GameEnd' && player.WinningX <= 0, 'user-crash-content__win' : player.WinningX >= 1 }">
|
||||
<div class="user-name-crash">
|
||||
<img class="user-crash__icon" :src="`https://avatar.spworlds.ru/face/55/${player.UserName}`">
|
||||
<h2>{{ player.UserName }}</h2>
|
||||
</div>
|
||||
<div class="user-bid-crash">
|
||||
<h2 v-if="player.WinningMoney >= 1" class="wingame__win-bid-crash">{{ player.WinningMoney.toFixed(2) }}</h2>
|
||||
<h2 v-else>{{ player.Bid }}</h2>
|
||||
<img src="@/assets/icons-games/saper-game/icon-diamond-ore-saper.png">
|
||||
</div>
|
||||
<div class="user-game-status-crash">
|
||||
<h2 class="ingame-crash" v-if="crashObject.Status === 'WaitingForPlayers' && player.WinningX <= 1 || crashObject.Status === 'InGame' && player.WinningX <= 0">В игре</h2>
|
||||
<h2 class="lostgame-crash" v-if="crashObject.Status === 'GameEnd' && player.WinningX <= 0">Проиграл</h2>
|
||||
<h2 class="wingame-crash" v-if="player.WinningX >= 1">{{ player.WinningX.toFixed(2) }}x</h2>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HeaderComponent from "@/components/HeaderComponent.vue";
|
||||
import AsideBarComponent from "@/components/AsidebarComponent.vue";
|
||||
import ChatComponent from "@/components/ChatComponent.vue";
|
||||
import CrashGraphComponent from "@/components/games-components/CrashGraphComponent.vue";
|
||||
|
||||
import { useVuelidate } from '@vuelidate/core'
|
||||
import { maxValue, minValue, required, numeric, integer } from "@vuelidate/validators";
|
||||
|
||||
|
||||
import '@/assets/css/PagesStyles/games-pages/crash.css'
|
||||
import SaperNumbers from "@/mocks/SaperNumbers";
|
||||
import {GetCurrentMoney} from "@/assets/js/rest/RestMethods";
|
||||
import {GetCookie} from "@/assets/js/storage/CookieStorage";
|
||||
import {eventBus} from "@/main";
|
||||
import {ExitAndTakeMoneyFromCrashGame, JoinCrashGame} from "@/assets/js/games/crash/CrashAPI";
|
||||
|
||||
export default {
|
||||
components: { CrashGraphComponent }
|
||||
components: { HeaderComponent, AsideBarComponent, ChatComponent, CrashGraphComponent },
|
||||
data() {
|
||||
return {
|
||||
SaperNumbers,
|
||||
clickedBtn: null,
|
||||
ErrorClick: false,
|
||||
ErrorJoin: false,
|
||||
balance: 0,
|
||||
amountDeposit: 0,
|
||||
crashObject: '',
|
||||
textError: '',
|
||||
startGame: false,
|
||||
offBtn: false
|
||||
}
|
||||
},
|
||||
setup() {
|
||||
return { v$: useVuelidate() }
|
||||
},
|
||||
computed: {
|
||||
getUserPrize() {
|
||||
let User = this.crashObject.Players.find(player => player.UserName === GetCookie('SpUserName'))
|
||||
|
||||
if (User) {
|
||||
return User.Bid * this.crashObject.CurrentX
|
||||
}
|
||||
return 0
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
eventBus.on('crash', (dataCrash) => {
|
||||
try {
|
||||
const dataCrashParse = JSON.parse(dataCrash)
|
||||
|
||||
this.crashObject = dataCrashParse
|
||||
// console.log(this.crashObject)
|
||||
}
|
||||
catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
|
||||
if (this.crashObject.Status === 'GameEnd' && this.startGame === true && this.crashObject.Players.some(player => player.UserName === GetCookie('SpUserName'))) {
|
||||
this.startGame = false
|
||||
console.log('GAME OVER')
|
||||
this.updateUserMoney()
|
||||
}
|
||||
if (
|
||||
this.crashObject.Players.some(player =>
|
||||
player.UserName === GetCookie('SpUserName') && player.UserGameState !== 'Win'
|
||||
) &&
|
||||
this.startGame === false &&
|
||||
this.crashObject.Status !== 'GameEnd'
|
||||
) {
|
||||
this.startGame = true
|
||||
|
||||
let User = this.crashObject.Players.find(player => player.UserName === GetCookie('SpUserName'))
|
||||
console.log('ОБНОВЛЕНИЕ СТРАНИЦЫ')
|
||||
if (User) {
|
||||
this.amountDeposit = User.Bid
|
||||
User = null
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
validations() {
|
||||
return {
|
||||
amountDeposit: { required, numeric, minValue: minValue(1), maxValue: maxValue(this.balance), integer },
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
amountDeposit(DepositCount) {
|
||||
if (![1, 5, 10, 50, 100, parseInt(this.balance)].includes(DepositCount)) {
|
||||
this.clickedBtn = null
|
||||
}
|
||||
else {
|
||||
let index
|
||||
switch (DepositCount) {
|
||||
case 1:
|
||||
if (parseInt(this.balance) === DepositCount) {
|
||||
index = 5
|
||||
}
|
||||
else {
|
||||
index = 0
|
||||
}
|
||||
break
|
||||
case 5:
|
||||
if (parseInt(this.balance) === DepositCount) {
|
||||
index = 5
|
||||
}
|
||||
else {
|
||||
index = 1
|
||||
}
|
||||
break
|
||||
case 10:
|
||||
if (parseInt(this.balance) === DepositCount) {
|
||||
index = 5
|
||||
}
|
||||
else {
|
||||
index = 2
|
||||
}
|
||||
break
|
||||
case 50:
|
||||
if (parseInt(this.balance) === DepositCount) {
|
||||
index = 5
|
||||
}
|
||||
else {
|
||||
index = 3
|
||||
}
|
||||
break
|
||||
case 100:
|
||||
if (parseInt(this.balance) === DepositCount) {
|
||||
index = 5
|
||||
}
|
||||
else {
|
||||
index = 4
|
||||
}
|
||||
break
|
||||
case parseInt(this.balance):
|
||||
index = 5
|
||||
break
|
||||
}
|
||||
|
||||
this.clickedBtnChoice(index, DepositCount)
|
||||
}
|
||||
},
|
||||
},
|
||||
async created() {
|
||||
if (GetCookie('AUTHTOKEN') && GetCookie('SearchToken')) {
|
||||
await GetCurrentMoney(GetCookie('AUTHTOKEN'), GetCookie('SearchToken'))
|
||||
.then((response) => {
|
||||
this.balance = response.currentMoney
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async updateUserMoney() {
|
||||
if (GetCookie('AUTHTOKEN') && GetCookie('SearchToken')) {
|
||||
await GetCurrentMoney(GetCookie('AUTHTOKEN'), GetCookie('SearchToken'))
|
||||
.then((response) => {
|
||||
this.balance = response.currentMoney
|
||||
return eventBus.emit('Updatebalance')
|
||||
})
|
||||
}
|
||||
},
|
||||
async clickPlayBtn() {
|
||||
this.v$.$touch()
|
||||
this.offBtn = true
|
||||
|
||||
if (this.v$.amountDeposit.$error) {
|
||||
this.textError = 'Ошибка введении данных'
|
||||
this.offBtn = false
|
||||
this.errorPlayButton()
|
||||
}
|
||||
|
||||
if (!this.v$.amountDeposit.$error) {
|
||||
const userData = {
|
||||
searchToken: GetCookie('SearchToken'),
|
||||
authtoken: GetCookie('AUTHTOKEN')
|
||||
}
|
||||
|
||||
await JoinCrashGame(userData, this.amountDeposit)
|
||||
.then((response) => {
|
||||
console.log(this.balance)
|
||||
console.log(response)
|
||||
if (response === `You can't join to started or ended game` || response === 'Player alredy in the game.') {
|
||||
this.offBtn = false
|
||||
|
||||
if (response === `You can't join to started or ended game`) {
|
||||
this.textError = 'Игра уже началась или только закончилась!'
|
||||
this.errorPlayButton()
|
||||
}
|
||||
else if (response === 'Player alredy in the game.') {
|
||||
this.textError = 'Вы уже в игре!'
|
||||
this.errorPlayButton()
|
||||
}
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
if (response.ok) {
|
||||
this.offBtn = false
|
||||
this.startGame = true
|
||||
}
|
||||
})
|
||||
this.offBtn = false
|
||||
}
|
||||
},
|
||||
errorPlayButton() {
|
||||
this.ErrorClick = true
|
||||
setTimeout(() => {
|
||||
this.ErrorClick = false
|
||||
this.textError = ''
|
||||
}, 2000)
|
||||
},
|
||||
async clickClaimDep() {
|
||||
if (this.startGame === true) {
|
||||
const userData = {
|
||||
searchToken: GetCookie('SearchToken'),
|
||||
authtoken: GetCookie('AUTHTOKEN')
|
||||
}
|
||||
|
||||
await ExitAndTakeMoneyFromCrashGame(userData)
|
||||
.then((response) => {
|
||||
console.log(response)
|
||||
this.startGame = false
|
||||
|
||||
this.updateUserMoney()
|
||||
})
|
||||
}
|
||||
},
|
||||
async clickedBtnChoice(index, content) {
|
||||
this.clickedBtn = index
|
||||
if (content === 'max') {
|
||||
await GetCurrentMoney(GetCookie('AUTHTOKEN'), GetCookie('SearchToken'))
|
||||
.then((response) => {
|
||||
console.log(response.currentMoney, this.balance)
|
||||
const responseBalance = response.currentMoney
|
||||
|
||||
if (responseBalance === this.balance) {
|
||||
this.amountDeposit = parseInt(responseBalance)
|
||||
}
|
||||
})
|
||||
}
|
||||
else {
|
||||
this.amountDeposit = content
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
51
luckydiamond/src/pages/games-pages/JackpotPage.vue
Normal file
51
luckydiamond/src/pages/games-pages/JackpotPage.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div class="content-grid--jackpot" >
|
||||
<aside-bar-component></aside-bar-component>
|
||||
|
||||
<chat-component></chat-component>
|
||||
|
||||
<header-component></header-component>
|
||||
<!-- <div class="grid-crash"> -->
|
||||
<!-- <div class="grid-crash">
|
||||
<h1>Test</h1>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import HeaderComponent from "@/components/HeaderComponent.vue";
|
||||
import AsideBarComponent from "@/components/AsidebarComponent.vue";
|
||||
import ChatComponent from "@/components/ChatComponent.vue";
|
||||
import {GetCookie} from "@/assets/js/storage/CookieStorage";
|
||||
import {GetCurrentMoney} from "@/assets/js/rest/RestMethods";
|
||||
|
||||
|
||||
// import '@/assets/css/PagesStyles/games-pages/jackpot.css'
|
||||
export default {
|
||||
components: { HeaderComponent, AsideBarComponent, ChatComponent },
|
||||
data() {
|
||||
return {
|
||||
// SaperNumbers,
|
||||
// clickedBtn: null,
|
||||
// ErrorClick: false,
|
||||
// ErrorJoin: false,
|
||||
// balance: 0,
|
||||
// amountDeposit: 0,
|
||||
// crashObject: '',
|
||||
// textError: '',
|
||||
// startGame: false,
|
||||
// offBtn: false
|
||||
};
|
||||
},
|
||||
|
||||
async created() {
|
||||
if (GetCookie("AUTHTOKEN") && GetCookie("SearchToken")) {
|
||||
await GetCurrentMoney(
|
||||
GetCookie("AUTHTOKEN"),
|
||||
GetCookie("SearchToken")
|
||||
).then((response) => {
|
||||
this.balance = response.currentMoney;
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -284,45 +284,41 @@ export default {
|
||||
}
|
||||
},
|
||||
async amountCrystals(CrystalsCount) {
|
||||
this.PercentageGameSteps = []
|
||||
if (![1, 5, 10, 24].includes(CrystalsCount)) {
|
||||
this.clickedBtnCrystal = null
|
||||
}
|
||||
else {
|
||||
let index
|
||||
switch (CrystalsCount) {
|
||||
case 1:
|
||||
index = 0
|
||||
break
|
||||
case 5:
|
||||
index = 1
|
||||
break
|
||||
case 10:
|
||||
index = 2
|
||||
break
|
||||
case 24:
|
||||
index = 3
|
||||
break
|
||||
}
|
||||
this.clickedBtnCrystals(index, CrystalsCount)
|
||||
}
|
||||
this.PercentageGameSteps = [];
|
||||
|
||||
if (CrystalsCount >= 1 && CrystalsCount <= 24) {
|
||||
try {
|
||||
await GetPercentageSteps(this.amountCrystals)
|
||||
.then((response) => {
|
||||
response.forEach((item) => {
|
||||
if (item !== 'Infinity' && item !== '-Infinity') {
|
||||
this.PercentageGameSteps.push(Number(item))
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
catch (e) {
|
||||
console.error('Error in Percantage', e)
|
||||
const response = await GetPercentageSteps(CrystalsCount);
|
||||
response.forEach((item) => {
|
||||
if (item !== 'Infinity' && item !== '-Infinity') {
|
||||
this.PercentageGameSteps.push(Number(item));
|
||||
}
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('Error in Percentage', e);
|
||||
}
|
||||
}
|
||||
|
||||
let index;
|
||||
switch (CrystalsCount) {
|
||||
case 1:
|
||||
index = 0;
|
||||
break;
|
||||
case 5:
|
||||
index = 1;
|
||||
break;
|
||||
case 10:
|
||||
index = 2;
|
||||
break;
|
||||
case 24:
|
||||
index = 3;
|
||||
break;
|
||||
default:
|
||||
return
|
||||
}
|
||||
this.clickedBtnCrystals(index, CrystalsCount);
|
||||
},
|
||||
|
||||
flippedCards: {
|
||||
async handler(value) {
|
||||
if (value.length < 1 || this.ValidationPlay.endGame === true) return
|
||||
@@ -454,6 +450,9 @@ export default {
|
||||
this.ValidationPlay.startGame = false
|
||||
}, 2000)
|
||||
}
|
||||
else {
|
||||
this.amountCrystals = 5
|
||||
}
|
||||
})
|
||||
this.getBalanceUser()
|
||||
}
|
||||
@@ -461,6 +460,9 @@ export default {
|
||||
console.error('Error in GetData', e)
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.amountCrystals = 5
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
eventBus.on('Updatebalance-saper', () => {
|
||||
|
||||
@@ -4,13 +4,19 @@ import HomePage from "../pages/HomePage.vue";
|
||||
import ProfilePage from "@/pages/ProfilePage.vue";
|
||||
import SapergamePage from "@/pages/games-pages/SapergamePage.vue";
|
||||
import SettingsPage from "@/pages/SettingsPage.vue";
|
||||
import CrashGamePage from "@/pages/games-pages/CrashgamePage.vue";
|
||||
import JackpotPage from "@/pages/games-pages/JackpotPage.vue";
|
||||
import SettingsPage from "@/pages/SettingsPage.vue"
|
||||
import AboutPage from "@/pages/AboutPage.vue"
|
||||
|
||||
export default createRouter({
|
||||
history: createWebHistory(),
|
||||
routes: [
|
||||
{ path: '/', component: HomePage, name: 'home' },
|
||||
{ path: '/profile', component: ProfilePage, name: 'profile' },
|
||||
{ path: '/game/saper', component: SapergamePage, name: 'saper' },
|
||||
{ path: '/game/crash', component: CrashGamePage, name: 'crash' },
|
||||
{ path: '/game/jackpot', component: JackpotPage, name: 'jackpot' },
|
||||
{ path: '/settings', component: SettingsPage, name: 'settings' },
|
||||
{ path: '/about', component: AboutPage, name: 'about' },
|
||||
]
|
||||
|
||||
Reference in New Issue
Block a user