forked from DoonOnthon/GamePulse
-
Notifications
You must be signed in to change notification settings - Fork 0
/
game_list.php
147 lines (136 loc) · 5.89 KB
/
game_list.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<?php
// Include the 'games_data.php' file to get the game data
include 'includes/games_data.php';
// Include the 'games_data.php' file to get the game data
include 'includes/games.php';
// Include the 'includes.inc.php' file to get the game data
include 'includes/functions.inc.php';
// include the 'pagination.php' file to sort the game data
include 'path_to_your_file/pagination.php';
?>
<!DOCTYPE html>
<html>
<head>
<title>GamePulse - Discover Exciting Games</title>
<!-- Include Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Include jQuery and Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
<!-- ########### bit of style / css | Move later ############ -->
<!-- Custom CSS to remove link underline -->
<style>
/* Style for the link in the table header */
th a {
text-decoration: none;
/* Remove underline */
color: inherit;
/* Inherit color from parent element */
}
</style>
</head>
<body>
<div class="container mt-5">
<h1>Welcome to GamePulse!</h1>
<p>Explore the world of gaming and find your next adventure.</p>
<!-- Search bar code -->
<form method="GET" action="">
<div class="input-group mb-3">
<input type="text" class="form-control" name="search"
placeholder="Search for games by title, category, or release date">
<button class="btn btn-primary" type="submit">Search</button>
</div>
</form>
<!-- Game List Table -->
<table class="table table-bordered table-striped" id="game-table">
<thead>
<tr>
<th><a href="?sort=title">Game Title</a></th>
<th>Category</th>
<th><a href="?sort=<?php echo ($sort === 'newest') ? 'oldest' : 'newest'; ?>">Release Date</a></th>
<th>Sales Numbers (Approx)</th>
<th>Contributor</th>
</tr>
</thead>
<tbody>
<?php
// Loop through the sorted games array and display each game as a table row
foreach ($gamesPage as $game) {
echo "<tr>";
?>
<td>
<?php echo $game['title']; ?>
</td>
<?php
echo "<td>{$game['category']}</td>";
?>
<td>
<?php echo $game['release_date']; ?>
</td>
<?php
echo "<td>{$game['sales_numbers']}</td>";
echo "<td>{$game['github_username']}</td>";
echo "</tr>";
}
?>
</tbody>
</table>
<nav aria-label="Page navigation">
<ul class="pagination">
<?php for ($i = 1; $i <= $totalPages; $i++): ?>
<li class="page-item <?php echo ($i == $currentPage) ? 'active' : ''; ?>">
<a class="page-link"
href="?page=<?php echo $i; ?><?php echo isset($_GET['sort']) ? '&sort=' . $_GET['sort'] : ''; ?>"><?php echo $i; ?></a>
</li>
<?php endfor; ?>
</ul>
</nav>
<!-- "Reset Search" button -->
<?php if (isset($_GET['search']) && !empty($_GET['search'])): ?>
<!-- Display the "Reset Search" button if a search query is present -->
<a href="game_list.php" class="btn btn-secondary mt-3">Reset Search</a>
<?php endif; ?>
</div>
<script>
// JavaScript to handle "Details" button click
$(document).ready(function () {
$(".btn-details").on("click", function () {
// Get the row index of the clicked button
var rowIndex = $(this).closest("tr").index();
// Get the game details from the games array based on the row index
var game = <?php echo json_encode($games); ?>[rowIndex];
// Update the modal content with game details
$("#gameModal .modal-title").text(game.title);
$("#gameModal .modal-body").html(
"<p><strong>Category:</strong> " + game.category + "</p>" +
"<p><strong>Release Date:</strong> " + game.release_date + "</p>" +
"<p><strong>Sales Numbers (Approx):</strong> " + game.sales_numbers + "</p>" +
"<p><strong>Contributor:</strong> " + game.github_username + "</p>"
);
// Show the modal manually
$("#gameModal").modal("show");
});
});
</script>
<!-- Modal for displaying game details -->
<div class="modal fade" id="gameModal" tabindex="-1" role="dialog" aria-labelledby="gameModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="gameModalLabel">Game Details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Game details will be dynamically updated here -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>