@@ -0,0 +1,4 @@
+# gogame-frontend
+Frontend webapp for https://github.com/arnaucube/gogame
+
+Work in progress

@@ -0,0 +1,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);
+  });
+}