This commit is contained in:
Laureηt 2022-05-29 11:14:08 +02:00
parent 9f58270be8
commit 5579e0cdc8
No known key found for this signature in database
GPG key ID: D88C6B294FD40994
15 changed files with 209 additions and 1029 deletions

View file

@ -1,89 +0,0 @@
.buypixel-container .text {
font-size: 35px;
font-weight: 600;
text-align: center;
}
.buypixel-container .solde {
font-size: 35px;
font-weight: 600;
text-align: center;
color: #fff;
border-radius: 45px;
background: -webkit-linear-gradient(right, #56d8e4, #9f01ea);
}
.buypixel-container form {
margin-top: -20px;
}
.buypixel-container form .data {
height: 45px;
width: 100%;
margin: 40px 0;
}
form .data label {
font-size: 18px;
}
form .data input {
height: 100%;
width: 100%;
padding-left: 10px;
font-size: 17px;
border: 1px solid silver;
}
form .data input:focus {
border-color: #3498db;
border-bottom-width: 2px;
}
form .forgot-pass {
margin-top: -8px;
}
form .forgot-pass a {
color: #3498db;
text-decoration: none;
}
form .forgot-pass a:hover {
text-decoration: underline;
}
form .btn {
margin: 30px 0;
height: 45px;
width: 100%;
position: relative;
overflow: hidden;
border-radius: 45px;
}
form .btn:hover {
box-shadow: 0px 0px 5px 5px #3333;
}
form .btn button {
height: 100%;
width: 100%;
background: none;
border: none;
color: #fff;
font-size: 18px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
background: -webkit-linear-gradient(right, #56d8e4, #9f01ea);
}
form .signup-login-link {
text-align: center;
}
#color {
min-height: 20px;
}

View file

@ -1,11 +1,3 @@
nav {
display: flex;
flex-direction: row;
justify-content: space-between;
background: #3333;
height: 5rem;
}
.logged-out, .logged-out,
.logged-in { .logged-in {
display: flex; display: flex;

View file

@ -1,89 +0,0 @@
.mypixel-container .text {
font-size: 35px;
font-weight: 600;
text-align: center;
}
.mypixel-container .solde {
font-size: 35px;
font-weight: 600;
text-align: center;
color: #fff;
border-radius: 45px;
background: -webkit-linear-gradient(right, #56d8e4, #9f01ea);
}
.mypixel-container form {
margin-top: -20px;
}
.mypixel-container form .data {
height: 45px;
width: 100%;
margin: 40px 0;
}
form .data label {
font-size: 18px;
}
form .data input {
height: 100%;
width: 100%;
padding-left: 10px;
font-size: 17px;
border: 1px solid silver;
}
form .data input:focus {
border-color: #3498db;
border-bottom-width: 2px;
}
form .forgot-pass {
margin-top: -8px;
}
form .forgot-pass a {
color: #3498db;
text-decoration: none;
}
form .forgot-pass a:hover {
text-decoration: underline;
}
form .btn {
margin: 30px 0;
height: 45px;
width: 100%;
position: relative;
overflow: hidden;
border-radius: 45px;
}
form .btn:hover {
box-shadow: 0px 0px 5px 5px #3333;
}
form .btn button {
height: 100%;
width: 100%;
background: none;
border: none;
color: #fff;
font-size: 18px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
background: -webkit-linear-gradient(right, #56d8e4, #9f01ea);
}
form .signup-login-link {
text-align: center;
}
#color {
min-height: 20px;
}

View file

@ -1,5 +1,4 @@
#login, .popup {
#signup {
display: none; display: none;
background: #fff; background: #fff;
@ -15,14 +14,13 @@
text-align: center; text-align: center;
} }
.close { .popup > button {
cursor: pointer;
}
.popup .close {
position: absolute; position: absolute;
right: 20px; right: 20px;
top: 15px; top: 15px;
font-size: 18px; font-size: 18px;
} }
#login > button,
#signup > button {
cursor: pointer;
}

View file

@ -1,175 +0,0 @@
.menu-container {
--width: 410px;
display: none;
visibility: visible;
background: #fff;
width: var(--width);
margin: 30px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
position: absolute;
left: calc(50% - var(--width) / 2);
top: 30%;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 5px #000;
}
#show-menu:checked ~ .menu-container {
display: block;
}
.menu-container .close-btn {
position: absolute;
right: 20px;
top: 15px;
font-size: 18px;
cursor: pointer;
}
.menu-container .close-btn:hover {
color: #3498db;
}
.menu-container div {
display: flex;
justify-content: space-evenly;
}
.wallet-container {
--width: 410px;
display: none;
visibility: visible;
background: #fff;
width: var(--width);
margin: 30px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
position: absolute;
left: calc(50% - var(--width) / 2);
top: 30%;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 5px #000;
}
#show-wallet:checked ~ .wallet-container {
display: block;
}
.wallet-container .close-btn {
position: absolute;
right: 20px;
top: 15px;
font-size: 18px;
cursor: pointer;
}
.wallet-container .close-btn:hover {
color: #3498db;
}
.mypixel-container {
--width: 410px;
display: none;
visibility: visible;
background: #fff;
width: var(--width);
margin: 30px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
position: absolute;
left: calc(50% - var(--width) / 2);
top: 30%;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 5px #000;
}
#show-mypixel:checked ~ .mypixel-container {
display: block;
}
.mypixel-container .close-btn {
position: absolute;
right: 20px;
top: 15px;
font-size: 18px;
cursor: pointer;
}
.mypixel-container .close-btn:hover {
color: #3498db;
}
.buypixel-container {
--width: 410px;
display: none;
visibility: visible;
background: #fff;
width: var(--width);
margin: 30px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
position: absolute;
left: calc(50% - var(--width) / 2);
top: 30%;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 5px #000;
}
#show-buypixel:checked ~ .buypixel-container {
display: block;
}
.buypixel-container .close-btn {
position: absolute;
right: 20px;
top: 15px;
font-size: 18px;
cursor: pointer;
}
.buypixel-container .close-btn:hover {
color: #3498db;
}
.settings-container {
--width: 410px;
display: none;
visibility: visible;
background: #fff;
width: var(--width);
margin: 30px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
position: absolute;
left: calc(50% - var(--width) / 2);
top: 30%;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 5px #000;
}
#show-settings:checked ~ .settings-container {
display: block;
}
.settings-container .close-btn {
position: absolute;
right: 20px;
top: 15px;
font-size: 18px;
cursor: pointer;
}
.settings-container .close-btn:hover {
color: #3498db;
}
.wallet-btn,
.mypixel-btn,
.buypixel-btn,
.settings-btn {
background: #fff;
margin: 10px 10px;
padding: 10px 10px;
color: #3498db;
cursor: pointer;
}

View file

@ -10,11 +10,10 @@ body {
background: linear-gradient(115deg, #56d8e4 10%, #9f01ea 90%); background: linear-gradient(115deg, #56d8e4 10%, #9f01ea 90%);
} }
.href { nav {
color: #3498db; display: flex;
cursor: pointer; flex-direction: row;
} justify-content: space-between;
background: #3333;
.href:hover { height: 5rem;
text-decoration: underline;
} }

View file

@ -1,85 +0,0 @@
.wallet-container .text {
font-size: 35px;
font-weight: 600;
text-align: center;
}
.wallet-container .solde {
font-size: 35px;
font-weight: 600;
text-align: center;
color: #fff;
border-radius: 45px;
background: -webkit-linear-gradient(right, #56d8e4, #9f01ea);
}
.wallet-container form {
margin-top: -20px;
}
.wallet-container form .data {
height: 45px;
width: 100%;
margin: 40px 0;
}
form .data label {
font-size: 18px;
}
form .data input {
height: 100%;
width: 100%;
padding-left: 10px;
font-size: 17px;
border: 1px solid silver;
}
form .data input:focus {
border-color: #3498db;
border-bottom-width: 2px;
}
form .forgot-pass {
margin-top: -8px;
}
form .forgot-pass a {
color: #3498db;
text-decoration: none;
}
form .forgot-pass a:hover {
text-decoration: underline;
}
form .btn {
margin: 30px 0;
height: 45px;
width: 100%;
position: relative;
overflow: hidden;
border-radius: 45px;
}
form .btn:hover {
box-shadow: 0px 0px 5px 5px #3333;
}
form .btn button {
height: 100%;
width: 100%;
background: none;
border: none;
color: #fff;
font-size: 18px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
background: -webkit-linear-gradient(right, #56d8e4, #9f01ea);
}
form .signup-login-link {
text-align: center;
}

BIN
src/main/webapp/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 894 B

View file

@ -3,12 +3,12 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Pixels</title> <title>Pixels</title>
<link rel="stylesheet" href="css/utils.css" /> <link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/title-bar.css" />
<link rel="stylesheet" href="css/login-signup.css" />
<link rel="stylesheet" href="css/pixels.css" /> <link rel="stylesheet" href="css/pixels.css" />
<script src="js/login-signup.js"></script> <link rel="stylesheet" href="css/popups.css" />
<link rel="stylesheet" href="css/logged-in-out.css" />
<script src="js/pixels.js"></script> <script src="js/pixels.js"></script>
<script src="js/user.js"></script>
<script src="js/loaded.js"></script> <script src="js/loaded.js"></script>
</head> </head>
@ -17,11 +17,11 @@
<img src="assets/logo.png" /> <img src="assets/logo.png" />
<span class="logged-out"> <span class="logged-out">
<button onclick="toggleLoginPopup();">Login</button> <button onclick="togglePopup('login');">Login</button>
<button onclick="toggleSignupPopup();">Signup</button> <button onclick="togglePopup('signup');">Signup</button>
<div id="login"> <div id="login" class="popup">
<button onclick="toggleLoginPopup()" class="close"> <button onclick="togglePopup('login')" class="close">
X X
</button> </button>
@ -29,7 +29,7 @@
<form id="login-form" action="api/user/login" method="post"> <form id="login-form" action="api/user/login" method="post">
<div> <div>
<label>Nickname</label> <label>Username</label>
<input type="text" name="username" required /> <input type="text" name="username" required />
</div> </div>
@ -42,8 +42,8 @@
</form> </form>
</div> </div>
<div id="signup"> <div id="signup" class="popup">
<button onclick="toggleSignupPopup()" class="close"> <button onclick="togglePopup('signup')" class="close">
X X
</button> </button>
@ -55,7 +55,7 @@
method="post" method="post"
> >
<div> <div>
<label>Nickname</label> <label>Username</label>
<input type="text" name="username" required /> <input type="text" name="username" required />
</div> </div>
@ -70,8 +70,8 @@
</span> </span>
<span class="logged-in"> <span class="logged-in">
USERNAME HERE <span id="username"></span>
<button onclick="userLogout();">Logout</button> <button onclick="userLogout()">Logout</button>
</span> </span>
</nav> </nav>
@ -87,5 +87,65 @@
<tr></tr> <tr></tr>
<tr></tr> <tr></tr>
</table> </table>
<div id="buy" class="popup">
<button onclick="togglePopup('buy')" class="close">X</button>
Pixel infos
<div>
<label>Owner</label>
<span id="info-owner"></span>
</div>
<div>
<label>Description</label>
<span id="info-description"></span>
</div>
<div>
<label>Price</label>
<span id="info-price"></span>
</div>
<form id="buy-form" class="logged-in" method="post">
<button type="submit">Buy</button>
</form>
</div>
<div id="modify" class="popup">
<button onclick="togglePopup('modify')" class="close">X</button>
Modify pixel
<form id="modify-form" method="post">
<div class="data">
<label>Price</label>
<input type="number" name="price" id="price" required />
</div>
<div>
<label>Red</label>
<input type="range" name="red" required />
</div>
<div>
<label>Green</label>
<input type="range" name="green" required />
</div>
<div>
<label>Blue</label>
<input type="range" name="blue" required />
</div>
<div>
<label>Description</label>
<input type="text" name="description" required />
</div>
<button type="submit">Modify</button>
</form>
</div>
</body> </body>
</html> </html>

View file

@ -1,260 +0,0 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Pixel</title>
<link rel="stylesheet" href="css/utils.css" />
<link rel="stylesheet" href="css/title-bar.css" />
<link rel="stylesheet" href="css/profil.css" />
<link rel="stylesheet" href="css/pixels.css" />
<link rel="stylesheet" href="css/wallet.css" />
<link rel="stylesheet" href="css/mypixel.css" />
<link rel="stylesheet" href="css/buypixel.css" />
<script>
function setMenu() {
if (document.getElementById("show-menu").checked) {
document.getElementById("show-menu").checked = false;
} else {
document.getElementById("show-menu").checked = true;
document.getElementById("show-wallet").checked = false;
document.getElementById("show-mypixel").checked = false;
document.getElementById("show-buypixel").checked = false;
document.getElementById("show-settings").checked = false;
}
}
function setWallet() {
document.getElementById("show-menu").checked = false;
document.getElementById("show-wallet").checked = true;
document.getElementById("show-mypixel").checked = false;
document.getElementById("show-buypixel").checked = false;
document.getElementById("show-settings").checked = false;
}
function setMypixel() {
document.getElementById("show-menu").checked = false;
document.getElementById("show-wallet").checked = false;
document.getElementById("show-mypixel").checked = true;
document.getElementById("show-buypixel").checked = false;
document.getElementById("show-settings").checked = false;
}
function setBuypixel() {
document.getElementById("show-menu").checked = false;
document.getElementById("show-wallet").checked = false;
document.getElementById("show-mypixel").checked = false;
document.getElementById("show-buypixel").checked = true;
document.getElementById("show-settings").checked = false;
}
function setSettings() {
document.getElementById("show-menu").checked = false;
document.getElementById("show-wallet").checked = false;
document.getElementById("show-mypixel").checked = false;
document.getElementById("show-buypixel").checked = false;
document.getElementById("show-settings").checked = true;
}
</script>
<script type="text/javascript" src="pixels.js"></script>
</head>
<body>
<div class="title-bar">
<div class="title"><img src="logo.png" /> Pixels</div>
<div class="profil">
<input type="checkbox" id="show-menu" class="show" />
<input type="checkbox" id="show-wallet" class="show" />
<input type="checkbox" id="show-mypixel" class="show" />
<input type="checkbox" id="show-buypixel" class="show" />
<input type="checkbox" id="show-settings" class="show" />
<label class="menu-btn" onclick="setMenu()">Menu</label>
<div class="username">My name is Amogus</div>
<div class="menu-container">
<label for="show-menu" class="close-btn" title="close"
>X</label
>
<div class="text">Menu</div>
<div>
<label class="wallet-btn" onclick="setWallet()"
>Wallet</label
>
<label class="mypixel-btn" onclick="setMypixel()"
>My pixels</label
>
<label class="buypixel-btn" onclick="setBuypixel()"
>Buy pixel</label
>
<label class="settings-btn" onclick="setSettings()"
>Settings</label
>
</div>
</div>
<div class="wallet-container">
<label for="show-wallet" class="close-btn" title="close"
>X</label
>
<div class="text">Wallet</div>
<br />
<div class="solde"></div>
<form action="pay" method="post">
<div class="data">
<label>Amount</label>
<input type="number" name="amount" required />
</div>
<div class="data">
<label>Card number</label>
<input type="number" name="card" required />
</div>
<div class="data">
<label>Expiry date</label>
<input type="month" name="date" required />
</div>
<div class="btn">
<button type="submit">Pay</button>
</div>
</form>
</div>
<div class="mypixel-container">
<label for="show-mypixel" class="close-btn" title="close"
>X</label
>
<div class="text">My pixels</div>
<br />
<div class="solde"></div>
<div id="color"></div>
<div id="pixel-index"></div>
(
<div id="user-pixel-index"></div>
)
<form action="modify" method="post">
<div class="data">
<label>Price</label>
<input
type="number"
name="price"
id="price"
required
/>
</div>
<div class="data">
<label>Red</label>
<input
type="range"
name="red"
id="red"
oninput="updateUserColorPreview()"
required
/>
</div>
<div class="data">
<label>Green</label>
<input
type="range"
name="green"
id="green"
oninput="updateUserColorPreview()"
required
/>
</div>
<div class="data">
<label>Blue</label>
<input
type="range"
name="blue"
id="blue"
oninput="updateUserColorPreview()"
required
/>
</div>
<div class="data">
<label>Description</label>
<input
type="text"
name="desc"
id="description"
required
/>
</div>
<div class="btn">
<button type="submit">Modify</button>
</div>
</form>
<div>
<div class="btn">
<button onclick="previousUserPixel()">
Previous
</button>
</div>
<div class="btn">
<button onclick="nextUserPixel()">Next</button>
</div>
</div>
</div>
<div class="buypixel-container">
<label for="show-buypixel" class="close-btn" title="close"
>X</label
>
<div class="text">Buy pixel</div>
<br />
<form action="modify" method="post">
<div class="solde"></div>
<div class="data">
<label>Index</label>
<input
type="number"
name="index"
id="buy-pixel-index"
required
/>
</div>
<div class="data">
<label>Owner</label>
<div id="buy-pixel-owner"></div>
</div>
<div class="data">
<label>Description</label>
<div id="buy-pixel-description"></div>
</div>
<div class="data">
<label>Price</label>
<div id="buy-pixel-price"></div>
</div>
<div class="btn">
<button type="submit">Buy</button>
</div>
</form>
<div>
<div class="btn">
<button onclick="previousBuyPixel()">
Previous
</button>
</div>
<div class="btn">
<button onclick="nextBuyPixel()">Next</button>
</div>
</div>
</div>
<div class="settings-container">
<label for="show-settings" class="close-btn" title="close"
>X</label
>
<div class="text">Settings</div>
</div>
</div>
</div>
<div class="pixel-container">
<table id="pixelTable">
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
</table>
</div>
</body>
</html>

View file

@ -1,19 +1,21 @@
// fonction qui s'execute quand la page a finie de charger
function pageLoaded() { function pageLoaded() {
// permet d'intercepter la requête post du formulaire et de la changer un peu
document.forms["login-form"].addEventListener("submit", (event) => { document.forms["login-form"].addEventListener("submit", (event) => {
event.preventDefault(); event.preventDefault();
fetch(event.target.action, { fetch(event.target.action, {
method: "POST", method: "POST",
body: new URLSearchParams(new FormData(event.target)), body: new URLSearchParams(new FormData(event.target)),
}).then((resp) => { }).then(async (resp) => {
if (resp.ok) { if (resp.ok) {
userLogin(); userLogin();
console.log("logged in !"); togglePopup("login");
toggleLoginPopup();
} }
}); });
}); });
// permet d'intercepter la requête post du formulaire et de la changer un peu
document.forms["signup-form"].addEventListener("submit", (event) => { document.forms["signup-form"].addEventListener("submit", (event) => {
event.preventDefault(); event.preventDefault();
@ -23,12 +25,15 @@ function pageLoaded() {
}).then((resp) => { }).then((resp) => {
if (resp.ok) { if (resp.ok) {
userLogin(); userLogin();
console.log("signed up ! (and logged in)"); togglePopup("signup");
toggleSignupPopup();
} }
}); });
}); });
updatePixelsJSON(); updatePixelGrid();
setInterval(updatePixelsJSON, 10000); setInterval(updatePixelGrid, 10000);
if (localStorage.getItem("logged")) {
userLogin();
}
} }

View file

@ -1,54 +0,0 @@
function toggleLoginPopup() {
signup = document.getElementById("signup");
signup.style.display = "none";
toggleElement("login");
}
function toggleSignupPopup() {
login = document.getElementById("login");
login.style.display = "none";
toggleElement("signup");
}
function toggleElement(id) {
element = document.getElementById(id);
if (element.style.display === "none" || element.style.display === "") {
element.style.display = "unset";
} else {
element.style.display = "none";
}
}
function userLogin() {
let elements = document.getElementsByClassName("logged-out");
for (element of elements) {
element.style.display = "none";
}
elements = document.getElementsByClassName("logged-in");
for (element of elements) {
element.style.display = "flex";
}
}
function userLogout() {
fetch("/api/user/logout", {
method: "POST",
}).then((resp) => {
if (resp.ok) {
let elements = document.getElementsByClassName("logged-out");
for (element of elements) {
element.style.display = "flex";
}
elements = document.getElementsByClassName("logged-in");
for (element of elements) {
element.style.display = "none";
}
console.log("logged out");
}
});
}

View file

@ -1,224 +0,0 @@
//////////////////
// Update loops //
//////////////////
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 elems = document.getElementsByClassName("solde");
elems.forEach((el) => {
el.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;
for (let i = 0; i < num_rows; i++) {
table.rows[i].innerHTML = "";
}
for (i in pixelsJSON) {
var pixel = pixelsJSON[i];
var row_id = Math.floor((pixel.id - 1) / num_rows);
var row = table.rows[row_id];
row.innerHTML +=
'<td class="pixel" style="background:#' +
pixel.color +
'">' +
'<div class="info-pixel">' +
'<div class="username">' +
pixel.owner_username +
"</div>" +
'<div class="description">' +
pixel.description +
"</div>" +
"</div>" +
'<div class="patch-shadow"></div>' +
"</td>";
}
}
//////////////////////
// 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;
}
// Initialize pixel index
function initUserPixel() {
var user_pixel_index = 0;
var pixel_index = userJSON.pixels[user_pixel_index] - 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] - 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] - 1;
document.getElementById("user-pixel-index").innerHTML = user_pixel_index;
document.getElementById("pixel-index").innerHTML = pixel_index;
updatePixelPreview();
}
function updatePixelPreview() {
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,12 +1,15 @@
let urlPixel = "http://localhost:8080/api/pixel"; let urlPixel = "http://localhost:8080/api/pixel/";
const updatePixelsJSON = async () => { const updatePixelGrid = async () => {
reponse = await fetch(urlPixel); fetch(urlPixel).then(async (resp) => {
pixelsJSON = await reponse.json(); if (resp.ok) {
setPixels(); json = await resp.json();
setPixels(json);
}
});
}; };
function setPixels() { function setPixels(json) {
var table = document.getElementById("pixels"); var table = document.getElementById("pixels");
var num_rows = table.rows.length; var num_rows = table.rows.length;
@ -14,15 +17,17 @@ function setPixels() {
table.rows[i].innerHTML = ""; table.rows[i].innerHTML = "";
} }
for (i in pixelsJSON) { for (i in json) {
var pixel = pixelsJSON[i]; var pixel = json[i];
var row_id = Math.floor((pixel.id - 1) / num_rows); var row_id = Math.floor((pixel.id - 1) / num_rows);
var row = table.rows[row_id]; var row = table.rows[row_id];
row.innerHTML += row.innerHTML +=
'<td class="pixel" style="background:#' + '<td class="pixel" style="background:#' +
pixel.color + pixel.color +
'">' + '" onclick="pixelClick(' +
pixel.id +
')">' +
'<div class="info-pixel">' + '<div class="info-pixel">' +
'<div class="username">' + '<div class="username">' +
pixel.owner_username + pixel.owner_username +
@ -35,3 +40,39 @@ function setPixels() {
"</td>"; "</td>";
} }
} }
function pixelClick(id) {
fetch(urlPixel + id).then(async (resp) => {
if (resp.ok) {
pixel = await resp.json();
fetch(urlUser).then(async (resp) => {
if (resp.ok) {
user = await resp.json();
if (user.pixels.includes(pixel.id)) {
form = document.getElementById("modify-form");
form.action = urlPixel + pixel.id + "/modify";
togglePopup("modify");
} else {
owner = document.getElementById("info-owner");
owner.innerHTML = pixel.owner_username;
description =
document.getElementById("info-description");
description.innerHTML = pixel.description;
price = document.getElementById("info-price");
price.innerHTML = pixel.price;
form = document.getElementById("buy-form");
form.action = urlPixel + pixel.id + "/buy";
togglePopup("buy");
}
}
});
}
});
}

View file

@ -0,0 +1,61 @@
let urlUser = "http://localhost:8080/api/user";
let urlLogout = "http://localhost:8080/api/user/logout";
function togglePopup(id) {
popups = document.getElementsByClassName("popup");
for (popup of popups) {
if (popup.id == id) {
if (popup.style.display != "unset") {
popup.style.display = "unset";
} else {
popup.style.display = "none";
}
} else {
popup.style.display = "none";
}
}
}
async function userLogin() {
fetch(urlUser).then(async (resp) => {
if (resp.ok) {
user = await resp.json();
username = document.getElementById("username");
username.innerHTML = user.user;
let elements = document.getElementsByClassName("logged-out");
for (element of elements) {
element.style.display = "none";
}
elements = document.getElementsByClassName("logged-in");
for (element of elements) {
element.style.display = "flex";
}
localStorage.setItem("logged", true);
console.log("logged in");
}
});
}
function userLogout() {
fetch(urlLogout, {
method: "POST",
}).then((resp) => {
if (resp.ok) {
let elements = document.getElementsByClassName("logged-out");
for (element of elements) {
element.style.display = "flex";
}
elements = document.getElementsByClassName("logged-in");
for (element of elements) {
element.style.display = "none";
}
localStorage.setItem("logged", false);
console.log("logged out");
}
});
}