feat: un truc
This commit is contained in:
gdamms
parent
2de9e4e5fa
commit
804d609dd5
|
|
@ -1,61 +0,0 @@
|
||||||
var urlPixel = "http://localhost:8080/api/pixel";
|
|
||||||
|
|
||||||
// var pixelsJSON;
|
|
||||||
|
|
||||||
// const updatePixelsJSON = async () => {
|
|
||||||
// var reponse = await fetch(urlPixel);
|
|
||||||
// pixelsJSON = await reponse.json();
|
|
||||||
// }
|
|
||||||
|
|
||||||
// Initialize pixel index
|
|
||||||
function initBuyPixel() {
|
|
||||||
var pixel_index = 0;
|
|
||||||
|
|
||||||
var pixel = pixelsJSON[pixel_index];
|
|
||||||
updatePixelBuyPreview(pixel);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Compute next pixel index
|
|
||||||
function nextBuyPixel() {
|
|
||||||
var pixel_index = document.getElementById("buy-pixel-index").value;
|
|
||||||
|
|
||||||
var table = document.getElementById("pixelTable");
|
|
||||||
var number_rows = table.rows.length;
|
|
||||||
|
|
||||||
pixel_index++;
|
|
||||||
if (pixel_index > number_rows * number_rows - 1) {
|
|
||||||
pixel_index = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
var pixel = pixelsJSON[pixel_index];
|
|
||||||
updatePixelBuyPreview(pixel);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Compute previous pixel index
|
|
||||||
function previousUserPixel() {
|
|
||||||
var pixel_index = document.getElementById("buy-pixel-index");
|
|
||||||
|
|
||||||
var table = document.getElementById("pixelTable");
|
|
||||||
var number_rows = table.rows.length;
|
|
||||||
|
|
||||||
pixel_index--;
|
|
||||||
if (pixel_index < 0) {
|
|
||||||
pixel_index = number_rows * number_rows - 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
var pixel = pixelsJSON[pixel_index];
|
|
||||||
updatePixelBuyPreview(pixel);
|
|
||||||
}
|
|
||||||
|
|
||||||
function updatePixelBuyPreview(pixel) {
|
|
||||||
document.getElementById("buy-pixel-index").value = pixel.id - 1;
|
|
||||||
document.getElementById("buy-pixel-owner").innerHTML = pixel.owner_username;
|
|
||||||
document.getElementById("buy-pixel-description").innerHTML = pixel.description;
|
|
||||||
document.getElementById("buy-pixel-price").innerHTML = pixel.price;
|
|
||||||
}
|
|
||||||
|
|
||||||
// updatePixelsJSON();
|
|
||||||
initBuyPixel();
|
|
||||||
|
|
||||||
// setInterval(updatePixelsJSON, 10000);
|
|
||||||
|
|
||||||
|
|
@ -53,7 +53,6 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<script type="text/javascript" src="pixels.js"></script>
|
<script type="text/javascript" src="pixels.js"></script>
|
||||||
<script type="text/javascript" src="userinfo.js"></script>
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -182,10 +181,10 @@
|
||||||
</form>
|
</form>
|
||||||
<div>
|
<div>
|
||||||
<div class="btn">
|
<div class="btn">
|
||||||
<button onclick="previousPixel()">Previous</button>
|
<button onclick="previousBuyPixel()">Previous</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="btn">
|
<div class="btn">
|
||||||
<button onclick="nextPixel()">Next</button>
|
<button onclick="nextBuyPixel()">Next</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -212,8 +211,6 @@
|
||||||
<tr></tr>
|
<tr></tr>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<script type="text/javascript" src="modify_pixel.js"></script>
|
|
||||||
<script type="text/javascript" src="buy_pixel.js"></script>
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,118 +0,0 @@
|
||||||
var urlPixel = "http://localhost:8080/api/pixel";
|
|
||||||
var urlUser = "http://localhost:8080/api/user";
|
|
||||||
|
|
||||||
var pixelsJSON;
|
|
||||||
var userJSON;
|
|
||||||
|
|
||||||
const updatePixelsJSON = async () => {
|
|
||||||
var reponse = await fetch(urlPixel);
|
|
||||||
pixelsJSON = await reponse.json();
|
|
||||||
}
|
|
||||||
|
|
||||||
const updateUserJSON = async () => {
|
|
||||||
var reponse = await fetch(urlUser);
|
|
||||||
userJSON = await reponse.json();
|
|
||||||
}
|
|
||||||
|
|
||||||
function hexToRgb(hex) {
|
|
||||||
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
|
||||||
console.log(result);
|
|
||||||
return result ? {
|
|
||||||
r: parseInt(result[1], 16),
|
|
||||||
g: parseInt(result[2], 16),
|
|
||||||
b: parseInt(result[3], 16)
|
|
||||||
} : null;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Initialize pixel index
|
|
||||||
function initUserPixel() {
|
|
||||||
var user_pixel_index = 0;
|
|
||||||
var pixel_index = userJSON.pixels[user_pixel_index].id - 1;
|
|
||||||
|
|
||||||
document.getElementById("user-pixel-index").innerHTML = user_pixel_index;
|
|
||||||
document.getElementById("pixel-index").innerHTML = pixel_index;
|
|
||||||
|
|
||||||
updatePixelPreview();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Compute next pixel index
|
|
||||||
function nextUserPixel() {
|
|
||||||
var user_pixel_index = parseInt(document.getElementById("user-pixel-index").innerHTML);
|
|
||||||
|
|
||||||
user_pixel_index++;
|
|
||||||
if (user_pixel_index > userJSON.pixels.length - 1) {
|
|
||||||
user_pixel_index = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
var pixel_index = userJSON.pixels[user_pixel_index].id - 1;
|
|
||||||
|
|
||||||
document.getElementById("user-pixel-index").innerHTML = user_pixel_index;
|
|
||||||
document.getElementById("pixel-index").innerHTML = pixel_index;
|
|
||||||
|
|
||||||
updatePixelPreview();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Compute previous pixel index
|
|
||||||
function previousUserPixel() {
|
|
||||||
var user_pixel_index = parseInt(document.getElementById("user-pixel-index").innerHTML);
|
|
||||||
|
|
||||||
user_pixel_index--;
|
|
||||||
if (user_pixel_index < 0) {
|
|
||||||
user_pixel_index = userJSON.pixels.length - 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
var pixel_index = userJSON.pixels[user_pixel_index].id - 1;
|
|
||||||
|
|
||||||
document.getElementById("user-pixel-index").innerHTML = user_pixel_index;
|
|
||||||
document.getElementById("pixel-index").innerHTML = pixel_index;
|
|
||||||
|
|
||||||
updatePixelPreview();
|
|
||||||
}
|
|
||||||
|
|
||||||
function updatePixelPreview() {
|
|
||||||
var colorDiv = document.getElementById("color");
|
|
||||||
|
|
||||||
var index = parseInt(document.getElementById("pixel-index").innerHTML);
|
|
||||||
var pixel = pixelsJSON[index];
|
|
||||||
|
|
||||||
// Update price
|
|
||||||
var price = document.getElementById("price");
|
|
||||||
price.value = pixel.price;
|
|
||||||
|
|
||||||
// Update color
|
|
||||||
var red = document.getElementById("red");
|
|
||||||
var green = document.getElementById("green");
|
|
||||||
var blue = document.getElementById("blue");
|
|
||||||
|
|
||||||
var color = hexToRgb(pixel.color);
|
|
||||||
|
|
||||||
red.value = color.r;
|
|
||||||
green.value = color.g;
|
|
||||||
blue.value = color.b;
|
|
||||||
|
|
||||||
updateUserColorPreview();
|
|
||||||
|
|
||||||
// Update description
|
|
||||||
var description = document.getElementById("description");
|
|
||||||
description.value = pixel.description;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
// Update preview's color
|
|
||||||
function updateUserColorPreview() {
|
|
||||||
var red = document.getElementById("red").value * 255 / 100;
|
|
||||||
var green = document.getElementById("green").value * 255 / 100;
|
|
||||||
var blue = document.getElementById("blue").value * 255 / 100;
|
|
||||||
|
|
||||||
var color = document.getElementById("color");
|
|
||||||
color.style.background = "rgb(" + red + "," + green + "," + blue + ")";
|
|
||||||
}
|
|
||||||
|
|
||||||
updatePixelsJSON();
|
|
||||||
updateUserJSON();
|
|
||||||
|
|
||||||
initUserPixel();
|
|
||||||
|
|
||||||
setInterval(updatePixelsJSON, 10000);
|
|
||||||
setInterval(updateUserJSON, 10000);
|
|
||||||
|
|
||||||
|
|
@ -1,6 +1,44 @@
|
||||||
var url = "http://localhost:8080/api/pixel";
|
//////////////////
|
||||||
|
// Update loops //
|
||||||
|
//////////////////
|
||||||
|
|
||||||
function setPixels(pixelsJSON) {
|
var urlPixel = "http://localhost:8080/api/pixel";
|
||||||
|
var urlUser = "http://localhost:8080/api/user";
|
||||||
|
|
||||||
|
var pixelsJSON;
|
||||||
|
var userJSON;
|
||||||
|
|
||||||
|
const updatePixelsJSON = async () => {
|
||||||
|
var reponse = await fetch(urlPixel);
|
||||||
|
pixelsJSON = await reponse.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
const updateUserJSON = async () => {
|
||||||
|
var reponse = await fetch(urlUser);
|
||||||
|
userJSON = await reponse.json();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function updateSolde() {
|
||||||
|
var div = document.getElementById("solde");
|
||||||
|
div.innerHTML = userJSON.solde + '$';
|
||||||
|
}
|
||||||
|
|
||||||
|
updateSolde();
|
||||||
|
updateUserJSON();
|
||||||
|
updatePixelsJSON();
|
||||||
|
setInterval(updateSolde, 10000);
|
||||||
|
setInterval(updateUserJSON, 10000);
|
||||||
|
setInterval(updatePixelsJSON, 10000);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
////////////////
|
||||||
|
// Pixel grid //
|
||||||
|
////////////////
|
||||||
|
|
||||||
|
function setPixels() {
|
||||||
var table = document.getElementById("pixelTable");
|
var table = document.getElementById("pixelTable");
|
||||||
var num_rows = table.rows.length;
|
var num_rows = table.rows.length;
|
||||||
|
|
||||||
|
|
@ -25,11 +63,161 @@ function setPixels(pixelsJSON) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const updatePixels = async () => {
|
|
||||||
const reponse = await fetch(url);
|
|
||||||
const pixelsJSON = await reponse.json();
|
//////////////////////
|
||||||
setPixels(pixelsJSON);
|
// Modify my pixels //
|
||||||
|
//////////////////////
|
||||||
|
|
||||||
|
function hexToRgb(hex) {
|
||||||
|
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||||
|
console.log(result);
|
||||||
|
return result ? {
|
||||||
|
r: parseInt(result[1], 16),
|
||||||
|
g: parseInt(result[2], 16),
|
||||||
|
b: parseInt(result[3], 16)
|
||||||
|
} : null;
|
||||||
}
|
}
|
||||||
|
|
||||||
updatePixels();
|
// Initialize pixel index
|
||||||
setInterval(updatePixels, 10000);
|
function initUserPixel() {
|
||||||
|
var user_pixel_index = 0;
|
||||||
|
var pixel_index = userJSON.pixels[user_pixel_index].id - 1;
|
||||||
|
|
||||||
|
document.getElementById("user-pixel-index").innerHTML = user_pixel_index;
|
||||||
|
document.getElementById("pixel-index").innerHTML = pixel_index;
|
||||||
|
|
||||||
|
updatePixelPreview();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Compute next pixel index
|
||||||
|
function nextUserPixel() {
|
||||||
|
var user_pixel_index = parseInt(document.getElementById("user-pixel-index").innerHTML);
|
||||||
|
|
||||||
|
user_pixel_index++;
|
||||||
|
if (user_pixel_index > userJSON.pixels.length - 1) {
|
||||||
|
user_pixel_index = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
var pixel_index = userJSON.pixels[user_pixel_index].id - 1;
|
||||||
|
|
||||||
|
document.getElementById("user-pixel-index").innerHTML = user_pixel_index;
|
||||||
|
document.getElementById("pixel-index").innerHTML = pixel_index;
|
||||||
|
|
||||||
|
updatePixelPreview();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Compute previous pixel index
|
||||||
|
function previousUserPixel() {
|
||||||
|
var user_pixel_index = parseInt(document.getElementById("user-pixel-index").innerHTML);
|
||||||
|
|
||||||
|
user_pixel_index--;
|
||||||
|
if (user_pixel_index < 0) {
|
||||||
|
user_pixel_index = userJSON.pixels.length - 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
var pixel_index = userJSON.pixels[user_pixel_index].id - 1;
|
||||||
|
|
||||||
|
document.getElementById("user-pixel-index").innerHTML = user_pixel_index;
|
||||||
|
document.getElementById("pixel-index").innerHTML = pixel_index;
|
||||||
|
|
||||||
|
updatePixelPreview();
|
||||||
|
}
|
||||||
|
|
||||||
|
function updatePixelPreview() {
|
||||||
|
var colorDiv = document.getElementById("color");
|
||||||
|
|
||||||
|
var index = parseInt(document.getElementById("pixel-index").innerHTML);
|
||||||
|
var pixel = pixelsJSON[index];
|
||||||
|
|
||||||
|
// Update price
|
||||||
|
var price = document.getElementById("price");
|
||||||
|
price.value = pixel.price;
|
||||||
|
|
||||||
|
// Update color
|
||||||
|
var red = document.getElementById("red");
|
||||||
|
var green = document.getElementById("green");
|
||||||
|
var blue = document.getElementById("blue");
|
||||||
|
|
||||||
|
var color = hexToRgb(pixel.color);
|
||||||
|
|
||||||
|
red.value = color.r;
|
||||||
|
green.value = color.g;
|
||||||
|
blue.value = color.b;
|
||||||
|
|
||||||
|
updateUserColorPreview();
|
||||||
|
|
||||||
|
// Update description
|
||||||
|
var description = document.getElementById("description");
|
||||||
|
description.value = pixel.description;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update preview's color
|
||||||
|
function updateUserColorPreview() {
|
||||||
|
var red = document.getElementById("red").value * 255 / 100;
|
||||||
|
var green = document.getElementById("green").value * 255 / 100;
|
||||||
|
var blue = document.getElementById("blue").value * 255 / 100;
|
||||||
|
|
||||||
|
var color = document.getElementById("color");
|
||||||
|
color.style.background = "rgb(" + red + "," + green + "," + blue + ")";
|
||||||
|
}
|
||||||
|
|
||||||
|
initUserPixel();
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
///////////////
|
||||||
|
// Buy pixel //
|
||||||
|
///////////////
|
||||||
|
|
||||||
|
// Initialize pixel index
|
||||||
|
function initBuyPixel() {
|
||||||
|
var pixel_index = 0;
|
||||||
|
|
||||||
|
var pixel = pixelsJSON[pixel_index];
|
||||||
|
updatePixelBuyPreview(pixel);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Compute next pixel index
|
||||||
|
function nextBuyPixel() {
|
||||||
|
var pixel_index = document.getElementById("buy-pixel-index").value;
|
||||||
|
|
||||||
|
var table = document.getElementById("pixelTable");
|
||||||
|
var number_rows = table.rows.length;
|
||||||
|
|
||||||
|
pixel_index++;
|
||||||
|
if (pixel_index > number_rows * number_rows - 1) {
|
||||||
|
pixel_index = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
var pixel = pixelsJSON[pixel_index];
|
||||||
|
updatePixelBuyPreview(pixel);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Compute previous pixel index
|
||||||
|
function previousBuyPixel() {
|
||||||
|
var pixel_index = document.getElementById("buy-pixel-index").value;
|
||||||
|
|
||||||
|
var table = document.getElementById("pixelTable");
|
||||||
|
var number_rows = table.rows.length;
|
||||||
|
|
||||||
|
pixel_index--;
|
||||||
|
if (pixel_index < 0) {
|
||||||
|
pixel_index = number_rows * number_rows - 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
var pixel = pixelsJSON[pixel_index];
|
||||||
|
updatePixelBuyPreview(pixel);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updatePixelBuyPreview(pixel) {
|
||||||
|
document.getElementById("buy-pixel-index").value = pixel.id - 1;
|
||||||
|
document.getElementById("buy-pixel-owner").innerHTML = pixel.owner_username;
|
||||||
|
document.getElementById("buy-pixel-description").innerHTML = pixel.description;
|
||||||
|
document.getElementById("buy-pixel-price").innerHTML = pixel.price;
|
||||||
|
}
|
||||||
|
|
||||||
|
initBuyPixel();
|
||||||
|
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
var url = "http://localhost:8080/api/user";
|
|
||||||
|
|
||||||
function setSolde(userJSON) {
|
|
||||||
var div = document.getElementById("solde");
|
|
||||||
div.innerHTML = userJSON.solde + '$';
|
|
||||||
}
|
|
||||||
|
|
||||||
const updateSolde = async () => {
|
|
||||||
const reponse = await fetch(url);
|
|
||||||
const userJSON = await reponse.json();
|
|
||||||
setSolde(userJSON);
|
|
||||||
}
|
|
||||||
|
|
||||||
updateSolde();
|
|
||||||
setInterval(updateSolde, 10000);
|
|
||||||
Loading…
Reference in a new issue