DEV Community: Fenriuz

Lynx: El Framework móvil para web devs

Fenriuz — Mon, 14 Apr 2025 17:20:23 +0000

Cada semana sale un nuevo framework para JavaScript, al punto de haber una saturación de los mismos. Aún así los reyes siguen siendo React, Angular, Vue y Svelte que ha estado en crecimiento. Sin embargo, para apps móviles solo tenemos una alternativa (que sea popular) y es React Native. Lo cuál supone algunos inconvenientes por lo monopolizado que está (expo), las restricciones de usar React, entre otras cosas.

Lynx se anuncia en Marzo de 2025 en su blog oficial. Donde lo definen como una familia de tecnologías para crear experiencias web y móviles nativas, de una misma base de código (al igual que React Native), destacando el performance, versatilidad, modernidad, etc.

Una verdadera alternativa web

Si bien es cierto que React Native es casi como desarrollo web, no es del todo así, ya que no podemos usar CSS de manera nativa (y esto nos limita con ciertas librerías como Tailwind, shadcn, etc). Mientras que Lynx sí soporta CSS de manera nativa, animaciones, transiciones, etc.

Rendimiento

El excelente rendimiento de Lynx se debe a que su arquitectura se divide en dos entornos de ejecución distintos:

1. main-thread runtime: Una librería específicamente optimizada para Lynx, dedicada a los eventos de mayor prioridad.
2. background runtime: Garantiza que el hilo principal mantenga una carga de trabajo baja y sin bloqueos.

Gracias a lo anteriormente mencionado, se obtienen dos características claves de Lynx:

- Renderizado Instantáneo: Instant First-Frame Rendering (IFR) define que si el renderizado es lo suficientemente rápido Lynx elimina las pantallas en blanco, creando una experiencia instantánea.
- Scripting de subproceso: Main-Thread Scripting (MTS) se encarga de manejar eventos y gestos de alta prioridad, lo que permite interfaces fluidas y de gran capacidad de respuesta que parecen nativas.

No todo es perfecto

Hasta ahora Lynx suena como una excelente alternativa si vienes de desarrollo web, sin embargo, tiene una particularidad que nos va a limitar en muchos sentidos.
Algo excelente del desarrollo web es que tenemos muchas librerías de componentes que nos permiten desarrollar más rápido nuestras apps, librerías las cuáles puede que no sean compatibles con Lynx, ya que el framework solo permite algunos elementos, como ser: view, text, image, etc. Por lo tanto si importamos un botón de una librería de componentes no será compatible y nos mostrará un error, ya que lo más probable es que utilice la etiqueta <button> por debajo.

Por lo tanto, aunque podamos integrar tailwind de manera sencilla, no podríamos utilizar librerías como shadcn o similares.

Código: Simplemente React

Simplemente cambiamos el import y podemos seguir usando react como estamos acostumbrados.
import { useState } from '@lynx-js/react';

Ahora un ejemplo en el cuál se cambia de imagen al hacer tap en el logo:

import { useCallback, useEffect, useState } from '@lynx-js/react'

import './App.css'
import arrow from './assets/arrow.png'
import lynxLogo from './assets/lynx-logo.png'
import reactLynxLogo from './assets/react-logo.png'

export function App() {
  const [alterLogo, setAlterLogo] = useState(false)

  useEffect(() => {
    console.info('Hello, ReactLynx')
  }, [])

  const onTap = useCallback(() => {
    'background only'
    setAlterLogo(!alterLogo)
  }, [alterLogo])

  return (
    <view>
      <view className='Background' />
      <view className='App'>
        <view className='Banner'>
          <view className='Logo' bindtap={onTap}>
            {alterLogo
              ? <image src={reactLynxLogo} className='Logo--react' />
              : <image src={lynxLogo} className='Logo--lynx' />}
          </view>
          <text className='Title'>React</text>
          <text className='Subtitle'>on Lynx</text>
        </view>
        <view className='Content'>
          <image src={arrow} className='Arrow' />
          <text className='Description'>Tap the logo and have fun!</text>
          <text className='Hint'>
            Edit<text style={{ fontStyle: 'italic' }}>{' src/App.tsx '}</text>
            to see updates!
          </text>
        </view>
        <view style={{ flex: 1 }}></view>
      </view>
    </view>
  )
}

El código de arriba se renderiza a lo siguiente:

Conclusiones

Lynx tiene poco de haber salido como open source, sin embargo la comunidad está creciendo bastante rápido, dando mucho apoyo al proyecto y se le ve un gran potencial. Aún así le queda mucho por delante para ganar la robustez y ecosistema que tiene React Native. Foros, artículos, tutoriales e incluso los modelos de IA carecen de información y conocimiento que nos ayuden a resolver las dudas y errores que nos puedan ir surgiendo. Sugiero que para un MVP, side project o simplemente diversión Lynx es excelente, pero de momento, para algo robusto a gran escala lo mejor es React Native.

¿Y a ti qué te parece este framework?

Lynx: The mobile framework for web devs

Fenriuz — Mon, 14 Apr 2025 14:00:42 +0000

Every week, it feels like there's a new JavaScript framework hitting the market—so much so that it's become overwhelming. Still, the reigning giants are React, Angular, Vue, and Svelte (which continues to gain traction). But when it comes to mobile apps, there's really only one popular option: React Native. And while it's a solid choice, the fact that it's so dominant—especially with tools like Expo—comes with its own limitations, such as being tied to React and the specific constraints of that ecosystem.

In March 2025, Lynx was officially announced on its official blog. The team describes it as a family of technologies designed to build both web and truly native mobile experiences from a single codebase—similar to React Native, but with a focus on performance, versatility, and modern development practices.

A True Web Alternative

While React Native may feel like web development, its not entirely the same—especially when it comes to styling. Native CSS support is missing, which creates friction with libraries like Tailwind or Shadcn. Lynx, on the other hand, supports native CSS, transitions, animations, and more, out of the box—bringing it closer to the real web dev experience.

Performance

Lynx's impressive performance is thanks to its dual-runtime architecture:

1. Main-thread runtime : A performance-optimized library focused on handling high-priority events.

2. Background runtime : Keeps the main thread light and unblocked.

Because of this setup, Lynx delivers two key features:

Instant First-Frame Rendering (IFR): If rendering is fast enough, Lynx can eliminate loading screens altogether, creating a snappy, app-like experience.
Main-Thread Scripting (MTS): Handles high-priority interactions like gestures and user input, resulting in buttery-smooth interfaces that feel native.

Not Everything Is Perfect

Lynx sounds like an ideal alternative for web developers moving into mobile—but there are some caveats.

One of the best things about web development is the massive library ecosystem that helps us build faster. Unfortunately, Lynx doesn't support standard HTML elements like <button>, <input>, etc. Instead, you're limited to custom elements such as view, text, and image.

That means importing a button from a UI library like Shadcn likely won't work—it'll throw an error because those components are built using standard HTML tags.

So while Tailwind works beautifully, libraries like Shadcn and similar component kits are a no-go—for now.

Code: Just React

The nice thing? You still write React code—just swap your import:

import { useState } from '@lynx-js/react';

Heres an example where tapping the logo switches between two images:

import { useCallback, useEffect, useState } from '@lynx-js/react'

import './App.css'
import arrow from './assets/arrow.png'
import lynxLogo from './assets/lynx-logo.png'
import reactLynxLogo from './assets/react-logo.png'

export function App() {
  const [alterLogo, setAlterLogo] = useState(false)

  useEffect(() => {
    console.info('Hello, ReactLynx')
  }, [])

  const onTap = useCallback(() => {
    'background only'
    setAlterLogo(!alterLogo)
  }, [alterLogo])

  return (
    <view>
      <view className='Background' />
      <view className='App'>
        <view className='Banner'>
          <view className='Logo' bindtap={onTap}>
            {alterLogo
              ? <image src={reactLynxLogo} className='Logo--react' />
              : <image src={lynxLogo} className='Logo--lynx' />}
          </view>
          <text className='Title'>React</text>
          <text className='Subtitle'>on Lynx</text>
        </view>
        <view className='Content'>
          <image src={arrow} className='Arrow' />
          <text className='Description'>Tap the logo and have fun!</text>
          <text className='Hint'>
            Edit<text style={{ fontStyle: 'italic' }}>{' src/App.tsx '}</text>
            to see updates!
          </text>
        </view>
        <view style={{ flex: 1 }}></view>
      </view>
    </view>
  )
}

Heres what that code renders:

Final Thoughts

Lynx is brand new to the open-source world, but its community is growing fast, and it shows real promise. That said, it's still far from achieving the maturity, ecosystem, and support React Native enjoys. Theres currently limited documentation, few tutorials, and most AI tools wont be able to help you much when you run into bugs or roadblocks.

My take? Lynx is fantastic for MVPs, side projects, or just experimenting. But if you're building something large-scale and production-ready, React Native is still the safer choice—for now.

What do you think of this new framework?

AdventJS 2023: Reto del Día 11

Fenriuz — Fri, 15 Dec 2023 02:33:35 +0000

Solución al reto #11 del AdventJS 2023

Solución del reto anterior

Solución del siguiente reto

Descripción del Reto
Análisis
- Entrada
- Salida
- Consideraciones
Solución
- Código
- Soluciones de la comunidad

Descripción del Reto

En el taller de Santa, los elfos aman los acertijos 🧠. Este año, han creado uno especial: un desafío para formar un palíndromo navideño.

Un palíndromo es una palabra que se lee igual hacia adelante y hacia atrás. Los elfos quieren saber si es posible formar un palíndromo haciendo, como mucho, un intercambio de letras.

Crea una función getIndexsForPalindrome que reciba una cadena de caracteres y devolverá:

Si ya es un palíndromo, un array vacío.
Si no es posible, null.
Si se puede formar un palíndromo con un cambio, un array con las dos posiciones (índices) que se deben intercambiar para poder crearlo. Por ejemplo:

getIndexsForPalindrome('anna') // []
getIndexsForPalindrome('abab') // [0, 1]
getIndexsForPalindrome('abac') // null
getIndexsForPalindrome('aaaaaaaa') // []
getIndexsForPalindrome('aaababa') // [1, 3]
getIndexsForPalindrome('caababa') // null

javascript
Si se puede formar el palíndromo con diferentes intercambios, siempre se debe devolver el primero que se encuentre.

Análisis

En este reto nuestro objetivo es encontrar un palindromo intercambiando de lugar dos elementos del string y retornar el índice de esos dos elementos, de no encontrar un palindromo se retorna un array vacío.

Entrada

Word(word): Un string con la palabra a evaluar.

Salida

Un array de dos elementos con los índices a cambiar para encontrar el palindromo
Si ya es un palindromo se retorna un array vacío
Si no se cumplen ninguna de las dos anteriores se retorna null

Consideraciones

Si se pueden formar varios palindromos siempre debemos devolver el primero en ser encontrado.

Solución

Se puede solucionar recorriendo cada elemento del string, y dentro de esa iteración volverlo a recorrer e ir intercambiando elementos para comparar.

Código

/**
 * Devuelve los índices de los caracteres que deben invertirse para hacer que una palabra sea un palíndromo.
 *
 * @param {string} word - La palabra para verificar sus propiedades palindrómicas.
 * @return {number[] | null} - Un array de dos índices que representan los caracteres a invertir, o null si no existen dichos índices.
 */
function getIndexsForPalindrome(word) {
  // Verifica si la palabra dada ya es un palíndromo
  const isPalindrome = (s) => s === s.split("").reverse().join("");

  // Si la palabra ya es un palíndromo, devuelve un array vacío
  if (isPalindrome(word)) {
    return [];
  }

  // Itera a través de todas las posibles combinaciones de índices
  for (let i = 0; i < word.length; i += 1) {
    for (let j = i + 1; j < word.length; j += 1) {
      // Crea una nueva palabra intercambiando los caracteres en los índices i y j
      const newWord =
        word.substring(0, i) +
        word[j] +
        word.substring(i + 1, j) +
        word[i] +
        word.substring(j + 1);

      // Si la nueva palabra es un palíndromo, devuelve los índices i y j
      if (isPalindrome(newWord)) {
        return [i, j];
      }
    }
  }

  // Si no existen dichos índices, devuelve null
  return null;
}

Soluciones de la comunidad

Solución por iswilljr:

function getIndexsForPalindrome(word: string) {
  const _letters = [...word]
  const palindrome = word === [..._letters].reverse().join('')

  let initial: number[] | null = [null, []][+palindrome]
  let index = 0
  let aux = 1

  const letters = [_letters, []][+palindrome]
  let auxLetters = letters.slice(1)

  for (const letter of letters) {
    for (const auxLetter of auxLetters) {
      const w = [...letters]
      w[index] = auxLetter
      w[aux] = letter

      const isPalindrome = +(w.join('') === w.reverse().join(''))
      const isInitialNull = +(initial == null)
      const isDifferentIndex = +(index !== aux)

      const values = [initial, initial, initial, [index, aux]]

      initial = values[isInitialNull + isDifferentIndex + isPalindrome]
      aux++
    }

    index++
    aux = 1
    auxLetters = [[], auxLetters][+(initial == null)]
  }

  return initial
}

Solución por Achalogy:

function getIndexsForPalindrome(word) {
  let res: any = null
  for (const a of Array.from({ length: word.length }).keys()) {
    for (const b of Array.from({ length: word.length }).keys()) {
      let swapped = [...word]
      let aux = word[a]
      swapped[a] = word[b]
      swapped[b] = aux

      let left = swapped.slice(0, Math.floor(word.length / 2)).join("")
      let right = swapped.slice(Math.ceil(word.length / 2)).reverse().join("")

      res = [
        [
          null
          , [
            []
            , [a, b]
          ][+((a + b) > 0)]
        ][+(left == right)]
        , res
      ][+!!res]
    }
  }
  return res
}

Y ese fue el reto para el 11 de diciembre y sus soluciones. Dale like si te ha gustado el reto o la solución!
¿Tienes otra solución alternativa? ¡Déjala en los comentarios!

AdventJS 2023: Reto del Día 10

Fenriuz — Tue, 12 Dec 2023 05:17:11 +0000

Solución al reto #10 del AdventJS 2023

Solución del reto anterior

Solución del siguiente reto

Descripción del Reto
Análisis
- Entrada
- Salida
- Consideraciones
Solución
- Código
- Soluciones de la comunidad

Descripción del Reto

¡Vaya idea ha tenido Sam Elfman! Quiere ofrecer un servicio que te crea un árbol de Navidad 🎄 personalizado en cuestión de segundos.

Para crearlo nos pasan una cadena de caracteres para formar el árbol y un número que indica la altura del mismo.

Cada carácter de la cadena representa un adorno del árbol, y vamos utilizándolos de forma cíclica hasta llegar a la altura indicada. Como mínimo siempre nos pasarán uno.

Debemos devolver un string multilínea con el árbol de Navidad formado con los adornos, la altura indicada más una última línea con el tronco formado por el carácter | en el centro y, finalmente, un salto de línea \n.

Por ejemplo si recibimos la cadena "123" y el número 4 como altura, tendríamos que construir este árbol:

1
2 3
1 2 3
1 2 3 1
|
Si recibimos la cadena *@o y el número 3, el árbol que debemos devolver es:

*
@ o

@ o | Nota:

El árbol siempre debe estar centrado, para ello añade espacios en blanco a la izquierda de cada línea.
Crea espacios sólo a la izquierda de cada línea del árbol. No dejes espacios en blanco a la derecha.
Los adornos tienen un espacio en blanco entre ellos de separación.

Análisis

¡Y volvemos a dibujar! Esta vez serán los árboles de navidad, los cuáles debemos dibujar utilizando los strings que nos pasen como parámetro y haciéndolos del tamaño que nos indiquen

Entrada

Ornaments(ornaments): Un string donde vendrá la secuencia de caracteres que llenará el árbol
Height(height): El tamaño en altura y máxima anchura que tendrá el árbol

Salida

Un string con el dibuj del árbol.

Consideraciones

Debemos agregar los espacios al principio para darle forma de árbol navideño
Al final debemos colocar salto de línea

Solución

Una manera sencilla de poder hacer el reto es tener una idea de cuántos caracteres se ocuparán en total, para eso podemos hacer uso de las matemáticas. Una vez obteniendo se puede iterar e ir rellenando cada fila del árbol.

Código

function createChristmasTree(ornaments, height) {
  let tree = "";
  const totalOrnaments = (height * (height + 1)) / 2;
  const allOrnaments = ornaments.repeat(totalOrnaments);

  let lastIndex = 0;

  for (let i = 1; i <= height; i += 1) {
    const spaces = " ".repeat(height - i);
    const ornamentRow = allOrnaments
      .slice(lastIndex, lastIndex + i)
      .split("")
      .join(" ");

    tree += spaces + ornamentRow + "\n";

    lastIndex += i;
  }

  tree += "|".padStart(height, " ") + "\n";
  return tree;
}

Soluciones de la comunidad

Solución por iswilljr:

function createChristmasTree(ornaments, height) {
  let result = ''
  const spaces = ' '.repeat(height - 1)

  const ornamentsArray = [...ornaments.repeat(height)].join(' ')
  let currentPosition = 0

  for (const index of new Array(height).keys()) {
    const length = index + 1
    const total = currentPosition + length

    result +=
      spaces.slice(index) +
      ornamentsArray.slice(currentPosition * 2, total * 2 - 1) +
      '\n'

    currentPosition = total % ornaments.length
  }

  return result + spaces + '|\n'
}

Solución por yasai:

function createChristmasTree(ornaments, height) {
    let tree = "";
    let count = 0;

    // pyramid
    for (let i = 0; i < height; i++) {
      let line = "";
      // spaces
      line += " ".repeat(height - i - 1);
      // ornaments
      for (let j = 0; j < i + 1; j++) {
        let dec = ornaments[count];
        count++;
        if (count == ornaments.length) count = 0;
         if (j == i) {
          line += `${dec}`;
          break;
        }
        line += `${dec} `;
      }
      // add to the tree
      tree += line + "\n";
    }

    // trunk
    tree += " ".repeat(height - 1) + "|\n";

    return tree;
  }

Y ese fue el reto para el 10 de diciembre y sus soluciones. Dale like si te ha gustado el reto o la solución!
¿Tienes otra solución alternativa? ¡Déjala en los comentarios!

AdventJS 2023: Day 11 Challenge

Fenriuz — Mon, 11 Dec 2023 06:00:00 +0000

The solution to challenge #11 of AdventJS 2023

The solution to the previous challenge

The solution to the next challenge

Challenge Description

In Santa's workshop, the elves love puzzles 🧠. This year, they have created a special one: a challenge to form a Christmas palindrome.

A palindrome is a word that reads the same forwards and backward. The elves want to know if it is possible to form a palindrome by making, at most, one exchange of letters.

Create a function getIndexsForPalindrome that receives a string and returns:

If it is already a palindrome, an empty array.
If it is not possible, null.
If a palindrome can be formed with one change, an array with the two positions (indexes) must be swapped to create it.

For example:

getIndexsForPalindrome('anna') // []
getIndexsForPalindrome('abab') // [0, 1]
getIndexsForPalindrome('abac') // null
getIndexsForPalindrome('aaaaaaaa') // []
getIndexsForPalindrome('aaababa') // [1, 3]
getIndexsForPalindrome('caababa') // null

If the palindrome can be formed with different swaps, always return the first one found.

Analysis

In this challenge, our goal is to find a palindrome by swapping two elements of the string and return the indices of those two elements. If a palindrome cannot be found, return an empty array.

Input

Word (word): A string with the word to evaluate.

Output

An array of two elements with the indices to change to find the palindrome.
If it's already a palindrome, return an empty array.
If none of the above conditions are met, return null.

Considerations

If multiple palindromes can be formed, always return the first one found.

Solution

It can be solved by iterating over each element of the string, and within that iteration, iterating again and swapping elements to compare.

Code

/**
 * Returns the indices of characters that need to be reversed in order to make a word a palindrome.
 *
 * @param {string} word - The word to check for palindromic properties.
 * @return {number[] | null} - An array of two indices representing the characters to be reversed, or null if no such indices exist.
 */
function getIndexsForPalindrome(word) {
  // Check if the given word is already a palindrome
  const isPalindrome = (s) => s === s.split("").reverse().join("");

  // If the word is already a palindrome, return an empty array
  if (isPalindrome(word)) {
    return [];
  }

  // Iterate through all possible pairs of indices
  for (let i = 0; i < word.length; i += 1) {
    for (let j = i + 1; j < word.length; j += 1) {
      // Create a new word by swapping the characters at indices i and j
      const newWord =
        word.substring(0, i) +
        word[j] +
        word.substring(i + 1, j) +
        word[i] +
        word.substring(j + 1);

      // If the new word is a palindrome, return the indices i and j
      if (isPalindrome(newWord)) {
        return [i, j];
      }
    }
  }

  // If no such indices exist, return null
  return null;
}

Community Solutions

Solution by iswilljr:

function getIndexsForPalindrome(word: string) {
  const _letters = [...word]
  const palindrome = word === [..._letters].reverse().join('')

  let initial: number[] | null = [null, []][+palindrome]
  let index = 0
  let aux = 1

  const letters = [_letters, []][+palindrome]
  let auxLetters = letters.slice(1)

  for (const letter of letters) {
    for (const auxLetter of auxLetters) {
      const w = [...letters]
      w[index] = auxLetter
      w[aux] = letter

      const isPalindrome = +(w.join('') === w.reverse().join(''))
      const isInitialNull = +(initial == null)
      const isDifferentIndex = +(index !== aux)

      const values = [initial, initial, initial, [index, aux]]

      initial = values[isInitialNull + isDifferentIndex + isPalindrome]
      aux++
    }

    index++
    aux = 1
    auxLetters = [[], auxLetters][+(initial == null)]
  }

  return initial
}

Solution by Achalogy:

function getIndexsForPalindrome(word) {
  let res: any = null
  for (const a of Array.from({ length: word.length }).keys()) {
    for (const b of Array.from({ length: word.length }).keys()) {
      let swapped = [...word]
      let aux = word[a]
      swapped[a] = word[b]
      swapped[b] = aux

      let left = swapped.slice(0, Math.floor(word.length / 2)).join("")
      let right = swapped.slice(Math.ceil(word.length / 2)).reverse().join("")

      res = [
        [
          null
          , [
            []
            , [a, b]
          ][+((a + b) > 0)]
        ][+(left == right)]
        , res
      ][+!!res]
    }
  }
  return res
}

And that was the challenge for December 11th and its solutions. Give it a like if you enjoyed the challenge or the solution! Do you have an alternative solution? Leave it in the comments!

AdventJS 2023: Day 9 Challenge

Fenriuz — Mon, 11 Dec 2023 00:00:05 +0000

The solution to the Challenge #9 of AdventJS 2023

The solution to the previous challenge

The solution to the next challenge

Challenge Description

They are turning on the Christmas lights 🎄 in the city and, as every year, they have to be fixed!

The lights are of two colors: 🔴 and 🟢 . For the effect to be appropriate, they must always alternate. That is, if the first light is red, the second must be green, the third red, the fourth green, etc.

We have been asked to write a function adjustLights that, given an array of strings with the color of each light, return the minimum number of lights that need to be changed for the colors to alternate.

adjustLights(['🟢', '🔴', '🟢', '🟢', '🟢'])
// -> 1 (you change the fourth light to 🔴)

adjustLights(['🔴', '🔴', '🟢', '🟢', '🔴'])
// -> 2 (you change the second light to 🟢 and the third to 🔴)

adjustLights(['🟢', '🔴', '🟢', '🔴', '🟢'])
// -> 0 (they are already alternating)

adjustLights(['🔴', '🔴', '🔴'])
// -> 1 (you change the second light to 🟢)

Analysis

For this exercise, the goal is to find the least number of changes necessary for the lights to alternate. The complexity lies not so much in leaving them alternating, but in finding the fewest number of changes to get to that point.

Input

Lights (lights): An array of strings where each color of light goes.

Output

The minimum number of movements necessary for the lights to alternate.

Considerations

It is important to consider that it's not just about alternating the colors, but also finding a way to do it with the least number of movements, as in this case: ["🟢", "🔴", "🔴", "🟢", "🔴", "🟢", "🔴", "🟢", "🔴"]. We start with a green, then a red and subsequently another red, if we change that red to green we realize that the next one is also green and we must also change it, in this case to a red, but then another red would follow... and so on, resulting in a 7. The point is that if we simply change the first green to a red and the first red to a green, we would have everything solved with only 2 changes.

Solution

Considering that the colors must alternate, we can reason that if we arrange the array in such a way, it will start with either the red or green color and alternate from there, so we can evaluate both scenarios and count how many changes would be needed, thus mitigating the problem mentioned in the considerations.

Code

/**
 * Organizes alternately the lights in an array.
 *
 * @param {string[]} lights - The array of lights.
 * @return {number} Number of changes needed to organize the lights.
 */
function adjustLights(lights) {
  // Initialize variables to count the necessary changes
  // both if starting by red or green
  let redCount = 0;
  let greenCount = 0;

  // Iterate over each light color in the array
  lights.forEach((light, index) => {
    // Check if the index is even or odd
    // this in order to count the changes
    // for both cases, red even and green odd
    // or green even and red odd
    if (index % 2) {
      // We will evaluate the even cases

      // If it's green, add +1 to green
      if (light === "🟢") greenCount++;

      // If it's red, add +1 to red
      if (light === "🔴") redCount++;
    } else {
      // Otherwise for the odd ones

      // If the light is red, we do the opposite and +1 for green
      if (light === "🔴") greenCount++;

      // If the light is green, +1 for red
      if (light === "🟢") redCount++;
    }
  });

  // Return the minimum between red and green
  return Math.min(redCount, greenCount);
}

Community Solutions

Solution by Jioh19:

function adjustLights(lights) {
  const color = ['🟢', '🔴'];
  let res = 0;
  for (const [i, light] of lights.entries()) {
    res += +(light == color[i % 2]);
  }
  return Math.min(res, lights.length - res);
}

Solution by Yasai:

function adjustLights(lights) {
  const init = lights[0];
  let rev = false;
  let count1 = 0;
  let count2 = 0;
  for (const light of lights) {
    count1 += rev == (light == init);
    rev = !rev;
  }

  rev = true;
  for (const light of lights) {
    count2 += rev == (light == init);
    rev = !rev;
  }

  count1 = Math.min(count1, count2);

  // Code here
  return count1;
}

And that was the challenge for December 9th and its solutions. Give a like if you liked the challenge or the solution!

Do you have another alternative solution? Leave it in the comments!

AdventJS 2023: Reto del Día 9

Fenriuz — Sun, 10 Dec 2023 23:18:39 +0000

Solución al reto #9 del AdventJS 2023

Solución del reto anterior

Solución del siguiente reto

Descripción del Reto
Análisis
- Entrada
- Salida
- Consideraciones
Solución
- Código
- Soluciones de la comunidad

Descripción del Reto

Están encendiendo las luces de Navidad 🎄 en la ciudad y, como cada año, ¡hay que arreglarlas!

Las luces son de dos colores: 🔴 y 🟢 . Para que el efecto sea el adecuado, siempre deben estar alternadas. Es decir, si la primera luz es roja, la segunda debe ser verde, la tercera roja, la cuarta verde, etc.

Nos han pedido que escribamos una función adjustLights que, dado un array de strings con el color de cada luz (representados con los emojis 🔴 para el rojo y 🟢 para el verde), devuelva el número mínimo de luces que hay que cambiar para que estén los colores alternos.

adjustLights(['🟢', '🔴', '🟢', '🟢', '🟢'])
// -> 1 (cambias la cuarta luz a 🔴)

adjustLights(['🔴', '🔴', '🟢', '🟢', '🔴'])
// -> 2 (cambias la segunda luz a 🟢 y la tercera a 🔴)

adjustLights(['🟢', '🔴', '🟢', '🔴', '🟢'])
// -> 0 (ya están alternadas)

adjustLights(['🔴', '🔴', '🔴'])
// -> 1 (cambias la segunda luz a 🟢)

Análisis

Para este ejercicio el objetivo es encontrar la menor cantidad de cambios necesarios para que las luces queden alternadas. La complejidad no reside tanto en dejarlas alternadas, sino de encontrar la menor cantidad de cambios para llegar a ese punto.

Entrada

Lights(lights): Un arreglo de strings en el que irá cada color de luz.

Salida

El número mínimo de movimientos necesarios para que las luces queden alternadas.

Consideraciones

Hay que tomar en cuenta que no solo es de que los colores queden alternados, debe buscarse la manera de hacerlo con la menor cantidad de movimientos, como en este caso: ["🟢", "🔴", "🔴", "🟢", "🔴", "🟢", "🔴", "🟢", "🔴"] Donde empezamos con un verde, luego un rojo y posteriormente un rojo otra vez, si cambiamos ese rojo a verde nos daremos cuenta que el siguiente también es verde y también debemos cambiarlo, en este caso por un rojo, pero seguidamente iría otro rojo... y así sucesivamente, dando como respuesta un 7. El punto es que si simplemente cambiamos el primer verde por un rojo y el primer rojo por un verde tendríamos todo resuelto con solo 2 cambios.

Solución

Teniendo en cuenta que los colores deben ir alternados, podemos razonar que si arreglamos el array de dicha manera, éste va a empezar por el color rojo o por el verde e ir alternando a partir de allí, por lo tanto podemos evaluar ambos escenarios y contar cuantos cambios se necesitarían, así se mitiga el problema que se comentaba en las consideraciones.

Código

/**
 * Ordenar alternadamente las luces en base un arreglo desordenado.
 *
 * @param {string[]} lights - El arreglo de luces.
 * @return {number} Número de cambios necesarios para ordenar las luces.
 */
function adjustLights(lights) {
  // Inicializar las variables que contarán los cambios necesarios
  // tanto si se empieza por rojo o por verde
  let redCount = 0;
  let greenCount = 0;

  // Iterar sobre cada color de luz en el arreglo
  lights.forEach((light, index) => {
    // Chequeamos si el índice es par o impar
    // esto con la finalidad de que contemos los cambios
    // para ambos casos, rojo pares y verde impares
    // o para verde pares y rojo impares
    if (index % 2) {
      // Evaluaremos los casos donde sea par

      // Si es verde, se suma +1 a verde
      if (light === "🟢") greenCount++;

      // Si es roja, se suma +1 a rojo
      if (light === "🔴") redCount++;
    } else {
      // Caso contrario para los impares

      // Si la luz es roja, haremos lo contrario y +1 para verde
      if (light === "🔴") greenCount++;

      // Si la luz es verde, +1 al rojo
      if (light === "🟢") redCount++;
    }
  });

  // Retornamos el mínimo entre rojo y verde
  return Math.min(redCount, greenCount);
}

Soluciones de la comunidad

Solución por Jioh19:

function adjustLights(lights) {
  const color = ['🟢', '🔴'];
  let res = 0;
  for (const [i, light] of lights.entries()) {
    res += +(light == color[i % 2]);
  }
  return Math.min(res, lights.length - res);
}

Solución por Yasai:

function adjustLights(lights) {
  const init = lights[0];
  let rev = false;
  let count1 = 0;
  let count2 = 0;
  for (const light of lights) {
    count1 += rev == (light == init);
    rev = !rev;
  }

  rev = true;
  for (const light of lights) {
    count2 += rev == (light == init);
    rev = !rev;
  }

  count1 = Math.min(count1, count2);

  // Code here
  return count1;
}

Y ese fue el reto para el 9 de diciembre y sus soluciones. Dale like si te ha gustado el reto o la solución!
¿Tienes otra solución alternativa? ¡Déjala en los comentarios!

AdventJS 2023: Day 10 Challenge

Fenriuz — Sun, 10 Dec 2023 06:00:00 +0000

Solution to challenge #10 of AdventJS 2023

Solution to the previous challenge

Solution to the next challenge

Challenge Description

What an idea Sam Elfman has had! He wants to offer a service that creates a customized Christmas tree 🎄 in a matter of seconds.

To create it, we are given a string to form the tree and a number that indicates its height.

Each character of the string represents an ornament of the tree, and we use them cyclically until we reach the indicated height. At least, they will always pass us one.

We must return a multiline string with the Christmas tree made with the ornaments, the indicated height plus a final line with the trunk formed by the character | in the center and, finally, a new line \n.

For example, if we receive the string "123" and the number 4 as height, we would have to build this tree:

   1 2 3 1 2 31 2 3 1 |

If we receive the string *@o and the number 3, the tree we should return is:

  * @ o* @ o |

Note:

The tree should always be centered, for that reason add blank spaces to the left of each line.
Create spaces only to the left of each line of the tree. Do not leave blank spaces to the right.
The ornaments have a white space between them for separation.

Analysis

And we're back to drawing! This time it's Christmas trees, which we must draw using the strings passed as parameters and sizing them as indicated.

Input

Ornaments (ornaments): A string containing the character sequence that will fill the tree.
Height (height): The height and maximum width of the tree.

Output

A string with the tree's drawing.

Considerations

We must add spaces at the beginning to give it the shape of a Christmas tree.
At the end, we must insert a line break.

Solution

A simple way to complete the challenge is to calculate the total number of characters required, for which we can use mathematics. Once we have this, we can iterate and fill each row of the tree.

Code

function createChristmasTree(ornaments, height) {
  let tree = "";
  const totalOrnaments = (height * (height + 1)) / 2;
  const allOrnaments = ornaments.repeat(totalOrnaments);
  let lastIndex = 0;
  for (let i = 1; i <= height; i += 1) {
    const spaces = " ".repeat(height - i);
    const ornamentRow = allOrnaments
      .slice(lastIndex, lastIndex + i)
      .split("")
      .join(" ");
    tree += spaces + ornamentRow + "\n";
    lastIndex += i;
  }
  tree += "|".padStart(height, " ") + "\n";
  return tree;
}

Community Solutions

Solution by iswilljr:

function createChristmasTree(ornaments, height) {
  let result = ''
  const spaces = ' '.repeat(height - 1)

  const ornamentsArray = [...ornaments.repeat(height)].join(' ')
  let currentPosition = 0

  for (const index of new Array(height).keys()) {
    const length = index + 1
    const total = currentPosition + length

    result +=
      spaces.slice(index) +
      ornamentsArray.slice(currentPosition * 2, total * 2 - 1) +
      '\n'

    currentPosition = total % ornaments.length
  }

  return result + spaces + '|\n'
}

Solution by yasai:

function createChristmasTree(ornaments, height) {
    let tree = "";
    let count = 0;

    // pyramid
    for (let i = 0; i < height; i++) {
      let line = "";
      // spaces
      line += " ".repeat(height - i - 1);
      // ornaments
      for (let j = 0; j < i + 1; j++) {
        let dec = ornaments[count];
        count++;
        if (count == ornaments.length) count = 0;
         if (j == i) {
          line += `${dec}`;
          break;
        }
        line += `${dec} `;
      }
      // add to the tree
      tree += line + "\n";
    }

    // trunk
    tree += " ".repeat(height - 1) + "|\n";

    return tree;
  }

And that was the challenge for December 10th and its solutions. Give it a like if you enjoyed the challenge or the solution! Do you have an alternative solution? Leave it in the comments!

AdventJS 2023: Day 8 Challenge

Fenriuz — Sun, 10 Dec 2023 05:17:38 +0000

The solution to the Challenge #8 of AdventJS 2023

The solution to the previous challenge

The solution to the next challenge

Challenge Description

The elves are very busy in Santa Claus' workshop organizing gifts 🎁 for Christmas Eve 🎄.

The input format is special, as it indicates the number of gifts and the type of gift with letters from a to z. For example, '66a11b' means 66 a gifts and 11 b gifts.

The elves have a special system for organizing the gifts:

Every 10 gifts of the same type are packed in a box, represented by {x}. For example, 20 type a gifts are packed in two boxes like this: {a}{a}.
Every 5 boxes are stacked on a pallet, represented by [x]. For example, 10 a boxes are stacked on 2 pallets in this way: [a][a]
Any additional gift is placed in a bag, represented by () and all of them are placed inside. For example, 4 b gifts are placed in a bag like this (bbbb)

The gifts are then placed in the following order : pallets, boxes and bags. The gifts appear in the same order as the input string.

Your task is to write a function organizeGifts takes a string of gifts as an argument and returns a string representing the warehouse.

const result1 = organizeGifts('76a11b')
console.log(result1)
// `[a]{a}{a}(aaaaaa){b}(b)`

/* Explanation:

  76a: 76 gifts type 'a' would be packed in 7 boxes and 6 gifts would be left, resulting in 1 pallet [a] (for the first 5 boxes), 2 loose boxes {a}{a} and a bag with 6 gifts (aaaaaa)

  11b: 11 gifts type 'b' would be packed in 1 box and 1 gift would be left, resulting in 1 loose box {b} and a bag with 1 gift (b)
*/

Analysis

The goal is to break down the string into parts, to divide the quantities of each gift, and once that is done, they can be packaged as marked by the requirements.

Input

Gifts (gifts): A string with the quantity of each type of gift.

Output

A string with the packaged gifts.

Considerations

The return value should be in the same order as the input, following the order of the gifts.

Solution

We can take the input string and split it between the number of gifts of each type, using RegExp. Once that is done, we iterate through each of them and proceed to divide to find the number of pallets, boxes, and bags.

/**
 * Organizes a list of gifts.
 *
 * @param {string} gifts - The list of gifts to be organized.
 * @returns {string} - The organized representation of the gifts.
 */
function organizeGifts(gifts) {
  let res = "";
  const giftsSplit = gifts.match(/\d+[a-z]/g);

  // Iterate over each gift in the giftsSplit array
  for (const gift of giftsSplit) {
    const quantity = Number(gift.slice(0, -1));
    const giftType = gift.charAt(gift.length - 1);

    // Calculate the number of pallets needed
    const pallets = `[${giftType}]`.repeat(Math.floor(quantity / 50));

    // Calculate the remainder after packing in pallets
    const remainder = quantity % 50;

    // Calculate the number of boxes needed
    const boxes = `{${giftType}}`.repeat(Math.floor(remainder / 10));

    // Calculate the remainder gifts after packing in boxes
    const remainderGifts = giftType.repeat(remainder % 10);

    // Check if there are remainder gifts and create a bag
    const bags = remainderGifts && `(${remainderGifts})`;

    // Concatenate the pallets, boxes, and bags for the current gift
    res += pallets + boxes + bags;
  }

  // Return the organized representation of the gifts
  return res;
}

Community Solutions

Solution by cristianstu:

function organizeGifts(gifts) {
  const matches = [...gifts.matchAll(/(\d+)([a-z])/g)];

  return matches.map(([,qtty, letter]) => {
    qtty = +qtty

    const pales = Math.trunc(qtty / 50)
    const boxes = Math.trunc((qtty - (50 * pales)) / 10)
    const bags = qtty - (pales * 50) - (boxes * 10)

    return `[${letter}]`.repeat(pales) +
           `{${letter}}`.repeat(boxes) +
           `(${letter})`.repeat(bags).replace(/\)\(/g, '')

  }).join('');
}

Solution by jamerrq:

function organizeGifts (gifts: string): string {
  const giftsRegex = /(\d+)([a-z])/g
  const giftsMatches = gifts.matchAll(giftsRegex)
  let ans = ''
  for (const match of giftsMatches) {
    const [, qty, symbol] = match
    let left = +qty
    ans = `${ans}${`[${symbol}]`.repeat((left - (left % 50)) / 50)}`
    left -= 50 * ((left - (left % 50)) / 50)
    ans = `${ans}${`{${symbol}}`.repeat((left - (left % 10)) / 10)}`
    left -= 10 * (left - (left % 10)) / 10
    const x = ((left - 1) + ((left - 1) >> 31)) ^ ((left - 1) >> 31)
    ans = `${ans}${`(${symbol.repeat(left)})`.repeat((left + 1 - x) / 2)}`
  }
  return ans
}

And that was the challenge for December 8th and its solutions. Give a like if you liked the challenge or the solution! Do you have another alternative solution? Leave it in the comments!

AdventJS 2023: Reto del Día 8

Fenriuz — Sat, 09 Dec 2023 23:23:39 +0000

Solución al reto #8 del AdventJS 2023

Solución del reto anterior

Solución del siguiente reto

Descripción del Reto
Análisis
- Entrada
- Salida
- Consideraciones
Solución
- Código
- Soluciones de la comunidad

Descripción del Reto

Los elfos están muy ocupados en el taller de Santa Claus organizando regalos 🎁 para la víspera de Navidad 🎄.

El formato de entrada es especial, ya que indica el número de regalos y el tipo de regalo con letras de la a a la z. Por ejemplo, '66a11b' significa 66 regalos a y 11 regalos b.

Los elfos tienen un sistema especial para organizar los regalos:

Cada 10 regalos del mismo tipo se empaquetan en una caja, representada por {x}. Por ejemplo, 20 regalos tipo a se empaquetan en 2 cajas así: {a}{a}.
Cada 5 cajas se apilan en un palé, representado por [x]. Por ejemplo, 10 cajas de a se apilan en 2 palés de esta manera: [a][a]
Cualquier regalo adicional se coloca en una bolsa, representada por () y se colocan todas dentro. Por ejemplo 4 regalos de b se colocan en una bolsa así (bbbb)

Los regalos luego se colocan en el siguiente orden: palés, cajas y bolsas. Y los regalos aparecen en el mismo orden que la cadena de entrada.

Tu tarea es escribir una función organizeGifts que tome una cadena de regalos como argumento y devuelva una cadena representando el almacén.

const result1 = organizeGifts(`76a11b`)
console.log(result1)
// '[a]{a}{a}(aaaaaa){b}(b)'

/* Explicación:

  76a: 76 regalos tipo 'a' se empaquetarían en 7 cajas y sobrarían 6 regalos, resultando en 1 palé [a] (por las primeras 5 cajas), 2 cajas sueltas {a}{a} y una bolsa con 6 regalos (aaaaaa)

  11b: 11 regalos tipo 'b' se empaquetarían en 1 caja y sobraría 1 regalo, resultando en 1 caja suelta {b} y una bolsa con 1 regalo (b)
*/

Análisis

El objetivo es desglozar el string en partes, para dividir las cantidades de cada regalo, una vez hecho eso se pueden empaquetar como lo marcaron los requerimientos.

Entrada

Gifts(gifts): Un string con la cantidad de cada tipo de regalo.

Salida

Un string con los regalos empaquetados.

Consideraciones

El valor de retorno debe ir en el mismo orden de la entrada, o sea, siguiendo el orden de los regalos.

Solución

Podemos tomar el string de entrada y dividirlo entre la cantidad de regalos de cada tipo, usando RegExp. Una vez hecho eso iteramos entre cada uno de ellos y procedemos a dividir para encontral cantidad de palés, cajas y bolsas.

Código

/**
 * Organiza una lista de regalos.
 *
 * @param {string} gifts - La lista de regalos a organizar.
 * @returns {string} - La representación organizada de los regalos.
 */
function organizeGifts(gifts) {
  let res = "";
  // Busca secuencias de una o más cifras numéricas seguidas de una letra minúscula
  const giftsSplit = gifts.match(/\d+[a-z]/g);

  // Iterar sobre cada regalo en el array giftsSplit
  for (const gift of giftsSplit) {
    const quantity = Number(gift.slice(0, -1));
    const giftType = gift.charAt(gift.length - 1);

    // Calcular el número de palés necesarios
    const pallets = `[${giftType}]`.repeat(Math.floor(quantity / 50));

    // Calcular el resto después de empaquetar en palés
    const remainder = quantity % 50;

    // Calcular el número de cajas necesarias
    const boxes = `{${giftType}}`.repeat(Math.floor(remainder / 10));

    // Calcular los regalos restantes después de empaquetar en cajas
    const remainderGifts = giftType.repeat(remainder % 10);

    // Verificar si hay regalos restantes y crear una bolsa
    const bags = remainderGifts && `(${remainderGifts})`;

    // Concatenar los palés, cajas y bolsas para el regalo actual
    res += pallets + boxes + bags;
  }

  // Devolver la representación organizada de los regalos
  return res;
}

Soluciones de la comunidad

Solución por cristianstu:

function organizeGifts(gifts) {
  const matches = [...gifts.matchAll(/(\d+)([a-z])/g)];

  return matches.map(([,qtty, letter]) => {
    qtty = +qtty

    const pales = Math.trunc(qtty / 50)
    const boxes = Math.trunc((qtty - (50 * pales)) / 10)
    const bags = qtty - (pales * 50) - (boxes * 10)

    return `[${letter}]`.repeat(pales) +
           `{${letter}}`.repeat(boxes) +
           `(${letter})`.repeat(bags).replace(/\)\(/g, '')

  }).join('');
}

Solución por jamerrq:

function organizeGifts (gifts: string): string {
  const giftsRegex = /(\d+)([a-z])/g
  const giftsMatches = gifts.matchAll(giftsRegex)
  let ans = ''
  for (const match of giftsMatches) {
    const [, qty, symbol] = match
    let left = +qty
    ans = `${ans}${`[${symbol}]`.repeat((left - (left % 50)) / 50)}`
    left -= 50 * ((left - (left % 50)) / 50)
    ans = `${ans}${`{${symbol}}`.repeat((left - (left % 10)) / 10)}`
    left -= 10 * (left - (left % 10)) / 10
    const x = ((left - 1) + ((left - 1) >> 31)) ^ ((left - 1) >> 31)
    ans = `${ans}${`(${symbol.repeat(left)})`.repeat((left + 1 - x) / 2)}`
  }
  return ans
}

Y ese fue el reto para el 8 de diciembre y sus soluciones. Dale like si te ha gustado el reto o la solución!
¿Tienes otra solución alternativa? ¡Déjala en los comentarios!

AdventJS 2023: Reto del Día 7

Fenriuz — Sat, 09 Dec 2023 04:25:08 +0000

Solución al reto #7 del AdventJS 2023
Solución del reto anterior
Solución del siguiente reto

Descripción del Reto
Análisis
- Entradas
- Salida
- Consideraciones
Solución
- Código
- Soluciones de la comunidad

Descripción del Reto

Santa está experimentando con nuevos diseños de regalos y necesita tu ayuda para visualizarlos en 3D.

Tu tarea es escribir una función que, dado un tamaño n (entero), genere un dibujo de un regalo en 3D utilizando caracteres ASCII.

Las líneas de los regalos se dibujan con # y las caras con el símbolo que nos pasan como parámetro:

drawGift(4, '+')

/*
   ####
  #++##
 #++#+#
####++#
#++#+#
#++##
####
*/

drawGift(5, '*')
/*
    #####
   #***##
  #***#*#
 #***#**#
#####***#
#***#**#
#***#*#
#***##
#####
*/

drawGift(1, '^')
/*
#
*/

Importante: Nos han dicho que siempre hay que dejar un salto de línea al final del dibujo.

Nota: Ten en cuenta que, en los tests, la primera línea se ve empujada por el caracter ".

Análisis

En este reto básicamente hay que dibujar los regalos en base a los parámetros que nos da el ejercicio, al puro estilo del ASCII Art. Por si no has terminado de entenderlo, aquí un ejemplo:

    #####
   #***##
  #***#*#
 #***#**#
#####***#
#***#**#
#***#*#
#***##
#####

Lo de arriba es básicamente un rectangulo en 3D

Donde los # representan el contorno del rectángulo, es decir las líneas, mientras que el símbolo que nos pasen como parámetro (en este caso *) representa la cara o la superficie del rectángulo.

Entradas

Size(size): Un número que representa el tamaño del regalo, es la longitud en caracteres de cada línea del regalo.
Symbol(symbol): Un string que será lo que rellene el regalo, básicamente llena cada cara del rectángulo.

Salida

Un string que se verá como el dibujo del regalo solocitado en las entradas. ### Consideraciones
Siempre hay que dejar un salto de línea al final del dibujo.
Hay que tomar en cuenta los espacios en la primera mitad del dibujo, son importantes para darle forma al regalo.

Solución

El ejercicio en sí no tiene mucha complejidad, lo complicado en realidad puede ser manejar el string para dibujar, pero JavaScript ofrece suficientes métodos para ello.

Código

/**
 * Genera un regalo hecho de símbolos en forma de rectángulo.
 *
 * @param {number} size - El tamaño del regalo, determina el ancho y la altura del rectángulo.
 * @param {string} symbol - El símbolo utilizado para dibujar el regalo.
 * @return {string} - La representación del regalo como una cadena.
 */
function drawGift(size, symbol) {
  // El espacio al principio del regalo
  let space = size;

  // Inicializa la primera parte del regalo
  // el espacio al principio del regalo
  // y concatena # con el tamaño del regalo
  let firstPart = " ".repeat(--space) + "#".repeat(size) + "\n";

  // si el tamaño es 1, devuelve la primera parte `#`
  if (size === 1) {
    return firstPart;
  }

  // Inicializa la segunda parte del regalo
  // esta parte es después de la mitad del regalo
  let secondPart = "";

  // bucle a través del tamaño del regalo -2
  // -2 porque ya tenemos la primera y la última línea
  for (let i = 0; i < size - 2; i += 1) {
    // comienza con el espacio al principio del regalo
    const initialSpace = " ".repeat(--space);
    // añade `#` y el símbolo con el tamaño del regalo - 1
    const upperFace = "#".padEnd(size - 1, symbol);
    // añade `#` y llena el espacio con el símbolo
    const rightFace = "#".padEnd(i + 1, symbol)
    // concatena todos ellos y añade el salto de línea
    firstPart += initialSpace + upperFace + rightFace + "#\n";

    // añade los símbolos en la cara frontal
    const frontFace = symbol.repeat(size - 2);
    // añade los símbolos en la cara inferior derecha
    const lowerRightFace = "#".padEnd(size - i - 2, symbol);
    // concatena todos ellos
    secondPart += "#" + frontFace + lowerRightFace + "#\n";
  }

  // la mitad es `#` con el tamaño del regalo y el símbolo con el tamaño del regalo - 2
  const half = "#".repeat(size) + symbol.repeat(size - 2) + "#\n";

  // devuelve la primera parte, la mitad y la segunda parte
  return firstPart + half + secondPart + "#".repeat(size) + "\n";
}

Soluciones de la comunidad

Solución por marcode24:

const drawGift = (size, symbol) => {
  const WRAPPER = '#';
  const SPACE = ' ';

  if (size <= 1) return `${WRAPPER}\n`;

  const top = [SPACE.repeat(size - 1) + WRAPPER.repeat(size)];
  const bottom = [`${WRAPPER.repeat(size)}`];
  const middle = `${WRAPPER.repeat(size)}${symbol.repeat(Math.abs(size - 2))}`
    + `${WRAPPER}\n`;
  for (let i = 1; i < size; i++) {
    const line = `${WRAPPER}${symbol.repeat(size - 2)}${WRAPPER}`
      + `${symbol.repeat(i - 1)}${WRAPPER}`;
    top.push(SPACE.repeat(size - i - 1) + line);
    bottom.push(line);
  }

  top.pop();
  bottom.pop();
  top.push(middle);
  bottom.reverse();
  return `${top.join('\n')}${bottom.join('\n')}\n`;
};

Solución por Achalogy:

function drawGift(size, symbol) {
  let bgSize = size - 2

  bgSize += +!(bgSize + 1)

  let response = ""

  let topCenter = ""
  let bottomCenter = ""

  for (const a of [...Array.from({ length: bgSize }).keys()]) {
    const c = "#"
      + symbol.repeat(bgSize)
      + "#" + symbol.repeat(a) + "#"
    bottomCenter = c + "\n" + bottomCenter
    topCenter += " ".repeat(bgSize - a) + c + "\n"
  }

  response = " ".repeat(size - 1) + "#".repeat(size) + "\n"
    + (topCenter
      + "#".repeat(size) + symbol.repeat(bgSize) + "#" + "\n"
      + bottomCenter
      + "#".repeat(size) + "\n").repeat(+!!(size - 1))

  return response
}

Y ese fue el reto para el 7 de diciembre y sus soluciones. ¿Tienes otra solución alternativa? ¡Déjala en los comentarios!

AdventJS 2023: Reto del Día 6

Fenriuz — Thu, 07 Dec 2023 17:51:53 +0000

Solución al reto #6 del AdventJS 2023
Solución del reto anterior
Solución del siguiente reto

Descripción del Reto
Análisis
- Entradas
- Salida
- Consideraciones
Solución
- Código
- Soluciones de la comunidad

Descripción del Reto

Los elfos están catalogando los renos de Santa 🦌 según la distancia que pueden recorrer.

Para ello tienen una cadena de texto movements donde cada caracter representa la dirección del movimiento del reno:

> = Avanza a la derecha
< = Avanza a la izquierda
* = Puede avanzar o retroceder Por ejemplo, si el movimiento es >>*<, va hacia la derecha dos veces, luego puede ir a derecha o izquierda (lo que maximice la distancia recorrida final) y luego ir a la izquierda.

Los elfos quieren saber cuál es la máxima distancia que recorre el reno al finalizar todos los movimientos.

En el ejemplo anterior, la máxima distancia que recorre el reno es 2. Va a la derecha dos veces +2, luego con el * puede ir a la derecha otra vez para maximizar la distancia +1 y luego va a la izquierda -1.

Crea una función maxDistance que reciba la cadena de texto movements y devuelva la máxima distancia que puede recorrer el reno en cualquier dirección:

const movements = '>>*<'
const result = maxDistance(movements)
console.log(result) // -> 2

const movements2 = '<<<>'
const result2 = maxDistance(movements2)
console.log(result2) // -> 2

const movements3 = '>***>'
const result3 = maxDistance(movements3)
console.log(result3) // -> 5

Ten en cuenta que no importa si es a la izquierda o la derecha, la distancia es el valor absoluto de la distancia recorrida máxima al finalizar los movimientos.

Análisis

El objetivo es lograr encontrar la distancia máxima que pueden recorrer los renos. No importa si la recorren a la izquierda o derecha, el punto es encontrar la máxima distancia.

Entradas

Movimientos(movements): Un string con los movimientos, donde cada caracter representa la dirección del movimiento del reno.

Salida

El número de la distancia máxima que se puede alcanzar con esos movimientos

Consideraciones

Se debe encontrar la distancia máxima sin importar si el movimiento es hacia la derecha o hacia la izquierda.

Solución

Resolver este ejercicio no es tan complicado y como siempre tenemos muchos caminos y alternativas.
Un enfoque sencillo es contar cuánto se repite cada movimiento y posterior a eso hacer la suma final para encontrar el resultado.

Código

/**
 * Calcula la distancia máxima basada en los movimientos dados.
 *
 * @param {string} movements - Una cadena que representa los movimientos.
 * @returns {number} La distancia máxima.
 */
function maxDistance(movements) {
    // Inicializa el objeto de direcciones con valores predeterminados
    const directions = {
        "<": 0, // Representa movimiento hacia la izquierda
        ">": 0  // Representa movimiento hacia la derecha
        "*": 0, // Representa movimiento a cualquier dirección
    };

    // Cuenta las ocurrencias de cada movimiento
    for (const movement of movements) {
        directions[movement] += 1;
    }

    // Calcula la distancia máxima
    // Math.abs() devuelve el valor absoluto de un número
    return Math.abs(directions["<"] - directions[">"]) + directions["*"];
}

Soluciones de la comunidad

Solución por cristianstu:

function maxDistance(movements) {
    const a = movements.split(/>/g).length - 1
    const b = movements.split(/</g).length - 1
    const c = movements.length - a - b;

    return Math.abs(a - b) + c
}

Solución por jfes29:

function maxDistance(movements) {
  let movements1 = movements.replaceAll("*", "");
  let movements2 = movements1.replaceAll("<", "");
  let movements3 = movements1.replaceAll(">", "");

  return movements.length - 2 * Math.min(movements2.length, movements3.length);
}

Y ese fue el reto para el 5 de diciembre y sus soluciones. ¿Tienes otra solución alternativa? ¡Déjala en los comentarios!