Extending Scoreboard.js

Developer
Tbleckert
Size
2,935 Kb
Views
16,192
  1. Extending Scoreboard.js Previews
  2. Extending Scoreboard.js HTML Codes
  3. Extending Scoreboard.js CSS Codes
  4. Extending Scoreboard.js JS Codes

How do I make an extending scoreboard.js?

Moving the demos to Codepen. This pen shows how to extend Scoreboard.js. API and documentation can be found at https://github.com/tbleckert/Scoreboard.js.. What is a extending scoreboard.js? How do you make a extending scoreboard.js? This script and codes were developed by Tbleckert on 16 October 2022, Sunday.

Extending Scoreboard.js Previews
IQ Test

Extending Scoreboard.js - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Extending Scoreboard.js</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://scoreboardjs.onedev.se/Source/Themes/default.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <article class="scoreboard" id="scoreboard">	<div class="player homePlayer">	<span class="name" data-scoreboard-bind="homePlayerName">Null</span>	<span class="points" data-scoreboard-bind="homeTeamGoals">0</span>	<span class="game current" data-scoreboard-bind="homePlayerGame1">0</span>	<span class="game" data-scoreboard-bind="homePlayerGame2">0</span>	<span class="game" data-scoreboard-bind="homePlayerGame3">0</span>	<span class="game" data-scoreboard-bind="homePlayerGame4">0</span>	<span class="game" data-scoreboard-bind="homePlayerGame5">0</span>	</div>	<div class="player awayPlayer">	<span class="name" data-scoreboard-bind="awayPlayerName">Null</span>	<span class="points" data-scoreboard-bind="awayTeamGoals">0</span>	<span class="game current" data-scoreboard-bind="awayPlayerGame1">0</span>	<span class="game" data-scoreboard-bind="awayPlayerGame2">0</span>	<span class="game" data-scoreboard-bind="awayPlayerGame3">0</span>	<span class="game" data-scoreboard-bind="awayPlayerGame4">0</span>	<span class="game" data-scoreboard-bind="awayPlayerGame5">0</span>	</div>
</article> <script src='http://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js'></script>
<script src='http://scoreboardjs.onedev.se/Source/Scoreboard.js'></script> <script src="js/index.js"></script>
</body>
</html>

Extending Scoreboard.js - Script Codes CSS Codes

.scoreboard {	height: 80px;	text-align: left;
}	.scoreboard > .player {	padding: 0 10px;	overflow: hidden;	}	.scoreboard > .awayPlayer {	background: #323031;	}	.scoreboard > .player > span {	display: block;	float: left;	width: 10%;	text-align: center;	box-sizing: border-box;	padding: 0 10px;	}	.scoreboard > .player > .points {	text-align: right;	}	.scoreboard > .player > .name {	width: 40%;	text-align: left;	}	.scoreboard > .player > .current {	background: rgba(0, 0, 0, 0.2);	}

Extending Scoreboard.js - Script Codes JS Codes

var TennisScoreboard = new Class({	Extends: Scoreboard,	attach: function () {	var self = this;	this.addEvent('change', function (what, value) {	if (what === 'homePlayerGames' || what == 'awayPlayerGames') {	var set = self.get('gameSet'),	value = (what === 'homePlayerGames') ? self.get('homePlayerGames')[set] : self.get('awayPlayerGames')[set],	what = (what === 'homePlayerGames') ? 'homePlayerGame' + (set + 1) : 'awayPlayerGame' + (set + 1);	}	this.getScoreboardElement(what).set('html', value);	});	return this;	},	addPoint: function (player) {	var tennispoints = function (val) {	if (val === 1) {	return 15;	} else if (val === 2 || val === 16) {	return 30;	} else {	return 40;	}	};	this.applyFilter('addHomeTeamGoal', tennispoints);	this.applyFilter('addAwayTeamGoal', tennispoints);	this.addGoal(player);	},	removePoint: function (player) {	var tennispoints = function (val) {	if (val >= 39) {	return 30;	} else if (val <= 29 && val > 15) {	return 15;	} else {	return 0;	}	};	this.applyFilter('removeHomeTeamGoal', tennispoints);	this.applyFilter('removeAwayTeamGoal', tennispoints);	this.removeGoal(player);	},	addGame: function (player) {	var games, set = this.get('gameSet');	if (player === 'home') {	games = this.get('homePlayerGames');	if (games[set] < 7) {	games[set] += 1;	}	// Apply filter	games = this.filter('addHomePlayerGame', games);	this.set('homePlayerGames', games);	} else if (player === 'away') {	games = this.get('awayPlayerGames');	if (games[set] < 7) {	games[set] += 1;	}	// Apply filter	games = this.filter('addAwayPlayerGame', games);	this.set('awayPlayerGames', games);	}	this.fireEvent('onWonGame', player);	return this;	},	removeGame: function (player) {	var games, set = this.get('gameSet');	if (player === 'home') {	games = this.get('homePlayerGames');	if (games[set] > 0) {	games[set] -= 1;	}	// Apply filter	games = this.filter('addHomePlayerGame', games);	this.set('homePlayerGames', games);	} else if (player === 'away') {	games = this.get('awayPlayerGames');	if (games[set] > 0) {	games[set] -= 1;	}	// Apply filter	games = this.filter('addAwayPlayerGame', games);	this.set('awayPlayerGames', games);	}	this.fireEvent('onRemovedGame', player);	return this;	},	resetGames: function (player) {	if (player === 'home') {	this.set('homePlayerGames', [0, 0, 0, 0, 0]);	} else {	this.set('awayPlayerGames', [0, 0, 0, 0, 0]);	}	this.fireEvent('onResetGames');	return this;	},	addSet: function () {	var set = this.get('gameSet') || 0;	if (set < 4) {	set += 1;	}	// Apply filter	set = this.filter('addSet', set);	this.set('gameSet', set);	this.fireEvent('onNewSet', set);	return this;	},	removeSet: function () {	var set = this.get('gameSet') || 0;	if (set < 4) {	set -= 1;	}	// Apply filter	set = this.filter('removeSet', set);	this.set('gameSet', set);	this.fireEvent('onRemovedSet', set);	return this;	},	resetSet: function () {	this.set('gameSet', 0);	this.fireEvent('onResetSet');	return this;	}
});
var scoreboard = new TennisScoreboard({	homePlayerName: 'R. Söderling',	awayPlayerName: 'R. Nadal',	homePlayerGames: [0, 0, 0, 0, 0],	awayPlayerGames: [0, 0, 0, 0, 0],	gameSet: 0,	position: 'bottomCenter'
});
Extending Scoreboard.js - Script Codes
Extending Scoreboard.js - Script Codes
Home Page Home
Developer Tbleckert
Username tbleckert
Uploaded October 16, 2022
Rating 3
Size 2,935 Kb
Views 16,192
Do you need developer help for Extending Scoreboard.js?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tbleckert (tbleckert) Script Codes
Name
Swimming dude loader
Scoreboard.js basic usage
Named media queris
Scoreboard.js messages
Pacman loader
Google font effects
Colorful header navigation concept
Canvas circle hover test
A Pen by tbleckert
CSS3 Cases
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!