30:T13db,viewof builder = { const value = { attributes: { traits:{}, gender:libmoji.genders[1], style:libmoji.styles[0], pose: 'body' }, pic: '' } const container = html`

` const updatePic = () => { value.pic = libmoji.buildPreviewUrl( value.attributes.pose, 3, value.attributes.gender[1], value.attributes.style[1], 0, Object.keys(value.attributes.traits).map(k=>[k, value.attributes.traits[k]]), value.attributes.outfit.id) container.querySelector('#output').innerHTML = '' // :( const im = new Image() im.width = 300 im.src = value.pic im.onload = () => { container.querySelector('#output').innerHTML = '' container.querySelector('#output').appendChild(im) } container.value = value container.dispatchEvent(new CustomEvent('input')) } const updateOutfits = () => { const brand = value.attributes.brand; const outfits = libmoji.getOutfits(brand); const outfitSel = select({ description: 'outfit', options: outfits.map( (o,i)=>({label:o.id, value:i})), value:0 }) outfitSel.oninput = (e)=>{ const i = e ? e.target.value : 0; const outfit = outfits[i] value.attributes.outfit = outfit updatePic() } outfitSel.oninput(); container.querySelector('#outfit-select').innerHTML = '' // :( container.querySelector('#outfit-select').appendChild(outfitSel) } const updateBrands = () => { const currentGender = value.attributes.gender; const brands = libmoji.getBrands(currentGender[0]) value.attributes.brand = brands[0]; const brandSel = select({ description:`Brands for ${currentGender[0]}`, options: brands.map( (b,i)=>({label:b.name, value:i})), value:0 }) brandSel.oninput = (e) => { const i = e ? e.target.value : 0; const brand = brands[i] value.attributes.brand = brand updateOutfits(); //updatePic(); } brandSel.oninput(); container.querySelector('#brand-select').innerHTML = '' // :( container.querySelector('#brand-select').appendChild(brandSel) } const updateTraits = () => { value.attributes.traits = {} // erase old values const currentGender = value.attributes.gender const currentStyle = value.attributes.style if(!currentGender[0]) debugger; const currentTraits = libmoji.getTraits(currentGender[0], currentStyle[0]); const traitSelects = currentTraits.map(t=> select({options:t.options.map(o=>o.value), description:t.key})) const traitContainer = html`

` traitSelects.map((ts,i)=>{ ts.style.border = '1px #ddd dotted' ts.oninput = (e) => { const trait = currentTraits[i] const val = e ? trait.options[+e.target.value].value : trait.options[0].value console.log(trait, val, e && e.target.value) value.attributes.traits[trait.key] = val; e ? updatePic() : null; } ts.oninput(); traitContainer.appendChild(ts); }) container.querySelector('#trait-selects').innerHTML = '' // :( container.querySelector('#trait-selects').appendChild(traitContainer) } const genderForm = radio({ options: libmoji.genders.map((g,i)=>({label:g[0], value:i})), value:1 }) genderForm.id = 'genderForm' //debugger; genderForm.oninput = (eX) => { //debugger ; const genderI = eX ? +eX.target.value : 1; console.log('genderI', genderI,'e stuff', eX && eX.target.value) value.attributes.gender = libmoji.genders[genderI]; if(!value.attributes.gender) debugger; //debugger; updateTraits(); updateBrands(); updatePic(); } genderForm.oninput(); const styleForm = radio({ options: libmoji.styles.map((s,i)=>({label:s[0], value:i})), value:0 }) styleForm.oninput = (e) => { const styleI = e ? +e.target.value : 0; value.attributes.style = libmoji.styles[styleI]; updateTraits(); updatePic(); } styleForm.oninput(); const posesForm = radio({ options: libmoji.poses, value:value.attributes.pose }) posesForm.oninput = (e) => { const pose = e ? e.target.value : 'body'; value.attributes.pose = pose; updatePic(); } posesForm.oninput(); const simpleSelects = html`

` simpleSelects.appendChild(genderForm) simpleSelects.appendChild(styleForm) simpleSelects.appendChild(posesForm) updateTraits() container.querySelector('#simple-selects').appendChild(simpleSelects) container.querySelector('#output').appendChild(html`sup`) const gender = select({options: libmoji.genders.map(g=>({label:g[0], value:g})),}) return container }31:[] 2e:{"title":"Bitmoji","cells":[{"id":0,"value":"md`# Bitmoji\n\nCreated with [libmoji by matthewnau](https://github.com/matthewnau/libmoji)\n\nWith this notebook, you can:\n\n1. Generate random Bitmojis\n2. Create your own Bitmoji\n3. Place your own, pre-generated Bitmoji in random comic templates\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":589,"value":"html`${md`## 1. Random Bitmojis examples`}

\n \n${[1,2,3,4,5,6,7,8,9,10,11,12].map(i=>`

`)}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":690,"value":"md`\n\\`\\`\\` javascript\nimport {randomBitmoji, img} from '@asg017/bitmoji'\n\nrandomBitmoji() // \"https://preview.bitmoji.com/avatar-builder-v3/preview/......\"\nrandomBitmoji({pose:\"head\", gender:\"female\"}) // can pass parameters, see definition for more info\nimg(ramdonBitmoji()) // img() is a helper func to create an HTML image\n\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":678,"value":"md`## 2. Build your own Bitmoji\n\nThis wont be permanent (will only generate a very long link with many params)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":426,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":738,"value":"JSON.stringify(builder.attributes, null, 2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":723,"value":"html`\n\nDirect link to the above Bitmoji\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":702,"value":"md`## 3. Your own Bitmoji in comics\n\nThis only works if you've previously made a Bitmoji through snapchat or something - see [here](https://github.com/matthewnau/libmoji/wiki/Finding-Your-ID) for info on \nhow to find your bitmoji's id - below is my (Alex Garcia) bitmoji`","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"viewof template = select({\n description: 'comic templates', \n options:libmoji.templates.map(t=>({label:t.template_id, value:t}))\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"img(libmoji.buildCpanelUrl(template.comic_id, myAvatarId, 3, 2))","pinned":true,"hidden":false,"mode":"ojs"},{"id":712,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":748,"value":"libmoji.traits","pinned":true,"hidden":false,"mode":"ojs"},{"id":746,"value":"bitmoji = (params = {}) => {\n const { pose, gender, style, traits, outfit, brand } = params;\n return libmoji.buildPreviewUrl(\n pose,\n 3,\n gender[1],\n style[1],\n 0,\n traits,\n outfit\n );\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"randomBitmoji= (params={})=>{\n const {\n pose,\n gender,\n style,\n traits,\n outfit,\n brand\n } = params\n const poseX = pose || libmoji.poses[libmoji.randInt(3)]\n let genderX = gender || libmoji.genders[libmoji.randInt(2)];\n let styleX = style || libmoji.styles[libmoji.randInt(3)];\n let traitsX = traits || libmoji.randTraits(libmoji.getTraits(genderX[0],styleX[0]));\n let brandX = brand || libmoji.randBrand(libmoji.getBrands(genderX[0]))\n let outfitX = outfit || libmoji.randOutfit(libmoji.getOutfits(brandX));\n return libmoji.buildPreviewUrl(poseX,3,genderX[1],styleX[1],0,traitsX,outfitX)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"img = (src) => html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"myAvatarId = '376175622_1-s1'","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"libmoji = require('https://bundle.run/libmoji@2.3.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"import { select, radio } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}