Board Game Arena - User contributions [en]

File:CallofKatulhuRules.pdf

2026-04-29T22:29:46Z

Ric1950:

File:CallofKatulhuDisplayImage(1).jpg

2026-04-28T23:00:22Z

Ric1950:

File:CallofKatulhuDisplayImage-resized.jpg

2026-04-28T22:55:12Z

Ric1950:

Gamehelpjunkdrawer

2026-04-24T01:02:22Z

Ric1950: Minor edit

=== Summary ===

Each round there are four new shapes to place in each of the junk drawer compartments. Each compartment can be used only once per round. Most points at game end wins!

=== Game Setup ===

A goal card is dealt out for each of the junk drawer grids, showing how a player can score points in each.

=== Game Play ===

Each round a player has to place the shape in a junk drawer, trying to maximize their score as outlined in the goal cards. (Note everyone places the shape on their own board.)

To place the shape, tap/click on the grid, and to move, tap/click a new position. You can use the buttons to rotate or flip. Click "Confirm" to confirm, and when all players have placed their shape then the game moves to the next shape or to the next round. (You may be able to change placement preferences in settings.)

=== Game End ===

A player must pass if they can't place a shape. (They will not have an option to pass if there is a shape they can play.)

The game continues until one (or all) player(s) can't place a shape. When each player has placed that shape (or passed) the game ends. If you are playing in solo mode, you need to gain more points than the combined example scores shown on the goal cards to win.

A game variation keeps the game going until the last player passes.

=== Settings ===

==== Placement Hints ====

There is a user preference that will give you a help button which will indicate where a shape can be placed. The intention is that experienced players will choose not to use this, but it is there in case you just can't find a location for a shape.

==== Drag and drop ====

The default option for placing shapes is to tap and click but this can be changed to drag and drop in player preferences. Drag and drop does not work properly on touch screens.

Gamehelpnineup

2026-03-17T21:37:20Z

Ric1950: Clarified scoring - emphasized double value of center card

Shuffle the deck. Deal 9 cards to each player and 1 card face up as a discard pile. Arrange cards in a 3x3 grid. Randomly choose a starting player. On your turn choose one action and proceed clockwise.

<b>FLIP</b> one of your face down cards face up, triggering any card abilities.

<b>EXCHANGE</b> one face down card with another players face down card. You may peek at the acquired card but it must remain face down.

<b>DRAW</b> a card from the deck or discard pile and exchange it (face up) with one of your face down cards, discarding it face up. *Note this action does not trigger card abilities.

When any player has all 9 cards face up the round ends immediately. Any remaining face down cards are flipped (with no effect). Score all cards. The card in the center is worth double.
Shuffle the deck, deal new cards and begin a new round starting with the player with the lowest score. The player with the most points after 3 rounds is the winner. Tied players share the victory.

'''SCORING'''

All cards count as single value except the card in the middle which is worth double. No points are scored if the card is adjacent to a zero card in the direction of the arrow.

<b>SPECIAL ABILITY CARDS</b>

1 point - Exchange another of your face up cards with another player's face up or face down card. Peek if it is a face down card (four cards).

3 points - Discard any face up card. Deal that player a new card face down (four cards).

9 points - Draw a card, reveal it and exchange it with another player's face down card (four cards).

10 points - Exchange this card with another player's face down card. Peek at this card (four cards).

<b>CARDS WITH ZERO POINTS</b>

Zero, and zero for a card below - one card.

Zero, and zero for a card to the left - one card.

Zero, and zero for a card to the right - one card.

Zero, and zero for a card above - one card.

<b>CARDS WITH POINTS</b>

-5 points - four cards.

-10 points - two cards.

2, 4, 5, 6, 7, 8, 10 points - four cards each.

Number of cards are for the standard deck of 54 cards. Two decks are used for games of 5 to 8 players.

Gamehelpnineup

2025-12-22T10:16:22Z

Ric1950: Change to card points

Shuffle the deck. Deal 9 cards to each player and 1 card face up as a discard pile. Arrange cards in a 3x3 grid. Randomly choose a starting player. On your turn choose one action and proceed clockwise.

<b>FLIP</b> one of your face down cards face up, triggering any card abilities.

<b>EXCHANGE</b> one face down card with another players face down card. You may peek at the acquired card but it must remain face down.

<b>DRAW</b> a card from the deck or discard pile and exchange it (face up) with one of your face down cards, discarding it face up. *Note this action does not trigger card abilities.

When any player has all 9 cards face up the round ends immediately. Any remaining face down cards are flipped (with no effect). Score all cards. The card in the center is worth double.
Shuffle the deck, deal new cards and begin a new round starting with the player with the lowest score. The player with the most points after 3 rounds is the winner. Tied players share the victory.

<b>SPECIAL ABILITY CARDS</b>

1 point - Exchange another of your face up cards with another player's face up or face down card. Peek if it is a face down card (four cards).

3 points - Discard any face up card. Deal that player a new card face down (four cards).

9 points - Draw a card, reveal it and exchange it with another player's face down card (four cards).

10 points - Exchange this card with another player's face down card. Peek at this card (four cards).

<b>CARDS WITH ZERO POINTS</b>

Zero, and zero for a card below - one card.

Zero, and zero for a card to the left - one card.

Zero, and zero for a card to the right - one card.

Zero, and zero for a card above - one card.

<b>CARDS WITH POINTS</b>

-5 points - four cards.

-10 points - two cards.

2, 4, 5, 6, 7, 8, 10 points - four cards each.

Number of cards are for the standard deck of 54 cards. Two decks are used for games of 5 to 8 players.

Gamehelpnineup

2025-12-22T07:50:26Z

Ric1950: Formatting change

Shuffle the deck. Deal 9 cards to each player and 1 card face up as a discard pile. Arrange cards in a 3x3 grid. Randomly choose a starting player. On your turn choose one action and proceed clockwise.

<b>FLIP</b> one of your face down cards face up, triggering any card abilities.

<b>EXCHANGE</b> one face down card with another players face down card. You may peek at the acquired card but it must remain face down.

<b>DRAW</b> a card from the deck or discard pile and exchange it (face up) with one of your face down cards, discarding it face up. *Note this action does not trigger card abilities.

When any player has all 9 cards face up the round ends immediately. Any remaining face down cards are flipped (with no effect). Score all cards. The card in the center is worth double.
Shuffle the deck, deal new cards and begin a new round starting with the player with the lowest score. The player with the most points after 3 rounds is the winner. Tied players share the victory.

<b>SPECIAL ABILITY CARDS</b>

1 point - Exchange another of your face up cards with another player's face up or face down card. Peek if it is a face down card (four cards).

3 points - Discard any face up card. Deal that player a new card face down (four cards).

9 points - Draw a card, reveal it and exchange it with another player's face down card (four cards).

10 points - Exchange this card with another player's face down card. Peek at this card (four cards).

<b>CARDS WITH ZERO POINTS</b>

Zero, and zero for a card below - one card.

Zero, and zero for a card to the left - one card.

Zero, and zero for a card to the right - one card.

Zero, and zero for a card above - one card.

<b>CARDS WITH POINTS</b>

-5 points - four cards.

-10 points - two cards.

2-10 points - four cards each.

Number of cards are for the standard deck of 54 cards. Two decks are used for games of 5 to 8 players.

Gamehelpnineup

2025-12-22T07:49:54Z

Ric1950: Formatting change

Shuffle the deck. Deal 9 cards to each player and 1 card face up as a discard pile. Arrange cards in a 3x3 grid. Randomly choose a starting player. On your turn choose one action and proceed clockwise.

<b>FLIP</b> one of your face down cards face up, triggering any card abilities.

<b>EXCHANGE</b> one face down card with another players face down card. You may peek at the acquired card but it must remain face down.

<b>DRAW</b> a card from the deck or discard pile and exchange it (face up) with one of your face down cards, discarding it face up. *Note this action does not trigger card abilities.

When any player has all 9 cards face up the round ends immediately. Any remaining face down cards are flipped (with no effect). Score all cards. The card in the center is worth double.
Shuffle the deck, deal new cards and begin a new round starting with the player with the lowest score. The player with the most points after 3 rounds is the winner. Tied players share the victory.

<b>SPECIAL ABILITY CARDS</b>
1 point - Exchange another of your face up cards with another player's face up or face down card. Peek if it is a face down card (four cards).

3 points - Discard any face up card. Deal that player a new card face down (four cards).

9 points - Draw a card, reveal it and exchange it with another player's face down card (four cards).

10 points - Exchange this card with another player's face down card. Peek at this card (four cards).

<b>CARDS WITH ZERO POINTS</b>

Zero, and zero for a card below - one card.

Zero, and zero for a card to the left - one card.

Zero, and zero for a card to the right - one card.

Zero, and zero for a card above - one card.

<b>CARDS WITH POINTS</b>

-5 points - four cards.

-10 points - two cards.

2-10 points - four cards each.

Number of cards are for the standard deck of 54 cards. Two decks are used for games of 5 to 8 players.

Gamehelpnineup

2025-12-22T07:48:06Z

Ric1950: Added information about the cards in the deck

Shuffle the deck. Deal 9 cards to each player and 1 card face up as a discard pile. Arrange cards in a 3x3 grid. Randomly choose a starting player. On your turn choose one action and proceed clockwise.

<b>FLIP</b> one of your face down cards face up, triggering any card abilities.

<b>EXCHANGE</b> one face down card with another players face down card. You may peek at the acquired card but it must remain face down.

<b>DRAW</b> a card from the deck or discard pile and exchange it (face up) with one of your face down cards, discarding it face up. *Note this action does not trigger card abilities.

When any player has all 9 cards face up the round ends immediately. Any remaining face down cards are flipped (with no effect). Score all cards. The card in the center is worth double.
Shuffle the deck, deal new cards and begin a new round starting with the player with the lowest score. The player with the most points after 3 rounds is the winner. Tied players share the victory.

<b>SPECIAL ABILITY CARDS</b>
1 point - Exchange another of your face up cards with another player's face up or face down card. Peek if it is a face down card (four cards).
3 points - Discard any face up card. Deal that player a new card face down (four cards).
9 points - Draw a card, reveal it and exchange it with another player's face down card (four cards).
10 points - Exchange this card with another player's face down card. Peek at this card (four cards).

<b>CARDS WITH ZERO POINTS</b>
Zero, and zero for a card below - one card.
Zero, and zero for a card to the left - one card.
Zero, and zero for a card to the right - one card.
Zero, and zero for a card above - one card.

<b>CARDS WITH POINTS</b>
-5 points - four cards.
-10 points - two cards.
2-10 points - four cards each.

Number of cards are for the standard deck of 54 cards. Two decks are used for games of 5 to 8 players.

Gamehelpjunkdrawer

2025-12-16T23:08:50Z

Ric1950: Minor change to solo game scoring

Each round there are four new shapes to place in each of the junk drawer compartments. Each compartment can be used only once per round.

Place the shapes to try to maximize your score as outlined in the goal cards. By default positioning the shapes is achieved by tapping or clicking a position on the grid and then using the buttons to rotate or flip the shape.

Further positioning is achieved by clicking or tapping. On devices without a touch screen you can change to drag and drop in the player preferences.

When you are happy with the placement click the Confirm button.

When all players have placed their shape then the game moves to the next shape or to the next round.

The game continues until one (or all) player(s) can't place a shape. When each player has placed that shape (or passed) the game ends. If you are playing in solo mode, you need to gain more points than the combined example scores shown on the goal cards to win.

A game variation keeps the game going until the last player passes.

You will not have an option to pass if there is a shape you can play. If there is nowhere to place a shape you will not have any option other than to pass.

There is a user preference that will give you a help button which will indicate where a shape can be placed but the intention is that experienced players will choose not to use this. But it is there in a situation you just can't find a location for a shape.

The default option for placing shapes is to tap and click but this can be changed to drag and drop in player preferences. Drag and drop does not work properly on touch screens.

Gamehelpjunkdrawer

2025-12-16T22:17:54Z

Ric1950: Minor editing

Each round there are four new shapes to place in each of the junk drawer compartments. Each compartment can be used only once per round.

Place the shapes to try to maximize your score as outlined in the goal cards. By default positioning the shapes is achieved by tapping or clicking a position on the grid and then using the buttons to rotate or flip the shape.

Further positioning is achieved by clicking or tapping. On devices without a touch screen you can change to drag and drop in the player preferences.

When you are happy with the placement click the Confirm button.

When all players have placed their shape then the game moves to the next shape or to the next round.

The game continues until one (or all) player(s) can't place a shape. When each player has placed that shape (or passed) the game ends. If you are playing in solo mode, you need to gain more points than the combined example scores shown on the cards to win.

A game variation keeps the game going until the last player passes.

You will not have an option to pass if there is a shape you can play. If there is nowhere to place a shape you will not have any option other than to pass.

There is a user preference that will give you a help button which will indicate where a shape can be placed but the intention is that experienced players will choose not to use this. But it is there in a situation you just can't find a location for a shape.

The default option for placing shapes is to tap and click but this can be changed to drag and drop in player preferences. Drag and drop does not work properly on touch screens.

Gamehelpjunkdrawer

2025-12-16T22:17:03Z

Ric1950: Made the method of placing shapes clearer and changed the number of points required to win the game if playing solo.

Each round there are four new shapes to place in each of the junk drawer compartments. Each compartment can be used only once per round.

Place the shapes to try to maximize your score as outlined in the goal cards. By default positioning the shapes is achieved by tapping or clicking a position on the grid and then using the buttons to rotate or flip the shape further positioning is achieved by clicking or tapping. On devices without a touch screen you can change to drag and drop in the player preferences. When you are happy with the placement click the Confirm button.

When all players have placed their shape then the game moves to the next shape or to the next round.

The game continues until one (or all) player(s) can't place a shape. When each player has placed that shape (or passed) the game ends. If you are playing in solo mode, you need to gain more points than the combined example scores shown on the cards to win.

A game variation keeps the game going until the last player passes.

You will not have an option to pass if there is a shape you can play. If there is nowhere to place a shape you will not have any option other than to pass.

There is a user preference that will give you a help button which will indicate where a shape can be placed but the intention is that experienced players will choose not to use this. But it is there in a situation you just can't find a location for a shape.

The default option for placing shapes is to tap and click but this can be changed to drag and drop in player preferences. Drag and drop does not work properly on touch screens.

Gamehelpnineup

2025-12-15T09:19:10Z

Ric1950: Summary of rules for 9up.

Gamehelpcallofkatulhu

2025-10-20T21:44:01Z

Ric1950: Added note about solo mode

The object of the game is to attract cats to your side of the board.

Players achieve this by matching the toys the cat requires by positioning their four left most toys. You can see the toys each cat requires by looking in the positions 1 to 4 at the bottom of each cat card. There is, by default a player preference setting that highlights a cat when the toys it requires are in the correct positions. Advanced players will most likely feel they don't require this assistance and turn this preference off.

There is a second player preference designed to help new players that will highlight cats and toys that have a toy in the correct position. This activated by hovering over a toy. This preference is also turned on by default.

Red, yellow and blue cats have two toys whilst black and white cats have three toys making them harder to attract and worth more points.

You can exchange the position of two toy cards by clicking on them both.

With the selection finalised hit the confirm button.

Then your opponent's corresponding toy is compared to yours - if one is weaker it is eliminated from this round. The relative strength of the toys in given in the reference card bottom left. So, for example, if your toy in position 1 is a mouse, it is weaker than yarn and stronger than the feather. It has no effect or is not effected by the laser pointer, catnip or scratching post.

Each cat is then checked to see if it has been attracted by a player. If a cat is attracted by both players it is discarded and replaced by a new cat from the deck.

If no cat is attracted for two successive rounds, each player must select a cat to be discarded and replaced.

The game ends when one player attracts seven cats. The player with the highest score wins.

Your score is determined by how many cats you have of each color according to the reference card top left. For example, if you have two blue cats (5) and three red cats (9) your score will be 14.

A tie is decided by the player with the largest set of black or white cards, then the player with the largest set of colored cards, then the most black and white cards combined. If still tied then both players are the winner.

There are two advanced game options - one where toys not used one round must be used the next.

The second option adds one purple cat worth ten points - Muffin requires four matched toys to attract her.

There is a solo option for players to choose where you can play against smart algorithms which make very good toy choices - it is excellent if you want a quick game or want to learn the game by yourself or to practise.

Gamehelpcallofkatulhu

2025-09-09T10:51:28Z

Ric1950:

Gamehelpcallofkatulhu

2025-09-09T00:07:49Z

Ric1950: Change user preference description

The object of the game is to attract cats to your side of the board.

Players achieve this by matching the toys the cat requires by positioning their four left most toys. You can see the toys each cat requires by looking in the positions 1 to 4 at the bottom of each cat card. There is, by default a player preference setting that highlights a cat when the toys it requires are in the correct positions. Advanced players will most likely feel they don't require this assistance and turn this preference off.

There is a second player preference designed to help new players that will highlight cats and toys that have a toy in the correct position. This activated by hovering over a toy. This preference is turned off by default.

Red, yellow and blue cats have two toys whilst black and white cats have three toys making them harder to attract and worth more points.

You can exchange the position of two toy cards by clicking on them both.

With the selection finalised hit the confirm button.

Then your opponent's corresponding toy is compared to yours - if one is weaker it is eliminated from this round. The relative strength of the toys in given in the reference card bottom left. So, for example, if your toy in position 1 is a mouse, it is weaker than yarn and stronger than the feather. It has no effect or is not effected by the laser pointer, catnip or scratching post.

Each cat is then checked to see if it has been attracted by a player. If a cat is attracted by both players it is discarded and replaced by a new cat from the deck.

If no cat is attracted for two successive rounds, each player must select a cat to be discarded and replaced.

The game ends when one player attracts seven cats. The player with the highest score wins.

Your score is determined by how many cats you have of each color according to the reference card top left. For example, if you have two blue cats (5) and three red cats (9) your score will be 14.

A tie is decided by the player with the largest set of black or white cards, then the player with the largest set of colored cards, then the most black and white cards combined. If still tied then both players are the winner.

There are two advanced game options - one where toys not used one round must be used the next.

The second option adds one purple cat worth ten points - Muffin requires four matched toys to attract her.

Gamehelpjunkdrawer

2025-09-02T21:57:41Z

Ric1950: Made the passing action clearer. Described help button preference option.

Each round there are four new shapes to place in each of the junk drawer compartments. Each compartment can be used only once per round.

Place the shapes to try to maximise your score as outlined in the goal cards.

The game continues until one (or all) player(s) can't place a shape. When each player has placed that shape (or passed) the game ends.

A game variation keeps the game going until the last player passes.

You will not have an option to pass if there is a shape you can play. If there is nowhere to place a shape you will not have any option other than to pass.

There is a user preference that will give you a help button which will indicate where a shape can be placed but the intention is that experienced players will choose not to use this. But it is there in a situation you just can't find a location for a shape.

The default option for placing shapes is to tap and click but this can be changed to drag and drop in player preferences. Drag and drop does not work properly on touch screens.

Gamehelpcallofkatulhu

2025-08-31T10:16:36Z

Ric1950: Changed description for hover over toys.

The object of the game is to attract cats to your side of the board.

Players achieve this by matching the toys the cat requires by positioning their four left most toys. You can see the toys each cat requires by looking in the positions 1 to 4 at the bottom of each cat card. There is, by default a player preference setting that highlights a cat when the toys it requires are in the correct positions. Advanced players will most likely feel they don't require this assistance and turn this preference off. There is a second player preference that will highlight cats that have a toy in the correct position. This activated by hovering over a toy. This preference is turned off by default as it can be quite annoying and is only intended to help new players.

Red, yellow and blue cats have two toys whilst black and white cats have three toys making them harder to attract and worth more points.

You can exchange the position of two toy cards by clicking on them both.

With the selection finalised hit the confirm button.

Then your opponent's corresponding toy is compared to yours - if one is weaker it is eliminated from this round. The relative strength of the toys in given in the reference card bottom left. So, for example, if your toy in position 1 is a mouse, it is weaker than yarn and stronger than the feather. It has no effect or is not effected by the laser pointer, catnip or scratching post.

Each cat is then checked to see if it has been attracted by a player. If a cat is attracted by both players it is discarded and replaced by a new cat from the deck.

If no cat is attracted for two successive rounds, each player must select a cat to be discarded and replaced.

The game ends when one player attracts seven cats. The player with the highest score wins.

Your score is determined by how many cats you have of each color according to the reference card top left. For example, if you have two blue cats (5) and three red cats (9) your score will be 14.

A tie is decided by the player with the largest set of black or white cards, then the player with the largest set of colored cards, then the most black and white cards combined. If still tied then both players are the winner.

There are two advanced game options - one where toys not used one round must be used the next.

The second option adds one purple cat worth ten points - Muffin requires four matched toys to attract her.

Gamehelpcallofkatulhu

2025-08-31T08:23:29Z

Ric1950: Described new user preferences.

The object of the game is to attract cats to your side of the board.

Players achieve this by matching the toys the cat requires by positioning their four left most toys. You can see the toys each cat requires by looking in the positions 1 to 4 at the bottom of each cat card. There is, by default a player preference setting that highlights a cat when the toys it requires are in the correct positions. Advanced players will most likely feel they don't require this assistance and turn this preference off. There is a second player preference that will highlight cats that require a certain toy - activated by hovering over a toy. This preference is turned off by default as it can be quite annoying and is only intended to help new players.

Red, yellow and blue cats have two toys whilst black and white cats have three toys making them harder to attract and worth more points.

You can exchange the position of two toy cards by clicking on them both.

With the selection finalised hit the confirm button.

Then your opponent's corresponding toy is compared to yours - if one is weaker it is eliminated from this round. The relative strength of the toys in given in the reference card bottom left. So, for example, if your toy in position 1 is a mouse, it is weaker than yarn and stronger than the feather. It has no effect or is not effected by the laser pointer, catnip or scratching post.

Each cat is then checked to see if it has been attracted by a player. If a cat is attracted by both players it is discarded and replaced by a new cat from the deck.

If no cat is attracted for two successive rounds, each player must select a cat to be discarded and replaced.

The game ends when one player attracts seven cats. The player with the highest score wins.

Your score is determined by how many cats you have of each color according to the reference card top left. For example, if you have two blue cats (5) and three red cats (9) your score will be 14.

A tie is decided by the player with the largest set of black or white cards, then the player with the largest set of colored cards, then the most black and white cards combined. If still tied then both players are the winner.

There are two advanced game options - one where toys not used one round must be used the next.

The second option adds one purple cat worth ten points - Muffin requires four matched toys to attract her.

Gamehelpcallofkatulhu

2025-08-01T23:45:43Z

Ric1950: Created page with "The object of the game is to attract cats to your side of the board. Players achieve this by matching the toys the cat requires by positioning their four left most toys. Exchange the position of two toys by clicking on the two cards. With the selection finalised hit the confirm button. Then your opponent's corresponding toy is compared to yours - if one is weaker it is eliminated from this round. Each cat is checked to see if it has been attracted by a player. If a c..."

The object of the game is to attract cats to your side of the board.

Players achieve this by matching the toys the cat requires by positioning their four left most toys. Exchange the position of two toys by clicking on the two cards.

With the selection finalised hit the confirm button.

Then your opponent's corresponding toy is compared to yours - if one is weaker it is eliminated from this round.

Each cat is checked to see if it has been attracted by a player. If a cat is attracted by both players it is discarded and replaced by a new cat from the deck.

If no cat is attracted for two successive rounds, each player must select a cat to be discarded and replaced.

The game ends when one player attracts seven cats. The player with the highest score wins.

A tie is decided by the player with the largest set of black or white cards, then the player with the largest set of coloured cards, then the most black and white cards combined. If still tied then both players are the winner.

There are two game options - one where toys not used one round must be used the next.

The second option adds a purple cat worth ten points.

Gamehelpjunkdrawer

2025-06-15T00:48:36Z

Ric1950:

Gamehelpjunkdrawer

2025-06-09T01:53:52Z

Ric1950:

Gamehelpjunkdrawer

2025-06-04T07:53:05Z

Ric1950: Summary of rules for Junk Drawer.

Game layout: view and template: yourgamename.view.php and yourgamename yourgamename.tpl

2025-02-04T20:01:53Z

Ric1950: Highlighted the important note.

{{Studio_Framework_Navigation}}

== Purpose of this file ==
<span style='color:red; font-size:20px;'>'''IMPORTANT NOTE:''' These files are deprecated, you shouldn't need to use it if you generate the template from the JS file. See the Reversi tutorial for an example of in JS template.</span>
== Overview ==
[[File:bga-pages-from-templates.PNG|700px]]

There are two files involved in overall game layout: yourgamename.view.php and yourgamename_yourgamename.tpl.

These files work together to provide the HTML layout of your game.

Using these 2 files, you specify what HTML is rendered in your game client interface.

In .tpl file you can directly write raw HTML that will be displayed by the browser.

Example: extract of "hearts_hearts.tpl":

<pre>
<div id="myhand_wrap" class="whiteblock">
<h3>{MY_HAND}</h3>
<div id="myhand">
</div>
</div>
</pre>

Things in curly braces are template variables. You cannot put any english text directly there.

Your view and your template are supposed to generate only the BASE layout of the game.

You shouldn't try to setup the current game situation in the view: this is the role of your Javascript code. Why? Because you'll have to write Javascript code to put game elements in place anyway, and you don't want to write it twice :)

Example of things to generate in your view:
* The overall layout of your game interface (what is displayed where).
* The board and fixed elements on the board (ex: places for cards, squares, ...).
* The tokens which are always on the board (but JS code may move them around during setup)

Example of things that shouldn't be generate by your view:
* Game elements that come and go from the game area.
* Game elements that normally hidden from players (other players cards, cards in the deck).

== Template system ==

BGA is using the phplib template system, used for example in PHPbb forums.

More details about how to use phplib template system here:
https://web.archive.org/web/20170506065401/http://www.phpbuilder.com:80/columns/david20000512.php3

== Variables ==

In your template (.tpl) file, you can use variables. Then in your view (.view.php) file, you fill these variables with values.

In the example above, "{MY_HAND}" is a variable. As you can see, a variable is uppercase characters surrounded by "{" and "}".

This is example of how to assign values to these variables in .view.php:

Examples:
<pre>

// Display a translated version of "My hand" at the place of the variable in the template
$this->tpl['MY_HAND'] = self::_("My hand");

// Display some raw HTML material at the place of the variable
$this->tpl['MY_HAND'] = self::raw( "<div class='myhand_icon'></div>" );

</pre>

WARNING: do not use a variable called {id} as it will interfere with action buttons.

WARNING: do not use a variable called {LB_[whatever]} as any variable starting with LB_ will interfere with the translation system.

WARNING: do not use a variable called {ID} as it could receive unexpected values.

== Template Blocks ==

Using "blocks", you can repeat a piece of HTML from your template several time.

You should use "blocks" whenever you have a block of HTML that must be repeated many times. For example, for ''Reversi'', we have to generate 64 (8x8) squares:

<pre>

(in reversi_reversi.tpl)

<div id="board">

<div id="square_{X}_{Y}" class="square" style="left: {LEFT}px; top: {TOP}px;"></div>


<div id="discs">
</div>
</div>

(in reversi.view.php)

$this->page->begin_block( "reversi_reversi", "square" );

$hor_scale = 64.8;
$ver_scale = 64.4;
for( $x=1; $x<=8; $x++ ) {
for( $y=1; $y<=8; $y++ ) {
$this->page->insert_block( "square", array(
'X' => $x,
'Y' => $y,
'LEFT' => round( ($x-1)*$hor_scale+10 ),
'TOP' => round( ($y-1)*$ver_scale+7 )
) );
}
}

</pre>

Explanations:
* You specify a block in your template file, using "BEGIN" and "END" keywords as xml comment. In the example above, we are creating a block named "square".
* In your view, you declare your block using "begin_block" method.
* Then, you can insert as many block as you want to, using "insert_block" method.

The insert_block method takes 2 parameters:
* the name of the block to insert.
* an associative array you can use to assign values to template variables of this block. In the example above, there are 4 parameters in the block (X, Y, LEFT and TOP).

== Nested blocks ==

You can use nested blocks. In the example below, we are going to add a mini-board for each player of the game, with 4 card places on each of it:

ggg_ggg.tpl file:

<pre>

<div class="miniboard" id="miniboard_{PLAYER_ID}">

<div class="card_places">

<div id="card_place_{PLAYER_ID}_{PLACE_ID}">
</div>

</div>

</div>

</pre>

ggg.view.php file:

<pre>
$this->page->begin_block( "mygame_mygame.tpl", "card_place" ); // Nested block must be declared first
$this->page->begin_block( "mygame_mygame.tpl", "player" );

foreach( $players as $player_id => $player ) {
// Important: nested block must be reset here, otherwise the second player miniboard will
// have 8 card_place, the third will have 12 card_place, and so one...
$this->page->reset_subblocks( 'card_place' );

for( $i=1; $i<=4; $i++ ) {
$this->page->insert_block( "card_place", array(
'PLAYER_ID' => $player_id,
'PLACE_ID' => $i
)
);
}

$this->page->insert_block( 'player', array( 'PLAYER_ID' => $player_id );
}

</pre>

== Conditional blocks ==
There is no if blocks but you can just have 2 blocks and make one to be "empty" i.e.
<pre>

<div id="something"></div>


<div id="something_else"></div>

</pre>
code in view.php
<pre>
if ($condition_a) {
// hide not_a
$this->page->begin_block("mygame_mygame.tpl", "not_a");
$this->page->insert_template( "not_a", '', []);
} else {
// hide a
$this->page->begin_block("mygame_mygame.tpl", "a");
$this->page->insert_template( "a", '', []);
}
</pre>
Note: if you need variable in these block do the insert_block on one that stays as usual

== Javascript templates ==

For game elements that come and go from the game area, we suggest you to define a Javascript template.

These will allow to separate all html from javascript and php files and keep it strictly in template file.

A Javascript template is defined in your template file like this:

(Reversi Token from Reversi example):
<pre>
<script type="text/javascript">

// Templates

var jstpl_disc='<div class="disc disccolor_${color}" id="disc_${xy}"></div>';

</script>
</pre>

Note: a section for javascript templates is already available at the end of your template skeleton file.

Then, you can use this javascript template to insert this piece of HTML in your game interface, like this:

<pre>
dojo.place( this.format_block( 'jstpl_disc', {
xy: x+''+y,
color: color
} ) , 'discs' );
</pre>

WARNING: always use lowercase for substitution variables in your Javascript templates, in order to avoid collision with phplib template variables (in particular, do not use ${ID}).

Note that '''you must translate''' any text arguments passed to ''this.format_block()'' that will be rendered on the screen, for example [[Translations#On_client_side_.28Javascript.29|using "_()"]].

== How to access game information from .view.php ==

From your .view.php, you can access the following:

=== Access current player id===

<pre>
global $g_user;
$current_player_id = $g_user->get_id();
</pre>

=== Access game object ===

In your view file, <code>"$this->game"</code> contains an instance of your main game class.

Example:
<pre>

// Access to some game elements description described in your "material.inc.php":
$my_cards_types = $this->game->card_types;

// Access to any (public) method defined in my .game.php file:
$result = $this->game->myMethod();
</pre>

=== Access spectator status ===

For spectators (players who are not part of the game but just spectating it) you must be careful of displaying all public information, but no private information.

In your view file, you can use <code>$this->game->isSpectator()</code> to know if the player is not part of the game, and adapt the interface to this case.

[[Category:Studio]]

Game interface stylesheet: yourgamename.css

2025-02-04T19:52:31Z

Ric1950: just added "s" to thing

{{Studio_Framework_Navigation}}

__TOC__

This is the CSS stylesheet of your game User Interface.

Styles defined on this file will be applied to the HTML elements you define in your HTML template (yourgame_yourgame.tpl), and to HTML elements you create dynamically with Javascript.

Usually, you are using CSS to:

1°) define the overall layout of your game
(ex: place the board on the top left, place player's hand beside, place the deck on the right, ...).

2°) create your CSS-sprites:
All images of your games should be gathered into a small number of image files. Then, using background-image and background-position CSS properties, you create HTML blocks that can display these images correctly.

Example:
<pre>
Example of CSS sprites (a black token and a white token, 20x20px each, embedded in the same "tokens.png" 40x20px image):

.white_token {
background-image: url('img/tokens.png');
background-position: 0px 0px;
}
.black_token {
background-image: url('img/tokens.png');
background-position: -20px 0px;
}
.token {
width: 20px;
height: 20px;
background-repeat: none;
}
</pre>

3°) ... anything else:

It is really easy to add and remove CSS classes dynamically from your Javascript with dojo.addClass and dojo.removeClass. It is also easy to check if an element has a class (dojo.hasClass) or to get all elements with a specific class (dojo.query).

This is why, very often, using CSS classes for the logic of your user interface allow you to do complex things easily.

Note: on the production platform, this file will be compressed and comments will be removed. Consequently, don't hesitate to put as many comments as necessary.

Important: ALL the CSS directives for your game must be included in this CSS file. You can't create additional CSS files and import them.

== Warning: using percentage in background-position ==

In the example above, you will see "background-position: -20px 0px;" is used for the black token. You could also write this as "background-position: -100% 0%;" which displays the image at the same offset, because it is relative to the size of the .token bounding box, and this means the size of your image file doesn't need to precisely match the size of objects on the screen (this can be easier to write, and you can also substitute different image files without having to rewrite all the css.) However, it is strongly recommended that if you do this, you also specify <code>background-size</code> as a percentage as well.

This is because, if the size of the div on screen after any further scaling - which is done for you by the framework to fit games into small windows - is not a whole integer number of pixels, then rounding must occur at some points in the calculation; if the background-size and background-position are calculated in different ways, the difference in rounding can result int the final image offsets being incorrect. This is most significant on Safari (on MacOS, iPhone and iPad) where the discrepancy can be substantial enough to make a game ''illegible''; but other browsers can be off by a few pixels as well. [https://jsfiddle.net/shadowphiar/yLq36mzt/ (external demo)]. To avoid this issue, either:

* choose one unit (pixels, em, percentages etc) and specify '''all''' the background-size and background-position offsets of a div in the same unit.
* adjust the size of your div so that, after any global scaling (this.gameinterface_zoomFactor), it will occupy an integer number of pixels on the screen.

== Warning: using Z-index ==

You may use z-index CSS property in your game interface, but you should pay attention to the following: BGA dialogs are displayed with a z-index of 950. If you want to use z-index safely, you should use value '''lower than 900'''.

About z-index: don't forget that if you are using a z-index, your element will be displayed above all elements that do not have a z-index. So it's no use to have big z-index values: 1 is enough most of the time :)

== Warning: using drop-shadow ==

Drop shadows can look nice, but they currently cause big performance issues on Safari, especially if you have more than 1 on the page at once. To ensure you don't cause issues on this browser, you have some alternatives.

* Use box-shadow instead. This only works for square drop-shadows.
* Bake the shadow into the image. That is, the png contains the shadow, and no shadow is needed on the css side. This only works when the shadow doesn't need to be dynamic.
* Disable drop-shadow in Safari:, using the <code>dj_safari</code> class which is automatically added to the <code>html</code> tag.

.game-element {
filter: drop-shadow(3px 3px 4px rgba(0,0,0,0.7));
}

html.dj_safari .game-element {
filter: none;
}

== Tip: how to make your cards looks beautiful :) ==

This piece of CSS (to adapt to your needs) is adding rounded corners + a shadow to your card.

<pre>
border-radius: 10px;
border: 1px black solid;
box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.4);
</pre>

== spectatorMode ==

When a spectator (= a player that is not part of the game) is viewing a game, the BGA framework add the CSS class "spectatorMode" to the wrapping HTML tag of your game.

This way, if you want to apply a special style to some elements of your game for spectators, you can do this in your CSS:

<pre>
.spectatorMode #your_element_id {
/* your special style */
}
</pre>

The most common usage of this is to hide some elements to spectators. For example, to hide "my hand" elements:

<pre>
.spectatorMode #my_hand {
display: none;
}
</pre>

[[Category:Studio]]