Giter Site home page Giter Site logo

njw1204 / hot-play Goto Github PK

View Code? Open in Web Editor NEW
7.0 2.0 2.0 22.75 MB

[D2 CAMPUS FEST mini] Universal game replay module on the web (e.g. LOL, PUBG...)

License: MIT License

JavaScript 44.76% Python 27.58% CSS 13.41% EJS 14.25%
replay web-player multiplayer-game league-of-legends pubg

hot-play's Introduction

HotPlay - Universal Game Replay Module

HotPlay

HotPlay는 LOL, PUBG 등 각종 게임의 replay를 브라우저에서 감상할 수 있게 만드는 프로젝트입니다. 어느 게임이든지 상관없이 저희의 통합 파일으로 변환만 하고 API 호출을 하면 리플레이를 볼 수 있는 웹 페이지를 내려줍니다. 범용성 있는 게임 지원에 중점을 두어 개발했습니다.

스크린샷

1) PUBG

screenshot 1

2) LOL

screenshot 2

시작하기

  1. npm install 명령어로 패키지를 설치하세요.
  2. npm start 명령어로 서버를 실행하세요.
  3. http://127.0.0.1:3000으로 브라우저에서 접속하세요.
    • Watch Replay 버튼을 클릭하고 HotPlay 전용 replay 파일(JSON 확장자)을 업로드 하면 리플레이를 볼 수 있습니다.
    • 리플레이 테스트 용도로는 sample_dataset 폴더에 있는 파일을 업로드하면 괜찮습니다.
    • API 메뉴를 선택하면 Swagger UI를 통해 API 형식을 파악하고 테스트할 수 있습니다.

HotPlay 전용 replay 파일에 대해

HotPlay는 범용성 있는 replay 지원을 위해 HotPlay 전용 replay 파일(JSON 확장자)을 사용합니다. 기존 게임의 replay를 HotPlay 전용 파일로 변환해서 사용하면 됩니다. 어느 게임이든지 쉽게 변환할 수 있도록 스키마를 설계했습니다.

  • api-converter/api_convert_tool.py를 통해 LOL과 PUBG의 replay를 HotPlay 전용 파일로 변환할 수 있습니다.
  • 그 외의 게임은 리플레이 스키마에 맞춰 변환기를 제작해서 사용하시면 됩니다.
  • HotPlay 전용 replay 파일의 스키마는 Swagger UI를 통해 제공하고 있습니다.

디렉토리별 설명

1. api_converter

LOL과 PUBG의 리플레이 API 호출 결과를 HotPlay 전용 replay 파일으로 변환하는 파이썬 스크립트가 담겨있습니다. 설계 목적상으로는 컨버팅은 사용자의 몫이지만, 테스트를 돕기 위해 간단히 스크립트를 작성했습니다. requirements.txt 설치 후 사용해주세요.

사용법 : api-converter/api_convert_tool.py를 Python 3으로 실행한 후 요구하는 입력값을 넣으면 HotPlay 통합 JSON 파일이 생성됩니다.

2. public

HotPlay 웹 페이지에서 이용하는 정적 파일(assets, css, js)이 담겨있습니다.

3. sample_dataset

이곳에는 샘플 목적인 HotPlay 전용 replay 파일들이 포함되어 있습니다. 샘플 데이터들로 리플레이가 잘 나오는지 테스트할 수 있습니다. sample_dataset/error_testset에는 형식이 잘못된 데이터들이 있습니다. 서버가 오류 처리를 제대로 하는지 테스트해볼 수 있습니다.

4. swagger

HotPlay API를 Swagger(OpenAPI) 형식으로 작성한 파일이 포함되어 있습니다. 이 파일을 이용해 Swagger UI가 구성되고 데이터 검증 및 오류 처리에 사용됩니다.

5. tools

프로젝트 개발 과정에서 사용하기 위해 제작한 간단한 툴이 포함되어 있습니다.

6. views

웹 페이지 템플릿 파일(ejs 형식)이 포함되어 있습니다.

사용한 오픈소스

  • 프론트엔드 : vue, vue-slider-component, pixi.js, pixi-filters, howler, purecss, particles.js, font-awesome
  • 백엔드 : node.js, express, ejs, api-schema-builder, compression, cors, helmet, http-status, morgan, swagger-ui-express
  • 스크립트 : pubg-python, riotwatcher, beautifulsoup

지적재산권

이 프로젝트에서는 LOL과 PUBG의 지적재산권(Intellectual Property)을 사용하고 있습니다. Riot Games의 Legal Jibber Jabber, PUBG의 Player-created Content 약관을 따르고 있으며, 비상업적 목적으로 사용하고 있습니다.

hot-play's People

Contributors

njw1204 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

hot-play's Issues

D2 Fest Campus 문의사항용 이슈

안녕하세요. 네이버 스포츠에서 일하고 있는 김기훈 입니다 ^^;
제가 생각한 말도 안되는 어플리케이션 구현해주시느라 매우 고생많으셨습니다 ㅎㅎ
게임을 좋아하시는 분들이라면 그나마 즐겁게 작업하지 않으셨을까 생각해봅니다.
저도 고민하는 내내 즐거웠습니다.

행사 주최측에서 받은 가이드론 8월 14일까지 평가 제출 하라고 합니다.
그래서 다음주 평일중으로 면밀하게 살펴볼 예정인데요.
고치고 싶은 부분이 있다면 중간중간 커밋 정도는 하셔도 될 것 같습니다.
(이전 히스토리 바꾸는 force push 는 지양)

자주 들어올테니 저에게 궁금하신건 여기 이슈에 적어주셔도되고, 제 메일로 문의주셔도됩니다.
메일을 잘보는 편이 아니라 사내, 개인메일을 동시에 보내주시면 인지를 좀 금방해서 보다 빨리 답변드릴수있습니다.
[email protected] [email protected]

저 역시 테스트 도중에 문의사항 생기는 것은 요 이슈에 질문 하도록 하겠습니다.

끝으로 어떠한 결과가 나오더라도, 개발적인 이야기나 네이버 실제 서비스, 현업이야기 등등
궁금한건 편하게 나눌 수 있는 좋은 관계가 되었으면 좋겠습니다~
감사합니다.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.