feat: un truc

This commit is contained in:
gdamms 2022-05-25 17:13:56 +02:00
parent 2de9e4e5fa
commit 804d609dd5
5 changed files with 198 additions and 207 deletions

View file

@ -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);

View file

@ -53,7 +53,6 @@
}
</script>
<script type="text/javascript" src="pixels.js"></script>
<script type="text/javascript" src="userinfo.js"></script>
</head>
<body>
@ -182,10 +181,10 @@
</form>
<div>
<div class="btn">
<button onclick="previousPixel()">Previous</button>
<button onclick="previousBuyPixel()">Previous</button>
</div>
<div class="btn">
<button onclick="nextPixel()">Next</button>
<button onclick="nextBuyPixel()">Next</button>
</div>
</div>
</div>
@ -212,8 +211,6 @@
<tr></tr>
</table>
</div>
<script type="text/javascript" src="modify_pixel.js"></script>
<script type="text/javascript" src="buy_pixel.js"></script>
</body>
</html>

View file

@ -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);

View file

@ -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 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();
setInterval(updatePixels, 10000);
// 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 + ")";
}
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();

View file

@ -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);