Myfe - 23/03/22
Tags: gamedev, javascript, python, github
Published: 2022-03-24 17:01:35

My next step was to add a profile page, but I ended up doing way more than that.

---

## Profile Page

First of all, I added a profile route in `app.py`:
```py
@app.route("/profile")
def profile():
  if getcookie("User") == False:
    return redirect("/")
  else:
    return render_template("profile.html", user=getuser(getcookie("User")))
```

Then I made the `profile.html` file in the `templates` folder:
```html
<!DOCTYPE html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Myfe - Your Profile</title>
  </head>
  <body>
      <h1>{{user['Username']}}</h1>
      <p>Account created on: {{user['Created']}}</p>
      <p>Money: {{user['Money']}}</p>
      <p>XP: {{user['XP']}}</p>
    </div>
  </body>
</html>
```

---

## Main Page

Then I made a better main page, so I created the `index.html` page in the `templates` folder:
```html
<!DOCTYPE html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Myfe - Login</title>
  </head>
  <body>
      <h1>Myfe</h1>
      {% if error != False and error != None and error != "" %}
        <p>{{error}}</p>
      {% endif %}
    </div>
  </body>
</html>
```

After that, instead of the `index` function I had before for the route `/`, I replaced it with the one below:
```py
@app.route('/')
def index():
  return render_template("index.html", logged=getcookie("User"))
```

---

## Navigation Bar

After that, I wanted it to be able to render it's own navbar without me defining all the navbar link tags every time, so I created a `static` folder, in which I added a `script.js` file, which had the code below:
```js
function navbaredit(thelist){
  const elements = {
    home : '<a class="nav-link nav-link-ltr" href="/">Home</a>',
    login: '<a class="nav-link nav-link-ltr" href="/login">Login</a>',
    signup: '<a class="nav-link nav-link-ltr" href="/signup">Signup</a>',
    profile: '<a class="nav-link nav-link-ltr" href="/profile">Profile</a>',
    logout: '<a class="nav-link nav-link-ltr" href="/logout">Logout</a>'
  };
  var thenavbar = document.getElementsByClassName("navbar")[0]
  for (let i = 0; i < thelist.length; i++) {
    thenavbar.innerHTML = thenavbar.innerHTML + elements[thelist[i]];
  }
}
```

Now I wanted to link it to every HTML file, so first I made a url for the file so it was easy to access in the HTML file:
```py
from flask import send_file
@app.route("/script.js")
def scriptjs():
  return send_file("static/script.js")
```

Then I added the classes `header` (which contains the `h1` tag of the page), `navbar` (which has the navbar JS code) and `content` (which has the rest of the code) in each HTML file. Then I linked the `script.js` file to every HTML file 
eg:

```html
<!DOCTYPE html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Myfe - Login</title>
    <script src="/script.js"></script>
  </head>
  <body>
    <div class="header">
      <h1>Myfe</h1>
    </div>
    <div class="navbar">
    </div>
    <div class="content">
      {% if error != False and error != None and error != "" %}
        <p>{{error}}</p>
      {% endif %}
    </div>
  </body>
</html>
```

Finally to actually make the navbar work, I added the jinja code in a script tag which would change the navbar depending on if the user was logged in or not:
```html
      <script>
        {% if logged == False %}
          navbaredit(['home', 'signup', 'login'])
        {% else %}
          navbaredit(['home', 'profile', 'logout'])
        {% endif %}
      </script>
```

---

## Viewing my changes

After I ran all of that code, this was the output:

![code output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dugfdg6f7l9zzy5hjad7.png)

At least I made some change to the game!
You can view all the code together in a GitHub repo [here](https://github.com/VulcanWM/myfe)

Thanks for reading!