커스텀시트 만들기⑦:auto calc

이 글에서는 자동으로 계산해주는 input 입력칸을 사용하는 방법을 설명합니다. 예시를 들기 위해, 무료로 공개되어 있는 일본 인디 룰 Quartett!의 시스템을 설명하면서 진행하겠습니다. 먼저 콰르텟이라는 룰은, 현악 사중주를 하는 음악원 학생들이 84일 동안 일상을 보내며 음악적 소양을 연마하다가 콩쿨 대회에 참여하여 아름다운 하모니를 만들어내는 것을 목표로 합니다. 그것을 위해서 각 PC에게는 수학, 언어, 사회, 자연, 신체, 기계, 생활, 출생, 음악이라는 9개의 능력치가 있습니다. 캐릭터 초기 작성 시, 음악 이외의 능력치는 2d6-2로 결정되고 배분 가능한 포인트가 7점 주어집니다. 그 결과로 정해진 8개의 능력치를 전부 합한 값을 이용하여 음악의 능력치를 결정합니다. 수식으로 표현하자면 {100-(수학+언어+사회+자연+신체+기계+생활+출생)}/5가 되고, 이 나머지가 1이나 2라면 내림, 3이나 4라면 올림으로 계산합니다. 그러면 이제 html 코드를 작성해보죠.

총합<input type="number" name="attr_total_stat" value="[[@{math}+@{language}+@{social}+@{nature}+@{body}+@{machine}+@{living}+@{birth}]]" disabled>
<button class="sheet-secroll" type="roll" name="music_roll" value="&{template:quartett} {{name=@{character_name}}} {{check=음악 판정}} {{roll=[[@{music}+2d6]]}}" title="음악적인  재능입니다.  청각의  예민함도  포함.">음악</button><input type="text" name="attr_music" value="">
<button type="roll" name="math_roll" value="&{template:quartett} {{name=@{character_name}}} {{check=수학 판정}} {{roll=[[@{math}+2d6]]}}" title="계산을  하고  논리적인  과제를  달성하기 위한  능력">수학</button><input type="text" name="attr_math">
<button type="roll" name="language_roll" value="&{template:quartett} {{name=@{character_name}}} {{check=어학 판정}} {{roll=[[@{language}+2d6]]}}" title="의사소통  능력,  언어  능력,  언어적  표현력을  종합한  능력">어학</button><input type="text" name="attr_language">
<button type="roll" name="social_roll" value="&{template:quartett} {{name=@{character_name}}} {{check=사회 판정}} {{roll=[[@{social}+2d6]]}}" title="정치,  경제,  역사,  지리  등  사회적  지식의  양">사회</button><input type="text" name="attr_social">
<button type="roll" name="nature_roll" value="&{template:quartett} {{name=@{character_name}}} {{check=자연 판정}} {{roll=[[@{nature}+2d6]]}}" title="화학,  물리,  생물,  천문  등  이과  학문  지식의  양">자연</button><input type="text" name="attr_nature">
<button type="roll" name="body_roll" value="&{template:quartett} {{name=@{character_name}}} {{check=신체 판정}} {{roll=[[@{body}+2d6]]}}" title="운동  신경,  지구력,  순발력,  집중력,  건강,  청각  이외의  오감의  예민함  등을  종합한  능력">신체</button><input type="text" name="attr_body">
<button type="roll" name="machine_roll" value="&{template:quartett} {{name=@{character_name}}} {{check=기계 판정}} {{roll=[[@{machine}+2d6]]}}" title="도구와  기계의  취급,  차량  운전  등  음악에  관련되지  않은  일반적인  기구의  취급  능력">기계</button><input type="text" name="attr_machine">
<button type="roll" name="living_roll" value="&{template:quartett} {{name=@{character_name}}} {{check=생활 판정}} {{roll=[[@{living}+2d6]]}}" title="취사,  세탁,  청소,  정리,  재봉,  생활  용품의  지식  등  생활을  편안하게  하는  능력">생활</button><input type="text" name="attr_living">
<button type="roll" name="birth_roll" value="&{template:quartett} {{name=@{character_name}}} {{check=출생 판정}} {{roll=[[@{birth}+2d6]]}}" title="부모,  친척  등의  후원자의  사회적,  경제적,  음악적  위상을  종합  한  수치">출생</button><input type="text" name="attr_birth">

이렇게 작성하면, 대강 이런 모양이 됩니다. 음악의 input에만 value를 기입하지 않았어요.

총합

여기서 우리가 자동으로 계산시키도록 할 것은, 총합 부분이 됩니다. input 태그 안의 마지막 속성에 disabled를 적어 주어서, 입력칸을 클릭해도 직접 수정하거나 입력할 수 없는 상태라는 것을 알 수 있습니다. 수학+언어+사회+자연+신체+기계+생활+출생을 적기 위해서, 각각의 능력치를 @{능력치}의 형태로 받아올 수 있습니다. 이것은 캐릭터 시트에 attributes값이 존재한다면, 능력치가 아니라 장문의 텍스트 등 어떤 것이라도 가능합니다. 예를 들어, input의 name="attr_Untitled"라면 다음과 같이 데이터가 저장되는 것을 확인할 수 있고, 채팅창에서 @{Oosreck Niigreto|Untitled}라고 적으면 해당 값으로 치환하여 출력됩니다.

그렇게 해서 현재값을 가져올 수 있고, 우리가 하려는 부분에는 최대값이 필요하지 않지만 @{능력치|max}의 형태로 최대치를 가져오는 것도 가능합니다. 물론 채팅창에서 호출할 수도 있는데, 이 때는 @{pc이름|능력치|max}가 됩니다.  그래서 value="[[@{math}+@{language}+@{social}+@{nature}+@{body}+@{machine}+@{living}+@{birth}]]"가 되었네요. roll20에서 값을 자동계산 하거나 주사위를 굴릴 때 [[1d6+3]]과 같이 채팅창에 보내서 결과를 알 수 있잖아요? 그런 형태로 대괄호를 2개 쓰고 그 안에 내용을 적으면 되는 겁니다. 그리고 반드시 disabled를 덧붙여야, roll20에서 이것은 평범한 입력칸이 아니라 자동계산을 수행하기 위한 것임을 인식합니다. 이것이 auto calc의 전부입니다. 간단하죠? 실제로 이것을 시트에 넣고 나머지 항목을 입력하면 자동계산되어 나오는 total값을 확인할 수 있는데, 그것을 attributes에서 확인하려 하면 total이 존재하지 않습니다. disabled이기 때문에 실제로 사용하는 값은 아니라고 생각한다는 것이죠. 그래서 음악의 value에 [[round((100-@{total})/5)]]라고 써도, @{total}이 없기 때문에 제대로 된 계산을 해 주지 못합니다. 그러므로 auto calc는 어떤 값들을 처리하는 최종적인 단계에서만 즉각적으로 보여주고 싶을 때 쓰는 것이 좋습니다. 하지만 이렇게 종종, 중간에도 자동계산을 하고 나중에 또 자동계산으로 처리를 했으면 좋겠다 싶은 부분들이 있다면 어떻게 해야 할까요? 그것은 다음 글, js를 통한 자동 계산에서 설명하겠습니다. 안녕~