TypeScript Types

Overview

This page documents the TypeScript types and interfaces used throughout the Version Counter application, including component props and utility types.

Component Types

CounterProps

The Counter component accepts the following props for displaying countdown timers. Location: src/components/react/Counter.tsx

fecha_inicio

string | Date

Start date for the countdown. Can be an ISO 8601 string or Date object.Default: Date.now() (current time)Example: "2026-02-24T01:30:00Z"

duracion_dias

number

Duration of the version/countdown period in daysDefault: 0Example: 42

variant

Variant

Display variant for the counter. Determines the visual style and layout.Type: "mini" | "full"Default: "mini"

"mini" - Compact grid layout with 4 columns (used on home page)
"full" - Large glass panel blocks (used on game-specific pages)

onFinalizado

() => void

Optional callback function triggered when the countdown reaches zeroExample:

<Counter 
  fecha_inicio={startDate}
  duracion_dias={42}
  onFinalizado={() => console.log('Version ended!')}
/>

Type Definition

type Variant = "mini" | "full";

interface CounterProps {
  fecha_inicio?: string | Date;
  duracion_dias?: number;
  variant?: Variant;
  onFinalizado?: () => void;
}

Usage Examples

import { Counter } from "@/components/react/Counter";

<Counter
  client:load
  fecha_inicio="2026-02-24T01:30:00Z"
  duracion_dias={42}
  variant="mini"
/>

GameCardProps

The GameCard component displays game version information with countdown. Location: src/components/GameCard.astro

title

string

required

Game title to display on the cardExample: "Genshin Impact New Version Countdown"

current

string

required

Current version numberExample: "6.4"

upcoming

string

required

Upcoming version numberExample: "6.5"

imagen

string

required

URL to the card’s background imageExample: "https://fastcdn.hoyoverse.com/content-v2/plat/162828/..."

fecha_inicio

string

required

ISO 8601 timestamp for version start (passed to Counter component)Example: "2026-02-24T01:30:00Z"

duracion_dias

number

required

Duration in days (passed to Counter component)Example: 42

tema

string

required

Hex color code for the game’s themeExample: "#4ade80"

href

string

required

Relative path to the game’s detail pageExample: "/genshin"

Usage Example

import GameCard from "@/components/GameCard.astro";
import gamesData from "@/data/games.json";

<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
  {gamesData.games.map((game) => (
    <GameCard
      title={game.nombre}
      current={game.version_actual}
      upcoming={game.proxima_version}
      imagen={game.imagen}
      fecha_inicio={game.fecha_inicio}
      duracion_dias={game.duracion_dias}
      tema={game.tema}
      href={game.href}
    />
  ))}
</div>

Utility Types

Time Object

Internal type used by the Counter component to track remaining time.

interface Time {
  dias: number;      // Days remaining
  horas: number;     // Hours remaining (0-23)
  minutos: number;   // Minutes remaining (0-59)
  segundos: number;  // Seconds remaining (0-59)
}

Usage: This type is used internally within the Counter component’s state management:

const [tiempo, setTiempo] = React.useState<Time>({
  dias: 0,
  horas: 0,
  minutos: 0,
  segundos: 0,
});

Variant Type

String literal union type for counter display modes.

type Variant = "mini" | "full";

mini

string

Compact 4-column grid layout

Used on: Home page game cards
Display: Small countdown blocks in a horizontal row
Styling: Minimal, space-efficient design

full

string

Large glass panel blocks

Used on: Individual game pages (e.g., /genshin, /wuwa)
Display: Large countdown blocks with glow effects
Styling: Premium glass-morphism design with hover states

Utility Functions

avanzarVersion

Increment version numbers following the game’s versioning scheme. Location: src/utils/change-version.ts

function avanzarVersion(version: string): string

version

string

required

Current version in major.minor formatExamples: "3.8", "4.0", "6.4"

Returns: string - The next version number Logic:

If minor version is 8: Increments major version and resets minor to 0
Otherwise: Increments minor version by 1

Examples:

avanzarVersion("3.8")  // Returns "4.0"
avanzarVersion("4.0")  // Returns "4.1"
avanzarVersion("6.4")  // Returns "6.5"

Constants

Maintenance Duration

Location: src/constants/constantes.ts

export const MANTENIMIENTO_DURACION_HORAS = 4;

MANTENIMIENTO_DURACION_HORAS

number

Standard maintenance window duration in hoursValue: 4Usage: Used to calculate maintenance end time when displaying patch schedules

Type Safety Benefits

The Version Counter codebase uses TypeScript to provide:

IntelliSense: Auto-completion for props and types
Type checking: Catch errors at compile time
Documentation: Self-documenting code through type definitions
Refactoring safety: Rename and restructure with confidence

Best Practices

When working with these types:

Always specify variant explicitly when using <Counter> in new contexts
Use ISO 8601 format for fecha_inicio to ensure timezone consistency
Pass complete GameCardProps to maintain visual consistency
Leverage type inference where possible to reduce boilerplate

Data Structures

Utilities

Overview

Component Types

CounterProps

Type Definition

Usage Examples

GameCardProps

Usage Example

Utility Types

Time Object

Variant Type

Utility Functions

avanzarVersion

Constants

Maintenance Duration

Type Safety Benefits

Best Practices

Build docs developers (and LLMs) love

Data Structures

Utilities

​Overview

​Component Types

​CounterProps

​Type Definition

​Usage Examples

​GameCardProps

​Usage Example

​Utility Types

​Time Object

​Variant Type

​Utility Functions

​avanzarVersion

​Constants

​Maintenance Duration

​Type Safety Benefits

​Best Practices

Build docs developers (and LLMs) love

Overview

Component Types

CounterProps

Type Definition

Usage Examples

GameCardProps

Usage Example

Utility Types

Time Object

Variant Type

Utility Functions

avanzarVersion

Constants

Maintenance Duration

Type Safety Benefits

Best Practices