랜덤 그래프 생성기를 구축합시다.

며칠만 지나면 국가 소설 창작의 달이 시작될 것이다. 만약 네가 아직 모른다면, 이 문장은 너에게 어울릴 것이다.뮤즈가 당신을 떠나는 것을 돕기 위해 랜덤 그래픽 생성기를 만들 수 있습니다.

React와 Javascript에 대한 기본적인 이해가 있어야 시작할 수 있습니다.
이 프로젝트는 내가 만든 무작위 문자 생성기의 많은 사상을 참고했다.시작하려면 해당 글을 참조하십시오.

Faker로 무작위 문자 생성기를 만듭니다.js！

케라나 카하바이・ 10월 8일・ 5분 읽기

#javascript #react

계획지

우리는 모두 이야기가 다섯 가지 기본적인 줄거리를 따르는 것을 알고 있지만, 때로는 하나를 쓰기 시작하는 것이 가장 어려운 부분이다.우선, 개괄 서술의 일반적인 총결문을 써 보자.
이것은 내가 생각한 한마디다.
(유형 관련 배경) 및 (유형 관련 문제) 의 (유형 관련 캐릭터) 이야기.
유형과 관련된 역할과 유형과 관련된 설정 등 변수를 사용하여 저는 이런 분야에 적합한 요소를 만들어 냈습니다.나는 전자 표를 사용하는 것이 모든 것을 기록하는 좋은 방법이라는 것을 발견했다.

나는 지금 환상적인 유형을 견지할 것이다.
일련의 판타지 캐릭터를 열거하는 것은 매우 쉽다.

그러나 환상적인 장면은 보통 디테일이 많다.어떻게 상하문에 정확한 묘사자를 생성합니까?

데이터 구조에서 생각하다

설정 동사를 수조의 일부분으로 저장하는 것은 의미가 있다.이렇게 하면 우리는 무작위로 색인을 선택할 수 있다.그러나 우리는 어떻게 이런 동작을 정확한 명사에 대응하게 합니까?어쨌든 산 하나가 무너진 길에 있을 수는 없다.
모든 동작이 색인에 분배되기 때문에, 우리는 명사를 대상의 키로 만들 수 있다.그리고 우리는 상하문에 대응하는 정확한 동사의 수치를 만들 수 있다.
예를 들어 야수는 색인이 0, 1, 2, 4, 5인 동작을 사용할 수 있다.

beasts: 0, 1, 2, 4, 5

이렇게 하면 우리는 동작을 명사와 정확하게 일치시킬 수 있다.

마지막으로 우리는 충돌이나 이야기가 진정으로 작용하는 것이 무엇인지 계속 토론했다.six types of conflicts in stories가 있지만, 나는 그것들을 두 가지 유형으로 합칠 것이다. 그것이 바로 역할 호와 임무 호이다.
역할 호 측면에서 역할이 동작합니다.임무에 있어서 물품, 사람 또는 장소에 대해 어떤 동작이 발생할 수 있다.

완성된 후에 우리는 우리의 대상을 구축할 수 있다.

환상의 대상

randomPlotData로 표시된 새 파일에서js, 전자 표에서 대상을 구축합니다.

const randomPlotData = {
    genres: {
        ‘fantasy’: {
            characters: [
                ‘an elf’,
                […]
                ],
            setting: {
                places: [
                    ‘In a village’,
                    […]
                    ],
                actions: [
                    ‘beset by’,
                    […]
                ], 
                plights: [
                    {' beasts':[0, 1, 2, 4, 5, 6]},
                […], 
                ],
            }, 
            conflict: [
                {
                    type1: {
                        problem: [
                            ‘the death’,
                            […],
                            ], 
                        instigator: [
                        ‘ of a king’,
                        […], 
                    },
                }, 
                {
                    type2: {
                        problem: [
                            ‘the hunt for’, 
                            […], 
                        ],
                        instigator: [
                            ‘ a panacea’,
                        ], 
                    […]
}

나는 이곳에서 약간의 변화를 했다.우선, 충돌 형식을 type1과 type2로 변경합니다.이렇게 하면 함수를 변경할 필요가 없이 나중에 더 많은 충돌을 추가할 수 있다.나는 또한 개사, 관사, 빈칸을 추가하여 문장의 문법을 정확하게 했다.
전체 객체를 보려면 repo 을 참조하십시오.

수학을 사용하여 무작위 드로잉 점을 생성합니다.임의()

마지막으로 우리의 구성 요소를 개발할 때가 되었다.
RandomPlotGenerator라는 새 어셈블리를 생성합니다.js 및 randomPlotData 가져오기
우리는 수학을 사용할 것이다.random () 문자 그룹의 무작위 인덱스를 선택하십시오.

 genreRelatedCharacter = (data)=> {
        let charList = data.genres.fantasy.characters
        let number = Math.floor(Math.random() * charList.length)
        return charList[number]
    }

랜덤 설정을 생성하는 데 같은 논리를 사용합니다.
그러나 설정 설명을 생성하기 위해서는 논리를 약간 확장해야 한다.
우리가 이 묘사부호를 만드는 데 쓰이는 데이터를 다시 한 번 봅시다.

actions: [
                    'beset by',
                    'in the path of',
                    'consumed by',
                    'on the verge of',
                    'conquered by',
                    'covered in',
                    'threatened by'

                ], plights: [
                    {' beasts':[0, 1, 2, 4, 5, 6]},
                    {' a raging storm':[0, 1, 2, 6]},
                    {' a plague':[0, 1, 2, 3, 6]},
                    {' collapse':[0, 3, 6]},
                    {' a celebration':[2, 3, 6]},
                    {' a malicious ruler':[0, 1, 4, 6]},
                    {' ice':[0, 1, 2, 5, 6]},
                    {' lava':[0, 1, 2, 5, 6]},
                    {' moss':[0, 1, 2, 5, 6]},
                    {' an invading army':[0, 1, 4, 6]},
                ]

우리는 동작 수조와 곤경이라고 불리는 대상 수조가 있다.
마지막 settingDesc라는 문자열을 저장할 변수를 만듭니다.

let settingDesc = ""

그리고 우리는 대상에서 목록을 추출하고 생성된 무작위 수를 보존할 것입니다.우리는 또한 우리의 곤경을 선택할 것이다. (이것이 대상이라는 것을 기억하기 때문에object.keys를 사용하여 그것을 찾아야 한다.)

let plightList = data.genres.fantasy.setting.plights
        let plightNum =  Math.floor(Math.random() * plightList.length)
 let plight = Object.keys(plightList[plightNum])

이것은 곤경을 찾아야 한다.이제 우리는 이 곤경을 이용하여 언어 환경의 정확한 행동을 찾아야 한다.
Object를 사용합니다.값은 각 키에 할당된 숫자 목록에 접근합니다.현재 우리의 숫자 목록은 보기에 이렇게 [[0, 1, 2, 4, 5, 6]]] 보이기 때문에 우리도 평행수 그룹을 펴야 한다.

 let plightArr = Object.values(plightList[plightNum]).flat()

이것은 우리에게 다음과 같은 수조를 줄 것이다. [0, 1, 2, 4, 5, 6].
마찬가지로, 우리는 이 그룹에서 무작위로 숫자를 선택하려고 하는데, 이것은 우리가 조작하는 단어 인덱스가 될 것이다.

 let actionNum = plightArr[Math.floor(Math.random() * plightArr.length)]
  let action = data.genres.fantasy.setting.actions[actionNum]

이것은 상하문이 정확한 동작어를 선택할 것이다.
단 한 가지 문제.우리의 문제는 문자열이 아니라 대상의 키이기 때문에 JSON으로 이 데이터를 정리해야 합니다.stringify와 정규 표현식.

  let stringedPlight = JSON.stringify(plight).replace(/[\[\]']+/g,'').replace(/\"/g, "")

마지막으로 우리는 행동과 곤경을 총결하였다.

return settingDesc.concat(action, stringedPlight)

전체 함수는 다음과 같습니다.

    genreRelatedSettingDescription = (data) => {
        let settingDesc = ""
        let plightList = data.genres.fantasy.setting.plights
        let plightNum =  Math.floor(Math.random() * plightList.length)
        let plight = Object.keys(plightList[plightNum])

        let plightArr = Object.values(plightList[plightNum]).flat()
        let actionNum = plightArr[Math.floor(Math.random() * plightArr.length)]
        let action = data.genres.fantasy.setting.actions[actionNum]
        let stringedPlight = JSON.stringify(plight).replace(/[\[\]']+/g,'').replace(/\"/g, "")

        return settingDesc.concat(action, stringedPlight)
    }

우리가 생성해야 할 마지막 랜덤 집합은 충돌이다.기억해라. 우리는 두 가지 가능한 충돌 유형이 있기 때문에 여기서 세 개의 무작위 수를 생성해야 한다. 하나는 충돌 유형, 하나는 문제에 사용되고, 하나는 선동자에 사용된다.
마찬가지로 우리는 생성된 두 가지 설명을 연결해야 한다.

 let conflict = ""
        let conflictList = data.genres.fantasy.conflict
        let num = Math.floor(Math.random() * conflictList.length)
        let conflictType = conflictList[num]
        let conflictWrapper = conflictType[`type${num+1}`]

우리의 충돌은 유형 1 또는 유형 2이기 때문에 문자열을 간단하게 삽입할 수 있습니다.
마지막으로, 우리는 충돌 유형을 사용하여 무작위 설명을 생성할 수 있다.

let problem = conflictWrapper.problem[Math.floor(Math.random() * conflictWrapper.problem.length)]
        let instigator = conflictWrapper.instigator[Math.floor(Math.random() * conflictWrapper.instigator.length)]

        return conflict.concat(problem, instigator)

그것들을 한데 모으다

우리의 기능이 완성되었다.렌더 방법에서, 우리는 그것들 중 하나를 호출하여 우리의 무작위 그림 생성기를 구성할 것입니다!

render(){
    return(
        <div>
            <h1>Random Plot Generator</h1> 
        <p>{`A story that involves ${this.genreRelatedCharacter(RandomPlotData)} in a ${this.genreRelatedSetting(RandomPlotData)} ${this.genreRelatedSettingDescription(RandomPlotData)} and ${this.genreRelatedConflict(RandomPlotData)}.`} </p>
        </div>
    )
}

대상을 사용함으로써 우리는 무작위 그림 생성기를 위해 데이터를 구축할 수 있다.우리는 데이터 구조와 수학도 사용할 수 있다.random () 은 그림 생성기에 더 많은 생각과 디테일을 제공합니다.계속해서, 대상에 더 많은 세부 단어를 추가하거나, 새로운 유형의 대상을 만듭니다.패턴을 따르고 다시 사용할 수 있는 기능을 통해 하늘의 한계!