Giter Club home page Giter Club logo

infinicanvas's Introduction

InfiniCanvas

Twitter | Reddit

InfiniCanvas Logo

Table of Contents

About

InfiniCanvas is an open source multiplayer experience in which users can place colored tiles on an infinite canvas. It's currently hosted on canvas.caltrop.dev!


Building

Navigate to the directory in which you want to save the project in.

Clone the repository (this will create a new folder).

$ git clone https://github.com/caltropuwu/infinicanvas

Move into the directory.

$ cd infinicanvas

Install dependencies.

$ npm install --save

Rename creds.example.json to creds.json (located in /backend) and fill out all relevant information.

InfiniCanvas uses MySQL to store data. Make sure a server is running locally. Create a database and execute the queries found in /tables.sql.

Start the application

$ node --harmony app.js

The server should now be online on http://localhost:5000/!

Tutorial

In the following you will learn about the basics of navigating and editing the canvas!

Panning-and-Zooming

There are a total of 3 different ways to pan the camera across the canvas:

  • Dragging the canvas
  • Clicking on a tile to center it
  • Using the Keyboard movement keys (Default: wasd or arrow-keys)

The first two methods are also available for mobile users!

Camera-Pan demonstration

You may zoom the camera in and out by using the mousewheel (on desktop) or pinching the screen (on mobile).


Placing-Tiles

Place tiles by dragging tiles from the color menu (located at the bottom-center of the screen) onto the canvas. You can also use the keyboard shortcut ctrl and shift to cycle through tiles. Pressing e toggles holding a tile. Tile-Placement demonstration


Contributing

You may be interested in contributing to this project, in the following section you will find out how to file Issues and submit code.

Bug-Reports-and-Feature-Requests

You can report Bugs and unintended behaviour here. Feature requests and suggestions can be submitted here.

If you have an unrelated issue you can submit it here.

Code-Contributions

Code contributions are greatly appreciated. You can contribute code by forking the project and filing pull-requests here. Please note that all contributions need to be reviewed before being instated.


Contributors

Shoutouts to:

License

The InfiniCanvas project is licensed under the GNU General Public License v3.0.


infinicanvas's People

Contributors

caltrop256 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

infinicanvas's Issues

Cant launtch

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: [e.g. iOS]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
Add any other context about the problem here.

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.