arnaucube
4 years ago
8 changed files with 286 additions and 0 deletions
Unified 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); |
||||
|
}); |
||||
|
} |
||||