//바르지 못한 방법:
Event.observe('myContainer', 'click', doSomeMagic);

//적당한 방법: 논쟁의 여지가 있지만 객체지향적이다!
$('myContainer').observe('click', doSomeMagic);

흠.. 전자를 사용하였는데.. 논쟁의 여지가 있는줄에 대해서는 알지 못하였다.


//바르지 못한 방법:
$$('div.collapsed').each(function(el){
    el.observe('click', expand);
})
//적당한 방법: invoke를 이용한 이벤트 핸들링, 졸라 쉽다!
$$('div.collapsed').invoke('observe', 'click', expand)

//바르지 못한 방법:
$$('input.date').invoke('observe', 'focus', onFocus);
$$('input.date').invoke('observe', 'blur', onBlur);
//적당한 방법: $$는 오버해드가 크기 때문에 invoke를 사용하면 $$를 여러번 사용할 필요도 없다.
$$('input.date').invoke('observe', 'focus', onFocus).invoke('observe', 'blur', onBlur)

//바르지 못한 방법:
$('productTable').innerHTML =
    $('productTable').innerHTML +
    '<tr><td>' + productId + ' '
    + productName + '</td></tr><tr><td>'
    + productId + ' ' + productPrice +
    '</td></tr>'
//적당한 방법: Template 클래스는 정말 쓸만한 DOM 솔루션이다. 하지만 잘 사용되고 있지 않는 것 같다.
var rowTemplate = new Template('<tr><td>#{id} #{name}</td></tr><tr><td>#{id} #{price}</td></tr>');
$('productTable').insert(
    rowTemplate.evaluate({
        id: productId,
        name: productName,
        price: productPrice
    }))
)

이 사진을 보면 포기하시란건 아니면 캬캬캬캬..

 

박목사는 이어 “앞으로 300여명이 아니라 3000여명의 배형규(사망) 목사가 나와야 한다. 이번 일로 인해 선교가 위축되지 않아야 할 것”이라고 밝혔다고 에클레시안 뉴스는 전했다.

var Ani = Class.create();
Ani.prototype = {

initialize: function(img, element, options){

this.options = Object.extend({
cnt: 0, // 애니메이션 몇장의 컷인가?
width: 0, // 애니메이션 크기
height: 0, // 애니메이션 높이
line: 0, // 이미지 줄
field: 0, // 이미지 몇개에
x: 0, // 시작 x점
y: 0, // 시작 y점
interval: 0, // 인터발 시간이며, 이 시간은 javascript 의 시간이다. 1초 = 1000
repeat: 0, // 이미지 반복횟수
type: 'image' // 타입은 background, image 형 두개가 있다.
}, options || {});

this.img = img;
this.element = (typeof(element) == 'string') ? $(element) : element;


this.aniNode = document.createElement('div');
Element.setStyle(this.aniNode, {width:this.options.width+'px', height:this.options.height+'px', overflow:'hidden', position:'relative'});
this.element.appendChild(this.aniNode);

this.options.x = this.options.x*-1;
this.options.y = this.options.y*-1;
this[this.options.type]();
this.repeat = 1;
this.cnt = 0;

this.line = 0;
this.field = 0;
this.interVal = setInterval(this.ani.bind(this), this.options.interval);
},

ani: function()
{
var x = y = 0;

if((this.options.cnt-2) < this.cnt)
{
this.cnt = 0;
this.repeat++;

this.line = 0;
this.field = 0;
}

// 리피트가 넘으면 종료
if(this.options.repeat < this.repeat)
{
clearInterval(this.interVal);
return;
}


//alert(this.cnt%this.options.field);
if((this.cnt%this.options.field) == (this.options.field-1))
{

this.line++;
this.field = 0;
}

y = (this.line * this.options.height)*-1;
x = (this.field * this.options.width)*-1;
y = this.options.y+y;
x = this.options.x+x;


if(this.options.type == 'background')
{
this.aniNode.style.backgroundPosition = x+'px '+y+'px';
}
else
{
this.imgNode.style.top = y+'px';
this.imgNode.style.left = x+'px';
}

this.cnt++;
this.field++;

},

background: function()
{
this.aniNode.style.backgroundImage = 'url('+this.img+')';
this.aniNode.style.backgroundPosition = this.options.x+'px '+this.options.y+'px';
},

image: function()
{
this.imgNode = document.createElement('img');
this.imgNode.setAttribute('src', this.img);
Element.setStyle(this.imgNode, {position:'absolute', top:this.options.y, left:this.options.x});
this.aniNode.appendChild(this.imgNode);
}
}

고스톱 시작 Flow

1. 게임을 시작한다.

2. 카드패를 섞은후 서버로 부터 가져온다.
3. 패를 분배시킵니다.
    - 먼저 테이블에 카드 4장 설정함.
    - 선에게 5장의 패를 준다.
    - 유저에게 5장의 패를 준다.
    - 테이블에 나머지 4장을 설정함.
    - 선에게 나머지 5장을 준다.
    - 유저에게 5장의 패를 준다.
4. 테이블의 카드를 정렬시킨다. (각패의 속성별로)
5. 테이블 카드의 패 점검    
- 보너스 카드를 점검한다.
      보너스 카드가 있다면 선에게 제공한다.
      히튼카드에서 새로운 카드를 오픈하며, 에러코드 발생 errCode = 50;
      새로운 카드를 위치 시킨다.
      + 이미 같은 속성의 카드가 있다면, 해당 위치로 이동한다.
      + 새로운 속성의 카드면 새로운 위치의 포지션으로 이동한다.
    - 네장의 카드가 있는지를 점검한다.
      네장의 카드가 있다면 선에게 제공한다.
      히튼카드에서 새로운 카드를 오픈하며, 에러코드 발생 errCode = 51;
    - 패점검에서 errCode 50, 51이 발생시 테이블 카드를 재점검한다. (5번 로직 태운다) 정상이라면 0.

6. 회원 패 점검
    - 4장의 카드가 있는지를 점검한다. 있다면 대통령을 할지 말지 로직 태운다.
    - 회원의 패를 다시 재정렬한다.

7. 선이 고스톱을 칠수 있도록 UI제공 완료

고스톱 회원이 패를 골랐을때 Flow

1. 회원패의 유효성 검사
    - 선택된 패가 3장이라면
      폭탄 사용시 Visual하게 폭탄 사용한 화면 표시
      사용한다면
          폭탄 사용후 회원패에 폭탄사용한 이미지 출력..
          폭탄 사용시 Sound 동기화
          폭탄 사용중 이미지 *2
      사용하지 않는다면
         폭탄에 대한 정보가 사라짐.
    - 선택된 패가 보너스 카드면...
      축하축하 맨트 제공
      히든패 하나 오픈
      히든패를 나에게 준다.
    - 선택된 패가 폭탄패이면 바로 히든패를 바로 오픈한다.
2. 일단 선택한 패가 바닥에 있다면 해당 위치에 패를 가져다 놓는다.
    - 바닥패가 1개면 EventCode = 1; (싸는 경우의 수가 생긴다.)
    - 바닥패가 2개면 EventCode = 2; (따딱 이벤트가 발생할 수 있다.)
    - 바닥패가 3개면 EventCode = 3; (전부 가져갈 수 있을수 있다.)

3. 해당 패를 바닥에 없다면 새로운 포지션을 해당패를 옮겨둡니다.
    - 바닥패가 없으므로 EventCode = 4 (쪽이벤트가 발생할 수 있는 경우)

4. 히든패를 오픈한후
    - 오픈한 패가 보너스 카드면, 해당 패에 쌓아두고 새로운 패를 오픈한다. 4번 로직 다시
    - 같은 속성의 패가 3장이며, 이벤트코드가 1번이면 회원은 싸는 경우이다. 모든패를 바닥에 두고 온다.
       사운드 제공
       싼패에 대한 정보를 저장해둠. Js
    - 같은 속성의 패가 4장이며, 이벤트코드가 2번이면 따딱
      사운드 제공
      해당패를 모두 가져오며, 상대피를 한장 가져온다.
    - 같은 속성의 패가 4장이며, 이벤트 코드가 3번이면
      사운드 제공
      해당패를 모두 가져오며,
      내가 싼패라면 2장을 가져오고 아니라면 한장을 가져온다.
    - 같은 속성의 패가 두장이며, 이벤트 코드가 4번이면
      사운드 제공
      해당패를 가져오며, 상당회원의 패를 1장 가져온다.
    - 같은 속성의 패가 두장이며, 이벤트 코드가 1번이면 해당 패를 가져온다.

5. 회원패를 가져오며,
    - 각 패를 점수별로 구분한다.
    - 점수를 계산한다.
       오광, 고스톱, 피, 점등을 계산한다.
    - 점수가 7점이상이면 고&스톱여부를 확인한다.
       고를 할 경우 회원이 고를 몇번하였는지에 대해서 저장한다.
      스톱을 할 경우 게임을 종료한다.