This is a documentation for Board Game Arena: play board games online !
BGA Code Sharing: Difference between revisions
Victoria La (talk | contribs) (Updated link for simple animation) |
mNo edit summary |
||
(50 intermediate revisions by 18 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 | ||
| | | | ||
|- | |||
| 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 | |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 | |||
|- | |||
|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 | |||
|- | |||
! colspan="3" | Alternative implementations of BGA modules | |||
|- | |||
|Scrollmap with zoom | |||
|https://github.com/yansnow78/bga_scrollmap | |||
|you can find it in cacao, ginkgopilis, sagani, bigmonster,dominoes, Carcassonne hunters and gatherers and many others. <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 | == 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 [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 61: | Line 136: | ||
! CODE LINK | ! CODE LINK | ||
! DEVELOPER | ! DEVELOPER | ||
! COMMENT | |||
|- | |- | ||
| Shared Code (not a game) | | Shared Code (not a game) | ||
| https://github.com/elaskavaia/bga-sharedcode | | https://github.com/elaskavaia/bga-sharedcode | ||
| Victoria_La | | 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) | | BoardGameArena Workbench (not a game) | ||
| 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 | ||
! CODE LINK | ! CODE LINK | ||
! DEVELOPER | ! DEVELOPER | ||
! COMMENT | |||
|- | |- | ||
| 99 (Trick-taking Card Game) | | 99 (Trick-taking Card Game) | ||
| 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 97: | 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 121: | 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)''' | ||
| https://github.com/elaskavaia/bga-heartsla | | https://github.com/elaskavaia/bga-heartsla | ||
| Victoria_La | | Victoria_La | ||
| | |||
|- | |- | ||
| Homesteaders | | Homesteaders | ||
Line 138: | Line 278: | ||
| Morgalad | | Morgalad | ||
|- | |- | ||
| | | In the Year of the Dragon (10th Anniversary Edition) | ||
| https://github.com/ | | 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 | |||
|- | |||
|Linkage | |||
|https://github.com/ShaPhi7/linkage | |||
|ShaPhi7 | |||
| | |||
|- | |||
|Love Letter | |||
|https://github.com/ShaPhi7/loveletter | |||
|ShaPhi7 | |||
| | |||
|- | |- | ||
| Mapmaker: The Gerrymandering Game | | Mapmaker: The Gerrymandering Game | ||
Line 149: | Line 312: | ||
| https://github.com/rcitaliano/MarcoPolo | | https://github.com/rcitaliano/MarcoPolo | ||
| rcitaliano | | rcitaliano | ||
| | |||
|- | |- | ||
| Nile | | Nile | ||
Line 157: | Line 321: | ||
| 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 189: | Line 365: | ||
| https://github.com/ishermandom/bga-42 | | https://github.com/ishermandom/bga-42 | ||
| Stardust Spikes, Jason Turner-Maier, Ilya Sherman | | 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 | | Uptown | ||
Line 197: | Line 381: | ||
| https://github.com/christopherburke/bga_viamagica | | https://github.com/christopherburke/bga_viamagica | ||
| CuriousTerran | | CuriousTerran | ||
|- | |- | ||
|} | |} | ||
Line 227: | Line 387: | ||
Any developer can add themselves to a project as read-only from | 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 == | == Other useful resources == | ||
Moved to [[Tools_and_tips_of_BGA_Studio]] | Moved to [[Tools_and_tips_of_BGA_Studio]] | ||
[[Category:Studio]] |
Latest revision as of 15:16, 15 November 2024
This page is for listing of externally hosted bga projects, tools and resources, as well as internal project intended for sharing
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, ginkgopilis, sagani, bigmonster,dominoes, Carcassonne hunters and gatherers and many others. # 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.
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