Skip to content

Instantly share code, notes, and snippets.

@RobertSkalko
Last active August 26, 2016 20:10
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save RobertSkalko/c48ba3f4151c627f55d2b9c7986c080b to your computer and use it in GitHub Desktop.
Save RobertSkalko/c48ba3f4151c627f55d2b9c7986c080b to your computer and use it in GitHub Desktop.
Game proto REAL
<div oncontextmenu="return false;" id="main">
<div id="viewscreen">
<div class="col-xs-3">
<table class="inventory" id="inventory">
<tr>
<td id="i1" class="slot "></td>
<td id="i2" class="slot "></td>
<td id="i3" class="slot "></td>
<td id="i4" class="slot "></td>
</tr>
<tr>
<td id="i5" class="slot "></td>
<td id="i6" class="slot "></td>
<td id="i7" class="slot "></td>
<td id="i8" class="slot "></td>
</tr>
<tr>
<td id="i9" class="slot "></td>
<td id="i10" class="slot "></td>
<td id="i11" class="slot "></td>
<td id="i12" class="slot "></td>
</tr>
<tr>
<td id="i13" class="slot "></td>
<td id="i14" class="slot "></td>
<td id="i15" class="slot "></td>
<td id="i16" class="slot "></td>
</tr>
<tr>
<td id="i17" class="slot "></td>
<td id="i18" class="slot "></td>
<td id="i19" class="slot "></td>
<td id="i20" class="slot "></td>
</tr>
<tr>
<td id="i21" class="slot "></td>
<td id="i22" class="slot "></td>
<td id="i23" class="slot "></td>
<td id="i24" class="slot "></td>
</tr>
<tr>
<td id="i25" class="slot "></td>
<td id="i26" class="slot "></td>
<td id="i27" class="slot "></td>
<td id="i28" class="slot "></td>
</tr>
</table>
<div class="col-xs-3" id="shop"></div>
</div>
<div class="col-xs-6 col-xs-pull-1">
<div id="screen">
<div id="battle">
</div>
<div id="spells">
<table id="spellslots">
<tr>
<td class="spellslot inventory"></td>
<td class="spellslot inventory"></td>
<td class="spellslot inventory"></td>
<td class="spellslot inventory"></td>
<td class="spellslot inventory"></td>
<td class="spellslot inventory"></td>
<td class="spellslot inventory"></td>
<td class="spellslot inventory"></td>
<td class="spellslot inventory"></td>
<td class="spellslot inventory"></td>
<td class="spellslot inventory"></td>
<td class="spellslot inventory"></td>
<td class="spellslot inventory"></td>
<td class="spellslot inventory"></td>
<td class="spellslot inventory"></td>
<td class="spellslot inventory"></td>
</tr>
</table>
</div>
</div>
<div class="col-xs-6 col-xs-pull-1" id="box">
<div id="boxy">
<div class="col-xs-3" id="stats1"></div>
<div class="col-xs-3" id="stats2"></div>
</div>
</div>
</div>
<div class="col-xs-3">
<div class="text-center" id="info"></div>
<table id="character">
<tr>
<td id="talisman" class="characterslot slot1"></td>
<td id="head" class="characterslot slot1"></td>
<td id="ring" class="characterslot slot1"></td>
<td class="slot inventory"></td>
</tr>
<tr>
<td id="shoulder" class="characterslot slot1"></td>
<td id="chest" class="characterslot slot1"></td>
<td id="book" class="characterslot slot1"></td>
<td class="slot inventory"></td>
</tr>
<tr>
<td id="wrist" class="characterslot slot1"></td>
<td id="leg" class="characterslot slot1"></td>
<td id="glove" class="characterslot slot1"></td>
<td class="slot inventory"></td>
</tr>
<tr>
<td id="weapon" class="characterslot slot1"></td>
<td id="boot" class="characterslot slot1"></td>
<td id="necklace" class="characterslot slot1"></td>
<td class="slot inventory"></td>
</tr>
</table>
</div>
</div>
<div id="showdiv">
<button class="btn btn-block btn-success" id="equip">Equip</button>
<button class="btn btn-block btn-info" id="show">Create Item!</button>
<button class="btn btn-block btn-warning" id="sell">Sell</button>
<button class="btn btn-block btn-danger" id="close">Close</button>
</div>
<div id="showdiv1">
<button class="btn btn-block btn-success" id="unequip">Unequip</button>
<button class="btn btn-block btn-danger" id="close1">Close</button>
</div>
</div>
</div>
<!-- MAIN -->
var clickeditemid;
var affixnames = [
"Blindness",
"Bravery",
"Burning",
"Burrowing",
"Conjuration",
"Darkness",
"Dawn",
"Death",
"Deception",
"Defense",
"Deflection",
"Delerium",
"Desire",
"Despair",
"Destruction",
"Domination",
"Doom",
"Dragonslaying",
"Dreaming",
"Durability",
"Dusk",
"Evocation",
"Fire",
"Flame",
"Freezing",
"Fury",
"Glory",
"Growth",
"Healing",
"Heroism",
"Hope",
"Horror",
"Ice",
"Illusion",
"Impact",
"Imprisonment",
"Incineration",
"Insanity",
"Invulnerability",
"Invisibility",
"Justice",
"Life",
"Light",
"Lightlessness",
"Lightning",
"Love",
"Madness",
"Malice",
"Mercy",
"Midnight",
"Obedience",
"Peace",
"Petrification",
"Piercing",
"Planeswalking",
"Prophecy",
"Rage",
"Resurrection",
"Retribution",
"Seeking",
"Shadow",
"Shadowbinding",
"Shattering",
"Shieldbreaking",
"Shielding",
"Shocking",
"Siege",
"Sightblinding",
"Silence",
"Smiting",
"Solidity",
"Soul",
"Soulbinding",
"Soulcutting",
"Spellbreaking",
"Starlight",
"Stealth",
"Stonecutting",
"Striking",
"Sundering",
"the Angel",
"the Banshee",
"the Centaur",
"the Demon",
"the Desert",
"the Dragon",
"the Dwarf",
"the Elf",
"the Elements",
"the Fairie",
"the Gargoyle",
"the Genie",
"the Ghost",
"the Ghoul",
"the Giant",
"the Gnome",
"the Goblin",
"the God",
"the Gremlin",
"the Gryphon",
"the Homunculus",
"the Lich",
"the Mermaid",
"the Monster",
"the Ogre",
"the Orc",
"the Titan",
"the Troll",
"the Vampire",
"the Werebeast",
"the Werewolf",
"the Wight",
"Thought",
"Townsaving",
"Treachery",
"True Sight",
"Twilight",
"Valor",
"Vengeance",
"Void",
"Warding",
"Wayfinding",
"Weightlessness",
"Wind",
"Winter",
"Wisdom",
"Woundhealing",
];
var itemname = "";
var itemslotnames = ["Talisman", "Helmet", "Ring", "Shoulders", "Chestplate", "Book", "Bracelet", "Leggings", "Gloves", "Weapon", "Boots", "Necklace"];
var slotplayernames = ["talisman", "head", "ring", "shoulder", "chest", "book", "wrist", "leg", "glove", "weapon", "boot", "necklace"];
var itemslot = 0;
var generateditem = {};
var rarities = ["Common", "Magic", "Rare", "Epic", "Legendary"];
var affixnumber = "";
var itemrarity;
var currentitemid = "";
// affixes : name > starting stat > stat per level
var affixes = [
["Health", 100, 10],
["Mana", 100, 10],
["Dodge", 5, 0],
["Critical", 5, 0],
["Damage", 10, 1],
["MagicPow", 20, 2],
["ShadowDMG", 30, 3],
["NatureDMG", 30, 3],
["IceDMG", 30, 3],
["FireDMG", 30, 3],
["BloodDMG", 30, 3],
["StormDMG", 30, 3],
["HealPow", 20, 2],
]
var randomstat;
var usedstats = [];
var itempicturenum;
var iconnumbers = {
head: 5,
chest: 17,
leg: 7,
boot: 10,
ring: 11,
talisman: 23,
weapon: 56,
wrist: 13,
shoulder: 10,
book: 11,
glove: 11,
necklace: 7,
}
function displaystats() {
$("#stats1").empty();
$("#stats2").empty();
$("#stats1").append(
"<p>Health: " + Health + "</p>" +
"<p>Mana: " + Mana + "</p>" +
"<p>Critical: " + Critical + "</p>" +
"<p>Dodge: " + Dodge + "</p>" +
"<p>MagicPow: " + MagicPow + "</p>" +
"<p>Damage: " + Damage + "</p>" +
"<p>HealPow " + HealPow + "</p>"
)
$("#stats2").append(
"<p>IceDMG: " + IceDMG + "</p>" +
"<p>FireDMG: " + FireDMG + "</p>" +
"<p>ShadowDMG: " + ShadowDMG + "</p>" +
"<p>NatureDMG: " + NatureDMG + "</p>" +
"<p>StormDMG: " + StormDMG + "</p>" +
"<p>BloodDMG: " + BloodDMG + "</p>"
)
}
setInterval(displaystats, 1000);
setInterval(countplayerstats, 5000);
function countplayerstats() {
player.totalHealth = 0;
player.totalMana = 0;
player.totalDodge = 0;
player.totalMagicPow = 0;
player.totalDamage = 0;
player.totalIceDMG = 0;
player.totalFireDMG = 0;
player.totalStormDMG = 0;
player.totalCritical = 0;
player.totalBloodDMG = 0;
player.totalShadowDMG = 0;
player.totalNatureDMG = 0;
player.totalHealPow = 0;
for (var d = 0; d < slotplayernames.length; d++) {
if ($.isEmptyObject(player[slotplayernames[d]]) === false) {
for (var f = 0; f < affixes.length; f++) {
player["total" + affixes[f][0]] = player["total" + affixes[f][0]] + player[slotplayernames[d]]['totalstats'][affixes[f][0]];
}
}
} // for loops d f
Health = 100 + player.buffHealth + player.totalHealth - player.nerfHealth;
Mana = 100 + player.buffMana + player.totalMana - player.nerfMana;
Dodge = 5 + player.buffDodge + player.totalDodge - player.nerfDodge;
MagicPow = 10 + player.buffMagicPow + player.totalMagicPow - player.nerfMagicPow;
Damage = 10 + player.buffDamage + player.totalDamage - player.nerfDamage;
IceDMG = 0 + player.buffIceDMG + player.totalIceDMG - player.nerfIceDMG;
FireDMG = 0 + player.buffFireDMG + player.totalFireDMG - player.nerfFireDMG;
StormDMG = 0 + player.buffStormDMG + player.totalStormDMG - player.nerfStormDMG;
Critical = 1 + player.buffCritical + player.totalCritical - player.nerfCritical;
BloodDMG = 0 + player.buffBloodDMG + player.totalBloodDMG - player.nerfBloodDMG;
ShadowDMG = 0 + player.buffShadowDMG + player.totalShadowDMG - player.nerfShadowDMG;
NatureDMG = 0 + player.buffNatureDMG + player.totalNatureDMG - player.nerfNatureDMG;
HealPow = 5 + player.buffHealPow + player.totalHealPow - player.nerfHealPow;
} // count stats function
var finishedgenerating = true;
function createitem() {
finishedgenerating = false;
// choose rarity, slot and affix for item
var randomslot = Math.floor(Math.random() * 12) + 1;
var randomaffix = Math.floor(Math.random() * affixnames.length);
var affixnumber = Math.floor(Math.random() * rarities.length) + 1;
usedstats = [];
// now generate the item
function randomitem(slot) {
for (var i = 0; i < affixnumber; i++) {
if (i === 0) {
generateditem = {};
usedstats = [];
itemname = itemslotnames[slot - 1] + " of " + affixnames[randomaffix];
itemslot = slotplayernames[slot - 1];
itemrarity = rarities[affixnumber - 1];
generateditem.name = itemname;
generateditem.slot = itemslot;
generateditem.stats = {};
generateditem.rarity = itemrarity;
generateditem.value = affixnumber * player.level;
generateditem.upgrade = {};
generateditem.upgrade.level = 0;
generateditem.upgrade.stats = {};
generateditem.level = player.level;
generateditem.totalstats = {};
for (var g = 0; g < affixes.length; g++) {
generateditem.totalstats[affixes[g][0]] = 0;
}
itempicturenum = iconnumbers[itemslot];
var randompicturenum = Math.floor(Math.random() * itempicturenum) + 1;
generateditem.icon = itemslot.toString() + "-" + randompicturenum.toString();
};
randomstat = Math.floor(Math.random() * affixes.length);
while (usedstats.indexOf(randomstat) != -1) {
randomstat = Math.floor(Math.random() * affixes.length);
}
usedstats.push(randomstat);
var statnumber = Math.floor(Math.random() * (affixes[randomstat][1] + (affixes[randomstat][2] * player.level)));
var statmax = affixes[randomstat][1] + (affixes[randomstat][2] * player.level);
var statcolor = "Common";
if (statnumber > statmax / 10) {
statcolor = "Magic"
};
if (statnumber > statmax / 4) {
statcolor = "Rare"
};
if (statnumber > statmax / 2) {
statcolor = "Epic"
};
if (statnumber > statmax / 1.2) {
statcolor = "Legendary"
};
//we finalize the item stats here
generateditem.stats[affixes[randomstat][0]] = [statnumber, statmax, statcolor];
generateditem.totalstats[affixes[randomstat][0]] = statnumber;
}
var invcount, itemidcount, itemid, allclasses, itemclass;
// item done generating
for (var f = 1; f < 29; f++) {
invcount = "i" + f;
itemidcount = "#" + invcount;
itemid = itemidcount + "S";
if (jQuery.isEmptyObject(inventory[invcount])) {
allclasses = "item sprite " + generateditem.icon + " " + generateditem.rarity;
$(itemidcount).append("<img id='" + itemid + "'class='" + allclasses + "' '></img>");
f = 50;
inventory[invcount] = generateditem;
}
}
finishedgenerating = true;
}
// this choses item slot
randomitem(randomslot);
}
var inventory = {
i1: {},
i2: {},
i3: {},
i4: {},
i5: {},
i6: {},
i7: {},
i8: {},
i9: {},
i10: {},
i11: {},
i12: {},
i13: {},
i14: {},
i15: {},
i16: {},
i17: {},
i18: {},
i19: {},
i20: {},
i21: {},
i22: {},
i23: {},
i24: {},
i25: {},
i26: {},
i27: {},
}
var mouseX;
var mouseY;
$(document).mousemove(function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
//inventory options
$(".slot").mousedown(function(e) {
if (e.button == 2) {
clickeditemid = this.id;
$("#showdiv").css({
'top': mouseY,
'left': mouseX,
'display': 'block'
});
}
});
// to unequip items
$(".slot1").mousedown(function(e) {
if (e.button == 2) {
clickeditemid = this.id;
$("#showdiv1").css({
'top': mouseY,
'left': mouseX,
'display': 'block'
});
}
});
$("#unequip").click(function() {
for (var ff = 1; ff < 29; ff++) {
var invcount1 = "i" + ff;
var itemidcount1 = "#" + invcount1;
if (jQuery.isEmptyObject(inventory[invcount1])) {
$("#" + clickeditemid).children().appendTo(itemidcount1);
ff = 50;
inventory[invcount1] = player[clickeditemid];
player[clickeditemid] = {};
}
}
countplayerstats()
});
document.oncontextmenu = function() {
return false;
};
$("#close").click(function() {
$("#showdiv").css({
'display': 'none'
});
});
$("#close1").click(function() {
$("#showdiv1").css({
'display': 'none'
});
});
$("#sell").click(function() {
sell();
});
$("#equip").click(function() {
function equip() {
var equipslot = inventory[clickeditemid]["slot"];
if ($.isEmptyObject(player[equipslot])) {
$("#" + clickeditemid).children().appendTo("#" + equipslot);
$("#" + clickeditemid).empty();
// now to delete and transfer data
player[equipslot] = inventory[clickeditemid];
inventory[clickeditemid] = {};
}
}
equip();
countplayerstats();
});
$("#show").click(function() {
if (finishedgenerating === true) {
createitem()
}
});
//INVENTORY CLICK
$(".slot").click(function() {
clickeditemid = this.id; // this selects the item id so it can be used for other things in the menu
//console.log(inventory[clickeditemid]["slot"]);
$('td').children().removeClass("selected");
$("#" + clickeditemid).children().addClass("selected");
$("#info").empty();
for (var y = 0; y < affixes.length; y++) {
var statstuff = inventory[clickeditemid]["stats"][affixes[y][0]];
if (y === 0) {
var namerarity = inventory[clickeditemid]["rarity"];
var clickeditemname = inventory[clickeditemid]["name"];
$("#info").append("<p class='" + namerarity + "'>" + clickeditemname + "</p><div class='line'></div>");
}
if (statstuff != undefined) {
$("#info").append(
"<p>" + affixes[y][0] + ": <span class='" + statstuff[2] + "'>" + statstuff[0] + "/" + statstuff[1] + "</span></p>"
);
}
if (y === affixes.length - 1) {
$("#info").append("<p>Item Level: " + inventory[clickeditemid]["level"] + "</p>");
}
}
});
//CHARACTER CLICK
$(".slot1").click(function() {
clickeditemid = this.id; // this selects the item id so it can be used for other things in the menu
$('td').children().removeClass("selected");
$("#" + clickeditemid).children().addClass("selected");
$("#info").empty();
for (var y = 0; y < affixes.length; y++) {
var statstuff = player[clickeditemid]["stats"][affixes[y][0]];
if (y === 0) {
var namerarity = player[clickeditemid]["rarity"];
var clickeditemname = player[clickeditemid]["name"];
$("#info").append("<p class='" + namerarity + "'>" + clickeditemname + "</p><div class='line'></div>");
}
if (statstuff != undefined) {
$("#info").append(
"<p>" + affixes[y][0] + ": <span class='" + statstuff[2] + "'>" + statstuff[0] + "/" + statstuff[1] + "</span></p>"
);
}
if (y === affixes.length - 1) {
$("#info").append("<p>Item Level: " + player[clickeditemid]["level"] + "</p>");
}
}
});
function sell() {
var sellgold = inventory[clickeditemid]["value"];
$("#" + clickeditemid).empty();
inventory[clickeditemid] = {};
player.gold = player.gold + sellgold;
}
var buffhealth = 0;
var buffmana = 0;
var buffdodge = 0;
var buffmagicpower = 0;
var buffdamage = 0;
var bufficedamage = 0;
var bufffiredamage = 0;
var buffstormdamage = 0;
var buffblooddamage = 0;
var buffcritical = 0;
var buffshadowdamage = 0;
var buffnaturedamage = 0;
var iceboltcooldown, basicattackcooldown = false;
var player = {
level: 1,
gold: 0,
experience: 0,
head: {},
chest: {},
leg: {},
boot: {},
ring: {},
talisman: {},
necklace: {},
weapon: {},
wrist: {},
shoulder: {},
book: {},
glove: {},
totalHealth: 0,
totalMana: 0,
totalDodge: 0,
totalMagicPow: 0,
totalDamage: 0,
totalIceDMG: 0,
totalFireDMG: 0,
totalStormDMG: 0,
totalCritical: 0,
totalBloodDMG: 0,
totalShadowDMG: 0,
totalNatureDMG: 0,
totalHealPow: 0,
buffHealth: 0,
buffMana: 0,
buffDodge: 0,
buffMagicPow: 0,
buffDamage: 0,
buffIceDMG: 0,
buffFireDMG: 0,
buffStormDMG: 0,
buffCritical: 0,
buffBloodDMG: 0,
buffShadowDMG: 0,
buffNatureDMG: 0,
buffHealPow: 0,
nerfHealth: 0,
nerfMana: 0,
nerfDodge: 0,
nerfMagicPow: 0,
nerfDamage: 0,
nerfIceDMG: 0,
nerfFireDMG: 0,
nerfStormDMG: 0,
nerfCritical: 0,
nerfBloodDMG: 0,
nerfShadowDMG: 0,
nerfNatureDMG: 0,
nerfHealPow: 0,
}
var Health = 100 + player.buffHealth + player.totalHealth - player.nerfHealth;
var Mana = 100 + player.buffMana + player.totalMana - player.nerfMana;
var Dodge = 5 + player.buffDodge + player.totalDodge - player.nerfDodge;
var MagicPow = 10 + player.buffMagicPow + player.totalMagicPow - player.nerfMagicPow;
var Damage = 10 + player.buffDamage + player.totalDamage - player.nerfDamage;
var IceDMG = 0 + player.buffIceDMG + player.totalIceDMG - player.nerfIceDMG;
var FireDMG = 0 + player.buffFireDMG + player.totalFireDMG - player.nerfFireDMG;
var StormDMG = 0 + player.buffStormDMG + player.totalStormDMG - player.nerfStormDMG;
var Critical = 1 + player.buffCritical + player.totalCritical - player.nerfCritical;
var BloodDMG = 0 + player.buffBloodDMG + player.totalBloodDMG - player.nerfBloodDMG;
var ShadowDMG = 0 + player.buffShadowDMG + player.totalShadowDMG - player.nerfShadowDMG;
var NatureDMG = 0 + player.buffNatureDMG + player.totalNatureDMG - player.nerfNatureDMG;
var HealPow = 5 + player.buffHealPow + player.totalHealPow - player.nerfHealPow;
var playerdamage = false;
var critroll = 0;
function basicattack() {
if (basicattackcooldown === false) {
var basicattackcooldown = true;
function clearbasicattackcooldown() {
basicattackcooldown = false;
}
setTimeout(clearbasicattackcooldown(), 1000);
critical();
}
}
function critical(x) {
if (x == "icebolt") {
critroll = Math.floor(Math.random() * (100 - player.critical)) + 1;
if (critroll < player.critical) {
playerdamage = (player.damage + magicpower + icedamage) * 2;
} else {
playerdamage = (player.damage + magicpower + icedamage);
}
}
}
function icebolt() {
if (iceboltcooldown === false) {
iceboltcooldown = true;
critical("icebolt");
setTimeout(cleariceboltcooldown(), 150);
}
}
function reloadeverything(){
for (var f = 1; f < 29; f++) {
var invcount1 = "i" + f;
var itemidcount1 = "#" + invcount1;
var itemid1 = itemidcount1 + "S";
if (jQuery.isEmptyObject(inventory[invcount1])===false) {
var allclasses1 = "item sprite " + inventory[invcount1]["icon"] + " " + inventory[invcount1]['rarity'];
$(itemidcount1).append("<img id='" + itemid1 + "'class='" + allclasses1 + "' '></img>");
}
}
for (var x = 0; x <slotplayernames.length; x++) {
var itemslot1= slotplayernames[x];
var itemid1 = "#" + slotplayernames[x];
var newid1="#c"+x;
if (jQuery.isEmptyObject(player[itemslot1])===false) {
var allclasses1 = "item sprite " + player[itemslot1]["icon"] + " " + player[itemslot1]['rarity'];
$(itemid1).append("<img id='" +newid1+ "'class='" + allclasses1 + "' '></img>");
}
}
}
function save() {
var save = {
player1: player,
inventory1: inventory,
}
localStorage.setItem("save", JSON.stringify(save));
}
function load() {
var savegame = JSON.parse(localStorage.getItem("save"));
inventory = savegame.inventory1;
player = savegame.player1;
reloadeverything();
countplayerstats()
displaystats();
}
setInterval(save, 5000);
window.onload = function() {
load();
}
<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>
$maincolor: #8F5D38;
$shadow:orange;
$common:#ffffff;
$magic:#1eff00;
$rare:#0070dd;
$epic:#a335ee;
$legendary:#ff8000;
#main{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.Common {
border-color: $common;
color: $common;
}
.Magic {
border-color: $magic;
color: $magic;
}
.Rare {
border-color: $rare;
color: $rare;
}
.Epic {
border-color: $epic;
color: $epic;
}
.Legendary {
border-color: $legendary;
color: $legendary;
}
.selected {
outline: 5px solid green;
}
#showdiv1 {
border: solid 5px #222;
width: 100px;
height: auto;
position: absolute;
background-color: #24303E;
display: none;
}
#shop {
width: 222px;
height: 222px;
background-color: #24303E;
border: 5px solid #333;
}
.characterslot {
border-width: 1px;
border-style: solid;
border-color: #BF942C;
width: 53px;
height: 53px;
background-color: $maincolor;
display: fixed;
background: url("http://res.cloudinary.com/treborx555/image/upload/v1472064620/gui_xyicsn.png");
background-size: 53px;
}
#showdiv {
border: solid 5px #222;
width: 100px;
height: auto;
position: absolute;
background-color: #24303E;
display: none;
}
.line {
height: 18px;
}
p {
height: 11px;
font-weight: bold;
font-size: 14px;
color: white;
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-weight: bold;
}
#stats1{
width:20%;
height:100%;
padding-top:10px;
}
#stats2{
width:20%;
height:100%;
float:right;
text-align: right;
padding-top:10px;
}
#boxy {
width: 865px;
height: 216px;
background: url("http://res.cloudinary.com/treborx555/image/upload/v1472066255/texture_xhoaxc.png");
border: 10px solid #333;
margin-left: 38px;
}
#box {
margin-top: 5px;
width: 100%;
height: 150px;
}
#screen {
width: 865px;
height: 381px;
background-color: #24303E;
border: 10px solid #333;
position: block;
float: left;
background-size: 100px;
}
#inventory {
float: left;
}
#info {
height: 381px;
width: 222px;
background-color: #24303E;
border: 5px solid #333;
padding-left: 5px;
float: left;
margin-left: 83px;
border: 10px solid #333;
}
.slot {
border-width: 1px;
border-style: solid;
border-color: #BF942C;
width: 53px;
height: 53px;
background-color: $maincolor;
display: fixed;
background: url("http://res.cloudinary.com/treborx555/image/upload/v1472064620/gui_xyicsn.png");
background-size: 53px;
}
.spellslot {
@extend .slot;
}
.item {
max-width: 45px;
max-height: 45px;
border-width: 3.5px;
border-style: solid;
vertical-align: middle;
margin: 0 auto;
}
body {
padding: 10px;
background-color: #222;
width: 100%;
height: 100vh;
background: url("https://upload.wikimedia.org/wikipedia/commons/a/a2/San_Raphael_Grasslands_(4412326574).jpg");
background-size: 100vw;
max-height: 765px;
max-width: 1366px;
margin: 0 auto;
}
table {
background-color: #333;
border: 10px solid #333;
}
#battle {
width: 100%;
height: 300px;
}
#spellchild {
margin: 0 auto;
border: solid 2px #BF942C;
}
#character {
float: right;
}
.sprite {
background: url("http://res.cloudinary.com/treborx555/image/upload/v1472148365/spritesheet_2_oqummc.png");
display: block;
background-repeat: no-repeat;
}
.book-10 {
width: 48px;
height: 48px;
background-position: 0 0;
}
.book-11 {
width: 48px;
height: 48px;
background-position: -48px 0;
}
.book-1 {
width: 48px;
height: 48px;
background-position: -96px 0;
}
.book-2 {
width: 48px;
height: 48px;
background-position: -144px 0;
}
.book-3 {
width: 48px;
height: 48px;
background-position: -192px 0;
}
.book-4 {
width: 48px;
height: 48px;
background-position: -240px 0;
}
.book-5 {
width: 48px;
height: 48px;
background-position: -288px 0;
}
.book-6 {
width: 48px;
height: 48px;
background-position: -336px 0;
}
.book-7 {
width: 48px;
height: 48px;
background-position: -384px 0;
}
.book-8 {
width: 48px;
height: 48px;
background-position: -432px 0;
}
.book-9 {
width: 48px;
height: 48px;
background-position: -480px 0;
}
.boot-10 {
width: 48px;
height: 48px;
background-position: -528px 0;
}
.boot-1 {
width: 48px;
height: 48px;
background-position: -576px 0;
}
.boot-2 {
width: 48px;
height: 48px;
background-position: -624px 0;
}
.boot-3 {
width: 48px;
height: 48px;
background-position: 0 -48px;
}
.boot-4 {
width: 48px;
height: 48px;
background-position: -48px -48px;
}
.boot-5 {
width: 48px;
height: 48px;
background-position: -96px -48px;
}
.boot-6 {
width: 48px;
height: 48px;
background-position: -144px -48px;
}
.boot-7 {
width: 48px;
height: 48px;
background-position: -192px -48px;
}
.boot-8 {
width: 48px;
height: 48px;
background-position: -240px -48px;
}
.boot-9 {
width: 48px;
height: 48px;
background-position: -288px -48px;
}
.wrist-10 {
width: 48px;
height: 48px;
background-position: -336px -48px;
}
.wrist-11 {
width: 48px;
height: 48px;
background-position: -384px -48px;
}
.wrist-12 {
width: 48px;
height: 48px;
background-position: -432px -48px;
}
.wrist-13 {
width: 48px;
height: 48px;
background-position: -480px -48px;
}
.wrist-1 {
width: 48px;
height: 48px;
background-position: -528px -48px;
}
.wrist-2 {
width: 48px;
height: 48px;
background-position: -576px -48px;
}
.wrist-3 {
width: 48px;
height: 48px;
background-position: -624px -48px;
}
.wrist-4 {
width: 48px;
height: 48px;
background-position: 0 -96px;
}
.wrist-5 {
width: 48px;
height: 48px;
background-position: -48px -96px;
}
.wrist-6 {
width: 48px;
height: 48px;
background-position: -96px -96px;
}
.wrist-7 {
width: 48px;
height: 48px;
background-position: -144px -96px;
}
.wrist-8 {
width: 48px;
height: 48px;
background-position: -192px -96px;
}
.wrist-9 {
width: 48px;
height: 48px;
background-position: -240px -96px;
}
.chest-10 {
width: 48px;
height: 48px;
background-position: -288px -96px;
}
.chest-11 {
width: 48px;
height: 48px;
background-position: -336px -96px;
}
.chest-12 {
width: 48px;
height: 48px;
background-position: -384px -96px;
}
.chest-13 {
width: 48px;
height: 48px;
background-position: -432px -96px;
}
.chest-14 {
width: 48px;
height: 48px;
background-position: -480px -96px;
}
.chest-15 {
width: 48px;
height: 48px;
background-position: -528px -96px;
}
.chest-16 {
width: 48px;
height: 48px;
background-position: -576px -96px;
}
.chest-17 {
width: 48px;
height: 48px;
background-position: -624px -96px;
}
.chest-1 {
width: 48px;
height: 48px;
background-position: 0 -144px;
}
.chest-2 {
width: 48px;
height: 48px;
background-position: -48px -144px;
}
.chest-3 {
width: 48px;
height: 48px;
background-position: -96px -144px;
}
.chest-4 {
width: 48px;
height: 48px;
background-position: -144px -144px;
}
.chest-5 {
width: 48px;
height: 48px;
background-position: -192px -144px;
}
.chest-6 {
width: 48px;
height: 48px;
background-position: -240px -144px;
}
.chest-7 {
width: 48px;
height: 48px;
background-position: -288px -144px;
}
.chest-8 {
width: 48px;
height: 48px;
background-position: -336px -144px;
}
.chest-9 {
width: 48px;
height: 48px;
background-position: -384px -144px;
}
.glove-10 {
width: 48px;
height: 48px;
background-position: -432px -144px;
}
.glove-11 {
width: 48px;
height: 48px;
background-position: -480px -144px;
}
.glove-1 {
width: 48px;
height: 48px;
background-position: -528px -144px;
}
.glove-2 {
width: 48px;
height: 48px;
background-position: -576px -144px;
}
.glove-3 {
width: 48px;
height: 48px;
background-position: -624px -144px;
}
.glove-4 {
width: 48px;
height: 48px;
background-position: 0 -192px;
}
.glove-5 {
width: 48px;
height: 48px;
background-position: -48px -192px;
}
.glove-6 {
width: 48px;
height: 48px;
background-position: -96px -192px;
}
.glove-7 {
width: 48px;
height: 48px;
background-position: -144px -192px;
}
.glove-8 {
width: 48px;
height: 48px;
background-position: -192px -192px;
}
.glove-9 {
width: 48px;
height: 48px;
background-position: -240px -192px;
}
.head-1 {
width: 48px;
height: 48px;
background-position: -288px -192px;
}
.head-2 {
width: 48px;
height: 48px;
background-position: -336px -192px;
}
.head-3 {
width: 48px;
height: 48px;
background-position: -384px -192px;
}
.head-4 {
width: 48px;
height: 48px;
background-position: -432px -192px;
}
.head-5 {
width: 48px;
height: 48px;
background-position: -480px -192px;
}
.misc-10 {
width: 48px;
height: 48px;
background-position: -528px -192px;
}
.misc-11 {
width: 48px;
height: 48px;
background-position: -576px -192px;
}
.misc-12 {
width: 48px;
height: 48px;
background-position: -624px -192px;
}
.misc-13 {
width: 48px;
height: 48px;
background-position: 0 -240px;
}
.misc-14 {
width: 48px;
height: 48px;
background-position: -48px -240px;
}
.misc-15 {
width: 48px;
height: 48px;
background-position: -96px -240px;
}
.misc-16 {
width: 48px;
height: 48px;
background-position: -144px -240px;
}
.misc-17 {
width: 48px;
height: 48px;
background-position: -192px -240px;
}
.misc-18 {
width: 48px;
height: 48px;
background-position: -240px -240px;
}
.misc-19 {
width: 48px;
height: 48px;
background-position: -288px -240px;
}
.misc-1 {
width: 48px;
height: 48px;
background-position: -336px -240px;
}
.misc-20 {
width: 48px;
height: 48px;
background-position: -384px -240px;
}
.misc-21 {
width: 48px;
height: 48px;
background-position: -432px -240px;
}
.misc-22 {
width: 48px;
height: 48px;
background-position: -480px -240px;
}
.misc-2 {
width: 48px;
height: 48px;
background-position: -528px -240px;
}
.misc-3 {
width: 48px;
height: 48px;
background-position: -576px -240px;
}
.misc-4 {
width: 48px;
height: 48px;
background-position: -624px -240px;
}
.misc-5 {
width: 48px;
height: 48px;
background-position: 0 -288px;
}
.misc-6 {
width: 48px;
height: 48px;
background-position: -48px -288px;
}
.misc-7 {
width: 48px;
height: 48px;
background-position: -96px -288px;
}
.misc-8 {
width: 48px;
height: 48px;
background-position: -144px -288px;
}
.misc-9 {
width: 48px;
height: 48px;
background-position: -192px -288px;
}
.necklace-1 {
width: 48px;
height: 48px;
background-position: -240px -288px;
}
.necklace-2 {
width: 48px;
height: 48px;
background-position: -288px -288px;
}
.necklace-3 {
width: 48px;
height: 48px;
background-position: -336px -288px;
}
.necklace-4 {
width: 48px;
height: 48px;
background-position: -384px -288px;
}
.necklace-5 {
width: 48px;
height: 48px;
background-position: -432px -288px;
}
.necklace-6 {
width: 48px;
height: 48px;
background-position: -480px -288px;
}
.necklace-7 {
width: 48px;
height: 48px;
background-position: -528px -288px;
}
.leg-1 {
width: 48px;
height: 48px;
background-position: -576px -288px;
}
.leg-2 {
width: 48px;
height: 48px;
background-position: -624px -288px;
}
.leg-3 {
width: 48px;
height: 48px;
background-position: 0 -336px;
}
.leg-4 {
width: 48px;
height: 48px;
background-position: -48px -336px;
}
.leg-5 {
width: 48px;
height: 48px;
background-position: -96px -336px;
}
.leg-6 {
width: 48px;
height: 48px;
background-position: -144px -336px;
}
.leg-7 {
width: 48px;
height: 48px;
background-position: -192px -336px;
}
.ring-10 {
width: 48px;
height: 48px;
background-position: -240px -336px;
}
.ring-11 {
width: 48px;
height: 48px;
background-position: -288px -336px;
}
.ring-1 {
width: 48px;
height: 48px;
background-position: -336px -336px;
}
.ring-2 {
width: 48px;
height: 48px;
background-position: -384px -336px;
}
.ring-3 {
width: 48px;
height: 48px;
background-position: -432px -336px;
}
.ring-4 {
width: 48px;
height: 48px;
background-position: -480px -336px;
}
.ring-5 {
width: 48px;
height: 48px;
background-position: -528px -336px;
}
.ring-6 {
width: 48px;
height: 48px;
background-position: -576px -336px;
}
.ring-7 {
width: 48px;
height: 48px;
background-position: -624px -336px;
}
.ring-8 {
width: 48px;
height: 48px;
background-position: 0 -384px;
}
.ring-9 {
width: 48px;
height: 48px;
background-position: -48px -384px;
}
.shoulder-10 {
width: 48px;
height: 48px;
background-position: -96px -384px;
}
.shoulder-1 {
width: 48px;
height: 48px;
background-position: -144px -384px;
}
.shoulder-2 {
width: 48px;
height: 48px;
background-position: -192px -384px;
}
.shoulder-3 {
width: 48px;
height: 48px;
background-position: -240px -384px;
}
.shoulder-4 {
width: 48px;
height: 48px;
background-position: -288px -384px;
}
.shoulder-5 {
width: 48px;
height: 48px;
background-position: -336px -384px;
}
.shoulder-6 {
width: 48px;
height: 48px;
background-position: -384px -384px;
}
.shoulder-7 {
width: 48px;
height: 48px;
background-position: -432px -384px;
}
.shoulder-8 {
width: 48px;
height: 48px;
background-position: -480px -384px;
}
.shoulder-9 {
width: 48px;
height: 48px;
background-position: -528px -384px;
}
.talisman-10 {
width: 48px;
height: 48px;
background-position: -576px -384px;
}
.talisman-11 {
width: 48px;
height: 48px;
background-position: -624px -384px;
}
.talisman-12 {
width: 48px;
height: 48px;
background-position: 0 -432px;
}
.talisman-13 {
width: 48px;
height: 48px;
background-position: -48px -432px;
}
.talisman-14 {
width: 48px;
height: 48px;
background-position: -96px -432px;
}
.talisman-15 {
width: 48px;
height: 48px;
background-position: -144px -432px;
}
.talisman-16 {
width: 48px;
height: 48px;
background-position: -192px -432px;
}
.talisman-17 {
width: 48px;
height: 48px;
background-position: -240px -432px;
}
.talisman-18 {
width: 48px;
height: 48px;
background-position: -288px -432px;
}
.talisman-19 {
width: 48px;
height: 48px;
background-position: -336px -432px;
}
.talisman-1 {
width: 48px;
height: 48px;
background-position: -384px -432px;
}
.talisman-20 {
width: 48px;
height: 48px;
background-position: -432px -432px;
}
.talisman-21 {
width: 48px;
height: 48px;
background-position: -480px -432px;
}
.talisman-22 {
width: 48px;
height: 48px;
background-position: -528px -432px;
}
.talisman-23 {
width: 48px;
height: 48px;
background-position: -576px -432px;
}
.talisman-2 {
width: 48px;
height: 48px;
background-position: -624px -432px;
}
.talisman-3 {
width: 48px;
height: 48px;
background-position: 0 -480px;
}
.talisman-4 {
width: 48px;
height: 48px;
background-position: -48px -480px;
}
.talisman-5 {
width: 48px;
height: 48px;
background-position: -96px -480px;
}
.talisman-6 {
width: 48px;
height: 48px;
background-position: -144px -480px;
}
.talisman-7 {
width: 48px;
height: 48px;
background-position: -192px -480px;
}
.talisman-8 {
width: 48px;
height: 48px;
background-position: -240px -480px;
}
.talisman-9 {
width: 48px;
height: 48px;
background-position: -288px -480px;
}
.weapon-10 {
width: 48px;
height: 48px;
background-position: -336px -480px;
}
.weapon-11 {
width: 48px;
height: 48px;
background-position: -384px -480px;
}
.weapon-12 {
width: 48px;
height: 48px;
background-position: -432px -480px;
}
.weapon-13 {
width: 48px;
height: 48px;
background-position: -480px -480px;
}
.weapon-14 {
width: 48px;
height: 48px;
background-position: -528px -480px;
}
.weapon-15 {
width: 48px;
height: 48px;
background-position: -576px -480px;
}
.weapon-16 {
width: 48px;
height: 48px;
background-position: -624px -480px;
}
.weapon-17 {
width: 48px;
height: 48px;
background-position: 0 -528px;
}
.weapon-18 {
width: 48px;
height: 48px;
background-position: -48px -528px;
}
.weapon-19 {
width: 48px;
height: 48px;
background-position: -96px -528px;
}
.weapon-1 {
width: 48px;
height: 48px;
background-position: -144px -528px;
}
.weapon-20 {
width: 48px;
height: 48px;
background-position: -192px -528px;
}
.weapon-21 {
width: 48px;
height: 48px;
background-position: -240px -528px;
}
.weapon-22 {
width: 48px;
height: 48px;
background-position: -288px -528px;
}
.weapon-23 {
width: 48px;
height: 48px;
background-position: -336px -528px;
}
.weapon-24 {
width: 48px;
height: 48px;
background-position: -384px -528px;
}
.weapon-25 {
width: 48px;
height: 48px;
background-position: -432px -528px;
}
.weapon-26 {
width: 48px;
height: 48px;
background-position: -480px -528px;
}
.weapon-27 {
width: 48px;
height: 48px;
background-position: -528px -528px;
}
.weapon-28 {
width: 48px;
height: 48px;
background-position: -576px -528px;
}
.weapon-29 {
width: 48px;
height: 48px;
background-position: -624px -528px;
}
.weapon-2 {
width: 48px;
height: 48px;
background-position: 0 -576px;
}
.weapon-30 {
width: 48px;
height: 48px;
background-position: -48px -576px;
}
.weapon-31 {
width: 48px;
height: 48px;
background-position: -96px -576px;
}
.weapon-32 {
width: 48px;
height: 48px;
background-position: -144px -576px;
}
.weapon-33 {
width: 48px;
height: 48px;
background-position: -192px -576px;
}
.weapon-34 {
width: 48px;
height: 48px;
background-position: -240px -576px;
}
.weapon-35 {
width: 48px;
height: 48px;
background-position: -288px -576px;
}
.weapon-36 {
width: 48px;
height: 48px;
background-position: -336px -576px;
}
.weapon-37 {
width: 48px;
height: 48px;
background-position: -384px -576px;
}
.weapon-38 {
width: 48px;
height: 48px;
background-position: -432px -576px;
}
.weapon-39 {
width: 48px;
height: 48px;
background-position: -480px -576px;
}
.weapon-3 {
width: 48px;
height: 48px;
background-position: -528px -576px;
}
.weapon-40 {
width: 48px;
height: 48px;
background-position: -576px -576px;
}
.weapon-41 {
width: 48px;
height: 48px;
background-position: -624px -576px;
}
.weapon-42 {
width: 48px;
height: 48px;
background-position: 0 -624px;
}
.weapon-43 {
width: 48px;
height: 48px;
background-position: -48px -624px;
}
.weapon-44 {
width: 48px;
height: 48px;
background-position: -96px -624px;
}
.weapon-45 {
width: 48px;
height: 48px;
background-position: -144px -624px;
}
.weapon-46 {
width: 48px;
height: 48px;
background-position: -192px -624px;
}
.weapon-47 {
width: 48px;
height: 48px;
background-position: -240px -624px;
}
.weapon-48 {
width: 48px;
height: 48px;
background-position: -288px -624px;
}
.weapon-49 {
width: 48px;
height: 48px;
background-position: -336px -624px;
}
.weapon-4 {
width: 48px;
height: 48px;
background-position: -384px -624px;
}
.weapon-50 {
width: 48px;
height: 48px;
background-position: -432px -624px;
}
.weapon-51 {
width: 48px;
height: 48px;
background-position: -480px -624px;
}
.weapon-52 {
width: 48px;
height: 48px;
background-position: -528px -624px;
}
.weapon-53 {
width: 48px;
height: 48px;
background-position: -576px -624px;
}
.weapon-54 {
width: 48px;
height: 48px;
background-position: -624px -624px;
}
.weapon-55 {
width: 48px;
height: 48px;
background-position: -672px 0;
}
.weapon-56 {
width: 48px;
height: 48px;
background-position: -672px -48px;
}
.weapon-5 {
width: 48px;
height: 48px;
background-position: -672px -96px;
}
.weapon-6 {
width: 48px;
height: 48px;
background-position: -672px -144px;
}
.weapon-7 {
width: 48px;
height: 48px;
background-position: -672px -192px;
}
.weapon-8 {
width: 48px;
height: 48px;
background-position: -672px -240px;
}
.weapon-9 {
width: 48px;
height: 48px;
background-position: -672px -288px;
}
<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