corso vuejs
blame | history | patch | commit | commitdiff | ignore whitespace
Cristiano Magro
2024-12-26 8c672a568ad096f28d4c3a2ba95b01ecc30cc3ce 
 04 - monster slayer game/prj-monster-01-starting-setup/index.html


@@ -9,7 +9,7 @@


      rel="stylesheet"


    />


    <link rel="stylesheet" href="styles.css" />


    <script src="https://unpkg.com/vue@next" defer></script>


    <script src="https://unpkg.com/vue@3.4.9/dist/vue.global.js"></script>


    <script src="app.js" defer></script>


  </head>


  <body>


@@ -20,17 +20,23 @@


      <section id="monster" class="container">


        <h2>Monster Health</h2>


        <div class="healthbar">


          <div class="healthbar__value"></div>


          <div


            class="healthbar__value"


            :style="monsterBarStyle"


          ></div>


        </div>


      </section>


      <section id="player" class="container">


        <h2>Your Health</h2>


        <div class="healthbar">


          <div class="healthbar__value"></div>


          <div


            class="healthbar__value"


            :style="playerBarStyle"


          ></div>


        </div>


      </section>


      <section id="controls">


        <button>ATTACK</button>


        <button @click="attackMonster">ATTACK</button>


        <button>SPECIAL ATTACK</button>


        <button>HEAL</button>


        <button>SURRENDER</button>