Quick Note:

This little project was done long ago when i was still learning the ropes about a lot of different technologies. There are much better ways to go about this, but in this particular case, it suited my need and it was just for fun. I’ll do a much more modern writeup at a later date. I will finish the writeup for this, but for now there are still 3 git repo’s available for you to peruse at your own leisure.

Introduction

I’ve played a lot of MMO’s in my time but one i always keep coming back to now and then is Final Fantasy XIV. I’ve made a lot of friendships over the years on this game. I’ve had my ups and downs. My loves and hates. I’ll take a few months on, a few months off.

One of my little projects i pulled out one night was the idea of just having a fuck-around program for my friends to play with when we did pulls. Raiding, if you’ve never done it, can be very taxing on people. Having to do a 10 minute dance without mistakes, hitting the right buttons at the right time and making sure you talk constructively with your group and deal with the problems together.

In order to relieve the stress and pop a few laugh i decided to create a small program so i could play with some new toys. I wanted to try making some little program that could work on any computer so anyone could fuck around and have a good laugh with it. I also wanted the program to be able to sit nicely on top of FFXIV without the need for it being awkward.

I decided to create A Fun Voting Program. The Breakdown was simple:

  • Anyone who opens it will be able to play
  • One person can ask a question
  • A timer will count down giving everyone else a chance to play and answer.
  • When the timer ends, the program will wait on the person who asked to continue. The results will show to everyone.
  • Ridiculous sound effects for everyone involved!

There are three parts to the plan:

  • Create a simple Express frontend
  • Set up a very simple js Websocket so that everyone on the frontend can interact together
  • Use Electron to run what is effectively an iframe to the frontend, and allow it to be run on any computer without any issues.

You can find each part on my github:

https://github.com/riezahughes/ffxiv-place-your-bets-express
https://github.com/riezahughes/ffxiv-place-your-bets-websocket
https://github.com/riezahughes/ffxiv-place-your-bets-electron

The Plan

For this project i decided to start with the initial design for the app. I wanted something that was small, fits in with the FFXIV. After a lot of trial and error, i came up with this: https://puu.sh/FbdSK.png

Base idea with transparent background

To break it down:

  • The Question button will return to this initial state
  • The person icon will show how many people are connected at once
  • The timer is self explanatory, counting down from 10 to zero.
  • Users will type a question into the question box and begin the vote
  • The cross of arrows will be used to move the app around the screen.
  • There will be some entertaining audio

It keeps it simple, straight forward and gives all the information people need within a small space, not obstructing where it needs to be. I’ve chosen to put it just above my chat bar, however it could be anywhere you like on your screen.

Setting Up The Express Part

With Electron being the final piece of the puzzle, as it just displays an iframe to the server, it was important to get express and the websocket server set up first.

I used a simple basic express install building only an index template view. Using this index, i built out the application based on the photoshop example i’d created.

There were a number of different states needed for this, so i created a nummber of different div sections to hide and display, as well as an overlay to hold interactions for individuals.

  • Question Window (The Default View)
  • Window Lock (To stop people interacting while somethings being asked)
  • Vote Window (for players to give a yes or no to the question being asked)
  • Results Window (To show a scrolling result of the highest vote)

As i said, it’s pretty silly. However, silliness is how I make people laugh and learn along the way.

The interface was set up using basic html, css and js.

The most important part of this page, was making sure that when people accessed it, it would connect to the web socket server. A simple command was added to the header to show when it was connected:

var ws = new WebSocket("ws://localhost:3001"); //my websocket port
ws.onmessage = function (evt) {
  console.log("connected!");
}

With this basic setting ready, i was able to get started on the websocket itself.

Setting up a Websocket Server – WIP

The websocket server was going to be the meat of the application. It would deal with players questions, answers and results.

Setting Up Electron – WIP

Conclusion – WIP