pllug/protomorph-bg

Prototyping tool for board game designers. Still under development.

pllug

Main repo containing PLLUG organizational guidelines, processes, community events etc

protomorph-bg's Issues

Create window for Prototype Projects Viewer

Create a window for Prototype Projects Viewer based on design load_project_navigator.png

[US-5] Component Editor Window

1. After opening component in Prototype Component Navigator Window user should see Component Editor Window.
2. In the middle of Component Editor Window, a user should see a canvas with component preview. (a card, a tile, etc.)
3. On the right side of the Component Editor Window, a user should see component configuration panel or decoration configuration panel, where she could change properties of component and properties of decorations.
4. User should have the possibility to change component size from the component configuration panel
5. User should have the possibility to add text-decoration from component configuration panel. After adding decoration should appear in the middle of the component and should be added to the list of components decorations on component configuration panel.
6. Decoration should be selectable by clicking on it in the decoration list or on the component.
7. After decoration selection user should see a selection tool around decoration with 6 squares for resizing. Also, the decoration should be draggable after selection to change its position on the component.
8. After decoration selection user should see decoration configuration panel in another tab then component configuration panel. This tab should be opened automatically after selection and should contain decoration properties to edit, like size(width, height), position(x,y), decoration specific properties(for text: all font properties, color, horizontal-vertical layouts etc.)
9. It should be possible to save the decorated component and return back to Prototype Component Navigator Window.

Introduce shape decoration

It should be possible to choose geometric shape decoration (triangle, circle, rectangle, octagon, etc...). Shapes should have a color property and borders.

Create Prototype Components Navigator window

Create Prototype Components Navigator window (see Prototype Components Navigator UI recommendations in comments). No design available, so now the window should be only functionally correct.

Notes:

• DO NOT style widgets, proper colors and styles for UI will be set in the separate ticket.
• Follow recommendations for UI implementation (see comments)
• Ensure that you created a separate class and that class has interface described in architectural note (see comments).
• Button for loading component should only be enabled if there is only one selected component
• Button for removing component should only be enabled if there are one or many selected components

Create serialization logic for Prototype Projects Viewer

There should be logic for serialization/deserialization of prototype projects, which was saved by the user. The initial plan was to use FlatBuffers(see #2) but for simplifying, Qt JSON framework could be used. (to be discussed)

Create Prototype Components Navigator

Here it is possible to select a component for editing. This will be separate application state, where you will choose the component, and after selection, Component Editor will be opened. It should be possible to return back from component editor to Navigator with some button. From here it should be possible to add new component to prototype/delete component. All component should be grouped to categories by component type:

1. Card
2. Tile
3. Tokens
4. Board
5. Box
6. Cardboard figures

Components represented in navigator as a thumbnail of component and name (maybe some detail information). After creation components will appear in a related group. It is possible to configure the view of Navigator and change it to list view or grid view. Also, it should be possible to sort/ filter and search components in a group.

This task will be separated into smaller issues.

Connect FlatBuffers to project for Protorype component serialization.

For serialization, FlatBuffers will be used instead of the JSON approach as they faster and easier. Here is documentation about FlatBuffers.

• Create project file on disk on clicking New Project button
• Add tests to the program to ensure that file created on button click

Implement guidelines

Implement guidelines, which will appear from rulers by drag, and disappear by drag back to ruler.

See reference here: https://docs.krita.org/en/reference_manual/dockers/grids_and_guides.html#guides

Implement rotation mechanism for decoration resizing tool

Implement component grid

Implement component grid, as reference for placing decorations to the component. The grid should be customizable via settings.

See: https://docs.krita.org/en/reference_manual/dockers/grids_and_guides.html#grids

Create Prototype Projects Viewer

Here all prototypes projects should be displayed. From here it is
possible to open/create or delete a project. After the project opened/created we will go to Prototype Components Navigator.

This is a complex task and will be separated into smaller in the future.

Notes:

• DO NOT style widgets, proper colors and styles for UI will be set in the separate ticket.
• Follow recommendations for UI implementation (see comments)
• Ensure that you created a separate class and that class has interface described in architectural note (see comments).
• Button for loading component should only be enabled if there is only one selected component
• Button for removing component should only be enabled if there are one or many selected components

Create a model for Prototype Projects Viewer window

Create a model for Prototype Projects Viewer window, for view, where all prototype projects will be displayed.

• No modification of recent projects list from model for now
• Use standard DisplayRole and DecorationRole for showinf item name and icon.
• Add tests for model

[US-4] Prototype Components Navigator. Component Filtering, Search, Sorting.

1. On the top part of the window, the user should see:
   • filter control, to filter out components in the prototype with predefined or custom filters.
   • sorting control, to sort components in the prototype by some predefined or custom criteria.
   • search control, to search components in the prototype by some string pattern(search will only find components by names)
2. Components view should show all components in the prototype(cards, tokens, etc.) taking into account all filters, sorting and search patterns. All components should be visible if there are no filters selected and/or no search pattern entered.

[US-2] Prototype Components Navigator Window

1. After opening or creating the prototype from Prototype Project Viewer, the user should see Prototype Components Navigator Window. Prototype Project Viewer should be closed.
2. In the middle of the window, the user should see a component's view.
3. A component should be displayed as a tile with the name and thumbnail of the real component. To edit component, a user should double-click it. After that Component Editor View should be opened.
4. At the window right part, a user should see four buttons:
   • Add the component button. By clicking this button pop up window should appear where a user should see fields to enter the component name, choose component type, select whether the component should be opened after creation. By pressing the "create" button in the pop-up, the component should be created, by pressing the "close" button, the user should just return back to Prototype Components Navigator window without any changes.
   • Delete components button. By clicking this button user will delete checked components(one or multiple).
   • Export selected components. By clicking this button user will export all or checked components.

Investigate requirements for components properties on paper for printing and document them.

Or get some templates. The information could be founded here:

1. http://www.longpackgames.com/resources/
2. https://help.thegamecrafter.com/article/5-getting-started
3. https://www.printplaygames.com/prototypes/
4. https://youtu.be/k-PPtD1N2uA?list=PLw9Pi147suhMRvyppU7Bl15ZrkNFcClmc

Create Component Editor

Component Editor is the main working area of application. It should consist of:

1. Canvas with component(where the main component for editing is displayed). Canvas will also have additional tools such as roller, guidelines, grid (as in photoshop). All these additional tools should be possible to turn on/of from the main menu.
2. Component configuration area, where all main component properties could be edited.
   Component configuration area should have logical sections for the next properties:

• Component size (predefined size selector, custom size edit fields)
• Background( Selector for image, gradient(predefined), color background.)
• Border (width, color, inner radius)
• Decorations list( where all current components decorations described and located base
  on z-order. Here possible to change decoration name, change decoration visibility, delete
  decoration, move decoration forward or backward(change z-order))

3. Decoration selection area (where possible to chose the decoration, that will be added on
   component. Decorations are icons(predefined), text, image, shapes). For icons and shapes should be some windows or dialogs where will be possible to choose the needed decoration. For image will be system file picking dialog. The text will be added immediately to the component. After decoration selection, it appears on the component.
4. Selected decoration configuration. When selecting decoration, it should be possible to
   configure decoration properties. Decoration will have the same properties as:

• position & size
• border (color/ custom image/ gradient, width)
  Decoration will have different properties depends on the type of decoration:
• Icon (color, icon source)
• Image (path to file)
• Text (font properties (font family, size, weight, etc.))
• Shape( shape type, color)

5. Template selection area. Where it is possible to select predefined and saved templates.

[US-3] Prototype Components Navigator. Component Grouping.

To Be Done

Implement canvas ruler

Implement horizontal and vertical ruler for canvas. Both should starts and ends where the component starts and ends and display component size.

Implement decoration snap

Implement decoration snap to edges or center of component, to the same position as another decoration, to guidelines, to grid.

New design implementation.

There will be design created for all screens of the application. It should be implemented.

[US-1] Prototype Project Viewer Window

1. After the application startup, the user should see the "Prototype Project Viewer" (Design prototype)
2. In a "Prototype Project Viewer", the user should see an area where all created prototypes should be displayed and three buttons: "Open Prototype Project", "Create Prototype Project", "Delete Prototype Project".
3. When the user clicked "Open Prototype Project" button, OS file selection dialog should be opened, where the user could choose a prototype project on disk. After selection confirmation, the project should be opened, and the user should see "Prototype Component Navigator" window.
4. When the user clicked "Create Prototype Project" button, a popup should be opened, where the user should enter a project name, could enter a description, and could choose where to save the created project, but default location should be entered at the beginning. Popup should have two buttons, "close" to close the popup and do not save the project and "create" to save the project by giving the name and open it after saving. User should see "Prototype Component Navigator" window after successful project creation.
5. "Delete Prototype Project" button should only be available when some of the prototype projects are selected. When the user clicked "Delete Prototype Project" button, confirmation popup should appear, with message "Are you sure you want to delete project "$PROJECT_NAME"?" and two buttons: yes - confirm project deletion, and removes project from the disk and list, "no" - close popup and do nothing.
6. A user could select only one project in a list, by mouse click. By double mouse click user opens the project and should see "Prototype Component Navigator" window.
7. User should see "Empty in prototype projects. Open or create prototype project and it will show up here." in the middle of the projects view when there is no created or opened prototypes, or all of them were deleted.

[US-6] Print prototype

1. As a designer, I want to export prototype components from Prototype Components Navigator so that I will have my prototype ready for printing.
2. As a designer, I want to press the "Print" button in Prototype Components Navigator so that I will print a prototype via a printer.

Create Component View for Prototype Components Navigator.

Create a component view for Prototype Components Navigator. The view will be complex, as it should contain all components, grouped by custom and predefined categories (for example deck of card, tiles, map, etc.). The group should start with a group name, and all components in grid or list under it. The view should contain controls for searching, sorting and filtering in general or in a group.

Implement text decoration

Text decoration, or simply text, should have all font properties, color, size.

Implement image decoration

It should be possible to add an image as decoration to the component. Image only will have source and border properties.

Investigate available solutions to export prototype in a different formats (PDF, Images)

Undo/Redo for Component Editor

User should have the possibility to undo or redo his actions on Component Editor.

Implement icon specific properties configuration panel.

Create Component Controller and Model(s) for Component View in Prototype Components Navigator.

Ther should be logic, which will handle components in view, filtering, sorting, and grouping. Also, models should handle components add and delete and selection for opening.

Investigate layout mechanism for different shapes on standard paper size(Primary A4 format)

All components should be layout on paper (for example A4 format) with predefined gaps between them for cutting them off, and to take all available space as much as possible to save the paper waste. This must be done automatically with some custom or existing algorithms, maybe there are some libraries available for that particular task.