Jump to content

The Warrior

Member
  • Posts

    219
  • Joined

  • Last visited

  • Days Won

    4

Posts posted by The Warrior

  1. Take three points on the surface of the world equidistant to one another in mutual view. From one point literally measure the angle between the two other points.

     

    Being equidistant from one another they will form an equilateral triangle with all angles equal.

     

    If on a flat world these angles will be roughly 60 degrees. On a spherical world they would be roughly 90 degrees. (other angles for different curved surfaces).

     

    Admittedly this could be affected by local terrain, but a false result would be quite rare. Even so this could be extrapolated with the entire world covered in imaginary triangles, the average angle giving your answer.

  2. Although I doubt I'd be able to take up one of these interesting opportunities (time constraints), I've come up with a few other features that some may like the sound of:

     

    - Bestiaries

    - Keys

    - Inner Circle Magic

    - Achievements

    - Knowledge Collections

    - DNA

    - Armour and Weaponry

    - Maps

    - Skills

    - Principles

    - Public Records

    - Medals

    - Guilds and Alliances

    - MD Court Proceedings

    - Kingship and Elections

    - LHOs

    - RPCs (archaic, I know)

    - Calendar

     

    I omitted some that I thought of, but couldn't think of a technical question on.

  3. For security patterns, all paper currency (at least in the UK and USA) has a serial number associated with it.

    As you said in the initial post that these title documents would be virtual, initially. By this, I imagined that these virtual representations would be items or item-like in game and so have an ID associated with it.

    Hence as a security pattern, you could print the item ID on the physical item. To check for counterfeit, one could search for the item ID on the physical item and verify that all the details match up.

  4. Do not Post content or links to Pornographic, Politically extremist, Offensive, Degrading, or illegal sites.

     

    The above statement is logically ambiguous and as such could be interpreted in multiple different ways.

     

    The more verbose interpretation being: 

    Do not post content. Do not post links to Pornographic, Politically extremist, Offensive, Degrading or illegal sites.

     

    It is not, however, logically equivalent to the statement:

    Do not post, content or links to sites that contain content, that is Pornographic, Politically extremist, Offensive, Degrading or illegal.

    Which is what this topic was interpreting the rule as.

  5. Named <a> (anchor) tags are deprecated and should not be used, according to the WHATWG and the W3C.
    Instead fragment-link identifiers (the #go-to-here thing) can reference any element with an id attribute.
     
    For example I want to provide an anchor link to a later heading in the document, I would use:

    <a href="#subheading1">Sub-Heading 1</a>

    which would take me to:

    <h2 id="subheading1">Sub-Heading 1</h2>

    I don't know if this fixes the problem in MD, but it will be what chrome is expecting to see.

  6. Although Opera is still developed by the same people, due to them moving over to a different rendering engine that was concentrating on different W3C specifications, it feels like a completely different browser. I do hope that Opera keep their individuality, because at the moment it feels they are just a older version of chrome.

  7. I experienced this same problem in chrome a few versions back. If your version of Opera is greater than 15 this may be that chrome and opera now share a common codebase ('Blink' rendering engine). If this is the case,  it will probably be fixed by the next update.

  8. Following on from http://magicduel.invisionzone.com/topic/14318-personal-page-template-the-white-cube-for-documents/, I have created version 2 which gives you more freedom, more faces to the cube and follows the separation of concerns. For any caveats see original template.

     

    [log='CSS']

    * {
    	-webkit-box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	-ms-box-sizing: border-box;
    	box-sizing: border-box;
    }
    .stage {
    	-webkit-perspective: 800;
    	-moz-perspective: 800;
    	-ms-persective: 800;
    	-o-perspective: 800;
    	perspective: 800;
    	-webkit-perspective-origin: 50% 50%;
    	-moz-perspective-origin: 50% 50%;
    	-ms-perspective-origin: 50% 50%;
    	-o-perspective-origin: 50% 50%;
    	perspective-origin: 50% 50%;
    }
    .cube {
    	-webkit-transform-style: preserve-3d;
    	-moz-transform-style: preserve-3d;
    	-ms-transform-style: preserve-3d;
    	transform-style: preserve-3d;
    	-webkit-transition: -webkit-transform 1s;
    	-moz-transition: -moz-transform 1s;
    	-o-transition: -o-transform 1s;
    	-ms-transition: -ms-transform 1s;
    	transition: transform 1s;
    	position: relative;
    	width: 500px;
    	height: 500px;
    	margin: 150px auto;
    }
    .cube .face {
    	width: 100%;
    	height: 100%;
    	position: absolute;
    	background: white;
    	padding: 1em;
    	overflow: auto;
    	border: solid 1px grey;
    	-webkit-backface-visibility: hidden;
    	-moz-backface-visibility: hidden;
    	-ms-backface-visibility: hidden;
    	-o-backface-visibility: hidden;
    	backface-visibility: hidden;
    	-webkit-transition: opacity 1s 1s;
    	-moz-transition: opacity 1s 1s;
    	-o-transition: opacity 1s 1s;
    	-ms-transition: opacity 1s 1s;
    	transition: opacity 1s 1s;
    }
    .cube .face * {
    	background: white !important;
    }
    .cube .face.top {
    	-webkit-transform: rotateX(90deg) translateZ(250px);
    	-moz-transform: rotateX(90deg) translateZ(250px);
    	-o-transform: rotateX(90deg) translateZ(250px);
    	-ms-transform: rotateX(90deg) translateZ(250px);
    	transform: rotateX(90deg) translateZ(250px);
    }
    .cube .face.top-interior {
    	-webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(-250px);
    	-moz-transform: rotateX(-90deg) rotate(180deg) translateZ(-250px);
    	-o-transform: rotateX(-90deg) rotate(180deg) translateZ(-250px);
    	-ms-transform: rotateX(-90deg) rotate(180deg) translateZ(-250px);
    	transform: rotateX(-90deg) rotate(180deg) translateZ(-250px);
    }
    .cube .face.bottom {
    	-webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(250px);
    	-moz-transform: rotateX(-90deg) rotate(180deg) translateZ(250px);
    	-o-transform: rotateX(-90deg) rotate(180deg) translateZ(250px);
    	-ms-transform: rotateX(-90deg) rotate(180deg) translateZ(250px);
    	transform: rotateX(-90deg) rotate(180deg) translateZ(250px);
    }
    .cube .face.bottom-interior {
    	-webkit-transform: rotateX(90deg) translateZ(-250px);
    	-moz-transform: rotateX(90deg) translateZ(-250px);
    	-o-transform: rotateX(90deg) translateZ(-250px);
    	-ms-transform: rotateX(90deg) translateZ(-250px);
    	transform: rotateX(90deg) translateZ(-250px);
    }
    .cube .face.left {
    	-webkit-transform: rotateY(-90deg) translateZ(250px);
    	-moz-transform: rotateY(-90deg) translateZ(250px);
    	-o-transform: rotateY(-90deg) translateZ(250px);
    	-ms-transform: rotateY(-90deg) translateZ(250px);
    	transform: rotateY(-90deg) translateZ(250px);
    }
    .cube .face.left-interior {
    	-webkit-transform: rotateY(90deg) rotate(180deg) translateZ(-250px);
    	-moz-transform: rotateY(90deg) rotate(180deg) translateZ(-250px);
    	-o-transform: rotateY(90deg) rotate(180deg) translateZ(-250px);
    	-ms-transform: rotateY(90deg) rotate(180deg) translateZ(-250px);
    	transform: rotateY(90deg) rotate(180deg) translateZ(-250px);
    }
    .cube .face.right {
    	-webkit-transform: rotateY(90deg) rotate(180deg) translateZ(250px);
    	-moz-transform: rotateY(90deg) rotate(180deg) translateZ(250px);
    	-o-transform: rotateY(90deg) rotate(180deg) translateZ(250px);
    	-ms-transform: rotateY(90deg) rotate(180deg) translateZ(250px);
    	transform: rotateY(90deg) rotate(180deg) translateZ(250px);
    }
    .cube .face.right-interior {
    	-webkit-transform: rotateY(-90deg) translateZ(-250px);
    	-moz-transform: rotateY(-90deg) translateZ(-250px);
    	-o-transform: rotateY(-90deg) translateZ(-250px);
    	-ms-transform: rotateY(-90deg) translateZ(-250px);
    	transform: rotateY(-90deg) translateZ(-250px);
    }
    .cube .face.front {
    	-webkit-transform: translateZ(250px);
    	-moz-transform: translateZ(250px);
    	-o-transform: translateZ(250px);
    	-ms-transform: translateZ(250px);
    	transform: translateZ(250px);
    }
    .cube .face.front-interior {
    	-webkit-transform: rotateY(180deg) translateZ(-250px);
    	-moz-transform: rotateY(180deg) translateZ(-250px);
    	-o-transform: rotateY(180deg) translateZ(-250px);
    	-ms-transform: rotateY(180deg) translateZ(-250px);
    	transform: rotateY(180deg) translateZ(-250px);
    }
    .cube .face.back {
    	-webkit-transform: rotateY(180deg) translateZ(250px);
    	-moz-transform: rotateY(180deg) translateZ(250px);
    	-o-transform: rotateY(180deg) translateZ(250px);
    	-ms-transform: rotateY(180deg) translateZ(250px);
    	transform: rotateY(180deg) translateZ(250px);
    }
    .cube .face.back-interior {
    	-webkit-transform: translateZ(-250px);
    	-moz-transform: translateZ(-250px);
    	-o-transform: translateZ(-250px);
    	-ms-transform: translateZ(-250px);
    	transform: translateZ(-250px);
    }
    .cube[data-face="top"], .cube[data-face="bottom-interior"] {
    	-webkit-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
    	-moz-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
    	-o-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
    	-ms-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
    	transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
    }
    .cube[data-face="bottom"], .cube[data-face="top-interior"] {
    	-webkit-transform: rotateX(90deg) rotateY(180deg) rotateZ(0deg);
    	-moz-transform: rotateX(90deg) rotateY(180deg) rotateZ(0deg);
    	-o-transform: rotateX(90deg) rotateY(180deg) rotateZ(0deg);
    	-ms-transform: rotateX(90deg) rotateY(180deg) rotateZ(0deg);
    	transform: rotateX(90deg) rotateY(180deg) rotateZ(0deg);
    }
    .cube[data-face="front"], .cube[data-face="back-interior"] {
    	-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    	-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    	-o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    	-ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    	transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    .cube[data-face="left"], .cube[data-face="right-interior"] {
    	-webkit-transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
    	-moz-transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
    	-o-transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
    	-ms-transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
    	transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
    }
    .cube[data-face="right"], .cube[data-face="left-interior"] {
    	-webkit-transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);
    	-moz-transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);
    	-o-transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);
    	-ms-transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);
    	transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);
    }
    .cube[data-face="back"], .cube[data-face="front-interior"] {
    	-webkit-transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
    	-moz-transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
    	-o-transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
    	-ms-transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
    	transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
    }
    .cube[data-face="bottom-interior"] .face.top,
    .cube[data-face="top-interior"] .face.bottom,
    .cube[data-face="back-interior"] .face.front,
    .cube[data-face="right-interior"] .face.left,
    .cube[data-face="left-interior"] .face.right,
    .cube[data-face="front-interior"] .face.back {
    	opacity: 0;
    	pointer-events: none;
    }
    [onclick] {
    	cursor: pointer;
    } 

    [/log]

    [log='jQuery']

    // Inlined in link 'onclick' attribute. Links follow the genre of:
    $('.cube').attr({'data-face': /*face-name*/});
    // Where /*face-name*/ is replaced with one of:
    // 'top', 'top-interior', 'bottom', 'bottom-interior', 'left', 'left-interior', 'right', 'right-interior', 'front', 'front-interior', 'back' or 'back-interior'

    [/log]

    [log='HTML']

    <h1 class="general-sectionheader">The Warrior</h1>
    <div style="text-align: center;">
    	<a onclick="$('.cube').attr({'data-face': 'top'});">
    		<img src="/img/skin/default/mdadocs1.gif">
    	</a>
    	<a onclick="$('.cube').attr({'data-face': 'bottom'});">
    		<img src="/img/skin/default/mdadocs2.gif">
    	</a>
    	<a onclick="$('.cube').attr({'data-face': 'front'});">
    		<img src="/img/skin/default/mdadocs3.gif">
    	</a>
    	<a onclick="$('.cube').attr({'data-face': 'left'});">
    		<img src="/img/skin/default/mdadocs4.gif">
    	</a>
    	<a onclick="$('.cube').attr({'data-face': 'right'});">
    		<img src="/img/skin/default/mdadocs5.gif">
    	</a>
    	<a onclick="$('.cube').attr({'data-face': 'back'});">
    		<img src="/img/skin/default/mdadocs6.gif">
    	</a>
    </div>
    <div style="text-align: center;">
    	<a onclick="$('.cube').attr({'data-face': 'top-interior'});" class="frm-textbutton-gold">1</a>&nbsp;
    	<a onclick="$('.cube').attr({'data-face': 'bottom-interior'});" class="frm-textbutton-gold">2</a>&nbsp;
    	<a onclick="$('.cube').attr({'data-face': 'front-interior'});" class="frm-textbutton-gold">3</a>&nbsp;
    	<a onclick="$('.cube').attr({'data-face': 'left-interior'});" class="frm-textbutton-gold">4</a>&nbsp;
    	<a onclick="$('.cube').attr({'data-face': 'right-interior'});" class="frm-textbutton-gold">5</a>&nbsp;
    	<a onclick="$('.cube').attr({'data-face': 'back-interior'});" class="frm-textbutton-gold">6</a>
    </div>
    <div class="stage">
    	<div class="cube">
    		<div class="face top">[doc1]</div>
    		<div class="face top-interior">1</div>
    		<div class="face bottom">[doc2]</div>
    		<div class="face bottom-interior">2</div>
    		<div class="face front">[doc3]</div>
    		<div class="face front-interior">3</div>
    		<div class="face left">[doc4]</div>
    		<div class="face left-interior">4</div>
    		<div class="face right">[doc5]</div>
    		<div class="face right-interior">5</div>
    		<div class="face back">[doc6]</div>
    		<div class="face back-interior">6</div>
    	</div>
    </div> 

    [/log]

    To add to your personal page, switch to HTML and copy the 'Everything' section into the HTML area.

    [log='Everything']

    <!doctype html>
    <style>
    * {
    	-webkit-box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	-ms-box-sizing: border-box;
    	box-sizing: border-box;
    }
    .stage {
    	-webkit-perspective: 800;
    	-moz-perspective: 800;
    	-ms-persective: 800;
    	-o-perspective: 800;
    	perspective: 800;
    	-webkit-perspective-origin: 50% 50%;
    	-moz-perspective-origin: 50% 50%;
    	-ms-perspective-origin: 50% 50%;
    	-o-perspective-origin: 50% 50%;
    	perspective-origin: 50% 50%;
    }
    .cube {
    	-webkit-transform-style: preserve-3d;
    	-moz-transform-style: preserve-3d;
    	-ms-transform-style: preserve-3d;
    	transform-style: preserve-3d;
    	-webkit-transition: -webkit-transform 1s;
    	-moz-transition: -moz-transform 1s;
    	-o-transition: -o-transform 1s;
    	-ms-transition: -ms-transform 1s;
    	transition: transform 1s;
    	position: relative;
    	width: 500px;
    	height: 500px;
    	margin: 150px auto;
    }
    .cube .face {
    	width: 100%;
    	height: 100%;
    	position: absolute;
    	background: white;
    	padding: 1em;
    	overflow: auto;
    	border: solid 1px grey;
    	-webkit-backface-visibility: hidden;
    	-moz-backface-visibility: hidden;
    	-ms-backface-visibility: hidden;
    	-o-backface-visibility: hidden;
    	backface-visibility: hidden;
    	-webkit-transition: opacity 1s 1s;
    	-moz-transition: opacity 1s 1s;
    	-o-transition: opacity 1s 1s;
    	-ms-transition: opacity 1s 1s;
    	transition: opacity 1s 1s;
    }
    .cube .face * {
    	background: white !important;
    }
    .cube .face.top {
    	-webkit-transform: rotateX(90deg) translateZ(250px);
    	-moz-transform: rotateX(90deg) translateZ(250px);
    	-o-transform: rotateX(90deg) translateZ(250px);
    	-ms-transform: rotateX(90deg) translateZ(250px);
    	transform: rotateX(90deg) translateZ(250px);
    }
    .cube .face.top-interior {
    	-webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(-250px);
    	-moz-transform: rotateX(-90deg) rotate(180deg) translateZ(-250px);
    	-o-transform: rotateX(-90deg) rotate(180deg) translateZ(-250px);
    	-ms-transform: rotateX(-90deg) rotate(180deg) translateZ(-250px);
    	transform: rotateX(-90deg) rotate(180deg) translateZ(-250px);
    }
    .cube .face.bottom {
    	-webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(250px);
    	-moz-transform: rotateX(-90deg) rotate(180deg) translateZ(250px);
    	-o-transform: rotateX(-90deg) rotate(180deg) translateZ(250px);
    	-ms-transform: rotateX(-90deg) rotate(180deg) translateZ(250px);
    	transform: rotateX(-90deg) rotate(180deg) translateZ(250px);
    }
    .cube .face.bottom-interior {
    	-webkit-transform: rotateX(90deg) translateZ(-250px);
    	-moz-transform: rotateX(90deg) translateZ(-250px);
    	-o-transform: rotateX(90deg) translateZ(-250px);
    	-ms-transform: rotateX(90deg) translateZ(-250px);
    	transform: rotateX(90deg) translateZ(-250px);
    }
    .cube .face.left {
    	-webkit-transform: rotateY(-90deg) translateZ(250px);
    	-moz-transform: rotateY(-90deg) translateZ(250px);
    	-o-transform: rotateY(-90deg) translateZ(250px);
    	-ms-transform: rotateY(-90deg) translateZ(250px);
    	transform: rotateY(-90deg) translateZ(250px);
    }
    .cube .face.left-interior {
    	-webkit-transform: rotateY(90deg) rotate(180deg) translateZ(-250px);
    	-moz-transform: rotateY(90deg) rotate(180deg) translateZ(-250px);
    	-o-transform: rotateY(90deg) rotate(180deg) translateZ(-250px);
    	-ms-transform: rotateY(90deg) rotate(180deg) translateZ(-250px);
    	transform: rotateY(90deg) rotate(180deg) translateZ(-250px);
    }
    .cube .face.right {
    	-webkit-transform: rotateY(90deg) rotate(180deg) translateZ(250px);
    	-moz-transform: rotateY(90deg) rotate(180deg) translateZ(250px);
    	-o-transform: rotateY(90deg) rotate(180deg) translateZ(250px);
    	-ms-transform: rotateY(90deg) rotate(180deg) translateZ(250px);
    	transform: rotateY(90deg) rotate(180deg) translateZ(250px);
    }
    .cube .face.right-interior {
    	-webkit-transform: rotateY(-90deg) translateZ(-250px);
    	-moz-transform: rotateY(-90deg) translateZ(-250px);
    	-o-transform: rotateY(-90deg) translateZ(-250px);
    	-ms-transform: rotateY(-90deg) translateZ(-250px);
    	transform: rotateY(-90deg) translateZ(-250px);
    }
    .cube .face.front {
    	-webkit-transform: translateZ(250px);
    	-moz-transform: translateZ(250px);
    	-o-transform: translateZ(250px);
    	-ms-transform: translateZ(250px);
    	transform: translateZ(250px);
    }
    .cube .face.front-interior {
    	-webkit-transform: rotateY(180deg) translateZ(-250px);
    	-moz-transform: rotateY(180deg) translateZ(-250px);
    	-o-transform: rotateY(180deg) translateZ(-250px);
    	-ms-transform: rotateY(180deg) translateZ(-250px);
    	transform: rotateY(180deg) translateZ(-250px);
    }
    .cube .face.back {
    	-webkit-transform: rotateY(180deg) translateZ(250px);
    	-moz-transform: rotateY(180deg) translateZ(250px);
    	-o-transform: rotateY(180deg) translateZ(250px);
    	-ms-transform: rotateY(180deg) translateZ(250px);
    	transform: rotateY(180deg) translateZ(250px);
    }
    .cube .face.back-interior {
    	-webkit-transform: translateZ(-250px);
    	-moz-transform: translateZ(-250px);
    	-o-transform: translateZ(-250px);
    	-ms-transform: translateZ(-250px);
    	transform: translateZ(-250px);
    }
    .cube[data-face="top"], .cube[data-face="bottom-interior"] {
    	-webkit-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
    	-moz-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
    	-o-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
    	-ms-transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
    	transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
    }
    .cube[data-face="bottom"], .cube[data-face="top-interior"] {
    	-webkit-transform: rotateX(90deg) rotateY(180deg) rotateZ(0deg);
    	-moz-transform: rotateX(90deg) rotateY(180deg) rotateZ(0deg);
    	-o-transform: rotateX(90deg) rotateY(180deg) rotateZ(0deg);
    	-ms-transform: rotateX(90deg) rotateY(180deg) rotateZ(0deg);
    	transform: rotateX(90deg) rotateY(180deg) rotateZ(0deg);
    }
    .cube[data-face="front"], .cube[data-face="back-interior"] {
    	-webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    	-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    	-o-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    	-ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    	transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    .cube[data-face="left"], .cube[data-face="right-interior"] {
    	-webkit-transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
    	-moz-transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
    	-o-transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
    	-ms-transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
    	transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
    }
    .cube[data-face="right"], .cube[data-face="left-interior"] {
    	-webkit-transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);
    	-moz-transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);
    	-o-transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);
    	-ms-transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);
    	transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);
    }
    .cube[data-face="back"], .cube[data-face="front-interior"] {
    	-webkit-transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
    	-moz-transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
    	-o-transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
    	-ms-transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
    	transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg);
    }
    .cube[data-face="bottom-interior"] .face.top,
    .cube[data-face="top-interior"] .face.bottom,
    .cube[data-face="back-interior"] .face.front,
    .cube[data-face="right-interior"] .face.left,
    .cube[data-face="left-interior"] .face.right,
    .cube[data-face="front-interior"] .face.back {
    	opacity: 0;
    	pointer-events: none;
    }
    [onclick] {
    	cursor: pointer;
    }
    </style>
    <h1 class="general-sectionheader">The Warrior</h1>
    <div style="text-align: center;">
    	<a onclick="$('.cube').attr({'data-face': 'top'});">
    		<img src="/img/skin/default/mdadocs1.gif">
    	</a>
    	<a onclick="$('.cube').attr({'data-face': 'bottom'});">
    		<img src="/img/skin/default/mdadocs2.gif">
    	</a>
    	<a onclick="$('.cube').attr({'data-face': 'front'});">
    		<img src="/img/skin/default/mdadocs3.gif">
    	</a>
    	<a onclick="$('.cube').attr({'data-face': 'left'});">
    		<img src="/img/skin/default/mdadocs4.gif">
    	</a>
    	<a onclick="$('.cube').attr({'data-face': 'right'});">
    		<img src="/img/skin/default/mdadocs5.gif">
    	</a>
    	<a onclick="$('.cube').attr({'data-face': 'back'});">
    		<img src="/img/skin/default/mdadocs6.gif">
    	</a>
    </div>
    <div style="text-align: center;">
    	<a onclick="$('.cube').attr({'data-face': 'top-interior'});" class="frm-textbutton-gold">1</a>&nbsp;
    	<a onclick="$('.cube').attr({'data-face': 'bottom-interior'});" class="frm-textbutton-gold">2</a>&nbsp;
    	<a onclick="$('.cube').attr({'data-face': 'front-interior'});" class="frm-textbutton-gold">3</a>&nbsp;
    	<a onclick="$('.cube').attr({'data-face': 'left-interior'});" class="frm-textbutton-gold">4</a>&nbsp;
    	<a onclick="$('.cube').attr({'data-face': 'right-interior'});" class="frm-textbutton-gold">5</a>&nbsp;
    	<a onclick="$('.cube').attr({'data-face': 'back-interior'});" class="frm-textbutton-gold">6</a>
    </div>
    <div class="stage">
    	<div class="cube">
    		<div class="face top">[doc1]</div>
    		<div class="face top-interior">1</div>
    		<div class="face bottom">[doc2]</div>
    		<div class="face bottom-interior">2</div>
    		<div class="face front">[doc3]</div>
    		<div class="face front-interior">3</div>
    		<div class="face left">[doc4]</div>
    		<div class="face left-interior">4</div>
    		<div class="face right">[doc5]</div>
    		<div class="face right-interior">5</div>
    		<div class="face back">[doc6]</div>
    		<div class="face back-interior">6</div>
    	</div>
    </div> 

    [/log]

     

    Until, I change it, a live preview is shown on my profile page: http://magicduel.com/players/The_Warrior

  9. I like the layout of the tabbed inventory. I just have 2 potential improvements:

    1. When the inventory is first opened I would like to see all of my items in one long list (as it was before) and be able to use the different tags to 'filter' my inventory.
    2. My current tabs are: "valuable | tool, rare | tool | resource | enchanted, consumable | consumable", this is also listing each combination of tabs I have. I would prefer it if comma separated tags each ended up as single tabs. For example, my tabs would appear as: "valuable | rare | tool | resource | enchanted | consumable" which saves more space in the interface and won't get out of hand with every possible combination of existing and yet to exist tags.

    I would be interested to hear other peoples views on this and if what I propose would be more/less helpful to the majority.

×
×
  • Create New...