From 14d3b7506e22b870dd5af6c25dc6d2ff257e8a34 Mon Sep 17 00:00:00 2001 From: 0ceanSlim Date: Tue, 30 Jan 2024 11:06:00 -0500 Subject: [PATCH] first commit --- LICENSE | 21 ++ app.py | 95 ++++++ readme.md | 72 +++++ requirements.txt | 1 + static/data/monsters.db | Bin 0 -> 65536 bytes static/js/index.js | 67 ++++ static/style/input.css | 5 + static/style/output.css | 554 ++++++++++++++++++++++++++++++++ static/style/readme.md | 11 + static/style/tailwind.config.js | 9 + templates/index.html | 30 ++ templates/monsters.html | 40 +++ 12 files changed, 905 insertions(+) create mode 100644 LICENSE create mode 100644 app.py create mode 100644 readme.md create mode 100644 requirements.txt create mode 100644 static/data/monsters.db create mode 100644 static/js/index.js create mode 100644 static/style/input.css create mode 100644 static/style/output.css create mode 100644 static/style/readme.md create mode 100644 static/style/tailwind.config.js create mode 100644 templates/index.html create mode 100644 templates/monsters.html diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..69a955a --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) [2024] [OceanSlim] + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/app.py b/app.py new file mode 100644 index 0000000..41af75e --- /dev/null +++ b/app.py @@ -0,0 +1,95 @@ +from flask import Flask, render_template, g, abort, request, jsonify +import sqlite3 + +app = Flask(__name__) + +DATABASE = 'static/data/monsters.db' + +def connect_db(): + return sqlite3.connect(DATABASE) + +@app.before_request +def before_request(): + g.db = connect_db() + +@app.teardown_request +def teardown_request(exception): + if hasattr(g, 'db'): + g.db.close() + +@app.route("/") +def show_index(): + return render_template("index.html") + +@app.route('/get_families') +def get_families(): + cursor = g.db.cursor() + cursor.execute('SELECT DISTINCT name FROM families') + families = [row[0] for row in cursor.fetchall()] + return jsonify(families) + +@app.route('/get_monsters') +def get_monsters(): + selected_family = request.args.get('family') + cursor = g.db.cursor() + + if selected_family: + cursor.execute(''' + SELECT name FROM monsters + WHERE family_id = (SELECT id FROM families WHERE name = ?) + ''', (selected_family,)) + else: + cursor.execute('SELECT DISTINCT name FROM monsters') + + monsters = [row[0] for row in cursor.fetchall()] + return jsonify(monsters) + +@app.route('/monster/') +def monster_info(monster_name): + cursor = g.db.cursor() + + # Retrieve monster information from the database based on name + cursor.execute(''' + SELECT + monsters.id, monsters.name, families.name AS family, monsters.in_story, + monsters.agl, monsters.int, monsters.maxlvl, monsters.atk, monsters.mp, + monsters.exp, monsters.hp, monsters.def + FROM + monsters + JOIN families ON monsters.family_id = families.id + WHERE + monsters.name = ? + ''', (monster_name,)) + + monster_info = cursor.fetchone() + + if monster_info is None: + abort(404) + + # Retrieve skills for the monster + cursor.execute('SELECT skill FROM skills WHERE monster_id = ?', (monster_info[0],)) + skills = [row[0] for row in cursor.fetchall()] + + # Retrieve spawn locations for the monster + cursor.execute('SELECT map, description FROM spawn_locations WHERE monster_id = ?', (monster_info[0],)) + spawn_locations = [{'map': row[0], 'description': row[1]} for row in cursor.fetchall()] + + return render_template('monsters.html', monster={ + 'id': monster_info[0], + 'name': monster_info[1], + 'family': monster_info[2], + 'in_story': 'Yes' if monster_info[3] else 'No', + 'agl': monster_info[4], + 'int': monster_info[5], + 'maxlvl': monster_info[6], + 'atk': monster_info[7], + 'mp': monster_info[8], + 'exp': monster_info[9], + 'hp': monster_info[10], + 'def': monster_info[11], + 'skills': skills, + 'spawn_locations': spawn_locations + }) + +if __name__ == '__main__': + app.run(debug=True) diff --git a/readme.md b/readme.md new file mode 100644 index 0000000..3d609b8 --- /dev/null +++ b/readme.md @@ -0,0 +1,72 @@ +# Dragon Warrior Monsters 2 App + +## Overview + +This Flask app is designed to use data from Dragon Warrior Monsters 2 to create an intuitive web UI. The app allows users to lookup monster information, and eventually breeding pairs and skills. Inspired by the [dwm2-tools](https://github.com/MetroWind/dwm2-tools) project. + +## Features + +- Efficiently parse and display Dragon Warrior Monsters 2 game data. +- Simple and accessible codebase for developers with basic web skills. +- Fast development with Flask, allowing real-time changes while running. +- Seamless integration with SQLite database for scalability. +- Designer friendly Tailwind Styling + +## Setup Instructions + +### Prerequisites + +- [Python](https://www.python.org/downloads/) +- [Tailwind CSS](https://github.com/tailwindlabs/tailwindcss/releases/latest) + +### Installation + +1. Clone the repository: + + ```bash + git clone https://github.com/0ceanslim/dwm2-app.git + cd dwm2-app + ``` +2. Install dependencies: + + ```bash + pip install -r requirements.txt + ``` +3. Run the Flask app: + + ```bash + python app.py + ``` + +4. Open your browser and navigate to http://127.0.0.1:5000/. + + +### Tailwind CSS +To rebuild the styles when making changes, use: + +```bash +tailwindcss -i static/style/input.css -o static/style/output.css --watch +``` + +## Development +Contributions and pull requests are welcome! + +Fork the repository. +Create a new branch for your feature or bug fix. +Submit a pull request. + +## To-Do List +- Add sprites for monsters. +- Enhance styling for a more polished appearance. +- Integrate a skills database with detailed descriptions. + +### Future Enhancements +Discuss any planned features or enhancements for future development. + +## License + +This repository is provided under the MIT License. Feel free to use, modify, and distribute these scripts as needed. Contributions and improvements are welcome. ❤️ +See the [LICENSE](LICENSE) file for details. + +Acknowledgments +Special thanks to dwm2-tools for inspiration. \ No newline at end of file diff --git a/requirements.txt b/requirements.txt new file mode 100644 index 0000000..8ab6294 --- /dev/null +++ b/requirements.txt @@ -0,0 +1 @@ +flask \ No newline at end of file diff --git a/static/data/monsters.db b/static/data/monsters.db new file mode 100644 index 0000000000000000000000000000000000000000..ca7d0dd345ad4cf6b3b4397080576f408e11fe6d GIT binary patch literal 65536 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 response.json()) + .then(data => { + populateDropdown(familyDropdown, data); + updateMonstersDropdown(); + updateIframe(); + }) + .catch(error => console.error("Error fetching families:", error)); + + familyDropdown.addEventListener("change", function () { + updateMonstersDropdown(); + updateIframe(); + }); + + monsterDropdown.addEventListener("change", function () { + updateIframe(); + }); + + function populateDropdown(dropdown, data) { + // Clear existing options + dropdown.innerHTML = ''; + + // Populate dropdown options + data.forEach(item => { + const option = document.createElement("option"); + option.value = item; + option.text = item; + dropdown.appendChild(option); + }); + } + + function updateMonstersDropdown() { + const selectedFamily = familyDropdown.value; + + // Fetch monsters data from the server based on the selected family + fetch(`/get_monsters?family=${selectedFamily}`) + .then(response => response.json()) + .then(data => populateDropdown(monsterDropdown, data)) + .catch(error => console.error("Error fetching monsters:", error)); + } + + function updateIframe() { + const selectedFamily = familyDropdown.value; + const selectedMonster = monsterDropdown.value; + + // Update iframe src based on selected family and monster + const iframeSrc = selectedMonster + ? `/monster/${selectedMonster}` + : selectedFamily + ? `/monster/${selectedFamily}` + : "about:blank"; + + iframe.src = iframeSrc; + } +}); diff --git a/static/style/input.css b/static/style/input.css new file mode 100644 index 0000000..598cc07 --- /dev/null +++ b/static/style/input.css @@ -0,0 +1,5 @@ +@config "tailwind.config.js"; + +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/static/style/output.css b/static/style/output.css new file mode 100644 index 0000000..374b9ac --- /dev/null +++ b/static/style/output.css @@ -0,0 +1,554 @@ +/* +! tailwindcss v3.3.6 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +*/ + +html { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font-family by default. +2. Use the user's configured `mono` font-feature-settings by default. +3. Use the user's configured `mono` font-variation-settings by default. +4. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-feature-settings: normal; + /* 2 */ + font-variation-settings: normal; + /* 3 */ + font-size: 1em; + /* 4 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +[type='button'], +[type='reset'], +[type='submit'] { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden] { + display: none; +} + +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} + +.static { + position: static; +} + +.font-bold { + font-weight: 700; +} + +.text-blue-500 { + --tw-text-opacity: 1; + color: rgb(59 130 246 / var(--tw-text-opacity)); +} diff --git a/static/style/readme.md b/static/style/readme.md new file mode 100644 index 0000000..95e7eb5 --- /dev/null +++ b/static/style/readme.md @@ -0,0 +1,11 @@ +# Development + +For Tailwind to Rebuild the Output CSS, a watcher must be run to compile the new styling as pages are edited. + +To do this run: + +```bash +tailwindcss -i static/style/input.css -o static/style/output.css --watch +``` + +You must be in the `app` directory \ No newline at end of file diff --git a/static/style/tailwind.config.js b/static/style/tailwind.config.js new file mode 100644 index 0000000..edd33e2 --- /dev/null +++ b/static/style/tailwind.config.js @@ -0,0 +1,9 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ["./**/*.{html,js}"], + theme: { + extend: {}, + }, + plugins: [], +} + diff --git a/templates/index.html b/templates/index.html new file mode 100644 index 0000000..175523e --- /dev/null +++ b/templates/index.html @@ -0,0 +1,30 @@ + + + + + + DWM APP + + + + +

Welcome to the Dragon Warrior Monsters 2 App

+ +
+

Filter list by monster family
+ Display monster stats in embed below

+ + + + + + + + +
+ + diff --git a/templates/monsters.html b/templates/monsters.html new file mode 100644 index 0000000..1dff8aa --- /dev/null +++ b/templates/monsters.html @@ -0,0 +1,40 @@ + + + + + + Monster Information + + + +

Monster Information

+
+

{{ monster.name }}

+

Family: {{ monster.family }}

+

In Story: {{ monster.in_story }}

+

Stats:

+
    +
  • AGL: {{ monster.agl }}
    • +
  • INT: {{ monster.int }}
    • +
  • Max Level: {{ monster.maxlvl }}
    • +
  • ATK: {{ monster.atk }}
    • +
  • MP: {{ monster.mp }}
    • +
  • EXP: {{ monster.exp }}
    • +
  • HP: {{ monster.hp }}
    • +
  • DEF: {{ monster.def }}
    • +
+

Skills:

+
    + {% for skill in monster.skills %} +
  • {{ skill }}
    • + {% endfor %} +
+

Spawn Locations:

+
    + {% for location in monster.spawn_locations %} +
  • {{ location.map }} - {{ location.description }}
    • + {% endfor %} +
+
+ +