gestione del log della battaglia

Cristiano Magro

2024-12-27 efa2e3cc901d8e30d9c2f0e58201d2f5addc9786

gestione del log della battaglia

 04 - monster slayer game/prj-monster-01-starting-setup/app.js

@@ -9,6 +9,7 @@
      monsterHealth: 100,
      currentRound: 0,
      winner: null,
      logMessages: [],
    };
  },
  computed: {
@@ -50,21 +51,25 @@
      this.monsterHealth = 100;
      this.currentRound = 0;
      this.winner = null;
      this.logMessages = [];
    },
    attackMonster() {
      this.currentRound++;
      const attackValue = getRandomValue(5, 12);
      this.monsterHealth -= attackValue;
      this.addLogMessage('player', 'attack', attackValue);
      this.attackPlayer();
    },
    attackPlayer() {
      const attackValue = getRandomValue(8, 15);
      this.playerHealth -= attackValue;
      this.addLogMessage('monster', 'attack', attackValue);
    },
    specialAttackMonster() {
      this.currentRound++;
      const attackValue = getRandomValue(10, 20);
      this.monsterHealth -= attackValue;
      this.addLogMessage('player', 'attack Sp', attackValue);
      this.attackPlayer();
    },
    healPlayer() {
@@ -75,11 +80,19 @@
      } else {
        this.playerHealth += healValue;
      }
      this.addLogMessage('player', 'heal', healValue);
      this.attackPlayer();
    },
    surrender(){
        this.winner = 'monster';
    }
    surrender() {
      this.winner = "monster";
    },
    addLogMessage(who, whath, value) {
        this.logMessages.unshift({
            actionBy: who,
            actionType: whath,
            actionValue: value
        });
    },
  },
});


 04 - monster slayer game/prj-monster-01-starting-setup/index.html

@@ -46,7 +46,18 @@
      </section>
      <section id="log" class="container">
        <h2>Battle Log</h2>
        <ul></ul>
        <ul>
          <li v-for="logMessage in logMessages">
            <span :class="{'log--player': logMessage.actionBy === 'player' , 'log--monster': logMessage.actionBy === 'monster'}"
              >{{logMessage.actionBy === 'player' ? "Player" : 'Monster'}}
            </span>
            <span v-if="logMessage.actionType === 'heal'"
              > heal himself for <span class="log--heal">{{logMessage.actionValue}} </span>
            </span>
            <span v-else>
              attacks and deals <span class="log--damage">{{logMessage.actionValue}}</span></span>
          </li>
        </ul>
      </section>
    </div>
  </body>