 |
| facemash.ga |
i wrote this facemash code using only js and html. it uses firebase for database. its pure javscript, no php or mysql. it uses els's rating system. at the end of this post, i have some useful resources which i took into consideration while writing my code. so make sure to check them out.
<!DOCTYPE html>daniel shiffman (nice video on firebase): https://www.youtube.com/watch?v=JrHT1iqSrAQ
<html>
<head>
<title>facemash</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
text-align: center;
font-family: Tahoma;
}
a {
text-decoration: none;
}
h1 {
background: darkred;
color: #fff;
margin: 0;
padding: 0.5em;
}
table {
margin: 0 auto;
}
table img {
text-indent: -10000px;
width: 300px;
height: 300px;
border: 3px solid #aaa;
object-fit: cover;
}
footer {
margin: 20px 0 35px;
font-size: 12px;
}
footer a {
color: darkred;
margin-right: 10px;
}
footer a:hover {
text-decoration: underline;
}
figure {
margin: 0;
}
figure figcaption {
font-size: 12px;
padding: 4px;
}
</style>
</head>
<body>
<header>
<h1>FACEMASH</h1>
</header>
<h3>Everyone isn't the same in hotness.</h3>
<h2>Who's hotter? Click to choose</h2>
<table>
<tr>
<td>
<figure>
<img src="" onclick="rateImage(0)">
<figcaption></figcaption>
</figure>
</td>
<td>OR</td>
<td>
<figure>
<img src="" onclick="rateImage(1)">
<figcaption></figcaption>
</figure>
</td>
</tr>
</table>
<footer>
<a href="#">ABOUT</a>
<a href="#">CONTACT</a>
<a href="javascript: submitImage()">SUBMIT</a>
</footer>
<script src="https://www.gstatic.com/firebasejs/4.12.0/firebase.js"></script>
<script>
var config = {
apiKey: "AIzaSyC1ZwwpANOKbMZp35qzEexOqjGyoi7swVo",
authDomain: "facemashd.firebaseapp.com",
databaseURL: "https://facemashd.firebaseio.com",
projectId: "facemashd",
storageBucket: "",
messagingSenderId: "976264389697"
};
firebase.initializeApp(config);
</script>
<script>
var database = firebase.database();
database.ref("images").on("value", gotData, gotErr);
function submitImage() {
var url = prompt("Enter URL: ");
if(!url) {
alert("Failed!");
return;
}
database.ref("images").push({
url: url,
rating: 1000
});
};
var allImages;
var image1;
var image2;
var imageInitiated = false;
function expected(Ra, Rb) {
return 1 / (1 + Math.pow(10, ((Rb - Ra)/400)));
};
function win(rating, expected) {
return (rating + 24 * (1 - expected));
};
function loss(rating, expected) {
return (rating + 24 * (0 - expected));
};
function rateImage(index) {
var winner, loser;
if(index == 0) {
winner = image1;
loser = image2;
} else {
winner = image2;
loser = image1;
}
var WE = expected(loser.rating, winner.rating);
var LE = expected(winner.rating, loser.rating);
var NW = win(winner.rating, WE);
var NL = loss(loser.rating, LE);
database.ref("images/" + winner.id).set({
url: winner.url,
rating: NW
});
database.ref("images/" + loser.id).set({
url: loser.url,
rating: NL
});
location.reload();
};
function getRanFromArr(arr) {
var index = Math.floor(Math.random() * arr.length);
return arr[index];
};
function setImage(index, img) {
var imgs = document.querySelectorAll("img");
var ele = imgs[index];
ele.src = img.url;
var caps = document.querySelectorAll("figcaption");
var ele = caps[index];
ele.innerHTML = "Rating: " + Math.round(img.rating);
};
function initiateImages() {
var keys = Object.keys(allImages);
if(keys.length <= 1) {
console.log("Not enough images in the database.");
return;
}
var key1 = getRanFromArr(keys);
var key2 = getRanFromArr(keys);
while (key1 == key2) {
key1 = getRanFromArr(keys);
key2 = getRanFromArr(keys);
};
// We also need the id of the image
image1 = Object.assign(allImages[key1], { id: key1 });
image2 = Object.assign(allImages[key2], { id: key2 });
setImage(0, image1);
setImage(1, image2);
imageInitiated = true;
};
function gotData(data) {
allImages = data.val();
if(!imageInitiated) {
initiateImages();
}
};
function gotErr(err) {
console.log("Error!");
console.log(err);
};
</script>
</body>
</html>
elo's rating system: hackerearth.com/blog/algorithms/elo-rating-system-common-link-facemash-chess/
live demo: facemash.ga