character creation + navbar update

mojotrollz/page/default_navbar/default_navbar.php

@@ -0,0 +1,24 @@
+<?php
+
+class default_navbar extends SYSTEM\PAGE\Page {
+    
+    private function js(){        
+        return  '';
+
+              
+    }
+      
+   private function css (){
+       return   '';
+   }
+
+    public function html(){
+        $vars = array();               
+        $vars['js'] = $this->js();
+        $vars['css'] = $this->css();
+        $vars['PICPATH'] = \SYSTEM\WEBPATH(new PPAGE(), 'default_navbar/img/');
+        $vars = array_merge($vars,  \SYSTEM\locale::getStrings(DBD\locale_string::VALUE_CATEGORY_MAINPAGE));
+        return SYSTEM\PAGE\replace::replaceFile(SYSTEM\SERVERPATH(new PPAGE(),'default_navbar/wizard_navbar.tpl'), $vars);
+        
+    }
+}

mojotrollz/page/default_navbar/wizard_navbar.tpl

@@ -0,0 +1,8 @@
+<a class="brand active" href=""><font color="gold">Welcome</font></a>                                  
+<li><a href="#" state="wizard_details"><font color="gold">Details</font></a></li>
+<li><a href="#" state="wizard_visuals"><font color="gold">Visuals</font></a></li>
+<li><a href="#" state="wizard_friend"><font color="gold">Mates n'Guilds</font></a></li>
+<li><a href="#" state="wizard_skills"><font color="gold">Skills</font></a></li>
+<li><a href="#" state="wizard_spawn"><font color="gold">Spawn</font></a></li>
+<li><a href="#" state="wizard_summ"><font color="gold">Summary</font></a></li>
+<li><a href="#" state="wizard_reg"><font color="gold">Registration</font></a></li>

mojotrollz/page/default_page/css/default_page.css

@@ -21,3 +21,18 @@
     position: relative;
     height: 25px;
 }
+.link-color a{
+    color: black;
+}
+
+.fadeout {
+    opacity: 0.2;
+}
+
+.fadein {
+   opacity: 0.7; 
+}
+
+.selected {
+   opacity: 1.0; 
+}

mojotrollz/page/default_page/css/font.css

@@ -0,0 +1,7 @@
+@font-face {
+  font-family: "Life-Craft";
+  src: url(http://www.mojotrollz.eu/web/mojotrollz/mojotrollz/page/default_page/css/LifeCraft_Font.ttf) format("truetype");
+}
+.lifecraft { font-family: "Life-Craft", sans-serif }
+
+

mojotrollz/page/default_page/default_page.php

@@ -7,14 +7,16 @@ class default_page extends SYSTEM\PAGE\Page {
                 '<script type="text/javascript" language="JavaScript" src="'.SYSTEM\WEBPATH(new PBOOTSTRAP(),'js/bootstrap.min.js').'"></script>'.
                 '<script type="text/javascript" language="JavaScript" src="'.SYSTEM\WEBPATH(new PVALIDATION(),'jqBootstrapValidation.js').'"></script>'.
                 '<script type="text/javascript" language="JavaScript" src="'.SYSTEM\WEBPATH(new PCRYPTOSHA(),'jquery.sha1.js').'"></script>'.
-                '<script type="text/javascript" language="JavaScript" src="'.SYSTEM\WEBPATH(new PPAGE(),'default_page/js/wizard.js').'"></script>';
+                '<script type="text/javascript" language="JavaScript" src="'.SYSTEM\WEBPATH(new PPAGE(),'default_page/js/wizard.js').'"></script>'.
+                '<script type="text/javascript" language="JavaScript" src="'.SYSTEM\WEBPATH(new PPAGE(),'wizard_details/js/wizard_details.js').'"></script>';
 
               
     }
       
    private function css (){
-       return '<link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">'.
+       return   '<link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">'.
-               '<link href="'.SYSTEM\WEBPATH(new PPAGE(),'default_page/css/default_page.css').'" rel="stylesheet">';
+                '<link href="'.SYSTEM\WEBPATH(new PPAGE(),'default_page/css/default_page.css').'" rel="stylesheet">'.
+                '<link href="'.SYSTEM\WEBPATH(new PPAGE(),'default_page/css/font.css').'" rel="stylesheet">';
    }
 
     public function html(){

mojotrollz/page/default_page/default_page.tpl

@@ -12,15 +12,9 @@
         <div id="wrapper"style="width: 1000px;  margin: auto; -webkit-box-shadow: 3px 3px 4px 2px rgba(0, 0, 0, 1); box-shadow: 3px 3px 4px 2px rgba(0, 0, 0, 1); border-radius: 5px;">
             <div id="wizard_navbar" class="navbar" style="background: black; height:48px;">
                  <div class="navbar-inner" style="background-image: url(${PICPATH}navbar_background.png);">
-                    <ul class="nav">
+                    <ul id="nav" class="nav">
                         <a class="brand active" href=""><font color="gold">Welcome</font></a>                                  
-                        <li><a href="#" state="wizard_details"><font color="gold">Details</font></a></li>
+
-                        <li><a href="#" state="wizard_visuals"><font color="gold">Visuals</font></a></li>
-                        <li><a href="#" state="wizard_friend"><font color="gold">Mates n'Guilds</font></a></li>
-                        <li><a href="#" state="wizard_skills"><font color="gold">Skills</font></a></li>
-                        <li><a href="#" state="wizard_spawn"><font color="gold">Spawn</font></a></li>
-                        <li><a href="#" state="wizard_summ"><font color="gold">Summary</font></a></li>
-                        <li><a href="#" state="wizard_reg"><font color="gold">Registration</font></a></li>
                     </ul>
                  </div>
                 <img src="${PICPATH}border_top.png" width="100%"/>
@@ -33,7 +27,7 @@
                             <div>
                                 welcome
                             </div>
-                            <div style="float: right; padding-right: 10px;">
+                            <div class="lifecraft" style="float: right; padding-right: 10px;">
                                 <h3>Login</h3>
                                 <input type="text" class="form-control input-lg" id="username" placeholder="${user_name}"></br>
                                 <input type="password" class="form-control input-lg" id="password" placeholder="${password}"></br>
@@ -42,7 +36,8 @@
                         </div>
                         <div style="clear: both;"></div>
                         <div id="back" style="float: left; display: none;"><a href="#"><img src="${PICPATH}arrow_left.png"/></a></div>
-                        <div id="next" style="float: right;"><a href="#"><img src="${PICPATH}arrow_right.png"/></a></div>
+                        <div id="start" style="float: left;"><a href="#">start</a></div>
+                        <div id="next" style="float: right; display: none;"><a href="#"><img src="${PICPATH}arrow_right.png"/></a></div>                        
                         <div id="register" style="float: right; display: none;"><a href="#">REG NOW BUTTON</a></div>
                     </div>
                     <div class="right" style="background: url(${PICPATH}border_right.png) repeat-y;"></div>              

mojotrollz/page/default_page/js/wizard.js

@@ -1,25 +1,20 @@
 var WizardStates = [
-    //statename, backbut, nextbut, regbut, backname, nextname
+    //statename, backbut, nextbut, startbut, regbut, backname, nextname
-    ['',false,true,false,'','wizard_details'],
+    ['',false, false, true, false,'','wizard_details'],
-    ['wizard_details',true,true,false,'','wizard_visuals'],   
+    ['wizard_details',true,true, false, false,'','wizard_visuals'],   
-    ['wizard_visuals',true,true,false,'wizard_details','wizard_friend'],       
+    ['wizard_visuals',true,true, false, false,'wizard_details','wizard_friend'],       
-    ['wizard_friend',true,true,false,'wizard_visuals','wizard_skills'],
+    ['wizard_friend',true,true, false, false,'wizard_visuals','wizard_skills'],
-    ['wizard_skills',true,true,false,'wizard_friend','wizard_spawn'],
+    ['wizard_skills',true,true, false, false,'wizard_friend','wizard_spawn'],
-    ['wizard_spawn',true,true,false,'wizard_skills','wizard_summ'],
+    ['wizard_spawn',true,true, false, false,'wizard_skills','wizard_summ'],
-    ['wizard_summ',true,true,false,'wizard_spawn','wizard_reg'],
+    ['wizard_summ',true,true, false,false,'wizard_spawn','wizard_reg'],
-    ['wizard_reg',true,false,true,'wizard_summ','']
+    ['wizard_reg',true,false, false, true,'wizard_summ','']
 ]
 
 var wizard_state = '';
 
 $(document).ready(function() {
 
-    $('#wizard_navbar a').click(function () {        
+    register_menu ();
-        $('#wizard_navbar li').each(function(){
-           $(this).removeClass('active');});
-        $(this).parent().addClass('active');        
-        load_wizard_page ($(this).attr("state"));    
-    });
     
     $('#back a').click(function() {
         back(wizard_state);});
@@ -27,29 +22,43 @@ $(document).ready(function() {
     $('#next a').click(function() {
         next(wizard_state);});
     
+    $('#start a').click(function() {
+        start ();});
+
 });
 
+function register_menu (){
+    $('#wizard_navbar a').click(function () {        
+        $('#wizard_navbar li').each(function(){
+           $(this).removeClass('active');});
+        $(this).parent().addClass('active');        
+        load_wizard_page ($(this).attr("state"));    
+    });
+}
+
 function load_wizard_page (state){    
     if(state == ''){
         window.location.reload();}
     
     wizard_state = state;
     $('#content').hide();
-    $('#content').load('?action='+state);
+    $('#content').load('?action='+state, function (){
-    $('#content').show(750);
+        $('#content').show(750);
     
-    for(var i=0; i<WizardStates.length;i++){
+        for(var i=0; i<WizardStates.length;i++){
-        if(WizardStates[i][0] == state){
+            if(WizardStates[i][0] == state){
-            WizardStates[i][1] ? $('#back').fadeIn(500) : $('#back').hide();
+                WizardStates[i][1] ? $('#back').fadeIn(500) : $('#back').hide();
-            WizardStates[i][2] ? $('#next').fadeIn(500) : $('#next').hide();
+                WizardStates[i][2] ? $('#next').fadeIn(500) : $('#next').hide();
-            WizardStates[i][3] ? $('#register').fadeIn(500) : $('#register').hide();
+                WizardStates[i][3] ? $('#start').fadeIn(500) : $('#start').hide();
-            break;
+                WizardStates[i][4] ? $('#register').fadeIn(500) : $('#register').hide();          
+                break;
+            }
         }
-    }
     
-    window[state]();
+        window[state]();
-    /*if(typeof window[state] === 'function') {
+        
-        window[state]();}*/
+    });
+
 };
 
 function back(state){
@@ -70,10 +79,13 @@ function next(state){
     }
 }
 
-function wizard_details(){
+function start(){
-    //$("#charname").text(needaname());
+    $('#nav').scrollTop(1500);
-    //$('#random').click(function(){
+    $('#nav').load('?action=default_navbar', function (){
-    //    alert("abc");
+        $('#nav').scrollLeft(2000);   
-    //   $("#charname").text(needaname());
+        load_wizard_page ('wizard_details');
-    //});
+        register_menu ();
+    });
+    
 }
+

mojotrollz/page/page_mojotrollz.php

@@ -25,4 +25,7 @@ class page_mojotrollz extends \SYSTEM\API\api_default {
     
     public static function action_wizard_reg(){
         return new wizard_reg();}
+    
+    public static function action_default_navbar(){
+        return new default_navbar();}
 }

mojotrollz/page/register_page_classes.php

@@ -8,5 +8,6 @@ SYSTEM\autoload::registerFolder(dirname(__FILE__).'/wizard_skills','');
 SYSTEM\autoload::registerFolder(dirname(__FILE__).'/wizard_spawn','');
 SYSTEM\autoload::registerFolder(dirname(__FILE__).'/wizard_summ','');
 SYSTEM\autoload::registerFolder(dirname(__FILE__).'/wizard_reg','');
+SYSTEM\autoload::registerFolder(dirname(__FILE__).'/default_navbar','');
 
 

mojotrollz/page/wizard_details/details.tpl

@@ -6,45 +6,45 @@
     <br>
     <br>
     <br>
-    <img src="${PICPATH}male.png" width="110px"/>
+    <a class="male fadein" href="#"><img src="${PICPATH}male.png" width="110px"/></a>
-    <img src="${PICPATH}female.png" width="110px"/>
+    <a class="female fadein" href="#"><img src="${PICPATH}female.png" width="110px"/></a>
 </div>
-<div id="details_gender" style="float: left; margin: 15px;">
+<div id="details_race" style="float: left; margin: 15px;">
-    <img src="${PICPATH}human_male.png" style="opacity: 0.2;"/>
+    <a class="male human fadein" href="#"><img src="${PICPATH}human_male.png"/></a>
-    <img src="${PICPATH}human_female.png" style="opacity: 0.2;"/>
+    <a class="female human fadein" href="#"><img src="${PICPATH}human_female.png" /></a>
-    <img src="${PICPATH}ork_male.png" style="opacity: 0.2;"/>
+    <a class="male ork fadein" href="#"><img src="${PICPATH}ork_male.png" /></a>
-    <img src="${PICPATH}ork_female.png" style="opacity: 0.2;"/>
+    <a class="female ork fadein" href="#"><img src="${PICPATH}ork_female.png" /></a>
     <br>
-    <img src="${PICPATH}dwarf_male.png" style="opacity: 0.2;"/>
+    <a class="male dwarf fadein" href="#"><img src="${PICPATH}dwarf_male.png" /></a>
-    <img src="${PICPATH}dwarf_female.png" style="opacity: 0.2;"/>
+    <a class="female dwarf fadein" href="#"><img src="${PICPATH}dwarf_female.png" /></a>
-    <img src="${PICPATH}undead_male.png" style="opacity: 0.2;"/>
+    <a class="male undead fadein" href="#"><img src="${PICPATH}undead_male.png" /></a>
-    <img src="${PICPATH}undead_female.png" style="opacity: 0.2;"/>
+    <a class="female undead fadein" href="#"><img class="select" src="${PICPATH}undead_female.png" /></a>
     <br>
-    <img src="${PICPATH}nightelf_male.png" style="opacity: 0.2;"/>
+    <a class="male nightelf fadein" href="#"><img src="${PICPATH}nightelf_male.png" /></a>
-    <img src="${PICPATH}nightelf_female.png" style="opacity: 0.2;"/>
+    <a class="female nightelf fadein" href="#"><img src="${PICPATH}nightelf_female.png" /></a>
-    <img src="${PICPATH}tauren_male.png" style="opacity: 0.2;"/>
+    <a class="male tauren fadein" href="#"><img src="${PICPATH}tauren_male.png" /></a>
-    <img src="${PICPATH}tauren_female.png" style="opacity: 0.2;"/>
+    <a class="female tauren fadein" href="#"><img src="${PICPATH}tauren_female.png" /></a>
     <br>
-    <img src="${PICPATH}gnome_male.png" style="opacity: 0.2;"/>
+    <a class="male gnome fadein" href="#"><img src="${PICPATH}gnome_male.png" /></a>
-    <img src="${PICPATH}gnome_female.png" style="opacity: 0.2;"/>
+    <a class="female gnome fadein" href="#"><img src="${PICPATH}gnome_female.png" /></a>
-    <img src="${PICPATH}troll_male.png" style="opacity: 0.2;"/>
+    <a class="male troll fadein" href="#"><img src="${PICPATH}troll_male.png" /></a>
-    <img src="${PICPATH}troll_female.png" style="opacity: 0.2;"/>
+    <a class="female troll fadein" href="#"><img src="${PICPATH}troll_female.png" /></a>
 </div>
 <div id="details_class" style="float: left; margin: 15px;">
-    <img src="${PICPATH}warrior.png" style="opacity: 0.2;"/>
+    <a class="human dwarf nightelf gnome ork undead tauren troll fadein" href="#"><img src="${PICPATH}warrior.png" /></a>
-    <img src="${PICPATH}hunter.png" style="opacity: 0.2;"/>
+    <a class="dwarf nightelf ork tauren troll fadein" href="#"><img src="${PICPATH}hunter.png" /></a>
     <br>
-    <img src="${PICPATH}paladin.png" style="opacity: 0.2;"/>
+    <a class="dwarf human fadein" href="#"><img src="${PICPATH}paladin.png" /></a>
-    <img src="${PICPATH}rogue.png" style="opacity: 0.2;"/>
+    <a class="dwarf human nightelf gnome ork undead troll fadein" href="#"><img src="${PICPATH}rogue.png" /></a>
     <br>
-    <img src="${PICPATH}priest.png" style="opacity: 0.2;"/>
+    <a class="dwarf human nightelf undead troll fadein" href="#"><img src="${PICPATH}priest.png" /></a>
-    <img src="${PICPATH}mage.png" style="opacity: 0.2;"/>
+    <a class="human gnome undead troll fadein" href="#"><img src="${PICPATH}mage.png" /></a>
     <br> 
-    <img src="${PICPATH}warlock.png" style="opacity: 0.2;"/>
+    <a class="human gnome ork undead fadein" href="#"><img src="${PICPATH}warlock.png" /></a>
-    <img src="${PICPATH}druid.png" style="opacity: 0.2;"/>
+    <a class="fadein nightelf tauren" href="#"><img src="${PICPATH}druid.png" /></a>
 </div>
 
-<div id="details_info" style="float: left; margin-top: 15px; width: 190px; padding: 8px; padding-bottom: 110px; font-size: 12px; background: url(${PICPATH}infotext_background.png) no-repeat;">
+<div class="lifecraft link-color" id="details_info" style="float: left; margin-top: 15px; width: 190px; padding: 8px; padding-bottom: 110px; font-size: 14px; background: url(${PICPATH}infotext_background.png) no-repeat;">
-    <h3><center>Info</center></h3>
+    <h3 style="padding-left: 20px;"><img src="${PICPATH}help_questionmark.png" width="25px"/>&nbsp;&nbsp;Info</h3>
     ${infotext_human}
 </div>

mojotrollz/page/wizard_details/js/wizard_details.js

@@ -0,0 +1,113 @@
+function wizard_details (){
+
+    $('#details_gender a').click(function(){
+        $('#details_gender a').removeClass('selected');
+        $('#details_race a').removeClass('selected');
+        $('#details_class a').removeClass('selected');
+        $(this).addClass('selected');        
+    });
+    
+    $('#details_race a').click(function(){
+        $('#details_race a').removeClass('selected');
+        $(this).addClass('selected');        
+    });
+    
+    $('#details_class a').click(function(){
+        $('#details_class a').removeClass('selected');
+        $(this).addClass('selected');
+        
+        $('#details_race a').removeClass('fadein');
+        $('#details_race a').addClass('fadeout');
+        if($(this).hasClass('human')){
+            $('#details_race .human').addClass('fadein');}
+        if($(this).hasClass('ork')){
+            $('#details_race .ork').addClass('fadein');}
+        if($(this).hasClass('dwarf')){
+            $('#details_race .dwarf').addClass('fadein');}
+        if($(this).hasClass('undead')){
+            $('#details_race .undead').addClass('fadein');}
+        if($(this).hasClass('nightelf')){
+            $('#details_race .nightelf').addClass('fadein');}
+        if($(this).hasClass('tauren')){
+            $('#details_race .tauren').addClass('fadein');}
+        if($(this).hasClass('gnome')){
+            $('#details_race .gnome').addClass('fadein');}
+        if($(this).hasClass('troll')){
+            $('#details_race .troll').addClass('fadein');}
+        
+        if(!$('#details_race .selected').hasClass('fadein')){
+            $('#details_race .selected').removeClass('selected');
+        }
+    });
+
+    $('#content .male').click(function (){
+        male ();
+    });
+    $('#content .female').click(function (){
+        female ();
+    });
+    $('#details_race .human').click(function (){
+         wowrace('human');
+    });
+    $('#details_race .ork').click(function (){
+         wowrace('ork');
+    });
+    $('#details_race .dwarf').click(function (){
+         wowrace('dwarf');
+    });
+    $('#details_race .undead').click(function (){
+         wowrace('undead');
+    });
+    $('#details_race .nightelf').click(function (){
+         wowrace('nightelf');
+    });
+    $('#details_race .tauren').click(function (){
+         wowrace('tauren');
+    });
+    $('#details_race .gnome').click(function (){
+         wowrace('gnome');
+    });
+    $('#details_race .troll').click(function (){
+         wowrace('troll');
+    });
+}
+
+function male (){
+    $('#content .male').removeClass('fadeout');
+    $('#content .male').addClass('fadein');
+    
+    $('#content .female').removeClass('fadein');
+    $('#content .female').addClass('fadeout');
+    
+    $('#details_gender .female').removeClass('fadein');
+    $('#details_gender .male').removeClass('fadein');    
+    
+    $('#details_gender .male').addClass('selected');
+    $('#details_gender .female').removeClass('selected');
+}
+
+function female (){
+    $('#content .female').removeClass('fadeout');
+    $('#content .female').addClass('fadein');
+    
+    $('#content .male').removeClass('fadein');
+    $('#content .male').addClass('fadeout');
+    
+    $('#details_gender .female').removeClass('fadein');
+    $('#details_gender .male').removeClass('fadein');
+    
+    $('#details_gender .female').addClass('selected');
+    $('#details_gender .male').removeClass('selected');
+}
+
+function wowrace (cls){
+    $('#details_class a').removeClass('fadein');
+    $('#details_class a').addClass ('fadeout');
+    
+    $('#details_class .'+cls).removeClass ('fadeout');
+    $('#details_class .'+cls).addClass ('fadein');
+    
+    if(!$('#details_class .selected').hasClass('fadein')){
+        $('#details_class .selected').removeClass('selected');
+    }
+}