Object.entries, find, findIndex

var 이미지좌표 = 0;
//자료구조의 일종으로 자바스크립트 객체는 딕셔너리 자료구조 역할을 할 수 있다. 1:1 매칭을 표현한다.
var 딕셔너리 = {
    //1:다를 매칭할 수도 있다. 예를 들어 한국어를 다른 언어들로 표현하고 싶을 때
    //바위 : ['0','바위','rock'],
    // 바위 : { 객체로 만들 수도 있다.
    //     한국어 : '바위',
    //     영어 : 'rock',
    //     값 : '0',
    // }
    바위 : '0',
    가위 : '-142px',
    보 : '-284px',
}
/*값이 전환이 안 되기 때문에 같은 딕셔너리를 2개 만들고 값이 바뀔 때마다 수동으로 바꿔줘야한다.
var 딕셔너리2 = {
    '0' : '바위',
    '-142px' : '가위',
    '-284px' : '보',
}*/
//Object.entries(객체)로 객체를 2차원 배열로 바꿀 수 있다.
//console.log(Object.entries(딕셔너리));//[ "키": "값"],[ "키": "값"],[ "키": "값"] 각각 [0][1][2] 로 나온다.
function 컴퓨터의선택(이미지좌표) {
    return Object.entries(딕셔너리).find(function(v){//배열.find는 반복문이지만 원하는 것을 찾으면 멈춘다.(return이 true). 1차원 배열에서 indexOf를 썼다면 2차원배열에서는 find와findIndex를 잘 쓴다.
    console.log(v);
    return v[0] === '이미지좌표';//0번째가 이미지좌표인 애를 찾는다.반복되는 변수와 그것을 일반화하여 매개변수로.
    })[0];
}


setInterval(function() {
    if(이미지좌표 === 딕셔너리.바위) {
        이미지좌표 = 딕셔너리.가위;
    } else if (이미지좌표 === 딕셔너리.가위) {
        이미지좌표 = 딕셔너리.보;
    } else {
        이미지좌표 = 딕셔너리.바위;
    }
    document.querySelector('#computer').style.background = 'url(https://en.pimg.jp/023/182/267/1/23182267.jpg) ' + 이미지좌표 + ' 0 ';
},100);//0.1초마다 계속 실행한다.
//가위 바위 보 다 선택할 수 있다.querySelectorAll을 유사배열처럼 사용하여 반복문을 사용할 수 있다.
// for(var i = 0; i < document.querySelectorAll('.btn');i += 1) {
//     document.querySelectorAll('.btn')[i].addEventListener('click',function(){
//     console.log(this.textContent);
//     });
// }
//위처럼 반복문을 사용할 수도 있지만 querySelectorAlldms forEach를 지원한다.
document.querySelectorAll('.btn').forEach(function(btn){
    btn.addEventListener('click',function() {
        var 나의선택 = this.textContent;
        console.log(나의선택,컴퓨터의선택(이미지좌표));
    });
})