Colin HCKgit

Hearthstone Card CSS 3D Click/Drag

In honor of the release of the Whispers of the Old Gods expansion for Hearthstone, I wanted to share this proof of concept. The card drag feature in the game has always been one of my favorite things to play with. It feels like the card is reacting to air resistance as you drag it around.

Don't read in to the code too much, as it could be optimized quite a bit. This pen was more just to explore the concept of the 3D click and drag. Let me know if you have any questions, and please fork if you'd like to play around or enhance it!

PS - The audio is a little finicky, just wanted something rough for the effect.

A Pen by Jack Rugile on CodePen.

Keybase proof

I hereby claim:

I am hckgit on github.
I am gesso (https://keybase.io/gesso) on keybase.
I have a public key ASCSJUOzo6vRCoTfCiT1Of16BSx4VDHc3i-RSn1osZIASAo

To claim this, I am signing this object:

This is a quick hack to draw two parallel links between nodes. Yes, you can scale it to more than two nodes, but it gets increasingly awkward. The alternative is to compute the paths manually, say by computing the perpendicular vector of the vector between the node centers, and offsetting the links accordingly.

A fork of the SVG version. Mouseover to repel nodes. Adapted from my talk on force layouts.

This example pulls together various examples of work with trees in D3.js.

The panning functionality can certainly be improved in my opinion and I would be thrilled to see better solutions contributed.

One can do all manner of housekeeping or server related calls on the drop event to manage a remote tree dataset for example.

Dragging can be performed on any node other than root (flare). Dropping can be done on any node.

Panning can either be done by dragging an empty part of the SVG around or dragging a node towards an edge.

The tree layout implements the Reingold-Tilford algorithm for efficient, tidy arrangement of layered nodes. The depth of nodes is computed by distance from the root, leading to a ragged appearance. Cartesian orientations are also supported. Implementation based on work by Jeff Heer and Jason Davies using Buchheim et al.'s linear-time variant of the Reingold-Tilford algorithm. Data shows the Flare class hierarchy, also courtesy Jeff Heer.

Compare to this Cartesian layout.

	#!/bin/bash
	#
	# DESCRIPTION:
	#
	# Set the bash prompt according to:
	# * the active virtualenv
	# * the branch/status of the current git repository
	# * the return value of the previous command
	# * the fact you just came from Windows and are used to having newlines in
	# your prompts.

	$fullred: #ff0000;
	body {
	font-family: Helvetica, Verdana
	}
	p {
	padding: 7px 10px;
	}
	#demo {
	border: 1px solid $fullred;
	}

	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<style type="text/css">

	body {
	background: #333;
	}