arnaucube
5 years ago
8 changed files with 286 additions and 0 deletions
Split View
Diff Options
-
+4 -0README.md
-
+1 -0constants.js
-
+20 -0css/dark-theme.css
-
+32 -0css/style.css
-
+64 -0dashboard.html
-
+36 -0dashboard.js
-
+87 -0index.html
-
+42 -0index.js
@ -0,0 +1,4 @@ |
|||
# gogame-frontend |
|||
Frontend webapp for https://github.com/arnaucube/gogame |
|||
|
|||
Work in progress |
|||
@ -0,0 +1 @@ |
|||
const url = "http://127.0.0.1:5000"; |
|||
@ -0,0 +1,20 @@ |
|||
.dark-theme { |
|||
background: #232729; |
|||
color: #d9d9d9; |
|||
} |
|||
.dark-theme |
|||
.card, |
|||
.list-group-item, |
|||
input, |
|||
.nav-link { |
|||
background: none!important; |
|||
border-color: #3b4145; |
|||
} |
|||
.dark-theme input { |
|||
color: #00ffd8; |
|||
} |
|||
.dark-theme input:focus { |
|||
color: #00ffd8; |
|||
box-shadow: 0px 0px 5px #00ffd8!important; |
|||
border: none; |
|||
} |
|||
@ -0,0 +1,32 @@ |
|||
|
|||
/* a, a:link, a:visited, a:hover { |
|||
color: #5ae1cd!important; |
|||
text-decoration: none!important; |
|||
} |
|||
a:hover { |
|||
color: #5ae1cd!important; |
|||
text-decoration: none!important; |
|||
} */ |
|||
|
|||
.btn { |
|||
cursor: pointer; |
|||
} |
|||
|
|||
hr { |
|||
height: 2px!important; |
|||
|
|||
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00cee6+0,5ae1cd+98 */ |
|||
background: #00cee6; /* Old browsers */ |
|||
background: -moz-linear-gradient(left, #00cee6 0%, #5ae1cd 98%); /* FF3.6-15 */ |
|||
background: -webkit-linear-gradient(left, #00cee6 0%,#5ae1cd 98%); /* Chrome10-25,Safari5.1-6 */ |
|||
background: linear-gradient(to right, #00cee6 0%,#5ae1cd 98%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ |
|||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00cee6', endColorstr='#5ae1cd',GradientType=1 ); /* IE6-9 */ |
|||
} |
|||
|
|||
|
|||
.resourcesTable>thead>tr>th, .resourcesTable>tbody>tr>td{ |
|||
padding-left: 5px; |
|||
padding-right: 5px; |
|||
text-align: center; |
|||
border:1px solid #ffffff; |
|||
} |
|||
@ -0,0 +1,64 @@ |
|||
<!doctype html> |
|||
<html lang="en"> |
|||
|
|||
<head> |
|||
<!-- Required meta tags --> |
|||
<meta charset="utf-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> |
|||
|
|||
<!-- Bootstrap CSS --> |
|||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> |
|||
<link rel="stylesheet" href="css/style.css"> |
|||
<link rel="stylesheet" href="css/dark-theme.css"> |
|||
|
|||
<title>gogame</title> |
|||
</head> |
|||
|
|||
<body class="dark-theme"> |
|||
<div class="container"> |
|||
|
|||
<h3>Dashboard</h3> |
|||
User Name: <span id="name"></span> |
|||
|
|||
<br><br> |
|||
<table class="resourcesTable"> |
|||
<thead> |
|||
<tr> |
|||
<th scope="col">Metal</th> |
|||
<th scope="col">Crystal</th> |
|||
<th scope="col">Detuerium</th> |
|||
<th scope="col">Energy</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td id="metal"></td> |
|||
<td id="crystal"></td> |
|||
<td id="deuterium"></td> |
|||
<td id="energy"></td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
<br><br><br><br><br> |
|||
<div onclick="logout()" class="btn btn-primary">Logout</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<!-- Optional JavaScript --> |
|||
<!-- jQuery first, then Popper.js, then Bootstrap JS --> |
|||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> |
|||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> |
|||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> |
|||
|
|||
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> |
|||
|
|||
|
|||
<script src="constants.js"></script> |
|||
<script src="dashboard.js"></script> |
|||
|
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,36 @@ |
|||
const token = localStorage.getItem("token"); |
|||
console.log(token); |
|||
|
|||
if (localStorage.getItem("token")===null) { |
|||
// redirect to dashboard
|
|||
window.location.href = "/index.html"; |
|||
} |
|||
function logout() { |
|||
localStorage.removeItem("token"); |
|||
window.location.href = "/index.html"; |
|||
} |
|||
|
|||
let config = { |
|||
"crossdomain": true, |
|||
headers: { |
|||
"Content-Type": "application/json", |
|||
"Authorization": "Bearer " + token |
|||
} |
|||
}; |
|||
|
|||
let user = {}; |
|||
// get user data
|
|||
axios.get(url + "/", config) |
|||
.then(function (res) { |
|||
console.log(res.data); |
|||
user = res.data.user; |
|||
console.log(user); |
|||
document.getElementById("name").innerHTML = user.Name; |
|||
document.getElementById("metal").innerHTML = user.Resources.Metal; |
|||
document.getElementById("crystal").innerHTML = user.Resources.Crystal; |
|||
document.getElementById("deuterium").innerHTML = user.Resources.Deuterium; |
|||
document.getElementById("energy").innerHTML = user.Resources.Energy; |
|||
}) |
|||
.catch(function (error) { |
|||
console.log(error); |
|||
}); |
|||
@ -0,0 +1,87 @@ |
|||
<!doctype html> |
|||
<html lang="en"> |
|||
|
|||
<head> |
|||
<!-- Required meta tags --> |
|||
<meta charset="utf-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> |
|||
|
|||
<!-- Bootstrap CSS --> |
|||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> |
|||
<link rel="stylesheet" href="css/style.css"> |
|||
<link rel="stylesheet" href="css/dark-theme.css"> |
|||
|
|||
<title>gogame</title> |
|||
</head> |
|||
|
|||
<body class="dark-theme"> |
|||
<div class="container"> |
|||
<div class="row" style="margin-top:20%;"> |
|||
<div class="col-lg-4"></div> |
|||
<div class="col-lg-4"> |
|||
|
|||
<h3>gogame</h3> |
|||
<div class="card"> |
|||
<ul class="nav nav-tabs" id="myTab" role="tablist"> |
|||
<li class="nav-item"> |
|||
<a class="nav-link active" id="login-tab" data-toggle="tab" href="#login" role="tab" aria-controls="login" aria-selected="true">Login</a> |
|||
</li> |
|||
<li class="nav-item"> |
|||
<a class="nav-link" id="register-tab" data-toggle="tab" href="#register" role="tab" aria-controls="register" aria-selected="false">Register</a> |
|||
</li> |
|||
</ul> |
|||
|
|||
<div class="card-body"> |
|||
|
|||
<div class="tab-content" id="myTabContent"> |
|||
<div class="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="login-tab"> |
|||
<h5 class="card-title">Login</h5> |
|||
<hr> |
|||
<p class="card-text"> |
|||
<label for="exampleInputEmail1">Email address</label> |
|||
<input type="email" class="form-control" id="loginEmail" placeholder="Enter email"> |
|||
<br> |
|||
<label for="exampleInputPassword1">Password</label> |
|||
<input type="password" class="form-control" id="loginPassword" placeholder="Password"> |
|||
<div onclick="login()" class="btn btn-primary float-right">Login</div> |
|||
</p> |
|||
</div> |
|||
<div class="tab-pane fade" id="register" role="tabpanel" aria-labelledby="register-tab"> |
|||
<h5 class="card-title">Register</h5> |
|||
<hr> |
|||
<p class="card-text"> |
|||
<label for="email">Email address</label> |
|||
<input type="email" class="form-control" id="registerEmail" placeholder="Enter email"> |
|||
<br> |
|||
<label for="name">Name</label> |
|||
<input type="text" class="form-control" id="registerName" placeholder="Name"> |
|||
<br> |
|||
<label for="password">Password</label> |
|||
<input type="password" class="form-control" id="registerPassword" placeholder="Password"> |
|||
<div onclick="register()" class="btn btn-primary float-right">Register</div> |
|||
</p> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<!-- Optional JavaScript --> |
|||
<!-- jQuery first, then Popper.js, then Bootstrap JS --> |
|||
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> |
|||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> |
|||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> |
|||
|
|||
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> |
|||
|
|||
|
|||
<script src="constants.js"></script> |
|||
<script src="index.js"></script> |
|||
|
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,42 @@ |
|||
if (localStorage.getItem("token")!==null) { |
|||
// redirect to dashboard
|
|||
window.location.href = "/dashboard.html"; |
|||
} |
|||
|
|||
function register() { |
|||
let email = document.getElementById("registerEmail").value; |
|||
let name = document.getElementById("registerName").value; |
|||
let password = document.getElementById("registerPassword").value; |
|||
|
|||
let data = { |
|||
email: email, |
|||
name: name, |
|||
password: password |
|||
}; |
|||
axios.post(url + "/register", data) |
|||
.then(function (res) { |
|||
console.log(res.data); |
|||
}) |
|||
.catch(function (error) { |
|||
console.log(error); |
|||
}); |
|||
} |
|||
|
|||
function login() { |
|||
let email = document.getElementById("loginEmail").value; |
|||
let password = document.getElementById("loginPassword").value; |
|||
|
|||
let data = { |
|||
email: email, |
|||
password: password |
|||
}; |
|||
axios.post(url + "/login", data) |
|||
.then(function (res) { |
|||
console.log(res.data); |
|||
localStorage.setItem("token", res.data.token); |
|||
window.location.href = "/dashboard.html"; |
|||
}) |
|||
.catch(function (error) { |
|||
console.log(error); |
|||
}); |
|||
} |
|||