Steem.js API로 게시물 주사위게임 만들기 (2)
Steem.js API로 게시물 주사위게임 만들기 (2)
- 주사위 페이지 : https://steemcoding.github.io/dicegame.github.io/
- 소스 위치 : https://github.com/steemcoding/dicegame.github.io/blob/master/index.html
오늘은 두번째 시간으로 지난시간에 주사위를 굴리는 것 까지 해보았습니다. 여기서, 우리가 주사위를 굴렸을 때 순위를 쉽게 찾을 수 있어야 합니다. 예로 10명의 voters의 주사위는 그냥 출력된 결과물을 보고 누가 일등인지 확인하기 쉽지만 100명이나 아니 1000명의 voters의 주사위 결과를 확인하는 작업은 쉽지 않습니다. 누가 일등인지 일일히 다 대조해야 합니다. 오늘은 쉽게 순위를 알아 볼 수 있는 방법을 설명하겠습니다. 그리고 또 한가지 주사위 100을 돌렸을 때 2명이 100이란 주사위 숫자가 나왔을 때 누구를 일등으로 해야할지도 규칙도 정해야 합니다. 여러분들은 어떤 규칙으로 2명 이상의 100이 나온 사람들의 순위를 정하겠습니까? 힌트는 Steem API를 통해서 얻는 정보에 있습니다. 보팅해준 금액으로 한다면 쉬울 수 있지만 그것은 상대적 자괴감을 유발 시킬 수 있기 때문에 될 수 있으면 보액 액수로 뭔가의 규칙을 정하는 것은 피해야 합니다. steem.api.getActiveVotes() 함수로 가져온 데이터 중에 재밌는 데이터가 있습니다. 보팅한 시간이 기록되어 있는데 이 시간값을 우선순위로 하면 쉽게 해결할 수 있습니다. 시간은 해당 게시물에 대한 관심도를 가장 잘 나타내는 수치입니다. 즉, 해당 게시물에 대한 관심도를 통해 누가 가장 먼저 보였는지를 나타냄으로 같은 주사위 숫자지만 먼저 관심을 보인 voter에게 우선 순위를 부여한다면 형평성에도 어느정도 맞는 규칙이 아닐까 싶습니다. 딱히, 다른 정보로 규칙을 정하기는 애매합니다. 물론 같은 숫자가 나온 사람끼리 다시 주사위를 굴리는 방법이 있지만 그 방법은 포스팅에서는 다루지 않겠습니다. 구지 코딩 로직을 길게 만들어서 혼란을 주는 것 보다 심플하게 같은 당첨자 숫자일때는 시간값으로 비교해서 우선순위로 순위를 간단히 정하는 것으로 포스팅을 하겠습니다.
1. Steem API를 자바스크립트
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Steem.js</title>
</head>
<body>
<script src="https://cdn.steemjs.com/lib/latest/steem.min.js"></script>
<script>
명령어 수행!
</script>
</body>
<hteml>
다시 복습하는 맘으로 이 구조를 잘 기억해 주세요.
2. 데이터를 배열변수에 보관하기
우선, 가져온 데이터를 특정 배열변수에 저장할 예정입니다. 그 이유는 특정한 형태로 정보를 저장해 놓으면 개발자가 좀 더 편하게 데이터를 접근하고 갱신할 수 있기 때문에 데이터를 배열변수에 보관하게 됩니다.
1) 데이터 저장 과정
위 그림에서 보듯이 voters[]라고 공용으로 사용할 변수를 하나 선언합니다. 그리고 각 배열의 위치에는 Name, Dice, Rank, Time의 정보가 저장 됩니다. 예로 위 그림에서 보면 Voters[0]에는 'Codingman'이라는 사람의 4가지 정보가 들어 있게 됩니다. 두번째는 'A'라는 사람의 4가지 정보가 들어가 게 됩니다. 이렇게 해서 voters[] 배열변수 보팅한 유저들을 순차적으로 필요한 정보들로만 구성된 형태로 보관하게 됩니다.
이전시간에는 단순히 생성된 정보를 바로 출력했지만 이제는 그 정보를 보관해 놓고 순위를 정할 때나 다른 필요한 작업을 수행할 때 쉽게 꺼내 쓸 수 있게 되었습니다. getactivevoters에 저장된 정보를 기반으로 그 안에 추가로 키를 선언해서 데이터를 저장할 수 있지만 그 부분은 생략하고 편하게 새롭게 배열변수를 만들어서 필요한 데이터만 구성된 형태를 만들어 활용하는게 더 나을 것 같아서 이렇게 표현 했습니다.
2) 테이터 저장 코딩
우선 gatactivevoters의 정보를 기반으로 따로 배열변수를 만들어서 voter[]의 정보를 저장한다고 했죠. 젤 위해 공용으로 사용한 voters[] 배열변수를 선언했습니다. 그 이유는 외부로 함수를 몇개 뺄 예정이라서 steem.api.getActiveVotes() 내에 선언하지 않았습니다. 그러면 그 함수 관련 동작이 끝나면 변수는 소멸하기 때문에 외부에 선언을 해야 소멸하지 않고 다른 함수에서도 편하게 접근할 수 있기 때문입니다.
var voters = [];
steem.api.getActiveVotes(author, permlink, function (err, getactivevoters) {
var diceValue =0;
for(var i=0;i<getactivevoters.length;i++){
diceValue = Dice(); //주사위
데이터를 배열변수에 저장하라;
}
}
});
function Dice(){ //주사위 돌리기
return Number(Math.floor(Math.random() * max)+1);
}
대충 위 코딩은 지난시간의 소스에서 주사위 굴리는 로직을 외부 함수로 뺐습니다. steem.api.getActiveVotes() 함수 내 코드의 가독성을 높이기 위해서 표현한 방식입니다. steem.api.getActiveVotes()내에서 기본 의미 전달 로직만 표현하고 그 의미의 실제 동작은 외부 함수로 표현해서 호출하는 식으로 하면 steem.api.getActiveVotes()함수 내에서의 코딩을 좀 더 편하게 할 수 있겠죠.
3) 데이터를 배열변수에 저장하라
getactivevoters에 voter, time의 정보를 가지고 있습니다. 그리고 diceValue에는 주사위 값을 가지고 있습니다. rank값은 아직 순위를 정하지 않기 때문에 값이 존재하지 않습니다. 초기값으로 넣도록 해보죠. 저장할 정보는 다 준비 되었으니깐 코딩을 해보도록 하겠습니다.
voters.push({Name: getactivevoters[i].voter, Dice: diceValue, Rank: 1, Time : getactivevoters[i].time});
변수 이름을 길게 하니깐 코딩이 좀 길어보일 수 있겠네요. push()함수를 이용해서 voters[]에 데이터를 순차적으로 집어넣게 됩니다.
예) 첫 voter 정보를 저장
위 정보가 voters[0]에 저장한다고 생각하시면 됩니다.
for(var i=0;i<getactivevoters.length;i++){
voters.push();
}
이렇게 계속 보팅한 사람들의 숫자만큼 반복 수행하게 됩니다. 첫번째 voter는 voters[0]에 저장되고 두번째 voter는 voters[1]에 저장된다고 생각하시면 됩니다. 'Rank' 값은 초기값으로 전부 1을 넣었습니다. 그냥 0으로 해도 상관없습니다. 우선 선언만 해놓고 나중에 순위를 구하게 되면 여기에 정보를 넣게 됩니다.
3. 순위 구하기
오늘의 주제인 순위를 구하도록 하겠습니다. 우선 순위를 구할 로직을 짜야합니다. 우선 높은 수가 나온 사람이 순위가 높아야 하기 때문에 대충 2중 for문을 사용하여 서로 비교하면서 상대보다 낮은 사람의 rank 숫자를 커지게 함으로서 순위를 정하겠습니다. 숫자가 크면 클수록 순위가 낮겠죠.
1) 순위 로직 만들기
**조건 : 5명의 voterse를 기준으로 a[]은 주사위값, b[] 시간값, c[] 순위값 **
for(var i=0;i<5;i++){
rank=1;//초기화
for(var j=0;j<5;j++){
if(a[i]<a[j]) rank++;
else if(a[i]==a[i]){
if(b[i]>b[j]) rank++;
}
c[i]=rank;
}
대충 로직은 완성했습니다. 로직을 이해하기 앞서 아래 그림을 우선 이해해 주세요.
for문 i는 0~4까지로 a[0]~a[4]까지 접근하게 됩니다. 총 5개의 a[]데이터를 순차적으로 접근할 수 있습니다. 그러면 a[0]의 값이 다른 a[1]~a[4]의 데이터를 비교해서 순위가 과연 몇번째인지 알기 위해서는 다시 for문 j로 해서 나머지 데이터들과 순차적으로 비교를 통해 순위를 정하게 됩니다.
여기서, for문 j=0~4까지 순차적으로 반복하게 됩니다. 그렇게 되면 i=0일때 j=0이면 a[0]과 a[0]을 비교하게 되어서 자기자신을 비교 대상이 되는 로직입니다. 제외시킬 수 있지만 여기서는 단순한 로직으로 돌리기 위해서 필요 없는 비교까지 수행하게 했다는 점을 감안하시고 보시기 바랍니다. 비교해도 순위에는 변동이 없으니 상관 없습니다. 단순히 로직을 단순화 시키기 위해서 포함되었을 뿐이죠. 이제 2중 for문으로 a[0]일때 a[0]~a[4]까지의 값을 비교해야 겠죠. 위 그림에서 마지막 표현 처럼요.
if(a[i]<a[j])) rank++;
이렇게 2중 for문 안에서 a[i]가 순차적으로 a[j]값들을 비교하게 됩니다. 이렇게 하면 자기자신과 비교할때는 거짓으로 무시하고 넘어가고 다음 숫자랑 비교하게 됩니다. '<'은 a[i]가 a[j]보다 작다면 'rank++'로 순위는 a[j]보다 낮기 때문에 순위를 한칸 낮춘다는 의미입니다. 숫자가 클수록 순위는 떨어지겠죠. 총 자기자신을 포함한 나머지 voter들의 주사위 숫자랑 비교하게 됩니다. 그리고 다음 i=1일때 a[1]은 처음부터 다시 비교해야 하니깐 초기화 'rank=1'로 시작해서 다시 다른 voter들고 ㅏ비교하게 됩니다.
여기서, 특정 a[i]가 이런 과정을 5섯번 비교해서 나온 rank가 c[i]에 저장되어 최종 i번째 voter의 순위가 결정됩니다.
추가할 것은 주사위값 같은 경우는 보팅을 먼저 한사람에게 우선순위로 한다고 했죠. voter의 시간값이 저장된 b[]는 어디쯤에서 비교해 해야 할까요.
바로 if(a[i]<a[j]) 문장쪽에 추가해야 합니다. a[i]가 a[j]보다 높은 숫자이면 거짓으로 문장에서 빠져나오는데 여기서 한번 더 그러면 if(a[i]==a[j])로 그러면 같냐고 물어보면 됩니다.
다시 같다면 두 voter의 시간값을 비교해서 그러면 나보다 먼저 보팅을 했는지 비교하는 문장을 표현 하면됩니다.
if(a[i]<a[i]) rank++; //주사위 값이 작으면 순위에서 밀린다.
else if(a[i]==a[j]){ //두 주사위 값이 같으면
if(b[i]>b[j]) rank++; //시간값이 크면 늦게 보팅했으니 순위에서 밀린다.
}
종합하면은 위에 처음에 설계한 로직으로 표현하게 됩니다.
2) 실제 코딩로 코딩하기
위 순위 구하기 로직을 외부함수로 하나 만들어서 배열변수에 저장된 voters[]값을 통해 비교하시면 됩니다. 순위구하기 로직에서 주사위 값과 시간값에 해당되는 voters[].Dice, voters[].Time으로 변경해주시면 됩니다. 그리고 voter들의 숫자는 voters.length로 해서 for문을 돌리면 됩니다. 위 순위구하기 로직에해 해당된 위치 값만 voter[] 배열변수로 바꿔주시면 됩니다.
접근은 다음과 같습니다.
순위 로직에다가 위 표현을 그대로 대입만 하시면 됩니다.
function Rank(){ //순위 구하기
var rank = 1;
for (var i=0; i<voters.length; i++) {
rank = 1;
for (var j=0; j<voters.length; j++) {
if (voters[i].Dice < voters[j].Dice) rank++;
else if(voters[i].Dice == voters[j].Dice){
if(voters[i].Time>voters[j].Time) rank++;
}
}
voters[i].Rank = rank;
}
}
3. HTML로 구한 정보를 출력하자.
여기서 그냥 출력한다면 한가지 문제점이 발생합니다. 그것은 가독성이 떨어지는 출력물이 발생하게 됩니다. voters[]에 저장된 정보는 우리가 getactivevoters에서 읽어온 순서대로의 정보가 등록되어 있습니다. 그러면 이 순서대로 결과물이 출력될 수 밖에 없습니다. 만약에 300명의 주사위를 돌렸다고 생각해 봅시다. 여기서 237번째 voter가 1위라면 일일히 수백명의 데이터를 조회를 해야 합니다. 이때 필요한 것은 출력물을 순위별로 출력시키게 하는 것이죠.
저도 구글검색을 통해서 sort()함수에 대해서 찾아보니깐 재밌는 표현이 다수 검색에서 나타나더군요. c언어로 수작업으로 2중 for문을 써서 오름차순 내림차순 정렬을 코딩했던 기억이 있어서 그걸 쓸려고 했는데 간단한 표현이 있어서 그걸로 대체합니다.
voters.sort(function(a,b){return a.Rank-b.Rank;});
즉, 이표현으로 Rank값 기준으로 정렬이 되더군요.
간단히 정렬이 되었으니 이제를 그 결과를 이쁘게 출력해보도록 하겠습니다.
출력도 외부함수로 하나 만들어서 표현해보도록 하죠.
function RankOutput(){ //결과값 출력
var RankData = '';
voters.sort(function(a,b){return a.Rank-b.Rank;});
for(var i=0;i<voters.length;i++){
RankData += '<li>'+' ['+voters[i].Name+'] (Dice: '+voters[i].Dice+') '+voters[i].Time + '</li>';
}
document.getElementById("demo").innerHTML=RankData;
}
우선 RankData변수를 선언했습니다. 이곳에 HTML로 출력할 값을 저장하기 위해서 입니다. for문을 통해서 순차적으로 정렬한 voters[]정보들을 기록하면 됩니다. 좀 더 이쁘게 하기 위해서 번호매기기를 이용하서 순위표현을 나타냈습니다.
위 그림처럼 출력이 되도록 표현했네요.
RankData += '<li>'+' ['+voters[i].Name+'] (Dice: '+voters[i].Dice+') '+voters[i].Time + '</li>';
위 코드로 1위 voter값들을 순차적으로 저장하게 됩니다. 그걸 HTML로 보내면 이 형식에 맞게 HTML로 출력이 이뤄지겠죠.
이제 드디어 주사위 게임이 완성 되었습니다.
4. 추가 코딩
여기서 끝이 아닙니다. 이제는 HTML 태그 표현이 좀 남아 있습니다. 매번 문서 편집기로 포스트 주소를 저장하는것은 불편합니다. HTML에 입력창을 하나 남들어 놓으면 편하게 원하는 결과를 볼 수 있겠죠.
위 그림처럼 출력되게 디자인을 해봅시다.
<body>
<div>
Post Link : <input type="text" id="input_link" size="70">
<button onclick="DiceGame()">Go!</button>
<button onclick="Clear()">Clear</button></br>
Dice Number : <input type="text" id="input_dice" value="100">
<hr size="5" color=”#FF0000” noshade/>
</div>
<p id ='voters'></p>
<ol id='demo'></ol>
</body>
1) 자바스크립트로 입력창에 값을 가져오기
두개의 입력창과 두개의 버턴이 있습니다. 'input'태그의 있는 'id'값으로 자바스크립으로 값을 넘겨주게 됩니다.
var src = 'https://steemit.com/kr/@codingman/steemit';
이문장이 아래 문장으로 수정됩니다. 아래 코드는 문법 표현인데 'input_link'로 선언된 입력상자 값을 불러온다고 간단히 생각하시면 됩니다. 입력창에 post 주소를 넣으면 자동으로 주사위가 굴려지고 그 결과가 출력이 바로 되겠죠.
var src = document.getElementById('input_link').value;
그리고 또하나의 입력창은 주사위가 이전 소스에서는 100으로 고정되었습니다. 주사위 1000을 굴릴려면 또 문서편집해야 합니다. 귀찮은 문제이지요. 그래서 입력창에서 주사위는 초기에 100으로 세팅되지만 원하는 값을 넣고 실행시키면 원하는 숫자의 주사위가 돌아가고 그 결과를 출력하게 됩니다.
아까 주사위 계산한 함수가 외부 함수로 표현했던 Dice()함수였죠.
function Dice(){ //주사위 돌리기
var max = document.getElementById('input_dice').value;
return Number(Math.floor(Math.random() * max)+1);
}
함수로 분리해 놓으니 바로 함수만 찾아가서 그 위치만 수정하니깐 편하게 코딩하는 이점이 생겼네요. 여기서 max에 아까 입력창에 값을 불러오는 명령문을 복사해서 'input_dice'라고 아디만 고치면 되네요
2) 실행버턴으로 동작하기
<button onclick="DiceGame()">Go!</button>
두 태그가 있습니다. 게임을 실행하는 DiceGame()함수명이 있네요. 앞에 'onclick'이란 문구가 있죠. 버턴을 클릭할때 DiceGame()함수를 호출하시오라고 생각하시면 도비니다. 자바스크립트에서 어딘가에 선언된 DiceGame()함수를 호출하여 실행하게 됩니다. 지금까지 코딩한 전부의 내용을 여기에다가 넣으면 되겠죠.
function DiceGame(){
var voters = []; //voters 게임 정보를 저장
var src = document.getElementById('input_link').value;
var arrsrc = src.split('/');
var idsrc = arrsrc[arrsrc.length-2].replace('@','');
var author = idsrc;
var permlink = arrsrc[arrsrc.length-1];
steem.api.getActiveVotes(author, permlink, function (err, getactivevoters) {
var diceValue =0;
document.getElementById('voters').innerHTML='Voters : ' + getactivevoters.length + ' (Self is excluded.)';
for(var i=0;i<getactivevoters.length;i++){
if(getactivevoters[i].voter!=author){
diceValue = Dice(); //주사위
voters.push({Name: getactivevoters[i].voter, Dice: diceValue, Rank: 1, Time : getactivevoters[i].time});
}
}
Rank(); //순위
RankOutput(); //결과
});
function Dice(){ //주사위 돌리기
var max = document.getElementById('input_dice').value;
return Number(Math.floor(Math.random() * max)+1);
}
function Rank(){ //순위 구하기
var rank = 1;
for (var i=0; i<voters.length; i++) {
rank = 1;
for (var j=0; j<voters.length; j++) {
if (voters[i].Dice < voters[j].Dice) rank++;
else if(voters[i].Dice == voters[j].Dice){
if(voters[i].Time>voters[j].Time) rank++;
}
}
voters[i].Rank = rank;
}
}
function RankOutput(){ //결과값 출력
var RankData = '';
voters.sort(function(a,b){return a.Rank-b.Rank;});
for(var i=0;i<voters.length;i++){
RankData += '<li>'+' ['+voters[i].Name+'] (Dice: '+voters[i].Dice+') '+voters[i].Time + '</li>';
//console.log(ListRank);
}
document.getElementById("demo").innerHTML=RankData;
}
}
이렇게 표현하면 실행버턴을 누르면 이 함수내에 모든 로직이 동작하게 됩니다. 하나의 덩어리로 생각하시면 아마 될 듯요.
function DiceGame(){
게임로직;
}
3) DiceGame 초기화 시키기
우선 주사위를 굴렸습니다. 여러 게시물에 주사위를 굴려서 그 결과를 볼려고 하는데 이전 값을 지우고 나서 다시 입력하려면 불편하기 때문에 버턴을 하나 만들어서 처음 초기 상태로 변경하면 편하겠죠.
초가회 버턴은 이렇게 html에 선언하였습니다.
<button onclick="Clear()">Clear</button></br>
그리고,
function Clear(){
document.getElementById('input_link').value='';
document.getElementById('input_dice').value='100';
document.getElementById('voters').innerHTML='';
document.getElementById('demo').innerHTML='';
}
이렇게 post link 입력창은 지우고 주사위 수는 100으로 고정시키고 나머지 출력된 데이터 값들은 지우라는 명령입니다. 태크의 id 값을 잘 보시고 그 태그에 들어간 값을 null로 표현하면 다 지워지고 특정한 값을 넣으면 그 값으로 초기화 됩니다.
steem.api.getActiveVotes()함수의 정보를 가지고 여기까지 왔네요.
좀 보기가 그래서 수평선 하나를 중간에 넣었습니다.
<hr size="5" color=”#FF0000” noshade/>
5 오늘 공부한 내용을 종합한 결과
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Steem DiceGame</title>
</head>
<body>
<script src="https://cdn.steemjs.com/lib/latest/steem.min.js"></script>
<script>
function Clear(){
document.getElementById('input_link').value='';
document.getElementById('input_dice').value='100';
document.getElementById('voters').innerHTML='';
document.getElementById('demo').innerHTML='';
}
function DiceGame(){
var voters = []; //voters 게임 정보를 저장
var src = document.getElementById('input_link').value;
var arrsrc = src.split('/');
var idsrc = arrsrc[arrsrc.length-2].replace('@','');
var author = idsrc;
var permlink = arrsrc[arrsrc.length-1];
steem.api.getActiveVotes(author, permlink, function (err, getactivevoters) {
var diceValue =0;
document.getElementById('voters').innerHTML='Voters : ' + getactivevoters.length + ' (Self is excluded.)';
for(var i=0;i<getactivevoters.length;i++){
if(getactivevoters[i].voter!=author){
diceValue = Dice(); //주사위
voters.push({Name: getactivevoters[i].voter, Dice: diceValue, Rank: 1, Time : getactivevoters[i].time});
}
}
Rank(); //순위
RankOutput(); //결과
});
function Dice(){ //주사위 돌리기
var max = document.getElementById('input_dice').value;
return Number(Math.floor(Math.random() * max)+1);
}
function Rank(){ //순위 구하기
var rank = 1;
for (var i=0; i<voters.length; i++) {
rank = 1;
for (var j=0; j<voters.length; j++) {
if (voters[i].Dice < voters[j].Dice) rank++;
else if(voters[i].Dice == voters[j].Dice){
if(voters[i].Time>voters[j].Time) rank++;
}
}
voters[i].Rank = rank;
}
}
function RankOutput(){ //결과값 출력
var RankData = '';
voters.sort(function(a,b){return a.Rank-b.Rank;});
for(var i=0;i<voters.length;i++){
RankData += '<li>'+' ['+voters[i].Name+'] (Dice: '+voters[i].Dice+') '+voters[i].Time + '</li>';
//console.log(ListRank);
}
document.getElementById("demo").innerHTML=RankData;
}
}
</script>
<div>
Post Link : <input type="text" id="input_link" size="70">
<button onclick="DiceGame()">Go!</button>
<button onclick="Clear()">Clear</button></br>
Dice Number : <input type="text" id="input_dice" value="100">
<hr size="5" color=”#FF0000” noshade/>
</div>
<p id ='voters'></p>
<ol id='demo'></ol>
</p>
</body>
</html>
그리고 위 소스를 다음과 같이 메모장에 복사한 뒤에 저장해 주세요. 혹시 실수하실 수 있으니깐 다시 반복합니다.
결과는 4. 추가코딩에 있는 이미지처럼 출력됩니다. 구지 같은 이미지는 중복할 필요가 없겠죠.
마지막으로 한가지 더 수정한 부분이 있습니다.
for(var i=0;i<getactivevoters.length;i++){
if(getactivevoters[i].voter!=author){
diceValue = Dice(); //주사위
voters.push({Name: getactivevoters[i].voter, Dice: diceValue, Rank: 1, Time : getactivevoters[i].time});
}
}
여기서, 셀프보팅을 했을 경우는 주사위게임에서 제외시켜야 겠죠. 현재 정보를 저장하는 사람이 author(본인)은 if문으로 제외 시켰습니다.
if(getactivevoters[i].voter!=author){
주사위 굴리고 정보를 저장하라;
}
마무리
getActiveVotes()함수로 드디오 주사위게임 코딩 과정을 살펴보았습니다.
그런데 한가지 또 다른 아쉬운 점이 발생헸네요. post 주소만 입력하고 주사위 100을 변경할 수 있게 해서 원하는 주사위를 돌릴 수 있었습니다. 주사위값을 비교해서 순위를 정하고 주사위 값이 같을때에는 누가 먼저 보팅했는지 시간값으로 해서 순위를 정했습니다. 그리고 sort()함수로 정렬을 통해 젤 위에 1위부터 순차적으로 결과를 출력하게 하는 것 까지는 좋았는데 가장 아쉬운 것은 도대체 어떤 포스트에 주사위가 굴려졌는지 시각적으로 나타나지 않습니다. 주사위는 굴렸지만 어떤 포스트인지 시각적으로 확인하지 못한다면 좀 불편하겠죠.
그래서, post 제목을 가져오면 좋겠다는 생각이 문득 들었습니다. 제목과 이 결과를 합쳐서 출력하게 하면 좀 더 시각적으로 보기 좋겠다는 생각에 함수를 찾아보니깐 좋은 함수를 발견했습니다.
steem.api.getContent(author, permlink, function (err, getcontent) { } 함수입니다. 해당 게시물의 author(아이디), permlick(포스트주소)만 입력하면 해당 post의 모든 정보를 가져올 수 있는 꽤 재밌는 함수를 찾아냈습니다.
가져온 정보 중에 이런 정보도 포함되어 있더군요. 바로 게시물에 보팅한 정보를 같이 포함되어 있었습니다. 지금까지 getActiveVotes()로 힘들게 여기까지 왔는데 getContent()함수에 getActiveVotes()의 정보도 포함되어 있을 줄이야 첨부터 getContent()함수로 표현 했으면 모든 문제가 다 해결되었을 텐데 그냥 한숨만 나오더군요.
그래도 진행된 내용은 마무리는 해야 겠다는 생각으로 getActiveVotes() 함수로 오늘까지 포스팅을 진행하게 되었습니다.
내일은 간단히 getContent()함수를 이용해서 변경한 부분에 대해서만 설명하고 코딩 소스만 올릴 예정입니다. 미리 이 함수에 대해서 제대로 알고 있었으면 처음부터 getContent()로 포스팅 했을텐데 아쉽네요.
아무튼 주사위 게임 과정은 이걸로 마무리 하도록 하겠습니다. 추가로 HTML 디자인만 예쁘게 하셔서 나만의 주사위 이벤트를 한번 만들어 보세요.
WOW!!! OVER THE MOON @codingman
Thank you for your first visit
스팀의 써드파티 프로그램을 만드실 수도ㅜ있겠는걸요?? 호...혹시 네이버 블로그의 접기 기능도 가능할까요??
그냥 이제 함수 한개 기초적인것을 출발했는 걸요. 써드파티 프로그램정도로 만들려면 시각적 웹디자인 기술이 있어야 하는데 HTML, CSS 기억도 안남! 무슨 기능을 하나 쓸려면 구글 검색을 무자게 해야함!
네이버 블로그 형태로도 변형할려면 웹디자인 쪽을 좀 해야겠지요.
우선 데이터를 뿌려주는 것만 잘 연동하시면 불가능하지는 않겠죠.
기초적으로 할려면 생활코딩사이트에서 PHP 기초강좌가 있어서 그거 보시면 아마 어느정도 표현이 가능하실꺼에요.
우와. 이번껀 기네요. 만드는것도 만드는거지만 포스팅도 하려면 오래걸리셨을 것같아요.
코딩은 간단한 거러 얼마 안걸렸는데 이걸 설명을 할려고 하니깐 말재주가 없어서 좀 길어졌네요.
내일꺼까지 포스팅이 완성되었는데 한번 내일 돌려보세요.
github에 어제밤 계정하나 새로 만들어서 주사위를 그곳에다 올렸어요.
링크 내일 올릴 예정이고요 유치하게 표현한 코드이지만 실제 게시물 제목만 입력해서 결과가 어떻게 출력되는지 github페이지로 테스트 해보시면 아마 될꺼임
댓글을 달려고 아무리 읽어도 아무 댓글을 못달겠어요. ㅋㅋ
종합 소스만 메모장에다 복사해서 'test.html'로 저장하시고 크롬 브라우저에서 한번 실행 시켜 보세요.
대충 이런식으로 돌아가는 구나 정도만 이해 하셔도 돼요.
스팀 가즈아!
스팀 가즈야!