User:Novusistic/customWidgetInOOUI.js

$( document ).ready( 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;

// 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 {

/*   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 the ongoing game i.e. whether the user has won, has lost, or the guess is smaller/larger than the 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 ); } ); } );