Skip to content

Commit

Permalink
added game rules popup (#429)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ankit1576
ankit1576 authored Aug 1, 2024
1 parent bf03470 commit ea70628
Showing 1 changed file with 151 additions and 11 deletions.
162 changes: 151 additions & 11 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -886,16 +886,156 @@
<div class="history has-dropdown animate" style="cursor: pointer">
<i class="fa-solid fa-clock"></i> History
</div>
<div class="history-container animate"></div>
<div class="game-rules has-dropdown animate">
<button
class="game-rules has-dropdown"
style="margin-left: -1.7rem; cursor: pointer"
onclick="location.href='gamerules.html'"
>
<i class="fa-solid fa-chess"></i> Game Rules
</button>
</div>
<!-----game rules-------------------------------------------------------->
<style>
/* Basic styling for the popup */
#popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 800px;
height: auto;
max-height: 90vh;
overflow-y: auto;
color: black;
padding: 20px;
background-color: rgba(255, 255, 255, 0.95); /* Translucent background */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
z-index: 1000;
border-radius: 10px;
}

/* Dark background behind the popup */
#popup-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
}

/* Close button style */
.close-btn {
position: absolute;
top: 14px;
right: 17px;
cursor: pointer;
color: black;
font-size: 1.5rem;
}


.button1:hover {
background-color: #0056b3;
}

/* Responsive design */
@media (max-width: 600px) {
#popup {
width: 95%;
padding: 10px;
}

.close-btn {
font-size: 1.2rem;
}
}

/* Ensure a smooth transition */
#popup, #popup-overlay {
transition: all 0.3s ease-in-out;
}
</style>
</head>
<body>
<div class="game-rules has-dropdown animate">
<button
class="game-rules has-dropdown"
style="margin-left: -1.7rem; cursor: pointer"
id="game-rules-btn"
>
<i class="fa-solid fa-chess"></i> Game Rules
</button>
</div>

<!-- Popup Overlay -->
<div id="popup-overlay"></div>

<!-- Popup Content -->
<div id="popup">
<i class="fa-solid fa-times close-btn" id="close-btn"></i>
<h2>Game Rules</h2>
<p>Here are the basic rules of the game...</p>
<h4>How To Play?</h4>
<hr />
<p>Conway's Game of Life, or simply "Life," is a cellular automaton devised by British mathematician John Horton Conway in 1970.
It is a zero-player game, meaning its evolution is determined by its initial state, requiring no further input. Players interact with
the game by creating an initial configuration and observing how it evolves. The game is Turing complete and can simulate a
universal constructor or any other Turing machine.</p>
<hr />
<h4>The Universe</h4>
<p>The universe of the Game of Life is an infinite, two-dimensional orthogonal grid of square cells,
Each cell is in one of two possible states, ALIVE or DEAD.
Every cell interacts with its eight neighbors, which are the cells that are horizontally, vertically, or diagonally adjacent.</p>
<hr />
<h4>Rules</h4>
<ol>
<li>Any live cell with fewer than two live neighbors dies, as if by underpopulation.</li>
<li>Any live cell with two or three live neighbors lives on to the next generation.</li>
<li>Any live cell with more than three live neighbors dies, as if by overpopulation.</li>
<li>Any dead cell with exactly three live neighbors becomes a live cell, as if by reproduction.</li>
</ol>
<p>The first generation is created by applying the above rules simultaneously to every cell in the seed, alive or dead; births and
deaths occur simultaneously, and the discrete moment at which this happens is sometimes called a tick. Each generation is a pure function
of the preceding one.</p>
<button class="button1" id="more-btn" style="margin-top: 20px;
padding: 10px 20px;
background-color: #007BFF;
color: white;
margin-left: 44%;
width: 87px;
border: none;
border-radius: 5px;
cursor: pointer;">More</button>
</div>

<script>
const popup = document.getElementById('popup');
const popupOverlay = document.getElementById('popup-overlay');
const gameRulesBtn = document.getElementById('game-rules-btn');
const closeBtn = document.getElementById('close-btn');
const moreBtn = document.getElementById('more-btn');

// Function to show the popup
gameRulesBtn.onclick = function() {
popup.style.display = 'block';
popupOverlay.style.display = 'block';
};

// Function to close the popup
closeBtn.onclick = function() {
popup.style.display = 'none';
popupOverlay.style.display = 'none';
};

// Function to redirect to gamerules.html on More button click
moreBtn.onclick = function() {
window.location.href = 'gamerules.html';
};

// Close the popup if the user clicks outside of it
popupOverlay.onclick = function() {
popup.style.display = 'none';
popupOverlay.style.display = 'none';
};
</script>
<!---------------------------------------------------------------------->
<!--<div class="about has-dropdown animate" style="cursor: pointer;" onclick="redirectToReadme()">
<span>About</span>
</div>-->
Expand Down Expand Up @@ -1142,7 +1282,7 @@


</script>
<!--Cursor-->

<script>
//Custom Cursor

Expand Down

0 comments on commit ea70628

Please sign in to comment.