markbrown4/dnd.html

## dnd.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style media="screen">
@font-face {
  font-family: "San Francisco";
  font-weight: 200;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-thin-webfont.woff");
}

@font-face {
  font-family: "San Francisco";
  font-weight: 400;
  src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
}

body {
  font-family: "San Francisco";
  font-size: 14px;
  font-weight: 200;
  line-height: 1;
  margin: 50px 30px;
}

h4 { font-size: 1.2em; font-weight: 400; }

button {
  color: #fff;
  background-color: #000;
  cursor: pointer;
  display: inline-block;
  width: 150px;
  height: 40px;
  border: 2px solid #000;
  font-size: 12px;
  text-transform: uppercase;
  transition: all 0.2s ease;
}

button:disabled {
  background-color: #eee;
  border: 2px solid #eee;
}

.d-f { display: flex; }

.jc-sb { justify-content: space-between; }

.jc-sa { justify-content: space-around; }

.tt-u { text-transform: uppercase; }

.ta-c { text-align: center; }

.mb-0 { margin-bottom: 0; }

.mb-3 { margin-bottom: 30px; }
  </style>
</head>
<body>
<div id="app" v-cloak>

  <div class="ta-c  mb-3">
    <button @click="battle()" :disabled="opponentOne.hp < 20 || opponentTwo.hp < 20">
      Commence battle
    </button>
  </div>

  <div class="ta-c  mb-3" v-show="opponentOne.hp <= 0 || opponentTwo.hp <= 0">
    <button @click="reset()">
      Reset
    </button>
  </div>

<div class="d-f  jc-sa  mb-3">
  <div>
    <p>{{opponentOne.name}}</p>
    <p>Attack: {{opponentOne.attack}}</p>
    <p>HP: {{opponentOne.hp}}</p>
  </div>
  <div>
    <p>{{opponentTwo.name}}</p>
    <p>Attack: {{opponentTwo.attack}}</p>
    <p>HP: {{opponentTwo.hp}}</p>
  </div>
 </div>

 <h2>Battle</h2>
 <div v-for="attack in attacks">
   {{ attack.message }}
 </div>

  <div class="tt-u  mb-3">
    <h3 v-if="opponentTwo.hp <= 0 && opponentOne.hp > 0">{{ opponentTwo.name }} died</h3>
    <h3 v-else-if="opponentOne.hp <= 0 && opponentTwo.hp > 0">{{ opponentOne.name }} died</h3>
    <h3 v-else-if="opponentOne.hp <= 0 && opponentTwo.hp <= 0">Everyone died</h3>
  </div>

  <h4>#Attack</h4>
  <p>if (1) attacker misses.</p>
  <p>if (2-19) defender takes 1 damage.</p>
  <p>if (20) defender loses a limb and takes 3 damage.</p>

  <h4>#Block</h4>
  <p>if (1) defender fails to block and loses a limb.</p>
  <p>if (2-19) defender blocks successfully.</p>
  <p>if (20) defender blocks successfully and counter attacks for 2 damage.</p>

  <h4>#Cast Spell</h4>
  <p>if (1) attacker casts wild magic. A cow falls from the sky and lands on attacker for 2 damage.</p>
  <p>if (2-19) attacker casts magic missile. defender takes 2 damage.</p>
  <p>if (20) attacker casts wild magic. defender turns into an ugly bullfrog.</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
    attacks: [],
    opponentOne: {
      name: 'Wilhelm Helldoom Bloodlord',
      hp: 20,
      attack: 3,
    },
    opponentTwo: {
      name: 'Greasus Goldtooth',
      hp: 20,
      attack: 3
    }
  },
  methods: {
    battle() {
      const timer = setInterval(() => {
        this.randomMove(this.opponentOne, this.opponentTwo);
        this.randomMove(this.opponentTwo, this.opponentOne);

        if (this.opponentOne.hp <= 0 || this.opponentTwo.hp <= 0) {
          clearInterval(timer);
        }
      }, 1000);
    },
    randomMove(attacker, defender) {
      var moveTypes = ['attack', 'block', 'spell']
      var moveTypeIndex = Math.floor(Math.random() * 3)
      var moveType = moveTypes[moveTypeIndex]
      var d20 = Math.floor(Math.random() * 20) + 1
      this[moveType](d20, attacker, defender);
    },
    attack(d20, attacker, defender) {
      if (d20 === 1) {
        this.attacks.push({ message: `${attacker.name} misses.` })
      } else if (2 < d20 && d20 < 19) {
        defender.hp -= attacker.attack
        this.attacks.push({ message: `${defender.name} takes ${attacker.attack} damage.` })
      } else {
        defender.hp -= attacker.attack * 2
        this.attacks.push({ message: `${defender.name} loses a limb and takes ${attacker.attack * 2} damage.` })
      }
    },
    block(d20) {

    },
    spell(d20) {

    },
    reset() {
      this.$data = initialState();
    },
  }
})
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	<style media="screen">
	@font-face {
	font-family: "San Francisco";
	font-weight: 200;
	src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-thin-webfont.woff");
	}

	@font-face {
	font-family: "San Francisco";
	font-weight: 400;
	src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
	}

	body {
	font-family: "San Francisco";
	font-size: 14px;
	font-weight: 200;
	line-height: 1;
	margin: 50px 30px;
	}

	h4 { font-size: 1.2em; font-weight: 400; }

	button {
	color: #fff;
	background-color: #000;
	cursor: pointer;
	display: inline-block;
	width: 150px;
	height: 40px;
	border: 2px solid #000;
	font-size: 12px;
	text-transform: uppercase;
	transition: all 0.2s ease;
	}

	button:disabled {
	background-color: #eee;
	border: 2px solid #eee;
	}

	.d-f { display: flex; }

	.jc-sb { justify-content: space-between; }

	.jc-sa { justify-content: space-around; }

	.tt-u { text-transform: uppercase; }

	.ta-c { text-align: center; }

	.mb-0 { margin-bottom: 0; }

	.mb-3 { margin-bottom: 30px; }
	</style>
	</head>
	<body>
	<div id="app" v-cloak>

	<div class="ta-c mb-3">
	<button @click="battle()" :disabled="opponentOne.hp < 20 \|\| opponentTwo.hp < 20">
	Commence battle
	</button>
	</div>

	<div class="ta-c mb-3" v-show="opponentOne.hp <= 0 \|\| opponentTwo.hp <= 0">
	<button @click="reset()">
	Reset
	</button>
	</div>

	<div class="d-f jc-sa mb-3">
	<div>
	<p>{{opponentOne.name}}</p>
	<p>Attack: {{opponentOne.attack}}</p>
	<p>HP: {{opponentOne.hp}}</p>
	</div>
	<div>
	<p>{{opponentTwo.name}}</p>
	<p>Attack: {{opponentTwo.attack}}</p>
	<p>HP: {{opponentTwo.hp}}</p>
	</div>
	</div>

	<h2>Battle</h2>
	<div v-for="attack in attacks">
	{{ attack.message }}
	</div>

	<div class="tt-u mb-3">
	<h3 v-if="opponentTwo.hp <= 0 && opponentOne.hp > 0">{{ opponentTwo.name }} died</h3>
	<h3 v-else-if="opponentOne.hp <= 0 && opponentTwo.hp > 0">{{ opponentOne.name }} died</h3>
	<h3 v-else-if="opponentOne.hp <= 0 && opponentTwo.hp <= 0">Everyone died</h3>
	</div>

	<h4>#Attack</h4>
	<p>if (1) attacker misses.</p>
	<p>if (2-19) defender takes 1 damage.</p>
	<p>if (20) defender loses a limb and takes 3 damage.</p>

	<h4>#Block</h4>
	<p>if (1) defender fails to block and loses a limb.</p>
	<p>if (2-19) defender blocks successfully.</p>
	<p>if (20) defender blocks successfully and counter attacks for 2 damage.</p>

	<h4>#Cast Spell</h4>
	<p>if (1) attacker casts wild magic. A cow falls from the sky and lands on attacker for 2 damage.</p>
	<p>if (2-19) attacker casts magic missile. defender takes 2 damage.</p>
	<p>if (20) attacker casts wild magic. defender turns into an ugly bullfrog.</p>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
	<script type="text/javascript">
	var app = new Vue({
	el: '#app',
	data: {
	attacks: [],
	opponentOne: {
	name: 'Wilhelm Helldoom Bloodlord',
	hp: 20,
	attack: 3,
	},
	opponentTwo: {
	name: 'Greasus Goldtooth',
	hp: 20,
	attack: 3
	}
	},
	methods: {
	battle() {
	const timer = setInterval(() => {
	this.randomMove(this.opponentOne, this.opponentTwo);
	this.randomMove(this.opponentTwo, this.opponentOne);

	if (this.opponentOne.hp <= 0 \|\| this.opponentTwo.hp <= 0) {
	clearInterval(timer);
	}
	}, 1000);
	},
	randomMove(attacker, defender) {
	var moveTypes = ['attack', 'block', 'spell']
	var moveTypeIndex = Math.floor(Math.random() * 3)
	var moveType = moveTypes[moveTypeIndex]
	var d20 = Math.floor(Math.random() * 20) + 1
	this[moveType](d20, attacker, defender);
	},
	attack(d20, attacker, defender) {
	if (d20 === 1) {
	this.attacks.push({ message: `${attacker.name} misses.` })
	} else if (2 < d20 && d20 < 19) {
	defender.hp -= attacker.attack
	this.attacks.push({ message: `${defender.name} takes ${attacker.attack} damage.` })
	} else {
	defender.hp -= attacker.attack * 2
	this.attacks.push({ message: `${defender.name} loses a limb and takes ${attacker.attack * 2} damage.` })
	}
	},
	block(d20) {

	},
	spell(d20) {

	},
	reset() {
	this.$data = initialState();
	},
	}
	})
	</script>
	</body>
	</html>