navi for mojotrollz

This commit is contained in:
Ulf Gebhardt 2013-10-22 09:26:47 +02:00
parent d7986a30fc
commit 6040a4bf4a
7 changed files with 146 additions and 56 deletions

View File

@ -15,4 +15,4 @@ $mojotrollz_config = array( array(SYSTEM\CONFIG\config_ids::SYS_CONFIG_ERRORREP
array(\SYSTEM\CONFIG\config_ids::SYS_SAI_CONFIG_TITLE, 'mojotrollz - Admin Area'),
array(\SYSTEM\CONFIG\config_ids::SYS_SAI_CONFIG_COPYRIGHT, '<a href="http://www.mojotrollz.eu/web/mojotrollz/" target="_blank">mojotrollz</a>, &copy; WebCraft Media 2013'),
array(\SYSTEM\CONFIG\config_ids::SYS_CONFIG_LANGS, array('deDE', 'enUS')),
array(\SYSTEM\CONFIG\config_ids::SYS_CONFIG_DEFAULT_LANG, 'deDE'));
array(\SYSTEM\CONFIG\config_ids::SYS_CONFIG_DEFAULT_LANG, 'enUS'));

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,25 @@
function needaname(gender) {
male = randomName(names.male_names);
female = randomName(names.female_names);
surname = randomName(names.surname_names);
if(gender==="male") {
return male + " " + surname;
} else if(gender==="female") {
return female + " " + surname;
} else {
//the magic with the math function returns a value toggling
//between 0 and 1... so it alternately returns male and female
random_name = Math.round(Math.random() * 1) ? male : female;
return random_name + " " + surname;
}
function randomName(nameArray) {
//garantees that the number returned is less
//than the max index of name array
//, taking indexing into account
return nameArray[ Math.floor(Math.random() * (nameArray.length - 1)) ];
}
}

View File

@ -10,23 +10,23 @@
<body style="color: gold; background: url(${PICPATH}wall.jpg);">
<div id="logo" style="text-align: center"><img src="${PICPATH}World-Of-Warcraft-Logo.png"/></div>
<div id="wrapper" style="background: url(${PICPATH}background.png); 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;">
<div id="wizard_navbar" class="navbar" style="background: black; height:48px;">
<div class="navbar-inner" style="background-image: url(${PICPATH}navbar_background.png);">
<a class="brand active" href="#"><font color="gold">Welcome</font></a>
<ul class="nav">
<li><a href="#" url="?action=wizard_details"><font color="gold">Details</font></a></li>
<li><a href="#" url="?action=wizard_visuals"><font color="gold">Visuals</font></a></li>
<li><a href="#" url="?action=wizard_friend"><font color="gold">Mates n'Guilds</font></a></li>
<li><a href="#" url="?action=wizard_friend"><font color="gold">Skills</font></a></li>
<li><a href="#" url="?action=wizard_spawn"><font color="gold">Spawn</font></a></li>
<li><a href="#" url="?action=wizard_summ"><font color="gold">Summary</font></a></li>
<li><a href="#" url="?action=wizard_reg"><font color="gold">Registration</font></a></li>
</ul>
<ul 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%"/>
</div>
<img src="${PICPATH}border_top.png" width="100%" style="margin-top: -40px"/>
<div id="frame_left" style="float: left; margin: 0;">
<div id="frame_left" style="float: left; margin: 0; height: 100%;">
<img src="${PICPATH}border_left.png" style=""/>
<br>
<img src="${PICPATH}border_left.png" style=""/>
@ -40,7 +40,7 @@
<img src="${PICPATH}border_left.png" style=""/>
</div>
<div style="float: right; margin-right: -4px;">
<div style="float: right; margin-right: -4px; height: 100%;">
<img src="${PICPATH}border_right.png" style=""/>
<br>
<img src="${PICPATH}border_right.png" style=""/>
@ -61,8 +61,9 @@
<div style="clear: both;"></div>
<img src="${PICPATH}border_right.png" style="float: right; margin-right: -10px;"/>
<img src="${PICPATH}border_left.png" style="float: left; margin-left: -10px;"/>
<div id="back" style="float: right;"><img src="${PICPATH}arrow_right.png"/></div>
<div id="next" style="float: left;"><img src="${PICPATH}arrow_left.png"/></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="register" style="float: right; display: none;"><a href="#">REG NOW BUTTON</a></div>
</div>
<img src="${PICPATH}border_bot.png" width="100%"/>
</div>

View File

@ -1,15 +1,79 @@
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','']
]
var wizard_state = '';
$(document).ready(function() {
$('#wizard_navbar a').click(function () {
var url = $(this).attr("url");
$('#wizard_navbar li').each(function(){
$('#wizard_navbar a').click(function () {
$('#wizard_navbar li').each(function(){
$(this).removeClass('active');});
$(this).parent().addClass('active');
load_wizard_page (url);
$(this).parent().addClass('active');
load_wizard_page ($(this).attr("state"));
});
});
$('#back a').click(function() {
back(wizard_state);});
$('#next a').click(function() {
next(wizard_state);});
});
function load_wizard_page (url){
$('#content').load(url);
};
function load_wizard_page (state){
if(state == ''){
window.location.reload();}
wizard_state = state;
$('#content').hide();
$('#content').load('?action='+state);
$('#content').fadeIn(500);
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();
break;
}
}
window[state]();
/*if(typeof window[state] === 'function') {
window[state]();}*/
};
function back(state){
for(var i=0; i<WizardStates.length;i++){
if(WizardStates[i][0] == state){
load_wizard_page (WizardStates[i][4]);
break;
}
}
}
function next(state){
for(var i=0; i<WizardStates.length;i++){
if(WizardStates[i][0] == state){
load_wizard_page (WizardStates[i][5]);
break;
}
}
}
function wizard_details(){
//$("#charname").text(needaname());
//$('#random').click(function(){
// alert("abc");
// $("#charname").text(needaname());
//});
}

View File

@ -1,8 +1,8 @@
<div id="details_gender" style="float: left; margin: 15px;">
<input type="text" class="form-control input-lg" placeholder="${character_name}">
<input type="text" class="form-control input-lg" id="charname" placeholder="${character_name}">
<br>
<img src="${PICPATH}button_random.png" width="220px"/>
<a href="#" id="random"><img src="${PICPATH}button_random.png" width="220px"/></a>
<br>
<br>
<br>
@ -10,38 +10,38 @@
<img src="${PICPATH}female.png" width="110px"/>
</div>
<div id="details_gender" style="float: left; margin: 15px;">
<img src="${PICPATH}human_male.png"/>
<img src="${PICPATH}human_female.png"/>
<img src="${PICPATH}ork_male.png"/>
<img src="${PICPATH}ork_female.png"/>
<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;"/>
<br>
<img src="${PICPATH}dwarf_male.png"/>
<img src="${PICPATH}dwarf_female.png"/>
<img src="${PICPATH}undead_male.png"/>
<img src="${PICPATH}undead_female.png"/>
<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;"/>
<br>
<img src="${PICPATH}nightelf_male.png"/>
<img src="${PICPATH}nightelf_female.png"/>
<img src="${PICPATH}tauren_male.png"/>
<img src="${PICPATH}tauren_female.png"/>
<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;"/>
<br>
<img src="${PICPATH}gnome_male.png"/>
<img src="${PICPATH}gnome_female.png"/>
<img src="${PICPATH}troll_male.png"/>
<img src="${PICPATH}troll_female.png"/>
<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;"/>
</div>
<div id="details_class" style="float: left; margin: 15px;">
<img src="${PICPATH}warrior.png"/>
<img src="${PICPATH}hunter.png"/>
<img src="${PICPATH}warrior.png" style="opacity: 0.2;"/>
<img src="${PICPATH}hunter.png" style="opacity: 0.2;"/>
<br>
<img src="${PICPATH}paladin.png"/>
<img src="${PICPATH}rogue.png"/>
<img src="${PICPATH}paladin.png" style="opacity: 0.2;"/>
<img src="${PICPATH}rogue.png" style="opacity: 0.2;"/>
<br>
<img src="${PICPATH}priest.png"/>
<img src="${PICPATH}mage.png"/>
<img src="${PICPATH}priest.png" style="opacity: 0.2;"/>
<img src="${PICPATH}mage.png" style="opacity: 0.2;"/>
<br>
<img src="${PICPATH}warlock.png"/>
<img src="${PICPATH}druid.png"/>
<img src="${PICPATH}warlock.png" style="opacity: 0.2;"/>
<img src="${PICPATH}druid.png" style="opacity: 0.2;"/>
</div>
<div id="details_info" style="float: left; margin: 15px;">

View File

@ -3,9 +3,8 @@
class wizard_details extends SYSTEM\PAGE\Page {
private function js(){
return '';
return '<script type="text/javascript" language="JavaScript" src="'.SYSTEM\WEBPATH(new PLIB(),'namegenerator/names_data.js').'"></script>'.
'<script type="text/javascript" language="JavaScript" src="'.SYSTEM\WEBPATH(new PLIB(),'namegenerator/needaname.js').'"></script>';
}
private function css (){