Angular에서 facemash 앱을 만든 방법

Visit facemash for wallpaper
Social Network 영화를 본 후 나는 facemash와 같은 유사한 것을 만드는 것에 매우 흥분하여 배경 화면 순위를 매기기 위한 webapp을 만들기로 결정했습니다.

그래서 우선 순위 알고리즘이 필요했기 때문에 elo 등급 알고리즘과 이것이 체스 플레이어의 순위를 매기는 방식에 대해 조사했습니다.

다음은 이와 같은 것을 만들 계획이라면 사용할 수 있는 순위 알고리즘입니다.

float Probability(int rating1, int rating2) 
{ 
    return 1.0 * 1.0 / (1 + 1.0 *  
           pow(10, 1.0 * (rating1 - rating2) / 400)); 
} 

// Function to calculate Elo rating 
// K is a constant. 
// d determines whether Player A wins or Player B.  
void EloRating(float Ra, float Rb, int K, bool d) 
{   

    // To calculate the Winning 
    // Probability of Player B 
    float Pb = Probability(Ra, Rb); 

    // To calculate the Winning 
    // Probability of Player A 
    float Pa = Probability(Rb, Ra); 

    // Case -1 When Player A wins 
    // Updating the Elo Ratings 
    if (d == 1) { 
        Ra = Ra + K * (1 - Pa); 
        Rb = Rb + K * (0 - Pb); 
    } 

    // Case -2 When Player B wins 
    // Updating the Elo Ratings 
    else { 
        Ra = Ra + K * (0 - Pa); 
        Rb = Rb + K * (1 - Pb); 
    } 

    cout << "Updated Ratings:-\n"; 
    cout << "Ra = " << Ra << " Rb = " << Rb; 
} 

이 코드의 출처는 Geeks for Geeks

그렇게 1단계는 완료
이제 또 다른 작업은 순위를 매기기에 충분한 이미지를 찾는 것이었습니다.
그런 것들을 위해 Unsplash, pexles, pixabay 등과 같은 사이트의 오픈 소스 이미지를 사용하는 것이 좋습니다.

그런 다음 내 각도 기술을 사용하여 두 개의 임의 이미지를 표시하는 간단한 UI로 웹 앱을 개발했으며 이를 클릭하면 순위가 업데이트되고 추가 순위를 위해 새 이미지가 표시됩니다.

모든 이미지의 순위를 확인할 수 있는 대시보드도 있습니다.

소스 코드 Github