블로그 언저리인 무언가

오랜만에 올리는 업데이트 글 사실 업데이트 자체는 한 3달 전쯤에 갑자기 삘받아서 했는데 나랑 내 지인들 말고도 사용하시는 분들이 있는거 같아 추가된 기능 정리할겸? 해서 글을 쓴다. 일단 주사위 창 변경인데 여러번 누르기 귀찮은 분들을 위해 버튼 한번만 누르면 바로 주사위 결과가 나오도록 했으며 숫자 합 주위의 작은 화살표를 통해 누가 패산을 떼야하는지 표시할 수 있게 하였다. 다음으로는 점수 되돌리기 기능을 추가하여 실수로 부/판을 잘못 입력하였을때 점수를 다시 입력하는게 아니라 이전 국의 점수로 되돌릴 수 있도록 설정하였다. 추가로 점수 기록에서 국 부분을 누르면 지금까지의 점수기록을 복사할 수 있게 하여 기록 기입시 용이하도록 하였다. 마지막으로 화료시 부/판 입력하는 부분을 스크롤이 아니라 라디..

내가 만든 점수 계산기를 친구들과 마작하면서 사용해 보았다. 대부분 점수봉을 귀찮게 안세도 된다는 사실에 만족하면서 사용하였는데 내가 나중에 개선점들을 물어보자 알려줘서 여러가지 잡다한 기능들을 추가했다. 가장 먼저 추가한 기능은 점수, 이름 수정 기능이다. 중간에 실수로 부수를 잘못 입력하거나 했을 때 되돌릴 방법이 없어서 그냥 수치를 입력해서 바꿀 수도 있도록 만들었다. 이후에는 아직까지 나온 적은 없지만 추후에 나올 수 있는 상황들을 방지하기 위해서 더블론을 구현하고 화료점수를 최대 6배역만까지 늘렸다. 더블론 같은 경우는 원래의 론 기능에서 연장봉과 리치봉을 분배하기 어려웠기 때문에 중간에 단계를 하나 추가해서 모든 점수 변동 시에 그 창을 거치도록 변경하였다. 마지막으로는 점수 비교 기능을 구현..

이번에도 좀 디자인적 부분을 수정하고 편의 기능을 추가하기로 했다. 저번에 점수가 바뀔 때 모션이 나오도록 만들었는데 점수가 이동할 때 사용자가 몇 점을 얻는지 알려주지 않으므로 이를 알려주는 부분이 있으면 좋을 것 같아 만들었다. 또 뭘 만들까 곰곰이 생각해보다 현재까지의 점수 변동 기록을 볼 수 있었으면 좋겠다는 생각이 들어서 점수 기록표를 만들기로 했다. 만들다 보니 입력창 내부에서 스크롤을 만드는 법을 몰라 고생했는데 크기가 정해진 것에서만 스크롤이 가능해 입력창 전체를 스크롤하는 게 아니라 그리드를 스크롤해야 한다는 사실을 배웠다. ▶▶▶ 구경하러가기 ◀◀◀

일단 저번에 가장 중요한 부분들은 구현을 얼추 했으니 이제부터는 좀 부가적인 기능을 만들기로 했다. 내 목표는 아무것도 없이 마작 패만 있을 때도 웹사이트만 켜면 다른 모든 것을 할 수 있는 것이었기 때문에 가장 먼저 떠오른 주사위를 굴리는 기능을 만들기로 했다. 처음에는 이미지를 가져와서 쓸까 하다가 그냥 그리드 그리는 법을 연습하는 셈 치고 손수 도트를 찍어서 주사위 모양을 만들었다. 굴리기 버튼을 눌렀을 때 바로 주사위가 나오니 너무 밋밋해서 setInterval함수를 사용해 주사위가 여러 번 나오는 모션을 만들었다. 주사위를 만들고 나니까 점수가 바뀔 때에도 모션이 있으면 좋겠다는 생각을 해서 만들기 시작했다. 여기에서도 똑같이 setInterval함수를 사용해서 점수가 변할 때 한 번에 바뀌지 ..

템플릿 다 짜고 나서 폰으로 확인해보니까 내 생각보다 너무 중간 메뉴의 크기가 작았다. 다시 그리드를 짜고 폰트와 크기를 늘렸다. 연장봉 표시 부분을 다시 만드는데 상당히 애를 먹었다. .'.'.' 이런 식으로 만드려고 했는데 뭔가 자꾸 일그러져서 꽤 시간을 쏟았다. 드디어 론, 쯔모, 유국에 대한 JavaScript 코딩을 시작했다. 먼저 구상을 했을 때 론같은 경우는 화료한 사람 입력 - 방총당한 사람 입력 - 부, 판 입력 순으로 창이 뜨도록 만들고 쯔모는 화료한 사람 입력 - 부,판 입력, 유국은 텐파이한 사람 입력창이 뜨도록 만들었다. 이후에는 점수 계산 함수를 따로 만들어 부, 판, 론or쯔모, 친or자, +or- 를 입력받으면 공탁된 리치봉과 연장봉을 합한 점수를 리턴하게 만들었고 이후에 친..

일단 저번에 만들던 레이아웃을 이어서 만들기 시작했다. 만들다 보니 론, 쯔모 버튼을 사방에 놓기에는 공간이 부족하겠다는 생각이 들어 중간으로 옮기기로 했고, 유국에 관한 것도 처리해야 하기 때문에 유국 버튼도 만들기로 했다. 가운데 부분에는 현재가 몇 국인지 표시하는 것과 연장봉, 공탁된 1000점 봉의 개수를 나타내기로 했다. 대충 모양새를 잡았으니 이제 본격적으로 JavaScript를 짤 시간이다. 하지만 점수 부분을 어떤 식으로 순차적으로 처리해야 할지 감도 잡히지 않고 시간이 별로 없어 리치봉 부분을 그린 후 점수 부분을 클릭하면 리치를 걸고 리치봉 카운트가 올라가는 부분만 만들었다. ▶▶▶ 구경하러가기 ◀◀◀

생활코딩 사이트로 혼자 간단하게 웹을 배웠다. 뭔가 추가로 배우기 전에 내가 배운 것들을 좀 써먹을 수 있는 걸 만들면 어느 정도 익숙해질 것 같아서 전에 생각했던 마작 점수 계산기를 만들기로 했다. 원래는 온라인으로 하는 카드게임 같은걸 만들어 보려고 했는데 내가 공부한 선에서 만들기에는 택도 없었기 때문에 급하게 선회하게 됐다. 먼저 HTML과 CSS를 이용해 기초적인 레이아웃을 그렸다. 나의 목적은 컴에서 쓰는 게 아니라 폰에서 쓰는 것이었기 때문에 컴보다는 폰에 좀 더 초점을 맞춰서 만들기로 했다. 난관은 텍스트를 회전해 각 변에 배치하는 작업에서 찾아왔는데 CSS 속성인 transform: rotate을 사용해서 회전시키면 우리 눈에 보았을 때는 회전되었지만 실제로 그 객체가 차지하는 공간은 그..