urban dictionary wordle project

Urdle (urban dictionary wordle)

Technologies:

React
Typescript
Python
AWS Hosting

Design:

Adobe Illustrator

Summary

Urdle is a unique twist on the popular word-guessing game, Wordle, that draws its vocabulary from the Urban Dictionary. Its front-end is built using React, Typescript, HTML, and CSS, and the game is hosted on AWS. Urdle's word list was generated using Python and stored in a json file, providing players with a fresh set of challenging and entertaining words to guess each day.

Urdle Architecture

urdle architecture diagram

Lambda function

Every day at midnight PDT a json file containing a random word is generated through a lambda function.

  // Gets a random int between [min, max)
  function getRndInteger(min, max) {
    return Math.floor(Math.random() * (max - min) ) + min;
  }
                  
  const d = new Date();
  const filename = `dailywords/${d.getFullYear()}-${lp(d.getMonth()+1)}-${lp(d.getDate())}.json`;
  const index = getRndInteger(0, words["words"].length);
  const randomWord = words["words"][index];

  var params = {
    Bucket: 'urdle.app',
    Key: filename,
    Body: JSON.stringify({ "word": randomWord }),
    ContentType: 'text/plain',
  };

The resulting file will have a naming convention like this 2023-05-16.json and contain a random word, in this case poopy.

{
    "word": "poopy"
  }

Getting todays word

The getTodaysWord function converts from local time to PDT before setting todays word in the App.tsx file.

const getTodaysWord = () => {
      //gets date in local time
    const d = new Date();
      //local timezone difference from minutes to milliseconds
    let diff = (d.getTimezoneOffset())*60000;
      //gets UTC time relative to local time
    const pp = d.getTime()+diff;
      //subtracts 7 hours from UTC in milliseconds
    const toPdt = pp-25200000;
    const toDate = new Date(toPdt);

    const todaysUrl = 'url.com/${toDate.getFullYear()}-${lp(toDate.getMonth()+1)}-${lp(toDate.getDate())}.json
    fetch(todaysUrl)
      .then(async (response) => {
        if (response.ok) {
          console.log("response: ", response);
          const wordResponse = await response.json();
          console.log("wordResponse: ", wordResponse);
          const todaysWord = wordResponse["word"].toUpperCase().split('');
          console.log("todaysWord: ", todaysWord)
          setTodaysWord(todaysWord);
        }
      });
  }