magicbox.js's Introduction

MagicBox.js

About

MagicBox is a jQuery-UI plugin that helps you create UI for your web-games.

Note

( The code may be a little bit messy at this moment, but I will do my best to make the code as clean as possible and also re-structure it to follow the jQuery-UI "standard" widget concept )

Known bugs

inventory slots are not centered properly once the number of cols or rows exceeds 4.

TODO List:

widget.Inventory
- make panel draggable/droppable
- make panel not to colide with each other
- make items draggable/droppable
- stack items when item.type is equal
- switch item positions when item.type is not equal
- show item stats
- change the way of assigning icons to items (use css)
widget.RPG_text
widget.RPG_attributer
miniTemplate.js
- load template using Ajax
- read template and evaluate all variables

Features

Inventory

Items
- All items are draggable/droppable
- stats are shown, while hovering over item's icon.
- Items of same type can be stacked, different types will just switch their positon.
Panel
- Panel's colision detection won't let you place panels over each other.
- it's possible now to move around with entire inventory panel.
General
- Each widget has it's own template to generate the layout.

Example

$('#element').inventory({
	rows: 2,
	cols: 2,
	widgets: {
		panel: {
			template: "./js/templates/inventory_panel.jst"
		},
		slot: {
			template: "./js/templates/inventory_slot.jst"
		},
		item: {
			template: "./js/templates/inventory_item.jst"
		}
	}
});