VALORANT Chat Client

Overview

I created a Windows Application to be able to access VALORANT’s chat feature without opening the game.

If you only care about installing the application or the code, you can download it from GitHub Releases. This post is just for my thoughts during my learning process.

Technologies Used

• Electron
• Vue.js
• Vite

*Also my first Vite/Electron/Vue.js application

Vue.js Composition API

So the Vue.js Composition API achieves a reactive UI by using functions instead of class properties. This is similar to React Hooks. A more in-depth explanation can be found on the Vue.js Composition API FAQ.

A simple example comparison found on the docs is also seen below.

Composition API:

<script setup>
import { ref, onMounted } from "vue";

// reactive state
const count = ref(0);

// functions that mutate state and trigger updates
function increment() {
  count.value++;
}

// lifecycle hooks
onMounted(() => {
  console.log(`The initial count is ${count.value}.`);
});
</script>

<template>
  <button @click="increment">Count is: 8</button>
</template>

Options API:

<script>
export default {
  // Properties returned from data() become reactive state
  // and will be exposed on `this`.
  data() {
    return {
      count: 0,
    };
  },

  // Methods are functions that mutate state and trigger updates.
  // They can be bound as event listeners in templates.
  methods: {
    increment() {
      this.count++;
    },
  },

  // Lifecycle hooks are called at different stages
  // of a component's lifecycle.
  // This function will be called when the component is mounted.
  mounted() {
    console.log(`The initial count is ${this.count}.`);
  },
};
</script>

<template>
  <button @click="increment">Count is: 8</button>
</template>

Benefits of Composition API

In VCC, I found using the composition API allowed me to organize my code in a much nicer fashion. For example in Chat.vue, I was able to separate the logic clearly between message, presence, and friends related variables/methods. If it were done using the options API, the declaration of all reactive variables would have had to be grouped together, making the code rather messy.

Vite

I also decided to try using Vite, Evan You’s latest creation - a crazy fast and feature-rich frontend tooling to replace Webpack. Initially, older versions of the app (<= 0.1.7) used Webpack. After fixing configuration issues (I used the boilerplate code template), I found that vite was insanely fast, and really easy to use.

Build Speed & HMR

Vite promotes a fast build time, and hot module replacement (HMR). This was the most significant change. I think the results below speak for themselves.

Features

Vite also introduces some changes to typical development processes that make it more convenient for developers. From the use of import.meta for certain env variables, to static asset handling.

Static Assets

Static asset importing is really easy. For images, they can be imported as such:

import imgUrl from "./img.png";
document.getElementById("hero-img").src = imgUrl;

In short, Vite is fantastic.

Electron

Initially, the application was meant to be a web app. However, after coding the frontend for about an hour, I realized that only the localhost API could send/receive messages from Riot. Thus, I had to convert the application to a Windows application. Being a competitive programmer, the great inefficiency of Electron was a strong deterrence. Nonetheless, it was the fastest way to convert my current code to a Windows app.

IPC

Since Electron basically runs frontend code on a version of Chromium, browser specific issues such as CORS appears. The Riot API did not provide CORS headers. To circumvent this, VCC had to use Electron’s IPC to run “backend” code. This felt rather clunky and did not feel that great. In fact, I considered re-writing the entire application because of this obstacle.

The Good

Despite these issues, I feel that Electron is a great technology but ONLY if you already need a web app and do not want to have 2 separate codebases to have a Window’s app as well

Conclusion

This project certainly made me learn a lot as I tried a couple of new tools and technologies. In future, I hope to use more new technologies such as Svelte, Next.js, etc.