Vanilla JS + JAM Stack Scrabble Lite Game
https://word-scramble.netlify.app/
Background
The original concept for this app was created for the November 2020 Thanksgiving week Codepen Challenge; the task was to create a Codepen celebrating the game of Scrabble.
To challenge myself and gain a deeper understanding of CSS Custom Properties and JavaScript animation events I decided create this app using 0 dependencies or animation libraries.
Since the "back-end" portion of the application is just a single route/function verifying the word is real I opted to use Netlify serverless functions to make it a JAM stack application.
Technology used
- SCSS
- CSS Custom Properties (Variables)
- Netlify Serverless functions
- Nodejs require.resolve() to read the dictionary file
- ES6/ESNext Map
- webpack 4
Concepts
webpack 4 bundling
Using my own custom webpack 4 dev and production configuration to have a local dev-server with hot module replacement and optimizied production build with minification, auto-prefixing for CSS properties and more.
Double tap custom event with closures
To make it quicker for mobile users to submit their answer I implemented a doubleTap event listener that utilizes closures and a setTimeout to determine if a double tap occured.
/* Based on this http://jsfiddle.net/brettwp/J4djY/*/
function detectDoubleTapClosure() {
let lastTap = 0;
let timeout;
return function detectDoubleTap(event) {
const curTime = new Date().getTime();
const tapLen = curTime - lastTap;
if (tapLen < 500 && tapLen > 0) {
console.log('Double tapped!');
event.preventDefault();
} else {
timeout = setTimeout(() => {
clearTimeout(timeout);
}, 500);
}
lastTap = curTime;
};
}
/* Regex test to determine if user is on mobile */
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
docum
Netlify Serverless functions reading local files
To my knowledge I did not see any previous material that implied it was possible to also upload a static file (like my JSON file) and access it via the Netlify Serverless function. Here I did it using Node's require.resolve()
Notice how the folder name must match the file name.
const fs = require("fs");
exports.handler = function(event, context, callback) {
const dictionary = JSON.parse(
fs.readFileSync(require.resolve("./data/small_dictionary.json"), "utf-8")
);
const { word } = JSON.parse(event.body);
const res = dictionary.findIndex(e => e === word);
callback(null, {
statusCode: 200,
body: res === -1 ? "false" : "true"
});
};
Caculating 2D vectors in CSS to get animation path
I used CSS custom properties and JavaScript to change the values of the of the x and y position that the tile would move to based on their absolute position of the window/document.
function computeVector(startCoords, endCoords) {
let xDist = startCoords[0] - endCoords[0];
startCoords[0] > endCoords[0] ? (xDist *= -1) : (xDist *= -1);
let yDist = -(startCoords[1] - endCoords[1]); //Always negative ; moves up to answer board
document.documentElement.style.setProperty("--tx", `${xDist}px`);
document.documentElement.style.setProperty("--ty", `${yDist}px`);
}