Documentation

Scoreboard for HTML5 Games

Thank you so much for purchasing our item from codecanyon.

If you have any questions that are beyond the scope of this help file, Please feel free to email via Item Support Page.

Overview

Scoreboard is an add-on for HTML5 Games that lets players submit their scores and view the top 10 leaderboard. The Admin Panel allows you to log in, review, and filter top-ranked scores. You can also exclude scores by email or phone, and manage score ranges for better control.

All HTML5 games are available for purchase separately, but not every game supports this add-on. Please check the Compatible Games page for details.

NOTE: The add-on does not include the original game files. It only provides additional features and pages.

How To Use It:
1. Get the HTML5 Games that is compatible with this add-ons from here
2. Copy and integrate the scoreboard files
3. Setup server and database
4. Ready to submit score and display top ten scoreboard at result page.

Admin Panel (Optional):
1. Setup admin dashboard.
2. Login as admin to view player scores and set filters.
3. Scoreboard listing will display with active filters.

Installation

Follow the steps below to install the add-on to your game:

1. Game Integration

1. Before begin you must have the HTML5 Games that is compatible with this add-on from here.
2. Copy /scoreboard folder in /html folder from downloaded package and paste into HTML5 Game /game folder, basically just copy the whole folder
   • scoreboard/assets/light/bg_scoreboard.png
   • scoreboard/assets/light/bg_scoreboard_portrait.png
   • scoreboard/assets/light/bg_scoreboard_res.png
   • scoreboard/assets/light/bg_submit.png
   • scoreboard/assets/light/bg_submit_portrait.png
   • scoreboard/assets/light/bg_submit_res.png
   • scoreboard/assets/light/button_bg.png
   • scoreboard/assets/light/button_close.png
   • scoreboard/assets/light/button_left.png
   • scoreboard/assets/light/button_right.png
   • scoreboard/assets/light/button_save.png
   • scoreboard/assets/light/button_scoreboard.png
   • scoreboard/assets/light/icon_arrow.png
   • scoreboard/css/fonts/bariol_regular-webfont.woff
   • scoreboard/css/fonts/bariol_regular-webfont.woff2
   • scoreboard/css/score.css
   • scoreboard/js/score.js
   • scoreboard/dbconn.php
   • scoreboard/language.php
   • scoreboard/s_add.php
   • scoreboard/s_top.php
   • scoreboard/submit.php
3. Copy /js folder in /html folder from downloaded package and replace into HTML5 Game /game folder
   • game/js/init.js

2. Server Setup

Create new database in cPanel

1. In cPanel, select MySQL Database Wizard from the Databases section.
2. Enter a name for the new database you wish to create and continue to the next step.
3. Enter a username and password to create the database user account and continue to the next step.
4. Select All Privileges to set security permissions the user has to the database and continue to the next step.

Create new tables in cPanel

1. In cPanel, select PhpMyAdmin tool from the Databases section.

2. Click and open the newly create database, replace game_table_name in sql query below to your HTML Game and run to create new table.
   eg. thief_challenge (only alphabets)

   
   CREATE TABLE `game_table_name` (
      `id` INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
      `name` VARCHAR(30) NOT NULL DEFAULT 'anonymous',
      `email` VARCHAR(30) NOT NULL,
      `type` VARCHAR(30) NOT NULL,
      `score` INT(100) UNSIGNED NOT NULL DEFAULT 0,
      `date` TIMESTAMP DEFAULT CURRENT_TIMESTAMP
   ) CHARSET=utf8 DEFAULT COLLATE utf8_unicode_ci;
                                 

3. This table is optional for score logs, replace game_logs_table_name in sql query below to your HTML Game and run to create new table.
   eg. thief_challenge_logs (only alphabets)

   
   CREATE TABLE `game_logs_table_name` (
      `id` INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
      `name` VARCHAR(30) NOT NULL DEFAULT 'anonymous',
      `email` VARCHAR(30) NOT NULL,
      `type` VARCHAR(30) NOT NULL,
      `score` INT(100) UNSIGNED NOT NULL DEFAULT 0,
      `date` TIMESTAMP DEFAULT CURRENT_TIMESTAMP
   ) CHARSET=utf8 DEFAULT COLLATE utf8_unicode_ci;
                                    

Configuration for database access and game type

1. Open dbconn.php in folder /game and change the settings to your newly created database access info

$host = "localhost"; // MySQL hostname
$dbUserName = "root"; // MySQL database username
$dbPwd = ""; // MySQL database password
$dbName = "scoreboard"; // The name of the database
$table = "game_table_name"; // The name of the table
$tableLogs = "game_logs_table_name"; // The name of the table logs (leave it empty if no table is created)
        

Settings

You can easily customize scoreboard text and settings in score.js file

var scoreboardSettings = {
	displayScoreBoard:true, //toggle submit and scoreboard button
	scoreBoardOnly:false, //toggle scoreboard only
	scoreBoardTheme:'dark', //dark or light mode design
	scoreBoardButton:{side:"left", offset:{x:50, y:40}}, //scoreboard button positon (left, right)
	scoreBoardSaveButton:{x:640, y:614, portrait:{x:384, y:820}}, //scoreboard save button positon
	scoreBoardTitle:"TOP 10 Scoreboard", //text for scoreboard title
	scoreRank_arr:["1st","2nd","3rd","4th","5th","6th","7th","8th","9th","10th"], //scoreboard ranking list
	scoreFormat:'[NUMBER]PTS', //score format
	totalScorePage:1, //total score pages, .e.g. 2 for 20 listing
	userIDType:"email", //user ID type 'email' or 'mobile' field
	mobileFormat:{
		matches:"999-99999999", //mobile format
		minLength:10, //mobile min length
		maxLength:12 //mobile max length
	},
	enableLevel:false, //enable to display game stage/level in scoreboard list
	scoreReverse:false, //reverse scoreboard list in descending
	scoreListingFormat:"", //return score in daily, weekly or monthly, empty string for all time (daily, weekly, monthly)
	topScore_arr:[ //col = table name; percentX = position x;  align = text alignment
		{col:"RANK", percentX:15, align:"left"},
		{col:"NAME", percentX:28, align:"left"},
		{col:"SCORE", percentX:84, align:"right"}
	],
	topLevelScore_arr:[
		{col:'RANK', percentX:15, align:'left'},
		{col:'NAME', percentX:28, align:'left'},
		{col:'LEVEL', percentX:60, align:'center'},
		{col:'SCORE', percentX:84, align:'right'}
	],
	dropdown:{ //dropdown settings for game/level column (enableLevel option)
		default:'LEVEL', //default dropdown text
		color:'#104FFF',
		hoverColor:'#1934CE',
		stroke:2,
		strokeColor:'#fff',
		height:32,
		margin:20,
		offsetX:0,
		offsetY:-19,
		textLength:10, //truncating long text with ...
		scrollList:5, //number lists to show scrollbar
		scrollWidth:15,
		scrollBarColor:'#4D9EFF',
		scrollBgColor:'#0D2256',
	},
	loader:{ //loader settings
		text:'Loading...',
		offsetY:10,
		bg:'#001040',
		bgAlpha:.7,
		bgW:180,
		bgH:50
	},
	notification:{ //notification settings (to show previous best score)
		status:true, //option to show new best score notification
		color:'#104FFF',
		textColor:'#fff',
		radius:10,
		stroke:5,
		strokeColor:'#fff',
		width:500,
		height:50,
		offsetX:0,
		offsetY:10,
		time:3000, //time to hide notification
		message:'BEST SCORE : [NUMBER]', //best score message
		messageNew:'NEW BEST SCORE : [NUMBER]', //new best score message
	},
	text:{
		submissionError:"Submission error:",
		enterName:"*Please enter your name.",
		enterEmail:"*Please enter your email.",
		enterMobile:"*Please enter your mobile no.",
		enterValidEmail:"*Please enter a valite email.",
		enterValidMobile:"*Please enter a valite mobile no.",
		connectionError:"Database connection error",
		submissionErrorTry:"Submission error, please try again."
	}
};
                        

Each HTML5 Games have different result layout, you can change the save button position at result page in score.js

Note Ignore portrait position if the game can only support landscape.

scoreBoardSaveButton:{x:640, y:614, portrait:{x:384, y:820}}, //scoreboard save button positon
                        

Admin Panel

Follow the steps below to setup admin panel:

This section is optional, you can skip this section if you just want to submit score and view scoreboard listing in HTML5 Games.

1. Installation

Copy /dashboard folder from downloaded package and upload to your server

2. Server Setup

Using the same database just created for the game, add new admin table in cPanel

1. In cPanel, select PhpMyAdmin tool from the Databases section.

2. Click and open the newly create database, execute query below to create new table admin_accounts, filter_users, filter_scores, and 2 admin user accounts.

CREATE TABLE `admin_accounts` (
   `id` int(10) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
   `user_name` varchar(20) NOT NULL,
   `passwd` varchar(50) NOT NULL,
   `admin_type` varchar(10) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

CREATE TABLE `filter_users` (
   `id` INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
   `game` VARCHAR(30) NOT NULL,
   `type` VARCHAR(30) NOT NULL,
   `email` VARCHAR(30) NOT NULL,
   `status` varchar(10) DEFAULT '1',
   `date` TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) CHARSET=utf8 DEFAULT COLLATE utf8_unicode_ci;

CREATE TABLE `filter_scores` (
   `id` INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
   `game` VARCHAR(30) NOT NULL,
   `type` VARCHAR(30) NOT NULL,
   `score_min` INT(100) UNSIGNED NOT NULL DEFAULT 0,
   `score_max` INT(100) UNSIGNED NOT NULL DEFAULT 0,
   `status` varchar(10) DEFAULT '1',
   `date` TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) CHARSET=utf8 DEFAULT COLLATE utf8_unicode_ci;
         
INSERT INTO `admin_accounts` (`id`, `user_name`, `passwd`, `admin_type`) VALUES
(1, 'superadmin', '17c4520f6cfd1ab53d8745e84681eb49', 'super'),
(2, 'admin', '21232f297a57a5a743894a0e4a801fc3', 'admin');
                      

Configuration for database access

1. Open config.php in /dashboard/config folder and change the settings to your newly created database and table info

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "html5game_scoreboard";
          

2. Change the scoreboard table info

$table_scoreboards = array(
    array(
        'id' => 'luckywheels',
        'name' => 'Lucky Wheels',
        'table' => 'luckywheels',
        'logs' => 'luckywheels_logs',
        'score' => 'point'
    )
);
            

Below is the explanation of each most important $table_scoreboards array:

1. id - filters unique ID (also the ID to enter in scoreboard HTML files dbconn.php file)
2. name - scoreboard name
3. table - scoreboard table name
4. log - scoreboard log table name (leave it empty if no table is created)
5. score - score type (point or timer)

3. If you have more than one scoreboard tables that are using the same database, you can add all tables like below. One Scoreboard Admin Panel can view and filter all scoreboard as long as they are in the same database.

$table_scoreboards = array(
    array(
        'id' => 'luckywheels',
        'name' => 'Lucky Wheels',
        'table' => 'luckywheels',
        'logs' => 'luckywheels_logs',
        'score' => 'point'
    ),
    array(
        'id' => 'quizgame',
        'name' => 'Quiz Game',
        'table' => 'quizgame2_scores',
        'logs' => 'quizgame2_scores_logs',
        'score' => 'point'
    ),
    array(
        'id' => 'rearrangeletters',
        'name' => 'Rearrange Letters',
        'table' => 'rearrangeletters2_scores',
        'logs' => 'rearrangeletters2_scores_logs',
        'score' => 'timer'
    )
);
            

3. Access admin page

Open the admin dashboard through your server eg. https://yourdomain/dashboard/ and it will open up an login page, enter admin dashboard using temporarily account access below and update immediately new password under Admin Accounts section:

1. Superadmin - able to create and view admin accounts, members, results and manage category and questions.
   • username: superadmin
   • password: superadmin
2. Admin - only able to view members, questions and result.
   • username: admin
   • password: admin

4. Filter ID

To make the filters work you must enter filter ID in your scoreboard HTML files

1. Open dbconn.php in your HTML5 Game scoreboard folder and change filter ID which you can get from dashboard config.php file

Note Your filter ID must exist from dashboard filter ID to work

$tableFilterID = 'luckywheels'; // Filter ID
$tableFilterUsers = "filter_users"; // The name of the filter table (users)
$tableFilterScores = "filter_scores"; // The name of the filter table (scores)
            

Language

You can easily change language for scoreboard page and admin dashboard

1. Open language.php in /scoreboard folder to change language for member page
2. Open language.php in /dashboard/language folder to change language for dashboard

Filters

In the Admin Panel you can set filters for user or score, the game scoreboard top rank will display user score with filtering.

Users

1. To exclude a user from scoreboard, just enter the user (email/phone) for each game.

Scores

1. To control the scoreboard score list, just enter the score range for each game.

Check Filtering

1. Once filter is set, you can check filters column at scoreboard panel, all records should be Valid except for filtering that is in Red.

2. When user click scoreboard button to view top rank in HTML5 Game, only Valid score lists will return.

Level or Category

1. Some HTML5 Games come with level or category, you will need to add multiple filters for different level/category on both user or score filters. Sample below the user will only exclude from IQ Test category, but the user score will still display for other category.

Compatibility

Hosting server must support MySQL and PHP to make this add-on function.

• PHP version 7.4 - 8.3
• PHP with MySQLi extension activated

FAQ

FAQ (Frequently Asked Questions) provides quick answers to common setup issues and mistakes when using the scoreboard add-ons.

Support

If this documentation doesn't answer your questions, you can send us email via Item Support Page

Don’t forget to Rate this add-on

Changelog

See what's new added, changed, fixed, improved or updated in the latest versions.

Version 3.8

• Fixed portrait viewport issue

Version 3.7

• Fixed HTML5 template
• Fixed dashboard issue

Version 3.6

• 2025 template compatible

Version 3.5

• Support Multiplayer add-on

Version 3.4

• Added scoreboard only option
• Fixed layout issue

Version 3.3

• Improved UI
• Added dark and light mode design
• Added player score higlight
• Fixed notification issue

Version 3.1

• Added score logs

Version 3.0

• Added language file

Version 2.9

• Updated MysqliDb

Version 2.8

• Added dropdown scrollbar
• Added new best score notification

Version 2.7

• Added loader
• Added score format

Version 2.6

• Fixed scoreboard issue
• Added dropdown for type

Version 2.5

• Added clear records button
• Added batch update for filters

Version 2.4

• Changed game settings
• Organized into scoreboard folder
• No more script integration steps

Version 2.3

• Added scoreboard button position
• Skip section

Version 2.2

• Added phone field option
• Fixed filter issue

Version 2.0

• Added Admin Panel
• Added Filters

Version 1.7

• Support landscape and portrait viewport games

Version 1.6

• Option to set all time, daily, weekly, monthly highscore

Version 1.5

• Fixed listing without level

Version 1.4

• Fixed game options overlay issue

Version 1.3

• Added option to show more than 10 listing

Version 1.2

• Fixed some old game layout issues

Version 1.1

• Fixed css stylesheet for old version

Version 1.0

Initial Release