Rehber BELEŞ!! LeaderOS CSGO Tipi Kasa Sistemi EKLE!

Nasıl bir görüntü elde edeceğiz?

​

assets/js/lottery.js

Genişletmek için tıkla ...

function getData(ajaxurl) {
return $.ajax({
url: ajaxurl,
type: 'POST',
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
},
error: function() {
if (wheelSpining) {
wheelSpining = false;
$('#openCaseButton').text(lang.play_again || 'Tekrar Aç').removeAttr('disabled').removeClass('disabled').css('cursor', 'pointer');
}
swal.fire({
title: lang.alert_title_error,
text: lang.alert_message_something_went_wrong,
type: 'error',
confirmButtonColor: '#02b875',
confirmButtonText: lang.alert_btn_ok
});
}
});
};

var wheelSpining = false;
var tick_audio = new Audio('/assets/cloud/css/plugins/superwheel/tick.mp3');
var win_audio = new Audio('/assets/cloud/css/plugins/superwheel/win.mp3');
var lose_audio = new Audio('/assets/cloud/css/plugins/superwheel/lose.mp3');

const strip = $('#case-strip');
const itemWidth = 120;
const itemMargin = 10;
const totalItemWidth = itemWidth + itemMargin;
const stripLength = 80;

// Nadirlik renkleri
function getRarityClass(bgColor) {
if (bgColor.includes('ffaa00')) return 'rarity-gold';
if (bgColor.includes('eb4b4b')) return 'rarity-red';
if (bgColor.includes('d32ce6')) return 'rarity-pink';
if (bgColor.includes('8847ff')) return 'rarity-purple';
if (bgColor.includes('4b69ff')) return 'rarity-blue';
return '';
}

function generateStrip(winnerId) {
strip.empty();

let stripItems = [];
const winnerItem = slices.find(s => s.id == winnerId);

if (!winnerItem) {
console.error("Kazanan eşya bulunamadı!", winnerId);
wheelSpining = false;
$('#openCaseButton').text(lang.play_again || 'Tekrar Aç').removeAttr('disabled').removeClass('disabled').css('cursor', 'pointer');
return;
}

const winnerPosition = stripLength - 10;

for (let i = 0; i < stripLength; i++) {
let item;
if (i === winnerPosition) {
item = winnerItem;
} else {
item = slices[Math.floor(Math.random() * slices.length)];
}
stripItems.push(item);
}

stripItems.forEach(item => {
const rarityClass = getRarityClass(item.background);
const itemHtml = `
<div class="case-item ${rarityClass}" style="border-top: 5px solid ${item.background};">
<span>${item.text}</span>
</div>
`;
strip.append(itemHtml);
});

const initialOffset = (strip.parent().width() / 2) - (totalItemWidth / 2);

strip.css({
'transition': 'none',
'transform': `translateX(${initialOffset}px)`
});

setTimeout(function() {
startAnimation(winnerPosition, winnerItem);
}, 50);
}

// Animasyonu başlatır
function startAnimation(winnerPosition, winnerItem) {
const jitter = (Math.random() - 0.5) * (itemWidth * 0.6);
const targetX = -(winnerPosition * totalItemWidth) + jitter;
let tickCount = 0;
const duration = 8000;
const totalTicks = 50;
const tickInterval = duration / totalTicks;

const tickPlayer = setInterval(function() {
tick_audio.pause();
tick_audio.currentTime = 0;
tick_audio.play();
tickCount++;
if (tickCount >= totalTicks) {
clearInterval(tickPlayer);
}
}, tickInterval);

strip.css({
'transition': 'transform 8s cubic-bezier(0.1, 0.6, 0.1, 1)',
'transform': `translateX(${targetX}px)`
});

// Animasyon bitince çalışacak fonksiyon
setTimeout(function() {
clearInterval(tickPlayer);
onComplete(winnerItem);
}, duration + 100);
}

// Animasyon bittiğinde çalışır
function onComplete(results) {
tick_audio.pause();
tick_audio.currentTime = 0;

$('#won-item-image').attr('src', results.image || '/img/items/default.png');
$('#won-item-text').text(`${results.text} kazandınız!`);
$('#congrats-popup .popup-content').css('border-top-color', results.background);

win_audio.pause();
win_audio.currentTime = 0;
win_audio.volume = 0.25;
win_audio.play();

$('#congrats-popup').css('display', 'flex');

// Butonu tekrar aktif et
$('#openCaseButton').text(lang.play_again || 'Tekrar Aç').removeAttr('disabled').removeClass('disabled').css('cursor', 'pointer');
wheelSpining = false; // Spin durumunu false yap
}

// Popup kapatma butonu
$('#close-popup').on('click', function() {
$('#congrats-popup').hide();
win_audio.pause();
win_audio.currentTime = 0;
});

// Yeni buton tıklama olayı
$('#openCaseButton').on('click', function() {
if (wheelSpining == false) {
wheelSpining = true;
$('#openCaseButton').text(lang.spinning || 'Açılıyor...').attr('disabled', 'disabled').addClass('disabled').css('cursor', 'no-drop');
$('#congrats-popup').hide();

getData(`/fortune-wheel/${lotteryID}/spin`).then(function(ajaxResult) {
if (ajaxResult) {
if (ajaxResult.status) {
generateStrip(parseInt(ajaxResult.result));
} else {
wheelSpining = false;
$('#openCaseButton').text(lang.play_again || 'Tekrar Aç').removeAttr('disabled').removeClass('disabled').css('cursor', 'pointer');

if (ajaxResult.error == 'error_credit') {
swal.fire({
title: lang.alert_title_error,
text: ajaxResult["message"],
type: 'error',
confirmButtonColor: '#02b875',
confirmButtonText: lang.alert_btn_buy_credit
}).then(function() {
window.location = '/credits/charge';
});
} else if (ajaxResult.error == 'error_duration') {
swal.fire({
title: lang.alert_title_error,
text: ajaxResult.message,
type: 'error',
confirmButtonColor: '#02b875',
confirmButtonText: lang.alert_btn_ok
});
} else {
swal.fire({
title: lang.alert_title_error,
text: ajaxResult.message || lang.alert_message_something_went_wrong,
type: 'error',
confirmButtonColor: '#02b875',
confirmButtonText: lang.alert_btn_ok
});
}
}
} else {
wheelSpining = false;
$('#openCaseButton').text(lang.play_again || 'Tekrar Aç').removeAttr('disabled').removeClass('disabled').css('cursor', 'pointer');
}
});
}
});

function initializeStrip() {
strip.empty();
strip.css('transform', 'translateX(0px)');
for (let i = 0; i < stripLength; i++) {
let item = slices[Math.floor(Math.random() * slices.length)];
const rarityClass = getRarityClass(item.background);
const itemHtml = `
<div class="case-item ${rarityClass}" style="border-top: 5px solid ${item.background};">
<span>${item.text}</span>
</div>
`;
strip.append(itemHtml);
}
const initialOffset = (strip.parent().width() / 2) - (totalItemWidth / 2);
strip.css('transform', `translateX(${initialOffset}px)`);
}

$(document).ready(function(){
window.lang = window.lang || {
alert_title_error: "Hata",
alert_message_something_went_wrong: "Bir şeyler ters gitti!",
alert_btn_ok: "Tamam",
alert_btn_buy_credit: "Kredi Satın Al",
spinning: "Açılıyor...",
play_again: "Tekrar Aç"
};
setTimeout(initializeStrip, 200);
});

Genişletmek için tıkla ...

pages/fortune-wheel/show.php

Genişletmek için tıkla ...

<?php $this->layout('layouts/main'); ?>

<?php $this->push('styles') ?>
<link rel="stylesheet" type="text/css" href="<?php echo $this->asset('/css/plugins/superwheel/superwheel.min.css'); ?>">
<style>
/* Genel Ayarlar */
.csgo-case-opener {
background-color: #1b1b1b;
border: 1px solid #0a0a0a;
border-radius: 8px;
padding: 25px;
color: #e0e0e0;
overflow: hidden;
position: relative;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.4);
}

/* Kasa İçeriği Başlığı */
.case-contents h4 {
color: #e0e0e0;
margin-bottom: 10px; /* Azalttık, boşluğu grid'e verdik */
font-size: 1.5em;
text-transform: uppercase;
letter-spacing: 1px;
border-bottom: 2px solid #ffca19;
padding-bottom: 10px;
display: inline-block;
}

/* Kasa İçeriği Gösterme */
.case-contents {
margin-bottom: 40px;
text-align: center;
background-color: #222;
padding: 20px;
border-radius: 5px;
border: 1px solid #111;
}

/* --- Eşya Izgarası --- */
.case-items-grid {
display: flex; /* Flexbox'ı etkinleştir */
flex-wrap: wrap; /* Eşyaların alt satıra geçmesini sağla */
justify-content: center; /* Eşyaları yatayda ortala */
gap: 15px; /* Eşyalar arasına boşluk bırak (margin yerine) */
padding-top: 15px; /* Başlığın altına biraz boşluk */
}


.case-item-preview {
/* display: inline-flex; -> Değişti */
display: flex; /* Artık bir flex öğesi */
background-color: #151515;
border: 1px solid #000;
padding: 15px 10px;
/* margin: 8px; -> Kaldırıldı, 'gap' kullanılıyor */
text-align: center;
width: 110px;
height: 80px;
border-radius: 4px;
/* vertical-align: top; -> Kaldırıldı */
transition: transform 0.2s ease, box-shadow 0.2s ease;
flex-direction: column;
justify-content: center;
align-items: center;
box-sizing: border-box; /* Padding ve border'ı hesaba kat */
}
.case-item-preview:hover {
transform: translateY(-3px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}
.case-item-preview span {
font-size: 12px;
display: block;
color: #fff;
font-weight: bold;
}
/* Nadirlik Renkleri */
.rarity-blue { border-bottom: 4px solid #4b69ff; }
.rarity-purple { border-bottom: 4px solid #8847ff; }
.rarity-pink { border-bottom: 4px solid #d32ce6; }
.rarity-red { border-bottom: 4px solid #eb4b4b; }
.rarity-gold { border-bottom: 4px solid #ffaa00; }


/* Animasyon Alanı */
.case-animation-area {
background: #0f0f0f;
background: linear-gradient(to right, rgba(15,15,15,0) 0%, rgba(15,15,15,1) 10%, rgba(15,15,15,1) 90%, rgba(15,15,15,0) 100%);
padding: 20px 0;
position: relative;
width: 100%;
height: 140px;
overflow: hidden;
border-top: 2px solid #333;
border-bottom: 2px solid #333;
box-shadow: inset 0 0 15px rgba(0,0,0,0.7);
}

/* marker */
.case-marker {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 3px;
height: 100%;
background-color: #ffca19;
box-shadow: 0 0 12px #ffca19, 0 0 5px #ffca19;
z-index: 10;
}
.case-marker::before, .case-marker::after {
content: '';
position: absolute;
left: -5px;
border-style: solid;
}
.case-marker::before {
top: -1px;
border-width: 12px 8px 0 8px;
border-color: #ffca19 transparent transparent transparent;
}
.case-marker::after {
bottom: -1px;
border-width: 0 8px 12px 8px;
border-color: transparent transparent #ffca19 transparent;
}

/* Eşya Şeridi */
#case-strip {
height: 100%;
display: flex;
position: absolute;
left: 50%;
transition: transform 8s cubic-bezier(0.1, 0.6, 0.1, 1);
will-change: transform;
}

/* Eşya Kutusu (Şerit içinde - Daha Koyu) */
.case-item {
width: 120px;
height: 100%;
background: linear-gradient(to bottom, #2a2a2a 0%, #181818 100%);
border: 1px solid #050505;
margin: 0 5px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
box-sizing: border-box;
padding: 10px;
box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
}
.case-item span {
font-size: 11px;
color: #fff;
font-weight: bold;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.case-item.rarity-blue { border-top: 5px solid #4b69ff; }
.case-item.rarity-purple { border-top: 5px solid #8847ff; }
.case-item.rarity-pink { border-top: 5px solid #d32ce6; }
.case-item.rarity-red { border-top: 5px solid #eb4b4b; }
.case-item.rarity-gold { border-top: 5px solid #ffaa00; }

/* Fiyat Bilgisi */
.text-center.my-4 {
color: #aaa;
font-size: 0.9em;
}
.text-center.my-4 strong {
color: #fff;
}

/* CSGO Buton Stili */
#openCaseButton {
background: linear-gradient(to bottom, #89d14a 0%, #6ba335 100%);
border: 1px solid #5a8e2b;
border-radius: 4px;
color: #fff;
font-size: 1.3em;
font-weight: bold;
padding: 15px 40px;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.2s ease-in-out;
box-shadow: 0 3px 0 #4a781b, 0 5px 10px rgba(0,0,0,0.3);
text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
}
#openCaseButton:hover:not(:disabled) {
background: linear-gradient(to bottom, #99e15a 0%, #7bb345 100%);
transform: translateY(-2px);
box-shadow: 0 5px 0 #4a781b, 0 8px 15px rgba(0,0,0,0.3);
}
#openCaseButton:active:not(:disabled) {
transform: translateY(1px);
box-shadow: 0 1px 0 #4a781b, 0 3px 5px rgba(0,0,0,0.3);
}
#openCaseButton:disabled {
background: #555;
color: #999;
border-color: #444;
box-shadow: 0 3px 0 #333;
cursor: not-allowed;
opacity: 0.7;
}

/* Sonuç Ekranı */
#congrats-popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.85);
z-index: 999;
display: none;
justify-content: center;
align-items: center;
backdrop-filter: blur(5px);
}
.popup-content {
background-color: #252525;
padding: 50px 60px;
border-radius: 6px;
text-align: center;
border: 1px solid #111;
box-shadow: 0 10px 40px rgba(0,0,0,0.6);
min-width: 350px;
}
.popup-content h3 {
color: #ffca19;
font-size: 3em;
margin-bottom: 25px;
text-transform: uppercase;
text-shadow: 0 0 10px #ffca19;
}
.popup-content p {
font-size: 1.5em;
color: #fff;
margin-bottom: 40px;
font-weight: bold;
}
#close-popup {
background: linear-gradient(to bottom, #89d14a 0%, #6ba335 100%);
border: 1px solid #5a8e2b;
border-radius: 4px;
color: #fff;
font-size: 1.1em;
font-weight: bold;
padding: 12px 35px;
text-transform: uppercase;
cursor: pointer;
transition: all 0.2s ease-in-out;
box-shadow: 0 3px 0 #4a781b;
text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
}
#close-popup:hover {
background: linear-gradient(to bottom, #99e15a 0%, #7bb345 100%);
transform: translateY(-1px);
}

/* Geçmiş Tablosu (Daha Koyu) */
.table-hover {
background-color: #222;
color: #ccc;
}
.table-hover th {
background-color: #333;
color: #fff;
border-bottom: 2px solid #ffca19;
}
.table-hover td, .table-hover th {
border-color: #444;
}
.table-hover tbody tr:hover {
background-color: #3a3a3a;
color: #fff;
}

</style>
<?php $this->end(); ?>

<?php $this->push('scripts') ?>
<script src="<?php echo $this->asset('/js/plugins/superwheel/superwheel.min.js') ?>"></script>
<script src="<?php echo $this->asset('/js/lottery.js') ?>"></script>
<?php $this->end(); ?>

<section class="section credit-section">
<div class="container">
<div class="row">
<div class="col-md-12">
<?php $this->insert('components/breadcrumb', ['items' => [
[
"url" => url('fortune-wheel.index'),
"text" => t__('Kasalar')
],
[
"text" => $lottery["title"]
]
]]) ?>
</div>
<?php if (count($lotteries) > 0): ?>
<div class="col-md-8">
<div class="card csgo-case-opener">
<div class="card-body p-4">
<script type="text/javascript">
var lotteryID = <?php echo $lottery["id"]; ?>;
var slices = <?php echo json_encode($lottery["slices"]); ?>;
</script>

<?php // Kasa İçeriği Alanı ?>
<div class="case-contents">
<h4><?php e__('Kasa İçeriği') ?></h4>
<?php // --- YENİ: Izgara Sargısı --- ?>
<div class="case-items-grid">
<?php foreach ($lottery["slices"] as $slice): ?>
<div class="case-item-preview" style="border-bottom: 4px solid <?php echo $slice['background']; ?>">
<span><?php echo $slice['text']; ?></span>
</div>
<?php endforeach; ?>
</div>
<?php // --- YENİ SONU --- ?>
</div>

<?php // Kasa Animasyon Alanı ?>
<div class="case-animation-area">
<div class="case-marker"></div>
<div id="case-strip">
</div>
</div>

<div class="superwheel" style="display: none;"></div>

<p class="text-center my-4">
<?php if ($lottery["price"] == 0): ?>
<?php e__('Bu kasayı her <strong>%duration% saatte bir</strong> ücretsiz açabilirsiniz.', ['%duration%' => $lottery["duration"]]) ?>
<?php else: ?>
<?php e__('Bu kasayı <strong>%price% kredi</strong> karşılığında açabilirsiniz.', ['%price%' => $lottery["price"]]) ?>
<?php endif; ?>
</p>
<div class="d-flex justify-content-center mt-4 mb-3">
<button id="openCaseButton"><?php e__('Kasayı Aç!') ?></button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card mb-3" style="background-color: #1b1b1b; border: 1px solid #0a0a0a;">
<div class="card-header d-flex align-items-center justify-content-between" style="background-color: #252525; border-bottom: 1px solid #0a0a0a;">
<h2 class="card-title fs-100" style="color: #e0e0e0;"><?php e__('%title% Geçmişi', ['%title%' => $lottery["title"]]) ?></h2>
<a href="<?php echo url('fortune-wheel.logs') ?>" class="small" style="color: #ffca19;"><?php e__('Tümünü Gör') ?></a>
</div>
<?php if (count($logs) > 0): ?>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th><?php e__('Ödül') ?></th>
<th class="text-end"><?php e__('Tarih') ?></th>
</tr>
</thead>
<tbody>
<?php foreach ($logs as $log): ?>
<tr>
<td>
<?php echo $log["title"]; ?>
</td>
<td class="text-end">
<?php echo carbon($log["creationDate"])->intlFormat(); ?>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
<?php else: ?>
<div class="card-body" style="background-color: #222;">
<?php $this->insert('components/alert', ['type' => 'error', 'message' => t__('Geçmiş bulunamadı!')]); ?>
</div>
<?php endif; ?>
</div>
</div>
<?php else: ?>
<div class="col-md-12">
<?php $this->insert('components/alert', ['type' => 'error', 'message' => t__('Kasa bulunamadı!')]); ?>
</div>
<?php endif; ?>
</div>
</div>
</section>

<?php // Popup Alanı ?>
<div id="congrats-popup">
<div class="popup-content">
<h3><?php e__('Tebrikler!') ?></h3>
<p id="won-item-text"></p>
<button id="close-popup"><?php e__('Harika!') ?></button>
</div>
</div>

Genişletmek için tıkla ...

pages/fortune-wheel/index.php

Genişletmek için tıkla ...

<?php $this->layout('layouts/main'); ?>

<?php $this->push('styles') ?>
<style>
/* Genel Bölüm */
.store-section {
padding-top: 20px;
padding-bottom: 40px;
}

/* Başlık stil */
.store-section h2 {
color: #e0e0e0;
text-transform: uppercase;
letter-spacing: 1px;
border-bottom: 2px solid #ffca19;
padding-bottom: 10px;
display: inline-block;
margin-bottom: 30px !important;
}

/* Kasa kart stilleri */
.store-section .card {
background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
border: 1px solid #0a0a0a;
border-radius: 8px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
height: 100%;
display: flex;
flex-direction: column;
}

.store-section .card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.store-section .card-body {
padding: 25px;
color: #c0c0c0;
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: space-between;
}

/* Resim Stili */
.store-section .card-body img {
border: 3px solid #444;
border-radius: 50%;
padding: 5px;
background-color: #111;
filter: grayscale(70%) brightness(0.8) contrast(1.2);
transition: filter 0.3s ease, transform 0.3s ease;
max-width: 100px;
height: 100px;
object-fit: cover;
}
.store-section .card:hover img {
filter: grayscale(20%) brightness(1) contrast(1.1);
transform: rotate(45deg);
}

/* Kasa Adı Stili */
.store-section .card-title {
color: #ffffff;
font-weight: bold;
font-size: 1.2em;
margin-top: 15px;
min-height: 48px;
}

/* Fiyat Stili */
.store-section .card-text {
color: #ffca19;
font-size: 1.1em;
font-weight: bold;
margin-top: auto;
margin-bottom: 20px;
}

/* CSGO Buton Stil */
.store-section .btn-csgo {
background: linear-gradient(to bottom, #89d14a 0%, #6ba335 100%);
border: 1px solid #5a8e2b;
border-radius: 4px;
color: #fff !important;
font-size: 1.1em;
font-weight: bold;
padding: 12px 25px;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.2s ease-in-out;
box-shadow: 0 3px 0 #4a781b;
text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
display: inline-block;
text-decoration: none !important;
}
.store-section .btn-csgo:hover {
background: linear-gradient(to bottom, #99e15a 0%, #7bb345 100%);
transform: translateY(-2px);
box-shadow: 0 5px 0 #4a781b;
color: #fff !important;
}
.store-section .btn-csgo:active {
transform: translateY(1px);
box-shadow: 0 1px 0 #4a781b;
}

.store-section .col-md-3 {
margin-bottom: 30px;
}

</style>
<?php $this->end(); ?>

<section class="section store-section">
<div class="container">
<div class="row">
<div class="col-md-12">
<?php $this->insert('components/breadcrumb', ['items' => [
[
"text" => t__('Mavikurt Kasaları') // Değiş: Başlık
]
]]) ?>
</div>
</div>

<h2 class="h4 mt-3 mb-3"><?php e__('Mavikurt Kasaları') ?></h2> <?php // Değiş: Başlık ?>

<?php if (count($lotteries)): ?>
<div class="row">
<?php foreach ($lotteries as $lottery): ?>
<div class="col-md-3">
<div class="card">
<div class="card-body text-center">
<div>
<img class="mb-3" src="<?php echo $this->asset('/img/fortune-wheel.png') ?>" alt="<?php echo $lottery["title"]; ?>" width="100px">
<h5 class="card-title mb-2"><?php echo $lottery["title"]; ?></h5>
<p class="card-text">
<?php if ($lottery["price"] == 0): ?>
<?php e__('Ücretsiz') ?>
<?php else: ?>
<?php echo money()->credits($lottery["price"]); ?>
<?php endif; ?>
</p>
</div>
<a href="<?php echo url('fortune-wheel.show', ["slug" => $lottery["slug"]]); ?>" class="btn-csgo">
<?php e__('Kasayı Aç') ?>
</a>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
<?php else: ?>
<?php $this->insert('components/alert', ['type' => 'error', 'message' => t__('Kasa bulunamadı!')]); ?>
<?php endif; ?>
</div>
</section>

Genişletmek için tıkla ...