eureka

%%html
<head>
    <title> eureka </title>
</head>
<body>
    <h1> game game gmae</h1>
    <br>
    <ul>
        <li> look check out this insane video!</li>
    </ul>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/yP5DKzriqXA?si=9CnD-_rujbD9BFKD" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
    <p style="color:pink"> did you see my insane iframe video tag skills also check out these crazyyyyy javascript ideals and learning and knowing</p>
</body>

game game gmae

did you see my insane iframe video tag skills also check out these crazyyyyy javascript ideals and learning and knowing

%%html
<head>
    <title> wowee!</title>
    <style>
        .first {
            color: red,
            font-size: 40px,
        }
        .second {
            color: orange,
            font-size: 30px,
        }
        .third {
            color: yellow,
            font-size: 20px,
        }
        .fourth {
            color: green,
            font-size: 10px,
        }
        .fifth {
            color: blue,
            font-size: 5px,
        }
    </style>
</head>
<body>
   <p>
    we learned basic html and styling in css which i will demonstrate here in a beautfiul rainbow please observe.

    Okay nvm its not working and i dont know why but you understand the intent i had yes.
   </p>
   <div class ="first">
    <h1> hi</h1>
   </div>
   <div class = "second">
    <h2> hi</h2>
   </div>
   <div class = "third">
    <h3> hi </h3>
   </div>
   <div class = "fourth">
    <h4> hi </h4>
   </div>
   <div class = "fifth">
    <h5> hi </h5>
   </div>
</body>

we learned basic html and styling in css which i will demonstrate here in a beautfiul rainbow please observe.

%%html

<head>
    <title> lets get down to business to defeat the huns</title>
</head>

<body>
    <h1> Here are some things I did that made it in the code (and some that didnt)</h1>
    <p> so here we have a class for flamebreath. i worked on the powers mostly, but andrew did the bulk of it. I started working on the healthbar and losing hp but the code was broken at this point so i gave up.</p>
    <p> here is the code</p>

    <script>
        const attacks = { // we are making a constant variable here, bc attacks stay constant hurray
    WingSlap: {
        name: 'WingSlap',
        damage: 15,
        type: "Normal",
        color: 'black'
    },
    FlameBreath: {
        name: 'FlameBreath', //look i did some of this one, it's the constructors and whatever defines the class
        damage: 25,
        type: "Fire",
        color: "red"
    }
}
    </script>
    <br>
    <br>
    <br>
    <p> ngl i kinda worked on liek the review ticket and the readme bc i didnt wanna code and nobody watned to do the readme. im not suprirsed it sucked. oh but check out this crazyyyy sprite (that didnt get included also did you know coding is CASE SENSITIVE SO WE NEED TO SPELL OUR THINGS RIGHT THANK YOU.)</p> 
</body>

Here are some things I did that made it in the code (and some that didnt)

so here we have a class for flamebreath. i worked on the powers mostly, but andrew did the bulk of it. I started working on the healthbar and losing hp but the code was broken at this point so i gave up.

ngl i kinda worked on liek the review ticket and the readme bc i didnt wanna code and nobody watned to do the readme. im not suprirsed it sucked. oh but check out this crazyyyy sprite (that didnt get included)

%%html
<head>
    <title> gsap and co</title>
</head>
<body>
    <p>
        I mostly did the ending poriton (haha) and transitioning the entire battle portion to the main game. gsap is a third party thingy that makes animations for javascript. it was specifically utilized to animate our battles back to the main screen and vice versa.
    </p>
    <img src = "https://repository-images.githubusercontent.com/5905330/b77da600-0330-11ea-965b-ec11bc9d0759" alt = "gsap so heroic"> </img>
    <br>
    <br>
    <p> but it also utilized classes and functions! lots of functions! I cant explain what all of them do exactly but i have a gist. so please dont ask me to explain bc i understood it at the time and now i forogt. the javascript code is here:</p>
</body>

I mostly did the ending poriton (haha) and transitioning the entire battle portion to the main game. gsap is a third party thingy that makes animations for javascript. it was specifically utilized to animate our battles back to the main screen and vice versa.

but it also utilized classes and functions! lots of functions! I cant explain what all of them do exactly but i have a gist. so please dont ask me to explain bc i understood it at the time and now i forogt. the javascript code is here:

<script>
shroomy = new Monster(monsters.Shroomy)
  dracogon = new Monster(monsters.Dracogon)
  renderedSprites = [shroomy, dracogon]
  queue = []

  dracogon.attacks.forEach((attack) => {
    const button = document.createElement('button') 
    button.innerHTML = attack.name
    document.querySelector('#attacksBox').append(button)
  })
  //our event listeners for our buttons (attack)
document.querySelectorAll('button').forEach((button) => {
  button.addEventListener('click', (e) => {
  const selectedAttack = attacks[e.currentTarget.innerHTML]
    dracogon.attack({ 
      attack: selectedAttack,
    recipient: shroomy,
    renderedSprites
  })

  if(shroomy.health <= 0){
    queue.push(() => {
     shroomy.faint()
  })
  queue.push(() => {
    // fade back to black budad buda buda bum
    gsap.to('#overlappingDiv', {
      opacity: 1,
      onComplete: () => {
        cancelAnimationFrame(battleAnimationId)
        animate()
        document.querySelector('#userInterface').style.display = "none"
        gsap.to('#overlappingDiv', {
          opacity: 0
        })

        battle.initiated = false
      }
    })
  })
  }
  //shroomy or enemy attacks here
  const randomAttack =
  shroomy.attacks[Math.floor(Math.random() * shroomy.attacks.length)]
  
  queue.push(() => {
    shroomy.attack({ 
    attack: randomAttack,
    recipient: dracogon,
    renderedSprites
  })

  if(dracogon.health <= 0) {
    queue.push(() => {
      dracogon.faint()
    })
    queue.push(() => {
      // fade back to black budad buda buda bum
      gsap.to('#overlappingDiv', {
        opacity: 1,
        onComplete: () => {
          cancelAnimationFrame(battleAnimationId)
          animate()
          document.querySelector('#userInterface').style.display = "none"
          gsap.to('#overlappingDiv', {
            opacity: 0
          })

          battle.initiated = false
        }
      })
    })
  }
})
})
button.addEventListener('mouseenter', (e) => {
const selectedAttack = attacks[e.currentTarget.innerHTML]
document.querySelector('#attackType').innerHTML = selectedAttack.type
document.querySelector('#attackType').style.color = selectedAttack.color
console.log('go')

}) 

})
}

function animateBattle() {
  battleAnimationId = window.requestAnimationFrame(animateBattle)
  battleBackground.draw()
 
  renderedSprites.forEach((sprite) => {
    sprite.draw()
  })
}
</script>

  Cell In[7], line 86
    }
    ^
SyntaxError: unmatched '}'

%%html
<head>
    <title> hi hello </title>
</head>

<body>
    <h1> would you believe the problems i faced. the ADVERSITIES? THE STRUGGLES?</h1>
    <p> anyway i adapted improvised overcame like bear grylls the man the myth told me to. problmes we faced was mostly case sensitive things, like adding the wrong path to our png and also like misspelling half of the things we shouldve (ahaha initibattle and dracogon and capitalization) the lesson here is that it's great if we can have some friends along the way to help us out with our typos. MAYBE THE GAME WAS THE FRIENDS WE MADE ALONG THE WAY. i learned lots about classes and cooperatino and how annoying sophia can be sometimes but i have nochocie bc she admittedly did some of the code i guess. anynway next time i will strive to be a better coder. </p>
</body>

would you believe the problems i faced. the ADVERSITIES? THE STRUGGLES?

anyway i adapted improvised overcame like bear grylls the man the myth told me to. problmes we faced was mostly case sensitive things, like adding the wrong path to our png and also like misspelling half of the things we shouldve (ahaha initibattle and dracogon and capitalization) the lesson here is that it's great if we can have some friends along the way to help us out with our typos. MAYBE THE GAME WAS THE FRIENDS WE MADE ALONG THE WAY. i learned lots about classes and cooperatino and how annoying sophia can be sometimes but i have nochocie bc she admittedly did some of the code i guess. anynway next time i will strive to be a better coder.

%%html

<head>
    <title> ... so what</title>
    <style>
        h1 {
            color: red
        }
    </style>
</head>
<body>
    <h1> i love learning</h1>
    <p> so i google searched some html code and css and died while making this blog. the game was all js and this lovely guy was teaching me how to do the entire thing and it was lowk so liberating having a guy actually teach i loved that fr fr it is truly a moving experience to have someone explain what theyre doing. no foul tho. xoxo loved this class (?!) next time i wil  improve my javascript understandbing bc i did work a lot on html andcss this time but i think i should actually do javascript even though it is  alittl eocnufsing and a game was defintiely not the best way to get us to learn javascript.</p>
</body>

i love learning

so i google searched some html code and css and died while making this blog. the game was all js and this lovely guy was teaching me how to do the entire thing and it was lowk so liberating having a guy actually teach i loved that fr fr it is truly a moving experience to have someone explain what theyre doing. no foul tho. xoxo loved this class (?!) next time i wil improve my javascript understandbing bc i did work a lot on html andcss this time but i think i should actually do javascript even though it is alittl eocnufsing and a game was defintiely not the best way to get us to learn javascript.