I’ve merged two core functions into one object with this update, Title Hide and Input Clear are now one. I find I use them in similar situations so it made sense to bring them together in this way. I’ve also updated the jQuery to work better with release 1.6.1.  Essentially nothing has changed with the functions apart from the syntax update. But what this change does facilitate is a quick and easy method to avoid conflicts. If you already have a ‘core’ object in your app, simply change any instances of ‘core’ to your object name and the function calls remain unchanged and working.

There are two ways for you to download the code

1. Copy and paste the code listed below.
2. Download a zip containing the source and production files.

/* http://www.designergamergeek.com/jquery-projects/
 Version: 1.1 - 2011-05-31
 License: none (public domain)
*/

// Core object
var core = {
 storeTitle : "",
 checkVal : ""
}

//Title Hide
$('.titleHide').live('hover', function(e) {

 //Store the title for later
 core.storeTitle = $(this).attr('title');

 //Clear title
 $(this).attr('title', '');

}, function(e) {

 $(this).attr('title', core.storeTitle);

});

//Multi Purpose Input Clear
$(document).delegate('.input','focus',function(e){

 //Get current (default if first time) value of input
 core.checkVal = $(this).val();
 core.storeTitle = $(this).attr('title');

 //If the inputs title is empty, fill it with the default value
 if (core.storeTitle == '' || core.storeTitle == null || core.storeTitle == undefined){
 $(this).attr('title', core.checkVal);
 }

 //Create user input value
 core.storeTitle = $(this).attr('title');

 //If default value, clear it
 if(core.checkVal == core.storeTitle){
 $(this).val('');
 }

}).delegate('.input','blur', function(e){

 //Load variables
 core.checkVal = $(this).val();
 core.storeTitle = $(this).attr('title');

 //If no user entry, fill with default title
 if(core.checkVal == ''){
 $(this).val(core.storeTitle);
 }

});

I’ve been trying to find some more useful functions to add to the core object, but I’m being careful to only add functions that have high usage. The last thing I want to unnecessarily bloat the code. I do plan to post some other bits and pieces though so I’ll keep you posted.

The inspiration for todays ships comes from our own natural world of insects. Galactic Civilization II already has an insectoid species of course, that of the futuristic Thalan, but that races ships always seemed a little too future and not enough insect for my tastes. What would ships of an alien insectoid race look like if they too evolved into space fairing beings? That was my goal.

The vessels of the Insectoid Nation are sleek and beetle like. Most contain wings, either swept back or forward, depending on function. The largest of the navies ships are designed as fighter carriers, with their insectoid bodies extending out to hold the vast array of smaller ships they house. I had some fun naming these models too.
As usual you’ll need Galactic Civilizations II 2.0 with the Twilight of the Arnor expansion to use these templates in your games.

Download the GalCivII Insectoid Nation Fleet now!

Combat ships

Dart Fighter

Hive Massive Carrier

Javelin Carrier

Seeker Scout

Super Dart Heavy Fighter

Swarm Transport

Wraith Cruiser

Wyvern Battleship

 

Support ships

Aphid Colony ship

Ant Constructor

Cockroach Mining Ship

Millipede Freighter

Sometime ago I uploaded a set of ship templates based on the Imperial Battle Fleet of the awesome tabletop game Battle Fleet Gothic. While searching through the other custom ships I’ve committed to templates I found a related sister set, that of the Space Marines. The ships of the Emperors elite troops are large foreboding vessels, floating cities with thick armour and large forward guns.

This is a smaller set, containing only one ship from each size class, but the larger sized vessels have a substantial amount of parts. As usual you’ll need Galactic Civilizations II 2.0 with the Twilight of the Arnor expansion to use these templates in your games.

Download the GalGivII Space Marine Battle Fleet now!

Combat ships

Thunder Hawk Gunship

Nova Class Frigate

Hunter Destroyer

Strike Cruiser

Battle Barge Super Capital

Granted, neither items of jQuery released this week are difficult for other web developers to produce. I’m releasing them purely as a window into my development cycle and how I like to make things modular, reusable and efficient. If anyone else finds the code useful, bonus points.

Everyone knows titles should be used liberally, they help the user and search engines alike. This particular piece I find useful for those times when having a title popup interrupts the user, impacts animation or stops interaction with surrounding items. I’m sure there are other uses also.

How it works

As you’ll see from the code view below, this one’s not very complex. When an item with the .titleHide class is hovered I store it’s original value in the Rel attribute, then clear the title. When the user rolls off the item I use that Rel attribute to restore the original title, failure to do so would leave you no access via the DOM to that title until page refresh.

To enable this script simply add a class of .titleHide to which ever item needs it’s title hidden. This works with links, image replacement, buttons and any other item with a title.

See an example of the code in action

You can download the code in a number of ways

1. Copy and Paste the code listed below.
2. Download a zip file containing the source and production ready files.

$(document).ready(function(){

	//Multi-Purpose Title Hide
	$(".titleHide").hover(function() {
		//Store the title for later
		var store = $(this).attr("title");
		$(this).attr("rel", store);
		//Clear title
		$(this).attr({title: ""});
	}, function() {
		//Restore title
		var restore = $(this).attr("rel");
		$(this).attr("title", restore);
		//Clear Rel attribute
		$(this).attr({rel: ""});
	});

});

How it works

The code view and comments below explain exactly what’s going on at each step, but here’s how the code works; the code takes the original value of your input item stores it as the Title attribute, then clears the original value allowing for clean user input. Storing the original value in this way allows a user to hover the input item and still see what should be entered. The code then waits for the user to navigate away from the current item and does one of two things. 1) If there has been user input the original value is kept as the Title attribute for reference and nothing else happens, allowing correct values to be submitted. 2) If there has been no user input or the user clears then navigates away from the item, the Title attribute is taken and reapplied as the value, in essence resetting it’s state.

Adding the function to your Input tags is super easy too. Simply add a .input class to each item you wish to clear. This works for Text, Password and Textareas.

View an example of the jQuery Input Clear in action

There is two ways for you to download the code

1. Copy and paste the code listed below.
2. Download a zip containing the source and production files.

$(document).ready(function(){

	//Multi Purpose Input Clear
	$(".input").click(function(){
		//Get current (default if first time) value of input
		var check = $(this).val();
		//If the inputs title is empty, fill it with the default value
		if ($(this).attr("title") == ""){
			$(this).attr("title", check);
		}
		//Create user input value
		var inputVal = $(this).attr("title");
		//If default value, clear it
		if(check == inputVal){
			$(this).val("");
		}
	}).blur(function(){
		//Load variables
		var check = $(this).val();
		var inputVal = $(this).attr("title");
		//If no user entry, fill with default title
		if(check == ""){
			$(this).val(inputVal);
		}
	});

});

Continuing the pyramid theme seemed appropriate, but sloped sides doesn’t really work for you in Sim City does it. In this map we’ll use something similar, a Mesopotamian Ziggurat. I’ve tried to make things interesting buy splitting the Ziggurat down it’s center between two large city zones. But that’s not all.

Ancient Ziggurat rarely came alone, each was part of a larger temple complex. I’ve included a number of other smaller structures, as well as some raised ritual pathways  and intricate water works.

You may also notice a similarity to an earlier anime style map I created, I was going for the same final result; a large metropolis sprawling above a heavily manicured foundation.

Download the Ziggurat region

I’ve not had any free time to actually play this map yet so there wont be an update to the Sim City 4 regions section for a while I suspect, but I definitely am going to play it. Feel free to stop by the comments and link to your region if you download and play the map. I’d especially like to compare city/region layout ideas.

Rather than an open park with some key theming –like last time, I’ve instead chosen to lay down some paths and basic transportation rides. You, as manager, are charged with renovating this old rundown temple into a full blown theme park.

The central feature of the custom map –as the name suggests– is a lost temple. I’ve built an Egyptian style pyramid with an enticing doorway for you to play with. Will you create stairs down into an underground complex, use it for a huge coaster dropping down into the depths or for some other purpose?

Leading up to the temple is a reflecting pool inset with ruined columns. Surrounding the temple and pool is a complex of stepped earth works for you to run coasters down around and through. Set high on the back wall is a huge waterfall to wow your visitors with. All in all I hope you’ll enjoy the possibilities presented at the Lost Temple.

Download the Lost Temple

Items in place

As I mentioned above I’ve laid down two small transportation rides. One is a small boat ride which runs from one side of the park to the other and the other a monorail which runs a short distance in shuttle shuttle mode.

The entrance to the park is also filled with the basic amenities you’ll need to help get your park off the ground, including those jumping fountains we all love to much.

I’ve not had time to actually play this park yet, the build phase has taken most of the free time I could muster. If you download and play the park I’d love to see your creations, be sure to comment or email with a link to some highlights!

More park previews

Let me elaborate on that second point a little. Core CSS started out life as a way for me to produce faster more efficient code, because of this the framework held some items I used often, but most users probably didn’t. This update removes those items. Full details in the change log below.

It’s not all removals

Some new elements have also made it in this time around, it’s not all slim-lining.

.imgTxt is a class I added back in 1.2.1 for easy hiding of image replacement text. It’ll now move text on these items right off the left margin, the old value didn’t move enough for larger screens.

.reverse is a class I’ve added to reformat backwards-facing email addresses to be presented correctly to the end user, but site scrapers will only see that wrongly formatted email address. I added this class after reading an article on how to hide your email address from spammers.

.txtShadow is a CSS3 class that adds a 1px white shadow as default to an element. You can use this class as a base for most text shadow effects, but it’s extra handy for that Apple-like look.

Lastly is something that’s been missing for a while, a Focus state for link items.

As usual, Core CSS works best when used with Eric Meyers awesome Reset CSS.

Core CSS 1.3 Change log

Listed in the order they appeared.
1. -/+ Removed P styles, p.closed class remains.
2. – Removed .top style.
3. – Removed .small font sizing.
4. + Added .imgTxt class for hiding text of image replacement.
5. + Added .reverse for email address hiding.
6. + Added .txtShadow CSS3 effect.
7. + Added Focus attribute to links.
8. -/+ Removed various grey colors, chalk/charcoal remains.
9. -/+ Removed various grey background colors, chalk/charcoal remains.
10. – Removed input formatting.

There is a couple of ways for you to download the code

1. Copy and paste the code listed below.

2. Download a zip containing the source and a minified production copy.

/* http://www.designergamergeek.com/core-css/ */
/* Version: 1.3 - 2010-09-11 */

body{background: #fff;}

/* Positioning */
div{overflow:hidden;}
.visible{overflow:visible;}
.float{float:left !important;}
.floatRight{float:right !important;}
.relative{position:relative !important;}
.absolute{position:absolute !important;}
.fixed{position:fixed !important;}
.hidden{display:none}
.block{display:block}

/* Page frameworks */
.frameworkCenter{margin:0 auto;}
.frameworkLeft{left:0; top:0; position:absolute;}
.frameworkRight{right:0; top:0; position:absolute;}

/* Page layout */
.width100{width:100% !important;}
.width75{width:75% !important;}
.width66{width:66% !important;}
.width50{width:50% !important;}
.width25{width:25% !important;}
.width33{width:33% !important;}
.width20{width:20% !important;}

/* Clearing */
.clear{clear:both;}
.clearLeft{clear:left;}
.clearRight{clear:right;}

/* Content control */
pre{background-color:#fff; border:#333 dashed 1px; padding:10px;}
blockquote{padding:20px; font-style:italic;}
sup{vertical-align:super; font-size:smaller;}
sub{vertical-align:sub; font-size:smaller;}
.left{text-align:left !important;}
.right{text-align:right !important;}
.center{text-align:center !important;}
.justify{text-align:justify !important;}
.capitalize{text-transform:capitalize;}
.uppercase{text-transform:uppercase;}
.lowercase{text-transform:lowercase;}
.imgText{text-indent:-9999px;}
.reverse{direction:rtl; unicode-bidi:bidi-override;}
.txtShadow{text-shadow:#fff 0 1px 0;}
.closed{margin-bottom:0;}

/* Links */
html a{text-decoration:none;}
html a:hover{text-decoration:underline;}
html a:active{text-decoration:underline;}
html a:focus{text-decoration:underline;}

/* Colours */
.white{color:#fff !important;}
.black{color:#000 !important;}
.chalk{color:#eee;}
.charcoal{color:#333;}

/* Background colours */
.whiteBg{background-color:#fff !important;}
.blackBg{background-color:#000 !important;}
.chalkBg{background-color:#eee;}
.charcoalBg{background-color:#333;}

/* Normalise headings */
h1, h2, h3, h4, h5, h6{font-weight:400;}

/* Table formating */
table td{padding:2px;}
td.first{padding:2px 2px 2px 4px;}

Back when I originally released this poster the print run was very sort, the cost to print at A2 was rather high and sales low. Back then I decided to discontinue the print and move on to other things, not really giving it a second thought. Recently someone asked me about the print and if it was available for download, today it is.

Origins

Circa 2007, originally this poster was designed for personal marketing, later turned into a Giclee print for sale. The poster makes use of vector as well as photographic elements and takes some of it’s inspiration from Monty Python artwork.  The model is my then friend, now wife, Aaryn Nutter.

Format

The reformatted poster is available at A3 size (that’s 297x420mm), 150dpi in CMYK color. While it’s recommended that you print the poster at A3 size, scaling larger or smaller should work fine.

Download The Garden poster free now (3.9MB)

Lets start with the obvious change first;

New website

The most notable change is to the website, it’s had the full make-over treatment. The old first iteration of the Deadly Furry Cute website was a simple one page site, great for testing the concept and getting something up, not so great for organizing content. So the first step was to get some content management in place. As usual WordPress was more than enough for the content task, even knowing I needed at least two different page formats -most of the details for the toys are simply saved in custom fields.

Download counting is also much more streamlined, now using a WordPress plugin rather than my own custom script. While the custom script worked fine, I’d never built a frontend to actually display the details -I was checking via myphpadmin.
This change does mean the perma-links for the old toys no longer work, but that’s ok, Series 1 has changed to Series 1 Edition 2. Those first editions are no longer an offering.

New toys

The next most noticeable change is to the number of toys. Series 2: Squirrels and Series 3: Apes are now released taking the total number of downloadable animal individuals to nine.

I’ve talked before about changing templates, having multiple sizes, trying different styles, and the design I went with for the new series -I wont cover those again. One thing you might have missed is that the series to start it all, Series 1, also has a face lift. The changes to the first series are subtle, I didn’t want to mess with a good thing, but they’re enough to make the first edition obsolete.

Even more new toys

Inspired by a request from an American Educator, Deadly Furry Cute now comes complete with alternate ‘Color Your Own’ versions. These versions are simply as they sound, toys which for the most part have all the features of the original -but none of the color, leaving you to color them as you see fit. You’re free to use any coloring medium, I dare say pencil, pen or paint would be easiest though.

The Game

The revamped Deadly Furry Cute toys all have six stats printed on their base (also available on the site), one stat lists the toys health, the others it’s attributes. Using these attributes in conjunction with the basic rules on the site -or any rules you decide to make up for that matter,  can make for a fun little game.
I’m hoping the two rule sets I’ve devised will add some more depth to the toys outside building and displaying them.

Extra free stuff

OK so the toys are free yes, but you still need to build them, how about some swag which doesn’t require assembly?
On the site you’ll now find a number of extras for your Mac/PC, iPhone, Droid or online applications. At the moment that means you’ve got access to some Deadly Furry Cute desktops, device wallpaper and avatar icons, more to follow.

Moving forward

I do have a hard written plan for Deadly Furry Cute, time-line is a little whibley-wobbly but the plan is there. I’m not going to go over it here -where would the surprises be! I will say: many more series are in the works and each one will eventually have a Color Your Own version.

Head over to deadlyfurrycute.com now to download the toys, goodies or leave some feedback.