Other Clockwork Constructors - Construct your own items, factions, and plugins! (RELEASED)

Here's a picture of the initial design for the the Blueprint Constructor:

Spoiler

 

Look good!

 

Here's a demo of the off canvas push menu I just finished implementing (it took way longer than it should've taken to finish) + a pop up menu for some site info:

Spoiler

https://i.gyazo.com/50fc556434e6a7b17dc77c81cf5a9400.mp4

 

Apologies for the lack of updates, I haven't been feeling motivated to work on this as of late. I'm aiming for a new update/release between Friday and Sunday.

 

This is awesome!!!

 

Thanks!

 

A small progress update, I added functionality for one of the buttons: https://i.gyazo.com/cc82f3cda6056f2f12510b8a433e6c8f.mp4

This kind of functionality is actually a lot more tedious to implement than you'd think. Here's the button function's code for reference:

Code:

    function addItemRequirement() {
        var divFormGroup = document.createElement('div');
        divFormGroup.className = 'form-group';

        var divColLg12 = document.createElement('div');
        divColLg12.className = 'col-lg-12';
        divFormGroup.appendChild(divColLg12);

        var divRow = document.createElement('div');
        divRow.className = 'row';
        divColLg12.appendChild(divRow);

        var divColMd41 = document.createElement('div');
        divColMd41.className = 'col-md-4';
        divRow.appendChild(divColMd41);

        var itemIdInput = document.createElement('input');
        itemIdInput.className = 'form-control';
        itemIdInput.name = 'blueprintItemId[]'; // TODO This may have to be changed
        itemIdInput.placeholder = 'item_id';
        itemIdInput.type = 'text';
        divColMd41.appendChild(itemIdInput);



        var divColMd42 = document.createElement('div');
        divColMd42.className = 'col-md-4';
        divRow.appendChild(divColMd42);

        var itemQuantityInput = document.createElement('input');
        itemQuantityInput.className = 'form-control';
        itemQuantityInput.name = 'blueprintItemQuantity[]'; // TODO This may have to be changed
        itemQuantityInput.placeholder = 'Quantity of item that will be required.';
        itemQuantityInput.type = 'number';
        divColMd42.appendChild(itemQuantityInput);



        var divColMd43 = document.createElement('div');
        divColMd43.className = 'col-md-4';
        divRow.appendChild(divColMd43);

        var btnGroupJustified = document.createElement('div');
        btnGroupJustified.className = 'btn-group btn-group-justified';
        btnGroupJustified.role = 'group';
        btnGroupJustified.setAttribute('aria-label', '...');
        divColMd43.appendChild(btnGroupJustified);

        var btnGroup1 = document.createElement('div');
        btnGroup1.className = 'btn-group';
        btnGroup1.role = 'group';
        btnGroupJustified.appendChild(btnGroup1);

        var itemQuantityIncrementButton = document.createElement('button');
        itemQuantityIncrementButton.className = 'btn btn-default';
        itemQuantityIncrementButton.type = 'button';
        itemQuantityIncrementButton.setAttribute('aria-hidden', 'true');
        btnGroup1.appendChild(itemQuantityIncrementButton);

        var incrementIcon = document.createElement('span');
        incrementIcon.className = 'glyphicon glyphicon-plus';
        itemQuantityIncrementButton.appendChild(incrementIcon);

        var btnGroup2 = document.createElement('div');
        btnGroup2.className = 'btn-group';
        btnGroup2.role = 'group';
        btnGroupJustified.appendChild(btnGroup2);

        var itemQuantityDecrementButton = document.createElement('button');
        itemQuantityDecrementButton.className = 'btn btn-default';
        itemQuantityDecrementButton.type = 'button';
        itemQuantityDecrementButton.setAttribute('aria-hidden', 'true');
        btnGroup2.appendChild(itemQuantityDecrementButton);

        var decrementIcon = document.createElement('span');
        decrementIcon.className = 'glyphicon glyphicon-minus';
        itemQuantityDecrementButton.appendChild(decrementIcon);

        var btnGroup3 = document.createElement('div');
        btnGroup3.className = 'btn-group';
        btnGroup3.role = 'group';
        btnGroupJustified.appendChild(btnGroup3);

        var itemSelectorButton = document.createElement('button');
        itemSelectorButton.className = 'btn btn-default';
        itemSelectorButton.type = 'button';
        itemSelectorButton.setAttribute('aria-hidden', 'true');
        btnGroup3.appendChild(itemSelectorButton);

        var itemSelectorIcon = document.createElement('span');
        itemSelectorIcon.className = 'glyphicon glyphicon-search';
        itemSelectorButton.appendChild(itemSelectorIcon);

        var btnGroup4 = document.createElement('div');
        btnGroup4.className = 'btn-group';
        btnGroup4.role = 'group';
        btnGroupJustified.appendChild(btnGroup4);

        var itemRequirementDeleteButton = document.createElement('button');
        itemRequirementDeleteButton.className = 'btn btn-danger';
        itemRequirementDeleteButton.type = 'button';
        itemRequirementDeleteButton.setAttribute('aria-hidden', 'true');
        btnGroup4.appendChild(itemRequirementDeleteButton);

        var deleteIcon = document.createElement('span');
        deleteIcon.className = 'glyphicon glyphicon-remove';
        itemRequirementDeleteButton.appendChild(deleteIcon);



        var parent = document.getElementById('itemRequirements');
        parent.appendChild(divFormGroup);
    }

All of that is for adding a row of 2 inputs and 4 buttons.

 

I feel like you should probably be using a front end framework. A project like this is the perfect fit for one. As you add more stuff, it's just going to be harder to maintain.

 

Yeah, I want to work with frameworks for my future websites. I've only made/am making a couple of major websites (this one included) and I'm using them as a means to learning the "basics". After which I plan to use frameworks which should make a lot of the current struggles a lot less painful.

I feel like doings things the hard way at least once will give me an appreciation for all of the conveniences that frameworks can offer.

 

@duck I should've asked in my previous post, do you happen to know of any frameworks that would've been suitable to use with Clockwork Constructors? I think it'd be worthwhile to take a look if you had any in mind.

 

I don't have a particular one in mind. I barely even work on websites. Heard good things about Vue, though. The new Sandbox game uses it, too.

 

Aight, I'll take a look at Vue. Thanks!

 

More button functionality for the Blueprint Constructor: https://i.gyazo.com/2417774295679d21d58d9b43e871056b.mp4

Next up is the increment/decrement buttons then the copy/paste from item requirements button. Depending on how complex the copy/paste will be, it may be removed entirely or pushed back to a later release after the Blueprint Constructor's initial release.

 

I finished up most of the button functionality: https://i.gyazo.com/6e05ad21dfad32ea1fee27789785eb4e.mp4

There's still the copy/paste and item selector buttons to do.

 

A small progress update, but first, an acknowledgement: Work over the weekend that I had planned didn't happen (soz). Now as for the update, the form submission is now fully functional (data submitted by the user can be read properly by the system). The rest of the work lies within the backend for creating the blueprint file and then displaying the download summary. The final stretch!

Now here's some pics of the data being handled in action (you can see how the data entered in to the inputs correlates to what's displayed on the next page):

Spoiler

 

A quick update because I want everyone to know that this project isn't dead and is still being worked on; I've finished most of the back end code for generating the blueprint file. All that is left is to add the blueprint's data in to the actual Lua file in the right order and then put said Lua file in to a .zip file. After that there's just testing things.

 

Cool.

 

This will probably be the final update before release, I've gotten the file to properly generate with most of the data inputted (there's still items to take/give to implement). I've also setup a Trello board for the Clockwork Constructors project which can be found here: https://trello.com/b/MHgKejT6/clockwork-constructors

You can track my progress, planned features, etc. from that page. I'll still be posting updates here as well.

 

thank the lord

any ideas when it'll be complete?

 

Pretty soon, it's just a matter of me sitting down and taking the time to put some more effort in to it. I'm pretty much done with programming for today. Could be tomorrow, could be next week. I want to release it sooner rather than later so we'll see, soon(tm). ;P

edit: Also here's what the constructed blueprint file looks like so far (I've still got some placeholders to sort out but other than that there's not much left to do before release):

Code:

--[[
    This blueprint was constructed using http://www.ClockworkConstructors.com, a free
    and easy to use web application to make your own Clockwork items, factions,
    plugins, and more! Brought to you by http://www.JonathanDroogh.com, aka RJ.
--]]

local BLUEPRINT = Clockwork.crafting:New();

BLUEPRINT.category = "w";
BLUEPRINT.description = "y";
BLUEPRINT.model = "x";
BLUEPRINT.name = "z";
BLUEPRINT.takeCash = 8;
BLUEPRINT.giveCash = 5;

BLUEPRINT.requirements = {
["a"] = 1,
["b"] = 2,
["c"] = 3
}

takeItems

giveItems

-- Called just before crafting.
function BLUEPRINT:OnCraft(player) end;

-- Called just after crafting.
function BLUEPRINT:PostCraft(player) end;

-- Called when crafting is unsuccessful.
function BLUEPRINT:FailedCraft(player) end;

BLUEPRINT:Register();