notes.txt

===========================================================
2016 September 20, Tuesday 06:02 PM ~~~
===========================================================
Phaser.io Modals
http://www.html5gamedevs.com/topic/12701-phaserio-modals/

Phaser JS how to stop event Propagation(firing) from textButton.events.onInputDown event to game.input.onDown event?
http://stackoverflow.com/questions/27650964/phaser-js-how-to-stop-event-propagationfiring-from-textbutton-events-oninputdo

linear(p0, p1, t) → {number}
https://github.com/photonstorm/phaser/blob/v2.6.2/src/math/Math.js#L831

linear: function (p0, p1, t) {
    return (p1 - p0) * t + p0;
}

===========================================================
2016 September 22, Thursday 09:50 PM ~~~
===========================================================
Investigate moving the sprite image (token background and text) of the Explore and Search tokens to be BitmapData.
Then use this to draw both the clickable tokens and the image badges in ImageDialogGroup.

Sprite Texture
http://phaser.io/examples/v2/bitmapdata/sprite-texture

Draw Group
http://phaser.io/examples/v2/bitmapdata/draw-group

===========================================================
2016 September 24, Saturday 01:34 PM ~~~
===========================================================
A guide to using Github Pages
https://www.thinkful.com/learn/a-guide-to-using-github-pages/

Creating and Hosting a Personal Site on GitHub
http://jmcglone.com/guides/github-pages/

GitHub Pages
https://jekyllrb.com/docs/github-pages/

===========================================================
2016 September 25, Sunday 10:47 AM ~~~
===========================================================
It is not a problem to create factory functions (or constructors) to create tokens and dialogs.

One problem is, each instance needs different parameters to the constructor (like text and image references).
These sets of parameters can be expressed as JSON objects.

Load Json File
http://phaser.io/examples/v2/loader/load-json-file

Load Tilemap Json
http://phaser.io/examples/v2/loader/load-tilemap-json

Another problem is, there needs to be a way to tell a token to create a dialog or a dialog to create another dialog or token (like a reveal).
Each different instance (including message and image) of token or dialog can be represented by and ID (or by both ID and type).
The JSON object instance can have an ID and type.

Another problem is, a JSON object instance may need to signal (eg destroy) an object in the world.
A list or array of these objects can be maintained, and where the JSON object IDs are the keys.

Object.prototype.hasOwnProperty()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty
* unlike the in operator, this method does not check down the object's prototype chain.

===========================================================
2016 September 26, Monday 08:39 PM ~~~
===========================================================
Webcast • Get Started with GitHub Pages • Featuring Dani Traphagen
https://www.youtube.com/watch?v=4TrOCv5Kukk
* Orphan branch gh-pages

===========================================================
2016 September 29, Thursday 06:33 PM ~~~
===========================================================
Game-icons.net is an online repository providing heaps of cool game related graphics.
http://game-icons.net/

game-icons/icons
https://github.com/game-icons/icons

Run icon
http://game-icons.net/lorc/originals/run.html

Magnifying glass icon
http://game-icons.net/lorc/originals/magnifying-glass.html

Steel door icon
http://game-icons.net/skoll/originals/steel-door.html

For the reveal dialogs, it appears that the reveal item appears at the same height, pushing down the dialog.

PISKEL
http://www.piskelapp.com/

===========================================================
2016 September 30, Friday 07:34 PM ~~~
===========================================================
Uncertainty icon
http://game-icons.net/lorc/originals/uncertainty.html

===========================================================
2016 September 30, Friday 10:01 PM ~~~
===========================================================
Adding tweens to groups
http://www.html5gamedevs.com/topic/1686-adding-tweens-to-groups/
Group.alpha is a public property now

Group Transform Tween
http://phaser.io/examples/v2/groups/group-transform-tween
game.add.tween(robot.scale).to( {x: 1.2, y: 1.2}, 1000, Phaser.Easing.Back.InOut, true, 0, false).yoyo(true);

Fading In A Sprite
http://phaser.io/examples/v2/tweens/fading-in-a-sprite
sprite.alpha = 0;
game.add.tween(sprite).to( { alpha: 1 }, 2000, Phaser.Easing.Linear.None, true, 0, 1000, true);

So to fade in a dialog group would be something like:

dialogGroup.alpha = 1; // by default
game.add.tween(dialogGroup).from( { alpha: 0 }, 2000, Phaser.Easing.Linear.None, true, 0, 1000, true);

Then set the onComplete signal to destroy the group.

===========================================================
2016 October 01, Saturday 09:44 AM ~~~
===========================================================
Simpler GitHub Pages publishing
https://github.com/blog/2228-simpler-github-pages-publishing

In git, is there a simple way of introducing an unrelated branch to a repository?
http://stackoverflow.com/questions/1384325/in-git-is-there-a-simple-way-of-introducing-an-unrelated-branch-to-a-repository

Create a disconnected git branch
https://coderwall.com/p/0n3soa/create-a-disconnected-git-branch

Dark brown (walls)
#533118

Light brown (floor)
#aea595

https://agentmirv.github.io/undiscoveredtales/

http://phaser.io/docs/2.6.2/Phaser.BitmapData.html#generateTexture

http://phaser.io/docs/2.6.2/Phaser.BitmapData.html#rect

http://phaser.io/docs/2.6.2/Phaser.BitmapData.html#fill

===========================================================
2016 October 02, Sunday 11:48 AM ~~~
===========================================================
Phaser Sandbox - Single Sprite Template

// Testing the generateTexture on chrome (works) and firefox (doesn't work)
function create() {
    var sprite = game.add.sprite(0, 0, 'phaser');

    var testBmd = game.make.bitmapData(27, 40);
    testBmd.copy('phaser');
    testBmd.generateTexture('phaserTexture');

    game.add.sprite(60, 60, 'phaserTexture')
}

Apparently Internet Explorer doesn't support Javascript find() function:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find

===========================================================
2016 October 03, Monday 09:24 PM ~~~
===========================================================
game.cache.addBitmapData('exploreTokenBmd', exploreTokenBmd)
game.cache.getBitmapData(bitmapDataId)

===========================================================
2016 October 04, Tuesday 07:35 PM ~~~
===========================================================
http://phaser.io/docs/2.6.2/Phaser.GameObjectCreator.html#tileSprite
tileSprite(x, y, width, height, key, frame)

Update Text
http://phaser.io/examples/v2/text/update-text

===========================================================
2016 October 05, Wednesday 09:32 PM ~~~
===========================================================
http://phaser.io/docs/2.6.2/Phaser.Text.html#autoRound

http://phaser.io/docs/2.6.2/Phaser.Text.html#setTextBounds

===========================================================
2016 October 08, Saturday 03:59 PM ~~~
===========================================================
Phaser Easing Test - JSFiddle
https://jsfiddle.net/BinaryMoon/a68Qp/

===========================================================
2016 October 09, Sunday 07:31 PM ~~~
===========================================================
Array.prototype.map()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
The map() method creates a new array with the results of calling a provided function on every element in this array.

Array.prototype.filter()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
The filter() method creates a new array with all elements that pass the test implemented by the provided function.

Get or Remove Random Array Elements Tutorial
https://www.developphp.com/video/JavaScript/Get-or-Remove-Random-Array-Elements-Tutorial

Array.prototype.splice()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
The splice() method changes the content of an array by removing existing elements and/or adding new elements.

===========================================================
2016 October 11, Tuesday 09:48 PM ~~~
===========================================================
Thinking of moving the hud buttons to the top of the screen.

Next time, work on the player targeted random events.
This means I need some example player objects and a new random event that targets a player.
Do I create a random event type, or target? This would target either a mapTile or player.

Once I have players, should I create a player screen and a load screen?

===========================================================
2016 October 12, Wednesday 07:58 PM ~~~
===========================================================
Regex Pal
http://www.regexpal.com/

RegExp
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp

Fisher–Yates Shuffle
https://bost.ocks.org/mike/shuffle/

Need to prevent the click of the next phase button during the reveal dialog sequence.

===========================================================
2016 October 19, Wednesday 07:37 AM ~~~
===========================================================
Stuff I can work on without monsters:

  Scenario Events
    * Events that are triggered after a number of turns has passed.
      * Mythos Events
      * Reveals (ala Cycle of Eternity)
      * Game Over (Scene)

  Investigator Selection (Scene?)

  Load Screen (Scene)

  Game Start (Scene)

===========================================================
2016 October 19, Wednesday 06:03 PM ~~~
===========================================================
PlayerSceneGroup
    Phaser.Group.call(this, game);

EnemySceneGroup
    Phaser.Group.call(this, game);

HudGroup
    Phaser.Group.call(this, game);

MakeRandomEvent
    new DialogGroup

MakeRandomEventResolve
    new DialogGroup

MakeRevealMap
    MakeMapTile
    MakeRevealDialog

MakeRevealDialog
    MakeToken
    new DialogGroup
    game.add.tween(dialogInstance)

MakeMapTile
    new MapTileGroup

MapTileGroup
    Phaser.Group.call(this, game);
    var mapTileSprite = game.make.sprite(x, y, Helper.getImage(imageKey))

MakeToken
    new TokenSprite

MakeDialog
    new DialogGroup

TokenSprite
    Phaser.Sprite.call(this, game, x, y, Helper.getImage(imageKey));

DialogGroup
    Phaser.Group.call(this, game);

===========================================================
MakeRandomEvent
    new DialogGroup

MakeRandomEventResolve
    new DialogGroup

MakeRevealDialog
    MakeToken
    new DialogGroup
    game.add.tween(dialogInstance)

MakeDialog
    new DialogGroup

===========================================================
Random Events
  Are there ones that are templates which have multiple random rooms?
  Some result in finding items. This means that those items can't be found again somehow.

Scenario Events
  What if more than one event qualifies (say more than one is found that happen after turn 6)?
  What about when a dialog is followed by a reveal map (I think this happens in cycle of eternity)?

Conditions
  Cycle of eternity - there is a scenario event where Eugene is killed if the kitchen is not explored by the 2nd turn.
    This starts with a reveal dialog on the door token.
    Then followed by a reveal dialog for the Hunting Horror.
  Cycle of eternity - there are several that are a reveal dialog for a cultist.
    Then followed by a reveal dialog for Eugene moving.

A map reveal should be like other reveals?
  * A list of mapTiles
  * Remove doors
  * Move player to center of mapTiles
  * Display first Dialog

A factory method would load all the reveals and process the first, which would be the map reveal (eg lobby).

===========================================================
2016 October 20, Thursday 07:18 AM ~~~
===========================================================
I want to see if I can replace the customCallback and follow with tween on location.
The follow for click movement and key movement can stay?

This seems to work:
var moveTween = game.add.tween(player.body).to({ x: game.gamedata.playerStart.x + 100}, 600, Phaser.Easing.Linear.None, true, 0, 0, false);

===========================================================
2016 October 22, Saturday 10:16 AM ~~~
===========================================================
I have replaced the customCallback with position tweens.
I have refactored map reveals outside of reveal lists.
This allows for scenario events that start with a dialog and are followed by a map reveal.

What about all the things that Eugene can do in Cycle of Eternity?
There are a number of conditions that are evaluated when Eugene moves, and also is later discovered in a previously unexplored room.

===========================================================
2016 October 23, Sunday 06:13 PM ~~~
===========================================================
So, let's say you want a token to open a particular dialog, based on a condition.
Let's also say this condition is based on the value of a 'global' variable (not one stored in a dialog, like the skill check).
This means the token must evaluate the condition on the global.
This also means that another thing, like a dialog, must set the value of the global.

What would this look like?

{
  "id":"token-box-lobby",
  "x":1200,
  "y":1200,
  "imageKey":"search-image",
  "clickId":"dialog-box-lobby",

  "clickConditional": [
    {
      "variable": "box-lobby",
      "value": "initial",
      "dialogId": "dialog-box-lobby"
    },
    {
      "variable": "box-lobby",
      "value": "tried",
      "dialogId": "dialog-box-lobby-tried"
    }
  ],

  "addToWorld": true
},
...
            } else if (action.type == "setGlobal") {
                var globalVar = game.globalVars.find(function (item) { return item.id == action.globalId });
                globalVar.value = action.value
            }
...

And so, you would need to declare this global somewhere, with an initial value.

"globals": [
    {
        "id: "box-lobby",
        "value: "initial"
    }
]

I guess this isn't too bad.

This could handle Eugene's different dialog states.
He would still be represented by different tokens, depending on where in the house he is.
But within those tokens, these conditions could be used.

Do I want to go down the road of condition data structures yet?
Not yet.

This will be needed for scenario events with more involved conditions.

===========================================================
2016 October 24, Monday 06:40 PM ~~~
===========================================================
So, scenario events...

The first condition we encounter in Cycle of Eternity is a condition on the turn count.
If the Dining Room is not revealed by the Mythos Phase of the 2nd turn, Eugene is not saved.

The second condition we encounter is investigator count.
The turn that triggers the appearance of the first cultist depends on investigator count.
  2 Investigators:
  * First Cultist appeared after 5 turns.

  3 Investigators:
  * First Cultist appeared after 4 turns.

  4 Investigators:
  * First Cultist appeared after 4 turns.

  5 Investigators:
  * First Cultist appeared after 3 turns.

There are some scenario events that could have a global flag as a condition.
* If the wiring puzzle is not solved in the current turn, a fire spreads on the next turn.
* Reading of the arcane script gives a spell on the current turn, a Deep One is revealed on the next turn.
* If you have read the diary and then smashed the urn, the ghost is revealed (still not sure of the exact conditions on this one).

On question on Eugene,
When Eugene moves into an unexplored tile (the Study), what happens to him?
We discover him later; when the Study is revealed, he is also revealed.
Is the Eugene reveal-dialog appended to the Study's reveal list?
Is the Eugene reveal-dialog already present on the Study's reveal least, but revealed based on a global condition?

===========================================================
2016 October 25, Tuesday 06:35 PM ~~~
===========================================================
The wiring puzzle scenario event opens a token dialog, the continue would set the fire flag.
Actually, the wiring puzzle appears to have different penalty outcomes.
The smashed urn scenario event opens a reveal token dialog.
The cultist scenario event opens a reveal token dialog.

Also, the wiring puzzle has the random (conditional) dialog after the search dialog.
This is different than the conditional placed at the token level.
Perhaps you could point a token or dialog button to an id that was a condition itself.
Then that condition would resolve and do the appropriate thing?
Maybe leave this as a refactoring goal (after implementing without that concept).

Random events will probably also be treated like random events, put into an array and shifted off.
But, the scenario events won't be re-shuffled like the random events.
Although, the reshuffling of random events only exists right now because I don't have a lot of random events defined.

===========================================================
2016 October 27, Thursday 10:03 PM ~~~
===========================================================
I could work on the turn counter, but I'm thinking I should just move on to monsters.
There are types of monsters and instances of monsters.
I don't want to theorize any more than that now.
I should just start writing code and cleaning it up later.

===========================================================
2016 October 29, Saturday 10:27 AM ~~~
===========================================================
Planning on starting on the monster screens.
I feel that I should fix some of the UI bugs, double clicking bugs, for example.

===========================================================
2016 November, 4, Friday 12:11 PM ~~~
===========================================================
Adding Custom Fonts in Phaser
http://www.melkybee.com/blog/2015/04/26/adding-custom-fonts-in-phaser/

The post below is interesting. I was thinking that those things would need some kind of tagging system.

Investigator "Weights," Item Traits, and Monster Traits
http://boardgamegeek.com/thread/1666116/investigator-weights-item-traits-and-monster-trait

The following traits for Items are in the game (in addition to Common, Unique, and Spell items).
* Weapon
* HeavyWeapon
* BladedWeapon
* Firearm
* Recovery
* Book
* Tool
* LightSource
* Trinket
* Powerful
* Weak
* Utility
* AttackSpell
* Small
* Large

Monsters also have traits that the app uses to generate slightly less-random encounters.
* Humanoid
* Beast
* Incorporeal
* Small
* Large
* Massive
* Human
* Caster
* Leader
* Undead
* Smart
* Fast
* Flying
* Aquatic
* Subterranean
* Arctic
* Interdimensional
* Tentacles
* Wings
* Tail
* Claws
* Mouths
* Unique
* Medium
* Huge

===========================================================
2016 December 02, Friday 08:10 PM ~~~
===========================================================
Freeing JavaScript object
http://stackoverflow.com/questions/4523172/freeing-javascript-object

What does it look like when the discard of a monster triggers an event?

===========================================================
2016 December 28, Wednesday 06:17 PM ~~~
===========================================================
Before I fix anything else, I should refactor.

===========================================================
2016 December 31, Saturday 01:18 PM ~~~
===========================================================
function [A-Za-z]+[ ]*\([^)]*\)[ ]*{
[A-Za-z]+\.prototype

function Helper() {

function MakePlayerEvadeDialog(game) {
function PlayerEvadeDialogGroup(game, text) {
PlayerEvadeDialogGroup.prototype = Object.create(Phaser.Group.prototype);
PlayerEvadeDialogGroup.prototype.constructor = PlayerEvadeDialogGroup;
PlayerEvadeDialogGroup.prototype.confirmButtonClicked = function (button, pointer) {
PlayerEvadeDialogGroup.prototype.cancelButtonClicked = function (button, pointer) {
PlayerEvadeDialogGroup.prototype.resolveContinueButtonClicked = function (button, pointer) {
PlayerEvadeDialogGroup.prototype.hideDialog = function () {
PlayerEvadeDialogGroup.prototype.showDialog = function () {

function WeaponAttackDialogGroup(game, attackText) {
WeaponAttackDialogGroup.prototype = Object.create(Phaser.Group.prototype);
WeaponAttackDialogGroup.prototype.constructor = WeaponAttackDialogGroup;
WeaponAttackDialogGroup.prototype.contineuButtonClicked = function () {

function MakePlayerAttackDialog(game) {
function PlayerAttackDialogGroup(game) {
PlayerAttackDialogGroup.prototype = Object.create(Phaser.Group.prototype);
PlayerAttackDialogGroup.prototype.constructor = PlayerAttackDialogGroup;
PlayerAttackDialogGroup.prototype.attackButtonClicked = function (button, pointer) {

function MakeMonsterDiscardDialog(game) {
function MonsterDiscardDialogGroup(game) {
MonsterDiscardDialogGroup.prototype = Object.create(Phaser.Group.prototype);
MonsterDiscardDialogGroup.prototype.constructor = MonsterDiscardDialogGroup;
MonsterDiscardDialogGroup.prototype.confirmButtonClicked = function () {
MonsterDiscardDialogGroup.prototype.cancelButtonClicked = function () {

function MakeMonsterHorrorCheckDialogGroup(game, id) {
function MonsterHorrorCheckDialogGroup(game, messageText) {
MonsterHorrorCheckDialogGroup.prototype = Object.create(Phaser.Group.prototype);
MonsterHorrorCheckDialogGroup.prototype.constructor = MonsterHorrorCheckDialogGroup;
MonsterHorrorCheckDialogGroup.prototype.continueClicked = function (button, pointer) {

function MakeHorrorCheckConfirmDialog(game, monsterInstance) {
function HorrorCheckConfirmDialogGroup(game, monsterInstance) {
HorrorCheckConfirmDialogGroup.prototype = Object.create(Phaser.Group.prototype);
HorrorCheckConfirmDialogGroup.prototype.constructor = HorrorCheckConfirmDialogGroup;
HorrorCheckConfirmDialogGroup.prototype.cancelClicked = function (button, pointer) {
HorrorCheckConfirmDialogGroup.prototype.confirmClicked = function (button, pointer) {

function MakeHorrorCheckDialog(game) {
function HorrorCheckDialogGroup(game) {
HorrorCheckDialogGroup.prototype = Object.create(Phaser.Group.prototype);
HorrorCheckDialogGroup.prototype.constructor = HorrorCheckDialogGroup;
HorrorCheckDialogGroup.prototype.continueClicked = function (button, pointer) {

function MakeMonsterAttackDialog(game, id) {
function MonsterAttackDialogGroup(game, moveText, attackButtonText, nonAttackButtonText, attackText, nonAttackText) {
MonsterAttackDialogGroup.prototype = Object.create(Phaser.Group.prototype);
MonsterAttackDialogGroup.prototype.constructor = MonsterAttackDialogGroup;
MonsterAttackDialogGroup.prototype.attackButtonClicked = function (button, pointer) {
MonsterAttackDialogGroup.prototype.nonAttackButtonClicked = function (button, pointer) {
MonsterAttackDialogGroup.prototype.attackContinueButtonClicked = function (button, pointer) {
MonsterAttackDialogGroup.prototype.nonAttackContinueButtonClicked = function (button, pointer) {
MonsterAttackDialogGroup.prototype.hideDialog = function () {
MonsterAttackDialogGroup.prototype.showDialog = function () {

function MakeMonster(game, id) {
function Monster() {
Monster.prototype.alignInTray = function (position) {
Monster.prototype.trayClicked = function () {
Monster.prototype.updateDamage = function() {
Monster.prototype.showDetailImage = function () {
Monster.prototype.hideDetailImage = function () {
Monster.prototype.discard = function () {

function MakeScene(game, id) {
function PlayerSceneGroup(game) {
PlayerSceneGroup.prototype = Object.create(Phaser.Group.prototype);
PlayerSceneGroup.prototype.constructor = PlayerSceneGroup;
PlayerSceneGroup.prototype.updatePhase = function () {
PlayerSceneGroup.prototype.destroyScene = function () {

function EnemySceneGroup(game) {
EnemySceneGroup.prototype = Object.create(Phaser.Group.prototype);
EnemySceneGroup.prototype.constructor = EnemySceneGroup;
EnemySceneGroup.prototype.updatePhase = function () {
EnemySceneGroup.prototype.beginEnemySteps = function () {
EnemySceneGroup.prototype.destroyScene = function () {

function HudGroup(game) {
HudGroup.prototype = Object.create(Phaser.Group.prototype);
HudGroup.prototype.constructor = HudGroup;
HudGroup.prototype.discardCurrentMonster = function () {
HudGroup.prototype.destroyPlayerEvadeDialog = function () {
HudGroup.prototype.hidePlayerEvadeDialog = function () {
HudGroup.prototype.showPlayerEvadeDialog = function () {
HudGroup.prototype.destroyPlayerAttackDialog = function () {
HudGroup.prototype.hidePlayerAttackDialog = function () {
HudGroup.prototype.showPlayerAttackDialog = function () {
HudGroup.prototype.destroyMonsterAttackDialog = function () {
HudGroup.prototype.hideMonsterAttackDialog = function () {
HudGroup.prototype.showMonsterAttackDialog = function () {
HudGroup.prototype.setMonsterDetail = function (monsterInstance) {
HudGroup.prototype.makeMonsterDetailGroup = function (game) {
HudGroup.prototype.monsterEvadeClicked = function (button, pointer) {
HudGroup.prototype.monsterAttackClicked = function (button, pointer) {
HudGroup.prototype.monsterSubtractClicked = function (button, pointer) {
HudGroup.prototype.monsterAddClicked = function (button, pointer) {
HudGroup.prototype.showMonsterTrayClicked = function (button, pointer) {
HudGroup.prototype.endPhaseClicked = function (button, pointer) {
HudGroup.prototype.updatePhaseButtonImage = function () {
HudGroup.prototype.fireEvent = function () {
HudGroup.prototype.fireExtinguished = function () {
HudGroup.prototype.fireSpreads = function () {
HudGroup.prototype.randomEvent = function () {
HudGroup.prototype.randomEventDone = function () {
HudGroup.prototype.scenarioEvent = function () {
HudGroup.prototype.scenarioEventDone = function () {
HudGroup.prototype.monsterAttack = function () {
HudGroup.prototype.monsterHorrorCheck = function (monsterInstance) {
HudGroup.prototype.horrorCheck = function () {
HudGroup.prototype.enemyPhaseDone = function () {
HudGroup.prototype.showEnemyPhaseBG = function () {
HudGroup.prototype.hideEnemyPhaseBG = function (callback) {
HudGroup.prototype.showMonsterTray = function () {
HudGroup.prototype.hideMonsterTray = function () {
HudGroup.prototype.showMonsterDetail = function () {
HudGroup.prototype.hideMonsterDetail = function () {

function MakeRandomEvent(game, id) {
function MakeRandomEventResolve(game, id) {

function MakeRevealList(game, id) {
function MakeRevealDialog(game, id) {

function MakeMapTile(game, id) {
function MapTileGroup(game, id, x, y, imageKey, angle) {
MapTileGroup.prototype = Object.create(Phaser.Group.prototype);
MapTileGroup.prototype.constructor = MapTileGroup;

function MakeToken(game, id) {
function MakeDialog(game, id) {
function TokenSprite(game, id, x, y, imageKey, clickId, clickConditions, addToWorld) {
TokenSprite.prototype = Object.create(Phaser.Sprite.prototype);
TokenSprite.prototype.constructor = TokenSprite;
TokenSprite.prototype.tokenClicked = function (token, pointer) {
TokenSprite.prototype.openDialog = function() {
TokenSprite.prototype.fadeOut = function (callback) {

function DialogGroup(game, id, messageText, imageKey, buttonType, buttonData, skillTarget) {
DialogGroup.prototype = Object.create(Phaser.Group.prototype);
DialogGroup.prototype.constructor = DialogGroup;
DialogGroup.prototype.cancelClicked = function (button, pointer) {
DialogGroup.prototype.skillSubtractClicked = function (button, pointer) {
DialogGroup.prototype.skillAddClicked = function (button, pointer) {
DialogGroup.prototype.skillConfirmClicked = function (button, pointer) {
DialogGroup.prototype.buttonClicked = function (button, pointer) {
DialogGroup.prototype.fadeOut = function (callback) {

function DialogMessage(game, text, imageKey) {
DialogMessage.prototype = Object.create(Phaser.Group.prototype);
DialogMessage.prototype.constructor = DialogMessage;

function DialogButtonThin(game, text, width) {
DialogButtonThin.prototype = Object.create(Phaser.Group.prototype);
DialogButtonThin.prototype.constructor = DialogButtonThin;

function DialogButtonMedium(game, text, width) {
DialogButtonMedium.prototype = Object.create(Phaser.Group.prototype);
DialogButtonMedium.prototype.constructor = DialogButtonMedium;

function DialogMessageMonster(game, text, width) {
DialogMessageMonster.prototype = Object.create(Phaser.Group.prototype);
DialogMessageMonster.prototype.constructor = DialogButtonMedium;

function OutlineBox(game, width, height) {
OutlineBox.prototype = Object.create(Phaser.Group.prototype);
OutlineBox.prototype.constructor = OutlineBox;

===========================================================
2017 January 07, Saturday 10:07 PM ~~~
===========================================================
Had been working on (paper) to review the existing system.
Outlined the different dialogs in an attempt to find an abstraction.
Separated dialogs that are generated from map tokens from the ones generated by buttons in what I am calling the HUD.
Eventually, I want to separate the different behaviors into 'modules' that each have their own API.

===========================================================
2017 October 20, Friday 10:59 PM ~~~
===========================================================
Merged the refactor work to master.
Forgot I had this notes.txt.
Thinking of somehow using Tiled to assist in creating the mapTiles and mapTokens data.

===========================================================
2017 October 21, Saturday 7:19 AM ~~~
===========================================================
TODOS:
* Monster discard can perform an action, like the Hunting Horror in the kitchen of Cycle of Eternity.
* Monsters can exceed the tray length, drag to show more
* Weapon -> Monster Type matrix / Attack Tags?
* Monster dialog can be called from a reveal.
* Skill test dialog can be called from a reveal.
* Any dialog can be called from a reveal?
* Certain scenario events can suppress the random event.
* Monsters don't always have an attack dialog (Innsmouth Mob).
* Inventory button.
* Menu button.
* Fix cutsceneCamera behavior.

===========================================================
Tiled
https://github.com/bjorn/tiled

JSON Schema Based Editor
https://github.com/jdorn/json-editor

===========================================================
I guess I would need to create a tileset that represented each map tile in the base game.
And another tileset would be created with the map tokens.
Use a tile layer to draw the map, and an object layer to represent the map tiles.
Use another tile layer to draw the tokens, and another object layer to represent the map tiles.
Should probably try to get this working to see how feasible it is.
What about the mapTile background colors?
What about specifying the entryTokenIds, can this be done in Tiled?

How do I author a tileset?
I have a TileWalls png in Piskel. 
I'll need another png that can handle interior corners.
Also, I should try writing the map tile name to the screen.

Pyxel Edit
http://pyxeledit.com/

===========================================================
2017 October, Sunday 3:26 PM ~~~
===========================================================
Trying to use app-drawer-layout with a app-header-layout / app-header.
The problem is that I get a scrollbar on the right, but I don't want one.
Not sure how to fix this.

Tried something like this, but still saw the scrollbar:
document.getElementById("main").style.overflow = "hidden"; 

Full-height app layouts: A CSS trick to make it easier
http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

Flexbox Full Page Web App Layout 
http://geon.github.io/programming/2016/02/24/flexbox-full-page-web-app-layout

A Complete Guide to Flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Apparently, body overflow: hidden; does the trick...

===========================================================
2017 November, Tuesday 8:55 PM ~~~
===========================================================
GIMP Batch Mode
https://www.gimp.org/tutorials/Basic_Batch/

(define 
    (simple-unsharp-mask filename radius amount threshold)
    (let* 
        (
            (image 
                (car 
                    (gimp-file-load RUN-NONINTERACTIVE filename filename)
                )
            )
            (drawable 
                (car 
                    (gimp-image-get-active-layer image)
                )
            )
        )
        (plug-in-unsharp-mask RUN-NONINTERACTIVE image drawable radius amount threshold)
        (gimp-file-save RUN-NONINTERACTIVE image drawable filename filename)
        (gimp-image-delete image)
    )
)

gimp -i -b '(simple-unsharp-mask "foo.png" 5.0 0.5 0)' -b '(gimp-quit 0)'     

===========================================================
(define 
    (batch-unsharp-mask pattern radius amount threshold)
    (let* 
        (
            (filelist 
                (cadr 
                    (file-glob pattern 1)
                )
            )
        )
        (while 
            (not 
                (null? filelist)
            )
            (let* 
                (
                    (filename 
                        (car filelist)
                    )
                    (image 
                        (car 
                            (gimp-file-load RUN-NONINTERACTIVE filename filename)
                        )
                    )
                    (drawable 
                        (car 
                            (gimp-image-get-active-layer image)
                        )
                    )
                )
                (plug-in-unsharp-mask RUN-NONINTERACTIVE image drawable radius amount threshold)
                (gimp-file-save RUN-NONINTERACTIVE image drawable filename filename)
                (gimp-image-delete image)
            )
            (set! filelist 
                (cdr filelist)
            )
        )
    )
)

gimp -i -b '(batch-unsharp-mask "*.png" 5.0 0.5 0)' -b '(gimp-quit 0)'

===========================================================
NEW GIMP 2.8.2 & Repository w/ How To Install Script-fu in 2017
https://www.youtube.com/watch?v=vSqqs3FkZ0I

===========================================================
Further information
If you want to write your own scripts for batch processing, we suggest you use the Procedure Browser as found in the Help menu. It gives you a detailed list of all commands.

===========================================================
2017 November, Friday 10:07 PM ~~~
===========================================================
Compositing And Blending In CSS
https://www.sarasoueidan.com/blog/compositing-and-blending-in-css/

CSS Image Tint
https://codepen.io/jr/pen/rliKq

rotate()
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate

===========================================================
1) Convert the tile image data to a single map tile image.
2) Leave the token image the same.
3) Figure out how to do the same bitmap data operations in css.
4) Get the image data array from the game and generate dom.

===========================================================
2017 November, Saturday 2:07 PM ~~~
===========================================================
Polymer 1: dom-repeat and how to get item data
https://medium.com/@tylergraf/polymer-1-dom-repeat-and-how-to-get-item-data-51879b4c73cd

Data binding helper elements
Template repeater (dom-repeat)
https://www.polymer-project.org/2.0/docs/devguide/templates

===========================================================
2017 November, Saturday 9:29 PM ~~~
===========================================================
phaser.io pre-loading data and then pre-loading images
https://stackoverflow.com/questions/25458928/phaser-io-pre-loading-data-and-then-pre-loading-images
http://examples.phaser.io/_site/view_full.html?d=loader&f=load+events.js&t=load%20events

===========================================================
2017 November, Sunday 7:35 AM ~~~
===========================================================
Using States in Phaser.JS Javascript Game Development 
http://perplexingtech.weebly.com/game-dev-blog/using-states-in-phaserjs-javascript-game-developement

===========================================================
2017 November 24, Friday 10:53 AM ~~~
===========================================================
Cloud9 isn't keeping my node, bower and polymer installations?
nvm install node
npm install -g bower
npm install -g polymer-cli

===========================================================
2017 November 25, Saturday 1:35 PM ~~~
===========================================================
Node version not persisting
https://community.c9.io/t/node-version-not-persisting/15081
* Try running nvm ls to see all installed node versions and then nvm use <versionnumber> to activate the version you want.

===========================================================
https://github.com/aubort/polymer-element-on-c9

polymer serve --hostname "0.0.0.0"

https://undiscoveredtales-agentmirv.c9users.io:8081/app/editor/

===========================================================
2018 January 12, Friday 7:19 pm ~~~
===========================================================
Handle and fire events
https://www.polymer-project.org/2.0/docs/devguide/events

Polymer 1.0: Is there a way to pass an argument to a Polymer function from an attribute?
https://stackoverflow.com/questions/31441401/polymer-1-0-is-there-a-way-to-pass-an-argument-to-a-polymer-function-from-an-at

How to pass parameters in Polymer 2.0 on-tap function?
https://stackoverflow.com/questions/43505067/how-to-pass-parameters-in-polymer-2-0-on-tap-function

Random Colors in JavaScript
https://www.kirupa.com/html5/random_colors_js.htm

How to Generate Random Colors Programmatically
https://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/

===========================================================
2018 January 13, Saturday 12:07 pm ~~~
===========================================================
Drag Event Parameters
https://phaser.io/examples/v2/input/drag-event-parameters

Snap On Drag
https://phaser.io/examples/v2/input/snap-on-drag

===========================================================
2018 January 14, Sunday 8:31 am ~~~
===========================================================
Phaser.Component.InputEnabled
https://phaser.io/docs/2.6.2/Phaser.Component.InputEnabled.html

If you want to temporarily disable input for a Game Object, then it's better to set
input.enabled = false, as it won't reset any of the Input Handlers internal properties.
You can then toggle this back on as needed.

===========================================================
2018 January 19, Friday 10:13 pm ~~~
===========================================================
Drag w/ mouse right-button only (better)
https://codepen.io/samme/pen/MJwzaB

Class: Phaser.DeviceButton - 2.6.2
https://phaser.io/docs/2.6.2/Phaser.DeviceButton.html

Class: Phaser.Pointer - 2.6.2
https://phaser.io/docs/2.6.2/Phaser.Pointer.html#targetObject

===========================================================
2018 January 23, Tuesday 7:56 pm ~~~
===========================================================
Need to add angle property to mapTokens like mapTiles.
Then I can make all walls the north wall image.
The tokens will also need an auto-generated id.

===========================================================
2018 January 24, Wednesday 7:59 pm ~~~
===========================================================
In the regular app, the tiles and tokens are positioned on the anchor being at 0,0.
In the editor, the anchor is based on the width and height.

===========================================================
2018 January 25, Thursday 8:10 pm ~~~
===========================================================
Look into an optional tile name which can be placed in any of the corners, to kind of match the real tiles.
This will give an indication of the orientation of the tile.
The player start should be an invisible token, with a reference to the first reveal?

The investigators, cultsigil and deep-one aren't physical tokens.
Maybe these should have the square back, and physical tokens have the circle back?

===========================================================
2018 January 27, Saturday 12:19 pm ~~~
===========================================================
Look at the rotation flag, it might not be protecting from updating the angle during an already started tween.

===========================================================
2018 January 31, Wednesday 7:43 am ~~~
===========================================================
Should probably work on saving/loading the data in the editor (MapTiles, MapTokens).
If a tile is added/already added, use the polymer toast as notification.
If a tile/token is deleted, use the polymer toast as notification.

===========================================================
2018 February 6, Tuesday 7:32 pm ~~~
===========================================================
Make placeables selectable.
Left click on placeable to select.
Left click outside of selected placeable to deselect.
Right click to deselect.

A selected placeable has a visible outline.
A selected placeable's id is displayed in the editor.

Thinking about making the gameDiv an iron-page, and add another iron-page for the properties page for a selected placeable.
Maybe switching to the other iron-page will destroy the canvas in the gameDiv?
If so, then the saving/loading data will need done first so that the canvas can be re-loaded when switching back to gameDiv?

===========================================================
2018 March 6, Tuesday 8:35 pm ~~~
===========================================================
The selection happens in the game. 
For the selected object, does the polymer element have an Object property, or just an index property?

===========================================================
2018 November 17, Saturday 2:44 PM ~~~
===========================================================
Planning on refactoring in Phaser 3 and ES6
* Node, Webpack, Babel
* ES6 imports
* States become Scenes
* No groups / flat display list
* Game objects access global systems through Plugins
* Game objects belong to a Scene, not World (the property is scene and world is no longer used)
* Game objects centered by default
* Signals become Events
* Scene systems

Start with one Scene with a debug grid backround, a world camera, and basic camera input.

Created a new branch for refactor (phaser3)?

Replace the editor's polymer components with react?
Reviewing this codebase again, the game and the editor don't appear to share a lot of code.
They do share data and assets.
Should the game and the editor be separate repositories?

Perhaps the game and the editor (not including the DOM pieces) are different Scenes within phaser.
The game hud can be its own Scene running at the same time as the map Scene.
This would be in favor of a single repository.

Feels like a huge refactor, let's take it slow.

===========================================================
===========================================================
===========================================================
===========================================================
===========================================================
===========================================================
===========================================================
===========================================================