Theo's Typesafe Cult•16mo ago

Wordle - Word selection

Hi! I'm currently developing a wordle clone where you are able to guess between programming languages. I am almost finished with it but there is one thing that I can't really wrap my head around. I need to find a way to select a specific solution for each day based on a certain timestamp each day. I also want it to be the same for all users. Any help is greatly appreciated 🙂

Solution:

hash the date and convert the first couple of bits to decimal. That will be the number of this day's word in the wordlist

Jump to solution

21 Replies

maskmonarch•16mo ago

Base the timestamp on UTC instead of a relative timezone

voffiee•16mo ago

The problem isn't the timestamp part. It is more the fact that I need a way to store the solution once it is generated so that all users get it And I don't want a code snippet to be ran every time someone goes to the page and overwrites the previous solution

Solution

Matvey•16mo ago

hash the date and convert the first couple of bits to decimal. That will be the number of this day's word in the wordlist

voffiee•16mo ago

And that then should make sure that everyone gets the same since it is based of a date, right?

Matvey•16mo ago

Just make a server that returns today's result.

voffiee•16mo ago

Do I really need a server? I have an SPA currently and if I just need to hash the date then it should be fine without a server? Or am I missing something here? Also do you have an example of how the hashing works? I have not worked with hashing stuff to much

Matvey•16mo ago

Yes, you can get hash like this

await crypto.subtle.digest("SHA-256", new TextEncoder().encode("STRING TO HASH"));

await crypto.subtle.digest("SHA-256", new TextEncoder().encode("STRING TO HASH"));

1 character change in the input string will change the hash completely No, you can put every answer into its own file, and on the frontend hash the date and fetch the corresponding file so you don't fetch all possible answers

voffiee•16mo ago

so then I guess NextJS would be better then a SPA React application? And the "STRING TO HASH" would be the utc date then?

Matvey•16mo ago

yes

voffiee•16mo ago

So it would be

await crypto.subtle.digest("SHA-256", new ArrayBuffer(new TextEncoder().encode(new Date().getTime())));

await crypto.subtle.digest("SHA-256", new ArrayBuffer(new TextEncoder().encode(new Date().getTime())));

Matvey•16mo ago

With this you will get new result each second because new Date().getTime() changes every second

voffiee•16mo ago

Ohh yeah, true

Matvey•16mo ago

const results = ["An", "Array", "Of", "Possible", "Wordle", "Answers"];
const date = new Date();
const hash = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(`${date.getUTCDate()} ${date.getUTCMonth()} ${date.getUTCFullYear()}`));
const result = results[new Uint16Array(hash)[0] % results.length];

const results = ["An", "Array", "Of", "Possible", "Wordle", "Answers"];
const date = new Date();
const hash = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(`${date.getUTCDate()} ${date.getUTCMonth()} ${date.getUTCFullYear()}`));
const result = results[new Uint16Array(hash)[0] % results.length];

something like this

voffiee•16mo ago

The ArrayBuffer needs a number. I'm currently getting this error within the ArrayBuffer constructor

Argument of type 'Uint8Array' is not assignable to parameter of type 'number'.

Argument of type 'Uint8Array' is not assignable to parameter of type 'number'.

Matvey•16mo ago

You don't need ArrayBuffer, TextEncoder already returns a buffer, sorry i updated my message

voffiee•16mo ago

All good 👍 What way would be the best to resolve a promise within a React component? Because currently I store the solution as a variable within my "App container" component. The function that generates the solution returns a promise to it because it is async to be able to await crypto Could I use some Promise.all() solution?

Matvey•16mo ago

There is only one promise yes

voffiee•16mo ago

I know, I haven't worked with promises to much within React

voffiee•16mo ago

Just marked your hash message as the solution But how would I make it possible for the generateSolution function to not return a Promise but rather the actual value

Matvey•16mo ago

No, you can't, but you can do something like this

const App = () => {
  const [solution, setSolution] = useState<string | null>(null);
  useEffect(() => generateSolution().then(s => serSolution(s)), []);

  if (!solution) return "Loading ...";
  return (
    <WordleGame solution={solution} />
  )
}

const App = () => {
  const [solution, setSolution] = useState<string | null>(null);
  useEffect(() => generateSolution().then(s => serSolution(s)), []);

  if (!solution) return "Loading ...";
  return (
    <WordleGame solution={solution} />
  )
}

voffiee•16mo ago

I think I was able to solve the issue but thanks for the help! 🙂

Gaming

Programming

Wordle - Word selection