/tmp MDR
This commit is contained in:
Laureηt
parent
9f58270be8
commit
5579e0cdc8
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -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;
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
|
||||||
|
|
@ -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;
|
|
||||||
}
|
}
|
||||||
|
|
@ -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
BIN
src/main/webapp/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 894 B |
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
|
||||||
|
|
@ -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();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
@ -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();
|
|
||||||
|
|
@ -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");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
|
||||||
61
src/main/webapp/js/user.js
Normal file
61
src/main/webapp/js/user.js
Normal 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");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue