Giter Club home page Giter Club logo

builder's Issues

App state

Redux state

{
  wallet: {
    /*(...)*/
  },
  camera: {
    zoom: number,
    origin: Vector2,
    rotation: Vector4
    // position => caculated on the fly
  },
  scene: {
    [sceneId]: {
      id: string,
      metrics: {
        triangles: number,
        materials: number
      },
      tree: SimplifiedNode // what we send to the client
    }
  },
  project: { // current project from URL
    [projectId]: {
      id: string,
      title: string,
      description: string,
      ownerEmail: string,
      parcels: {x:number, y:number}[],
      scene_id: string
    }
  },
  ui: {
    sidebarVisible: boolean,
    viewport: 'preview' | 'editor',
    modal: (...)
  },
  editor: {
    mode: 'move' | 'rotate' | 'scale'
    selectedEntity: string // instance of asset
  },
  category: {
    [name]: {
      name: string,
      assets: string[] // assetId
    }
  },
  assetPack: {
    [assetPackId]: {
      id: string, // id=title-version?
      title: string,
      assets: string[]
    }
  },
  asset: AssetDescriptor & { id: string, assetPackId: string }[]
}

Endpoint responses

/api/assetPacks
returns AssetPack[]

type AssetPack = {
  // Asset pack manifest version (1 by default)
  version: number
  // Asset pack title
  title: string
  assets: AssetDescriptor[]
}

type AssetResource = {
  // Asset display name
  name: string
  // Resource URL (content server)
  url: string
  thumbnail: string
}

type AssetDescriptor = AssetResource & {
  id: string
  // Tag list
  tags: string[]
  category: string
  variations: AssetResource[]
} 

Notes

  • Colissions toggle is internal state
  • Toolbar:
    • No scalling
    • No skins
    • The rest of the "left" buttons are internal state
    • The "guy" icon (spawn point) won't be there no more
  • Asset detail:
    • We won't have a description, dimensions or creator for now
  • Probably not for the MVP:
    • Search
    • Variations

TODO

  • Who controls client window sagas?
    Possible answer: have a client? module that hooks the events and fires actions. The other modules listen to the actions and don't use window

Decoration Palette

There should be a palette where decorative items packs can be displayed based on their category and searched based on their tags (may be name as well?).

Load AssetPacks from content server

The assetpack manifest should contain an asset as follows:

      {
        "id": "abc-def-fgh",
        "name": "Test",
        "thumbnail": "<direct content server url>",
        "url": "Tree/Tree_StarterPack.gltf",
        "tags": ["test"],
        "category": "test",
        "variations": [],
        "mappings": {
           "Tree/Tree_StarterPack.gltf': 'https://content.decentraland.today/contents/QmdmNp5MuRxkNAAsyFd7z3nFGYcPaeZQRjFDm4AphE7K4V',
           "Tree/texture.png": '<content server url>'
         }
      }

All model dependencies must be listed in the dependencies field of the asset pack

The mappings sent to the client should be defined as follows:

{
  '<assetpack-uuid>/Tree/Tree_StarterPack.gltf': 'https://content.decentraland.today/contents/QmdmNp5MuRxkNAAsyFd7z3nFGYcPaeZQRjFDm4AphE7K4V'
}

Where the asetpack id servers as a namespace to avoid conflicts with assets that share the same name

Project creation templates

screen shot 2019-01-14 at 12 28 01

We should support project creation templates for:

  • 1x1
  • 2x2
  • 3x2
  • Custom builds up to 32 parcels (+ modal)

Depends on #60

Editor interoop enhancements

We should optimize the mappings sent to the editor, we are sending all of them when only a few are needed.

We should optimize the js code generation, creating randomly named variables is good enough but we can use an array and be sure that we will never have naming collisions. Also we should only use ES5 syntax.

Keyboard shorcut reference

We need a modal that can display all the active shortcuts. This modal should be displayed by clicking a button at the bottom-right of the editor viewport.

Depends on #17

Topbar toggle buttons

screen shot 2019-01-14 at 10 11 42

These two buttons should:

  • Toggle play/edit mode
  • Toggle sidebar visibility

All functionality implementation is required for this issue as buttons should already be implemented by #46 and the sidebar should be already implemented by #30, lastly the play mode should already be implemented by #12

Add option to edit project layout

Edit:

We need to investigate the possibility of adding an option to allow the user to edit the scene size. Say you pick a 2x3 scene but decide you want it to be 2x2 later, you need to redo the entire scene.

Limits detail view UI

screen shot 2019-01-14 at 10 04 45

screen shot 2019-01-14 at 10 05 27

screen shot 2019-01-14 at 10 05 36

We need a widget at the bottom of the editor viewport where users can display the current count towards the parcel limits. The count should be displayed in <metric>: x/y format as in "Materials: 5/10" and a link to the docs should be displayed after the list.

Modal state

There should be a modal reducer for all modals in the app:

  • Contest modal
  • New project modal
  • Deployment (publish) modal

Play mode

The play mode should place the user in first person view (similar to the CLI).

Asset pack state

  category: {
    [name]: {
      name: string,
      assets: string[] // assetId
    }
  },
  assetPack: {
    [assetPackId]: {
      id: string, // id=title-version?
      title: string,
      assets: string[]
    }
  },
  asset: AssetDescriptor & { id: string, assetPackId: string }[]

Scaffold Editor layout

We require:

  • A topbar
  • A sidebar

The initial layout with initial background colors is enough

Working Project module

The business logic domain for the current opened project:

Settings reducer

  • Project name
  • Parcels
    (And any other scene.json fields that are relevant)

Scene reducer

  • Scene tree (simplified nodes)

Save and display projects locally

Projects should be saved to localstorage and displayed in the home page for users to continue work without exporting/re-importing data.

Publish/Deploy to LAND

Projects should be deployable to a LAND or Estate. There should be a button in the top toolbar for this.

Refactor category domain

Categories can be derived from already existing state and will make filtering/searching easier

Undo/Redo

We need the client to report the simplified node that was changed together with a path to that specific node. Then, we can store the reference to previous redux states to perform time travel undo/redo.

Translation gizmo and hooks

We need to be able to move stuff with a translation gizmo

The gizmos should affect the client entities and report back the state changes for the builder to update its internal representation of the scene. Only the client side hooks should be implemented for this issue.

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.