2a:null 2b:["$","title",null,{"children":"快乐小瓶子 | GnimOay | Observable"}] 30:T4fb,{ const d = html`

`; d.textContent = ''; Array.from({ length: 20 }, (v, i) => i).map(n => { const div = html`

Canvas ${n} `; const ctx = div.children[0].getContext('2d'); // ctx.fillRect(2, 2, 16, 16); // const whRatio = bottleImg.width / bottleImg.height; // const dstH = 30; // const dstDim = { x: 0, y: 0, w: dstH * whRatio, h: dstH }; // ctx.drawImage( // bottleImg, // 0, // 0, // bottleImg.width, // bottleImg.height, // dstDim.x, // dstDim.y, // dstDim.w, // dstDim.h // ); // ctx.drawImage(waterImg, 0, 0); ctx.canvas.onclick = evt => (div.children[1].innerText = 'clk'); ctx.canvas.ontouchstart = evt => { div.children[1].innerText = evt.touches[0].target.clientX; return false; }; ctx.canvas.ontouchmove = e => { div.children[1].innerText = e.touches[0].clientY + '\\' + e.touches[0].target.getClientRects()[0].top; }; ctx.canvas.onmousemove = evt => { ctx.fillRect(evt.layerX, evt.layerY, 10, 10); }; d.appendChild(div); }); return d; }31:Tab0,genBottle = (name, clr) => { //*********** ATTENTION ************* //////// //*********** ATTENTION ************* //////// //*********** ATTENTION ************* //////// const clip = DOM.uid("mask1"); // must use it in this way to make clip/mask working on iOS const grad = DOM.uid('grad1'); // same as above ///////:{// -----EVIL iOS !!!!!!-------////////// const tmpBtl = html`

`; tmpBtl.setAttribute('name', 'bottle' + wordList.indexOf(name)); const extractIndex = evt => parseInt(evt.currentTarget.name.substring(6)); //////////// Evt Reg /////////////////////////////////////// tmpBtl.querySelector('input').oninput = evt => { mutable wordList[parseInt(evt.currentTarget.name.substring(6))] = evt.target.value; }; const onMouseDown = evt => { states.downProgress = allProgress[name] || 0; states.downY = evt.touches[0].clientY; tmpBtl.children[1].innerText = states.downY; }; const onMouseMove = e => { e.preventDefault(); mutable offsetY = (states.downY - e.touches[0].clientY) * scrollAmplification; // mutable allProgress = { // ...allProgress, // [name]: clamp(states.downProgress + mutable offsetY / 2, 0, 100) // }; allProgress[name] = clamp( states.downProgress + mutable offsetY / 2, 0, 100 ); offsetY; //这一行十分重要, 需要引用到这个mutable值, 本block才会被update mutable bottleValues[extractIndex(e)] = allProgress[name]; }; // 这里也不能函数连写, 比如 tmpBtl.ontouchstart=tmpBtl.onmousedown ... 不知为何 tmpBtl.ontouchstart = onMouseDown; tmpBtl.onmousedown = onMouseDown; tmpBtl.ontouchmove = onMouseMove; tmpBtl.onmousemove = onMouseMove; //////////////////// return tmpBtl; }32:T696,BOTTLE_PATH = ` `33:[{"id":"425ee93d6944023a641b83dbc7481335bb5a6a14e93e40b09c3f0c976e7a6aaa2e039beaee5497ee96cb3b36872f0172d462eaac3984ad779fbdfba749024dc2","href":"https://static.observableusercontent.com/files/425ee93d6944023a641b83dbc7481335bb5a6a14e93e40b09c3f0c976e7a6aaa2e039beaee5497ee96cb3b36872f0172d462eaac3984ad779fbdfba749024dc2","name":"Path 2.svg","type":"image/svg+xml","lastModified":1582312065657.35,"size":504}] 2e:{"id":"4d6a90de7137e198","slug":"3","title":"快乐小瓶子","thumbnail":"053d1d7f3bfade6148334b90ae0074c554beed75c9a5ab00747252f76aa6d616","access_level":"public","create_time":"$D2020-02-19T01:58:46.800Z","update_time":"$D2020-06-26T18:37:23.502Z","view_time":null,"first_public_time":"$D2020-02-20T21:58:59.019Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"26d48fae205ffe62","login":"gnimoay","name":"GnimOay","avatar_url":"https://avatars-next.observableusercontent.com/79b9cc7dde40573c60d0ca1646cec2d280ec0c69bcd5262fb2336627858a40e3","tier":"starter_2024"},"version":1228,"publish_version":1228,"role":null,"authored":false,"authors":[{"type":"individual","id":"3ffbfa94b6a22199","login":"gnimoay","name":"GnimOay","avatar_url":"https://avatars-next.observableusercontent.com/79b9cc7dde40573c60d0ca1646cec2d280ec0c69bcd5262fb2336627858a40e3","tier":null}],"members":[{"type":"individual","id":"3ffbfa94b6a22199","login":"gnimoay","name":"GnimOay","avatar_url":"https://avatars-next.observableusercontent.com/79b9cc7dde40573c60d0ca1646cec2d280ec0c69bcd5262fb2336627858a40e3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"快乐小瓶子","cells":[{"id":0,"value":"//run this block with address=https://observablehq.com/@gnimoay/3#快乐小瓶子 to change browser tab name\n//Publish的时候, Observable 会给本页面初始html的head设置一个title, 该title即publish时当前显示的title\nsn`# ${title} \n### Resources \n- https://observablehq.com/@martajx/bird-species-in-catalonia-vs-bird-species-in-morocco/2\n- 统计工具 https://clicky.com/${note`test`}\n\n### Types\n- xxx瓶子\n- 我的能量电池\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":437,"value":"viewof bottleClr = colorPicker('#1a68c7c9')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":506,"value":"html`${genBottle('阳光', 88)}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":223,"value":"bottle = html`

${Array.from(Array(28)).map(\n (a, i) => `

\n 阳光\n`\n)}

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":246,"value":"(bottle, html2canvas(document.querySelector('.bottle-frame')))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":261,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1202,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":606,"value":"compilation = html`

${wordList.map(w =>\n genBottle(w, bottleClr)\n)}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":773,"value":"ifiOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1032,"value":"mutable wordList = [\n '🐶',\n '雨天',\n '游戏',\n '好吃的',\n '喜欢的人',\n '书籍',\n '晴天',\n '🐱',\n '森林',\n '大海',\n '旅行',\n '蓝天',\n '奶茶',\n '雪',\n '火锅',\n '炸鸡',\n '可乐🥤',\n '巧克力',\n '被夸奖',\n '看电影',\n '小孩子',\n '芝士',\n '见到旧友',\n '好好学习',\n '捡到钱💰'\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1067,"value":"mutable bottleValues = Array.from(wordList, v => 44)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":858,"value":"scrollAmplification = ifiOS ? 3 : 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":548,"value":"states={return{\ndownY:0,downProgress:0\n}}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":626,"value":"mutable offsetY = 0 // the key for updating, because it is MUTABLE and it was referenced in genBottle()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":805,"value":" allProgress = {\n return {};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":264,"value":"allStyle = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":202,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":554,"value":"function clamp(v, min, max) {\n return v < min ? min : v > max ? max : v;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":917,"value":"blockDim = {\n return { w: SETTINGS.imgW / SETTINGS.col, h: SETTINGS.imgH / SETTINGS.row };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":299,"value":"SETTINGS = {\n const preSetting = {\n whRatio: 3 / 2,\n row: 6,\n col: 5\n };\n return {\n ...preSetting,\n clr: bottleClr,\n imgH: preSetting.whRatio * width,\n imgW: width\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":300,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"params = new URLSearchParams(location.search)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1044,"value":"html`${[genBottle('s中文3'), genBottle('sd')]}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":122,"value":"mutable title = decodeURI(\n window.location.hash ? window.location.hash.substring(1) : '快乐小瓶子'\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":117,"value":"{\n window.onhashchange = () =>\n (mutable title = decodeURI(\n window.location.hash ? window.location.hash.substring(1) : '快乐小瓶子'\n ));\n yield '绑定onhashchange事件,给title改名';\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":460,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":160,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":240,"value":"html2canvas = require('html2canvas')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":167,"value":"import { sn, note } from '@j-f1/sidenotes'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":435,"value":"import { colorPicker } from \"@shaunlebron/color-picker\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":738,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2f:"$2e:body"