404 lines
17 KiB
PHP
404 lines
17 KiB
PHP
<?php
|
|
$prizes = array(
|
|
"Dental Care <br/> Voucher",
|
|
"IELTS/PTE <br/> Voucher",
|
|
"Mobile Holder",
|
|
"Movie Ticket",
|
|
"Try Again",
|
|
"Free Mock Test",
|
|
"Notebook",
|
|
"Keyring",
|
|
"Nepcoms Goodies",
|
|
"Better Luck <br/> Next Time"
|
|
);
|
|
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<!-- <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
|
|
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js" integrity="sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
|
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<link rel="stylesheet" type="text/css" href="<?php echo site_url("/games/spin_the_wheel/style.css"); ?>" />
|
|
<title>BIB Spin The Wheel Game</title>
|
|
|
|
</head>
|
|
|
|
<body style="overflow-x: hidden;">
|
|
<?php
|
|
if (session()->has('mobile')) {
|
|
$registration = LMS::checkRegistrationByMobile(session('mobile'));
|
|
} else {
|
|
?>
|
|
<script>
|
|
// Open the modal when the page loads
|
|
$(document).ready(function() {
|
|
// openModal();
|
|
$('#myModal').modal('show');
|
|
// Disable the page scrolling
|
|
$('body').addClass('modal-open');
|
|
});
|
|
</script>
|
|
<?php
|
|
}
|
|
|
|
?>
|
|
<div class="container">
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-md-7 col-lg-7 col-12">
|
|
<div class="row">
|
|
<div class="col-4">
|
|
<img src="<?php echo site_url("games/spin_the_wheel/nepcoms_game_logo.png"); ?>" class="img-fluid" width="200" style="margin-top: 20px;" />
|
|
</div>
|
|
<div class="col-8">
|
|
<img src="<?php echo site_url("games/spin_the_wheel/nepcoms_game_heading.png"); ?>" class="img-fluid" style="margin-top: 20px;" />
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-12" style="min-width: 700px;">
|
|
<div class="mainbox" id="mainbox" style="margin: -80px auto 0px auto;">
|
|
<?php $prizesets = array_chunk($prizes, 5); ?>
|
|
<div class="box" id="box">
|
|
<div class="box1">
|
|
<?php $span = 0;
|
|
foreach ($prizesets[0] as $p) : $span++; ?>
|
|
<span class="font span{{$span}}"><b>{!!$p!!}</b></span>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<div class="box2">
|
|
<?php $span = 0;
|
|
foreach ($prizesets[1] as $p) : $span++; ?>
|
|
<span class="font span{{$span}}"><b>{!!$p!!}</b></span>
|
|
<?php endforeach; ?>
|
|
|
|
</div>
|
|
</div>
|
|
<button class="spin" a_onclick="startspin()"></button>
|
|
</div>
|
|
<div class="text-center pt-3">
|
|
<a href="#" onclick="startspin()" style="z-index: 9999; position: relative;"><img src="<?php echo site_url("games/spin_the_wheel/nepcoms_game_spin.png"); ?>" class="img-fluid" /></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-md-5 col-lg-5 col-12">
|
|
<?php if (isset($registration)) : ?>
|
|
<div class="" style="margin-top: 250px; @media (max-width:600px) { margin-top: 0; }">
|
|
<div class="card shadow">
|
|
<div class="card-body text-center">
|
|
<h2 class="card-title">Welcome {{$registration->name}}</h2>
|
|
<h5 class="card-title">Registration Details</h5>
|
|
<p>Name:<?php echo $registration->name; ?></p>
|
|
<p>Email:<?php echo $registration->email; ?></p>
|
|
<p>Phone:<?php echo $registration->mobile; ?></p>
|
|
|
|
<a href="<?php echo route("game.reset"); ?>" class="btn btn-primary">Logout</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
</div>
|
|
</div>
|
|
<div class="row mt-5">
|
|
|
|
<div class="col-12">
|
|
|
|
<?php if (isset($registration)) : ?>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/dataTables.bootstrap.min.css" integrity="sha512-BMbq2It2D3J17/C7aRklzOODG1IQ3+MHw3ifzBHMBwGO/0yUqYmsStgBjI0z5EYlaDEFnvYV7gNYdD3vFLRKsA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/dataTables.foundation.min.css" integrity="sha512-jyhJOXPqmwwlzhhy2/7edoig3tkyTClebiDZsV2zGb5k4nBol09WyZhK7w1KLl11q79UJjPWgybVu1m52cVehw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/dataTables.bootstrap4.min.css" integrity="sha512-PT0RvABaDhDQugEbpNMwgYBCnGCiTZMh9yOzUsJHDgl/dMhD9yjHAwoumnUk3JydV3QTcIkNDuN40CJxik5+WQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
<div class="card shadow">
|
|
<div class="card-body text-center">
|
|
<h5 class="card-title">Winner Board</h5>
|
|
<style>
|
|
table {
|
|
width: 90%;
|
|
border-collapse: collapse;
|
|
margin: 20px auto;
|
|
}
|
|
|
|
th,
|
|
td {
|
|
border: 1px solid #ddd;
|
|
padding: 8px;
|
|
text-align: left;
|
|
}
|
|
|
|
th {
|
|
background-color: #f2f2f2;
|
|
}
|
|
|
|
tr:nth-child(even) {
|
|
background-color: #f9f9f9;
|
|
}
|
|
</style>
|
|
|
|
<table class="table dataTable">
|
|
|
|
<thead>
|
|
<tr>
|
|
<th>Sn</th>
|
|
<th>Name</th>
|
|
<th>Mobile</th>
|
|
<th>Prize</th>
|
|
<!-- Add more data cells as needed -->
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php $a = 0;
|
|
foreach (LMS::spinwheelwinners() as $winner) : $a++; ?>
|
|
<tr>
|
|
<td><?php echo $a; ?></td>
|
|
<td><?php echo $winner->title; ?></td>
|
|
<td><?php echo $winner->Winner->mobile; ?></td>
|
|
<td><?php echo $winner->prize; ?></td>
|
|
<!-- Add more data cells as needed -->
|
|
</tr>
|
|
<?php endforeach; ?>
|
|
|
|
</tbody>
|
|
<!-- Add more rows as needed -->
|
|
|
|
</table>
|
|
<a href="<?php echo route("game.reset"); ?>" class="btn btn-primary">Logout</a>
|
|
</div>
|
|
</div>
|
|
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="modal" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
|
|
<div class="modal-content">
|
|
<form method="post" action="<?php echo route("game.login"); ?>">
|
|
@csrf
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="exampleModalLabel">Login to Spin The Wheel</h5>
|
|
</div>
|
|
<div class="modal-body text-center">
|
|
<input type="text" name="mobile" class="form-control" value="" placeholder="Enter Your Registered Mobile Number" />
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="submit" class="btn btn-secondary">Log in</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<audio controls="controls" id="applause" src="<?php echo site_url("/games/spin_the_wheel/applause.mp3"); ?>" type="audio/mp3"></audio>
|
|
<audio controls="controls" id="wheel" src="<?php echo site_url("/games/spin_the_wheel/wheel.mp3"); ?>" type="audio/mp3"></audio>
|
|
|
|
<script>
|
|
function shuffle(array) {
|
|
var currentIndex = array.length,
|
|
randomIndex;
|
|
|
|
// While there remain elements to shuffle...
|
|
while (0 !== currentIndex) {
|
|
// Pick a remaining element...
|
|
randomIndex = Math.floor(Math.random() * currentIndex);
|
|
currentIndex--;
|
|
|
|
// And swap it with the current element.
|
|
[array[currentIndex], array[randomIndex]] = [
|
|
array[randomIndex],
|
|
array[currentIndex],
|
|
];
|
|
}
|
|
|
|
return array;
|
|
}
|
|
$.spin = 0;
|
|
|
|
function startspin() {
|
|
if ($.spin == 0) spin();
|
|
$.spin = 1;
|
|
}
|
|
|
|
function spin() {
|
|
// Play the sound
|
|
wheel.play();
|
|
// Inisialisasi variabel
|
|
const box = document.getElementById("box");
|
|
const element = document.getElementById("mainbox");
|
|
let SelectedItem = "";
|
|
|
|
// Shuffle 450 because the 'box1' class has already been rotated by 90 degrees initially. Minus 40 per item to position the arrow in the middle.
|
|
// Each item has a winning probability of 12.5%, except for the 'sepeda' (bicycle) item, which only has around a 4% chance of winning.
|
|
// Items represented by 'ipad' and 'samsung tab' will never win.
|
|
// Uncomment the line below if you want to include the 'sepeda' item with a possibility of 33% or 1/3.
|
|
// let Sepeda = shuffle([2210]); // Probability: 33% or 1/3
|
|
|
|
let prize1 = shuffle([1890, 2250, 2610]);
|
|
let prize2 = shuffle([1850, 2210, 2570]); //Kemungkinan : 100%
|
|
let prize3 = shuffle([1810, 2170, 2530]);
|
|
let prize4 = shuffle([1770, 2130, 2490]);
|
|
let prize5 = shuffle([1750, 2110, 2470]);
|
|
let prize6 = shuffle([1630, 1990, 2350]);
|
|
let prize7 = shuffle([1570, 1930, 2290]);
|
|
|
|
// Bentuk acak
|
|
let Hasil = shuffle([
|
|
prize1[1],
|
|
prize2[1],
|
|
prize3[1],
|
|
prize4[1],
|
|
prize5[1],
|
|
prize6[1],
|
|
prize7[1],
|
|
]);
|
|
// console.log(Hasil[0]);
|
|
/*
|
|
$prizes = array(
|
|
"Dental Care <br/> Voucher", 0
|
|
"IELTS/PTE <br/> Voucher", 1
|
|
"Mobile Holder", 2
|
|
"Movie Ticket", 3
|
|
"Try Again", 4
|
|
"Free Mock Test", 5
|
|
"Notebook", 6
|
|
"Keyring", 7
|
|
"Nepcoms Goodies", 8
|
|
"Better Luck <br/> Next Time" 9
|
|
);
|
|
*/
|
|
|
|
// Ambil value item yang terpilih
|
|
<?php foreach($prizes as $prize) : $prize=str_replace("<br/","\n", $prize);endforeach; ?>
|
|
|
|
if (prize7.includes(Hasil[0])) SelectedItem = "{{$prizes[1]}}";
|
|
if (prize1.includes(Hasil[0])) SelectedItem = "{{$prizes[2]}}";
|
|
if (prize2.includes(Hasil[0])) SelectedItem = "{{$prizes[3]}}";
|
|
if (prize3.includes(Hasil[0])) SelectedItem = "{{$prizes[4]}}";
|
|
if (prize4.includes(Hasil[0])) SelectedItem = "{{$prizes[5]}}";
|
|
if (prize5.includes(Hasil[0])) SelectedItem = "{{$prizes[6]}}";
|
|
if (prize6.includes(Hasil[0])) SelectedItem = "{{$prizes[9]}}";
|
|
|
|
// Proses
|
|
box.style.setProperty("transition", "all ease 5s");
|
|
box.style.transform = "rotate(" + Hasil[0] + "deg)";
|
|
element.classList.remove("animate");
|
|
setTimeout(function() {
|
|
element.classList.add("animate");
|
|
}, 5000);
|
|
|
|
// Munculkan Alert
|
|
<?php if (isset($registration)) : ?>
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: '<?php echo route("game.savewinner"); ?>', // Replace with your server-side endpoint
|
|
data: {
|
|
"_token": "{{ csrf_token() }}",
|
|
"registration_id": "<?php echo $registration->registration_id; ?>",
|
|
"name": "<?php echo $registration->name; ?>",
|
|
"prize": SelectedItem,
|
|
},
|
|
success: function(response) {
|
|
// Handle success
|
|
console.log(response);
|
|
},
|
|
error: function(error) {
|
|
// Handle error
|
|
console.log(error);
|
|
}
|
|
});
|
|
<?php endif; ?>
|
|
|
|
// Set a timeout to execute the following code after 5500 milliseconds (5.5 seconds)
|
|
setTimeout(function() {
|
|
applause.play(); // Assuming 'applause' is an audio element
|
|
swal({
|
|
title: "Congratulations",
|
|
text: "You got " + SelectedItem + "\n\nPlay Again?",
|
|
icon: "info",
|
|
buttons: ["No", "Yes"],
|
|
}, )
|
|
.then((isConfirmed) => {
|
|
|
|
if (isConfirmed) {
|
|
|
|
window.location.href = "{{ route('game.reset') }}";
|
|
} else {
|
|
// Handle the case when the user pressed "No"
|
|
// You can add additional logic here if needed
|
|
};
|
|
})
|
|
}, 6500);
|
|
|
|
|
|
// Delay and set to normal state
|
|
// setTimeout(function() {
|
|
// swal({
|
|
// title: "Next Player?",
|
|
// icon: "info",
|
|
// buttons: ["No", "Yes"],
|
|
// })
|
|
// .then((isConfirmed) => {
|
|
// // Check the user's choice
|
|
// if (isConfirmed) {
|
|
// // Reload the page if the user pressed "Yes"
|
|
// window.location.href = "{{ route('game.reset') }}";
|
|
// } else {
|
|
// // Handle the case when the user pressed "No"
|
|
// // You can add additional logic here if needed
|
|
// }
|
|
// });
|
|
// }, 10000);
|
|
}
|
|
</script>
|
|
<script>
|
|
// $.noConflict();
|
|
$(document).ready(function() {
|
|
$('.dataTable').DataTable();
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
// Open the modal
|
|
function openModal() {
|
|
$('#myModal').modal('show');
|
|
// Disable the page scrolling
|
|
$('body').addClass('modal-open');
|
|
}
|
|
|
|
// Close the modal
|
|
function closeModal() {
|
|
$('#myModal').modal('hide');
|
|
// Enable the page scrolling
|
|
$('body').removeClass('modal-open');
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|