character creation + navbar update

This commit is contained in:
Nael 2013-11-10 22:59:39 +01:00
parent 9498a73007
commit d4cd806c27
13 changed files with 257 additions and 77 deletions

View File

@ -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);
}
}

View File

@ -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>

Binary file not shown.

View File

@ -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;
}

View File

@ -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 }

View File

@ -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">'.
'<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(){

View File

@ -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>

View File

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

View File

@ -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();}
}

View File

@ -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','');

View File

@ -6,45 +6,45 @@
<br>
<br>
<br>
<img src="${PICPATH}male.png" width="110px"/>
<img src="${PICPATH}female.png" width="110px"/>
<a class="male fadein" href="#"><img src="${PICPATH}male.png" width="110px"/></a>
<a class="female fadein" href="#"><img src="${PICPATH}female.png" width="110px"/></a>
</div>
<div id="details_gender" style="float: left; margin: 15px;">
<img src="${PICPATH}human_male.png" style="opacity: 0.2;"/>
<img src="${PICPATH}human_female.png" style="opacity: 0.2;"/>
<img src="${PICPATH}ork_male.png" style="opacity: 0.2;"/>
<img src="${PICPATH}ork_female.png" style="opacity: 0.2;"/>
<div id="details_race" style="float: left; margin: 15px;">
<a class="male human fadein" href="#"><img src="${PICPATH}human_male.png"/></a>
<a class="female human fadein" href="#"><img src="${PICPATH}human_female.png" /></a>
<a class="male ork fadein" href="#"><img src="${PICPATH}ork_male.png" /></a>
<a class="female ork fadein" href="#"><img src="${PICPATH}ork_female.png" /></a>
<br>
<img src="${PICPATH}dwarf_male.png" style="opacity: 0.2;"/>
<img src="${PICPATH}dwarf_female.png" style="opacity: 0.2;"/>
<img src="${PICPATH}undead_male.png" style="opacity: 0.2;"/>
<img src="${PICPATH}undead_female.png" style="opacity: 0.2;"/>
<a class="male dwarf fadein" href="#"><img src="${PICPATH}dwarf_male.png" /></a>
<a class="female dwarf fadein" href="#"><img src="${PICPATH}dwarf_female.png" /></a>
<a class="male undead fadein" href="#"><img src="${PICPATH}undead_male.png" /></a>
<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;"/>
<img src="${PICPATH}nightelf_female.png" style="opacity: 0.2;"/>
<img src="${PICPATH}tauren_male.png" style="opacity: 0.2;"/>
<img src="${PICPATH}tauren_female.png" style="opacity: 0.2;"/>
<a class="male nightelf fadein" href="#"><img src="${PICPATH}nightelf_male.png" /></a>
<a class="female nightelf fadein" href="#"><img src="${PICPATH}nightelf_female.png" /></a>
<a class="male tauren fadein" href="#"><img src="${PICPATH}tauren_male.png" /></a>
<a class="female tauren fadein" href="#"><img src="${PICPATH}tauren_female.png" /></a>
<br>
<img src="${PICPATH}gnome_male.png" style="opacity: 0.2;"/>
<img src="${PICPATH}gnome_female.png" style="opacity: 0.2;"/>
<img src="${PICPATH}troll_male.png" style="opacity: 0.2;"/>
<img src="${PICPATH}troll_female.png" style="opacity: 0.2;"/>
<a class="male gnome fadein" href="#"><img src="${PICPATH}gnome_male.png" /></a>
<a class="female gnome fadein" href="#"><img src="${PICPATH}gnome_female.png" /></a>
<a class="male troll fadein" href="#"><img src="${PICPATH}troll_male.png" /></a>
<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;"/>
<img src="${PICPATH}hunter.png" style="opacity: 0.2;"/>
<a class="human dwarf nightelf gnome ork undead tauren troll fadein" href="#"><img src="${PICPATH}warrior.png" /></a>
<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;"/>
<img src="${PICPATH}rogue.png" style="opacity: 0.2;"/>
<a class="dwarf human fadein" href="#"><img src="${PICPATH}paladin.png" /></a>
<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;"/>
<img src="${PICPATH}mage.png" style="opacity: 0.2;"/>
<a class="dwarf human nightelf undead troll fadein" href="#"><img src="${PICPATH}priest.png" /></a>
<a class="human gnome undead troll fadein" href="#"><img src="${PICPATH}mage.png" /></a>
<br>
<img src="${PICPATH}warlock.png" style="opacity: 0.2;"/>
<img src="${PICPATH}druid.png" style="opacity: 0.2;"/>
<a class="human gnome ork undead fadein" href="#"><img src="${PICPATH}warlock.png" /></a>
<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;">
<h3><center>Info</center></h3>
<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 style="padding-left: 20px;"><img src="${PICPATH}help_questionmark.png" width="25px"/>&nbsp;&nbsp;Info</h3>
${infotext_human}
</div>

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -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');
}
}