User:Novusistic/customWidgetInOOUI.js

$( document ).ready( function {

// It is important to make sure that OOUI is loaded before we can make use of it. mw.loader.using( 'oojs-ui-core' ).done( function {

// This generates a random number between 1 and 100 (1 and 100 included). var randomNumber = Math.floor( Math.random * 100 ) + 1; // Variables to keep track of previous guesses and the number of guesses made // So far var previousGuesses, guessCount = 1;

/*		 * A custom widget is made which provides everything we need to build our tiny * random number guessing game. It includes following: * (i) A message widget to display status of ongoing game i.e. whether the user * has won, has lost, or the guess is smaller/larger than actual random number. *		 * (ii) A label widget to display the previous made guesses. *		 * (iii) An text input widget to input the guess. *		 * (iv) A submit button to check whether whether the guess is correct or not (can		 * also be checked by pressing enter inside the input field). *		 * (v) It embeds the styling of all the above elements in the same custom widget. * However, ideally styling should be defined in the css/less file for consistency * and easy modifications. */		var RandNumGameWidget = function ( config ) { config = config || {};

RandNumGameWidget.parent.call( this, config );

this.status = new OO.ui.MessageWidget( {				type: 'notice',				label: 'Guess a random number [1, 100]. You\'ve got 10 chances.'			} );

this.previous = new OO.ui.LabelWidget;

this.input = new OO.ui.TextInputWidget( {				placeholder: 'Enter your guess...'			} ); this.button = new OO.ui.ButtonWidget( {				label: 'Submit',				flags: [ 'primary', 'progressive' ]			} );

this.input.connect( this, { enter: 'onBtnClick' } ); this.button.connect( this, { click: 'onBtnClick' } );

this.$element .append(					this.status.$element.css( { display: 'block', marginBottom: '25px' } ),					this.previous.$element.css( { marginBottom: '25px' } ),					this.input.$element.css( { width: '60%', display: 'inline-block' } ),					this.button.$element.css( { float: 'right' } )				)				.addClass( 'randNumGameWidget' ); };

OO.inheritClass( RandNumGameWidget, OO.ui.Widget );

// Defines the behaviour of the widget on pressing enter or clicking the submit // Button RandNumGameWidget.prototype.onBtnClick = function {

// This ensures that the input value is valid i.e. only numbers are allowed // And any other value is discarded with an alert shown to the user. // NOTE: The invalid step is not counted in the maximum of 10 chances given. const inputValue = this.input.getValue; const regex = /^[0-9]+$/;

if ( !inputValue.match( regex ) ) { alert( 'You can input only numbers...' ); this.input.setValue( '' ); return; }

const userGuess = Number( inputValue );

if ( guessCount === 1 ) { previousGuesses = 'Previous guesses: '; this.previous.setLabel( previousGuesses ); }

previousGuesses += userGuess + ' ';

// It defines what to do when a number is entered. If the value is equal // To the random number or the number of chances are exhausted, the game ends. // Otherwise, the user is told whether his value is less than or greater than // The actual random value. if ( userGuess === randomNumber ) { this.setLabels( 'Correct!', userGuess ); this.setGameOver; } else if ( guessCount === 10 ) { this.setLabels( 'Game over!', previousGuesses ); this.setGameOver; } else { if ( userGuess < randomNumber ) { this.setLabels( 'Last guess was too low!',						previousGuesses ); } else if ( userGuess > randomNumber ) { this.setLabels( 'Last guess was too high!',						previousGuesses ); }			}

// Increments the count of attempts made and input field is cleared guessCount++; this.input.setValue( '' ); };

// Once the game is over, the input field and the submit button are disabled // So that the next game can be started. RandNumGameWidget.prototype.setGameOver = function { this.input.setDisabled( true ); this.button.setDisabled( true ); };

// It shows the relevant messages i.e. the present game status and the previous // Guesses to the user. RandNumGameWidget.prototype.setLabels = function (			statusLabel,			prevGuessLabel		) { const value = statusLabel === 'Correct!' ? 'The random number is ' + prevGuessLabel : prevGuessLabel;

if ( statusLabel === 'Correct!' ) { this.status.setType( 'success' ); } else if ( statusLabel === 'Game over!' ) { this.status.setType( 'error' ); }

this.status.setLabel( statusLabel ); this.previous.setLabel( value ); };

// Creates a new custom widget object const randNumGameWidget = new RandNumGameWidget( {			randomNumber: randomNumber		} );

// A popup button widget is instantiated which wraps inside it the custom widget // That we created above. const popUp = new OO.ui.PopupButtonWidget( {			label: 'Play a game',			popup: {				$content: randNumGameWidget.$element,				padded: true			}		} );

// Appends the popup button widget to the left section of the wiki page $( '#p-navigation' ).append( popUp.$element ); } ); } );