import zim from "https://zimjs.com/cdn/016/zim_socket2";
const frame = new Frame(FIT, 1024, 768, "#EEE", "#555", ready);
function ready() {
// REFERENCES for ZIM at http://zimjs.com
// see http://zimjs.com/learn.html for video and code tutorials
// see http://zimjs.com/docs.html for documentation
// see https://www.youtube.com/watch?v=pUjHFptXspM for INTRO to ZIM
// see https://www.youtube.com/watch?v=v7OT0YrDWiY for INTRO to CODE
// CODE HERE
// The app is to let users drag letters to spell out words and sentences
// there are three regions
// the left region has letters the user can always drag
// the center has letters that can be dragged if two people are here at the same time
// the right has letters that can be dragged if three people are here at the same time
// This encourages people to invite friends - and unlock letters as a reward
// we have a save button and the stage color does not count as a color
// so add in a background color
new Rectangle(W, H, light).addTo();
// we will use ZIM Socket for multiuser
// it takes a second or two to connect so show a Waiter
const waiter = new Waiter({corner:5}).show();
// zimSocketURL is a dynamic link to the ZIM Socket server in case it changes location
// it is stored in one of the js files we have imported
// then we pass in the id that we set up at https://zimjs.com/request.html
const socket = new Socket(zimSocketURL, "unlocklet");
socket.on("ready", () => {
waiter.hide();
let numPlayers;
new Label({text:"U N L O C K L E T", size:24}).pos(40,20)
new Label({text:"play with people to gain unlock powers", size:16}).alp(.6).loc(250, 27);
// set up the backing rectangles
const spacing = 20;
const left = new Rectangle(W/2-2*spacing, H*.90, null, null, null, 10).alp(.2).pos(spacing,spacing,LEFT,BOTTOM);
const center = new Rectangle(W/4, H*.90, null, null, null, 10).alp(.2).pos(W/2,spacing,LEFT,BOTTOM);
const right = new Rectangle(W/4-2*spacing, H*.90, null, null, null, 10).alp(.2).pos(spacing,spacing,RIGHT,BOTTOM);
left.dragRect = left;
left.letters = [];
left.backColor = green;
center.dragRect = new Rectangle(left.width+spacing+center.width, left.height, clear).loc(left).bot();
center.letters = [];
center.backColor = orange;
right.dragRect = new Rectangle(left.width+spacing*2+center.width+right.width, left.height, clear).loc(left).bot();
right.letters = [];
right.backColor = pink;
// make the locks to show the region is or is not locked
// these will be turned on if needed way down below in the code
// at the start we set their visible to false
const lock = right.lock = new Container(70,70)
new Rectangle(70,70,"#888",null,null,15).addTo(lock);
lock.center(right).mov(0,-150).addTo();
new Rectangle(lock.width*.6, lock.height*.6, clear, "#888", 12, 10).center(lock).mov(0,-45);
center.lock = lock.clone(true).center(center).mov(0,-150).addTo();
right.lock.visible = center.lock.visible = false;
// we will store the letters in an array that does not change its order
// and show them in a Container where the layer order does change
// due to when the user drags, the dragged letter comes to the top of its container
const lettersArray = [];
const letters = new Container(W, H).addTo();
// a custom Letter class
const size = 40;
class Letter extends Container {
constructor (letter="A", frontColor=lighter, backColor=dark, size=40) {
super(size+2,size+2); // must call the super constructor (Container)
this.mouseChildren = false; // treat the letter as a unit
const backing = new Rectangle(size+2,size+2,frontColor,null,null,5).addTo(this);
new Rectangle(size-2,size-2,backColor,null,null,4).center(this);
// could have built this with borderColor and borderWidth
// but CreateJS has a glitch in the shadow that adds a shadow to the border (sigh)
// so made a separate backing that can receive a shadow to avoid this
this.label = new Label({
text:letter,
size:26,
align:CENTER,
valign:CENTER,
color:frontColor
}).centerReg(this).cache();
const that = this;
this.on("mousedown", ()=>{
backing.sha();
});
this.on("pressup", ()=>{
backing.sha(-1);
})
}
get letter() {
return this.label.text;
}
set letter(s) {
this.label.text = s;
this.label.updateCache();
if (this.stage) this.stage.update();
}
}
// based on Scrabble - grabbed this from the Internet...
// let allLetters = "A-9, B-2, C-2, D-4, E-12, F-2, G-3, H-2, I-9, J-1, K-1, L-4, M-2, N-6, O-8, P-2, Q-1, R-6, S-4, T-6, U-4, V-2, W-2, X-1, Y-2, Z-1"
// just a little too many letters... so we have reduced a few
// also wanted to include , and - as letters so had to switch the delimeters to ^ and ~
let allLetters = "A~7^ B~2^ C~2^ D~3^ E~8^ F~2^ G~3^ H~2^ I~6^ J~1^ K~1^ L~4^ M~2^ N~6^ O~6^ P~2^ Q~1^ R~4^ S~4^ T~4^ U~4^ V~2^ W~2^ X~1^ Y~2^ Z~1^ .~2^ ,~2^ !~1^ -~2^ ?~1"
// Here is how we devide the letters - again, based on Scrabble points
let leftLetters = "AEIOULNSTR.!";
let centerLetters = "DGBCMPFHVWY,-";
let rightLetters = "KJXQZ?";
allLetters = allLetters.replace(/ /g,"");
const sets = allLetters.split("^");
// create letters for each box
// and store in letters array on each box
loop(sets, set=>{
let [letter,num] = set.split("~");
let box = null;
if (leftLetters.indexOf(letter) >= 0) box = left;
else if (centerLetters.indexOf(letter) >= 0) box = center;
else box = right;
loop(Number(num), ()=>{
box.letters.push(new Letter(letter, darker, box.backColor));
});
});
// create a temporary Tile of letters for each box using the box letters array
// we will store a num property on each letter as well
// to help identify the letter index in the lettersArray when we drag a letter
const startSpacing = 8;
let count = 0;
loop([left,center,right], box=>{
let cols = Math.round(box.width*.64/size);
let tile = new Tile({
obj:box.letters,
cols:cols,
rows:Math.ceil(box.letters.length/cols),
spacingH:startSpacing,
spacingV:startSpacing,
count:box.letters.length,
unique:true
}).pos(0,(box==right?270:20),CENTER,BOTTOM,box);
// we do not want the letters in their own tile
// so we will transfer all the letters to letters container
tile.loop(letter=>{
// transferring with addTo() will automaticlly keep location
// adjusting the x and y props to handle different coordinate systems
letter.addTo(letters).drag(box.dragRect);
lettersArray.push(letter);
letter.num = count++; // assigns then increases - so starts at 0
letter.on("mousedown", sendData);
letter.on("pressmove", sendData);
},true); // loop backwards when removing while looping
tile.dispose(); // do not need the tile
});
// There is a letters Container holding all the letters
// There is a lettersArray holding all the letters
// The letters have been dragged (with the default onTop:true)
// which changes the letter layer in the letters container
// To recreate the letter layers use the socket.getLatestTime(letter)
// Store the time and index of all letters that have changed in an array
// Sort the array from smallest time to biggest time
// then loop through the array and set the letter
// in the lettersArray at the index to the top()
// NOTE - we must use the lettersArray - not the letters
// The socket values for letter properties are on format: {l_0:[x,y,level]}
// The level property is only useful as the letter is being dragged
// it may become out of date as other letters are dragged
// So when recreating the layer levels, we cannot rely on the level
// Instead, we will rely on the time that the letter was last moved
let order = [];
loop(lettersArray, (letter,i)=>{
let d = socket.getLatestValue("l_"+i);
if (d) {
let t = socket.getLatestTime("l_"+i);
letter.loc(d[0], d[1], letters);
order.push({t, i});
}
});
order.sort((a, b) => (a.t > b.t) ? 1 : -1); // smallest to biggest
loop(order, data=>{
lettersArray[data.i].top();
});
// need to keep data for every letter so can make current state when someone arrives
// could store in history, but may as well keep individual letter data
// so these are kept as l_0, l_43, etc.
// the number matches the index number in the lettersArray
// We can't use the letters level index because this changes
// when drag brings the letter to the top
function sendData(e) {
let letter = e.target;
let obj = {};
obj["l_"+letter.num] = [letter.x, letter.y, letter.level];
socket.setProperties(obj);
}
socket.on("data", data=>{
loop(data, (p,d)=>{
let [g,n] = p.split("l_"); // grab the number
if (n >= 0) {
// set the x, y and layer
lettersArray[n].loc(d[0], d[1], letters, d[2]);
S.update();
}
});
});
// this controls whether we are allowed to drag the letters
// which depends on how many people are live at the moment
setDrag(true);
function setDrag(first) {
timeout(.1, () => {
numPlayers = socket.getProperties("id").length+1;
if (first && numPlayers==1) {
new Label({text:"W R I T E", size:70, bold:true})
.alp(0)
.center(left)
.mov(0,-150)
.animate({
wait:1,
props:{alpha:.5},
time:1,
rewind:true,
rewindWait:3,
call:target=>{
target.removeFrom();
}
});
}
loop([left,center,right], box=>{
loop(box.letters, letter=>{
if (box == center) {
if (numPlayers < 2) {
letter.mouseEnabled = false;
box.lock.visible = true;
} else {
letter.mouseEnabled = true;
box.lock.visible = false;
}
} else if (box == right) {
if (numPlayers < 3) {
letter.mouseEnabled = false;
box.lock.visible = true;
} else {
letter.mouseEnabled = true;
box.lock.visible = false;
}
}
});
});
});
}
socket.on("otherjoin", setDrag);
socket.on("otherleave", setDrag);
// Handle saving the image
const loader = new Loader();
const save = new Button({
label:"SAVE",
backgroundColor:tin,
rollBackgroundColor:blue,
corner:10
}).sca(.5).pos(75,15,RIGHT).tap(() => {
save.removeFrom(); // hide the save button from capture
// could only capture letters container...
loader.save(S, "unlocket_"+rand(999));
save.addTo(); // bring back the save button
});
// FOOTER
// make a custom footer - you will not need this normally - just use frame.madeWith()
// call remote script to make ZIM Foundation for Creative Coding icon
const icon = frame.makeIcon(lighter,faint,[lighter,lighter,lighter,lighter,lighter]).alp(.8).centerReg({add:false});
createIcon(null,null,null,icon).sca(.8).pos(82,33,RIGHT,BOTTOM);
S.update(); // this is needed to show any changes
}); // end socket ready
// DOCS FOR ITEMS USED
// https://zimjs.com/docs.html?item=Frame
// https://zimjs.com/docs.html?item=Container
// https://zimjs.com/docs.html?item=Rectangle
// https://zimjs.com/docs.html?item=Label
// https://zimjs.com/docs.html?item=Button
// https://zimjs.com/docs.html?item=Waiter
// https://zimjs.com/docs.html?item=Loader
// https://zimjs.com/docs.html?item=tap
// https://zimjs.com/docs.html?item=drag
// https://zimjs.com/docs.html?item=animate
// https://zimjs.com/docs.html?item=loop
// https://zimjs.com/docs.html?item=sha
// https://zimjs.com/docs.html?item=pos
// https://zimjs.com/docs.html?item=loc
// https://zimjs.com/docs.html?item=mov
// https://zimjs.com/docs.html?item=top
// https://zimjs.com/docs.html?item=bot
// https://zimjs.com/docs.html?item=alp
// https://zimjs.com/docs.html?item=sca
// https://zimjs.com/docs.html?item=addTo
// https://zimjs.com/docs.html?item=removeFrom
// https://zimjs.com/docs.html?item=centerReg
// https://zimjs.com/docs.html?item=center
// https://zimjs.com/docs.html?item=Tile
// https://zimjs.com/docs.html?item=timeout
// https://zimjs.com/docs.html?item=zog
} // end of ready
!
