yusur/coinstorge
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

clean dice component

Browse source
This commit is contained in:
Face 2025-06-24 12:40:01 +03:00
parent df10f0c7ba
commit 5533669745
1 changed files with 29 additions and 89 deletions
Download patch file Download diff file Expand all files Collapse all files

118
website/src/lib/components/self/games/Dice.svelte
View file

@ -44,10 +44,6 @@
6: { x: 0, y: 180, z: 0 } 6: { x: 0, y: 180, z: 0 }
}; };
function getRandInt(from: number, to: number): number {
return Math.round(Math.random() * (to - from)) + from;
}
function getExtraSpin(spinFactor = 4) { function getExtraSpin(spinFactor = 4) {
const extraSpinsX = spinFactor * 360; const extraSpinsX = spinFactor * 360;
const extraSpinsY = spinFactor * 360; const extraSpinsY = spinFactor * 360;
@ -108,9 +104,9 @@
let betAmountDisplay = $state('10'); let betAmountDisplay = $state('10');
let selectedNumber = $state(1); let selectedNumber = $state(1);
let isRolling = $state(false); let isRolling = $state(false);
let diceRotation = $state({ x: 0, y: 0 });
let lastResult = $state<DiceResult | null>(null); let lastResult = $state<DiceResult | null>(null);
let activeSoundTimeouts = $state<NodeJS.Timeout[]>([]); let activeSoundTimeouts = $state<NodeJS.Timeout[]>([]);
let diceElement: HTMLElement | null = null;
let canBet = $derived( let canBet = $derived(
betAmount > 0 && betAmount <= balance && betAmount <= MAX_BET_AMOUNT && !isRolling betAmount > 0 && betAmount <= balance && betAmount <= MAX_BET_AMOUNT && !isRolling
@ -154,8 +150,8 @@
activeSoundTimeouts.forEach(clearTimeout); activeSoundTimeouts.forEach(clearTimeout);
activeSoundTimeouts = []; activeSoundTimeouts = [];
const spinFactor = 20; // Increase / Decrease to make the Spin faster or slower const spinFactor = 20;
const animationDuration = 1500; // Duration of the Animation, keep it like thatif you haven't added your own sound in website\static\sound\dice.mp3 const animationDuration = 1500;
try { try {
const response = await fetch('/api/gambling/dice', { const response = await fetch('/api/gambling/dice', {
@ -177,7 +173,6 @@
const resultData: DiceResult = await response.json(); const resultData: DiceResult = await response.json();
playSound('dice'); playSound('dice');
const diceElement = document.querySelector('.dice') as HTMLElement;
if (diceElement) { if (diceElement) {
diceElement.style.transition = 'none'; diceElement.style.transition = 'none';
diceElement.style.transform = getDiceTransform(selectedNumber, false); diceElement.style.transform = getDiceTransform(selectedNumber, false);
@ -212,19 +207,6 @@
} }
} }
function getDotsForFace(face: number): number { // Could be made bigger, has no Point though Ig.
switch (face) {
case 1: return 1;
case 2: return 2;
case 3: return 3;
case 4: return 4;
case 5: return 5;
case 6: return 6;
default: return 0;
}
}
// Dynmaically fetch the correct balance.
onMount(async () => { onMount(async () => {
volumeSettings.load(); volumeSettings.load();
@ -255,11 +237,11 @@
<div class="flex-1 flex items-center justify-center"> <div class="flex-1 flex items-center justify-center">
<div class="dice-container"> <div class="dice-container">
<div class="dice"> <div class="dice" bind:this={diceElement}>
{#each Array(6) as _, i} {#each Array(6) as _, i}
<div class="face" style="transform: {getFaceTransform(i + 1)}"> <div class="face" style="transform: {getFaceTransform(i + 1)}">
<div class="dot-container"> <div class="dot-container">
{#each Array(getDotsForFace(i + 1)) as _} {#each Array(i + 1) as _}
<div class="dot"></div> <div class="dot"></div>
{/each} {/each}
</div> </div>
@ -379,12 +361,12 @@
height: 100px; height: 100px;
background: #fff; background: #fff;
border: 2px solid #363131; border: 2px solid #363131;
box-sizing: border-box;
border-radius: 8px; border-radius: 8px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
backface-visibility: hidden; backface-visibility: hidden;
box-sizing: border-box;
} }
.face:nth-child(1) { transform: translateZ(50px); } .face:nth-child(1) { transform: translateZ(50px); }
@ -401,8 +383,8 @@
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
padding: 15%; padding: 15%;
box-sizing: border-box;
gap: 10%; gap: 10%;
box-sizing: border-box;
} }
.dot { .dot {
@ -412,68 +394,26 @@
height: 100%; height: 100%;
} }
.face:nth-child(1) .dot-container { /* Dot positions for each face */
grid-template-areas: .face:nth-child(1) .dot { grid-area: 2 / 2; }
". . ." .face:nth-child(2) .dot:nth-child(1) { grid-area: 1 / 1; }
". dot ." .face:nth-child(2) .dot:nth-child(2) { grid-area: 3 / 3; }
". . ."; .face:nth-child(3) .dot:nth-child(1) { grid-area: 1 / 1; }
} .face:nth-child(3) .dot:nth-child(2) { grid-area: 2 / 2; }
.face:nth-child(1) .dot { .face:nth-child(3) .dot:nth-child(3) { grid-area: 3 / 3; }
grid-area: dot; .face:nth-child(4) .dot:nth-child(1) { grid-area: 1 / 1; }
} .face:nth-child(4) .dot:nth-child(2) { grid-area: 1 / 3; }
.face:nth-child(4) .dot:nth-child(3) { grid-area: 3 / 1; }
.face:nth-child(2) .dot-container { .face:nth-child(4) .dot:nth-child(4) { grid-area: 3 / 3; }
grid-template-areas: .face:nth-child(5) .dot:nth-child(1) { grid-area: 1 / 1; }
"dot1 . ." .face:nth-child(5) .dot:nth-child(2) { grid-area: 1 / 3; }
". . ." .face:nth-child(5) .dot:nth-child(3) { grid-area: 2 / 2; }
". . dot2"; .face:nth-child(5) .dot:nth-child(4) { grid-area: 3 / 1; }
} .face:nth-child(5) .dot:nth-child(5) { grid-area: 3 / 3; }
.face:nth-child(2) .dot:nth-child(1) { grid-area: dot1; } .face:nth-child(6) .dot:nth-child(1) { grid-area: 1 / 1; }
.face:nth-child(2) .dot:nth-child(2) { grid-area: dot2; } .face:nth-child(6) .dot:nth-child(2) { grid-area: 1 / 3; }
.face:nth-child(6) .dot:nth-child(3) { grid-area: 2 / 1; }
.face:nth-child(3) .dot-container { .face:nth-child(6) .dot:nth-child(4) { grid-area: 2 / 3; }
grid-template-areas: .face:nth-child(6) .dot:nth-child(5) { grid-area: 3 / 1; }
"dot1 . ." .face:nth-child(6) .dot:nth-child(6) { grid-area: 3 / 3; }
". dot2 ."
". . dot3";
}
.face:nth-child(3) .dot:nth-child(1) { grid-area: dot1; }
.face:nth-child(3) .dot:nth-child(2) { grid-area: dot2; }
.face:nth-child(3) .dot:nth-child(3) { grid-area: dot3; }
.face:nth-child(4) .dot-container {
grid-template-areas:
"dot1 . dot2"
". . ."
"dot3 . dot4";
}
.face:nth-child(4) .dot:nth-child(1) { grid-area: dot1; }
.face:nth-child(4) .dot:nth-child(2) { grid-area: dot2; }
.face:nth-child(4) .dot:nth-child(3) { grid-area: dot3; }
.face:nth-child(4) .dot:nth-child(4) { grid-area: dot4; }
.face:nth-child(5) .dot-container {
grid-template-areas:
"dot1 . dot2"
". dot3 ."
"dot4 . dot5";
}
.face:nth-child(5) .dot:nth-child(1) { grid-area: dot1; }
.face:nth-child(5) .dot:nth-child(2) { grid-area: dot2; }
.face:nth-child(5) .dot:nth-child(3) { grid-area: dot3; }
.face:nth-child(5) .dot:nth-child(4) { grid-area: dot4; }
.face:nth-child(5) .dot:nth-child(5) { grid-area: dot5; }
.face:nth-child(6) .dot-container {
grid-template-areas:
"dot1 . dot2"
"dot3 . dot4"
"dot5 . dot6";
}
.face:nth-child(6) .dot:nth-child(1) { grid-area: dot1; }
.face:nth-child(6) .dot:nth-child(2) { grid-area: dot2; }
.face:nth-child(6) .dot:nth-child(3) { grid-area: dot3; }
.face:nth-child(6) .dot:nth-child(4) { grid-area: dot4; }
.face:nth-child(6) .dot:nth-child(5) { grid-area: dot5; }
.face:nth-child(6) .dot:nth-child(6) { grid-area: dot6; }
</style> </style>