Hi guys, here is the example and explanation of how I made this deck builder.
Since i can’t share the full build you will have to make it step by step (or take any code that works for you).
This is the site ( https://t3ufl15ch3r.wixsite.com/mysite ).
I’ll show you the 2 different pages I use (Main page to show the deck and the Factions pages to make it).
The Faction pages use the same setup with a different card pool (datasets). Let see how the Database (Card Collection “data”) looks.
Our database use this values:
*Card Name (display the card name)
*ID (to find the item since its unique)
*Card Amount (how many cards will you add to the deck)
*Picture (display the card)
*Gold (sort by gold)
*Card Level (merged 2 gold values to show on progressbar)
*Factions (set “true” the faction the card belongs)
*One-Six (set a value depending of the Card Level and Card Amount).
Now back to our Faction page, there are 2 galleries, left one is our Faction gallery and right one is our Deck on work.
Faction Gallery:
You need to create a Faction gallery and a dataset for each faction. The dataset will need to connect to our Database.
The Faction gallery will use his respective dataset (faction), load the picture and the ID as the title (we need the ID to identify the card)
Dataset:
The Faction Dataset will use a filter to only show the cards we want (Faction (true) and Card Amount (0) = cards that haven’t been picked).
On the other hand the Deck gallery uses his own dataset and his filter condition is only Card Amount (>0) = cards that had been picked. All the
Items on Factions pages use “on all pages” so you need to make duplicates for the main page.
The hard part is coming, coding. We used radiobuttons (0=1card, 1=2cards, 2=3cards) and switch (sort gold/name). For all faction pages (changing the values depending on the gallery name and dataset).
Code for Faction pages (some code is reduced and spaces to make it smaller)
import wixData from 'wix-data'; //import libraries (enable database)
$w.onReady(function () { //load page elements and code
if ($w('#sort1').checked) { //match the sort gold/name
sort(); //call sort fuction
}
$w("#sort1").onChange((event) => { //switch sort
sort();
});
$w("#gallery2").onItemClicked((event) => { //add a card
add(event);
});
$w("#gallery1").onItemClicked((event) => { //remove a card
remove(event);
});
});
export function sort(event) { //match the sort gold/name for the 2 galleries
if ($w('#sort1').checked) {
$w("#dataset1").setSort( wixData.sort()
.ascending("gold")
);
$w("#dataset3").setSort( wixData.sort()
.ascending("gold")
);
} else
$w("#dataset1").setSort( wixData.sort()
.ascending("title")
);
$w("#dataset3").setSort( wixData.sort()
.ascending("title")
);
}
export function remove (event) { //make a function so you can call it with remove();
wixData.query("Data") //load our database
.eq("_id", event.item.title) //match item clicked with his ID
.find()
.then((results) => {
if (results.items.length > 0) {
let item = results.items[0]; //duplicate the item -array-
item.cardamount = 0; //change duplicate card amount
wixData.update("Data", item); //replace the original
switch ((results.items[0].level)) { //set to 0 One-Six
case 10:
item.one = 0;
break;
case 32:
item.two = 0;
break;
case 54:
item.three = 0;
break;
case 76:
item.four = 0;
break;
case 98:
item.five = 0;
break;
case 100:
item.six = 0;
break;
default:
break;
}
$w('#dataset3').refresh();
$w('#dataset1').refresh();
} else {
// handle case where no matching items found
}
})
.catch((err) => {
let errorMsg = err;
});
}
//add event is the same as remove with 3 cases changing cardamount value 1-3
export function add (event) {
switch ($w("#radioGroup1").selectedIndex) { //card amount value depends on radio
case 0:
wixData.query("Data")
.eq("_id", event.item.title)
.find()
.then((results) => {
if (results.items.length > 0) {
let item = results.items[0];
item.cardamount = 1; // updated last name
wixData.update("Data", item);
switch ((results.items[0].level)) {
case 10:
item.one = 1;
break;
case 32:
item.two = 1;
break;
case 54:
item.three = 1;
break;
case 76:
item.four = 1;
break;
case 98:
item.five = 1;
break;
case 100:
item.six = 1;
break;
default:
break;
}
$w('#dataset3').refresh();
$w('#dataset1').refresh();
} else {
// handle case where no matching items found
}
})
.catch((err) => {
let errorMsg = err;
});
Break;
//here should go case 1 and 2 to add 2 cards and 3 cards (only need to change the value of number 1 on all the code
default:
break;
}
}
The main page shows the info, stats and cards of the deck you made (take a screenshot and share your deck). Also the main page uses “No header and Footer” because you don’t want some elements that use “on all pages”. This are the elements used:
*HorizontalMenu (to switch between factions and pick the cards)
*ProgressBars (to show cards value of the deck -since there is values from 0 to 10, I merge two on each bar-)
*SelectionTags (they remove when clicked)
*Two textbox for Deck name and description
*Switch (sort gold/name)
*Rating (rate your deck)
*Homepage (for mobile version)
*Deck gallery.
import wixData from 'wix-data'; //
$w.onReady(function () {
Sum_amount(); //Sum each One-Six column and set the max value for progressbars
if ($w('#sort2').checked) {
sort();
}
$w("#sort2").onChange((event) => {
sort();
});
$w("#tag").onChange( (event) => {
Tag();
} );
});
//same sort
export function sort(){
if ($w('#sort2').checked) {
$w("#dataset10").setSort( wixData.sort()
.ascending("gold")
);
} else
$w("#dataset10").setSort( wixData.sort()
.ascending("title")
);
}
//I used only 2 examples one/two, it’s the same only changing “one”, “bar”, “text”.
export function Sum_amount(){
let total = 0;
wixData.aggregate("Data")
.sum("one") //database column
.run()
.then( (results) => {
$w('#bar6').value = results.items[0].oneSum; //progress bar
$w('#text1').text = (results.items[0].oneSum).toString(); //show the sum
if(total < results.items[0].oneSum){ //if this one is the biggest will be set
total = results.items[0].oneSum;
$w('#bar1').targetValue = total;
$w('#bar2').targetValue = total;
$w('#bar3').targetValue = total;
$w('#bar4').targetValue = total;
$w('#bar5').targetValue = total;
$w('#bar5').targetValue = total;
$w('#bar6').targetValue = total;
}
} );
wixData.aggregate("Data")
.sum("two")
.run()
.then( (results) => {
$w('#bar5').value = results.items[0].twoSum;
$w('#text2').text = (results.items[0].twoSum).toString();
if(total < results.items[0].twoSum){
total = results.items[0].twoSum;
$w('#bar1').targetValue = total;
$w('#bar2').targetValue = total;
$w('#bar3').targetValue = total;
$w('#bar4').targetValue = total;
$w('#bar5').targetValue = total;
$w('#bar5').targetValue = total;
$w('#bar6').targetValue = total;
}
} );
}
//For every new tag you need to add a new case with 1+ label/value
export function Tag(){
let OP = $w("#tag").options; //copy original tags
let Indices = $w("#tag").selectedIndices; //find the tag clicked
switch ((OP.length)) {
case 0:
console.log("not possible");
break;
case 1: //when you clear all tags refill with the originals
$w("#tag").options = [
{ label: "OTK", value: "otk"},
{ label: "Value", value: "value"},
{ label: "Rush", value: "rush"},
{ label: "Combo", value: "combo"},
{ label: "Ramp", value: "ramp"},
{ label: "Tokens", value: "tokens"},
{ label: "Snowball", value: "snowball"},
{ label: "Meme", value: "meme"},
];
break;
case 2: //make a new array without the tag that had been selected
switch ((Indices[0])) {
case 0:
$w("#tag").options = [
{ label: OP[1].label, value: OP[1].value},
];
break;
case 1:
$w("#tag").options = [
{ label: OP[0].label, value: OP[0].value},
];
break;
default:
break;
}
break;
default:
break;
}
}
Pd: my code isn’t fully optimized and maybe I take the long way on some actions (did find a way to remove the value of tag array), but it works somehow so maybe this will be the final version of my Deck Builder.