Skip to content

Instantly share code, notes, and snippets.

@RobertSkalko

RobertSkalko/index.html

Created August 16, 2016 15:47
Show Gist options
  • Save RobertSkalko/edbbd24469aa8c05611b2a4b6b471670 to your computer and use it in GitHub Desktop.
Save RobertSkalko/edbbd24469aa8c05611b2a4b6b471670 to your computer and use it in GitHub Desktop.
Download ZIP
Item generator prototype
Raw
index.html
<div id="main">
<h4 style="color:white"class="m text-center">Random Item Generator!</h4>
<div class="inventory">
<p class="rarity text-center">Item</p>
<p style="text-align:center"><img class="pic center" src="http://res.cloudinary.com/treborx555/image/upload/v1471340423/rod_dkey85.png"></p>
<p class="text-center"> <button id="gen" type="button" class="btn btn-md btn-success">Generate!</button></p>
<p class="text-center"> <button id="save" type="button" class="btn btn-md btn-warning">Save Item!</button></p>
<div class="line"></div>
<div class="text-center" id="STATS"></div>
<div class="line"></div>
<div id="saved">
<img class="pic pic1" >
<img class="pic pic2" src=''>
<img class="pic pic3" src=''>
<img class="pic pic4" src=''>
</div>
</div>
</div>
Raw
script.js
var stop=0;
var items=[];
var itemstats3=[];
var rarity;
var item={};
var itemstats2=[];
$( "#gen" ).click(function() {
if (stop===0){
stop=1;
var affixes=[['Health',500],
['Damage',100],
['Critical Strike',100],
['Vitality',100],
["Magic power",100],
["Mana",500],
["Evade Chance",100]];
var num;
var level=15;
var itemstats=[];
var stats;
var usedstats=[];
var randomstat;
var x;
usedstats=[];
stats=Math.floor(Math.random()*affixes.length)+1;
if (stats>0){$(".rarity").html("<p style='color:#737373'>Common Item</p>")};
if (stats>2){$(".rarity").html("<p style='color:green'>Magic Item</p>")};
if (stats>3){$(".rarity").html("<p style='color:#4d4dff'>Rare Item</p>")};
if (stats>4){$(".rarity").html("<p style='color:purple'>Epic Item</p>")};
if (stats>5){$(".rarity").html("<p style='color:#ff8c1a'>Legendary Item</p>")};
for (var i=0;i<stats;i++){
if (i===0){
item={};
usedstats=[];
};
randomstat=Math.floor(Math.random()*affixes.length);
while(usedstats.indexOf(randomstat)!=-1){randomstat=Math.floor(Math.random()*affixes.length);}
x=randomstat;
usedstats.push(x);
itemstats.push(affixes[x][0]);
if (affixes[x][0]=="Health"||affixes[x][0]==="Mana"){num=Math.floor(Math.random()*500)+level*3;}
else {num=Math.floor(Math.random()*100)+level;}
item[affixes[x][0]]={number:num,rarity:"Common"}
if (affixes[x][1]+level-num<affixes[x][1]/2){item[affixes[x][0]]={number:num,rarity:"Magic"}};
if (affixes[x][1]+level-num<affixes[x][1]/3){item[affixes[x][0]]={number:num,rarity:"Rare"}};
if (affixes[x][1]+level-num<affixes[x][1]/5){item[affixes[x][0]]={number:num,rarity:"Epic"}};
if (affixes[x][1]+level-num<affixes[x][1]/10){item[affixes[x][0]]={number:num,rarity:"Legendary"}};
itemstats3=itemstats;
}
$("#STATS").html('');
for (var y=0;y<itemstats.length;y++){
rarity=item[itemstats[y]]["rarity"];
$("#STATS").append(
"<p class="+rarity+">"+itemstats[y]+ ": "+item[itemstats[y]]["number"]+"</p>"
);
}
stop=0;
}
}); // button click
var pic;
var picnum=0;
$( "#save" ).click(function() {
picnum++;
pic=".pic"+picnum;
$(pic).attr("src","http://res.cloudinary.com/treborx555/image/upload/v1471340423/rod_dkey85.png");
itemstats2.push(itemstats3);
items.push(item);
}); // button click
$( ".pic1" ).click(function(){
$("#STATS").html('');
for (var y=0;y<itemstats2[0].length;y++){
rarity=items[0][itemstats2[0][y]]["rarity"];
$("#STATS").append(
"<p class="+rarity+">"+itemstats2[0][y]+ ": "+items[0][itemstats2[0][y]]["number"]+"</p>"
);
}
}); // button click
$( ".pic2" ).click(function(){
$("#STATS").html('');
for (var y=0;y<itemstats2[1].length;y++){
rarity=items[1][itemstats2[1][y]]["rarity"];
$("#STATS").append(
"<p class="+rarity+">"+itemstats2[1][y]+ ": "+items[1][itemstats2[1][y]]["number"]+"</p>"
);
}
}); // button click
$( ".pic3" ).click(function(){
$("#STATS").html('');
for (var y=0;y<itemstats2[2].length;y++){
rarity=items[2][itemstats2[2][y]]["rarity"];
$("#STATS").append(
"<p class="+rarity+">"+itemstats2[2][y]+ ": "+items[2][itemstats2[2][y]]["number"]+"</p>"
);
}
}); // button click
$( ".pic4" ).click(function(){
$("#STATS").html('');
for (var y=0;y<itemstats2[3].length;y++){
rarity=items[3][itemstats2[3][y]]["rarity"];
$("#STATS").append(
"<p class="+rarity+">"+itemstats2[3][y]+ ": "+items[3][itemstats2[3][y]]["number"]+"</p>"
);
}
}); // button click
Raw
scripts
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Raw
style.css
body{
background:#222;
}
.inventory{
border:solid 10px #111;
width:400px;
background-color:brown;
margin:0 auto;
padding:10px;
}
.pic{
width:60px;
height:60px;
border:black solid 5px;
}
#stats{
width:100%;
height:55px;
border:solid 5px black;
}
.line{
height:20px;
}
.rarity{
font-size:20px;
color:white;
}
.Common{
color:#737373
;
}
.Magic{
color:green;
}
.Rare{
color:#4d4dff;
}
.Epic{
color:purple;
}
.Legendary{
color:#ff8c1a;
}
.m,.rarity,.Common,.Rare,.Epic,.Magic,.Legendary{
text-shadow: 1px 1px 0 #000,
-1px 1px 0 #000,
1px -1px 0 #000,
-1px -1px 0 #000,
0px 1px 0 #000,
0px -1px 0 #000,
-1px 0px 0 #000,
1px 0px 0 #000,
2px 2px 0 #000,
-2px 2px 0 #000,
2px -2px 0 #000,
-2px -2px 0 #000,
0px 2px 0 #000,
0px -2px 0 #000,
-2px 0px 0 #000,
2px 0px 0 #000,
1px 2px 0 #000,
-1px 2px 0 #000,
1px -2px 0 #000,
-1px -2px 0 #000,
2px 1px 0 #000,
-2px 1px 0 #000,
2px -1px 0 #000,
-2px -1px 0 #000;
font-size:16px;
font-weight:bold;
}
#STATS{
border-radius:5%;
min-height:50px;
border:solid 5px #111;
width:200px;
margin:0 auto;
background-color:#333;
}
@media screen and (max-width: 420px) {
.inventory{
width:100%;
}
}
#saved{
width:255px;
margin:0 auto;
}
.pics{
background-color:black;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment