Giter Club home page Giter Club logo

boreal's Introduction

How to adapt a game for Game Park!

Welcome, developer! This documentation will guide you if you would like to adapt a game for Game Park.

First, make sure you have an agreement with us about the game you are going to adapt.

Then, let's code ๐Ÿ™‚

1. Create a new project

You must install Git on your computer, and create an account on Github if you do not have one.

Then, you need a repository for you game. You can either wait for us to create one, or use our template on Github to create a new repository

We recommend to use this syntax to name the repository: "name-of-your-game"

2. Start the game

Use Visual Studio Code, Webstorm or any IDE you like to open the code on you computer.

You must also install Node.js and Yarn

The project has dependencies, which you can find inside /app/package.json and /rules/package.json.

You must install the dependencies using Yarn. Run this command line in the project's folder: yarn install

Now, you should be able to start the game on your computer: yarn start

It should open a browser window on http://localhost:3000 and display the first version of your game. It is a debug session: if you change something in the code, it will automatically apply the changes!

This version does not interact with Game Park servers. It is 100% local. Inside the console of this browser window, you can run those commands:

  • Start a new game with X players: game.new(X) (default is 2)
  • Have the other players play automatically random moves: game.monkeyOpponents(true)
  • Undo the last move: game.undo()

3. The code

Every game on Game Park has 2 parts: "rules" and "app".

The rules part contains the code that will run on Game Park servers once the game is deployed. Here we enforce the rules and the lifecycle of the game.

The app part contains a React application, that will create static files and call the Game Park API to interact with other players in real-time.

3.0 Rename the default values in the template

Search and replace in every file:

  • Boreal => Name of your Game
  • Boreal => NameOfYourGame
  • boreal => name-of-your-game

3.1 The Material

Board game have Material, made of cards, boards, tokens...

The file MaterialType.ts lists the types of Material in the game.

Tips: add you material types one by one. If you have different kinds of boards, cards or token that never mix together, use a different type for each of them.

Example:

export enum MaterialType {
  Card = 1
}

When you add a new MaterialType in the rules, you have to describe how it looks like in the app, inside Material.tsx.

Example:

import back from '../images/cards/back.jpg'
import card1 from '../images/cards/card-1.jpg'
import card2 from '../images/cards/card-2.jpg'
import card3 from '../images/cards/card-3.jpg'

export const Material: Record<MaterialType, MaterialDescription> = {
  [MaterialType.Card]: CardsDescription,
}

export const CardsDescription: CardMaterialDescription = {
  type: MaterialComponentType.Card,
  props: {
    height: 8.8,
    ratio: 5 / 7,
    back: {
      image: back
    },
    front: {
      image: {
        [TheCardEnumId.SomeId1]: card1,
        [TheCardEnumId.SomeId2]: card2,
        [TheCardEnumId.SomeId3]: card3
      }
    }
  }
}

3.2 The Locations

In a board game, most material move around different places: the table, the player hand...

This concept is name "Location".

The file LocationType.ts lists the types of locations in the game.

Tips: add you location types one by one. Locations are used to position the Material on the screen.

When you add a new LocationType in the rules, you have to create a new "Locator" in the app, inside Locators.tsx.

Example:

export const Locators: Record<LocationType, ItemLocator<PlayerColor, MaterialType, LocationType>> = {
  [LocationType.Hand]: new PlayerHandLocator(),
}

export class PlayerHandLocator extends HandLocator<PlayerColor, MaterialType, LocationType> {
  getCoordinates() {
    return { x: 0, y: 20, z: 10 }
  }
}

3.3 The setup

Once you have one Material type and one Location type, you can start to setup a new game in BorealRules.ts

You can easily create and manipulate the material in the setup:

  setup() {
    this.setupMaterial(MaterialType.Card).createItems([
      {id: TheCardEnumId.SomeId1, location: { type: LocationType.Hand }},
      {id: TheCardEnumId.SomeId2, location: { type: LocationType.Hand }},
      {id: TheCardEnumId.SomeId3, location: { type: LocationType.Hand }},
    ])
  }

Now, you can run yarn start, then game.new() in the browser console, and you should see the 3 cards in you hand!

3.4 The Rules Parts

Example in ExpeditionRules: get rules()

3.5 Automatically order the Material

Example in ExpeditionRules: get locationsStrategies()

3.6 Hiding stuff to players

Example in ExpeditionRules: get hidingStrategies()

4. Deploy on Game Park

The rules part will always be deployed by Game Park team (contact us for any new version)

You can however deploy the React application, using rclone

Download rclone, and make it executable (add rclone.exe in the PATH env variable on Windows)

We will provide you with an access_key_id and a secret_access_key (keep it absolutely safe!)

Then, run:

rclone config
> n (For "New remote)
name> boreal
Storage> s3 (Amazon S3 Compliant Storage Provider)
provider> Other
env_auth> false
access_key_id> [Enter your access key id here - Never commit that on Git!]
secret_access_key> [Enter you secret access key here - Never commit that on Git!]
region> [Leave empty]
endpoint> cellar-c2.services.clever-cloud.com
location_constraint> [Leave empty]
acl> public-read
Edit advanced config> n

This configuration is only required once.

Now you can deploy a new version of the react application with this command:

yarn deploy

boreal's People

Contributors

sulfab avatar fromi avatar

Watchers

 avatar  avatar

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.