Denoでプログレスバーを表示する

はじめに

おにぎりくれる奴だいたい友達、にわのわです。
本アドベントカレンダーのモチベーションを保つために、
アドベントカレンダーの進捗を表示するプログレスバーを作ることにしました。
プログレスバー、見てるとテンションアがるよね？

作ったもの

ソースはこちら

要件

• ツイッターで呟きたいので1画面で収まるか、140字に収まること。
• 全体進捗と各記事の進捗を表示したい。
• 各記事の進捗は["タイトル未定", "タイトルだけ決まった" ,"書いてる","書いた"]の4段階で表現したい。

素材

もうライブラリあった。

ということでREADMEにあったサンプルを動かしてみる

いいじゃん！

作る

これから良い感じにカスタムしていきます。

同一ディレクトリにあるprogress.jsonを読みます。 jsonの形はこんな感じ。

progress.json

"dayNN": {
        "tittle": "未定",
        "progress": "タイトル未定"
    },...

あとはサンプルコードをもとにプログレスバーの表示を行います

main.ts

  function showProgress(progress: Progress[]) {
  if (completed <= total){
    completed += 1;
    bars.render(
      progress.map(p => ({ completed:(p.progress >= completed) ? completed:p.progress, total,  text: p.title }))
    )
    setTimeout(function () {
      showProgress(progress);
    }, 100);
  }else{
    bars.end();
  }
}

ポイントとしてはelseできちんとbars.end()を呼ぶことです。
でないとこんな感じで閉まらない終わり方になってしまいます。

プログレスバーなのに完了しないことを想定してないからね…

まとめ

プログレスバー、見てるとテンションアがるよね？