Marfisa Card Manager 1.6 Tweaks

[piraskel]

All current tweaks are to tcg.php. Code coloring provided by http://www.hilite.me/ using style: emacs

Level: Bug-fix

• Allow use of fillers for "other" decks
Beneath the line

$sp_filler=mysql_result($result,$i,"sp_filler");
paste the line

$oth_filler=mysql_result($result,$i,"oth_filler");

Level: Feature

• Deck titles
This tweak allows spacing, punctuation, and uppercase characters in your Deck name:.

Replace the line

if ($col1_name!=NULL) { echo "$col1_name
\n"; }
with either
A)

1
2
3
4

if ($col1_name!=NULL) {
echo "$col1_name
\n";
$col1_name=strtolower(preg_replace("/[^-a-zA-Z0-9]/", "", $col1_name));
}
OR
B)

1
2
3
4

if ($col1_name!=NULL) {
echo "$col1_name
\n";
$col1_name=strtolower(preg_replace("/[\-=+\|!@#$%^&*()`~\[\]{};:\'\",<.>\/?_\\\s]/", "", $col1_name));
}
Caveats
1. Must repeat for col1 through col10 (note the number of times col1 appears in the sample code - these must be replaced by col2, col3, etc.)
2. Do not include characters with accents, tildes, etc. in your Deck name:.
3. Do not include hyphens in your Deck name: unless it is part of the deck's name.

Explanation:
The deck names are changed by matching characters with regex and replacing the characters with nothing (i.e. deleting them).
  A) The ^ indicates that the following should be excluded, which are the hyphen (must be first so it is not used as a range indicator), lowercase letters, uppercase letters, and numbers.
  B) This chooses to select all punctuation and spaces (\s) (note: some characters such as [, ], and \ must be escaped by a preceding \ to work).
Therefore the regex may be modified by adding additional characters to keep in A) or characters to remove in B) by adding them before the ending bracket ].

strtolower() is a function that changes uppercase letters A-Z to lowercase letters a-z.


• Corollary to above
Now that punctuation including quotation marks are allowed in the deck titles, the update.php must be updated so that the quotation marks aren't eaten by the .php form, namely by writing them out as htmlentities.

" size="50">


• Deck Subtitles
Extension to deck titles, caveats apply. Explanation written once, but eaten by LJ. Allows you to add a deck subtitle in the deckname form, separated by | (vertical pipe).
NB: | can no longer be used as a character in deck titles or subtitles.

if ($col4_name!=NULL) {
$col4_name_array=explode("|",$col4_name);
echo "$col4_name_array[0]
\n";
echo "$col4_name_array[1]
\n";
$col4_name=strtolower(preg_replace("/[^-a-zA-Z0-9]/", "", $col4_name_array[0]));
}

Caveats
1. No space should be between the deckname, the vertical pipe, and the sub-titlex (i.e. deckname|sub-title).
2. Use non-breaking space to match alignment if only some of your decks have sub-titles (i.e. deckname|& nbsp;) extra space after "&" added to display the code.


• Use deck specific fillers
This tweak allows use of deck specific fillers.

If the TCG has deck specific fillers, write specific (no caps, no spaces) for the Regular filler:, Special filler:, or Other filler: as desired.

Then replace

if ($show_filler==0)
{ ?>
echo $col1_path . "/" . $col1_filler . "." . $img_format; ?>"> }
with

1
2
3
4
5
6

if ($show_filler==0) {
if ($col1_filler=="specific")
{ ?>
echo $col1_path . "/" . $col1_name . "00." . $img_format; ?>"> }
else
{ ?>
echo $col1_path . "/" . $col1_filler . "." . $img_format; ?>"> }
}
Caveats
1. Must repeat for col1 through col10 (note the number of times col1 appears in the sample code - these must be replaced by col2, col3, etc.)
2. Assumes that either ALL decks of that TCG have deck specific fillers or NO decks have them (cannot mix and match with this).
3. Assumes that deck-specific fillers are named deckname00 (which, out of the TCGs I checked, are).

Aaand the rest of this will be in prose. Because changing too many things and then changing *those*.

Reference
When Can I Use... Cross-browser compatibility
Quirks Mode Compatibility with examples
jsfiddle Test html/css/js

Unused
Shorcuts to Solve IE7 CSS
Animated gallery selector
PHP function with variable number of arguments (e.g. searching variable number of terms)

Best Practice
Use single quotes, expanded on here.

• Table Alignment
  1. Match height? With a jQuery script (used the one with variable widths in the demo). Changed to after images loaded.
  doc1: what $ is for
  doc2: document ready, and the shorthand for it (what was originally in the script above)
  doc3: load events, including an example for window
  
  But then script required floating, so then, how to horizontally center? With relative position, another div around centermaster.
  visual summary
  article (unread)
  relative positioning reference
  
  But would not center after images loaded, because not properly shrinkwrapping.
  article
  visual summary
  Because of width not right?
  What width:auto and width:100% mean article for block elements
  post
  
  Heights matched, but what about writing a script to match width (mostly for puzzle deck spacing being smaller and marginally throwing off alignment enough to be annoying)? But is this really necessary when different card types are often different sizes anyway?
  
  2. Start over with display:inline-block and vertical-align:top. Then how to align between type? Put in separate divs.
  NB:Include IE workaround to inline-block given in SOF answer.
  
  
• Card Spacing, i.e. Puzzle Decks
  Original abuses the fact that any whitespace in HTML source is interpreted as one space on display (hence the need for non-breaking space), so non-puzzle decks had cards separated by a newline, while puzzle decks did not. But why did non-puzzle decks have a vertical spacing when there was no space before the "br"? Don't know.
  
  So, set spacing manually. Remove whitespace and change margin of images inside a particular div with #div img {margin: 2px 2px}. But this overrides the div padding.
  
  Well, then set a class for img with the margin img.card-images {margin:2px;}. Instead of specifying by div it belonged to, specify class in every "img" tag. Now this ADDS the image margin and surrounding div padding.
  
  Perhaps spacing evenly?
  Too much extraneous code and would require calculating percentage based on how many cards per deck/card break.
  
  Then specify 0 margin for the cards on the edge of the deck, selected by child selector formulas that depend on card break number (this means styling would have to be written on the php page - bad practice?). Images are selected by nth-of-type (formulas explained). .interior > img:nth-last-of-type(-n+5) {margin-bottom:0px;}
  NB: psuedoclass selectors do not work in IE8 and below.
  Caveat Card break number chosen must give a rectangular block (i.e. divides into the number of cards in the deck).
  
  if nth-of-type needed with a class that has various types (unused)
  CSS selectors list
  Box model discussion tangent
  
  
• Sectioning tcg.php
Largely done with just referencing the PHP docs. Other than functions (foreach, range), there were pages on arrays and variable variables. Also referenced how to print_r vertically when checking the contents of arrays. Sorting simplified by using a pre-written function.


• Pending cards
Abuse the explode system used in title|subtitle.
BUT fun fact, PHP difference between == and ===.
From the doc
If you compare a number with a string or the comparison involves numerical strings, then each string is converted to a number and the comparison performed numerically.
which links to
The value is given by the initial portion of the string. with examples.
Tada! Use whatever you'd like after the initial portion.

Also learned how to check if a string contains another string. If you only have to check existence, you can just check whether the position of the substring is anywhere but 0 (so strpos can't be used for the beginning of the string).

Use substr() to get parts of strings by index. Note that third parameter is length, not range of index. strstr() can be used to get parts of strings separated by a character (e.g. user and @example.com).

Not used but considered were shorthand for if, explained here.


• Card Count
$var++ is not the same as $var = $var + 1, it actually increments
The difference between var++ and ++var Post and pre-increment. In a loop, it doesn't matter, but if you are passing the variable on (like in card count), you want it to assign the number after the +1! (++var)


• Increasing Trade Slots
• Updating
Form data can be passed into arrays (link also an example of checked checkbox).
These arrays can be imploded to form a multi-row insert.
Actually each time won't be an insert, you also want to update
if duplicate primary keys. An alternative?
Also have to decide how often to actually optimize table because of deletions. One discussion points out that innoDB doesn't release memory upon deletion. But will you really have that many entries to make it worthwhile? Especially when it can break other things?

How will I expand the number of divs? Two options, both involving jQuery.
1) Show and hide. Probably not needed, but show-hide with sibling reaction (like for a menu). Includes links to more advanced options.
For convenience, a link to the jQuery docs. A note about $(this) selector.
For vs. each in jQuery.
2) Generate divs based on a variable. Includes a jsfiddle.

What is form action="#"? Self-referral
Because I always need to reference this already PHP arrays doc.