283 indexOLD.html
View file
@@ -0,0 +1,283 @@
<!DOCTYPE html>
<html>
<head>
<title>Higher or Lower</title>
<script src="jquery.js"></script>
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> -->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> -->
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap-theme.min.css">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <!-- To stop pound signs showing up like weird characters -->
<style>
.img{
height: 300px;
}
.center{
text-align: center;
}
.description{
font-size: 12px;
font-style: italic;
overflow: scroll;
height: 100px;
}
</style>
<!--<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>-->
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Higher or Lower game</h1>
<h4>Does product 'A' cost more than product 'B'?</h4>
</div>
</div>
<div class='row'>
<div class="col-xs-12">
<p class="label label-success">Score: <span id='score'>0</span></p>
</div>
</div>

<div class="row">
<div class="col-xs-6">
<img id='image1' class="pic1 img" src="images/product_image.jpg" alt="Product 1">
</div>
<div class="col-xs-6">
<img id='image2' class="pic2 img" src="images/product_image.jpg" alt="Product 2">
</div>
</div>

<div class="row">
<div class="col-xs-6">
<div id='p1Name'>
... Loading Name
</div>
</div>
<div class="col-xs-6">
<div id='p2Name'>
... Loading Name
</div>
</div>
</div>

<div class="row">
<div class="col-xs-6">
<div id='p1Description' class="description">
... Loading Description
</div>
<div id="p1Price" data-price=''></div>
</div>
<div class="col-xs-6">
<div id='p2Description' class="description">
... Loading Description
</div>
<div id="p2Price" data-price=''></div>
</div>
</div>

<div class='row'>
<div class='col-xs-6'>
<button type="button" class="btn btn-primary btn-lg high-low" data-high-low="higher" data-toggle="" data-target="#myModal">YES</button>
</div>
<div class='col-xs-6'>
<button type="button" class="btn btn-primary btn-lg high-low" data-high-low="lower" data-toggle="" data-target="#myModal">NO</button>
</div>
</div>

</div>

<!-- Modal -->
<div class="modal fade" id="answerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="answerModalText">?</h4>
</div>
</div>
</div>
</div>

<script>

// Coming soon: check highscore in localstorage
// Service workers to let you play game offline

var score = 0;
var product1,product2;
var product1IsSet = false;
var offline = false;

// GUFF
var product1Pids,product1Data,product2Pids,product2Data;

(function(){ // When page is ready, run this code.
// check if offline first then open run cached game
// _checkOffline();
getNewProducts(); // Start new game
})();

function getNewProducts(){

product1 = getProductIds() // First product
.then(getProductData)
.then(processProductData)
.catch(fetchFailed);

product2 = getProductIds() // Second product
.then(getProductData)
.then(processProductData)
.catch(fetchFailed);
}

function getProductIds(){

var offset = _getRandomOffset(); // Get products from a set range using an offset. E.g. offset = 345, get me some PIDS starting from 345

// var promiseToReturnResults = $.ajax({url: "http://lad-api.net-a-porter.com:80/NAP/GB/60/"+offset+"/pids",
// type: "GET"
// });

var promiseToReturnResults = fetch('http://lad-api.net-a-porter.com:80/NAP/GB/60/'+offset+'/pids', {
method: 'get'
})

return promiseToReturnResults;
}

function getProductData(pidData){

// Now we have pids (E.g. [616146,224876,334566])
var randomArrayPosition = _getRandomNumber(0,59); // Randomly pick one of the 60 results
var pid = pidData.pids[randomArrayPosition];

// Get product description data
// var promiseToReturnResults = $.ajax({url: "http://lad-api.net-a-porter.com:80/NAP/GB/en/detail/"+pid,
// type: "GET"
// });

var promiseToReturnResults = fetch('http://lad-api.net-a-porter.com:80/NAP/GB/en/detail/'+pid, {
method: 'get'
})

return promiseToReturnResults;
}

function processProductData(productData){

// Image data
var pid = productData.id;
var shot = productData.images.shots[0];
var size = productData.images.sizes[0];
var imageURL = "http://cache.net-a-porter.com/images/products/"+pid+"/"+pid+"_"+shot+"_"+size+".jpg";
// Name data
var name = productData.name;
var designer = productData.brand.name;
var description = productData.editorsComments;
var price = btoa(productData.price.amount);

// Output information onto page
// If product 1 has not been output to the page yet

if(product1IsSet === false){
// output product 1
document.getElementById('p1Name').innerHTML = '<p><b>'+designer+'</b></p><p>'+name+'</p>';
document.getElementById('image1').setAttribute('src',imageURL);
document.getElementById('p1Price').setAttribute('data-price',price);
document.getElementById('p1Description').innerHTML = description;

product1IsSet = true;
}
else{
// output product 2
document.getElementById('p2Name').innerHTML = '<p><b>'+designer+'</b></p><p>'+name+'</p>';
document.getElementById('image2').setAttribute('src',imageURL);
document.getElementById('p2Price').setAttribute('data-price',price);
document.getElementById('p2Description').innerHTML = description;
}

// Typical image URL:
// http://cache.net-a-porter.com/images/products/592415/592415_{{shot}}_{{size}}.jpg
// http://cache.net-a-porter.com/images/products/592415/592415_in_dl.jpg
}

function fetchFailed(){
// alert('Data fetch failed ʕノ•ᴥ•ʔノ ︵ ┻━┻');
console.log('fetch failed');
}

function processAnswer(element){
product1IsSet = false; // We don't want to override the first product's slot
var selection = element.getAttribute('data-high-low'); // Retrieve whether higher or lower is pressed

var price1 = atob(document.getElementById('p1Price').getAttribute('data-price'))/100; // atob($('#p1Price').attr('data-price'))/100;
var price2 = atob(document.getElementById('p2Price').getAttribute('data-price'))/100; // atob($('#p2Price').attr('data-price'))/100;

if(selection == 'higher' && price1 > price2) {
document.getElementById('answerModalText').innerHTML = ('Correct! Product 1: £'+ price1 +'. Product 2: £'+price2);
_addToScore();
}
else if(selection == 'lower' && price1 < price2){
document.getElementById('answerModalText').innerHTML = ('Correct! Product 1: £'+ price1 +'. Product 2: £'+price2);
_addToScore();
}
else if (price1 === price2) {
document.getElementById('answerModalText').innerHTML = ('Same price! No points though sorry. Product 1: £'+ price1 +'. Product 2: £'+price2);
}
else {
document.getElementById('answerModalText').innerHTML = ('ʕノ•ᴥ•ʔノ ︵ ┻━┻ <br/>Incorrect! Product 1: £'+ price1 +'. Product 2: £'+price2);
}

$('#answerModal').modal();
getNewProducts(); // Get new products again
}

//////////////////////
// Helper functions
//////////////////////

function _getRandomOffset(){
var offset = _getRandomNumber(0,14983);
return offset;
}

function _getRandomNumber(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}

function _addToScore(){
score++;
document.getElementById('score').innerHTML = score;
}

// function _checkOffline(){
// // Check if service workers can be used with this browser
// if ('serviceWorker' in navigator) {
// navigator.serviceWorker.register('/sw-test/sw.js', { scope: '/sw-test/' }).then(function(reg) {
// // registration worked
// console.log('Registration succeeded. Scope is ' + reg.scope);
// }).catch(function(error) {
// // registration failed
// console.log('Registration failed with ' + error);
// });
// };
// }

//////////////////////
// Event listeners
//////////////////////

[].forEach.call(document.getElementsByClassName('high-low'), function(element) {
element.addEventListener('click', function(){ processAnswer(this); });
});

// JQuery guff
// $('.high-low').on('click', function(){ processAnswer(this); }); // Whenever a button with a class of 'high-low' gets pressed, run the processAnswer function

// Only retrieves first element found
// document.querySelector('.high-low')
</script>
</body>
</html>