開始試做擲骰功能，拼拼湊湊先弄出了簡陋的版本。

HTML部分拿了Bootstrap的modal來套版：

<!-- Button trigger modal -->
<button type="button" class="btn btn-outline-primary btn-sm ml-1" data-toggle="modal" data-target="#exampleModal"
    (click)="getData()">
    D
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="dice d-flex justify-content-center align-items-center">
                    <p id="dice">
                        {{diceData}}
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

TS長相：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'dicehundred',
  templateUrl: './dicehundred.component.html',
  styleUrls: ['dicehundred.component.scss']
})

export class DicehundredComponent {
  @Input() skill;

  diceData;

  getData() {
    let data;
    data = Math.ceil(Math.random() * 100);
    this.diceData = data;
    console.log(this.skill.value);
    console.log(this.diceData);
    let diceA = document.querySelector('#dice');
    if (data <= this.skill.value) {
      diceA.setAttribute("style", "color:green;")
      console.log(diceA);
    } else if (data > this.skill.value) {
      diceA.setAttribute("style", "color:red;")
    } else {
      return;
    }
  }
}

最後成果如下：
https://i.imgur.com/cTCRdS7.gif

骰數大於技能值(失敗)時文字顯示為紅色，小於技能值(成功)顯示為綠色。但還是有些小BUG，明天再來想想該怎麼修...

= = = = =

你今天的努力，
是否有跟未來的夢想
同一個等級？