Skip to content

Commit

Permalink
Merge pull request #338 from manipalutsav/testing
Browse files Browse the repository at this point in the history
  • Loading branch information
@abhikpai
abhikpai committed Mar 31, 2024
2 parents e1ea121 + bcbf3e7 commit 717722e
Show file tree
Hide file tree
Showing 5 changed files with 133 additions and 99 deletions.
60 changes: 57 additions & 3 deletions src/components/Index/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const cookingEventsCloseDate = new Date("March 6, 2023, 17:00:00");
const studentEventsOpenDate = new Date("March 15, 2023, 21:00:00");
const studentEventsCloseDate = new Date("March 27, 2023, 23:59:59");

const renderer = ({ days, hours, minutes, seconds, completed }) => {
const reg_renderer = ({ days, hours, minutes, seconds, completed }) => {
if (completed) {
return <span>registrations are closed!</span>;
} else {
Expand All @@ -24,17 +24,66 @@ const renderer = ({ days, hours, minutes, seconds, completed }) => {
}
};

const event_renderer = ({ days, hours, minutes, seconds, completed }) => {
if(completed)
{
return <div className="m-4 flex justify-center">
<div className="p-4 rounded-md bg-orange-200 text-3xl gap-2 align-middle justify-center flex outline outline-orange-500 outline-2">
The event is on! <span className="font-['Noto_Color_Emoji']">🎉</span>
</div>
</div>
}
else{ // Text Countdown
if (days === 0 && hours === 0 && minutes === 0) {
return <span>Staff events start in: {seconds} seconds</span>;
} else if (days === 0 && hours === 0) {
return <span>Staff events start in: {minutes} minutes and {seconds} seconds</span>;
} else if (days === 0) {
return <span>Staff events start in: {hours} hours, {minutes} minutes and {seconds} seconds</span>;
} else {
return <span>Staff events start in: {days} days, {hours} hours, {minutes} minutes and {seconds} seconds</span>;
}
}
// Block countdown
// else{
// return (
// <div className="lg:m-4 sm:m-1">
// <div className="flex gap-5 justify-center lg:scale-75 transition-all my-3">
// <div className=" max-sm:gap-2 lg:w-[40%] max-w-[128px] lg:p-6 p-3 rounded-md bg-orange-200 gap-6 flex flex-col outline outline-orange-500">
// <div id="ct-day" className=" text-3xl md:text-6xl font-['Barlow_Condensed'] scale-y-150">{days}</div>
// <div className=" opacity-75 max-sm:text-xs">Day{days > 1?"s":""}</div>
// </div>
// <div className=" max-sm:gap-2 lg:w-[40%] max-w-[128px] lg:p-6 p-3 rounded-md bg-orange-200 gap-6 flex flex-col outline outline-orange-500">
// <div id="ct-day" className=" text-3xl md:text-6xl font-['Barlow_Condensed'] scale-y-150">{hours}</div>
// <div className=" opacity-75 max-sm:text-xs">Hour{hours > 1?"s":""}</div>
// </div>
// <div className=" max-sm:gap-2 lg:w-[40%] max-w-[128px] lg:p-6 p-3 rounded-md bg-orange-200 gap-6 flex flex-col outline outline-orange-500">
// <div id="ct-day" className=" text-3xl md:text-6xl font-['Barlow_Condensed'] scale-y-150">{minutes}</div>
// <div className=" opacity-75 max-sm:text-xs">Minute{minutes > 1?"s":""}</div>
// </div>
// <div className=" max-sm:gap-2 lg:w-[40%] max-w-[128px] lg:p-6 p-3 rounded-md bg-orange-200 gap-6 flex flex-col outline outline-orange-500">
// <div id="ct-day" className=" text-3xl md:text-6xl font-['Barlow_Condensed'] scale-y-150">{seconds}</div>
// <div className=" opacity-75 max-sm:text-xs">Second{seconds > 1?"s":""}</div>
// </div>
// </div>
// <div className=" text-orange-700 lg:w-[40%] rounded-b m-auto">Until the excitement unfolds!</div>
// </div>
// )
// }

};

const RegistrationTimer = () => {
const current_date = new Date();
if (current_date >= studentEventsOpenDate) {
return (<>
<span>Student event </span>
<Countdown date={studentEventsCloseDate} renderer={renderer} />
<Countdown date={studentEventsCloseDate} renderer={reg_renderer} />
</>)
} else if (current_date >= cookingEventsOpenDate) {
return (<>
<span>Cooking event </span>
<Countdown date={cookingEventsCloseDate} renderer={renderer} />
<Countdown date={cookingEventsCloseDate} renderer={reg_renderer} />
</>)
}
return <></>
Expand All @@ -52,6 +101,11 @@ export default () =>{
<h2 className="mucapp">MAHE Utsav Coordinators App</h2>
<h1 className="mucapp">{title}</h1>
{/* <RegistrationTimer /> */}
<div className="mt-8">
<Countdown date={new Date("April 1, 2024, 10:30:00")} renderer={event_renderer}/>

</div>
{/* <div className=" text-orange-600 text-4xl m-2 my-4">Custom text here</div> */}
{/* <div className="festival-live-message">The festival is on!</div> */}
<img className="mucapp" css={{ width: "60%" }} alt="Logo" src={utsavLogo} />
</div >
Expand Down
6 changes: 3 additions & 3 deletions src/components/PracticeSlots/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export default class extends React.Component {

getTimeSlot = (index) => {
console.log(this.state.slots,"slots")
var totalTeams = this.state.slots.length;
var totalTeams = this.state.slots?.length;
// time should start from 6 till 10 am
const startTime = new Date();
startTime.setHours(6, 0, 0, 0);
Expand Down Expand Up @@ -139,7 +139,7 @@ export default class extends React.Component {
<h2 className="mucapp">
Practice Slots
</h2>
<button className="mucapp" onClick={this.deleteSlots}>Reset Slots</button>
{/* <button className="mucapp" onClick={this.deleteSlots}>Reset Slots</button> */}
<select name="date" id="date" style={{"cursor":"pointer"}} value={this.state.eventDate} onChange={this.handleDateChange} className="m-2 py-2 px-4 border border-orange-500 rounded-md bg-slate-300 bg-opacity-100">
{/* Dropdown to select event date */}
<option value="2024-04-01">April 1, 2024</option>
Expand Down Expand Up @@ -178,7 +178,7 @@ export default class extends React.Component {
</>
)}
</h2>
<button className="mucapp" onClick={this.deleteSlots}>Reset Slots</button>
{/* <button className="mucapp" onClick={this.deleteSlots}>Reset Slots</button> */}
<select name="date" id="date" style={{"cursor":"pointer"}} value={this.state.eventDate} onChange={this.handleDateChange} className=" py-2 px-4 border border-orange-500 rounded-md bg-slate-300 bg-opacity-100 m-2">
{/* Dropdown to select event date */}
<option value="2024-04-01">April 1, 2024</option>
Expand Down
2 changes: 1 addition & 1 deletion src/components/PublicPracticeSlots/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export default class extends React.Component {

getTimeSlot = (index) => {
console.log(this.state.slots,"slots")
var totalTeams = this.state.slots.length;
var totalTeams = this.state.slots?.length;
// time should start from 6 till 10 am
const startTime = new Date();
startTime.setHours(6, 0, 0, 0);
Expand Down
161 changes: 70 additions & 91 deletions src/components/Rounds/Leaderboard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,119 +34,98 @@ export default class extends React.Component {
this.init();
}

async download() {
let leaderboard = this.state.leaderboard;
let ranks = {1: [], 2: [], 3: []}

ranks[1] = leaderboard.filter(item => item.rank == 1);
ranks[2] = leaderboard.filter(item => item.rank == 2);
ranks[3] = leaderboard.filter(item => item.rank == 3);
async download() {
const { leaderboard } = this.state;

// Filter leaderboard by ranks
const ranks = {
1: leaderboard.filter(item => item.rank === 1),
2: leaderboard.filter(item => item.rank === 2),
3: leaderboard.filter(item => item.rank === 3)
};

let event = await eventService.get(this.props.event);
// Get event details
const event = await eventService.get(this.props.event);
const is_group_event = event.maxMembersPerTeam > 1;
const is_multiple_team_event = event.maxTeamsPerCollege > 1;
event = event.name;
const eventName = event.name;

// Prepare data for rendering
const placesArray = [
ranks[1].map(item => ({
name: getCertificateName(item, is_group_event, is_multiple_team_event),
})),
ranks[2].map(item => ({
name: getCertificateName(item, is_group_event, is_multiple_team_event),
})),
ranks[3].map(item => ({
name: getCertificateName(item, is_group_event, is_multiple_team_event),
}))
ranks[1].map(item => ({ name: getCertificateName(item, is_group_event, is_multiple_team_event) })),
ranks[2].map(item => ({ name: getCertificateName(item, is_group_event, is_multiple_team_event) })),
ranks[3].map(item => ({ name: getCertificateName(item, is_group_event, is_multiple_team_event) }))
];

// Create image element
const image = new Image();

let first_start = 450;
let second_start = 620;
let third_start = 790;

image.src = template;

const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
const link = document.createElement('a');

// Wait for image to load
image.onload = () => {
// Create canvas
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");

// Set canvas dimensions
canvas.width = image.width;
canvas.height = image.height;

// Draw image onto canvas
context.drawImage(image, 0, 0);
// context.font = "bold 37.4px Verdana";

// Customize text styles
context.font = "bold 37.4px Rye";
context.fillStyle = "#ffffff";
context.textAlign = "center";
let textStr = event + " Results";
let textWidth = context.measureText(textStr).width;
context.fillText((textStr).toUpperCase(), (canvas.width/2), 365);
context.font = "bold 34px Rye";
context.textAlign = "left";

for (let i = 0; i < placesArray[0].length; i++) {
context.font = "bold 34px HammersmithOne";
let text = placesArray[0][i]["name"];
//if placesArray[0].length()==1
let { width } = context.measureText(text);
if (i == 0) {
context.fillText(text, (canvas.width / 6.4), first_start);
// context.fillRect((canvas.width / 3.1), first_start + 3, width, 2);
}
if (i == 2) {
context.fillText(text, (canvas.width / 6.4), first_start + 40);
// context.fillRect((canvas.width / 3.1), first_start - 37, width, 2);
}
if (i == 1) {
context.fillText(text, (canvas.width / 6.4), first_start - 40);
// context.fillRect((canvas.width / 3.1), first_start + 43, width, 2);
}
}
for (let i = 0; i < placesArray[1].length; i++) {
context.font = "bold 34px HammersmithOne";
let text = placesArray[1][i]["name"];
let { width } = context.measureText(text);
if (i == 0) {
context.fillText(text, (canvas.width / 6.4), second_start);
// context.fillRect((canvas.width / 3.1), second_start + 3, width, 2);
}
if (i == 2) {
context.fillText(text, (canvas.width / 6.4), second_start + 40);
// context.fillRect((canvas.width / 3.1), second_start - 37, width, 2);
}
if (i == 1) {
context.fillText(text, (canvas.width / 6.4), second_start - 40);
// context.fillRect((canvas.width / 3.1), second_start + 43, width, 2);
}

// Draw event name on canvas
context.fillText(eventName.toUpperCase() + " Results", canvas.width / 2, 365);

// Draw leaderboard data on canvas
let start = 450;
for (let i = 0; i < 3; i++) {
placesArray[i].forEach(item => {
context.font = "bold 34px HammersmithOne";
context.fillText(item.name, canvas.width / 6.4, start);
start += 40;
});
}
for (let i = 0; i < placesArray[2].length; i++) {
let text = placesArray[2][i]["name"];
let { width } = context.measureText(text);
if (i == 0) {
context.fillText(text, (canvas.width / 6.4), third_start);
// context.fillRect((canvas.width / 3.1), third_start + 3, width, 2);
}
if (i == 2) {
context.fillText(text, (canvas.width / 6.4), third_start + 40);
// context.fillRect((canvas.width / 3.1), third_start - 37, width, 2);
}
if (i == 1) {
context.fillText(text, (canvas.width / 6.4), third_start - 40);
// context.fillRect((canvas.width / 3.1), third_start + 43, width, 2);

// Convert canvas to blob
canvas.toBlob(async blob => {
// Create a File object from the blob
const file = new File([blob], eventName + "-leaderboard.png", { type: 'image/png' });

// Share image using Web Share API if available
if (typeof window.navigator.share === "function") {
try {
await window.navigator.share({
files: [file],
title: eventName + " Results",
text: "Check out the leaderboard!"
});
console.log("Share was successful.");
} catch (error) {
console.log("Sharing failed", error);
}
} else {
// Fallback for browsers that do not support Web Share API
console.error("Cannot use Web Share API: API unavailable.");
// Download image
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = eventName + "-leaderboard.png";
link.click();
URL.revokeObjectURL(link.href); // Clean up
}
}
canvas.toBlob((blob) => {
link.href = URL.createObjectURL(blob);
link.download = event + "-leaderboard.png"
link.style.display = "none";
document.body.append(link);
link.click();
link.remove();


}, 'image/png');
};

}


init = async () => {
try {
let event = await eventService.get(this.props.event);
Expand Down
3 changes: 2 additions & 1 deletion src/layouts/base.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@import "./fonts.css";

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Noto+Color+Emoji&display=swap');
*,
::before,
::after {
Expand Down

0 comments on commit 717722e

Please sign in to comment.