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
Top comments (0)