ink란?

react로 커맨드 라인 어플리케이션을 만들 수있는 라이브러리입니다.

vadimdemedes/ink: 🌈 React for interactive command-line apps

ink로 터미널 앱 만들기 - Qiita

커맨드 라인 앱을 공부하기 위해 일단 테트리스를 만들려고했습니다!



코드는 이쪽

주의

나는 자바 스크립트가 취미로 공부하고 있기 때문에 코드를 대지 마십시오.

커맨드 라인 앱을 공부하기 때문에 완성도에 집착하지 않고이 테트리스는 버그로 가득합니다.

버전

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