This is a documentation for Board Game Arena: play board games online !

BGA Code Sharing: Difference between revisions

From Board Game Arena
Jump to navigation Jump to search
(31 intermediate revisions by 13 users not shown)
Line 16: Line 16:
|-
|-
| Die: 4 sided  
| Die: 4 sided  
| https://codepen.io/mrkiffie/pen/doVZgW
| https://codepen.io/mrkiffie/pen/doVZgW ; https://codepen.io/VictoriaLa/pen/JjZNezr
| code pen
| code pen
|-
|-
| Die: 6 sided  
| Die: 6 sided  
| https://github.com/elaskavaia/bga-sharedcode
| https://github.com/elaskavaia/bga-sharedcode ; https://codepen.io/VictoriaLa/pen/QWBBbwz
| Code can be found in project
|  
|-
| Die: 8 sided
| https://codepen.io/VictoriaLa/pen/YzMPeGq
| code pen
|-
|-
| Die: 12 sided (dodecahedron)  
| Die: 12 sided (dodecahedron)  
| https://codepen.io/VictoriaLa/pen/xxLLxOP
| https://codepen.io/VictoriaLa/pen/xxLLxOP <nowiki/>  https://codepen.io/hoursgoby/pen/GRwQzxo
| Code pen
| Code pen
|-  
|-  
Line 30: Line 34:
| https://codepen.io/vicentemundim/details/cenIh
| https://codepen.io/vicentemundim/details/cenIh
| Code pen
| Code pen
|-
|Dice
|[https://github.com/thoun/bga-dice/ Repo]<nowiki> | </nowiki>[https://thoun.github.io/bga-dice/demo/index.html Demo] (not used yet)
|Handle dice display and animation '''WORK IN PROGRESS''' Only d6 is started
|-
|-
! colspan="3" | Moving object using CSS animation (mostly)
! colspan="3" | Moving object using CSS animation (mostly)
Line 41: Line 49:
| This technique is modification of BGA framework method to allow mobile object not to have absolute position before or after the move (and uses css animation not dojo). Methods slideToObjectRelative, attachToNewObjectNoDestroy
| This technique is modification of BGA framework method to allow mobile object not to have absolute position before or after the move (and uses css animation not dojo). Methods slideToObjectRelative, attachToNewObjectNoDestroy
|-
|-
! colspan="3" | Responsive layout for game boards
! colspan="3" | Responsive layout, zoom and navigation for game boards
|-
|-
|Flex Layout
|Flex Layout
|https://codepen.io/VictoriaLa/pen/XWjJJgG
|https://codepen.io/VictoriaLa/pen/XWjJJgG
|Example on how to create flexible layout just by using css
|Example on how to create flexible layout just by using css
|-
|Zoom
|[https://github.com/thoun/bga-zoom/ Repo]<nowiki> | </nowiki>[https://thoun.github.io/bga-zoom/demo/index.html Demo] (visible on Knarr, Azul, Abyss, ...)
|Allow the user to zoom on the game board. Include the controls to zoom, and handle the scale applied to the HTML element.
|-
|Jump to
|[https://github.com/thoun/bga-jump-to/ Repo]<nowiki> | </nowiki>[https://thoun.github.io/bga-jump-to/demo/index.html Demo] (visible on Knarr, Elawa)
|Add floating controls to quickly jump to a player's table
|-
|-
! colspan="3" | Algorithms
! colspan="3" | Algorithms
Line 55: Line 71:
|Shortest path on hex grid
|Shortest path on hex grid
|memoir 44
|memoir 44
| Disjktra
| Dijkstra
|-
|-
|Largest area on hex grid
|Largest area on hex grid
Line 73: Line 89:
|Find intersecting hexes on a line between two cells
|Find intersecting hexes on a line between two cells
|-
|-
! colspan="3" | Alternative implementations of BGA modules
|-
|Scrollmap with zoom
|https://github.com/yansnow78/bga_scrollmap
|you can find it in cacao an implementation in cacao (currently only changed in studio) . <nowiki>#</nowiki> improvements compare to scrollmap:
- add zoom capabilities
- add possibility to adjust pan delta to tile size when clicking on arrows
- allow zoom with scroll wheel. only allow zoom with wheel if alt or ctrl or shift are pressed by default.  add possibility to select which key need to be pressed when zooming with wheel
- allow pan/scroll and pinch zoom on smartphone. only allow 2 fingers to start scrolling by default, one finger is for page scrolling
- make clickable area of buttons a bit bigger on smartphone
- improve animation between game board and player bards thanks to an animation_div
- add support to long click on buttons (continuous scroll or zoom or enlarge/reduce until button released)
|-
|Scrollmap Plus
|patchwork
|Implementation with some bugs fixed, improved drag support and ability to use only one direction (i.e. only horizontal like carousel). Found in modules/extscrollmap.js
|-
|Cards
|[https://github.com/thoun/bga-cards/ Repo]<nowiki> | </nowiki>[https://thoun.github.io/bga-cards/demo/index.html Demo] (visible on Knarr, King of Tokyo, Abyss, ...)
|Alternative to BGA Stock component, using CSS transitions instead of dojo animations.
|-
! colspan="3" | Assorted stuff
|-
|Help
|[https://github.com/thoun/bga-help/ Repo]<nowiki> | </nowiki>[https://thoun.github.io/bga-help/demo/index.html Demo] (visible on Knarr)
|Add floating help buttons at the bottom left corner of the screen
|}
|}


== Projects hosted not in studio ==
== Projects ==


See the table a link and nickname of the developer on bga (same as used for dev forum), and short description. See [[Tools_and_tips_of_BGA_Studio#Version_Control]] for some suggestions on how and where to publish your code externally. Also see the [https://github.com/topics/boardgamearena boardgamearena] tag on github.
Add the game name, a link to repository and nickname of the developer on bga (same as used for dev forum), and short description. See [[Tools_and_tips_of_BGA_Studio#Version_Control]] for some suggestions on how and where to publish your code externally. Also see the [https://github.com/topics/boardgamearena boardgamearena] topic on github.


'''Important notice about artwork on BGA Open Source projects: original hi-resolution images from publishers must not be published on the repositories. In addition, it is better to specify that the images derivated from publishers artwork are copyrighted and cannot be licensed under a free license like Creative Commons.
'''Important notice about artwork on BGA Open Source projects: original hi-resolution images from publishers must not be published on the repositories. In addition, it is better to specify that the images derivated from publishers artwork are copyrighted and cannot be licensed under a free license like Creative Commons.
Line 102: Line 151:
| https://github.com/danielholmes/bga-workbench
| https://github.com/danielholmes/bga-workbench
| Daniel Holmes (dhau)
| Daniel Holmes (dhau)
|-
|BGA-boilerplate
|https://github.com/bga-devs/tisaac-boilerplate/
|Tisaac (and Vincentt ?)
|Main boilerplate with extended "basic" function and code structure
|-
|BGA Type Safe Template
|https://github.com/NevinAF/bga-ts-template
|NevinAF
|Full typing of all BGA Framework components.
|-
|-
! GAME
! GAME
Line 111: Line 170:
| https://github.com/ekelly/bga-ninetynine
| https://github.com/ekelly/bga-ninetynine
| QuasarDukeDev
| QuasarDukeDev
|-
| Abandon All Artichokes
| https://github.com/0-wiz-0/bga-abandonallartichokes
| __wiz__, rojomojo
|-
|-
| Assyria  
| Assyria  
Line 131: Line 194:
| https://github.com/AntonioSoler/bga-bonbons
| https://github.com/AntonioSoler/bga-bonbons
| Morgalad  
| Morgalad  
|-
|Big Monster
|https://github.com/nmatton/bigmonster
|nicotacotac
|-
| Bonsai
| https://github.com/PhilipDavis/BGA-Bonsai
| Philip Davis (pdw3)
| Action stack for client-side undo system; generator functions to model complex turn workflows; infinite hex grid with auto resizing; all data in a single JSON blob; animated scorepad
|-
| Canosa
| https://codeberg.org/halibut/Canosa
| junibegood
|-
|-
| Coinche
| Coinche
| https://github.com/drasill/bga-coinche
| https://github.com/drasill/bga-coinche
| Draasill
| Draasill
|-
|Copenhagen
|https://github.com/JoeProgram/bga-copenhagen
|JoeProgram
|-
|-
| Coup: City State
| Coup: City State
| https://github.com/quietmint/bga-coupcitystate
| https://github.com/quietmint/bga-coupcitystate
| quietmint
| quietmint
|-
| Dice Summoners
| https://github.com/eoincos/bga-dicesummoners
| eoincos
|-
|-
| Dungeon Roll
| Dungeon Roll
Line 155: Line 239:
| https://bitbucket.org/Joel_L/fistfulofgold
| https://bitbucket.org/Joel_L/fistfulofgold
| Brainchild
| Brainchild
|-
| Fled
| https://github.com/PhilipDavis/BGA-Fled
| Philip Davis (pdw3)
| All data in a single JSON blob
|-
|Flip Freighters
|https://github.com/joesimpson/bga-flipfreighters
|joesimpson
|-
|-
| Florenza: The Card Game
| Florenza: The Card Game
| https://github.com/alberto-bottarini/bga-florenza
| https://github.com/alberto-bottarini/bga-florenza
| tarini  
| tarini  
|-
| For-Ex
| https://github.com/Fnordistan/forex
| AmadanNaBriona
|-
| Get the MacGuffin
| https://github.com/mizutismask/bga-get-the-MacGuffin
| mizutismask
|-
| Hardback
| https://github.com/quietmint/bga-hardback
| quietmint
|-
|-
| Hearts '''(Tutorial)'''
| Hearts '''(Tutorial)'''
Line 172: Line 277:
| Morgalad  
| Morgalad  
|-
|-
| Innovation
| In the Year of the Dragon (10th Anniversary Edition)
| https://github.com/micahstairs/bga-innovation
| https://github.com/Fnordistan/ityotd
| Micah Stairs (micahstairs)
| AmadanNaBriona
|-
| Just Desserts
| https://github.com/mizutismask/bga-just-desserts
| mizutismask
|-
| The King's Guild
| https://github.com/AdamNovotny/BGG-KingsGuild
| A-dam
|-
| The Lady and the Tiger (Doors)
| https://github.com/Fnordistan/ladyandthetiger
| AmadanNaBriona
|-
|-
| Mapmaker: The Gerrymandering Game
| Mapmaker: The Gerrymandering Game
Line 191: Line 308:
| https://bitbucket.org/chhuang76/bga_noirkvi
| https://bitbucket.org/chhuang76/bga_noirkvi
| ch huang
| ch huang
|-
|Now Boarding
|https://github.com/quietmint/bga-nowboarding
|quietmint
|-
|-
| Penny Press
| Penny Press
| https://github.com/AdamNovotny/bga-blooms
| https://github.com/AdamNovotny/bga-blooms
| A-dam
| A-dam
|-
| Perikles
| https://github.com/Fnordistan/perikles
| AmadanNaBriona
|-
|-
| P.I.
| P.I.
| https://gitlab.com/fa81/bga-pi, https://github.com/hellp/bga-pi (mirror)
| https://gitlab.com/fa81/bga-pi, https://github.com/hellp/bga-pi (mirror)
| Fabian Neumann (fa81)
| Fabian Neumann (fa81)
|-
| President
| https://github.com/quaresma95/president
| quaresma95
|-
|-
| Santorini
| Santorini
Line 227: Line 356:
| https://github.com/leocaseiro/bga-tictacmatch
| https://github.com/leocaseiro/bga-tictacmatch
| Leo Caseiro
| Leo Caseiro
|-
| Trick of the Rails
| https://github.com/Fnordistan/trickoftherails
| AmadanNaBriona
|-
|-
| Uptown
| Uptown
Line 235: Line 368:
| https://github.com/christopherburke/bga_viamagica
| https://github.com/christopherburke/bga_viamagica
| CuriousTerran
| CuriousTerran
|-
| Just Desserts
| https://github.com/mizutismask/bga-just-desserts
| mizutismask
|-
| The King's Guild
| https://github.com/AdamNovotny/BGG-KingsGuild
| A-dam
|-
| Get the MacGuffin
| https://github.com/mizutismask/bga-get-the-MacGuffin
| mizutismask
|-
| President
| https://github.com/quaresma95/president
| quaresma95
|-
| Hardback
| https://github.com/quietmint/bga-hardback
| quietmint
|-
| Dice Summoners
| https://github.com/eoincos/bga-dicesummoners
| eoincos
|-
| Trick of the Rails
| https://github.com/Fnordistan/trickoftherails
| AmadanNaBriona
|-
|-
|}
|}
Line 270: Line 375:


Any developer can add themselves to a project as read-only from https://studio.boardgamearena.com/#!projects page (almost any project).
Any developer can add themselves to a project as read-only from https://studio.boardgamearena.com/#!projects page (almost any project).
The list below are no-games which do not have bgg id and not showing up there.


{| class="wikitable"
If it is not visible: a) it has no bgg id b) it is already published (use radio button to switch) c) it is an old game not developed on studio.
|-
! NAME
! CODE LINK
! DEVELOPER
|-
| Shared Code
| https://studio.boardgamearena.com/gamepanel?game=sharedcode
| Victoria_La
|-
| Original BGA template
| https://studio.boardgamearena.com/gamepanel?game=template
| Victoria_La
|-
|}


== Other useful resources ==
== Other useful resources ==

Revision as of 00:25, 26 July 2024


Game File Reference


Useful Components

Official

  • Deck: a PHP component to manage cards (deck, hands, picking cards, moving cards, shuffle deck, ...).
  • Draggable: a JS component to manage drag'n'drop actions.
  • Counter: a JS component to manage a counter that can increase/decrease (ex: player's score).
  • ExpandableSection: a JS component to manage a rectangular block of HTML than can be displayed/hidden.
  • Scrollmap: a JS component to manage a scrollable game area (useful when the game area can be infinite. Examples: Saboteur or Takenoko games).
  • Stock: a JS component to manage and display a set of game elements displayed at a position.
  • Zone: a JS component to manage a zone of the board where several game elements can come and leave, but should be well displayed together (See for example: token's places at Can't Stop).

Undocumented component (if somebody knows please help with docs)

  • Wrapper: a JS component to wrap a <div> element around its child, even if these elements are absolute positioned.

Unofficial


Game Development Process


Guides for Common Topics


Miscellaneous Resources

This page is for listing of externally hosted bga projects, tools and resources, as well as internal project intended for sharing

Community shared components, pens, etc

NAME CODE LINK DESCRIPTION
Dice models and animation
Die: 4 sided https://codepen.io/mrkiffie/pen/doVZgW  ; https://codepen.io/VictoriaLa/pen/JjZNezr code pen
Die: 6 sided https://github.com/elaskavaia/bga-sharedcode ; https://codepen.io/VictoriaLa/pen/QWBBbwz
Die: 8 sided https://codepen.io/VictoriaLa/pen/YzMPeGq code pen
Die: 12 sided (dodecahedron) https://codepen.io/VictoriaLa/pen/xxLLxOP https://codepen.io/hoursgoby/pen/GRwQzxo Code pen
Die: 20 sided https://codepen.io/vicentemundim/details/cenIh Code pen
Dice Repo | Demo (not used yet) Handle dice display and animation WORK IN PROGRESS Only d6 is started
Moving object using CSS animation (mostly)
Phantom object move on oversurface https://codepen.io/VictoriaLa/pen/gORvdJo This technique creates clone of the object it moves it on another surface. It works well when parents that css transform applies such as scale and rotate
Move object directly using positioning https://codepen.io/VictoriaLa/pen/dyzgKVX This technique is modification of BGA framework method to allow mobile object not to have absolute position before or after the move (and uses css animation not dojo). Methods slideToObjectRelative, attachToNewObjectNoDestroy
Responsive layout, zoom and navigation for game boards
Flex Layout https://codepen.io/VictoriaLa/pen/XWjJJgG Example on how to create flexible layout just by using css
Zoom Repo | Demo (visible on Knarr, Azul, Abyss, ...) Allow the user to zoom on the game board. Include the controls to zoom, and handle the scale applied to the HTML element.
Jump to Repo | Demo (visible on Knarr, Elawa) Add floating controls to quickly jump to a player's table
Algorithms
Hex grid tapestry,Tumbleweed,gaia project,Gold West
Shortest path on hex grid memoir 44 Dijkstra
Largest area on hex grid tapestry, ...
Largest area on square grid king domino, ...
Tetris pieces patchwork, ... Matrix manupations to rotate, flip and fit tetris pieces
Line of sights on hex grid memoir 44 Find intersecting hexes on a line between two cells
Alternative implementations of BGA modules
Scrollmap with zoom https://github.com/yansnow78/bga_scrollmap you can find it in cacao an implementation in cacao (currently only changed in studio) . # improvements compare to scrollmap:

- add zoom capabilities

- add possibility to adjust pan delta to tile size when clicking on arrows

- allow zoom with scroll wheel. only allow zoom with wheel if alt or ctrl or shift are pressed by default. add possibility to select which key need to be pressed when zooming with wheel

- allow pan/scroll and pinch zoom on smartphone. only allow 2 fingers to start scrolling by default, one finger is for page scrolling

- make clickable area of buttons a bit bigger on smartphone

- improve animation between game board and player bards thanks to an animation_div

- add support to long click on buttons (continuous scroll or zoom or enlarge/reduce until button released)

Scrollmap Plus patchwork Implementation with some bugs fixed, improved drag support and ability to use only one direction (i.e. only horizontal like carousel). Found in modules/extscrollmap.js
Cards Repo | Demo (visible on Knarr, King of Tokyo, Abyss, ...) Alternative to BGA Stock component, using CSS transitions instead of dojo animations.
Assorted stuff
Help Repo | Demo (visible on Knarr) Add floating help buttons at the bottom left corner of the screen

Projects

Add the game name, a link to repository and nickname of the developer on bga (same as used for dev forum), and short description. See Tools_and_tips_of_BGA_Studio#Version_Control for some suggestions on how and where to publish your code externally. Also see the boardgamearena topic on github.

Important notice about artwork on BGA Open Source projects: original hi-resolution images from publishers must not be published on the repositories. In addition, it is better to specify that the images derivated from publishers artwork are copyrighted and cannot be licensed under a free license like Creative Commons.

NON-GAME PROJECTS CODE LINK DEVELOPER COMMENT
Shared Code (not a game) https://github.com/elaskavaia/bga-sharedcode Victoria_La Examples of various game components and PHP stubs of framework code to make IDE happy
Vanilla Typescipt template (not a game) https://github.com/elaskavaia/bga-dojoless Victoria_La Project template for typescript and using minimal dojo, good for vscode - type checking, auto-complete, navigation
BoardGameArena Workbench (not a game) https://github.com/danielholmes/bga-workbench Daniel Holmes (dhau)
BGA-boilerplate https://github.com/bga-devs/tisaac-boilerplate/ Tisaac (and Vincentt ?) Main boilerplate with extended "basic" function and code structure
BGA Type Safe Template https://github.com/NevinAF/bga-ts-template NevinAF Full typing of all BGA Framework components.
GAME CODE LINK DEVELOPER COMMENT
99 (Trick-taking Card Game) https://github.com/ekelly/bga-ninetynine QuasarDukeDev
Abandon All Artichokes https://github.com/0-wiz-0/bga-abandonallartichokes __wiz__, rojomojo
Assyria https://github.com/sebastien-prudhomme/bga-assyria daikinee
Aura https://github.com/micahstairs/bga-aura Micah Stairs (micahstairs)
Bandido https://github.com/opheliehb/BandidoBGA ophelopede & Harkle
The Battle for Hill 218 https://github.com/danielholmes/battle-for-hill-218 Daniel Holmes (dhau)
Bonbons https://github.com/AntonioSoler/bga-bonbons Morgalad
Big Monster https://github.com/nmatton/bigmonster nicotacotac
Bonsai https://github.com/PhilipDavis/BGA-Bonsai Philip Davis (pdw3) Action stack for client-side undo system; generator functions to model complex turn workflows; infinite hex grid with auto resizing; all data in a single JSON blob; animated scorepad
Canosa https://codeberg.org/halibut/Canosa junibegood
Coinche https://github.com/drasill/bga-coinche Draasill
Copenhagen https://github.com/JoeProgram/bga-copenhagen JoeProgram
Coup: City State https://github.com/quietmint/bga-coupcitystate quietmint
Dice Summoners https://github.com/eoincos/bga-dicesummoners eoincos
Dungeon Roll https://github.com/MartinGoulet/bga-dungeonroll MGoulet
Egyptian Ratscrew https://github.com/0BuRner/bga-egyptianratscrew 0BuRner
Eruption https://github.com/AndyKerrison/bga-eruption Andy_K
A Fistful Of Gold https://bitbucket.org/Joel_L/fistfulofgold Brainchild
Fled https://github.com/PhilipDavis/BGA-Fled Philip Davis (pdw3) All data in a single JSON blob
Flip Freighters https://github.com/joesimpson/bga-flipfreighters joesimpson
Florenza: The Card Game https://github.com/alberto-bottarini/bga-florenza tarini
For-Ex https://github.com/Fnordistan/forex AmadanNaBriona
Get the MacGuffin https://github.com/mizutismask/bga-get-the-MacGuffin mizutismask
Hardback https://github.com/quietmint/bga-hardback quietmint
Hearts (Tutorial) https://github.com/elaskavaia/bga-heartsla Victoria_La
Homesteaders https://github.com/npatron/bga-homesteaders TheBoot
Incan Gold https://github.com/AntonioSoler/bga-incangold Morgalad
In the Year of the Dragon (10th Anniversary Edition) https://github.com/Fnordistan/ityotd AmadanNaBriona
Just Desserts https://github.com/mizutismask/bga-just-desserts mizutismask
The King's Guild https://github.com/AdamNovotny/BGG-KingsGuild A-dam
The Lady and the Tiger (Doors) https://github.com/Fnordistan/ladyandthetiger AmadanNaBriona
Mapmaker: The Gerrymandering Game https://github.com/gzhang01/bga-mapmaker gkz
Marco Polo https://github.com/rcitaliano/MarcoPolo rcitaliano
Nile https://github.com/AndyKerrison/bga-nile Andy_K
Noir: Killer vs Inspector https://bitbucket.org/chhuang76/bga_noirkvi ch huang
Now Boarding https://github.com/quietmint/bga-nowboarding quietmint
Penny Press https://github.com/AdamNovotny/bga-blooms A-dam
Perikles https://github.com/Fnordistan/perikles AmadanNaBriona
P.I. https://gitlab.com/fa81/bga-pi, https://github.com/hellp/bga-pi (mirror) Fabian Neumann (fa81)
President https://github.com/quaresma95/president quaresma95
Santorini https://github.com/AntonioSoler/bga-santorini Morgalad, quietmint, Tisaac
Tablut https://github.com/Lucas-C/tablut Lucas-C & ntaffore
Takara Island https://github.com/AntonioSoler/bga-takaraisland Morgalad
Taluva https://github.com/quietmint/bga-taluva Morgalad & quietmint
Teotihuacan: City of Gods https://github.com/Trompetenhut/bga-teotihuacan Trompetenhut
Texas 42 (domino game, still under development) https://github.com/ishermandom/bga-42 Stardust Spikes, Jason Turner-Maier, Ilya Sherman
Tic Tac Match https://github.com/leocaseiro/bga-tictacmatch Leo Caseiro
Trick of the Rails https://github.com/Fnordistan/trickoftherails AmadanNaBriona
Uptown https://github.com/elliotkendall/bga-uptown SpottedShroom
Via Magica https://github.com/christopherburke/bga_viamagica CuriousTerran

Projects on studio

Any developer can add themselves to a project as read-only from https://studio.boardgamearena.com/#!projects page (almost any project).

If it is not visible: a) it has no bgg id b) it is already published (use radio button to switch) c) it is an old game not developed on studio.

Other useful resources

Moved to Tools_and_tips_of_BGA_Studio

Retrieved from "http:///index.php?title=BGA_Code_Sharing&oldid=21972"