Anti-Stock - Revision history

Thoun at 12:49, 6 May 2025

2025-05-06T12:49:30Z

@@ Line 11: / Line 11: @@
 * Create all cards as divs in the template file (with the help of view.php as needed)
 * Create generic css classes for the cards defining images, sizing, etc. Create/generate a css class for each card type with background positioning - there are scripts in [https://github.com/elaskavaia/bga-sharedcode/blob/master/misc/gen_sprite.php sharedcode] project to generate grid positioning or you can use some online css generator (which is what Stock does under the hood)
-* Create a parent div for card placement and use dojo.place to move cards there. In css use your preferred layout for this, including margins, etc.
+* Create a parent div for card placement and use Element.insertAdjacentHTML to move cards there. In css use your preferred layout for this, including margins, etc.
 * Tricky one: When cards are moved during animations you have to use a special method; none of animation methods from BGA parent classes will work, as the card will not have absolute positioning. You can use methods from the sharedcode project or create your own (the trick is that during animation the object has to have absolute positioning, which is removed after the animation).
@@ Line 140: / Line 140: @@
 </pre>
-=== Static - bga template engine ===
+=== Dynamic using a template string ===
 <pre>
-in js:
+  let cardTemplate = (suit, rank) => `<div id="card_${suit}_${rank}" class="card card_${suit}_${rank}" data-suit="${suit}" data-rank="${rank}"></div>`;
   let suit = 'H';
   let rank = 'A';
-  let cardNode = dojo.create('div', {id: `card_${suit}_${rank}`, class: `card card_${suit}_${rank}`, dataSuit: suit, dataRank: rank});
+  document.getElementById('hand').insertAdjacentHTML('beforeend', cardTemplate(suit, rank)); // place in hand for example
 </pre>
-Technically you can do it all in one line as "place" is 3rd parameter of dojo.create
+=== Dynamic not using a template string ===
 <pre>
 let suit = 'H';

Victoria La: /* Animation */

2024-07-15T23:09:42Z

Animation

← Older revision		Revision as of 01:09, 16 July 2024
Line 264:		Line 264:

	The animation is the only tricky part because it does not come for free. The proper animation function is pretty lengthy so I won't even put it here.		The animation is the only tricky part because it does not come for free. The proper animation function is pretty lengthy so I won't even put it here.
	Basically ~~it short~~ you would have to reparent our object without visual movement and then you can run animation on positions, and after it is done remove absolute positioning.		Basically you would have to reparent our object without visual movement and then you can run animation on positions, and after it is done remove absolute positioning.

	The simplier method is moving object itself, you can see code and example in https://github.com/elaskavaia/bga-sharedcode/blob/master/sharedcode.js		The simplier method is moving object itself, you can see code and example in https://github.com/elaskavaia/bga-sharedcode/blob/master/sharedcode.js

Victoria La: /* Selection and Click Handlers */

2024-07-15T23:08:41Z

Selection and Click Handlers

← Older revision		Revision as of 01:08, 16 July 2024
Line 252:		Line 252:
	}		}

	~~How~~ if you need to do some action based on selection this can be in your "do something" button handler (this example below will create array of ids of cards)		Now if you need to do some action based on selection this can be in your "do something" button handler (this example below will create array of ids of cards)
	<pre>		<pre>
	const card_ids = Array.from(document.querySelectorAll('.card.selected')).map(x=>x.id);		const card_ids = Array.from(document.querySelectorAll('.card.selected')).map(x=>x.id);

Victoria La: /* Static - basic */

2024-07-15T23:07:32Z

Static - basic

← Older revision		Revision as of 01:07, 16 July 2024
Line 136:		Line 136:
	<div id="card_H_10" class="card" data-suit='H' data-rank="10"> </div>		<div id="card_H_10" class="card" data-suit='H' data-rank="10"> </div>
	<div id="card_C_K" class="card" data-suit='C' data-rank="K"> </div>		<div id="card_C_K" class="card" data-suit='C' data-rank="K"> </div>
	... ~~rice~~ and repeat ...		... rince and repeat ...
	</div>		</div>
	</pre>		</pre>

Salty-horse: /* Overivew */ Fix typo

2022-11-05T15:08:14Z

Overivew: Fix typo

← Older revision		Revision as of 17:08, 5 November 2022
Line 1:		Line 1:

	== ~~Overivew~~ ==		== Overview ==
	If the [[Stock]] component works for you then great, you don't need this article. If you start tweaking it and you are doing something slightly more complex and you cannot find an answer, it may be best to not use it.		If the [[Stock]] component works for you then great, you don't need this article. If you start tweaking it and you are doing something slightly more complex and you cannot find an answer, it may be best to not use it.
	This article describes how to replace Stock.		This article describes how to replace Stock.

Victoria La at 21:18, 27 July 2022

2022-07-27T21:18:40Z

← Older revision		Revision as of 23:18, 27 July 2022
Line 10:		Line 10:
	Recipe to get rid of Stock (the gist):		Recipe to get rid of Stock (the gist):
	* Create all cards as divs in the template file (with the help of view.php as needed)		* Create all cards as divs in the template file (with the help of view.php as needed)
	* Create generic css classes for the cards defining images, sizing, etc. Create/generate a css class for each card type with background positioning - there are scripts in ~~sharescode~~ to generate grid positioning (which is what Stock does under the hood)		* Create generic css classes for the cards defining images, sizing, etc. Create/generate a css class for each card type with background positioning - there are scripts in [https://github.com/elaskavaia/bga-sharedcode/blob/master/misc/gen_sprite.php sharedcode] project to generate grid positioning or you can use some online css generator (which is what Stock does under the hood)
	* Create a parent div for card placement and use dojo.place to move cards there. In css use your preferred layout for this, including margins, etc.		* Create a parent div for card placement and use dojo.place to move cards there. In css use your preferred layout for this, including margins, etc.
	* Tricky one: When cards are moved during animations you have to use a special method; none of animation methods from BGA parent classes will work, as the card will not have absolute positioning. You can use methods from the sharedcode project or create your own (the trick is that during animation the object has to have absolute positioning, which is removed after the animation).		* Tricky one: When cards are moved during animations you have to use a special method; none of animation methods from BGA parent classes will work, as the card will not have absolute positioning. You can use methods from the sharedcode project or create your own (the trick is that during animation the object has to have absolute positioning, which is removed after the animation).
Line 125:		Line 125:

	== Generating Dom Elements ==		== Generating Dom Elements ==
			There are multiple ways to generate dom elements, few of the methods described below - they are alternatives, i.e. you only pick one of those.

	=== Static - basic ===		=== Static - basic ===
Line 173:		Line 174:
	SUIT : 'H',		SUIT : 'H',
	RANK : 'A'		RANK : 'A'
	}); // this in js code somewhere before placing it		}); // this in js code somewhere before placing it, then use dojo.place to place it

	=== Dynamic using dojo ===		=== Dynamic using dojo ===
Line 201:		Line 202:
	== Layout ==		== Layout ==

	You can use all web resources and ~~powser~~ of css to do any sort of fancy layout for your cards, you not bound to any predefined layouts.		You can use all web resources and power of css to do any sort of fancy layout for your cards, you not bound to any predefined layouts.
	The simplest would be display: inline-block as we already did above. You can also add margins to overlap cards for example		The simplest would be display: inline-block as we already did above. You can also add margins to overlap cards for example.

			More advanced layouts can be done with flex or grid:

	<pre>		<pre>
	.tableau {		.tableau {
Line 211:		Line 215:
	transform: rotate(-90deg) scale(0.5);		transform: rotate(-90deg) scale(0.5);
	padding: 1em;		padding: 1em;
	display: flex;		display: flex;
	justify-content: center;		justify-content: center;
	flex-direction: row;		flex-direction: row;
	flex-wrap: wrap;		flex-wrap: wrap;
	}		}

Line 260:		Line 264:

	The animation is the only tricky part because it does not come for free. The proper animation function is pretty lengthy so I won't even put it here.		The animation is the only tricky part because it does not come for free. The proper animation function is pretty lengthy so I won't even put it here.
	Basically it short you would have to reparent ~~out~~ object without visual movement and then you can run animation on positions, and after it is done remove absolute positioning.		Basically it short you would have to reparent our object without visual movement and then you can run animation on positions, and after it is done remove absolute positioning.

	The simplier method is moving object itself, you can see code and example in https://github.com/elaskavaia/bga-sharedcode/blob/master/sharedcode.js		The simplier method is moving object itself, you can see code and example in https://github.com/elaskavaia/bga-sharedcode/blob/master/sharedcode.js

Victoria La at 23:24, 16 May 2022

2022-05-16T23:24:51Z

← Older revision		Revision as of 01:24, 17 May 2022
Line 268:		Line 268:
	And more complex method moves "phantom" object on oversurface (which is neither parent of original object nor destination), code can found here (to use this your need 2 js methods for movement and classes for oversurface and oversurfacew > * from css):		And more complex method moves "phantom" object on oversurface (which is neither parent of original object nor destination), code can found here (to use this your need 2 js methods for movement and classes for oversurface and oversurfacew > * from css):
	https://codepen.io/VictoriaLa/pen/PojvWEV		https://codepen.io/VictoriaLa/pen/PojvWEV


			[[Category:Studio]]

AmadanNaBriona: /* Presentation */

2021-10-05T00:16:27Z

Presentation

← Older revision		Revision as of 02:16, 5 October 2021
Line 15:		Line 15:

	== Presentation ==		== Presentation ==
	In modern ~~word~~ the objects that we want to render will be ~~always~~ represented by div ~~element~~ in the dom. This div will have unique Id, classes and also custom data attributes which can be used for styling and selection.		In modern JS the objects that we want to render will always be represented by '''div''' elements in the dom. This div will have a unique id, classes, and also custom data attributes which can be used for styling and selection.

			Here is an example of some sort of card 1 of type card_21. Note that you probably don't need both card_21 as a class and as a data-num, you can use either for selection or styling.

	~~This is some sort of card 1 of type card_21. Note that you probably don't need both card_21 as class and as data-num, you can use either for selection or styling.~~
	<pre>		<pre>
	<div id="card_21_1" class="card card_21" data-num="21"></div>		<div id="card_21_1" class="card card_21" data-num="21"></div>
	</pre>		</pre>

	This is 10 of hearts and king of clubs inside a hand ~~inside~~ a game		This is the 10 of hearts and king of clubs inside a hand in a game

	<pre>		<pre>
	<div id="game" class="classic_deck">		<div id="game" class="classic_deck">
Line 32:		Line 34:
	</pre>		</pre>

	If you prefer not to use custom attributes you can do this		If you prefer not to use custom attributes you can do this:

	<pre>		<pre>
	<div id="card_H_10" class="card_H_10 suit_H rank_10"> </div>		<div id="card_H_10" class="card_H_10 suit_H rank_10"> </div>
	</pre>		</pre>

	Card id, does not have to be like this either, I use this one because it maps to my db, but if you using Deck component for cards in "deck" table, you can use something like		Card id, does not have to be like this either, I use this one because it maps to my db, but if you are using the '''Deck''' component for cards in a "deck" table, you can use something like:

	<pre>		<pre>
	<div id="deck_33" class="card_H_10 suit_H rank_10"> </div>		<div id="deck_33" class="card_H_10 suit_H rank_10"> </div>
Line 44:		Line 48:


	Now we can use css to show graphics and defined size. Note unlike ~~stock~~ - the size should not be bound this component, ~~you~~ cards can have different ~~size~~ for example in tooltips vs hand		Now we can use css to show graphics and defined size. Note unlike Stock - the size should not be bound in this component, your cards can have different sizes (for example in tooltips vs. in the hand).

	We will use the BGA card stock https://x.boardgamearena.net/data/others/cards/FULLREZ_CARDS_ORIGINAL_NORMAL.jpg.		We will use the BGA card stock https://x.boardgamearena.net/data/others/cards/FULLREZ_CARDS_ORIGINAL_NORMAL.jpg.

	It has 15 columns.		It has 15 columns.

Victoria La: /* Selection and Click Handlers */

2021-10-04T23:09:54Z

Selection and Click Handlers

← Older revision		Revision as of 01:09, 5 October 2021
Line 243:		Line 243:
	}		}

	How if you need to do some action based on ~~select~~ this can be your do something button ~~bandler~~ (this will create array of ids of cards)		How if you need to do some action based on selection this can be in your "do something" button handler (this example below will create array of ids of cards)
	<pre>		<pre>
	const card_ids = Array.from(document.querySelectorAll('.card.selected')).map(x=>x.id);		const card_ids = Array.from(document.querySelectorAll('.card.selected')).map(x=>x.id);
Line 251:		Line 251:

	If you don't need selection you can hook ajax call directly to handler above.		If you don't need selection you can hook ajax call directly to handler above.


	== Animation ==		== Animation ==

AmadanNaBriona: /* Overivew */

2021-10-04T23:03:06Z

Overivew

← Older revision		Revision as of 01:03, 5 October 2021
Line 1:		Line 1:

	== Overivew ==		== Overivew ==
	If [[Stock]] component works for you then great, you don't need this article. If you start tweaking it and you are doing something slightly more complex and you cannot find answer, it may be best to not use it.		If the [[Stock]] component works for you then great, you don't need this article. If you start tweaking it and you are doing something slightly more complex and you cannot find an answer, it may be best to not use it.
	This ~~wiki on~~ how to replace ~~this~~.		This article describes how to replace Stock.
	What is Stock? ~~Its~~ component that does a lot of stuff ~~in one~~:		What is Stock? It's a component that does a lot of stuff at once:
	* It generates ~~inline~~ attributes of object the ~~represent~~ graphics and ~~sizes of~~ "cards" (can be anything really)		* It generates in-line attributes of an object the represents graphics and dimensions for "cards" (can be anything really).
	* It also manages layout of ~~one~~ single container of such cards, and cards within it - including animation		* It also manages the layout of a single container of such cards, and cards within it - including animation.
	* It also manages ~~selection~~ in that container		* It also manages selections in that container.

	~~Recipe to get rid of stock (the gist of it):~~
	* Create all cards as divs in template file with help of view.php is needed
	* Create generic card css with image, sizing etc, create/generate css per card type with background positioning - there are scripts in sharecode to generate grid positioning (what stock does)
	* Create a parent for card placement and use dojo.~~place to move cards there, for css use your favour layout for this, including margins, etc~~
	* Trickky one: When cards are moved for animation you have to use special method, none of animation methods from bga parent class will work as card will not have absolute positioning, you can use methods from sharedcode project or create your own (the trick is during animation object has to have absolute positioning which is removed after animation)

			Recipe to get rid of Stock (the gist):
			* Create all cards as divs in the template file (with the help of view.php as needed)
			* Create generic css classes for the cards defining images, sizing, etc. Create/generate a css class for each card type with background positioning - there are scripts in sharescode to generate grid positioning (which is what Stock does under the hood)
			* Create a parent div for card placement and use dojo.place to move cards there. In css use your preferred layout for this, including margins, etc.
			* Tricky one: When cards are moved during animations you have to use a special method; none of animation methods from BGA parent classes will work, as the card will not have absolute positioning. You can use methods from the sharedcode project or create your own (the trick is that during animation the object has to have absolute positioning, which is removed after the animation).

	== Presentation ==		== Presentation ==