cahir
Version:
flexible interface for method chaining using Proxy and tagged template literals
90 lines (88 loc) • 11.8 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mana Orb Test</title>
<link type="text/css" rel="stylesheet" href="./components/examples/fontawesome.css"></link>
<style>
@layer root {
*, *:after, *:before {
box-sizing: border-box;
}
body {
margin: 0;
color: dimgray;
font-family: sans-serif;
}
#main-wrapper {
display: flex;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
justify-content: center;
container: component-container;
container-type: inline-size;
& > div {
width: 33vw;
aspect-ratio: 1 / 1;
min-width: min(100vw, 320px);
max-width: 1024px;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
h2, div {
align-self: stretch;
}
h2 {
flex-basis: auto;
flex-grow: 0;
flex-shrink: 1;
text-align: center;
}
div {
flex-basis: auto;
flex-grow: 1;
flex-shrink: 1;
}
}
}
}
</style>
</head>
<body>
<h1>Testing Mana Orb Web Component</h1>
<!-- Importing the mana-orb script -->
<script type="module" src="./components/manaOrb/mana-orb.0.0.9.es.js"></script>
<script type="module" src="./components/simpleChat/simple-chat.0.0.9.es.js"></script>
<div id="main-wrapper">
<div>
<h2>mana-orb</h2>
<!--<mana-orb data-colors="background,transparent,stroke,orange" data-width-ratio="0.6" data-progress-right="0.5" data-aspect-ratio="1" data-href-texture="https://toshiverse.com/assets/img/texture.png" data-href-overlay="https://toshiverse.com/assets/img/glare.png" sham-attr="testtest" data-to="0,1" data-update-delay="20" data-stroke-width="2" data-progress="1"><path transform="translate(0.5 0.5) scale(1.2) translate(-0.5 -0.5)" d="m 0.27499635,0.93367413 c -0.0123887,-0.001649 -0.0217772,-0.005497 -0.0296958,-0.012088 -0.006329,-0.00527 -0.006329,-0.00527 -0.0643101,-0.005702 -0.0443177,-3.2907e-4 -0.0582296,-8.2529e-4 -0.0590352,-0.002135 -5.7743e-4,-9.2182e-4 -0.003086,-0.0334105 -0.005575,-0.0721625 -0.006407,-0.0999192 -0.003934,-0.0876875 -0.0184025,-0.0909684 -0.005065,-0.001165 -0.00625,-0.004659 -0.007844,-0.0232928 -7.2301e-4,-0.008415 -0.001704,-0.0175182 -0.002175,-0.0202307 -0.002246,-0.0128013 0.0267593,-0.0121462 0.031,6.7936e-4 0.002552,0.007735 0.004413,0.005984 0.003377,-0.003203 -0.001076,-0.009458 -0.002049,-0.008768 0.0167614,-0.0118259 0.0114033,-0.001843 0.0125317,-0.001796 0.0173511,5.3379e-4 0.002835,0.001407 0.00515,0.002135 0.00515,0.00165 0,-4.8526e-4 -0.001782,-0.01449 -0.003973,-0.0310958 -0.002183,-0.0166058 -0.007271,-0.0557731 -0.0113162,-0.0870363 -0.00735,-0.0568425 -0.00735,-0.0568425 -0.0133796,-0.0596775 -0.007475,-0.003494 -0.00844,-0.005785 -0.012625,-0.0297516 -0.003219,-0.018445 -0.003219,-0.018445 0.00285,-0.0236712 0.0109723,-0.009448 0.0210493,-0.009792 0.0246479,-8.2523e-4 0.001688,0.004222 0.001751,1.252e-4 8.928e-5,-0.005683 -0.002026,-0.00708 -1.5421e-4,-0.00889 0.0135366,-0.0130925 0.0156025,-0.004804 0.016957,-0.004562 0.0183789,0.0033 0.002112,0.0116804 0.002292,0.0121267 0.004805,0.0116269 0.0111261,-0.002183 0.0102763,-0.001213 0.009246,-0.010836 -0.001115,-0.0103991 -0.001099,-0.0104139 0.0121116,-0.0113359 0.0158868,-0.001116 0.0207588,4.8527e-4 0.0216241,0.007148 6.4542e-4,0.004964 8.48e-4,0.005193 0.002308,0.002621 0.003879,-0.006837 0.009704,-0.008114 0.0224101,-0.004896 0.0136372,0.003446 0.0119443,0.004708 0.0199877,-0.0149559 0.006462,-0.0158051 0.006462,-0.0158051 0.004837,-0.0628807 -0.00183,-0.0530274 -0.002262,-0.0500716 0.007255,-0.0496878 0.005598,2.2516e-4 0.0091,-6.7938e-4 0.0166177,-0.004318 0.008282,-0.003979 0.0109762,-0.00461 0.0206183,-0.004659 0.0197537,-1.6451e-4 0.0219405,0.002668 0.023624,0.0304552 0.001092,0.0179937 0.001067,0.0179742 0.0218573,0.0162904 0.0134597,-0.001116 0.021277,0.001165 0.021277,0.006076 0,0.002961 -0.003101,0.004708 -0.0181041,0.0101714 -0.0116734,0.00427 -0.0109282,0.0137524 8.7157e-4,0.0111078 0.002292,-5.3379e-4 0.007263,-0.001019 0.0110358,-0.001165 0.0155342,-4.7265e-4 0.0526225,-0.0661272 0.0870818,-0.15415489 0.009148,-0.0233656 0.009148,-0.0233656 0.009538,-0.0747139 3.18e-4,-0.0416746 7.5213e-4,-0.0517085 0.002308,-0.0532628 0.002182,-0.002183 0.0117331,-0.002621 0.0117331,-5.3379e-4 0,7.7643e-4 0.002513,0.001359 0.005568,0.001359 0.0388323,0 0.0649838,0.0249474 0.0571186,0.0544848 -0.001885,0.007065 -0.001885,0.007065 0.021665,0.007721 0.033142,9.2182e-4 0.0763941,0.0128547 0.0776065,0.0214148 4.5463e-4,0.003203 4.5463e-4,0.003203 -0.0180883,0.002232 -0.0265229,-0.001407 -0.0401648,0.001116 -0.0295349,0.005455 0.0144467,0.005901 0.0382348,0.024603 0.0382348,0.0300573 0,0.004562 -0.003659,0.005431 -0.0102911,0.002475 -0.0123471,-0.00546 -0.0213705,-0.006332 -0.0659943,-0.006372 -0.0564284,-4.901e-5 -0.053509,0.001019 -0.0495973,-0.0179112 0.005057,-0.024438 0.00362,-0.0270924 -0.0158962,-0.0293926 -0.013773,-0.001601 -0.0123047,0.0231714 0.003518,0.0593756 0.0316109,0.0723323 0.0553691,0.1173174 0.0820954,0.15544425 5.1438e-4,7.2791e-4 0.003699,5.8232e-4 0.007742,-3.9792e-4 0.007879,-0.001892 0.0141279,5.8232e-4 0.0350531,0.0140096 0.0153928,0.009856 0.0155679,0.003737 -0.001901,0.0662926 -0.00135,0.004853 -0.006258,0.0107292 -0.0141051,0.016926 -0.001876,0.001456 -0.002246,0.004804 -0.002262,0.0199299 -1.036e-5,0.009987 -4.1544e-4,0.0196387 -9.0296e-4,0.0214536 -0.001067,0.003979 -3.1432e-4,0.003882 0.0187102,-0.003009 0.0148762,-0.005382 0.0143839,-0.004857 0.0283013,-0.0300768 0.008973,-0.0162564 0.0211365,-0.0419367 0.0311367,-0.0657356 0.005488,-0.0130584 0.005488,-0.0130584 0.007224,-0.058558 9.5007e-4,-0.0250252 0.002175,-0.046207 0.002709,-0.0470757 0.001696,-0.002766 0.0115031,-0.001941 0.0124413,0.001019 4.4991e-4,0.001407 0.00446,0.004804 0.008911,0.007575 0.0209873,0.0129566 0.0288196,0.0279998 0.0234497,0.0450521 -0.003667,0.0116562 0.00311,0.0173046 0.0275805,0.0230064 0.0218691,0.00509 0.0181292,0.0103165 -0.0103102,0.0144028 -0.0109015,0.001553 -0.0109015,0.001553 -0.002207,0.009313 0.0133301,0.0118745 0.0113342,0.0138009 -0.0104256,0.0100592 -0.0299181,-0.005144 -0.0356586,-0.0106273 -0.0287277,-0.0274515 0.005143,-0.0124859 0.001099,-0.0240546 -0.008419,-0.0240546 -0.022827,0 0.0341384,0.13748212 0.0623706,0.15052607 0.011401,0.00527 0.0187998,0.0103313 0.020941,0.0143299 0.004138,0.007725 -0.0146343,0.0836729 -0.0219248,0.088725 -0.005929,0.004124 -0.006093,0.004853 -0.007742,0.0341773 -9.9719e-4,0.0177607 -6.6969e-4,0.0186973 0.006612,0.0187361 0.004939,2.767e-5 0.005669,0.001601 0.005386,0.0117241 -1.7463e-4,0.006352 2.7686e-4,0.008783 0.001735,0.009347 0.002811,0.001067 0.003612,-2.0575e-4 0.003635,-0.005813 2.921e-5,-0.006828 0.005904,-0.0124859 0.012969,-0.0124859 0.00157,0 0.002159,-0.001553 0.002237,-0.005843 2.7677e-4,-0.0148686 0.003455,-0.0572866 0.004366,-0.0581926 0.003478,-0.003494 0.0147718,4.1928e-4 0.0147718,0.005099 0,0.002281 0.001122,0.002572 0.009278,0.002572 0.0207463,1.796e-5 0.0244854,0.003688 0.0197907,0.0195514 -0.001633,0.005493 -0.002961,0.0104573 -0.002952,0.0110252 2.44e-6,5.8233e-4 0.005858,0.001019 0.0130106,0.001019 0.0134919,0 0.0259929,0.003203 0.0296472,0.007614 0.002748,0.0033 -8.166e-4,0.006134 -0.007773,0.006134 -0.007671,0 -0.007616,0.001407 1.7344e-4,0.00461 0.0151589,0.006236 0.008897,0.008755 -0.0238642,0.009604 -0.0279284,7.279e-4 -0.0298324,4.223e-5 -0.0282118,-0.0100931 8.7941e-4,-0.005484 8.7941e-4,-0.005484 -0.006242,-0.005484 -0.008362,0 -0.0108851,0.014592 -0.002858,0.0165185 0.003258,7.7642e-4 0.003432,0.001311 0.003329,0.0100211 -7.954e-5,0.006692 3.8835e-4,0.009254 0.00172,0.009405 0.001005,1.1355e-4 0.002544,2.6787e-4 0.003432,3.4357e-4 8.7941e-4,7.619e-5 0.002269,-0.002621 0.003094,-0.005984 0.00245,-0.0100645 0.00669,-0.0116658 0.0236232,-0.008943 0.0168816,0.002717 0.0174398,0.003154 0.0162659,0.0125393 -0.001021,0.008182 9.6578e-4,0.0100793 0.00303,0.002912 0.003667,-0.0127674 0.0344046,-0.0140096 0.0315724,-0.001262 -4.4756e-4,0.00199 -0.00139,0.0101852 -0.002104,0.0181586 -0.002159,0.0242487 -0.002693,0.0253892 -0.0126431,0.0267576 -0.008861,0.001213 -0.00753,-0.006993 -0.0134134,0.0829829 -0.006093,0.093191 0.004334,0.0804862 -0.0664301,0.0809482 -0.0591663,3.8626e-4 -0.0591663,3.8626e-4 -0.0646454,0.005076 -0.0220929,0.0189108 -0.0924942,0.0196387 -0.12430714,0.001311 -0.008183,-0.004708 -0.24529064,-0.005328 -0.25186723,-6.3083e-4 -0.0152327,0.0108456 -0.0605153,0.0166641 -0.0942669,0.0121122 z M 0.81852214,0.64478957 c 1.3638e-4,-0.005683 -7.5213e-4,-0.003979 -0.001712,0.0033 -5.4838e-4,0.004124 -4.1332e-4,0.00527 3.9935e-4,0.003446 6.6969e-4,-0.001505 0.001264,-0.004562 0.001311,-0.00676 z M 0.37279607,0.507009 C 0.37230108,0.498953 0.37190096,0.4897335 0.37190096,0.4865211 c 0,-0.005454 -4.0116e-4,-0.006076 -0.006093,-0.009414 -0.009829,-0.00576 -0.0109573,-0.0084 -0.0187692,-0.0438826 -0.007177,-0.0325857 -0.007177,-0.0325857 -0.004012,-0.0359485 0.003156,-0.003348 0.003156,-0.003348 -0.0106228,-0.002523 -0.0167724,0.001019 -0.0190801,-7.2789e-4 -0.0174382,-0.0130877 0.002505,-0.0188623 2.1788e-4,-0.0210557 -0.0164167,-0.0157614 -0.0186176,0.005925 0.002819,0.079079 0.0399959,0.1364718 0.006658,0.0102784 0.006658,0.0102784 0.0189796,0.0145822 0.0176676,0.006172 0.0163202,0.007051 0.0152798,-0.009958 z M 0.71684233,0.34417027 c 1.0066e-4,-0.008099 -0.001531,-0.0147326 -0.002819,-0.0114474 -0.002136,0.005454 -0.001296,0.0252824 8.7156e-4,0.0205558 0.001036,-0.002281 0.001915,-0.006367 0.001947,-0.009108 z m -0.42338666,-0.004222 c 5.362e-5,-0.003543 -5.2404e-4,-0.006828 -0.00128,-0.007299 -8.7157e-4,-5.338e-4 -0.001343,0.002814 -0.00128,0.009196 1.0718e-4,0.0111612 0.002387,0.009467 0.002559,-0.001892 z M 0.49812214,0.13059664 c -2.276e-5,-0.005294 -5.3384e-4,-0.0111659 -0.001138,-0.0130584 -6.8907e-4,-0.002135 -0.001115,0.002475 -0.001138,0.0123694 -2.599e-5,0.009997 3.9385e-4,0.0147958 0.001138,0.0130584 6.5022e-4,-0.001505 0.001162,-0.00708 0.001138,-0.0123694 z"/></mana-orb>-->
<mana-orb data-colors="background,transparent,stroke,orange" data-width-ratio="0.8" data-aspect-ratio="1" data-href-texture="https://toshiverse.com/assets/img/texture.png" data-href-overlay="https://toshiverse.com/assets/img/glare.png" data-update-delay="20" data-stroke-width="1" data-progress="1"></mana-orb>
</div>
<div>
<h2>simple-chat</h2>
<div><simple-chat></simple-chat></div>
<script>
!async function(){
await customElements.whenDefined("simple-chat");
const simpleChat = document.querySelector("simple-chat");
await simpleChat.ready();
simpleChat.onsend(function({files, text}){
this.addBubble({content: `${text}`, side:"right", name: "You"});
this.clear();
});
}()
</script>
</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>