Skip to content
Toolkit by Cassino Dev

Number Range Validator

Number Range Validator

Section titled “Number Range Validator”

The numberRange validator ensures that a number value falls within a specified minimum and maximum range.

Syntax

Section titled “Syntax”
validators.numberRange(min: number, max: number): StateValidator

Parameters

Section titled “Parameters”
  • min - Minimum allowed value (inclusive)
  • max - Maximum allowed value (inclusive)

Basic Usage

Section titled “Basic Usage”
import { withLocalState, validators } from 'phaser-hooks';


export class GameScene extends Phaser.Scene {
  create() {
    // Player health between 0 and 100
    const playerHealth = withLocalState(this, 'health', 100, {
      validator: validators.numberRange(0, 100)
    });


    // Player level between 1 and 50
    const playerLevel = withLocalState(this, 'level', 1, {
      validator: validators.numberRange(1, 50)
    });


    // Score between 0 and 999999
    const score = withLocalState(this, 'score', 0, {
      validator: validators.numberRange(0, 999999)
    });
  }
}

Error Handling

Section titled “Error Handling”

Always wrap state updates in try/catch blocks when using validators:

const playerHealth = withLocalState(this, 'health', 100, {
  validator: validators.numberRange(0, 100)
});


function healPlayer(amount: number) {
  try {
    const currentHealth = playerHealth.get();
    const newHealth = currentHealth + amount;
    playerHealth.set(newHealth);
    console.log(`Healed to ${newHealth} HP`);
  } catch (error) {
    console.error('Invalid health value:', error.message);
    // Handle the error - maybe cap at maximum health
    playerHealth.set(100);
  }
}


function damagePlayer(amount: number) {
  try {
    const currentHealth = playerHealth.get();
    const newHealth = currentHealth - amount;
    playerHealth.set(newHealth);
    console.log(`Damaged to ${newHealth} HP`);
  } catch (error) {
    console.error('Invalid health value:', error.message);
    // Handle the error - maybe set to minimum health
    playerHealth.set(0);
  }
}

Common Use Cases

Section titled “Common Use Cases”

Player Stats

Section titled “Player Stats”
export class PlayerStats {
  private health: HookState<number>;
  private mana: HookState<number>;
  private experience: HookState<number>;


  constructor(scene: Phaser.Scene) {
    this.health = withLocalState(scene, 'playerHealth', 100, {
      validator: validators.numberRange(0, 100)
    });


    this.mana = withLocalState(scene, 'playerMana', 50, {
      validator: validators.numberRange(0, 100)
    });


    this.experience = withLocalState(scene, 'playerXP', 0, {
      validator: validators.numberRange(0, 10000)
    });
  }


  addExperience(amount: number) {
    try {
      const currentXP = this.experience.get();
      this.experience.set(currentXP + amount);
    } catch (error) {
      console.error('XP validation failed:', error.message);
      this.experience.set(10000); // Cap at maximum
    }
  }
}

Game Settings

Section titled “Game Settings”
export class GameSettings {
  private volume: HookState<number>;
  private difficulty: HookState<number>;


  constructor(scene: Phaser.Scene) {
    this.volume = withGlobalState(scene, 'gameVolume', 0.8, {
      validator: validators.numberRange(0, 1)
    });


    this.difficulty = withGlobalState(scene, 'gameDifficulty', 1, {
      validator: validators.numberRange(1, 5)
    });
  }


  setVolume(volume: number) {
    try {
      this.volume.set(volume);
      // Update audio system
      this.scene.sound.volume = volume;
    } catch (error) {
      console.error('Invalid volume:', error.message);
    }
  }
}

Error Messages

Section titled “Error Messages”

The numberRange validator returns specific error messages:

  • "Value must be a number" - When the value is not a number or is NaN
  • "Value must be between {min} and {max}" - When the value is outside the range

Next Steps

Section titled “Next Steps”