petrusnog · September 30, 2020 22:35
diff --git a/rpg.html b/rpg.html
 <!DOCTYPE html>
 <html lang="pt-br">

    <head>

        <title>RPG</title>
        <meta charset="utf-8">

        <style media="screen">

            #vueroot{
              max-width: 1130px;
              margin-left: auto;
              margin-right: auto;
            }
            .done{
              text-decoration: line-through;
              opacity: 0.3;
            }

            .quests{
              display: flex;
              flex-direction: row;
              justify-content: space-around;
              flex-wrap: wrap;
              margin-top: 100px;
            }

            .doQuest{
              margin-bottom: 10px;
              width: 45%;
              background: green;
              border: 2px solid green;
              color: white;
              line-break: strict;
              padding: 10px 20px;
              font-weight: bolder;
              font-size: 16px;
              border-radius: 10px;
              transition: all .5s;
              cursor: pointer;
            }

            .doQuest:hover{
              background: transparent;
              color: green;
            }

            .game_end{
                text-align: center;
            }

            .gameover{
              font-size: 30px;
              font-weight: bolder;
              letter-spacing: 2px;
              text-transform: uppercase;
              color: #a10000;
            }

            .player-name{
              color: blue;
            }

        </style>

    </head>

    <body>

        <div id="vueroot">
            <h1>RPG | Monster</h1>
            <h2 class="player-name">{{ player.name }} | {{ player.xp }}XP</h2>
            <p class="player-name">{{ player.classe }}</p>
            <div class="player">
                <label>Nome
                  <input type="text" v-model="player.name">
                </label>
                <label>Classe
                  <select @change="mudarClasse()" v-model="new_classe">
                      <option v-for="classe in classes" v-text="classe" :value="classe"></option>
                  </select>
                </label>
            </div>
            <h2>Quests</h2>
            <ul>
                <li v-for="task in undoneTasks" :class="{ 'done' : task.done }"> {{ task.description }} | <strong>{{ task.xp }} XP</strong> </li>
            </ul>
            <ul>
                <li v-for="task in doneTasks" class="done"> {{ task.description }} | <strong>{{ task.xp }} XP</li>
            </ul>

            <div class="addQuest">
                <h3>Criar nova quest</h3>
                <label>Tarefa: <input type="text" v-model="new_task"></label>
                <label>XP: <input type="number" v-model="new_xp" min="1"></label>
                <button type="text" @click="addQuest()">Nova quest</button>
            </div>

            <div class="quests">
                <button v-for="task in undoneTasks" v-text="task.description" @click="doQuest(task)" class="doQuest"></button>
                <div class="game_end" v-if="undoneTasks.length == 0">
                    <h3 class="gameover">Game Over</h3>
                    <p>Parabéns, {{ player.name }}!</p>
                </div>
            </div>

        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

        <script type="text/javascript">
            new Vue({
              el: "#vueroot",
              data: {
                  tasks: [
                      { xp: 10, description: "Ir contra as regras do hospital", done: false },
                      { xp: 1000, description: "Vencer um debate contra o inspetor Lunge.", done: false },
                      { xp: 50, description: "Resgatar o jovem Dieter de seu tutor sádico.", done: false },
                      { xp: 60, description: "falar 'FUURAAANZZZ BONAPARTA' a cada 5 segundos.", done: false },
                      { xp: 40, description: "Escapar do trem para Praga", done: false },
                      { xp: 50, description: "Aprender a atirar de pistola", done: false },
                      { xp: 10, description: "Ser o protagonista mais foda de todos os tempos", done: true }
                  ],

                  player: {
                      name: "Kenzou Tenma",
                      xp: 10,
                      classe: "Médico"
                  },

                  classes: [
                    "Médico",
                    "Guerreiro",
                    "Arqueiro",
                    "Lutador",
                    "Soldado"
                  ],

                  new_task: "",
                  new_xp: 1,
                  new_classe: "Médico"
              },
              methods: {
                  doQuest ( task ) {
                      //Concluir tarefa
                      task.done = true;

                      //Player ganha XP
                      this.player.xp = parseInt(this.player.xp) + parseInt(task.xp);
                  },
                  addQuest () {
                      if ( this.new_task.length && this.new_task.replace(/\s/g, '').length ) {
                        this.tasks.push( { xp: this.new_xp, description: this.new_task, done: false } );
                        this.new_task = "";
                      }
                  },
                  mudarClasse () {
                      this.player.classe = this.new_classe;
                  }
              },
              computed: {
                  undoneTasks () {
                      return this.tasks.filter( task => task.done == false );
                  },
                  doneTasks () {
                      return this.tasks.filter( task => task.done == true );
                  }
              }
            });
        </script>

    </body>

 </html>
	<!DOCTYPE html>
	<html lang="pt-br">

	<head>

	<title>RPG</title>
	<meta charset="utf-8">

	<style media="screen">

	#vueroot{
	max-width: 1130px;
	margin-left: auto;
	margin-right: auto;
	}
	.done{
	text-decoration: line-through;
	opacity: 0.3;
	}

	.quests{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: wrap;
	margin-top: 100px;
	}

	.doQuest{
	margin-bottom: 10px;
	width: 45%;
	background: green;
	border: 2px solid green;
	color: white;
	line-break: strict;
	padding: 10px 20px;
	font-weight: bolder;
	font-size: 16px;
	border-radius: 10px;
	transition: all .5s;
	cursor: pointer;
	}

	.doQuest:hover{
	background: transparent;
	color: green;
	}

	.game_end{
	text-align: center;
	}

	.gameover{
	font-size: 30px;
	font-weight: bolder;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #a10000;
	}

	.player-name{
	color: blue;
	}

	</style>

	</head>

	<body>

	<div id="vueroot">
	<h1>RPG \| Monster</h1>
	<h2 class="player-name">{{ player.name }} \| {{ player.xp }}XP</h2>
	<p class="player-name">{{ player.classe }}</p>
	<div class="player">
	<label>Nome
	<input type="text" v-model="player.name">
	</label>
	<label>Classe
	<select @change="mudarClasse()" v-model="new_classe">
	<option v-for="classe in classes" v-text="classe" :value="classe"></option>
	</select>
	</label>
	</div>
	<h2>Quests</h2>
	<ul>
	<li v-for="task in undoneTasks" :class="{ 'done' : task.done }"> {{ task.description }} \| <strong>{{ task.xp }} XP</strong> </li>
	</ul>
	<ul>
	<li v-for="task in doneTasks" class="done"> {{ task.description }} \| <strong>{{ task.xp }} XP</li>
	</ul>

	<div class="addQuest">
	<h3>Criar nova quest</h3>
	<label>Tarefa: <input type="text" v-model="new_task"></label>
	<label>XP: <input type="number" v-model="new_xp" min="1"></label>
	<button type="text" @click="addQuest()">Nova quest</button>
	</div>

	<div class="quests">
	<button v-for="task in undoneTasks" v-text="task.description" @click="doQuest(task)" class="doQuest"></button>
	<div class="game_end" v-if="undoneTasks.length == 0">
	<h3 class="gameover">Game Over</h3>
	<p>Parabéns, {{ player.name }}!</p>
	</div>
	</div>

	</div>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	<script type="text/javascript">
	new Vue({
	el: "#vueroot",
	data: {
	tasks: [
	{ xp: 10, description: "Ir contra as regras do hospital", done: false },
	{ xp: 1000, description: "Vencer um debate contra o inspetor Lunge.", done: false },
	{ xp: 50, description: "Resgatar o jovem Dieter de seu tutor sádico.", done: false },
	{ xp: 60, description: "falar 'FUURAAANZZZ BONAPARTA' a cada 5 segundos.", done: false },
	{ xp: 40, description: "Escapar do trem para Praga", done: false },
	{ xp: 50, description: "Aprender a atirar de pistola", done: false },
	{ xp: 10, description: "Ser o protagonista mais foda de todos os tempos", done: true }
	],

	player: {
	name: "Kenzou Tenma",
	xp: 10,
	classe: "Médico"
	},

	classes: [
	"Médico",
	"Guerreiro",
	"Arqueiro",
	"Lutador",
	"Soldado"
	],

	new_task: "",
	new_xp: 1,
	new_classe: "Médico"
	},
	methods: {
	doQuest ( task ) {
	//Concluir tarefa
	task.done = true;

	//Player ganha XP
	this.player.xp = parseInt(this.player.xp) + parseInt(task.xp);
	},
	addQuest () {
	if ( this.new_task.length && this.new_task.replace(/\s/g, '').length ) {
	this.tasks.push( { xp: this.new_xp, description: this.new_task, done: false } );
	this.new_task = "";
	}
	},
	mudarClasse () {
	this.player.classe = this.new_classe;
	}
	},
	computed: {
	undoneTasks () {
	return this.tasks.filter( task => task.done == false );
	},
	doneTasks () {
	return this.tasks.filter( task => task.done == true );
	}
	}
	});
	</script>

	</body>

	</html>
No results found