Search Game in Steam Charts

Open steam-charts in Script Kit

// Name: Search Game in Steam Charts
// Description: Search Game in https://steamcharts.com/
// Author: Ricardo Gonçalves Bassete

import "@johnlindquist/kit"
import cheerio from 'cheerio'
import axios from 'axios'
import { Choice } from "@johnlindquist/kit"

interface Game {
  name: string
  link: string
  img: string
  currentPlayers: string 
  monthAvg: string 
  monthGain: string 
  monthGainPercent: string 
}

async function searchGames(keyword: string) {
  const baseURL = 'https://steamcharts.com'
  const searchURL = `${baseURL}/search/?q=${keyword.toLowerCase().replaceAll(' ', '+')}`
  const { data } = await axios.get(searchURL)
  const $ = cheerio.load(data)

  const result: Game[] = $('tr').get().map(el => {
    const tr = $(el)
    const imgEl = tr.find('td').get()[0]
    const nameEl = tr.find('td').get()[1]
    const currentPlayersEl = tr.find('td').get()[2]
    const monthAvgEl = tr.find('td').get()[3]
    const monthGainEl = tr.find('td').get()[4]
    const monthGainPercentEl = tr.find('td').get()[5]

    return {
      img: `${baseURL}${$(imgEl).find('img').attr('src')}`,
      name: $(nameEl).text().replaceAll('\t', '').replaceAll('\n', ''),
      link: `${baseURL}${$(nameEl).find('a').attr('href')}`,
      currentPlayers: $(currentPlayersEl).text(),
      monthAvg: $(monthAvgEl).text(),
      monthGain: $(monthGainEl).text(),
      monthGainPercent: $(monthGainPercentEl).text()
    }
  })

  const games = result.filter(game => game.name !== '')
  return games
}

function buildPreview(game: Game) {

  const getColor = (text: string) => {
    if(text.startsWith('-')) {
      return 'text-red-500'
    } else if (text.startsWith('+')) {
      return 'text-green-500'
    } else {
       return ''
    }
  }

  return `
    <div class="p-5 prose prose-sm">
      <img class="w-full rounded" src="${game.img}"/>
      <h2>${game.name}</h2>
      <div class="w-full h-10 flex flex-row items-center font-bold justify-start uppercase">
        Current Players: ${game.currentPlayers}
      </div>
      <div class="w-full h-10 flex flex-row items-center font-bold justify-start uppercase">
        30-Day Avg.: ${game.monthAvg}
      </div>
      <div class="w-full h-10 flex flex-row items-center font-bold justify-start uppercase ${getColor(game.monthGain)}">
        30-Day Gain: ${game.monthGain}
      </div>
      <div class="w-full h-10 flex flex-row items-center font-bold justify-start uppercase ${getColor(game.monthGainPercent)}">
        30-Day % Gain: ${game.monthGainPercent}
      </div>
    </div>
  `
}

function buildResult(game: Game): Choice {
  return {
    name: game.name,
    value: game.link,
    img: game.img,
    preview: buildPreview(game)
  }
}

const keyword = await arg('Keyword')
const games = await searchGames(keyword)

const game = await arg('Select game', games.map(game => buildResult(game)))
open(game)