Pen Settings



CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource


Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource


Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.






                const frame = new Frame("fit", 1024, 768, "#EEE", "#555");
frame.on("ready", ()=>{ // ES6 Arrow Function - similar to function(){}
    zog("ready from ZIM Frame"); // logs in console (F12 - choose console)

    // often need below - so consider it part of the template
    let stage = frame.stage;
    let stageW = frame.width;
    let stageH = frame.height;

    // REFERENCES for ZIM at
    // see for video and code tutorials
    // see for documentation
    // see for INTRO to ZIM
    // see 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(stageW, stageH, 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
    const socket = new Socket(zimSocketURL, "unlocklet");    
    socket.on("ready", () => {        
        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(stageW/2-2*spacing, stageH*.90, null, null, null, 10).alp(.2).pos(spacing,spacing,LEFT,BOTTOM);
        const center = new Rectangle(stageW/4, stageH*.90, null, null, null, 10).alp(.2).pos(stageW/2,spacing,LEFT,BOTTOM);
        const right =  new Rectangle(stageW/4-2*spacing, stageH*.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);,-150).addTo(stage);
        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(stage);
        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(stageW, stageH).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({
                const that = this;
                this.on("mousedown", ()=>{
                this.on("pressup", ()=>{
            get letter() {
                return this.label.text;
            set letter(s) {
                this.label.text = s;
                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({
            // we do not want the letters in their own tile 
            // so we will transfer all the letters to letters container
                // transferring with addTo() will automaticlly keep location
                // adjusting the x and y props to handle different coordinate systems
                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=>{
        // 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 =;
            let obj = {};
            obj["l_"+letter.num] = [letter.x, letter.y, letter.level];
        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]);
        // this controls whether we are allowed to drag the letters 
        // which depends on how many people are live at the moment
        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})
                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({
        }).sca(.5).pos(75,15,RIGHT).tap(() => {
            save.removeFrom(); // hide the save button from capture
            // could only capture letters container...
  , "unlocket_"+rand(999));
            save.addTo(); // bring back the save button
		// 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});
        stage.update(); // this is needed to show any changes
    }); // end socket ready

}); // end of ready