Skip to content
dill pixel

Number Utilities

Overview

Section titled “Overview”

Number utilities provide functions for formatting and manipulating numbers in your game. These utilities are particularly useful for displaying scores, timers, and other numerical game elements.

Number Formatting

Section titled “Number Formatting”

Zero Padding

Section titled “Zero Padding”

The getZeroPaddedNumber function adds leading zeros to a number:

import { getZeroPaddedNumber } from 'dill-pixel';


// Add leading zeros
const score = getZeroPaddedNumber(42, 5); // "00042"
const time = getZeroPaddedNumber(7, 2); // "07"

Common Use Cases

Section titled “Common Use Cases”

Score Display

Section titled “Score Display”
import { getZeroPaddedNumber } from 'dill-pixel';


class ScoreDisplay {
  private score = 0;


  updateDisplay() {
    // Display score with 6 digits
    return getZeroPaddedNumber(this.score, 6); // e.g., "000123"
  }
}

Timer Formatting

Section titled “Timer Formatting”
import { getZeroPaddedNumber } from 'dill-pixel';


class GameTimer {
  formatTime(seconds: number) {
    const minutes = Math.floor(seconds / 60);
    const remainingSeconds = seconds % 60;


    return `${getZeroPaddedNumber(minutes, 2)}:${getZeroPaddedNumber(remainingSeconds, 2)}`;
    // e.g., "05:42"
  }
}

Level Numbering

Section titled “Level Numbering”
import { getZeroPaddedNumber } from 'dill-pixel';


class LevelManager {
  formatLevelNumber(level: number) {
    // Format as "Level 01", "Level 02", etc.
    return `Level ${getZeroPaddedNumber(level, 2)}`;
  }
}

Best Practices

Section titled “Best Practices”

  1. Use consistent padding lengths for similar types of numbers:

    // Good: Consistent padding for all scores
    const highScore = getZeroPaddedNumber(highScore, 6);
    const currentScore = getZeroPaddedNumber(currentScore, 6);
    

    // Bad: Inconsistent padding
    const highScore = getZeroPaddedNumber(highScore, 6);
    const currentScore = getZeroPaddedNumber(currentScore, 4);

  2. Consider locale-specific formatting when needed:

    class ScoreFormatter {
      format(score: number) {
        // Combine with locale-specific formatting
        return new Intl.NumberFormat().format(parseInt(getZeroPaddedNumber(score, 6)));
      }
    }

  3. Use appropriate padding lengths for your use case:

    // Time: 2 digits per component
    const seconds = getZeroPaddedNumber(time % 60, 2);
    

    // Scores: Usually 4-6 digits
    const score = getZeroPaddedNumber(points, 6);
    

    // Levels: Usually 2-3 digits
    const level = getZeroPaddedNumber(currentLevel, 2);

Tips and Tricks

Section titled “Tips and Tricks”

  1. Combine with other utilities for complex formatting:

    import { getZeroPaddedNumber } from 'dill-pixel';
    

    function formatGameState(score: number, time: number, level: number) {
      return {
        score: getZeroPaddedNumber(score, 6),
        time: `${getZeroPaddedNumber(Math.floor(time / 60), 2)}:${getZeroPaddedNumber(time % 60, 2)}`,
        level: `Level ${getZeroPaddedNumber(level, 2)}`,
      };
    }

  2. Use for file naming conventions:

    function generateSaveFileName(slot: number) {
      return `save_${getZeroPaddedNumber(slot, 3)}.json`;
    }

  3. Create helper functions for common formats:

    function formatTimer(seconds: number) {
      const minutes = Math.floor(seconds / 60);
      const secs = seconds % 60;
      return `${getZeroPaddedNumber(minutes, 2)}:${getZeroPaddedNumber(secs, 2)}`;
    }