CODEWITHSUNDEEP
htmlsqlflask
EdCase
EdCase

Reputation: 119

Creating a user editable form using flask and SQLite

I am creating an online charactersheet for my homebrew tabletop RPG, and have taken some time creating the Character sheet. It displays all of the statistics of the character. I am using Flask and SQLite.

However, during actual gameplay, the character's statistics will usually change. I would like the user to be able to change the relevant statistic (xp, level, hit points etc) in the character sheet, and then save it back to the SQL database. Can this be done? how?

This is a snippet from the flask code I am using in the backend to display the character sheet.

@app.route("/<int:character_id>")
@login_required
def character_sheet(character_id):

    characters = db.execute(
        """SELECT
            *
        FROM
            characters
        WHERE
            id = :id AND
            user_id = :user_id
        """,
        id = character_id,
        user_id = session ["user_id"],
    )

    if not characters:
        return abort(404)
    
    

    return render_template("character_sheet.html", character=characters[0])

And this is a part of the character sheet HTML.

{% extends "main.html" %}

{% block title %}
    Character Sheet
{% endblock %}

{% block main %}
      <div class="container-fluid">
        <div class="row">
          <div class="col"><h3>Basic Information</h3></div>
        </div>
        <div class="row">
          <div class="col border border-dark">Name</div>
          <div class="col border border-dark"><p class="written">{{ character.name }}</p></div>
          <div class="col border border-dark">Race</div>
          <div class="col border border-dark"><p class="written">{{ character.race }}</p></div>
        </div>
        <div class="row">
          <div class="col border border-dark">Class</div>
          <div class="col border border-dark"><p class="written">{{ character.cha_class }}</p></div>
          <div class="col border border-dark">Level</div>
          <div class="col border border-dark"><p class="big-written">{{ character.level }}</p></div>
          <div class="col border border-dark">Current Exp</div>
          <div class="col border border-dark"><p class="written">{{ character.experience }}</p></div>
          <div class="col border border-dark">Alignment</div>
          <div class="col border border-dark"><p class="written">{{ character.alignment_lc }}{{ character.alignment_ge }}</p></div>
        </div>
        <div class="row">
          <div class="col border border-dark">Height</div>
          <div class="col border border-dark"><p class="written">{{ character.height }}</p></div>
          <div class="col border border-dark">Weight</div>
          <div class="col border border-dark"><p class="written">{{ character.weight }}</p></div>
          <div class="col border border-dark">Eye Colour</div>
          <div class="col border border-dark"><p class="written">{{ character.eye_colour }}</p></div>
          <div class="col border border-dark"> Hair Colour</div>
          <div class="col border border-dark"><p class="written">{{ character.hair_colour }}</p></div>
        </div>
        <div class="row">
          <div class="col border border-dark">Sex</div>
          <div class="col border border-dark"><p class="written">{{ character.sex }}</p></div>
          <div class="col border border-dark">Age</div>
          <div class="col border border-dark"><p class="written">{{ character.age }}</p></div>
          <div class="col border border-dark">Handedness</div>
          <div class="col border border-dark"><p class="written">{{ character.handedness }}</p></div>
        </div>

Upvotes: 0

Views: 78

Answers (1)

George Efthymiou
George Efthymiou

Reputation: 126

Without pointing some logical mistakes, just use rest and javascript. Rest (on server side) can serve data (also receive data). For client side, javascript can receive data (also send) and change accordantly the preview. Also use divide-and-conquer logic. For example, use different api to serve character data. If you want some more points, leave comment.

Upvotes: 1

Related Questions