# 개요 알레오의 프로그래밍 언어인 Leo를 이용해서 간단한 가위, 바위, 보 게임을 만들어보자. 알레오에서는 문자열을 지원하지 않기 때문에 우리는 가위를 2, 바위를 0, 보를 5로 지정하고 숫자로 규칙을 만든 뒤 플레이어 1과 플레이어 2과 가위바위보 게임을 할 수 있게 할 것이다. # 사전 준비 * **LEO 개발 환경 설치하기** * [맥 전용 개발 환경 설치 문서 참고](https://ludium.world/participation/d15fa191-fc3d-4e85-84b0-d30265e779b9/167b3aa9-ea44-4172-a4c7-4eaa01222c67/article/3f170b1f-0761-455e-b700-e62253310770) * [윈도우 전용 개발 환경 설치 문서 참고](https://ludium.world/participation/d15fa191-fc3d-4e85-84b0-d30265e779b9/167b3aa9-ea44-4172-a4c7-4eaa01222c67/article/c75e6405-9da9-4f3d-8f52-56ab3f02bd79) * **LEO 계정 설치 및 크레딧 받기** * LEO 익스텐션 지갑을 설치하고 테스트넷에서 LEO 배포 수수료를 지급하기 위한 크레딧(Credit)을 받는다 * 상세 방법은 [첫 트랜젝션 보내기를 참고](https://ludium.world/participation/d15fa191-fc3d-4e85-84b0-d30265e779b9/f5706392-c547-48da-bdaf-9ff93dce604d/mission/e72e3a89-ea25-44a4-9f0a-60e4df84ae7b)한다 * 배포를 위해서는 **15 크레딧 이상**이 필요하다 * **미션 결과물 참고하기** * 미션 진행 참고용 aleo\_rock\_scissors\_paper : [[🔗](https://github.com/hex-aragon/aleo_rock_scissors_paper)] * 결과물을 참고하고 싶다면, 위 깃헙 링크를 통해 `git clone` 해보길 권장한다 # **Leo 가위바위보 만들기** ### 1\. 파일 만들기 * 알레오 디앱 프로젝트 파일을 생성한다 ``` npm create aleo-app@latest ``` * 프로젝트 이름을 설정한다. 예를 들어 `aleo_rock_paper_scissors`로 설정한다 * 프레임 워크와 언어를 선택한다. 예를 들어 `React`, `Javascript + LEO`로 선택한다 ![스크린샷 2024-02-01 오전 9.43.18.png](https://i.ibb.co/nfL147Y/2024-02-01-9-43-18.png) * 생성된 기본 파일 구조는 알레오 디앱의 기본 파일 구조와 동일하다. 자세한 설명은 [프라이빗 디앱 제작 개요의 프론트엔드 제작 방식을 참고](https://ludium.world/participation/d15fa191-fc3d-4e85-84b0-d30265e779b9/ead157dd-d399-4296-b223-28585958b90f/article/7b7d88d9-a19e-43ad-9232-668ee2dc62a8)한다. * `helloworld` 폴더의 이름을 자신이 원하는 폴더의 이름으로 변경한다. 예를 들어 `rock_paper_scissors`로 변경한다 * `helloworld/program.json` 파일의 `"program"` 이름을 자신이 설정할 프로그램의 이름으로 변경한다. 예를 들어 `rock_paper_scissors.aleo`로 변경한다 * `.env.example` 파일의 이름에서 `.example`을 지우고 `PRIVATE KEY`에 플레이어의 프라이빗 키를 입력한다 ### 2\. 가위바위보 게임 LEO 프로그램 코드 작성하기 * `rock_paper_scissors/src/main.leo`의 프로그램 코드를 아래의 코드로 변경한다. ``` // This example demonstrates the definition and initialization of a "struct" in Leo. program rock_paper_scissors.aleo { // The "Message" struct. struct Message { first: field, second: field, } transition main(m: Message) -> field { let m1: Message = Message { first: m.first, second: m.second, }; //바위 0 //가위 2 //보 5 //m1이 바위일 때 //바위랑 가위 > 바위 승 if(m1.first == 0field && m1.second == 2field){ return m1.first; } //m1이 바위일 때 //바위랑 보 > 보 승 if(m1.first == 0field && m1.second == 5field){ return m1.second; } //m1이 바위일 때 //바위랑 바위 > 무승부 if(m1.first == 0field && m1.second == 0field){ return 10field; } //m1이 가위일 때 //가위랑 바위 > 바위 승 if(m1.first == 2field && m1.second == 0field){ return m1.second; } //m1이 가위일 때 //가위랑 보 > 가위 승 if(m1.first == 2field && m1.second == 5field){ return m1.first; } //m1이 가위일 때 //가위랑 가위일 때 무승부 if(m1.first == 2field && m1.second == 2field){ return 10field; } //m1이 보일 때 //보랑 가위일 때 if(m1.first == 5field && m1.second == 2field){ return m1.second; } //m1이 보일 때 //보랑 바위일 때 if(m1.first == 5field && m1.second == 0field){ return m1.first; } //보랑 보일 때 if(m1.first == 5field && m1.second == 5field) { return 10field; } return m1.first + m1.second; } } ``` * leo의 로직코드는 field를 입력받고 각 2개의 파라미터에서 입력받은 것에 따라 주먹은 0, 가위는 2, 보는 5로 설정되어있는데 if 규칙에따라 결과가 결정된다. 예를 들어 m1이 0이고 m2가 2라면 바위와 가위로 표시되어 m1(ex. 플레이어 1)이 승리한다. ### 3\. Leo 프로그램으로 가위\,바위\,보 게임 실행하기 * `rock_paper_scissors` 디렉토리에서 다음의 커멘드를 입력한다 ``` leo run main "{ first: 0field, second: 2field }" ``` ![스크린샷 2024-02-01 오전 10.16.37.png](https://i.ibb.co/SwdWH6T/2024-02-01-10-16-37.png) * `Output`에 `0field`가 나타남을 확인할수 있다. 0이 바위고 2가 가위기이 때문에 바위가 이겼음을 표시하고 게임이 정상 작동함을 의미한다. ### **4\. 블록체인에 프로그래 배포하기** * 프로그램 배포를 위한 쉘스크립트 파일을 작성한다. 예를 들어 `deploy.sh` 파일을 생성한다 ``` touch deploy.sh ``` * **쉘스크립트 내용 작성** ``` APPNAME="rock_paper_scissors" ENV_FILE=".env" PRIVATE_KEY=$(grep "PRIVATE_KEY" $ENV_FILE | cut -d '=' -f2) snarkos developer deploy "${APPNAME}.aleo" \ --path "./build/" \ --private-key "${PRIVATE_KEY}" \ --query "https://api.explorer.aleo.org/v1" \ --priority-fee 1000000 \ --broadcast "https://api.explorer.aleo.org/v1/testnet3/transaction/broadcast" \ ``` * 쉘스크립트 실행을 위해 권한을 부여한다 ``` chmod 755 deploy.sh ``` * 위 코드와 같이 쉘스크립트를 만들고 다음과 같이 실행하면 테스트넷에 배포할 수 있다 ``` ./deploy.sh ``` 정상적인 배포가 진행될 때 출력되는 화면 ![스크린샷 2024-01-31 20-09-01.png](https://i.ibb.co/Gk7qmCH/2024-01-31-20-09-01.png) # 가위바위보 프론트엔드 만들기 * 프론트엔드 제작은 기본적으로 아래의 리포지토리에 있는 내용과 동일하다. 깃 클론을 통해 아래 리포지토리 실행을 추천한다. ``` git clone https://github.com/hex-aragon/aleo_rock_scissors_paper ``` * `aleo_rock_paper_scissors` 메인 파일 경로로 돌아간다 ``` cd /aleo_rock_scissors_paper ``` * `src/asset`에 클론한 깃헙 파일에 있는 png 파일들을 복사해서 가져온다. paper2.png, rock.png, rock2.png, scissors.png, scissors2.png가 있다. ![스크린샷 2024-02-01 오전 10.46.38.png](https://i.ibb.co/Nsdz6zg/2024-02-01-10-46-38.png) * `src/App.jsx` 파일에 아래 코드를 붙여 넣기한다 ``` import { useState } from "react"; import reactLogo from "./assets/react.svg"; import aleoLogo from "./assets/aleo.svg"; import "./App.css"; import rock_paper_scissors from "../rock_paper_scissors/build/main.aleo?raw"; import { AleoWorker } from "./workers/AleoWorker.js"; import scissorsImage from "./assets/scissors2.png"; import rockImage from "./assets/rock2.png"; import paperImage from "./assets/paper2.png"; const aleoWorker = AleoWorker(); function App() { const [executing, setExecuting] = useState(false); const [deploying, setDeploying] = useState(false); const arr = [0, 2, 5]; const [selectedValue, setSelectedValue] = useState(null); function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } const handleSelection = (value) => { setSelectedValue(value); }; async function execute() { let player1 = arr[getRandomInt(0, 2)]; let player2 = selectedValue; const final_player1 = player1 + "field"; const final_player2 = player2 + "field"; let input = `{ first : ${final_player1}, second : ${final_player2}}`; setExecuting(true); const result = await aleoWorker.localProgramExecution( rock_paper_scissors, "main", [input] ); setExecuting(false); console.log("JSON.stringify(result)", JSON.stringify(result)); console.log(JSON.stringify(result)[0]); if (result[0] === "10field") { alert("무승부!"); } else if (result[0] === final_player1) { alert("player1 승리"); } else if (result[0] === final_player2) { alert("player2 승리"); } else { alert("error"); } } async function deploy() { setDeploying(true); try { const result = await aleoWorker.deployProgram(rock_paper_scissors); console.log("Transaction:"); console.log("https://explorer.hamp.app/transaction?id=" + result); alert("Transaction ID: " + result); } catch (e) { console.log(e); alert("Error with deployment, please check console for details"); } setDeploying(false); } return ( <>

Aleo Rock, Scissors, Paper ZkGame

{/* 가위, 바위, 보 버튼 */}

가위, 바위, 보

당신은 Player1입니다 다음 중 먼저 가위/바위/보 중에 한개를 선택하세요

{/* 선택된 값 표시 */} {/* {selectedValue !== null &&

Selected value: {selectedValue}

} */}

그리고 하단의 버튼을 클릭하시면 컴퓨터의 가위,바위,보가 나오고 결과를 알 수 있습니다.

{/* 나머지 코드 ... */} {/* Advanced Section */}

Advanced Actions

다음은 가위,바위,보 게임을 Aleo 테스트넷에 배포하는 버튼입니다. 클릭해보세요, 단 .env에 저장한 private key의 계정으로 배포하는 것입니다

); } export default App; ``` * 패키지를 설치하고 실행한다 ``` npm i npm run dev ``` * 그러면 다음과 같은 화면을 프론트엔드에서 볼 수 있다. ``` 프롬프트에 나온 http://localhost:5173 or http://localhost:Port ``` ![스크린샷 2024-01-24 23-14-22.png](https://i.ibb.co/F767Bb0/2024-01-24-23-14-22.png) 먼저 플레이어1은 현재 프로그램을 설치하고 실행한 사람이 플레이어1이다, 그래서 가위바위보를 선택할 수 있는데 화면에서 가위, 바위, 보를 선택하면 되 그리고 밑에 "Execute rock, scissors, paper"를 누르면 player2가 랜덤하게 가위바위보를 선택하는데 게임 결과에 따라서 alert로 결과를 알려주고 있다. 다음은 게임결과를 볼 수 있는 화면이다. ![스크린샷 2024-01-24 23-21-51.png](https://i.ibb.co/477tgtX/2024-01-24-23-21-51.png)

가위바위보 게임 만들기