derechtenap / xeon-eoh Goto Github PK

As it is right now, the "Player" and "Enemys" Stats can not interact with each other.

To fix it, I would use Import / Export in order to communicate damage / health etc.

Future Refactor:
Make the architecture Object Oriented.

--> Player.js (Would be just a class prototype)
--> Enemy.js (Would also be just a class prototype)
--> Fight.js Instantiate Player and Enemy, and calls the different class functions

The Menu will use the index.html

Clickable Actions

• Start Game (Start a new game...)
• Load Save (Load pre-saved Settings e.g. per JSON or LocalStorage)
• Credits

Notes

• Left-sided Menu with buttons
• Top right corner -> Display News or maybe current loaded Profile...
• Bottom -> Version + Changelog etc.
• Maybe a button to exit the game (🤔) (Not necessary)

In order to write better code, I found this useful Guide. It is created by mdo which is working on the Bootstrap Framework.

Tasks

• Optimize the HTML syntax
• Optimize the SCSS files
• Setup an editor config

Currently, the cursor style changes with each click. Ideally, it should only change on an image click...

Images should not be draggable.

• Search for an solution
• Fix the issue
• Browser tests

1. Which file format should we use?

There are many possible options. Like XML or JSON. I personally would prefer JSON over XML. Since the syntax is pretty straight forward and it works with JavaScript. Are there any other good formats (Maybe YML)?

2. How to store the data?

As I mentioned in #17, I like the System which is used in The Elder Scrolls V: Skyrim. It used one base unit and adds some stronger variants trough the story and level progress.

I created a small example file (bandit.json), which stores two different bandit variants:

{
    "id": 1,
    "activ": false,
    "enemy": {
        "tier_one": {
            "name": "Bandit",
            "base_attack": 5,
            "base_hp": 100,
            "xp": 10,
            "weapon_pool": [
                "sword",
                "bow"
            ],
            "drop_pool": {
                "gold": {
                    "item_id": 1,
                    "percantage": 90,
                    "min_amount": 1,
                    "max_amount": 5
                }
            },
            "image": "<url>"
        },
        "tier_two": {
            "name": "<tier_two_name>",
            "base_attack": 7,
            "base_hp": 120,
            "xp": 15,
            "weapon_pool": [
                "sword",
                "bow"
            ],
            "drop_pool": {
                "gold": {
                    "item_id": 1,
                    "percantage": 90,
                    "min_amount": 1,
                    "max_amount": 5
                }
            },
            "image": "<url>"
        }
    }
}

We can update the placeholder images which are currently provided by placehold.it to our current self-made placeholders

Current situation

<!-- Updated code -->
<img id="enemyOne" src="../frontend/img/bandit.svg" alt="Enemy" draggable="false">

There are several possible improvements. I will research the SASS documentation for further information. The following list should be completed before finishing the next milestone.

• Add a small logo
• Specify better breakpoints
• Split the _global.scss into several files
• Optimise the Flex Grid system
• Add more utility classes

CSS Flex

• SCSS integration
• Row and cols
• Testing

TODO

• Create HTML markup
• Write SCSS Classes
• Find an Color scheme

We should drop our current code and work with Canvas. It is way easier to display units and other sprites onscreen.

• https://www.w3schools.com/graphics/canvas_intro.asp
• https://www.w3schools.com/graphics/game_canvas.asp
• https://www.w3schools.com/graphics/game_intro.asp

A minor bug in #9 broke the text-white class.

• Add listener to IMG
• When IMG clicked display damage delt
• Show enemy HP in console (On all stages)

In order to make the game more unique every level should has its own style. (Enemys, Difficulty, "Dungeon").

We need a way to store all those information to dynamically load this content onto the webpage.

Vision No. 1:

• General Idea:
  Make it a JSON-Object which itself can maybe be stored in a document-oriented database.

  Depending on which "level" the user clicked, load the specific object (--> POST-Arguments)

• What we need to store:
  Enemys:
  Health, Attack-Damage, Drops (or a drop table), XP, Sprites (per enemy)

  World-Info:
  Which background should be displayed.
  How many dungeons are there in this specific level.
  Did the user already played or beat the level. (Needed?)

• Get old fighting logic into current main
• Test to change UI-Elements (Gold, Health, Healthbars)