React game under 2h

Yesterday I was waiting for my wife in car, and my Mac charged around: 80%. So I started discovering react-beautiful-dnd.
My first plan is converting that tutorial to hooks.

When I reached point to fill item list, suddenly click emoji on touch bar, and write this:

const [items, editItems] = useState([
  {id: 0, content: '👧🏼 Girl' },
  {id: 1, content: '🥶 Cold' },
  {id: 2, content: '🧚🏼‍♀️ Faerie' },
  {id: 3, content: '🐨 Coala' },
]);

Which seems wrong in react-beautiful-dnd because id need to be: string.

After figure out this problem, and drag and drop list is worked, my next idea - give score to item - lead to this experimental coding turn to game development.

the basic interaction between items seems:

  const onDragEnd = result => {
    // dropped outside the list
    if (!result.destination) return;
    const dragged = result.source.index;
    const target = result.destination.index;
    editItems(list => {
      const dif = list[dragged].score - list[target].score;      
      list[dragged].score += 10 * (dragged - target) + dif;
      list[target].score += 10 * (target - dragged) - dif;
      const [removed] = list.splice(dragged, 1);
      list.splice(target, 0, removed);
      return list;
  }

After this step, I realised, loser score asap going below zero, so if someone score going down turn to zombie.

 {id, content: '🧟 zombie', score: 0}

Couple of testing show interesting result, the zombie can achieve score. So I think that is good goal for game: zombie earn name by earn score:

  {id:'🐼', content: '🧟 of 🐼', score: 42}

if every one reach this state (ex-exsistence) then game is over and get the score depend on rounds!

I wrote this post to show how turn react library discovering into game prototype development. Final script is: 137 line long.

You can try by clone the repo:
ex-exsistence repo

Or play with the game:
final result on vercel :: ex-exsistence