<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css" />
<script
src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"
></script>
<script src="lib/script.js"></script>
</head>
<body>
<h2>Scratch Ticket Lottery Simulator</h2>
<div id="curr_ticket">
<div><strong>Ticket #</strong> <span id="ticket_id"></span></div>
<div><strong>Prize Name</strong> <span id="ticket_name"></span></div>
<div>
<strong>Prize Amount</strong>
<span id="ticket_amount"></span>
</div>
</div>
<div id="stats">
<div><strong>Games Played</strong><span id="games_played">0</span></div>
<div><strong>Cash Prize</strong><span id="average_win">0</span></div>
<div><strong>Any Prize</strong><span id="any_prize_percentage">0</span></div>
<div><strong>Tickets Remaining</strong><span id="tickets_remaining"></span></div>
<div><strong>Cash</strong><span id="cash_remaining"></span></div>
</div>
<div id="controls">
<button id="buy">Buy Ticket ($10)</button>
</div>
<div id="console"></div>
<script></script>
</body>
</html>
/* Add your styles here */
body{
font-family:"Arial",Helvetica,sans-serif;
font-size:125%;
width:90%;
margin:auto;
background-image: url(https://avatars.mds.yandex.net/i?id=c43e15490441cbd0a28280eab1fe3383-5247746-images-thumbs&ref=rim&n=13&w=1000&h=1000);
background-repeat: repeat;
}
h2{
background-image: url(https://xmple.com/wallpaper/green-linear-gradient-white-2160x1080-c2-006400-ffffff-a-270-f-14.svg);
background-position: left;
background-repeat: repeat;
color:#fff;
background-color: #e8e8e8;
border-radius:3px;
padding:5px;
text-align:center;
border:5px solid rgb(200,200,200);
text-shadow: 2px -1px darkgreen;
}
#curr_ticket div,#stats div{
margin:10px 0;
border-bottom:1px dotted #bbb;
}
#curr_ticket div span, #stats div span{
margin-left:10px;
}
#curr_ticket div strong,#stats div strong{
display:inline-block;
width:50%;
}
#curr_ticket{
border:5px solid rgb(162, 180, 161);
border-radius:5px;
color:#333;
}
#stats {
border:5px solid rgb(216, 216, 216);
border-radius:5px;
color:#333;
}
#curr_ticket,#stats{
margin-top:15px;
background-color:#f9f9f9;
padding:5px;
}
#controls{
margin-top:10px;
}
.error{
font-weight:bold;
font-size:22px;
color:red;
border:5px solid darkred;
border-radius:5px;
text-align:center;
padding: 10px 0;
background-color: #fff;
}
#cash_remaining{
color:darkgreen;
font-weight:bold;
}
.money{
color:darkgreen;
font-weight:bold;
}
.winner{
font-weight:bold;
color:darkgreen;
text-shadow:1px 1px #fff;
}
button{
font-size:17px;
font-weight:bold;
padding:5px 10px;
}
button:active{
background-color: #fff;
color:darkgreen;
}
const toPercent = (decimal) => {
return decimal.toLocaleString('en-US', {
style: 'percent',
// Ensures no extra decimal places are shown (15.00% vs 15%)
maximumFractionDigits: 2,
});
};
function shuffle(array) {
let currentIndex = array.length,
randomIndex;
// While there remain elements to shuffle.
while (currentIndex != 0) {
// 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;
}
class PrizeGroup {
constructor(name, prize_amount, prizes_total) {
this.name = name;
this.prize_amount = prize_amount;
this.prizes_total = prizes_total;
this.prizes_remaining = this.prizes_total;
}
toArray() {
return {
name: this.name,
prizes_remaining: this.prizes_remaining,
prizes_total: this.prizes_total,
prize_amount: this.prize_amount,
};
}
}
class Game {
#prizes = [];
#initialized = false;
#all_tickets = [];
constructor(name, tickets_total) {
this.name = name;
this.tickets_total = tickets_total;
}
addPrizeGroup(name, prize_amount, num_prizes) {
this.#prizes.push(new PrizeGroup(name, prize_amount, num_prizes));
}
initGame() {
if (this.#initialized) {
throw new Error('Game already initialized!');
} else {
this.#initialized = true;
let unique_id = 1;
for (let i = 0; i < this.#prizes.length; i++) {
const p_total = this.#prizes[i].prizes_total;
for (let j = 0; j < p_total; j++) {
let ticket = {
name: this.#prizes[i].name,
prize_amount: this.#prizes[i].prize_amount,
id: unique_id,
};
this.#all_tickets.push(ticket);
unique_id++;
}
}
this.#all_tickets = shuffle(this.#all_tickets);
}
}
play() {
return this.#all_tickets.pop();
}
}
function initGame() {
const p1 = {
name: 'Not A Winner',
prize_amount: -10,
num_prizes: 68450,
};
const p2 = {
name: 'Free Ticket',
prize_amount: 0,
num_prizes: 20000,
};
const p3 = {
name: 'Super!',
prize_amount: 20,
num_prizes: 9000,
};
const p4 = {
name: 'Amazing!',
prize_amount: 100,
num_prizes: 2000,
};
const p5 = {
name: 'Incredible!',
prize_amount: 500,
num_prizes: 500,
};
const p6 = {
name: 'Unreal!',
prize_amount: 50000,
num_prizes: 50,
};
const prizes = [p1, p2, p3, p4, p5, p6];
let total_tickets = 0;
for (let i = 0; i < prizes.length; i++) {
total_tickets += prizes[i].num_prizes;
}
const game = new Game('Lottery Scratcher', total_tickets);
for (let i = 0; i < prizes.length; i++) {
game.addPrizeGroup(
prizes[i].name,
prizes[i].prize_amount,
prizes[i].num_prizes
);
}
game.initGame();
return game;
}
$(document).ready(function () {
const buy = $('#buy');
const tickets_remaining = $('#tickets_remaining');
//const curr_ticket=$('#curr_ticket');
const ticket_id = $('#ticket_id');
const ticket_name = $('#ticket_name');
const ticket_amount = $('#ticket_amount');
const cash_remaining = $('#cash_remaining');
const cons = $('#console');
const games_played = $('#games_played');
const average_win = $('#average_win');
const any_prize_percentage_element = $('#any_prize_percentage');
const game = initGame();
let money = 300;
let g_played = 0;
let cash_prize = 0;
let cash_prize_percentage = 0;
let any_prize = 0;
let any_prize_percentage = 0;
//const results={tickets_played:0,prizes_won:[]};
let remaining = game.tickets_total;
tickets_remaining.html(remaining.toLocaleString('en-US'));
cash_remaining.html(`\$${money}`.toLocaleString('en-US'));
buy.on('click', function () {
g_played++;
const ticket = game.play();
remaining--;
//console.log(ticket);
ticket_id.html(ticket.id.toLocaleString('en-US'));
ticket_name.html(ticket.name);
ticket_amount.html(`\$${ticket.prize_amount}`.toLocaleString('en-US'));
tickets_remaining.html(remaining.toLocaleString('en-US'));
money += ticket.prize_amount;
let format_money=money.toLocaleString('en-US');
if (ticket.prize_amount > 0) {
cash_prize++;
any_prize++;
ticket_amount.addClass('money');
ticket_name.addClass('winner');
} else if (ticket.prize_amount >= 0) {
any_prize++;
ticket_amount.removeClass('money');
ticket_name.removeClass('winner');
}else{
ticket_amount.removeClass('money');
ticket_name.removeClass('winner');
}
cash_prize_percentage = cash_prize / g_played;
any_prize_percentage = any_prize / g_played;
average_win.html(toPercent(cash_prize_percentage));
any_prize_percentage_element.html(toPercent(any_prize_percentage));
cash_remaining.html(`\$${format_money}`);
games_played.html(g_played);
if (money <= 0) {
cons.html('You are out of money!').addClass('error');
buy.remove();
}
});
});