Managers, Sprites, Scenes - A conceptual question

[Senfgurke]

Hi there!
So I'm trying to write my own Card based Battlesystem and I'm having a conceptual problem that occured when I was trying to display my cards as sprites.

The thing is:
I have my custom CardBattleManager, which handles all the logic that happens in the battle. It sets up my deck, it draws cards, and should later be used to trigger certain skills when a card is used.

I then also have a custom Card_Battle_Scene which should hold all the UI and therefore all the card sprites.

My question is:
How do I get the Manager to interact with the Scene? The Manager draws my cards and then they should be displayed in the Scene as my hand of cards.
Or is it conceptually unwise to let the manager "talk" to the scene directly?
How do I get a hold of the current Scene-Object or what is the best way to accomplish this?

Any help would be appreciated.

My CardBattleManager:

    //-----------------------------------------------------------------------------
    // CardBattleManager
    //
    // This replaces the BattleManager.

    var deck = [];
    var discardPile = [];
    var hand = [];

    function CardBattleManager() {
        throw new Error('This is a static class');
    }

    CardBattleManager.setup = function(){
        deck = this.createDeck();
        deck = this.shuffleDeck(deck);
    }

    CardBattleManager.startBattle = function() {
        console.log("deck",deck);
        this.drawCards(5);
        console.log("hand",hand);

    };

    //Returns the complete deck generated by the current party and their equipment.
    CardBattleManager.createDeck = function(){
        tempDeck = [];
        var actorIDs = $gameParty._actors;
        actorIDs.forEach(actorID => {
           var actorCards = this.getCardsFromEquipment($gameActors.actor(actorID));
           tempDeck = tempDeck.concat(actorCards);
        });
        return tempDeck;
    }

    CardBattleManager.shuffleDeck = function(p_deck) {
        var tempDeck = p_deck;
        var j, x, i;
        for (i = tempDeck.length - 1; i > 0; i--) {
            j = Math.floor(Math.random() * (i + 1));
            x = deck[i];
            tempDeck[i] = tempDeck[j];
            tempDeck[j] = x;
        }
        return tempDeck;
    }

    CardBattleManager.drawCards = function(p_amount){
        var amount = p_amount;
        for(i = 0; i<amount; i++){
            if(deck.length > 0){
                var card = deck.pop();
                hand.push(card);
                this.updateHandCardPositions();
                
            }
            
        }

    }

    CardBattleManager.updateHandCardPositions = function(){
        for(j=0;j<hand.length;j++){
            console.log(hand[j]);
            var card = hand[j];
            var cardSprite = card._sprite;
            cardSprite.x = Graphics.width/hand.length+i*cardSprite.width;
            cardSprite.y = Graphics.height/2;
            console.log("cardSprite",cardSprite);
            console.log("x", cardSprite.x);
            console.log("y",cardSprite.y);
        }
      
    }

    //Extracts the Cards from the equipment of an actor
    //If the note tag of an equipment contains e.g. "<cards: 1,2,3>", the card with the indices 1,2 and 3 will be returned in an array.
    CardBattleManager.getCardsFromEquipment = function(p_actor){
        var actor = p_actor;
        var equipment = actor._equips;
        var actorCards = [];
        equipment.forEach(element => {
            var note = "";
            var equipmentCards = [];
            if(element._itemId > 0){ // check if it's not an empty item
                switch (element._dataClass) {
                    case "weapon":
                        note = $dataWeapons[element._itemId].note;
                        break;
                    case "armor":
                        note = $dataArmors[element._itemId].note;
                        break;
                }
            }
            if(note){
                var slicedStrings = /<\s*cards\s*:\s*.*\s*>/ig.exec(note)[0].split(",");
                var extractedNumberString = "";
                slicedStrings.forEach(str => {
                    extractedNumberString = str.match(/\d+/)[0];
                    if(extractedNumberString){
                        var cardFromString = new Card(parseInt(extractedNumberString));
                        //cardFromString._sprite = Scene_Card_Battle._spriteset.createCard(extractedNumberString);
                        equipmentCards.push(cardFromString);
                    }
            })
            actorCards = actorCards.concat(equipmentCards);
            }
        });
        return actorCards;

    }

My Scene_Card_Battle:

 //-----------------------------------------------------------------------------
    // Scene_Card_Battle
    //
    // This replaces the Scene_Battle with the custom scene for the card battle system.
    function Scene_Card_Battle() {
        this.initialize.apply(this, arguments);
    }

    Scene_Card_Battle.prototype = Object.create(Scene_Battle.prototype);
    Scene_Card_Battle.prototype.constructor = Scene_Card_Battle;

    Scene_Card_Battle.prototype.initialize = function() {
    Scene_Base.prototype.initialize.call(this);
    };

    Scene_Card_Battle.prototype.create = function() {
        Scene_Base.prototype.create.call(this);
        this.createDisplayObjects();
    };

    Scene_Card_Battle.prototype.start = function() {
        Scene_Base.prototype.start.call(this);
        this.startFadeIn(this.fadeSpeed(), false);
        BattleManager.playBattleBgm();
        CardBattleManager.setup();
        CardBattleManager.startBattle();
    };
    
    Scene_Card_Battle.prototype.update = function() {
        var active = this.isActive();
        $gameTimer.update(active);
        $gameScreen.update();
        // this.updateStatusWindow();
        // this.updateWindowPositions();
        // if (active && !this.isBusy()) {
        //     this.updateBattleProcess();
        // }
        Scene_Base.prototype.update.call(this);
    };

    Scene_Card_Battle.prototype.createDisplayObjects = function() {
        this.createSpriteset();
        //this.createWindowLayer();
        // this.createAllWindows();
        // BattleManager.setLogWindow(this._logWindow);
        // BattleManager.setStatusWindow(this._statusWindow);
        // BattleManager.setSpriteset(this._spriteset);
        // this._logWindow.setSpriteset(this._spriteset);
    };

    Scene_Card_Battle.prototype.createSpriteset = function() {
        this._spriteset = new Spriteset_Battle();
        this.addChild(this._spriteset);
    };

My Spriteset_Battle Extension:

    //-----------------------------------------------------------------------------
    // Custom Extension of the Spriteset_Battle class.
    //
    var _spriteset_Battle_prototype_createLowerLayer = Spriteset_Battle.prototype.createLowerLayer;
    Spriteset_Battle.prototype.createLowerLayer = function() {
        _spriteset_Battle_prototype_createLowerLayer.call(this);
    };

    Spriteset_Battle.prototype.createCard = function(p_cardId){
        var cardId = p_cardId;
        var card = new Sprite_Card(String(cardId));
        return card;
    }

 

[Poryg]

The current scene is SceneManager._scene. This way the battle manager can interact with it.

 

[Senfgurke]

@Poryg I got my cards displayed! Thank you! <3

 

[Felski]

I think it would be conceptual not good to have the manager talk to the scene. You defined the manager as a static class, so you can always call the manager from the scene and just get whatever infos you need. That way you also seperate the UI from the mechanics.