Steem.js API로 게시물 주사위게임 만들기 (3)
- 주사위 페이지 : https://steemcoding.github.io/dicegame.github.io/
- 소스 위치 : https://github.com/steemcoding/dicegame.github.io/blob/master/index.html
(나중 수정을 위해 자바스크립트는 dicegame.js로 빼내고 index.html 분리 시켰음)
오늘은 어제 예고 했던 steem.api.getContent(author, permlink, function (err, getcontent)를 통해서 주사위게임을 수정해 보겠습니다. 대부분 표현은 그대로 사용합니다. 단지 읽어 온 데이터에서 포스트 제목 코딩만 추가 됩니다.
1. steem.api.getContent()란 무엇인가?
getContent()함수는 해당 Post에 들어 있는 모든 정보를 가져오는 함수입니다.
<script src="https://cdn.steemjs.com/lib/latest/steem.min.js"></script>
<script>
var src = 'https://steemit.com/kr/@codingman/steemit';
var arrsrc = src.split('/');
var idsrc = arrsrc[arrsrc.length-2].replace('@','');
var author = idsrc;
var permlink = arrsrc[arrsrc.length-1];
steem.api.getContent(author, permlink, function(err, result) {
console.log(err, result);
});
</script>
결과는 다음과 같이 출력이 됩니다.
이 함수에는 게시물 정보 뿐 아니라 voters의 정보도 포함 되어 있습니다. 이 voters의 정보를 토대로 지난 시간에 만들었던 주사위 게임 만들었기 때문에 동일한 정보임으로 소스에는 영향이 없겠죠. 오늘은 지난 시간의 소스에서 제목부분만 추가만 하면 되니깐요. 이제 그 작업을 해보도록 하겠습니다.
2. 주사위 게임 만들기
steem.api.getActiveVotes(author, permlink, function (err, getactivevoters) {
getactivevoters 정보;
});
여기서 getactivevoters 정보를 아래 함수에서 가져오기만 하면 됩니다.
steem.api.getContent(author, permlink, function (err, getcontent) {
var getactivevoters = getcontent.active_votes;
.....
});
이렇게 저장공간인 변수를 선언해서 게시물정보에서 voters의 정보를 getactvevoters에 담게 됩니다. 그러면 나머지 코딩은 지난시간에 코딩한것을 그대로 수정없이 사용하면 됩니다.
한가지 더 추가하자면,
<h2 id ='title'></h2>
document.getElementById("title").innerHTML= 'POST : '+ getcontent.title;
이렇게 포스트 제목을 출력 할 위치를 HTML로 표현하고 나머지 getcontent.tilte에 저장된 Post 제목을 출력하는 코딩만 추가하면 됩니다.
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.getContent(author, permlink, function (err, getcontent) {
var getactivevoters = getcontent.active_votes;
var diceValue =0;
document.getElementById("title").innerHTML= 'POST : '+ getcontent.title;
document.getElementById("voters").innerHTML='Voters : ' + getactivevoters.length +' (Self is excluded! Voting time priority!)';
document.getElementById('time').innerHTML = Date()+'
';
for(var i=0;i<getactivevoters.length;i++){
if(getactivevoters[i].voter!=author){
diceValue = Dice(); //주사위
voters.push({Name: getactivevoters[i].voter, Dice: diceValue, Rank: 0, Time : getactivevoters[i].time});
}
}
Rank(); //순위
RankOutput(); //결과
});
진짜로, 주사위 게임은 끝났습니다. 더이상 건들 부분은 없네요.
3. 오늘 공부한 내용을 종합한 결과
<!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('title').innerHTML='';
document.getElementById('voters').innerHTML='';
document.getElementById('time').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.getContent(author, permlink, function (err, getcontent) {
var getactivevoters = getcontent.active_votes;
var diceValue =0;
document.getElementById("title").innerHTML= 'POST : '+ getcontent.title;
document.getElementById("voters").innerHTML='Voters : ' + getactivevoters.length +' (Self is excluded! Voting time priority!)';
document.getElementById('time').innerHTML = Date()+'
';
for(var i=0;i<getactivevoters.length;i++){
if(getactivevoters[i].voter!=author){
diceValue = Dice(); //주사위
voters.push({Name: getactivevoters[i].voter, Dice: diceValue, Rank: 0, 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 += '' +' ['+voters[i].Name+'] (Dice: '+voters[i].Dice+') '+voters[i].Time + '';
//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" size ="10" value="100">
<hr size="5" color=”#FF0000” noshade/>
</div>
<h2 id ='title'></h2>
<p id ='voters'></p>
<p id ='time'></p>
<ol id='demo'></ol>
</body>
</html>
여기서, 위 소스에서 수정한 부분이 몇가지 있는데 이부분을 간단히 설명하겠습니다. 이것은 HTML로 출력할때 조금 더 보기를 좋게 하기 위한 수정이니깐 구지 않하셔도 됩니다.
변경부분만 간단히 설명할께요.
document.getElementById("title").innerHTML= 'POST : '+ getcontent.title;
document.getElementById("voters").innerHTML='Voters : ' + getactivevoters.length +' (Self is excluded! Voting time priority!)';
document.getElementById('time').innerHTML = Date()+'
';
위에서 포스트 제목을 추가했다고 했죠. 거기에다가 현재 주사위를 돌린 시간을 마지막줄로 Date()함수를 이용해서 출력시키도록 표현 했네요. 그리고 수평선 태그를 같이 이곳에서 코딩해서 출력될때 수평션까지 같이 나오도록 했습니다.
그다음 부분을 설명드리겠습니다.
변경전,
RankData += '' +' ['+voters[i].Name+'] (Dice: '+voters[i].Dice+') '+voters[i].Time + '';
변경후,
RankData += '' +' ['+voters[i].Name+'] (Dice: '+voters[i].Dice+') '+voters[i].Time + '';
태그로 글자 <strong>태그 진하게, <font clor="blue">태그 글자색 변경정도만 넣었습니다.
이렇게 표현함으로써 수정은 끝났네요.
4. 결과
금요일날에 포스팅을 완료하고 간단히 수정한 뒤에 이번 포스팅을 편하게 작성했네요. 포스팅 올린 날은 일요일인데 이 포스팅이 완성된 날은 금요일이네요. 어찌 되었든 목요일 포스팅 내용을 완결을 시켜야 했기 때문에 이 포스트는 하루가 또 밀리게 되었네요.
아무튼, 결과는 어느정도 원하는 형태로 깔끔하게 출력 되었습니다. 위에 완성된 소스를 지난시간에 설명한대로 메모장에 복사하셔서 크롬브라우저에서 실행시켜 보세요. 그리고 원하는 게시물을 선택하셔서 주사위를 돌려보세요. 대충 대세글 하나를 선택하셔서 수백명이 보팅한 유저들의 정보를 가지고 주사위를 굴리는 실험을 해주세요.
[ 문서편집창에서 실행]
[Github에 올린 곳에서 실행]
둘 다 정상적으로 잘 작동하네요. 메모장에 소스 복사하셔서 웹브라우저로 여시면 됩니다.
귀찮은 분들은 https://steemcoding.github.io/dicegame.github.io/ 에서 바로 실행 결과를 확인하셔도 돼요.
위에 해당 실행파일이 있는 저장 위치가 있으니깐 가셔서 코드를 살펴보셔도 됩니다.
참고로 위 이미지에 나온 게시물 주소로 하지 마시고 본인의 게시물 주소를 돌려보세요.
혹시 HTML을 변경해 보고 싶다면
위치 : https://getbootstrap.com/docs/4.0/components/alerts/
이 사이트로 가시면 꽤 멋있는 컴포넌트들을 제공하네요.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
단, HTML에 이 문구를 넣어야지 컴포넌트를 사용할 수 있습니다.
가져다가 이쁘게 디자인 하면 좀 더 그럴싸하게 보이겠지요.
포스트 주제는 주사위 게임이니 HTML 출력 디자인을 이쁘게 할 필요도 없기 때문에 여기서 마무리 하도록 하겠습니다.
마무리
steem.api.getContent()함수로 원하는 주사위게임을 만들었네요. 여러분들도 Steem API로 읽어온 데이터를 어떻게 활용할지 주제를 정해서 공부를 해보세요. 그러면 정보를 읽는것도 공부지만 그걸 표현하기 위한 다른 부분들을 찾아가면서 공부하게 됩니다.
주사위 게임은 간단합니다. 난수 함수로 쉽게 1~100까지 주사위를 굴릴 수 있습니다.
Number(Math.floor(Math.random() * max)+1);
이 코딩 한줄로 주사위 굴리는 핵심 동작은 끝납니다. 하지만 여기서 끝내면 아무런 발전이 없습니다. 이 주사위 굴리는 로직과 Steem API에게 가져온 정보와 결합하여 새로운 것을 만들어 낼려고 상상력을 발휘하니깐 이렇게 괜찮은 주사위 게임을 완성이 되었습니다.
위 난수 구하기 식은 사실 주사위를 돌리는 사람이 많을 수록 1위와 같은 수를 가진 사람이 좀 많이 나오네요. 수학적으로 좀 더 난수의 확률을 떨어뜨리는 식으로 변경하시면 좀 더 좋을 듯 싶네요.
사실 별개 아닌 코딩입니다. 코딩하는분들에게는 유치한 코딩입니다. 하지만 중요한 것은 Steem API를 통해서 얻은 특정한 정보를 토대로 이런걸 해볼까 하는 상상력에서 살이 붙어서 주사위 게임이 완성 되듯이 여러분들도 어떠한 정보나 원리를 알게 되면은 이걸로 무엇을 할 수 있을까 끊임없이 상상력을 발휘를 해보세요.
그러면 의도치 않게 괜찮은 작품들이 탄생하게 됩니다.
오늘도 한마디, 만약 네가 이정보를 토대로 나는 무엇을 상상할 수 있을지 상상의 나래를 펼쳐보세요.