Snow Code ❄️

Una extensión divertida de Visual Studio Code que agrega un hermoso efecto de nieve cayendo a tu editor. Perfecta para las temporadas invernales o simplemente para agregar un toque festivo a tu experiencia de programación.

Características

Snow Code ofrece dos modos diferentes para disfrutar del efecto de nieve:

1. ❄️ Snow Effect (Overlay)

Copos de nieve caen directamente sobre tu código mientras editas. Los copos aparecen como una capa superpuesta transparente que no interfiere con tu trabajo.

Características:

• 30 copos de nieve animados simultáneamente
• No interfiere con la edición de código (pointer-events: none)
• Diferentes tamaños, velocidades y opacidades
• 7 variaciones de símbolos de copos
• Actualización suave a 20 FPS

Uso:

1. Abre la Paleta de Comandos (Cmd+Shift+P / Ctrl+Shift+P)
2. Busca "Toggle Snow Effect (Overlay)"
3. Los copos empezarán a caer sobre tu editor

2. ❄️ Snow Panel (WebView)

Abre un panel separado con un efecto de nieve más intenso usando WebView. Ideal para tener en una segunda pantalla o simplemente para disfrutar del efecto en un panel dedicado.

Características:

• 50 copos de nieve con animación CSS
• Fondo degradado suave
• Panel independiente que puedes mover
• Rotación de copos mientras caen
• Efecto de sombra brillante

Uso:

1. Abre la Paleta de Comandos (Cmd+Shift+P / Ctrl+Shift+P)
2. Busca "Toggle Snow Panel (WebView)"
3. Se abrirá un nuevo panel con el efecto

Comandos Disponibles

Requisitos

• Visual Studio Code v1.105.0 o superior
• Node.js 20.x (solo para desarrollo)

Instalación

Modo Desarrollo (Actual)

1. Clona o descarga este repositorio
2. Abre la carpeta en VS Code
3. Instala las dependencias:

   npm install
   

4. Compila el proyecto:

   npm run compile
   

5. Presiona F5 para abrir una ventana de desarrollo con la extensión activa

Desde VS Code Marketplace (Próximamente)

Busca "Snow Code" en la sección de extensiones de VS Code.

Uso Básico

Activar el Efecto Overlay

Cmd/Ctrl + Shift + P → "Toggle Snow Effect (Overlay)" → Enter

Los copos empezarán a caer sobre tu código. Ejecuta el comando nuevamente para desactivarlo.

Activar el Panel WebView

Cmd/Ctrl + Shift + P → "Toggle Snow Panel (WebView)" → Enter

Se abrirá un nuevo panel. Cierra el panel o ejecuta el comando nuevamente para detenerlo.

Atajos de Teclado (Opcional)

Puedes asignar atajos personalizados en Keyboard Shortcuts (Cmd+K Cmd+S / Ctrl+K Ctrl+S):

{
    "key": "ctrl+alt+s",
    "command": "snow-code.toggleSnow"
},
{
    "key": "ctrl+alt+shift+s",
    "command": "snow-code.toggleSnowPanel"
}

Configuración

Actualmente no hay configuraciones de usuario. Los parámetros están optimizados para la mejor experiencia. Sin embargo, puedes modificar el código fuente para personalizar:

• Número de copos: NUM_SNOWFLAKES en extension.ts:24
• Caracteres de copos: SNOWFLAKE_CHARS en extension.ts:23
• Velocidad de animación: Intervalo en extension.ts:81

Compatibilidad

Plataformas

• ✅ Windows 10/11
• ✅ macOS 10.14+
• ✅ Linux (Ubuntu, Fedora, etc.)

Temas

Funciona con todos los temas de VS Code:

• ✅ Temas oscuros (mejor visibilidad)
• ✅ Temas claros
• ✅ Temas de alto contraste

Diferencias entre Overlay y WebView

Recomendación: Usa Overlay para programar con nieve de fondo. Usa WebView para disfrutar del efecto en un panel dedicado.

Preguntas Frecuentes

¿Afecta el rendimiento?

No significativamente. Ambos modos están optimizados:

• Overlay: 30 copos, 20 FPS, uso mínimo de memoria
• WebView: Animaciones CSS nativas, muy eficiente

¿Puedo usar ambos modos a la vez?

Sí, puedes tener el overlay activo y el panel abierto simultáneamente.

¿Interfiere con mi código?

No. Ambos modos usan pointer-events: none, lo que significa que los copos no bloquean clics, selección de texto ni ninguna otra interacción.

¿Funciona en todos los archivos?

El Overlay funciona en editores de texto (código, markdown, etc.). No funciona en terminales o paneles de configuración.

El WebView funciona independientemente del editor activo.

Problemas Conocidos

• El overlay puede tener posicionamiento inconsistente en archivos muy largos
• Los copos del overlay solo se muestran en el editor activo
• El WebView consume un poco más de memoria que el overlay (despreciable)

Documentación

Documentación completa disponible en la carpeta documentation/:

• Guía de Usuario - Tutorial completo
• Arquitectura Técnica - Cómo funciona internamente
• Referencia de API - Documentación de código

Desarrollo

Estructura del Proyecto

snow-code/
├── src/
│   └── extension.ts          # Código principal
├── out/                       # Código compilado
├── documentation/             # Documentación completa
├── package.json              # Configuración
└── tsconfig.json            # Config TypeScript

Scripts Disponibles

npm run compile        # Compilar TypeScript
npm run watch          # Compilar en modo watch
npm run lint           # Ejecutar ESLint
npm run test           # Ejecutar tests

Extensión de Funcionalidades

Revisa la Referencia de API para ejemplos de cómo:

• Cambiar el número de copos
• Agregar movimiento horizontal
• Personalizar colores
• Modificar velocidades

Roadmap

Características planeadas para futuras versiones:

• [ ] Configuración de usuario (número de copos, colores, velocidad)
• [ ] Diferentes efectos estacionales (hojas, pétalos, estrellas)
• [ ] Soporte para temas (adaptar colores automáticamente)
• [ ] Movimiento horizontal (efecto de viento)
• [ ] Modo "tormenta de nieve" (más copos)
• [ ] Efectos de sonido opcionales
• [ ] Publicación en VS Code Marketplace

Contribuciones

Las contribuciones son bienvenidas. Si tienes ideas o encuentras bugs:

1. Crea un issue describiendo el problema o la funcionalidad
2. Fork el repositorio
3. Crea una rama con tu cambio
4. Envía un pull request

Licencia

Este proyecto es un proyecto educativo de demostración. Consulta el archivo LICENSE para más información.

Créditos

Creado como un proyecto educativo para aprender a desarrollar extensiones de VS Code.

Símbolos Unicode de copos de nieve:

• ❄ (U+2744) - Snowflake
• ❅ (U+2745) - Tight Trifoliate Snowflake
• ❆ (U+2746) - Heavy Chevron Snowflake
• ✻ (U+273B) - Teardrop-Spoked Asterisk
• ✼ (U+273C) - Open Centre Teardrop-Spoked Asterisk
• ❉ (U+2749) - Balloon-Spoked Asterisk
• ✺ (U+273A) - Sixteen Pointed Asterisk

Recursos

• VS Code Extension API
• Text Decoration API
• Webview API

¡Feliz codificación nevada! ❄️

Si te gusta esta extensión, considera compartirla con otros desarrolladores.