Some of my fondest childhood memories were the sleepovers with friends where we would play retro games on an old CRT TV until the sun peeked over the horizon. Video games have been a foundational part of my growing up, and with the rapid development of the gaming industry in the 2000s, I had nearly forgotten about the vintage games that were sitting in my attic collecting dust. It wasn’t until my first internship, where the company I worked for had their own DIY arcade machine, that I was hit by a wave of nostalgia from my childhood.

Ever since then, it’s been a dream of mine to build my own arcade, and in my first term of university, that’s what a couple of friends and I ended up doing.

Here’s how we did it.

For our design, we decided to go with a full-size arcade machine with two sets of controls for fighting games such as Street Fighter, Super Smash Brothers, and Tekken.

For our plans, we went with a pre-made plan from TheGeekPub to save time.

You can find these plans here.

On the left is a quick mockup of what we wanted our arcade to look like.

The design we ended up going with was 27” wide, 66” tall, and 24” deep from front-to-back.

We wanted to have a keyboard tray in the front for easy configuration, as well as a swinging door where we could store extra materials and tools.

The total cost of the machine was $650 CAD, with the parts costing the most being the monitor, paint, joysticks, the Raspberry Pi, and the wood.

We thankfully didn’t have to buy any tools since we spent most of our time in our university’s machine shop. Technically, everything here can be done with nothing more than a jigsaw and a hand-drill, but having other tools will significantly expedite the process.

Here’s a list of all the hardware we used to build the arcade, along with the tools used. For a detailed cost breakdown, with links to buy the parts, check out this spreadsheet.

Electronics

• 20 Hikig LED Push Buttons & 2 Joysticks
• 2x Easyget Zero-Delay USB Encoder
• 27” Acer Monitor
• Raspberry Pi 3
• USB Speaker
• Keyboard
• Mouse

Hardware

• 2x MDF wood 3/4” x 49 x 97”
• 2x Inset overlay clip hinges
• 8 x 5/8-inch Particle board screws
• L-brackets for support
• 3” Caster wheels w/ brakes
• Mailbox lock for the cabinet
• 1 1/2” Nails
• Wood glue
• 10” x 18” Sheet of Plexiglas
• 5 cans of flat black primer
• 5 cans of black gloss paint
• 3 cans of pink spray paint
• 1 can of fluorescent yellow spray paint

Tools Used

• Circular saw
• Jigsaw
• Drill press with varying Forstner bits
• Router
• Orbital sander
• Milling machine
• Cordless drill
• Wood clamps

‎Initial Planning

We started by taking the two sheets of MDF and traced out the dimensions for each component. We then cut the sheets using a circular saw.

‎

‎

‎

‎

Cutting the Sides

We traced out an outline for one side of the arcade onto a sheet of MDF, using a compass for rounded edges. After cutting that piece using a jigsaw, we laid it on top of the other and transferred the lines over. After cutting that piece down, we sanded both sides to match.

‎

‎

‎

‎

‎

‎

Backer Blocks

In preparation for assembly, we used scrap wood to cut 1x1" backer blocks for the other pieces to rest on. Although the size/length of the blocks isn’t that important, take great care in making sure they line up on both sides. Ours were a bit off and they caused a lot of issues.

‎

‎

‎

‎

‎

Painting (attempt 1)

We started by sanding down our pieces with an orbital sander and increasingly-finer grains of sandpaper. We then applied a matte primer followed by a gloss black finish. The gloss layer turned out to be a mess: it was very difficult to get an even layer with spray cans and even the smallest particle of dust would cause an effect known as orange peeling. In retrospect, we probably should’ve gone with a bucket of paint and a paintbrush.

‎

‎

‎

… attempt 3

It took us multiple painstaking attempts of sanding away the previous paint, re-priming, and re-painting before we finally managed to nail a clear finish.

Using the spray can at an angle helped a lot.

By the end of the process, we had spent nearly $100 on paint. But hey, at least it looks nice? ¯\_(ツ)_/¯

‎

‎

‎

‎

‎

Vaporwave Styling

To complete the retro look, we created a design consisting of a sun with horizon lines. This pattern was transferred to the side panels with strips of painter’s tape cut with an X-Acto knife.

a e s t h e t i c~‎

‎

‎

‎

‎

Wheels

To make our arcade easily transportable between locations, we installed a few casters on the bottom panel.

TIP: If you complete this step early, you can use it to transport other parts.

‎

Speaker

To make our speaker, we used a drilling template and went at it using a standard hand drill. We then fastened $5 speakers from the dollar store using a strip of rubber and nails.

‎

‎

‎

Cabinet Lock

As the front door for our arcade is intended to be used as a cabinet, we milled down a section of the wood in order to fit a standard mailbox lock.

The locking mechanism works by fastening itself to an L-bracket mounted on the right side of the cabinet.

‎

‎

‎

Keyboard Tray

We installed a keyboard tray by attaching a pair of rollers to a piece of wood. As we’re new to hardware, we didn’t know the rails had a clever design where you can adjust the height/inset before fastening the screws.

‎

‎

‎

Marquee

We designed our marquee in Photoshop and got it printed for around $10. We then cut down a piece of Plexiglas and mounted it on the backer blocks.

‎

‎

‎

Control Panel

To make the control panel, we stuck a drilling template to a piece of MDF wood using tape and then used a drill press with a 1 1/8" Forster bit to drill holes for the buttons.

There are different button layouts available, so choose wisely! We made the mistake of choosing one where the buttons didn’t line up with the arc of our fingers, leading to a clumsier experience.

‎

‎

Wiring it Up

This step is pretty simple: screw the buttons into the control panel, connect each button to a USB encoder, and plug the USB output into the Raspberry Pi.

Once your controls are ready to go, simply plug in a monitor, keyboard, and mouse into your Raspberry Pi and follow these steps on Installing RetroPie.

This should be everything you need to get a game up and running!

Putting Everything Together

The last thing we need to do is assemble everything. We already have all the components so this shouldn’t take too long.

Start by laying one side panel flat on its surface, and use nails to fasten the top, middle, bottom, and back panels onto the backer blocks. L-brackets and wood glue can be used for additional support.

Then, place the other side panel on top, and once again use nails to fix everything in place.

The front door can be mounted using inset clip hinges.

Installing the Monitor

The final step is installing the monitor. The best practice is to buy the monitor first, and to plan the width of your arcade accordingly, leaving around an inch of wiggle room for a 3/4" backer block on each side.

Alternatively, if the shape of your monitor permits, you can opt to install a panel across the entire width for your monitor to rest on.

No matter which approach you take, it’s best to have one person align/trace the backer blocks while the other holds the monitor in-place (while being careful not to drop it!)

Wrapping It Up

That’s it! Here’s what the arcade looks like, assembled and everything!

This project wouldn’t have been possible without the help of the folks at Waterloo Engineering’s Machine Student Shop. Thank you for helping us with any questions we had, and teaching us how to use the different tools.

Connect with us!

Kelvin Zhang
William Tran
Kevin Zhang
Frank Chen

.

How to Build a Raspberry Pi Arcade Machine was originally published in The Startup on Medium, where people are continuing the conversation by highlighting and responding to this story.

The goal of this post is to explain how to implement your own super-awesome credit card form, complete with bug-free validation and formatting. If you’re only here for the code, feel free to scroll to the very bottom to view the final implementation.

Table of Contents

• Types of Credit Cards
• Validating Cards
• Validating the CVV
• Formatting Cards
• Wrapping It Up

Types of Credit Cards

A couple of things to note here:

• As part of Mastercard’s 2-series expansion, their cards can now begin with 2
• American Express has an unusual CVV that is 4 digits long
• The cards that you support should depend on what your selected payment gateway supports. It’s bad practice to allow unsupported cards to pass through your client-side validation.
• Maestro is a complete pain to deal with and is unsupported by most payment gateways. As such, Maestro will not be covered in the remainder of this post.

For a list of common payment gateways and the cards they support, see this list by Aria Systems. For a list of test cards, see this Github repo. For more cards and their RegEx patterns, view this list on Github.

Validating Cards

Why?

• The user gets immediate feedback on an input error; if an invalid card is entered, they don’t need to click on the submit button, wait for the server to return an error, and then fill out the form again.
• It lessens your server load and prevents invalid requests from counting towards your API rate limit.

The Luhn Algorithm

Credit card numbers may look random, but there is actually a hidden meaning behind each group of numbers.

In the above diagram:

1. Major Industry Identifier (MII) — identifies the industry of the card. See here for a list of industries and their corresponding digits.
2. Issuer Identification Number (IIN) — identifies the issuer of the card. American Express starts with 34 or 37, Mastercard starts with 2221–2720 or 51–55, Visa starts with 4. See here for a list of all IIN ranges. This is especially useful for future updates if card issuers ever decide to expand their IIN ranges.
3. Account Number — identifies the customer’s account
4. Checksum — makes sure that the account number is valid

The Luhn Algorithm determines the validity of a card using the account number and checksum (labels 3 and 4). It works almost like magic:

1. From the rightmost digit of your card number, double every other digit.
2. If the doubled digit is larger than 9 (ex. 8 * 2 = 16), subtract 9 from the product (16–9 = 7).
3. Sum the digits.
4. If there is no remainder after dividing by 10 (sum % 10 == 0), the card is valid.

Using the card from above, here is the Luhn Algorithm in action:

Summing up the last row gives us a value of 90, which is a multiple of 10. This card is valid!

Here’s a Javascript implementation of the Luhn Algorithm:

function checkLuhn(value) {
  // remove all non digit characters
  var value = value.replace(/\D/g, '');
  var sum = 0;
  var shouldDouble = false;
  // loop through values starting at the rightmost side
  for (var i = value.length - 1; i >= 0; i--) {
    var digit = parseInt(value.charAt(i));
    
    if (shouldDouble) {
      if ((digit *= 2) > 9) digit -= 9;
    }

    sum += digit;
    shouldDouble = !shouldDouble;
  }
  return (sum % 10) == 0;
}

Demo

You can view implementations of the Luhn Algorithm in other languages such as Java, Swift, PHP, and Python here.

Checking for Supported Cards

With reference to the list of cards above and their specifications, we can create a validator based on the RegEx for each specific card.

The best way to keep track of different cards and their patterns is to store them in an object literal:

var acceptedCreditCards = {
  visa: /^4[0-9]{12}(?:[0-9]{3})?$/,
  mastercard: /^5[1-5][0-9]{14}$|^2(?:2(?:2[1-9]|[3-9][0-9])|[3-6][0-9][0-9]|7(?:[01][0-9]|20))[0-9]{12}$/,
  amex: /^3[47][0-9]{13}$/,
  discover: /^65[4-9][0-9]{13}|64[4-9][0-9]{13}|6011[0-9]{12}|(622(?:12[6-9]|1[3-9][0-9]|[2-8][0-9][0-9]|9[01][0-9]|92[0-5])[0-9]{10})$/,
  diners_club: /^3(?:0[0-5]|[68][0-9])[0-9]{11}$/,
  jcb: /^(?:2131|1800|35[0-9]{3})[0-9]{11}$/
};

We can then create a function that tests the inputted value against all RegEx patterns to determine the card’s validity:

function checkSupported(value) {
  // remove all non digit characters
  var value = value.replace(/\D/g, '');
  var accepted = false;
  
  // loop through the keys (visa, mastercard, amex, etc.)
  Object.keys(acceptedCreditCards).forEach(function(key) {
    var regex = acceptedCreditCards[key];
    if (regex.test(value)) {
      accepted = true;
    }
  });
  
  return accepted;
}

Demo

Putting it Together

Finally, we can combine the Luhn algorithm with our supported credit cards checker to complete our magical validation formula.

function validateCard(value) {
  // remove all non digit characters
  var value = value.replace(/\D/g, '');
  var sum = 0;
  var shouldDouble = false;
  // loop through values starting at the rightmost side
  for (var i = value.length - 1; i >= 0; i--) {
    var digit = parseInt(value.charAt(i));

    if (shouldDouble) {
      if ((digit *= 2) > 9) digit -= 9;
    }

    sum += digit;
    shouldDouble = !shouldDouble;
  }
  
  var valid = (sum % 10) == 0;
  var accepted = false;
  
  // loop through the keys (visa, mastercard, amex, etc.)
  Object.keys(acceptedCreditCards).forEach(function(key) {
    var regex = acceptedCreditCards[key];
    if (regex.test(value)) {
      accepted = true;
    }
  });
  
  return valid && accepted;
}

Demo

Validating the CVV

Why?

• For the exact same reasons as validating credit card numbers: to reduce the number of invalid requests being made to the server.

The card verification value (CVV) is a set of 3–4 digit numbers on the back of your card and is used for security reasons. Most CVVs are 3 digits, with the exception of Maestro, which may not even require a CVV, and American Express, which has a CVV of 4 digits. Since we’re not supporting Maestro, American Express is the only exception we’ll have to make.

A CVV doesn’t have anything like a Luhn algorithm to check its validity, so all we have to do is check its length:

function validateCVV(creditCard, cvv) {
  // remove all non digit characters
  var creditCard = creditCard.replace(/\D/g, '');
  var cvv = cvv.replace(/\D/g, '');
  // american express and cvv is 4 digits
  if ((acceptedCreditCards.amex).test(creditCard)) {
    if((/^\d{4}$/).test(cvv))
      return true;
  } else if ((/^\d{3}$/).test(cvv)) { // other card & cvv is 3 digits
    return true;
  }
  return false;
}

Let’s also set a maxlength for it:

$('#cvv').attr('maxlength', 4);

We can then integrate this with our credit card validation.

Demo

Toggling the Submit Button

When the credit card or CVV is invalid, we should disable the submit button because we don’t want invalid form data to be sent to the server. This is as easy as changing the #status element to a submit button and then toggling the disabled prop.

Demo

Formatting Cards

Why?

• The user can see at a glance whether they missed or added an extra character
• It’s easier for the user to go back and change a digit in the case of typos

There are also a couple of UX goals we want to accomplish when adding auto-formatting:

1. We don’t want to disallow the user from typing spaces as they enter their card number
2. The user should be able to insert and remove digits before and after a formatted space
3. The cursor position should be retained when inserting and removing digits
4. When formatting is changed (ex. American Express → Visa), digits should be re-formatted to match the new layout

With those goals in mind, here are a couple of approaches to formatting cards:

Input Masking Libraries

Advantages:

• many libraries to choose from
• easy to implement
• wide variety of pre-built masks

Disadvantages:

• some are bulky and slow to load
• many have bugs that are hard to fix without modifying the source
• all give you less control over what’s happening

Here are some of the input masking libraries I’ve tested:

Plain Javascript: https://github.com/RobinHerbots/Inputmask (180KB)
React: https://github.com/estelle/input-masking (5KB)
Angular, Ember, Vue: https://github.com/text-mask/text-mask (4KB)

Regardless of the library used, the logic behind each implementation should be similar:

$("#cc").on("input propertychange paste", function() {
  var value = $("#cc").val().replace(/\D/g, '');
  var mask;
  if ((/^3[47]\d{0,13}$/).test(value)) { // American Express
    // set mask to 4-6-5
  } else if ((/^3(?:0[0-5]|[68]\d)\d{0,11}$/).test(value)) { // Diner's Club
    // set mask to 4-6-4
  } else if ((/^\d{0,16}$/).test(value)) { // Other Credit Cards
    // set mask to 4-4-4-4
  }
  
  // apply your input mask to #cc
});

Here’s an implementation of RobinHerbots’s Inputmask, which I believe to be the best library from the list above. Although it is significantly larger in size and comes with an array of unnecessary features, it allows user input of spaces, inserting/removing digits after spaces, and re-formatting of cards.

However, the cursor position isn’t retained if the card is re-formatted. If you start out by entering an American Express number (ex. 3782 822463 10005), and then delete the 3 in the beginning, the card is re-formatted correctly but the cursor skips to the end.

Although this isn’t that big of an issue, I wasn’t happy with it. It seemed that whatever library I used would miss out on at least one of the 4 goals. In the end, I got fed up and decided to implement my own input mask.

Custom Input Masking

I wanted my custom input mask to achieve all of the 4 goals while also retaining some quality of life features of input masking libraries, such as limiting the length. At its core, an input mask updates the current input value with the correctly formatted value.

To accomplish this, I created a function that takes in a card number and outputs the correctly formatted number. In this function, I also limit the length of the input depending on the card type:

function formatCardNumber(value) {
  // remove all non digit characters
  var value = value.replace(/\D/g, '');
  var formattedValue;
  var maxLength;
  // american express, 15 digits
  if ((/^3[47]\d{0,13}$/).test(value)) {
    formattedValue = value.replace(/(\d{4})/, '$1 ').replace(/(\d{4}) (\d{6})/, '$1 $2 ');
    maxLength = 17;
  } else if((/^3(?:0[0-5]|[68]\d)\d{0,11}$/).test(value)) { // diner's club, 14 digits
    formattedValue = value.replace(/(\d{4})/, '$1 ').replace(/(\d{4}) (\d{6})/, '$1 $2 ');
    maxLength = 16;
  } else if ((/^\d{0,16}$/).test(value)) { // regular cc number, 16 digits
    formattedValue = value.replace(/(\d{4})/, '$1 ').replace(/(\d{4}) (\d{4})/, '$1 $2 ').replace(/(\d{4}) (\d{4}) (\d{4})/, '$1 $2 $3 ');
    maxLength = 19;
  }
  
  $('#cc').attr('maxlength', maxLength);
  return formattedValue;
}

The core functionality is achieved by a chain of .replace methods. This allows for the card to be formatted as it is being typed. As such, we’re also not making use of the acceptedCreditCards object that we defined earlier on. The RegEx is modified to match the IIN ranges of each issuer. For example, we can change the mask to 4–6–5 as soon as 34 or 37 is entered (American Express). Furthermore, for the cards that we support, only American Express (15 digits) and Diner’s Club (14 digits) require special formatting.

We can then update our input to reflect the formatted value:

$('#cc').on('input', function() {
  var value = $('#cc').val();
  var formattedValue = formatCardNumber(value);
  $('#cc').val(formattedValue);
});

Demo

For 25 lines of code, this isn’t too bad. It allows user-input of spaces and re-formats credit card numbers. However, deleting any digit or inserting a digit before a space will move the cursor to the end. You also can’t delete spaces.

All of these bugs happen because updating the value of an input will move the cursor to the end. We can fix this by storing the cursor position and then updating it. There are also two blocks here that adjust the cursor position to allow for the removal of spaces and the insertion of digits before a space.

$('#cc').on('input', function() {
  var node = $('#cc')[0]; // vanilla javascript element
  var cursor = node.selectionStart; // store cursor position
  var lastValue = $('#cc').val(); // get value before formatting
  
  var formattedValue = formatCardNumber(lastValue);
  $('#cc').val(formattedValue); // set value to formatted
  
  // keep the cursor at the end on addition of spaces
  if(cursor === lastValue.length) {
    cursor = formattedValue.length;
    // decrement cursor when backspacing

// i.e. "4444 |" => backspace => "4444|"
    if($('#cc').attr('data-lastvalue') && $('#cc').attr('data-lastvalue').charAt(cursor - 1) == " ") {
      cursor--;
    }
  }

  if (lastValue !== formattedValue) {
    // increment cursor when inserting character before a space

// i.e. "1234| 6" => "5" typed => "1234 5|6"
    if(lastValue.charAt(cursor) == " " && formattedValue.charAt(cursor - 1) == " ") {
      cursor++;
    }
  }
  
  // set cursor position
  node.selectionStart = cursor;
  node.selectionEnd = cursor;
  // store last value
  $('#cc').attr('data-lastvalue', formattedValue);
});

Demo

Perfect! Now users can type spaces as they’re entering their card number, insert/remove digits before and after a formatted space, retain the cursor position when a digit is inserted or removed, and, when formatting is changed, re-format the card while preserving the cursor position.

Wrapping It Up

Now that we have the validation and formatting of credit cards complete, let’s combine them into the ultimate credit card form.

Final result

A Comprehensive Guide to Validating and Formatting Credit Cards was originally published in Hootsuite Engineering on Medium, where people are continuing the conversation by highlighting and responding to this story.