KUMITE SCOREBOARD

A Main-Project Report
Submitted for partial fulfillment for the award of the degree of
Master of Science in Information Technology
Submitted by
M. DEEPAK BELGIN (A22MIT07)
Under the Guidance of
Dr. A. NIRMALA M.C.A., M.Phil., Ph.D.,
Assistant Professor, Post Graduate Department of Computer Applications

PG DEPARTMENT OF COMPUTER APPLICATIONS

ST. JOSEPH’S COLLEGE OF ARTS AND SCIENCE (AUTONOMOUS)
AFFILIATED TO ANNAMALAI UNIVERSITY, CHIDAMBARAM.
CUDDALORE-607001
APRIL – 2024

1
 CERTIFICATE

This is to certify that the Main-Project entitled

KUMITE SCOREBOARD

Being submitted to
ST. JOSEPH’S COLLEGE OF ARTS AND SCIENCE (AUTONOMOUS),
(Affiliated to Annamalai University – Chidambaram)
Submitted By
M. DEEPAK BELGIN (A22MIT07)
For the partial Fulfillment for the award of degree of
Master of Science in Information Technology
Is a bonafide record of work carried out by him,
Under my guidance and supervision.

INTERNAL GUIDE HEAD OF THE DEPARTMENT

Submitted for the viva-voce examination held on ________________

Examiners:
1._____________________

2._____________________

2
 ACKNOWLEDGEMENT

First and Foremost, I thank God, the Almighty, for the showering his kindness
and blessings to complete this project successfully.

I extend my sincere gratitude to respected Rev. Fr. Dr. M. Swaminathan,

D.C.L., D.JURIS., Secretary and Dr. M. Arumai Selvam M.Sc.(Maths), M.Sc.(CS).,
M.Phil., Ph.D., Principal of St. Joseph’s College of Arts & Science (Autonomous) for
providing such a good congenial environment to enlighten my knowledge.

I extend my hearty gratitude to Dr. A. John Pradeep Ebenezer., M.C.A.,

M.Phil., Ph.D., Head of the PG Department of Computer Applications for the moral support
and encouragement during the project and my studies.

I extend my warm gratitude to my guide Dr. A. Nirmala M.C.A., M.Phil.,

Ph.D., Assistant professor of PG Department of Computer Applications for the able guidance
during the project.

At the outset I take pleasure to extend my sincere gratitude to all my teachers

who had taken pains to shape and model me in all my endeavors. I bound to express my
sincere and hearty gratitude to my dear parents for their financial and material support which
helped me to make this project a successful one. Last but not the least I place deepest sense
of gratitude to all my friends who has supported me to complete this project more
successfully.

M. DEEPAK BELGIN (A22MIT07)

3
 CONTENT

NAME OF THE TOPIC PAGE

NO

1 ABSTRACT 5

2 SYSTEM STUDY 6

2.1 HARDWARE SPECIFICATION

2.2 SOFTWARE SPECIFICATION

3 SOFTWARE DESCRIPITION 7

3.1 FRONT END

3.2 BACK END

4 SYSTEM ANALYSIS 16

4.1 EXISTING SYSTEM

4.2 PROPOSED SYSTEM

4.3 FEASIBILITY STUDY

5 PROJECT DESCRIPITION 18

6 APPENDICES 20

6.1 CODING

6.2 SCREENSHOT

7 CONCLUSION 59

8 REFERENCE 60

4
 ABSTRACT

The "Kumite Scoreboard" project introduces a sophisticated digital solution poised to

redefine the landscape of karate competitions. Built with the aim of addressing the
multifaceted needs of organizers and participants, this project represents a significant leap
forward in tournament management and engagement. At its core, the digital scoreboard
serves as a comprehensive platform, offering organizers intuitive tools for athlete registration,
match scheduling, and result tracking. By centralizing these critical aspects of competition
management, the project streamlines workflows and minimizes administrative burdens,
allowing organizers to focus on delivering a seamless experience for participants and
spectators.

Furthermore, the dynamic scoreboard interface transforms the way in which match
information is presented, with real-time updates providing instant feedback on scores and
match progress. This feature not only enhances the viewing experience for spectators but also
ensures fairness and transparency throughout the competition. Additionally, the scoreboard's
compatibility with large screens makes it an ideal centralized for tournament venues,
captivating audiences and creating an immersive atmosphere.

In addition to its practical benefits, the "Kumite Scoreboard" project embodies a

commitment to inclusivity and accessibility within the karate community. By providing a
digital platform that is user-friendly and accessible to all, the project aims to empower
participants of diverse backgrounds and skill levels to engage fully in the competition
experience.

Innovative project “Kumite Scoreboard” ensure user-centric design, and exclusive

commitment, set a new standard perspective for excellence in karate tournament
management. As tournaments continue to evolve in complexity and scale, this project stands
poised to meet the evolving needs of organizers and participants, ensuring that karate
competitions remain vibrant, engaging, and accessible to all.

5
 SYSTEM STUDY

2.1 HARDWARE SPECIFICATION

The hardware requirements are:

The hardware, which is essential for software to run on a particular system.

Hard Disk : 32 GB
RAM : 128 MB
Processor : Any Pentium version

2.2 SOFTWARE REQUIREMENTS

The software requirements deal with analysis of the software and operating
system and the tools are essential for the project.

Operating system : WINDOWS

Language : HTML, CSS, JAVA SCRIPT AND BOOTSTRAP

Backend : PHP LARAVEL

6
 SOFTWARE DESCRIPTION

3.1 FRONT END

3.1.1 HTML

The primary markup language used to create web pages and other content that can be
seen in a web browser is called Hyper Text Markup Language (HTML).

HTML is written as HTML elements, which are tags contained in angle brackets (like
html>), within the text of a web page. Although some HTML tags, like "img" indicate empty
components and are therefore not paired, they are most frequently used in pairs, like "h1" and
"/h1". The start tag comes first in a pair, and the end tag comes second (they are also called
opening tags and closing tags). Web designers have the option of inserting text, extra tags,
comments, and other text-based material in between these tags.

Berners-Lee suggested an Internet-based hypertext system in a memo. In the latter

half of 1990, Berners-Lee defined HTML and created the browser and server software.

In that year, Berners-Lee and Robert

HYPERLINK "http://en.wikipedia.org/wiki/Robert Cailliau"

HYPERLINK "http://en.wikipedia.org/wiki/Robert Cailliau"

Cailliau, a CERN data systems engineer, worked together on a joint funding proposal,
but CERN did not formally embrace the project. He mentioned "some of the various places in
which hypertext is used" in his 1990 diary, placing an encyclopaedia at the top.

The earliest description of HTML that was made available to the general public was a
document titled "HTML Tags," which Berners-Lee initially mentioned online in late 1991. It
outlines the first, rather straightforward design of HTML, which consists of 18 elements.
These were heavily influenced by SGM guid, a proprietary SGML-based documentation
format at CERN, with the exception of the hyperlink tag. In HTML 4, eleven of these
components are still present.

Online browsers employ the markup language known as Hyper Text Markup
Language (HTML) to decipher and combine text, graphics, and other content into visually or
aurally appealing web pages. Every piece of HTML markup has default properties that are set

7
by the browser, but the web page designer can also use CSS to change or improve these
properties.

Many of the text elements can be found in the 1988 ISO technical report TR 9537
Techniques for using SGML, which also discusses the features of early text formatting
languages. An example of one of these languages is the RUNOFF command, which was
created in the early 1960s for the CTSS (Compatible Time-Sharing System) operating
system. These formatting commands were derived from the commands used by typesetters to
manually format documents. The SGML idea of generic markup, however, is based on
elements (nested annotated ranges with attributes) rather of only print effects, with the
structure and markup being separated. HTML has gradually evolved in this direction with
CSS.

Berners-Lee believed that HTML was an SGML application. With the release of the
first HTML specification proposal in the middle of 1993, "Hypertext Markup Language
(HTML)" Internet-Draft by Berners-Lee and Dan Connolly, which included an SGML
Document Type Definition to define the grammar, it was formally established as such by the
Internet Engineering TaskForce (IETF). The proposal, which was noteworthy for
acknowledging the NCSA Mosaic browser's unique tag for embedding in-line images and
reflecting the IETF's philosophy of basing standards on successful prototypes, expired after
six months. Similar to this, Dave Raggett's competing Internet-Draft from the latter part of
1993, "HTML+ (Hypertext Markup Format)," advocated standardising already-used elements
like tables and fill-in forms.

Following the expiration of the HTML and HTML+ draughts in early 1994, the IETF
established an HTML Working Group, which finished "HTML 2.0" in 1995, the first HTML
definition meant to be recognised as a standard upon which subsequent implementations
should be based.

Conflicting interests put a stop to further development under the IETF's direction.
Since 1996, the World Wide Web Consortium has maintained the HTML specifications with
assistance from companies who sell commercial software (W3C). ISO/IEC 15445:2000,
however, was the year that HTML also became a global standard. Later errata for HTML
4.01 were released through 2001. HTML 4.01 was released in late 1999. The Web Hypertext
Application Technology Working Group (WHATWG) started working on HTML5 in 2004,
and the W3C joined the project as a joint deliverable in 2008.

8
3.1.2 CSS

A style sheet language called Cascading Style Sheet (CSS) is used to describe how a
document produced in a markup language like HTML is presented. Along with HTML and
JavaScript, CSS is a key component of the World Wide Web.

Layout, colour, and font customization are all possible with CSS, which is made to
separate display from content. By specifying the pertinent CSS in a separate.css file, which
reduces complexity and repetition in the structural content, this separation can improve
content accessibility, give more flexibility and control in the specification of presentation
characteristics, enable multiple web pages to share formatting, and enable the.css file to be
cached to improve page load speed between the pages that share the file and its formatting.

The ability to offer the same HTML page in several styles for various rendering
techniques, including on-screen, in print, by voice (using a speech-based browser or screen
reader), and on Braille-based tactile devices, is also made possible by the separation of
formatting and content. If a user accesses the material on a mobile device, CSS additionally
provides rules for different formatting.

The term "cascading" refers to a priority structure that specifies which style rule will
be applied if more than one rule matches an element. This system of cascading priorities is
predictable.

The World Wide Web Consortium is responsible for maintaining the CSS
specifications (W3C). RFC 2318 registered the text/css. Internet media type (MIME type) for
usage with CSS (March 1998). For CSS documents, the W3C offers a free service for CSS
validation.

In addition to HTML, markup languages including XHTML, plain XML, SVG, and
XUL all permit the use of CSS.

9
JAVASCRIPT

A typed programming language for computers is called JavaScript (JS).

Implementations of client-side scripts are made possible by web browsers, and they can
interact with users, manage the browser, communicate asynchronously, and change the
presented document content. The development of desktop apps, game-making, and server-
side programming have all adopted it.

A programming language with dynamic typing and first-class functions, JavaScript is

based on prototypes. C had an influence on its syntax. Despite sharing many names and
naming conventions with Java, JavaScript is completely unrelated to Java and has a
significantly different semantic structure. JavaScript's primary design tenets were inspired by
the Self and Scheme programming languages. It is a multi-paradigm language that supports
imperative, functional, and object-oriented programming.

JavaScript's positive aspects

The advantages of utilising JavaScript are

 Less interaction with the server because you may check user input before submitting
the page. Because of the reduced server traffic, your server will be under less stress.
 The visitors receive immediate feedback and don't have to wait for the page to reload
to find out whether they forgot to type something.
 Enhanced interactivity – You may design interfaces that respond when the user moves
their mouse cursor over them or presses a keyboard shortcut to activate them.
 Richer interfaces You can use JavaScript to integrate sliders and drag-and-drop
elements to provide your site visitors with a Rich Interface.


JavaScript's limitations

JavaScript can't be used as a legitimate programming language. It lacks the following

crucial components:

10
 Client-side It is not possible to read or write files using JavaScript. This is still here
for security purposes.

Because there is no such support, JavaScript cannot be utilised for networking

applications.

JavaScript lacks the ability to use multiple processors or threads.

Once more, JavaScript is a simple, interpreted programming language that enables

you to add interactivity to HTML websites that would otherwise be static.

BOOTSTRAP

Bootstrap is a popular open-source front-end framework for developing responsive

and mobile-first websites and web applications. Originally developed by Twitter, Bootstrap
has grown into one of the most widely used frameworks in web development due to its ease
of use, extensive documentation, and robust set of features.

At its core, Bootstrap provides a collection of pre-designed HTML, CSS, and

JavaScript components, such as buttons, forms, navigation bars, and grids, that can be easily
integrated into web projects. These components are designed to be highly customizable and
to adhere to modern web design principles, ensuring consistency and usability across
different devices and screen sizes.

One of the key advantages of Bootstrap is its responsive grid system, which allows
developers to create flexible layouts that automatically adapt to various screen resolutions
and devices, from desktops to tablets to smartphones. This grid system simplifies the process
of building responsive designs, saving time and effort for developers.

Bootstrap also includes a variety of CSS classes and utility functions for styling and
positioning elements, as well as JavaScript plugins for adding interactive features such as
carousels, modals, and tooltips to websites.

In addition to its built-in components and features, Bootstrap offers extensive

documentation and a thriving community of developers who contribute to its ongoing
development and support. This wealth of resources makes it easy for developers of all skill
levels to get started with Bootstrap and to leverage its power to create modern, professional-
looking websites and applications in less time and with fewer headaches.

XAMPP

11
 One of the popular cross-platform web servers is XAMPP, which enables
programmers to construct and test their applications on a local web server. It was created by
the Apache Friends, and users can edit or change the native source code. It consists of the
MariaDB database, the Apache HTTP Server, and interpreters for various programming
languages like PHP and Perl. It is supported by various systems, including the x64 package of
macOS and Linux and the IA-32 package of Windows, and it is accessible in 11 different
languages.

Describe XAMPP.

The acronym XAMPP stands for "cross-platform," "A" for "Apache," "M" for
"MySQL," and "Ps" for PHP and Perl, respectively. It is an open-source collection of online
solutions that includes the Apache server, MariaDB, PHP, and Perl modules as well as
Apache distribution for a variety of servers and command-line executables.

Before releasing a website to the primary server, XAMPP enables a local host or
server to test its website and clients via desktop and laptop PCs. It is a platform that offers an
appropriate setting for testing and confirming the operation of projects based on Apache,
Perl, MySQL, and PHP through the host's system. One of these technologies is the Perl
programming language.

XAMPP's component parts

As previously said, XAMPP is utilised to represent the categorization of solutions for

various technologies. It offers a foundation for testing projects built on various technologies
using a personal server. XAMPP is an acronym for each letter that stands for each of its key
elements. This set of applications includes the web server Apache, the database management
system MariaDB, and programming languages including PHP and Perl. Cross-platform, or X,
indicates that it can operate on other systems, including Windows.

There are other additional parts to this software bundle, which are described below

Cross-Platform: Different local systems have various operating system installation

configurations in them. Cross-platform has been included to this package of Apache
distributions in order to expand its functionality and user base. It supports a number of
operating systems, including versions of Windows, Linux, and Mac OS.

12
Apache: is a multi-platform HTTP web server. It is employed all around the world to
distribute web content. Under the auspices of the Apache Software Foundation, the server
programe is available for free installation and usage by the developer community. The user
receives the requested files, pictures, and other documents from Apache's remote server.

MariaDB: XAMPP previously included MySQL DBMS, but MariaDB has since taken its
place. As one of the most popular relational DBMSs, it was created by MySQL. It provides
online services for data manipulation, storage, retrieval, organisation, and deletion

The backend programming language most frequently used for web development is PHP.
Users can build dynamic webpages and applications using PHP. It supports numerous
database management systems and is installable on every platform. It was created using the C
programming language. Hypertext Processor is referred to as PHP. It is believed to have been
derived from Personal Home Page tools, which accounts for its functionality and simplicity.

Perl: is a combination of Perl 5 and Perl 6, two high-level dynamic languages. In order to
solve issues with system management, web development, and networking, Perl can be used.
Users of Perl can create dynamic web apps. Both flexible and durable.

phpMyAdmin: is a programme used to manage MariaDB. Version 4.0.4 of it.

The Secure Socket Layer: Protocol and the Transport Layer Protocol are both implemented
using OpenSSL, a free software programme. The most recent version of XAMPP is 0.9.8.

The XAMPP Control Panel: is a panel that aids in controlling and operating other XAMPP
components. The most recent upgrade is 3.2.1. The following section of the course will
include a thorough discussion of the control panel.

Webalizer: is a web analytics software programme that is used to track user activity and give
usage information.

Mercury: The most recent version of this mail delivery system is 4.62. It is a mail server that
aids in managing emails on the internet.

XAMPP: is currently using Tomcat version 7.0.42. This is a servlet.

Support for XAMPP Format

13
 XAMPP is compatible with three file types:

An executable file can run on a computer like any other regular software thanks to the.EXE
extension, which makes it easy to install.

Files with the extension "7z" support various data compression and encryption methods and
are compressed files. Although working with more complicated files is required, it is more
preferred by formalists.

ZIP: This extension allows for lossless file compression. Multiple compressed files may be
included in a Zipped file. The Deflate algorithm is primarily utilized for file compression in
this format. The Installing ZIP files is far more difficult than other file types. EXE

XAMPP INSTALLATION PROCESS

XAMPP is a cross-platform stack of software that offers web solutions based on

platforms like MariaDB, Apache Server, Perl, and PHP, as was covered in the earlier section
of the course. Additionally, numerous file formats, including.EXE,.ZIP, and.7z-.7zip, support
it. The.EXE extension is the simplest to work with during installation out of the three. We
will go over the procedures to take in order to successfully download and install XAMPP
software on your computers in this article. It is supported by many operating systems,
including Windows, Linux, and MAC OS, as it is cross-platform software. We'll go over the
steps to take for installing XAMPP on each of the three operating systems:

Windows's installation procedure

Step 1 is to launch your preferred web browser and go to

https://www.apachefriends.org/index.html. The option to download XAMPP for Windows,
MAC, and Linux may be found on the home page. Then select XAMPP for Windows. The
website's most recent version is 7.4.5.

A notice indicating the automated start of the download shows on the screen as soon as you
click it.

STEP 2: To begin the installation process after the download is complete, double-
click the file with the.exe extension.

STEP 3: A pop-up window requesting your permission to modify your desktop

appears. For the process to continue, select "YES."

14
 STEP 4: Select "Allow Access" or "Deactivate Firewall and Other Antivirus
Software" to prevent the installation from being hampered. Therefore, until all of the XAMPP
components have been installed fully, any antivirus software or security firewall must be
temporarily disabled.

STEP 5: A pop-up window with a warning to turn off UAC comes just before the
installation. Because it limits users' ability to write to the C: drive, User Account Control
(UAC) prevents the installation of XAMPP from continuing. As a result, it is advised to turn
it off when installing.

STEP 6: The XAMPP setup wizard launches automatically after clicking the.exe
extension file. To start configuring the parameters, click "NEXT."

Step 7: A "Select Components" panel then displays, giving you the freedom to select
one of the individual XAMPP software stack components for the installation. It is advised to
install using the default options, which include all accessible components, to obtain a full
localhost server. To move on, click "NEXT."

STEP 8: A pop-up window indicating that the setup is now ready for installation
displays on the screen. To proceed with the process, click "NEXT."

Choose the location where the XAMPP software package should be installed in

STEP 9: The first setup makes a folder called XAMPP for you under C:. Select a
place and then click "NEXT."

STEP 10: After selecting your settings for a learn more about Bitnami dialogue box
and the language, click to begin the installation. The system components will be unpacked
and installed via the setup wizard. To the designated directory, the components are saved. It
can take a few minutes to finish this process. On the screen, you can see the installation's
percentage progress.

STEP 11: Click "FINISH" once the XAMPP setup has been successfully installed on
your desktop.

15
 SYSTEM ANALYSIS

CURRENT SYSTEM

Many customers visit the store to look at the merchandise and take possession of it
immediately after paying for it. Maintaining or updating every record and retrieving specific
data is highly challenging. Customers can browse the products that are sorted in various
categories on my website after logging in. Each visitor should register on this website so they
can easily view artistic works. Customers can purchase the item using an online payment
method.

SUGGESTIVE SYSTEM

The computerized version of the current system is what is being suggested. Give users
rapid, simple access to the data. Authentication procedures. For this project, PHP was chosen.
Customers can view a variety of available products on our website after logging in, and
registered users can use the website's online payment system to make purchases. Customers
can also check the status of their orders.

STUDY OF FEASIBIITY
A feasibility study is a preliminarily research carried out to ascertain and document
the viability of a project. The project's outcomes are used to determine whether to move
forward with it or put it on hold. It is obvious that the required hardware and software are
available for the creation and implementation of the proposed system if it does in fact result
in a project being approved work on the proposed project begins. The customer uses a variety
of ancillary equipment. For all devices, our website can provide a user-friendly interface (lie
laptop, mobile phone).

FINANCIALAND ECONOMIC VIABILITY:

16
This involves determining whether the project has higher priority and profits than other
initiatives that might employ the same resources, as well as whether its benefits should
significantly outweigh its expenditures.
The system was also scaled back to perform tasks that could be performed by a single piece
of software.
The system is therefore both economically and financially viable.

FEASIBILITY IN TECHNOLOGY

This depends on a number of factors, including whether the system's required technology is
available, how challenging its construction will be, and how much expertise the company has
with it. The size of the modules, the coding, and other factors can be used to qualify this.
New technology is now being used for efficient processing.

OPERATING SUITABILITY

Operational feasibility is a feasibility test that will determine whether the

system is functional after it is created and implemented in place of the current system. The
proposed system is only useful if it can be developed into an information system that satisfies
the operational needs of the company.

17
 PROJECT DESCRIPTION

SCOPE OF THE PROJECT

The Karate Scoreboard Project aims to create a digital system for competitions,
managing athlete registration, match scheduling, and real-time scoring. It features a user-
friendly interface, responsive design, and integrates with hardware and external APIs.
Comprehensive documentation and ongoing support ensure successful implementation.

OVERVIEW OF THE PROJECT

The project is a comprehensive web application utilizing HTML, CSS, JavaScript,
Bootstrap, and MySQL. It encompasses athlete registration, match scheduling, and real-time
scoring functionalities. Its responsive design ensures compatibility across devices, while
integration with hardware and enhances functionality.

MODULE

The project “Kumite Scoreboard” deals with the following modules:

 Home page

 Category page

 Round 1 page

 Round 2 page

 Round 3 page

 Score Card Page

 Scoreboard Result page

 Admin page

18
HOME PAGE

The homepage features athlete registration and tournament rules and regulations,
providing essential information for participants.

CATEGORY PAGE

The category page allows participants to select their specific category to initiate the
match, streamlining the competition process efficiently.

ROUND 1 PAGE

The Round 1 page displays the names and IDs of 8 athletes in each category, adhering
to the tournament's limit. Once filled, matches commence, with the top 4 athletes advancing
to Round 2.

ROUND 2 PAGE

Round 2 follows a similar process to Round 1, where the top 4 players progress from
the initial round. From these 4 players, the top 2 emerge victorious and advance to the final
round, Round 3.

ROUND 3 PAGE

In Round 3, the final showdown occurs between the remaining 2 players, determining
the 1st place winner and the runner-up, securing the top positions in the tournament.

SCORECARD PAGE

The scorecard features player IDs, names, and score warnings for each category,
aiding performance assessment. Two players' details, with timing clocks, allow dynamic
comparison, enhancing the viewing experience. This layout offers quick insights into fighters'
progress and match intensity.

SCOREBOARD RESULT PAGE

19
 The Scoreboard page showcases the details of the 1st and 2nd place winners, along
with the details of the two 3rd place players, providing comprehensive visibility of the
tournament's top performers.

ADMIN PAGE

The admin interface allows for comprehensive oversight, including total registration
count, sorted by category, gender, and state. Additionally, admins can update athlete details,
delete records, view the winner list, and send congratulatory messages via email.

APPENDICES

SOURCE CODE

FRONT END:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Admin Scoreboard</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet">

<link rel="stylesheet" type="text/css" href="{{ asset('css/styles.css') }}">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="{{ asset('js/script.js') }}"></script>
<style>
.red {
color: red;
}
</style>
</head>
<body>
<div class="container-fluid bg-success sticky-top">
<div class="lov text-center">
<center><h2 style="color:black;" class="text-center font-effect-fire mt-4 mb-4 kal1
">Scoreboard</h2></center>
<button type="button" class="btn btn-warning toki" data-toggle="modal" data-
target="#rightSlideModal">
Score Setting

20
</button>
</div>
<div class="modal fade right " id="rightSlideModal" tabindex="-1" role="dialog" aria-
labelledby="rightSlideModalLabel" aria-hidden="true">
<div class="modal-dialog q" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="rightSlideModalLabel" style="color:darkmagenta">SCORE
SETTING</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">

<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body text-center">
<!-- Your webpage content goes here -->
<div class="text-center mt-3">
<h4>Extra Time</h4>
</div>
<div class="text-center">
<button class="btn btn-success mt-3 ">Final Match Timing</button><br>
<button class="btn btn-danger mt-3close ali" data-dismiss="modal" aria-
label="Close">Close </button><br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid mt-2 mb-4 ">

<div class="row">
<div class="col-5 er bac">
<center><h1 style="color:blue;">AO</h1></center>
<form method="POST" action="submit-form" >

<input type="hidden" name="_token" value="<?php echo csrf_token();?>">

<input type="text" id="id1" class="w-5 h-15 align-items-center ran" style="margin-

left:170px" name="id1" value="{{ request()->query('id1') }}">

<input type="text" class="w-5 h-15 align-items-center ran" style="margin-left:170px"

name="player_name1" id="names1" value="{{ request()->query('name1') }}">

<div class="text-center">
<input type="button" value="IPPON" class="mt-4 abc" onclick="addValue1(3)"
><br>
<input type="button" value="WAZARI" class="mt-4 abc"
onclick="addValue1(2)"><br>

21
 <input type="button" value="YOKU" class="mt-4 abc"
onclick="addValue1(1)"><br>
</div>
<div class="text-center">

<input type="button" value="-1" class="mt-5 def" onclick="subtractOne()"><br>

</div>

<div class="text-center">
<input type="checkbox" id="checkbox1" name="player1_firstscore">Senshu

<input type="text" class="mt-5 jkl" style="width: 100px; height: 100px; " id="blue"
name="player_score1"><br>
</div>
<div>
<table class="table mt-5">
<thead>
<tr>
<th>C</th>
<th>K</th>
<th>HC</th>
<th>H</th>
</tr>
</thead>
<tbody>
<tr>
<td> <input type="checkbox" class="btn-check c1" id="btncheck1"
name="checkbox_values1[]" value="C"></td>
<td><input type="checkbox" class="btn-check c2" id="btncheck1"
name="checkbox_values1[]" value="K" ></td>
<td><input type="checkbox" class="btn-check c3" id="btncheck1"
name="checkbox_values1[]" value="HC"></td>
<td><input type="checkbox" class="btn-check c4" id="btncheck1"
name="checkbox_values1[]" value="H" ></td>
</tr>
<tr>
<td> <input type="checkbox" class="btn-check c5" id="btncheck1"
name="checkbox_values1[]" value="C" ></td>
<td><input type="checkbox" class="btn-check c6" id="btncheck1"
name="checkbox_values1[]" value="K" ></td>
<td><input type="checkbox" class="btn-check c7" id="btncheck1"
name="checkbox_values1[]" value="HC" ></td>
<td><input type="checkbox" class="btn-check c8" id="btncheck1"
name="checkbox_values1[]" value="H" ></td>
</tr>

</tbody>
</table>
</div>
</div>

22
 <div class="col-2 er bac1 ">
<center><u><h1 style="color:rgb(10, 10, 10);">Timer</h1></center></u>
<input type="text" class="w-5 h-15 align-items-center ran" style="margin-left:5px"
name="category" id="category" value="{{ request()->query('category') }}">

<div class="text-center">

<input type="button" id="toggleButton" onclick="toggleTimer()" class="custom-btn-

width custom-btn-height mt-4 bel" value="Start">
<div id="timerDisplay" style="font-weight: bold; font-size: 70px;">01:30</div>
</div>

<div class="text-center">

<input type="submit" value="Submit Score" class="mt-5 prof"

id="submitButton"><br>

<p style="color:rgb(12, 12, 12); margin-top:230px" class="ber">Category 1</p>

<p style="color:rgb(8, 8, 8); margin-top:20px" class="ber">Category 2</p>
</div>
</div>

<div class="col-5 er bac2">

<center><h1 style="color:red">AKA</h1></center>

<input type="text" id="id2" class="w-5 h-15 align-items-center ran" style="margin-

left:170px" name="id2" value="{{ request()->query('id2') }}">
<input type="text" name="player_name2" id="names2" class="w-5 h-15 align-items-
center ran" style="margin-left:170px" value="{{ request()->query('name2') }}" >
<div class="text-center">
<input type="button" value="IPPON" class="mt-4 abc1"
onclick="addValue(3)"><br>
<input type="button" value="WAZARI" class="mt-4 abc1"
onclick="addValue(2)"><br>
<input type="button" value="YOKU" class="mt-4 abc1"
onclick="addValue(1)"><br>
</div>
<div class="text-center">

<input type="button" value="-1" class="mt-5 def" onclick="subtractOne1()"><br>

</div>

<div class="text-center">
<input type="checkbox" id="checkbox2" name="player2_firstscore">Senshu
<input type="text" class="mt-5 jkl1" style="width: 100px; height: 100px;" id="red"
name="player_score2"><br>
</div>
<div>

23
 <table class="table mt-5">
<thead>
<tr>
<th>C</th>
<th>K</th>
<th>HC</th>
<th>H</th>
</tr>
</thead>
<tbody>
<tr>
<td> <input type="checkbox" class="btn-check c9" id="btncheck9"
name="checkbox_values2[]" value="C"></td>
<td><input type="checkbox" class="btn-check c10" id="btncheck1"
name="checkbox_values2[]" value="K"></td>
<td><input type="checkbox" class="btn-check c11" id="btncheck1"
name="checkbox_values2[]" value="HC"></td>
<td><input type="checkbox" class="btn-check c12" id="btncheck1"
name="checkbox_values2[]" value="H"></td>
</tr>
<tr>
<td> <input type="checkbox" class="btn-check c13" id="btncheck1"
name="checkbox_values2[]" value="C"></td>
<td><input type="checkbox" class="btn-check c14" id="btncheck1"
name="checkbox_values2[]" value="K"></td>
<td><input type="checkbox" class="btn-check c15" id="btncheck1"
name="checkbox_values2[]" value="HC"></td>
<td><input type="checkbox" class="btn-check c16" id="btncheck1"
name="checkbox_values2[]" value="H"></td>
</tr>
</tbody>
</table>
</div>
</div>

</div>
</div>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></
script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></
script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></
script>
<script>
let timerInterval;
let totalSeconds = 90; // 1 minute and 30 seconds

24
 let isTimerRunning = false;

const timerDisplay = document.getElementById('timerDisplay');

const toggleButton = document.getElementById('toggleButton');

function toggleTimer() {
if (isTimerRunning) {
stopTimer();
} else {
startTimer();

function startTimer() {
isTimerRunning = true;

toggleButton.value = 'Stop';

toggleButton.style.backgroundColor = '#FF0000'; // Red color for "Stop"

timerInterval = setInterval(updateTimer, 1000);
}

function stopTimer() {
isTimerRunning = false;

toggleButton.value = 'Start';
toggleButton.style.backgroundColor = '#4CAF50'; // Green color for "Start"
clearInterval(timerInterval);
}

function updateTimer() {
if (totalSeconds <= 0) {
stopTimer();
totalSeconds = 0; // Ensure it doesn't go below 0
timerDisplay.innerText = 'Match Over';
timerDisplay.classList.add('red');
} else {
totalSeconds--;
const minutes = Math.floor(totalSeconds / 60);
const seconds = totalSeconds % 60;

const formattedTime = formatTime(minutes) + ':' + formatTime(seconds);

timerDisplay.innerText = formattedTime;
}
}

function formatTime(time) {
return time < 10 ? '0' + time : time;
}

/////////////////

25
function disableSubmitButton() {
document.getElementById("submitButton").disabled = true;
}
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ROUND 1 </title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{{ asset('css/styles.css') }}">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">

<style>
.mdb{

background-image: linear-gradient(rgb(141, 243, 175),rgb(141, 243, 175) );

}

h4{
font-family: "Sofia", sans-serif;
}

h2{
font-family: "Sofia", sans-serif;

/* Set border color to black and add some attractive styles */

.mur {
border: 2px solid black; /* Set border color */
border-radius: 5px; /* Add some border radius */
padding: 10px; /* Add padding for better appearance */
font-size: 16px; /* Adjust font size */
color: #070707; /* Set text color */
}

/* Add hover effect */

.mur:hover {
border-color: #555; /* Change border color on hover */
}
/* Add focus effect */
.mur:focus {
border-color: #fbff00; /* Change border color on focus */

26
 box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* Add box shadow on focus */
outline: none; /* Remove default focus outline */
}

.btn-success {
background-color: #1b742f; /* Green background color */
color: #fff; /* White text color */
border: none; /* No border */

border-radius: 5px; /* Rounded corners */

font-size: 16px; /* Font size */
transition: background-color 0.3s ease; /* Smooth transition */
}

.btn-success:hover {
background-color: #02ff39; /* Darker green on hover */
}

.bet{
color:red;
font-size:25px;
}
</style>
</head>
<body>

<div class="container-fluid bg-success sticky-top">

<center>
<h2 style="color: white; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); font-family:
'Arial', sans-serif; font-size: 36px; font-weight: bold; padding: 20px;">Round 1</h2>
</center>
</div>
<div class="container-fluid mdb">
<div class="row">
<div class="col-4">
</div>
<div class="col-4">
@if ($posts->isNotEmpty())
<br<center> <input type="text" class="form-control mt-1 ran1 w-65 bet" style="width:
70%; height: 40px;" id="category" name="category"
value="{{$posts[0]->category}}"></center>
@else
<p>No data found for the selected category.</p>
@endif
</div>
<div class="col-4">
</div></div>
<div class="row">

<div class="col-1 mt-4">

27
 <h4 style="margin-left: 18px;">No</h4></div>

<div class="col-2 mt-4">

<h4 style="margin-left:45px">Player List</h4></div>

<div class="col-2 mt-4">

<h4 style="margin-left:53px">Score</h4></div>
<div class="col-2 mt-4">
<h4 style="margin-left:2px">Winner ID</h4></div>

<div class="col-2 mt-4">

<h4 style="margin-left:25px">Winner Name</h4></div>

<div class="col-1 mt-4">

<h4 style="margin-left:28px">Start</h4></div>

<div class="col-2 mt-4">

<h4 style="margin-left:75px">Status</h4></div></div>

<form method="post" action="/click" id="myForm">

@csrf
<div class="row mb-3">
<div class="col-1 ">
@if ($posts->isNotEmpty())
<input type="text" class="form-control mt-3 w-75 " id="id1" placeholder=""
value="{{$posts[0]->id}}">
<input type="text" class="form-control mt-3 w-75 " id="id2" placeholder=""
value="{{$posts[1]->id}}">
<hr>
<input type="text" class="form-control mt-3 w-75 " id="id3" placeholder=""
value="{{$posts[2]->id}}">
<input type="text" class="form-control mt-3 w-75 " id="id4" placeholder=""
value="{{$posts[3]->id}}">
<hr>
<input type="text" class="form-control mt-3 w-75 " id="id5" placeholder=""
value="{{$posts[4]->id}}">
<input type="text" class="form-control mt-3 w-75 " id="id6" placeholder=""
value="{{$posts[5]->id}}">
<hr>
<input type="text" class="form-control mt-3 w-75 " id="id7" placeholder=""
value="{{$posts[6]->id}}">
<input type="text" class="form-control mt-3 w-75 " id="id8" placeholder=""
value="{{$posts[7]->id}}">
@else
<p>No data found for the selected category.</p>
@endif
</div>

<div class="col-2">

28
 @if ($posts->isNotEmpty())
<input type="text" class="form-control mt-3 w-80 " id="name1" placeholder=""
name="athlete_name" value="{{$posts[0]->name}}">
<input type="text" class="form-control mt-3 w-80 " id="name2" placeholder=""
name="athlete_name" value="{{$posts[1]->name}}">
<hr>
<input type="text" class="form-control mt-3 w-80 " id="name3" placeholder=""
name="athlete_name" value="{{$posts[2]->name}}">
<input type="text" class="form-control mt-3 w-80 " id="name4" placeholder=""
name="athlete_name" value="{{$posts[3]->name}}">
<hr>
<input type="text" class="form-control mt-3 w-80 " id="name5" placeholder=""
name="athlete_name" value="{{$posts[4]->name}}">
<input type="text" class="form-control mt-3 w-80 " id="name6" placeholder=""
name="athlete_name" value="{{$posts[5]->name}}">
<hr>
<input type="text" class="form-control mt-3 w-80 " id="name7" placeholder=""
name="athlete_name" value="{{$posts[6]->name}}" >
<input type="text" class="form-control mt-3 w-80 " id="name8" placeholder=""
name="athlete_name" value="{{$posts[7]->name}}">
@else
<p>No data found for the selected category.</p>
@endif
</div>

<div class="col-2">

<input type="text" class="form-control mt-3 w-50 player_score1 mur" id=""

style="margin-left:30px">
<input type="text" class="form-control mt-3 w-50 player_score2 mur" id=""
style="margin-left:30px">

<hr>
<input type="text" class="form-control mt-3 w-50 player_score1 mur" id=""
style="margin-left:30px" >
<input type="text" class="form-control mt-3 w-50 player_score2 mur" id=""
style="margin-left:30px" >
<hr>
<input type="text" class="form-control mt-3 w-50 player_score1 mur" id=""
style="margin-left:30px" >
<input type="text" class="form-control mt-3 w-50 player_score2 mur" id=""
style="margin-left:30px" >
<hr>
<input type="text" class="form-control mt-3 w-50 player_score1 mur" id=""
style="margin-left:30px" >
<input type="text" class="form-control mt-3 w-50 player_score2 mur" id=""
style="margin-left:30px">
</div>
</form>

29
 <div class="col-2 mt-4 " id="">
<form method="post" action="{{ route('round2name.store') }}" id="form2">
@csrf
<input type="text" class="form-control mt-3 w-50 mur " id="id11" name="id11"
style="margin-top: 90px;" >

<input type="text" class="form-control w-50 mur" id="id22" name="id22"

style="margin-top: 90px;" >

<input type="text" class="form-control w-50 mur" id="id33" name="id33"

style="margin-top: 85px;" >

<input type="text" class="form-control w-50 mur" id="id44" name="id44"

style="margin-top: 90px;" >

</div>
<div class="col-2 mt-4 " id="winnersCol">
<input type="hidden" name="category" value="{{$posts[0]->category}}">

<input type="text" class="form-control mt-3 w-80 mur" id="name11" style="margin-

top: 90px;" name="name11" >

<input type="text" class="form-control w-80 mur" id="name22" style="margin-top:

90px;" name="name22">

<input type="text" class="form-control w-80 mur" id="name33" style="margin-top:

85px;" name="name33">

<input type="text" class="form-control w-80 mur" id="name44" style="margin-top:

90px;" name="name44">

</div>
<div class="col-1 " id="but" >
<button type="button" class="form-control btn-success w-80 fetchNamesButton ml-
3" placeholder="" style="margin-top: 40px;" data-start="1" onclick="location.href='/go1'"
>START</button>
<button type="button" class="form-control btn-success w-80 fetchNamesButton ml-
3" placeholder="" style="margin-top: 90px;" data-start="2" onclick="location.href='/go2'"
>START</button>
<button type="button" class="form-control btn-success w-80 fetchNamesButton ml-
3" placeholder="" style="margin-top: 85px;" data-start="3" onclick="location.href='/go3'"
>START</button>
<button type="button" class="form-control btn-success w-80 fetchNamesButton ml-
3" placeholder="" style="margin-top: 90px;" data-start="4"
onclick="location.href='/go4'">START</button>
</div>
<div class="col-2 ">
<button type="button" class="form-control btn-dark w-75 viewScoreButton ml-5"
style="margin-top: 40px;" data-target="1" >VIEW SCORE1</button>

30
 <button type="button" class="form-control btn-dark w-75 viewScoreButton ml-5"
style="margin-top: 90px;" data-target="2" >VIEW SCORE2</button>
<button type="button" class="form-control btn-dark w-75 viewScoreButton ml-5"
style="margin-top: 85px;" data-target="3" >VIEW SCORE3</button>
<button type="button" class="form-control btn-dark w-75 viewScoreButton ml-5"
style="margin-top: 90px;" data-target="4" >VIEW SCORE4</button>
</div>

<div class="container">
<div class="text-center">
<button type="submit" class="btn btn-primary" style="margin-top: 40px;">Next
Round</button>
</form>

</div>
</div>
</div>
<br>
</div> </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.viewScoreButton').click(function() {
var targetId = $(this).data('target');
var category;

if (targetId === 1) {
category = $('.ran1').eq(targetId - 1).val(); // Default behavior for targetId 1
} else if (targetId === 2) {
category = $('.ran1').eq(targetId - 2).val(); // Adjust index for targetId 2, 3, 4
}
else if (targetId === 3) {
category = $('.ran1').eq(targetId - 3).val(); // Adjust index for targetId 2, 3, 4
}
else if (targetId === 4) {
category = $('.ran1').eq(targetId - 4).val(); // Adjust index for targetId 2, 3, 4
}

$.ajax({
url: '/retrieve-scores',
type: 'GET',
data: { category: category },
success: function(response) {
if (response && response.length > 0) {
response.forEach(function(score, index) {
if (index === targetId - 1) {
var targetScore1 = $('.player_score1').eq(index);

31
 var targetScore2 = $('.player_score2').eq(index);
targetScore1.val(score.player_score1);
targetScore2.val(score.player_score2);

// Determine the highest score and corresponding player name

var highestScore;
var highestScoreName;
var winnerId;

if (score.player_score1 > score.player_score2) {

highestScore = score.player_score1;
highestScoreName = score.player_name1;
winnerId = score.player_id1;
} else if (score.player_score1 < score.player_score2) {
highestScore = score.player_score2;
highestScoreName = score.player_name2;
winnerId = score.player_id2;
} else {
// If scores are equal, check player1_firstscore and player2_firstscore
if (score.player1_firstscore === 1) {
highestScoreName = score.player_name1;
winnerId = score.player_id1;
} else if (score.player2_firstscore === 1) {
highestScoreName = score.player_name2;
winnerId = score.player_id2;
}
highestScore = score.player_score1; // Set highestScore to either
player_score1 or player_score2
}

// Display the highest score and corresponding player name in the

corresponding textboxes
$('#name' + targetId + (index + 1)).val(highestScoreName);

// Display the winner's ID in the corresponding textbox

$('#id' + targetId + targetId).val(winnerId);
}
});
} else {
alert('No data found for this category.');
}
},
error: function() {
alert('Failed to retrieve score.');
}
});
});
});
</script>
<script src="{{ asset('js/name_fetch.js') }}"></script>

32
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></
script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Round 2</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{{ asset('css/styles.css') }}">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">

<style>
.bg{

background-image: linear-gradient(rgb(163, 195, 238),rgb(163, 195, 238) );

}
h4{
font-family: "Sofia", sans-serif;
}
h2{
font-family: "Sofia", sans-serif;

}
.mur {
border: 2px solid black; /* Set border color */
border-radius: 5px; /* Add some border radius */
padding: 10px; /* Add padding for better appearance */
font-size: 16px; /* Adjust font size */
color: #070707; /* Set text color */
}

.bet{
color:red;
font-size:25px;
}
</style>
</head>
<body>
<div class="container-fluid bg-primary sticky-top">

33
 <center>
<h2 style="color: white; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); font-family:
'Arial', sans-serif; font-size: 36px; font-weight: bold; padding: 20px;">Round 2</h2>
</center>
</div>
<div class="container-fluid bg">
<div class="row">
<div class="col-4">
</div>

<div class="col-4">
<br><center> <input type="text" id="category" name="category" class="form-control
ran1 mt-1 w-65 bet" style="width: 70%; height: 40px;" value="{{ $selectedCategory
}}"></center>
</div>
<div class="col-4">

</div></div>
<div class="row">
<div class="col-1 mt-4">
<h4 style="margin-left: 20px;">No</h4></div>

<div class="col-2 mt-4">

<h4 style="margin-left:45px">Player List</h4></div>

<div class="col-2 mt-4">

<h4 style="margin-left:50px">Score</h4></div>

<div class="col-2 mt-4">

<h4 style="margin-left:20px">Winner ID</h4></div>

<div class="col-2 mt-4">

<h4 style="margin-left:15px">Winners Name</h4></div>

<div class="col-1 mt-4">

<h4 style="margin-left:40px">Start</h4></div>
<div class="col-2 mt-4">
<h4 style="margin-left:85px">Status</h4></div></div>
<form method="post" action="/click1" id="myForm">
@csrf

<div class="row mb-3">

<div class="col-1 ">
@if($selectedNames->isNotEmpty())
@foreach($selectedNames as $selectedName)

<input type="text" class="form-control mt-3 w-75" id="id11" placeholder=""

value="{{ $selectedName->player_id11 }}">
<input type="text" class="form-control mt-3 w-75" id="id22" placeholder=""
value="{{ $selectedName->player_id22 }}">

34
 <input type="text" class="form-control mt-3 w-75" id="id33" placeholder=""
value="{{ $selectedName->player_id33 }}">
<input type="text" class="form-control mt-3 w-75" id="id44" placeholder=""
value="{{ $selectedName->player_id44 }}">

@endforeach
@endif

</div>

<div class="col-2">

@if($selectedNames->isNotEmpty())
@foreach($selectedNames as $selectedName)

<input type="text" class="form-control mt-3 w-80 " id="name11"

value="{{ $selectedName->selected_name11 }}">
<input type="text" class="form-control mt-3 w-80" id="name22"
value="{{ $selectedName->selected_name22 }}">
<input type="text" class="form-control mt-3 w-80" id="name33"
value="{{ $selectedName->selected_name33 }}">
<input type="text" class="form-control mt-3 w-80" id="name44"
value="{{ $selectedName->selected_name44 }}">

@endforeach
@endif
</div>
<div class="col-2">

<input type="text" class="form-control mt-3 w-50 mur" id="score1" placeholder=""

style="margin-left:30px">
<input type="text" class="form-control mt-3 w-50 mur" id="score2" placeholder=""
style="margin-left:30px">
<input type="text" class="form-control mt-3 w-50 mur" id="score3" placeholder=""
style="margin-left:30px">
<input type="text" class="form-control mt-3 w-50 mur" id="score4" placeholder=""
style="margin-left:30px">

</div>
</form>

<div class="col-2 mt-4">

<form method="post" action="{{ route('round3name.store') }}" id="form3">

@csrf

<input type="text" class="form-control mt-3 w-75 mur" id="id111" placeholder=""

name="id111">

35
 <input type="text" class="form-control w-75 mur" id="id222" name="id222"
placeholder="" style="margin-top: 80px;">

</div>
<div class="col-2 mt-4">
<input type="hidden" name="category" value="{{ $selectedCategory }}">
<input type="text" class="form-control mt-3 w-80 mur" id="name111"
placeholder="" name="name111">

<input type="text" class="form-control w-80 mur" id="name222" name="name222"

placeholder="" style="margin-top: 80px;"
<div class="col-1 ">
<button type="button" class="form-control btn-success w-80 fetchNamesButton ml-
4" placeholder="" style="margin-top: 40px;" data-start="1" onclick="location.href='/go11'"
>START</button>
<button type="button" class="form-control btn-success w-80 fetchNamesButton ml-
4" placeholder="" style="margin-top: 80px;" data-start="2" onclick="location.href='/go22'"
>START</button>
</div>
<div class="col-2 ">
<button type="button" class="form-control btn-dark w-75 viewScoreButton ml-5"
style="margin-top: 40px;" data-target="1" >VIEW SCORE1</button>
<button type="button" class="form-control btn-dark w-75 viewScoreButton ml-5"
style="margin-top: 80px;" data-target="2" >VIEW SCORE2</button>
</div>
<div class="container">
<div class="text-center">

<button type="submit" class="btn btn-primary" style="margin-top: 40px;">Next

Round</button>

</form>

</div>
</div>
</div>
<br>

</div> </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.viewScoreButton').click(function() {
var targetId = $(this).data('target');
var category;

if (targetId === 1) {
category = $('.ran1').eq(targetId - 1).val(); // Default behavior for targetId 1
} else if (targetId === 2) {
category = $('.ran1').eq(targetId - 2).val(); // Adjust index for targetId 2

36
 }

$.get('/retrieve-scores1', { category: category })

.done(function(response) {
if (response && response.length > 0) {
response.forEach(function(score, index) {
if (index === targetId - 1) {
$('#score' + ((targetId - 1) * 2 + 1)).val(score.player_score1);
$('#score' + ((targetId - 1) * 2 + 2)).val(score.player_score2);

var highestScore;
var highestScoreName;
var winnerId;

if (score.player_score1 > score.player_score2) {

highestScore = score.player_score1;
highestScoreName = score.player_name1;
winnerId = score.player_id1;
} else if (score.player_score1 < score.player_score2) {
highestScore = score.player_score2;
highestScoreName = score.player_name2;
winnerId = score.player_id2;
} else {
if (score.player1_firstscore === 1) {
highestScoreName = score.player_name1;
winnerId = score.player_id1;
} else if (score.player2_firstscore === 1) {
highestScoreName = score.player_name2;
winnerId = score.player_id2;
}
highestScore = score.player_score1;
}

if (targetId === 1) {
$('#name111').val(highestScoreName); // Updated selector to use
name111
$('#id111').val(winnerId); // Set winner ID for button 1
} else if (targetId === 2) {
$('#name222').val(highestScoreName); // Updated selector to use
name222
$('#id222').val(winnerId); // Set winner ID for button 2
}
}
});
} else {
alert('No data found for this category.');
}
})
.fail(function() {
alert('Failed to retrieve score.');

37
 });
});
});
</script>
<script src="{{ asset('js/name_fetch1.js') }}"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></
script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</body></html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Round 3</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet">
<link rel="stylesheet" type="text/css" href="{{ asset('css/styles.css') }}">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?
family=Sofia&effect=fire"><style>
.bg{

background-image: linear-gradient(rgb(233, 160, 160),rgb(233, 160, 160) );

}
h4{
font-family: "Sofia", sans-serif;
}
h2{
font-family: "Sofia", sans-serif;
}

.ang {
border: 2px solid black; /* Set border color */
border-radius: 5px; /* Add some border radius */
padding: 10px; /* Add padding for better appearance */
font-size: 16px; /* Adjust font size */
color: #070707; /* Set text color */
}

.bet{
color:red;
font-size:25px;
}
</style>
</head>
<body>
<div class="container-fluid bg-danger sticky-top">
<center>

38
 <h2 style="color: white; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); font-family:
'Arial', sans-serif; font-size: 36px; font-weight: bold; padding: 20px;">Round 3</h2>
</center>
</div>
<div class="container-fluid bg">
<div class="row">
<div class="col-4">

</div>

<div class="col-4">
<br><center> <input type="text" class="form-control ran1 mt-1 w-65 bet" style="width:
70%; height: 40px;" value="{{ $selectedCategory }}" id="category"
name="category"></center>
</form>
</div>
<div class="col-4">
</div></div>

<div class="row">
<div class="col-1 mt-4">
<h4 style="margin-left: 5px;">No</h4></div>

<div class="col-2 mt-4">

<h4 style="margin-left:50px">Player List</h4></div>

<div class="col-2 mt-4">

<h4 style="margin-left:55px">Score</h4></div>

<div class="col-2 mt-4">

<h4 style="margin-left:5px">Winner ID</h4></div>

<div class="col-2 mt-4">

<h4 style="margin-left:30px">Winners Name</h4></div>

<div class="col-1 mt-4">

<h4 style="margin-left:30px">Start</h4></div>

<div class="col-2 mt-4">

<h4 style="margin-left:90px">Status</h4></div>
</div>
<form method="post" action="/click2" id="myForm">
@csrf

<div class="row mb-3">

<div class="col-1 ">

@if($twoSelectedNames->isNotEmpty())
@foreach($twoSelectedNames as $twoSelectedName)

39
 <input type="text" class="form-control mt-3 w-60" id="id111" name="id111"
placeholder=""value="{{ $twoSelectedName->player_id11 }}">
<input type="text" class="form-control mt-3 w-65" id="id222" name="id222"
placeholder=""value="{{ $twoSelectedName->player_id22 }}">
@endforeach
@endif
</div>

<div class="col-2">

@if($twoSelectedNames->isNotEmpty())
@foreach($twoSelectedNames as $twoSelectedName)
<input type="text" class="form-control mt-3 w-80" id="name111" name="name111"
value="{{ $twoSelectedName->selected_name11 }}">
<input type="text" class="form-control mt-3 w-80" id="name222" name="name222"
value="{{ $twoSelectedName->selected_name22 }}">
@endforeach
@endif
</div>
<div class="col-2">
<input type="text" class="form-control mt-3 w-50 ang" id="score1" placeholder=""
style="margin-left:30px">
<input type="text" class="form-control mt-3 w-50 ang" id="score2" placeholder=""
style="margin-left:30px">
</div>
</form>
<div class="col-2 mt-4">

<form method="post" action="{{ route('round4name.store') }}" id="form4">

@csrf
<input type="text" class="form-control mt-3 w-50 ang" id="id1111" name="id1111"
placeholder="">
</div>
<div class="col-2 mt-4">
<input type="hidden" name="category" value="{{ $selectedCategory }}">

<input type="text" class="form-control mt-3 w-90 ang" id="name1111"

name="name1111" placeholder="">
</div>
<div class="col-1 ">
<button type="button" class="form-control btn-success w-80 fetchNamesButton ml-
3" placeholder="" style="margin-top: 40px;" data-start="1" onclick="location.href='/go111'"
>START</button>
</div>
<div class="col-2 ">
<button type="button" class="form-control btn-dark w-75 viewScoreButton ml-5"
style="margin-top: 40px;" data-target="1" >VIEW SCORE1</button>

</div>

40
 <div class="container">
<div class="text-center">
<button type="button" onclick="saveData()" class="btn btn-primary ml-4"
style="margin-top: 40px;">Final Save</button>

</div>
</div>
</form>

</div>
<br>
<center>
<button type="button" class="btn btn-primary ml-4 mb-2" style="margin-top: 20px;"
onclick="redirectToOverallScore()">Overall Score</button>
</center>
</div> </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>

$(document).ready(function() {
$('.viewScoreButton').click(function() {
var targetId = $(this).data('target');
var category;

if (targetId === 1) {
category = $('.ran1').eq(targetId - 1).val(); // Default behavior for targetId 1
} else if (targetId === 2) {
category = $('.ran1').eq(targetId - 2).val(); // Adjust index for targetId 2
}

$.get('/retrieve-scores2', { category: category })

.done(function(response) {
if (response && response.length > 0) {
response.forEach(function(score, index) {
if (index === targetId - 1) {
$('#score' + ((targetId - 1) * 2 + 1)).val(score.player_score1);
$('#score' + ((targetId - 1) * 2 + 2)).val(score.player_score2);

var highestScore;
var highestScoreName;
var winnerId;

if (score.player_score1 > score.player_score2) {

highestScore = score.player_score1;
highestScoreName = score.player_name1;
winnerId = score.player_id1;
} else if (score.player_score1 < score.player_score2) {
highestScore = score.player_score2;
highestScoreName = score.player_name2;

41
 winnerId = score.player_id2;
} else {
if (score.player1_firstscore === 1) {
highestScoreName = score.player_name1;
winnerId = score.player_id1;
} else if (score.player2_firstscore === 1) {
highestScoreName = score.player_name2;
winnerId = score.player_id2;
}
highestScore = score.player_score1;

if (targetId === 1) {
$('#name1111').val(highestScoreName); // Updated selector to use
name1111
$('#id1111').val(winnerId); // Set winner ID for button 1
} else if (targetId === 2) {
$('#name222').val(highestScoreName); // Updated selector to use
name222
$('#id222').val(winnerId); // Set winner ID for button 2
}
}
});
} else {
alert('No data found for this category.');
}
})
.fail(function() {
alert('Failed to retrieve score.');
});
});
});
function saveData() {
// Get form data
var formData = $('#form4').serialize();

// Send AJAX request to save data

$.ajax({
url: "{{ route('round4name.store') }}",
type: "POST",
data: formData,
success: function(response) {
// Handle success response
alert('Data saved successfully!');
// Optionally, you can update the page content or perform any other action here
},
error: function(xhr, status, error) {
// Handle error response
alert('Failed to save data. Please try again.');
}
});

42
}
function redirectToOverallScore() {
var category = "{{ $selectedCategory }}"; // Get the selectedCategory value from the PHP
variable
var url = "{{ route('overall-score') }}?category=" + encodeURIComponent(category);
window.location.href = url;
}
</script>

<script src="{{ asset('js/name_fetch2.js') }}"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></
script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scoreboard</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
/* Define custom CSS for table body */

.table-container {
position: relative;
z-index: 2; /* Set z-index higher than the canvas */
}

.table-container canvas {
position: absolute;
top: 0;
left: 0;
z-index: 1; /* Set z-index lower than the table */
}
#canvas {
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 0; /* Ensure canvas is at the bottom */
}
.table tbody tr:nth-child(odd) {
background-color: #f8f9fa; /* Light gray background for odd rows */
}

43
 .table tbody tr:nth-child(even) {
background-color: #e9ecef; /* Lighter gray background for even rows */
}
.table thead tr {
text-align: center;
}
.table tbody tr td {
text-align: center;
}

.abc {
border-radius: 20px; /* Adjust the radius as needed */
padding: 5px 10px; /* Adjust padding as needed */

text-align: center;
}
.abc1 {
border-radius: 20px; /* Adjust the radius as needed */
padding: 5px 10px; /* Adjust padding as needed */

text-align: center;
}
</style>
</style>
</head>
<body>
<center><button id="toggleButton" class="bg-danger">Pause/Resume</button></center>
<form id="scoreboardForm" method="POST" action="{{ route('scoreboard.store') }}">
@csrf
<div class="container mt-5">
<center> <h2>Scoreboard</h2></center>
<center><input type="text" class="form-control ran1 mt-1 w-25 text-danger mt-3 abc1"
id="category" name="category" value="{{ request()->query('category') }}"></center>
<table class="table table-striped table-bordered mt-4">
<thead class="thead-warning ">

<tr>
<th style="background-color:#f1260b; ">Position</th>
<th style="background-color:#1e60ec;">ID</th>

<th style="background-color: #3dc21b;">Name</th>

<th style="background-color: #ebe71c;">State</th>
</tr>

</thead>

<tbody>
<tr>
<td><input type="text" name="position1" class="abc w-50" value="1"
readonly></td>

44
 <td><input type="text" name="player_id11" class="w-50"
value="{{ $highestScoringPlayer->player_id11 }}" readonly></td>
<td><input type="text" name="name1" value="{{ $highestScoringPlayer-
>selected_name11 }}" readonly></td>
<td><input type="text" name="state1" value="{{ $stateData1->state ?? '' }}"
readonly></td>
<input type="hidden" name="email1" value="{{ $emailMobileData1->email ??
'' }}" readonly>
<input type="hidden" name="mobile1" value="{{ $emailMobileData1-
>mobile_number ?? '' }}" readonly>
</tr>
@if ($secondHighestScoringPlayer)
<tr>
<td><input type="text" name="position2" class="abc w-50" value="2"
readonly></td>
<td><input type="text" name="player_id12" class="w-50"
value="{{ $secondHighestScoringPlayer->player_id11 == $highestScoringPlayer-
>player_id11 ? $secondHighestScoringPlayer->player_id22 : $secondHighestScoringPlayer-
>player_id11 }}" readonly></td>
<td><input type="text" name="name2"
value="{{ $secondHighestScoringPlayer->player_id11 == $highestScoringPlayer-
>player_id11 ? $secondHighestScoringPlayer->selected_name22 :
$secondHighestScoringPlayer->selected_name11 }}" readonly></td>
<td><input type="text" name="state2" value="{{ $stateData2->state ?? '' }}"
readonly></td>
<input type="hidden" name="email2" value="{{ $emailMobileData2->email ??
'' }}" readonly>
<input type="hidden" name="mobile2" value="{{ $emailMobileData2-
>mobile_number ?? '' }}" readonly>
</tr>
@endif
<!--third position-->

@foreach ($thirdHighestScoringPlayers as $index => $player)

@php
$positionValue = $index + 3;
@endphp

@if (($player->player_id11 != $highestScoringPlayer->player_id11 && $player-

>player_id11 != $selectedID2) &&
($player->selected_name11 != $highestScoringPlayer->selected_name11 && $player-
>selected_name11 != $selectedName2))

<td><input type="text" name="position{{ $positionValue }}" class="abc w-50"

value="{{ $positionValue }}" readonly></td>
<td><input type="text" name="player_id1{{ $positionValue }}" class="w-50"
value="{{ $player->player_id11 }}" readonly></td>
<td><input type="text" name="selected_name1{{ $positionValue }}"
value="{{ $player->selected_name11 }}" readonly></td>
@php

45
 $matchingAthlete1 = $athleteData3->where('id', $player->player_id11)->first();
@endphp

<!-- Display athlete data if available for the first player ID -->
@if ($matchingAthlete1)
<td><input type="text" name="state1{{ $positionValue }}"
value="{{ $matchingAthlete1->state }}" readonly></td>
<input type="hidden" name="email1{{ $positionValue }}"
value="{{ $matchingAthlete1->email }}" readonly>
<input type="hidden" name="mobile_number1{{ $positionValue }}"
value="{{ $matchingAthlete1->mobile_number }}" readonly>
@if (($player->player_id22 != $highestScoringPlayer->player_id11 && $player-
>player_id22 != $selectedID2) &&
($player->selected_name22 != $highestScoringPlayer->selected_name11 && $player-
>selected_name22 != $selectedName2))
<td><input type="text" name="position{{ $positionValue }}" class="abc w-50"
value="{{ $positionValue }}" readonly></td>
<td><input type="text" name="player_id2{{ $positionValue }}" class="w-50"
value="{{ $player->player_id22 }}" readonly></td>
<td><input type="text" name="selected_name2{{ $positionValue }}"
value="{{ $player->selected_name22 }}" readonly></td>
@php
$matchingAthlete2 = $athleteData3->where('id', $player->player_id22)->first();
@endphp

<!-- Display athlete data if available for the first player ID -->
@if ($matchingAthlete2)
<td><input type="text" name="state2{{ $positionValue }}"
value="{{ $matchingAthlete2->state }}" readonly></td>
<input type="hidden" name="email2{{ $positionValue }}"
value="{{ $matchingAthlete2->email }}" readonly>
<input type="hidden" name="mobile_number2{{ $positionValue }}"
value="{{ $matchingAthlete2->mobile_number }}" readonly>
@endif
</tr>
@endif
@if (($player->player_id33 != $highestScoringPlayer->player_id11 && $player-
>player_id33 != $selectedID2) &&
($player->selected_name33 != $highestScoringPlayer->selected_name11 && $player-
>selected_name33 != $selectedName2))

<td><input type="text" name="position{{ $positionValue }}" class="abc w-50"

value="{{ $positionValue }}" readonly></td>
<td><input type="text" name="player_id3{{ $positionValue }}" class="w-50"
value="{{ $player->player_id33 }}" readonly></td>
<td><input type="text" name="selected_name3{{ $positionValue }}"
value="{{ $player->selected_name33 }}" readonly></td>
@php
$matchingAthlete3 = $athleteData3->where('id', $player->player_id33)->first();
@endphp

46
 <!-- Display athlete data if available for the first player ID -->
@if ($matchingAthlete3)
<td><input type="text" name="state3{{ $positionValue }}"
value="{{ $matchingAthlete3->state }}" readonly></td>
<input type="hidden" name="email3{{ $positionValue }}"
value="{{ $matchingAthlete3->email }}" readonly>
<input type="hidden" name="mobile_number3{{ $positionValue }}"
value="{{ $matchingAthlete3->mobile_number }}" readonly>
@endif

@if (($player->player_id44 != $highestScoringPlayer->player_id11 && $player-

>player_id44 != $selectedID2) &&
($player->selected_name44 != $highestScoringPlayer->selected_name11 && $player-
>selected_name44 != $selectedName2))
<td><input type="text" name="position{{ $positionValue }}" class="abc w-50"
value="{{ $positionValue }}" readonly></td>
<td><input type="text" name="player_id4{{ $positionValue }}" class="w-50"
value="{{ $player->player_id44 }}" readonly></td>
<td><input type="text" name="selected_name4{{ $positionValue }}"
value="{{ $player->selected_name44 }}" readonly></td>
@php
$matchingAthlete4 = $athleteData3->where('id', $player->player_id44)->first();
@endphp

<!-- Display athlete data if available for the first player ID -->
@if ($matchingAthlete4)
<td><input type="text" name="state4{{ $positionValue }}"
value="{{ $matchingAthlete4->state }}" readonly></td>
<input type="hidden" name="email4{{ $positionValue }}"
value="{{ $matchingAthlete4->email }}" readonly>
<input type="hidden" name="mobile_number4{{ $positionValue }}"
value="{{ $matchingAthlete4->mobile_number }}" readonly>
@endif
</tr>
@endif
</tbody>
</table>
</div>
<div>
<center>
<button type="submit" class="btn btn-primary">Submit</button>
</center>
</div>
</form>
<canvas id="canvas"></canvas>
<div>
<center>
<button type="submit" class="btn btn-danger mt-3 " onclick="location.href='/start'"
>EXIT</button>
</center>

47
</div>
<!-- Bootstrap JS (optional) -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></
script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Custom JavaScript -->
<script>
// Wait for the document to load
document.addEventListener('DOMContentLoaded', function() {

const form = document.getElementById('scoreboardForm');

// Attach an event listener for form submission
form.addEventListener('submit', function(event) {
// Prevent the default form submission
event.preventDefault();
// Submit the form via AJAX
fetch(form.action, {
method: form.method,
body: new FormData(form)
})
.then(response => {
// Check if response is successful (status code 2xx)
if (response.ok) {
// Show success message
alert('Data saved successfully!');
} else {
// Show error message
alert('Failed to save data. Please try again.');
}
})
.catch(error => {
// Show error message
alert('An unexpected error occurred. Please try again later.');
console.error('Error:', error);
});
});
});

let W = window.innerWidth;
let H = window.innerHeight;
const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
const maxConfettis = 150;
const confettiParticles = [];
const maxFirecrackers = 10;
const firecrackerParticles = [];
let animationPaused = false;
const possibleColors = [
"DodgerBlue",
"OliveDrab",

48
 "Gold",
"Pink",
"SlateBlue",
"LightBlue",
"Gold",
"Violet",
"PaleGreen",
"SteelBlue",
"SandyBrown",
"Chocolate"
function randomFromTo(from, to) {
return Math.floor(Math.random() * (to - from + 1) + from);
}

function confettiParticle() {
this.x = Math.random() * W; // x
this.y = Math.random() * H - H; // y
this.r = randomFromTo(11, 33); // radius
this.d = Math.random() * maxConfettis + 11;
this.color =
possibleColors[Math.floor(Math.random() * possibleColors.length)];
this.tilt = Math.floor(Math.random() * 33) - 11;
this.tiltAngleIncremental = Math.random() * 0.07 + 0.05;
this.tiltAngle = 0;

this.draw = function() {
context.beginPath();
context.lineWidth = this.r / 2;
context.strokeStyle = this.color;
context.moveTo(this.x + this.tilt + this.r / 3, this.y);
context.lineTo(this.x + this.tilt, this.y + this.tilt + this.r / 5);
return context.stroke();
};
}

function firecrackerParticle() {
this.x = Math.random() * W; // x
this.y = H; // y
this.length = randomFromTo(30, 50); // length
this.color = "#ff0000";

this.draw = function() {
context.beginPath();
context.lineWidth = 2;
context.strokeStyle = this.color;
context.moveTo(this.x, this.y);
context.lineTo(this.x, this.y - this.length);
return context.stroke();
};
}

49
function Draw() {
if (!animationPaused) {
const results = [];

// Magical recursive functional love

requestAnimationFrame(Draw);

context.clearRect(0, 0, W, window.innerHeight);

for (var i = 0; i < maxConfettis; i++) {

results.push(confettiParticles[i].draw());
}

for (var i = 0; i < maxFirecrackers; i++) {

results.push(firecrackerParticles[i].draw());
}

let particle = {};

let remainingFlakes = 0;
for (var i = 0; i < maxConfettis; i++) {
particle = confettiParticles[i];

particle.tiltAngle += particle.tiltAngleIncremental;
particle.y += (Math.cos(particle.d) + 3 + particle.r / 2) / 2;
particle.tilt = Math.sin(particle.tiltAngle - i / 3) * 15;

if (particle.y <= H) remainingFlakes++;

// If a confetti has fluttered out of view,

// bring it back to above the viewport and let if re-fall.
if (particle.x > W + 30 || particle.x < -30 || particle.y > H) {
particle.x = Math.random() * W;
particle.y = -30;
particle.tilt = Math.floor(Math.random() * 10) - 20;
}
}

for (var i = 0; i < maxFirecrackers; i++) {

particle = firecrackerParticles[i];
particle.y -= Math.random() * 10; // Move firecrackers upward

// If a firecracker has fluttered out of view,

// bring it back to the bottom and reset its length.
if (particle.y < -particle.length) {
particle.y = H;
particle.length = randomFromTo(30, 50);
}
}

50
 return results;
}
}

window.addEventListener(
"resize",
function() {
W = window.innerWidth;
H = window.innerHeight;
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
},
false
);

// Push new confetti objects to `particles[]`

for (var i = 0; i < maxConfettis; i++) {
confettiParticles.push(new confettiParticle());
}

// Push new firecracker objects to `particles[]`

for (var i = 0; i < maxFirecrackers; i++) {
firecrackerParticles.push(new firecrackerParticle());
}

// Initialize
canvas.width = W;
canvas.height = H;
Draw();

const toggleButton = document.getElementById("toggleButton");

toggleButton.addEventListener("click", function() {
animationPaused = !animationPaused;
if (!animationPaused) {
Draw();
toggleButton.innerText = "Pause";
} else {
toggleButton.innerText = "Resume";
}
});
</script>
</body>
</html>

51
 OUTPUT SCREEN

HOME PAGE:

CATEGORY PAGE:

52
ROUND 1 PAGE:

ROUND 2 PAGE:

53
ROUND 3 PAGE:

SCOREBOARD RESULT PAGE:

54
SCORE CARD PAGE:

55
ADMIN PAGE:

56
57
58
59
 CONCLUSION

In summary, the Kumite Scoreboard project revolutionizes karate competitions by

providing a digital solution for streamlined tournament management. Through HTML, CSS,
JavaScript, Bootstrap, MySQL, and more, the project facilitates athlete registration, match
scheduling, real-time scoring, and winner announcements. Its user-friendly interface,
responsive design, and integration with hardware and external APIs ensure seamless
operation across devices. Administrators benefit from analytics, athlete data management,
and winner communication tools. Overall, the project sets a new standard for efficiency,
transparency, and engagement in karate tournaments, promising to enhance the experience
for organizers, referees, athletes, and spectators alike.

60
 REFERENCE

https://chat.openai.com/
https://getbootstrap.com/
https://www.youtube.com/@JVLcode
https://www.wkf.net/

61