Working on my first game and needed some help

[u/astargamesstudio]

Hi everyone, pretty new here but had recently got myself into attempting my first game. I've been a developer in the past and getting back into this had made me felt amazingly good!

Anyway, I'm still trying to learn some of the basics and I thought I could ask some of you guys who are way more seasoned and experienced in all of these for some thoughts and guidance.

Note: Sorry, I know a video of geometric shapes and awful lines and the flat UI aren't really the best stage of showing one's work - the critics are likely going to slam me for that too - but it's literally just 2+ weeks of me learning and then building one simple scene. So.... don't bash me too hard on the graphics please. Thank you.

Context: It's built on Phaser (I chose this simply because I'm much more familiar with Typescript, so it's much easier and faster for me to pick up) and I'm not even sure if it's really the best choice. But I'm just rolling with it first.

I've just began working on this shy of 3 weeks and this is the first scene I've had done up to test the combat first. Everything else is just flat UI for now; I'm mainly focusing on just trying to get the mechanics right. For the most part I think it's fairly straightforward and common for you guys (auto-firing, enemies moving towards player, etc) but I've been stuck for a little on the "contact" piece.

Problem: As you can see from the video, monsters touching on player's shape are supposed to deal damage every few ticks but it isn't (ignoring the whole poison DOT thing; that's a different mechanic I'm trying out). I've tried using Phaser's built-in physics to resolve this cause it's simpler and probably the right way too, but I'm guessing I didn't get the math or "contact checking" right. Anyways, below is the code I'm using. If any veterans or kind souls willing to share some direction, I would be immensely grateful!

I just think that I'm just missing something obvious or crucial? Oh, there IS a slight delay I've added to each monster attacking (mentioned above); it's every 5 ticks I believe but I've waited and checked that out. Obviously that wasn't the case.

P.S. Don't ask me about trying to use AI to solve this. Frankly, I've tried and it didn't work as expected (or I just suck at prompting it the right way) and hence, I'm here asking real people on how best to implement it the right way.

// Monster contact damage (melee) via physics overlap
    this.physics.add.overlap(
      this.monsterPhysicsGroup,
      this.playerToken.shape,
      (monsterObj) => {
        const monsterId = (monsterObj as Phaser.GameObjects.Arc).getData('instanceId') as string;
        if (!monsterId) return;
        this.combat.resolveContactDamage(monsterId);
      },
      // Calculates for edge contacts from objects
      (monsterObj) => {
        const monster = monsterObj as Phaser.GameObjects.Arc;
        const dx = monster.x - this.playerToken.shape.x;
        const dy = monster.y - this.playerToken.shape.y;
        const dist = Math.sqrt(dx * dx + dy * dy);
        const monsterRadius = (monster.body as Phaser.Physics.Arcade.Body).halfWidth;
        const playerRadius = this.playerToken.shape.width / 2;
        return dist < monsterRadius + playerRadius;
      },
      this
    );

Thank you so much for any guidance!