inkを使ってReactでコマンドラインで遊べるテトリスを作成してみた!

inkとは

reactでコマンドラインアプリケーションが作れるライブラリです

• vadimdemedes/ink: 🌈 React for interactive command-line apps
• inkでターミナルappを作る - Qiita

コマンドラインアプリの勉強のためにとりあえずテトリスを作成してみました!

コードはこちら

注意

私はjavascriptは趣味で勉強しているだけですので、コードはあてにしないでください。

コマンドラインアプリの勉強のためということのため、完成度にはこだわっておらずこのテトリスはバグだらけですすみません

バージョン

• node : v10.14.1

---

参考

shellで書かれたテトリスのサンプルはたくさんあるようなので、それらを参考にさせていただきました。

見た目の表示などこちらを特に参考にさせていただきました。

• dkorolev/bash-tetris: Tetris game implemented in pure bash.

テトリスではないですが、コマンドラインで遊べるゲームの参考にさせていただきました

• Arcade Games written in a Shell Script | *nix Shell

ブロックの表現

自分の中では一番やり方がわからなかったのですが、文字色と背景色を同じにして ブロックを表現するというやり方のようです。

nodejsではchalkというライブラリで簡単にコマンドラインの文字に色を付けれるのでそちらを使用しました

• chalk/chalk: 🖍 Terminal string styling done right

(inkの<Text>hoge</Text>のコンポーネントでは背景色に対応していないようでした、chalkを直接使うと良さそうです)

index.js

const chalk = require('chalk');
console.log(chalk.blue.bgYellow('[]'), '<- 文字色と背景色をそれぞれ指定できる');
console.log(chalk.green.bgGreen('[]'), '<- 文字と背景を同じ色にするとブロックに見える');

bash

npm i chalk
node index.js

標準入力

ブロックの移動、回転をさせるイベントを起こすために、キーボード入力の機能を調べました。

こちらをだいぶ参考にさせていただきました。

vadimdemedes/ink-text-input: Text input component for Ink

---

参考にする際の注意点ですが、こちらのコードでは以下のような書き方がされています。

こちらの @babel/plugin-proposal-class-properties を読み込まないとbabelで変換するときに現在ではエラーになるので注意です。

---

新しい書き方ですので、babelのプラグインをインストールすると動かせます

google翻訳

このプラグインは、es2015プロパティ初期化子構文で宣言されたプロパティと同様に、es2015静的クラスプロパティを変換します。

このようにpluginを使えば変換できます

画面レイアウト

公式のReadmeにあることを一部流用です。flexboxの知識がある方はすんなりレイアウトできそうです。
実際使ってみて、レイアウトは簡単にできるから裏側のシステムに集中できるという感じでした、すごい!!

import React from 'react';
import { render, Box } from 'ink';
const App = () => {
    return (
        <>
            {/* スペースで埋める */}
            <Box>
                Label:
                <Box flexGrow={1}>
                    Fills all remaining space
                </Box>
                aaa
            </Box>

            {/* 上下中央 */}
            <Box alignItems="center">
                <Box marginRight={1}>X</Box>
                <Box>{`A\nB\nC`}</Box>
            </Box>
            
            {/* 逆転 */}
            <Box flexDirection="column-reverse">
                <Box>X</Box>
                <Box>Y</Box>
            </Box>
        </>
    );
}

render(<App/>);

---

最後まで読んでいただいてありがとうございましたm(_ _)m