Skip to content
This repository was archived by the owner on Mar 15, 2024. It is now read-only.

Patch: Use a pop-up system instead of alert() #29

Open
TummanapallyAnuraag wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Patch: Use a pop-up system instead of alert() #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 47 additions & 0 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,12 +49,14 @@
text-align: center;
z-index: 100;
position: relative;
font-family: 'Comic Sans MS', cursive, sans-serif;
}
#time_remaining {
text-align: center;
font-size: 26pt;
z-index: 100;
position: relative;
font-family: 'Comic Sans MS', cursive, sans-serif;
}
.difficulty {
position: absolute;
Expand Down Expand Up @@ -89,6 +91,46 @@
color: white;
text-align: center;
}
.popup{
left: calc( 50% - 150px );
position: absolute;
top: 10%;
background: white;
width: 300px;
height: 150px;
z-index: 102;
border-radius: 10px;
display: none;
font-family: 'Comic Sans MS', cursive, sans-serif;
}
.popup .message_box{
width: 100%;
display: block;
height: calc( 100% - 25px);
text-align: center;
position: relative;
}
.popup .message_box .message{
display: block;
margin: auto;
padding: 30px;
}
.popup button{
margin: auto;
display: block;
background-color: #A3A948;
border: 1px solid black;
border-radius: 15px;
width: 60px;
cursor: pointer;
}
.overlay{
z-index: 101;
background-color: grey;
width: 100%;
height: 100%;
display: none;
}
</style>
</head>
<body>
Expand All @@ -112,6 +154,11 @@ <h2 id="time_remaining"></h2>
<button class="diff-btn" id="HARD">Hard</button>
<button class="diff-btn" id="EXTREME">Extreme</button>
</div>
<div class="overlay"></div>
<div class="popup">
<div class="message_box"><div class="message">Sample Message</div></div>
<button id="continue_btn">OK</button>
</div>
</div>
<audio src="http://www.nyan.cat/music/technyancolor.ogg" autoplay loop></audio>
<audio id="count-sound" src="http://freesound.org/data/previews/131/131660_2398403-lq.mp3"></audio>
Expand Down
77 changes: 52 additions & 25 deletions src/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@ const diff_enum = {
EXTREME: 100,
};

// Flag: 0 => Will not restart game after game ends.; 1=> otherwise.
window.restart_after_end = 0;

//Setting difficulty from url
const url = new URL(window.location);
let diff_param = url.searchParams.get("difficulty");
Expand All @@ -28,6 +31,48 @@ const catch_me = document.getElementById("catch_me"),
level_description = document.getElementById("level_description"),
time_remaining = document.getElementById("time_remaining");

// Pop-Up
const popup_element = document.querySelectorAll(".popup")[0],
message_element = document.querySelectorAll(".message")[0],
overlay = document.querySelectorAll(".overlay")[0],
continue_btn = document.getElementById("continue_btn");
const popup = (message) => {
catch_me.style.display = "none";
overlay.style.display = "block";
message_element.innerHTML = message;
popup_element.style.display = "block";
};

// on click event for OK button.
continue_btn.addEventListener("click", e => {
catch_me.style.display = "block";
overlay.style.display = "none";
popup_element.style.display = "none";

if((window.status != 'end_game') || (window.restart_after_end == 1)){
// Starting value for level timer,
const level_start = new Date().getTime();

const t = setInterval(function () {
// Get today's date and time
const now = new Date().getTime();
let timer = target_time_millis + (level_start - now);
displayTimer(timer);

if (timer < 0) {
clearInterval(t);
window.status = 'end_game';
end_game();
}
if (count >= target_score) {
clearInterval(t);
advanceLevel();
startNewLevel();
}
}, 100);
}
});

// Useful global values
const catch_height = 50,
catch_width = 100,
Expand Down Expand Up @@ -97,7 +142,7 @@ diff_btns.forEach(el => {


const setTargets = () => {
target_time = 60; // seconds
target_time = 15; // seconds
target_time_millis = target_time * 1000;
target_score = current_level * 5;
};
Expand Down Expand Up @@ -126,7 +171,7 @@ const advanceLevel = () => {

const end_game = () => {
total_score += count;
alert("You passed " + (current_level - 1) + " levels and earned a score of " + total_score + "!");
popup("Time's Up! <br> You passed " + (current_level - 1) + " levels and earned a score of " + total_score + "!");
};

const startNewLevel = () => {
Expand All @@ -137,30 +182,12 @@ const startNewLevel = () => {
mv_catch_y();
total_score += count;
count = 0;
level_message = "Ready...Set...Go!";
if(current_level > 1){
level_message = "Congratulations! You have leveled up.<br>" + level_message;
}
popup(level_message);

alert("Ready...Set...Go!");

// Starting value for level timer,
const level_start = new Date().getTime();

const t = setInterval(function () {
// Get today's date and time
const now = new Date().getTime();
let timer = target_time_millis + (level_start - now);
displayTimer(timer);

if (timer < 0) {
clearInterval(t);
alert("Time's Up!");
end_game();
}
if (count >= target_score) {
alert("Congratulations! You have leveled up.");
clearInterval(t);
advanceLevel();
startNewLevel();
}
}, 100);
};

const game = () => {
Expand Down