- A replica of facemash original version with some extra styling
- Implemented based on Elo rating with a factor of k = 32
- Shuffling in non repeatedd random order by Fisher-yates algorithm
- First i did load all the image file dynamically in react by using process.env.PUBLIC_FOLDER. If any asset is present in public folder, we can access it dynamically instead of loading the image in the react
- Shuffle the order in a random order so that for each user that enter's our site, we get a different ordering and get a different set of rating which would drastically make it look more natural rather giving all the users the same set of order.
- compare each value with increasing index.
- when clicked on the picture, a ratingCalulator is invoked and rate system is done
- When all the comparision are finished, we can see the result of the rating or the user has ability to see it directly.
I personally avoided database in it, i wanted to make this project as neat as possible and use javascript. Now that i grasp of how the flow would work, Its implementable in database with ease.
Just run - npm start
There is no depency or extra library involved.
for(let i=arr.length-1;i>0;i--){ const j = Math.round(Math.random()*(i+1)); const temp = arr[i]; arr[i] = arr[j]; arr[j] = temp }
const calculateRating = (winner)=>{ var pa = probability(p2Rating,p1Rating); var pb = probability(p1Rating,p2Rating);
if(winner===1){
let r1 = Math.floor(p1Rating+k*(1-pa));
let r2 = Math.floor(p2Rating+k*(0-pb));
p1Rating = r1;
p2Rating = r2;
}else if(winner===2){
let r1 = Math.floor(p1Rating+k*(0-pa));
let r2 = Math.floor(p2Rating+k*(1-pb));
p1Rating = r1;
p2Rating = r2;
}
}