#はじめに
グランブルファンタジーというゲーム内のイベントである古戦場にて、目的の貢献度を貯めるためにはどれくらいのトリガーが必要か?を計算するツールを作りました。
作り自体は簡単なため、初めてVue.jsを勉強&アウトプットするにはいい題材でした。
実際に動かしたもの
http://ayama.main.jp/battlefieldRun.html
コード
https://github.com/guranytou/battlefieldRuns
#一番困った部分
<fieldset class="inputFieldset">
<div id="app">
<div>
<span>目標累計貢献度</span>
<input type="text" v-model="input" id="contributionInput"></input>
</div>
<div id="trigerDigest">
<div><span>肉の消化方法</span></div>
<div>
<input type="radio" class="hellRadio" name="hellRadio" id="hell95" value="Hell95" v-model="trigerDigest"/>
<label class="hellRadioLabel" for="hell95">95HELL</label>
<input type="radio" class="hellRadio" name="hellRadio" id="hell100" value="Hell100" v-model="trigerDigest"/>
<label class="hellRadioLabel" for="hell100">100HELL</label>
<input type="radio" class="hellRadio" name="hellRadio" id="hell150" value="Hell150" v-model="trigerDigest"/>
<label class="hellRadioLabel" for="hell150">150HELL</label>
<input type="radio" class="hellRadio" name="hellRadio" id="both" value="both" v-model="trigerDigest"/>
<label class="hellRadioLabel" for="both">95&100HELL</label>
</div>
<div>
<span>必要なトリガー数:</span><span>{{ output }}</span>
</div>
</div>
</fieldset>
(function () {
var triger = new Vue({
el: '#app',
data: {
input: 0,
trigerDigest: 'false'
},
computed: {
output: function(){
const Hell95NeedTriger = 10;
const Hell100NeedTriger = 20;
const Hell150NeedTriger = 20;
const ExTriger = 4;
const Hell95Contribution = 51500 * (Hell95NeedTriger / ExTriger) + 910000;
const Hell100Contribution = 51500 * (Hell100NeedTriger / ExTriger) + 2680000;
const Hell150Contribution = 51500 * (Hell150NeedTriger / ExTriger) + 3600000;
let ans = 0;
const ThisInput = String(this.input);
const InputContribution = removeComma(ThisInput);
function removeComma(value) {
var num = value.replace(/,/g, "");
return parseInt(num);
}
if(this.trigerDigest === 'Hell95'){
// 計算式
ans = Math.floor(InputContribution / Hell95Contribution * Hell95NeedTriger);
return ans.toLocaleString()
}else if(this.trigerDigest === 'Hell100'){
// 計算式
ans = Math.floor(InputContribution / Hell100Contribution * Hell100NeedTriger);
return ans.toLocaleString()
}else if(this.trigerDigest === 'Hell150'){
ans = Math.floor(InputContribution / Hell150Contribution * Hell150NeedTriger);
return ans.toLocaleString()
}else if(this.trigerDigest === 'both'){
// 計算式
ans = Math.floor((InputContribution / 2 / Hell95Contribution * Hell95NeedTriger) + (InputContribution / 2 / Hell100Contribution * Hell100NeedTriger));
return ans.toLocaleString()
}else{
return 0;
}
}
}
})
}());
#振り返り
・カンマをinput/outputにいれるのに地味に困った
→ここは本題ではなかったので、今回はinputに外部のJQueryを利用、outputにはtoLocaleString()を利用した
・computedとmethodsのどちらを利用すればいいのか分からなくて困った
→入れたらすぐに発火するものが作りたかったのでcomputedを採用。またcomputedとmethodsの違いの勉強が出来てよかった
・必要な部分だけさらっと勉強して書き始めたので、まだまだVue.jsへの理解が足りないように感じた
→座学もちゃんと増やす。簡単な題材のアウトプット(FizzBuzz、ToDoリスト作成etc)をする。
・疑問点:Computed内でif文の分岐をしている例文が見当たらなかったが、他の書き方があったりするのだろうか