Github Analytics:
Frontend:
https://github.com/Ashwinv93/GLADV2Frontend/commit/355d72de5cf73a807fc1417aacd39fdbe20b3591
Backend:
https://github.com/Gurbop/GLADV2Backend/commit/10764acd143cfc312167578cccddbc31bb981cff
Commits:
https://github.com/Gurbop
Group Work:
Me, Dante, AShwin, Lincoln, and Vance consistently communicated about making changes to code and planning to accomplish goals. We messaged each other daily to make sure our features would integrate and to help eachother resolve errors.
Progress Issue
https://github.com/Ashwinv93/GLADV2Frontend/issues/4
CPT Project Feature:
My feature displays data from the game clash royale in a easy way the user can interact with. The user can see the leaderboard from any given season, active tournaments, and the current challanges running. All data specific data like, tournament requirments, rewards, players, and player info like, clan, trophies, and rank will be displayed.
CPT Writeup:
Meeting College Board Requirments:
Instructions for input from one of the following: the user, a device, an online datas stream, a file:
When a user presses the search button it will send a request to the clash royale api and get data based on what the user asks for. For example if the user searches for season 1, the table will be populated with data for the season 1 leaderboards.
Use of at least one list (or other collection type) to represent a collection of data that is stored and used to manage program complexity and help fulfill the users purpose.
list of data based on user input(season), that contains the information applied to the table
def get_leaderboard():
season = request.args.get('season', '1') # Default to season 1 if not specified
url = f'https://api.clashroyale.com/v1/locations/global/seasons/{season}/rankings/players?limit=10'
headers = {'Authorization': f'Bearer {API_KEY}'}
response = requests.get(url, headers=headers)
if response.ok:
return jsonify(response.json().get('items', [])) # Send back a list of items
At least one procedure that contirubted to the program’s intened purpose where you have defined: the name, return type, one or more parameters
name: fetch_challanges_ return value: a list of challange data or an error mesage when recieving data
def fetch_challenges():
url = f"https://api.clashroyale.com/v1/challenges"
headers = {'Authorization': f'Bearer {API_KEY}'}
response = requests.get(url, headers=headers)
if response.ok:
data = response.json()
challenges_list = []
for item in data:
challenges_list.extend(item.get('challenges', []))
return jsonify(challenges_list)
else:
return jsonify({"error": "Failed to fetch data"}), response.status_code
An algorithm that includes sequencing, selection, and iteration that is in the body of the selected procedure
This iterates throught the list of data and assigns them to a part of the table where it is outputed and displayed.
data.forEach(function(tournament) {
$('#tournamentTable tbody').append(`
<tr>
<td>${tournament.name}</td>
<td>${tournament.description}</td>
<td>${tournament.status}</td>
<td>${tournament.levelCap}</td>
<td>${tournament.firstPlaceCardPrize}</td>
<td>${tournament.capacity} / ${tournament.maxCapacity}</td>
<td>${tournament.preparationDuration} seconds</td>
<td>${tournament.duration} seconds</td>
<td>${new Date(tournament.createdTime).toLocaleString()}</td>
<td>${tournament.gameMode && tournament.gameMode.id ? tournament.gameMode.id : ''}</td>
</tr>
`);
Calls to your student-developed prodcedure:
This takes the tournament the user is searching for and puts that value into the procedure.
$('#searchForm').submit(function(event) {
event.preventDefault();
let tournamentName = $('#tournamentName').val();
fetchTournaments(tournamentName);
fetchChallenges();
});
Instructions for output (tactile, audible, visual, or ) based on input and program functionality:
This function takes the data recieved and outputs it in the form of a table.
<div id="tournaments-list">
<h2>Tournaments</h2>
<table id="tournamentTable">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Status</th>
<th>Level Cap</th>
<th>First Place Card Prize</th>
<th>Capacity</th>
<th>Preparation Duration</th>
<th>Duration</th>
<th>Created Time</th>
<th>Game Mode ID</th>
</tr>
</thead>
<tbody>
function fetchTournaments(tournamentName) {
$.getJSON(`${backendUrl}/tournaments?name=${encodeURIComponent(tournamentName)}`, function(data) {
$('#tournamentTable tbody').empty();
data.forEach(function(tournament) {
$('#tournamentTable tbody').append(`
<tr>
<td>${tournament.name}</td>
<td>${tournament.description}</td>
<td>${tournament.status}</td>
<td>${tournament.levelCap}</td>
<td>${tournament.firstPlaceCardPrize}</td>
<td>${tournament.capacity} / ${tournament.maxCapacity}</td>
<td>${tournament.preparationDuration} seconds</td>
<td>${tournament.duration} seconds</td>
<td>${new Date(tournament.createdTime).toLocaleString()}</td>
<td>${tournament.gameMode && tournament.gameMode.id ? tournament.gameMode.id : ''}</td>
</tr>
`);
});
Video:
Input to program:
What the user wants to search, shown in video.
At least one aspect of the functionality of your program:
The tournament functionallity shows all active tournaments with a name that the user searched and displays all information in a table.
Output Produced by Program:
A table is generated based on the list of information recieved.
My video does not have:
voice narration, distingushing information
My video is:
a .mp4, less than 1 minute in length, less than 30MB in file size.