From 568ef052f36563978b06a2bbec3531c7a78f9bdf Mon Sep 17 00:00:00 2001 From: im6 Date: Wed, 27 Sep 2023 22:49:37 -0400 Subject: [PATCH] add shake effect --- docs/bundle.js | 2 +- package.json | 2 ++ src/helper.spec.ts | 10 +++++++++- src/helper.ts | 18 ++++++++++++++++++ src/index.ts | 15 +++++++++++++-- src/reducer.ts | 14 +++++++++++--- src/style.less | 3 ++- yarn.lock | 10 ++++++++++ 8 files changed, 66 insertions(+), 8 deletions(-) diff --git a/docs/bundle.js b/docs/bundle.js index 29147e5..3ab02a1 100644 --- a/docs/bundle.js +++ b/docs/bundle.js @@ -1 +1 @@ -(()=>{"use strict";var e={511:(e,s,a)=>{a.d(s,{Z:()=>n});var r=a(81),o=a.n(r),t=a(645),i=a.n(t)()(o());i.push([e.id,"div, h1, h3, ul, li, a, p {\n font-family: 'Fredoka', sans-serif;\n}\n#app {\n margin: 40px auto 20px auto;\n width: 300px;\n}\nh1 {\n margin-top: 50px;\n text-align: center;\n}\na {\n text-align: center;\n display: block;\n}\nh3 {\n text-align: center;\n}\nh3#redText {\n color: #de7b7b;\n}\nh3#greenText {\n color: #63cb89;\n}\nul {\n padding: 0;\n margin: 6px 0;\n height: 50px;\n}\nli {\n width: 18%;\n height: 100%;\n font-size: 2.1em;\n border: 1px solid #d5d5d5;\n border-radius: 5px;\n text-align: center;\n display: inline-block;\n vertical-align: middle;\n}\n.ackDz li {\n border-bottom: 2px solid #a4e5a6;\n}\n.Ch0N3 {\n background-color: #98ddca;\n color: white;\n}\n.tfSR7 {\n background-color: #b9b9b9;\n color: white;\n}\n.BGPtm {\n background-color: #e3cc8a;\n color: white;\n}\n",""]),i.locals={currentRow:"ackDz",stateCorrect:"Ch0N3",stateWrong:"tfSR7",stateWrongSpot:"BGPtm"};const n=i},645:e=>{e.exports=function(e){var s=[];return s.toString=function(){return this.map((function(s){var a="",r=void 0!==s[5];return s[4]&&(a+="@supports (".concat(s[4],") {")),s[2]&&(a+="@media ".concat(s[2]," {")),r&&(a+="@layer".concat(s[5].length>0?" ".concat(s[5]):""," {")),a+=e(s),r&&(a+="}"),s[2]&&(a+="}"),s[4]&&(a+="}"),a})).join("")},s.i=function(e,a,r,o,t){"string"==typeof e&&(e=[[null,e,void 0]]);var i={};if(r)for(var n=0;n0?" ".concat(d[5]):""," {").concat(d[1],"}")),d[5]=t),a&&(d[2]?(d[1]="@media ".concat(d[2]," {").concat(d[1],"}"),d[2]=a):d[2]=a),o&&(d[4]?(d[1]="@supports (".concat(d[4],") {").concat(d[1],"}"),d[4]=o):d[4]="".concat(o)),s.push(d))}},s}},81:e=>{e.exports=function(e){return e[1]}},633:(e,s)=>{function a(e,s,a,r,o){return Array.from({length:s}).map((function(s,t){var i=document.createElement("div"),n=a[t%a.length];return i.style["background-color"]=n,i.style.width=r,i.style.height=o,i.style.position="absolute",i.style.willChange="transform, opacity",i.style.visibility="hidden",e.appendChild(i),i}))}function r(e,s,a,r){var o=e*(Math.PI/180),t=s*(Math.PI/180);return{x:0,y:0,z:0,wobble:10*r(),wobbleSpeed:.1+.1*r(),velocity:.5*a+r()*a,angle2D:-o+(.5*t-r()*t),angle3D:-Math.PI/4+r()*(Math.PI/2),tiltAngle:r()*Math.PI,tiltAngleSpeed:.1+.3*r()}}function o(e,s,a,r,o,t){var i=void 0;return new Promise((function(n){requestAnimationFrame((function l(u){i||(i=u);var d=u-i,c=i===u?0:(u-i)/o;s.slice(0,Math.ceil(d/t)).forEach((function(e){!function(e,s,a,r){e.physics.x+=Math.cos(e.physics.angle2D)*e.physics.velocity,e.physics.y+=Math.sin(e.physics.angle2D)*e.physics.velocity,e.physics.z+=Math.sin(e.physics.angle3D)*e.physics.velocity,e.physics.wobble+=e.physics.wobbleSpeed,r?e.physics.velocity*=r:e.physics.velocity-=e.physics.velocity*a,e.physics.y+=3,e.physics.tiltAngle+=e.physics.tiltAngleSpeed;var o=e.physics,t=o.x,i=o.y,n=o.z,l=o.tiltAngle,u=o.wobble,d="translate3d("+(t+10*Math.cos(u))+"px, "+(i+10*Math.sin(u))+"px, "+n+"px) rotate3d(1, 1, 1, "+l+"rad)";e.element.style.visibility="visible",e.element.style.transform=d,e.element.style.opacity=1-s}(e,c,a,r)})),u-i1&&void 0!==arguments[1]?arguments[1]:{},n=Object.assign({},t,i(s)),l=n.elementCount,u=n.colors,d=n.width,c=n.height,p=n.perspective,y=n.angle,m=n.spread,h=n.startVelocity,b=n.decay,g=n.dragFriction,f=n.duration,k=n.stagger,w=n.random;e.style.perspective=p;var v=a(e,l,u,d,c),z=v.map((function(e){return{element:e,physics:r(y,m,h,w)}}));return o(e,z,g,b,f,k)};var t={angle:90,spread:45,startVelocity:45,elementCount:50,width:"10px",height:"10px",perspective:"",colors:["#a864fd","#29cdff","#78ff44","#ff718d","#fdff6a"],duration:3e3,stagger:0,dragFriction:.1,random:Math.random};function i(e){return!e.stagger&&e.delay&&(e.stagger=e.delay),e}},379:e=>{var s=[];function a(e){for(var a=-1,r=0;r{var s={};e.exports=function(e,a){var r=function(e){if(void 0===s[e]){var a=document.querySelector(e);if(window.HTMLIFrameElement&&a instanceof window.HTMLIFrameElement)try{a=a.contentDocument.head}catch(e){a=null}s[e]=a}return s[e]}(e);if(!r)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");r.appendChild(a)}},216:e=>{e.exports=function(e){var s=document.createElement("style");return e.setAttributes(s,e.attributes),e.insert(s,e.options),s}},565:(e,s,a)=>{e.exports=function(e){var s=a.nc;s&&e.setAttribute("nonce",s)}},795:e=>{e.exports=function(e){var s=e.insertStyleElement(e);return{update:function(a){!function(e,s,a){var r="";a.supports&&(r+="@supports (".concat(a.supports,") {")),a.media&&(r+="@media ".concat(a.media," {"));var o=void 0!==a.layer;o&&(r+="@layer".concat(a.layer.length>0?" ".concat(a.layer):""," {")),r+=a.css,o&&(r+="}"),a.media&&(r+="}"),a.supports&&(r+="}");var t=a.sourceMap;t&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(t))))," */")),s.styleTagTransform(r,e,s.options)}(s,e,a)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(s)}}}},589:e=>{e.exports=function(e,s){if(s.styleSheet)s.styleSheet.cssText=e;else{for(;s.firstChild;)s.removeChild(s.firstChild);s.appendChild(document.createTextNode(e))}}}},s={};function a(r){var o=s[r];if(void 0!==o)return o.exports;var t=s[r]={id:r,exports:{}};return e[r](t,t.exports,a),t.exports}a.n=e=>{var s=e&&e.__esModule?()=>e.default:()=>e;return a.d(s,{a:s}),s},a.d=(e,s)=>{for(var r in s)a.o(s,r)&&!a.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:s[r]})},a.o=(e,s)=>Object.prototype.hasOwnProperty.call(e,s),a.nc=void 0,(()=>{var e=a(379),s=a.n(e),r=a(795),o=a.n(r),t=a(569),i=a.n(t),n=a(565),l=a.n(n),u=a(216),d=a.n(u),c=a(589),p=a.n(c),y=a(511),m={};m.styleTagTransform=p(),m.setAttributes=l(),m.insert=i().bind(null,"head"),m.domAPI=o(),m.insertStyleElement=d(),s()(y.Z,m);const h=y.Z&&y.Z.locals?y.Z.locals:void 0;var b,g;!function(e){e[e.Correct=0]="Correct",e[e.WrongSpot=1]="WrongSpot",e[e.Wrong=2]="Wrong",e[e.Undecided=3]="Undecided"}(b||(b={})),function(e){e.Pending="pending",e.Error="error",e.Fail="fail",e.Success="success"}(g||(g={}));var f=function(e,s){return f=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,s){e.__proto__=s}||function(e,s){for(var a in s)Object.prototype.hasOwnProperty.call(s,a)&&(e[a]=s[a])},f(e,s)};function k(e,s){if("function"!=typeof s&&null!==s)throw new TypeError("Class extends value "+String(s)+" is not a constructor or null");function a(){this.constructor=e}f(e,s),e.prototype=null===s?Object.create(s):(a.prototype=s.prototype,new a)}function w(e,s){var a,r,o,t,i={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return t={next:n(0),throw:n(1),return:n(2)},"function"==typeof Symbol&&(t[Symbol.iterator]=function(){return this}),t;function n(t){return function(n){return function(t){if(a)throw new TypeError("Generator is already executing.");for(;i;)try{if(a=1,r&&(o=2&t[0]?r.return:t[0]?r.throw||((o=r.return)&&o.call(r),0):r.next)&&!(o=o.call(r,t[1])).done)return o;switch(r=0,o&&(t=[2&t[0],o.value]),t[0]){case 0:case 1:o=t;break;case 4:return i.label++,{value:t[1],done:!1};case 5:i.label++,r=t[1],t=[0];continue;case 7:t=i.ops.pop(),i.trys.pop();continue;default:if(!((o=(o=i.trys).length>0&&o[o.length-1])||6!==t[0]&&2!==t[0])){i=0;continue}if(3===t[0]&&(!o||t[1]>o[0]&&t[1]=e.length&&(e=void 0),{value:e&&e[r++],done:!e}}};throw new TypeError(s?"Object is not iterable.":"Symbol.iterator is not defined.")}function z(e,s){var a="function"==typeof Symbol&&e[Symbol.iterator];if(!a)return e;var r,o,t=a.call(e),i=[];try{for(;(void 0===s||s-- >0)&&!(r=t.next()).done;)i.push(r.value)}catch(e){o={error:e}}finally{try{r&&!r.done&&(a=t.return)&&a.call(t)}finally{if(o)throw o.error}}return i}function x(e,s,a){if(a||2===arguments.length)for(var r,o=0,t=s.length;o1||n(e,s)}))})}function n(e,s){try{(a=o[e](s)).value instanceof j?Promise.resolve(a.value.v).then(l,u):d(t[0][2],a)}catch(e){d(t[0][3],e)}var a}function l(e){n("next",e)}function u(e){n("throw",e)}function d(e,s){e(s),t.shift(),t.length&&n(t[0][0],t[0][1])}}Object.create,Object.create;var S=function(e){return e&&"number"==typeof e.length&&"function"!=typeof e};function _(e){return"function"==typeof e}var T,I=((T=function(e){return function(s){e(this),this.message=s?s.length+" errors occurred during unsubscription:\n"+s.map((function(e,s){return s+1+") "+e.toString()})).join("\n "):"",this.name="UnsubscriptionError",this.errors=s}}((function(e){Error.call(e),e.stack=(new Error).stack}))).prototype=Object.create(Error.prototype),T.prototype.constructor=T,T);function E(e,s){if(e){var a=e.indexOf(s);0<=a&&e.splice(a,1)}}var A=function(){function e(e){this.initialTeardown=e,this.closed=!1,this._parentage=null,this._finalizers=null}var s;return e.prototype.unsubscribe=function(){var e,s,a,r,o;if(!this.closed){this.closed=!0;var t=this._parentage;if(t)if(this._parentage=null,Array.isArray(t))try{for(var i=v(t),n=i.next();!n.done;n=i.next())n.value.remove(this)}catch(s){e={error:s}}finally{try{n&&!n.done&&(s=i.return)&&s.call(i)}finally{if(e)throw e.error}}else t.remove(this);var l=this.initialTeardown;if(_(l))try{l()}catch(e){o=e instanceof I?e.errors:[e]}var u=this._finalizers;if(u){this._finalizers=null;try{for(var d=v(u),c=d.next();!c.done;c=d.next()){var p=c.value;try{M(p)}catch(e){o=null!=o?o:[],e instanceof I?o=x(x([],z(o)),z(e.errors)):o.push(e)}}}catch(e){a={error:e}}finally{try{c&&!c.done&&(r=d.return)&&r.call(d)}finally{if(a)throw a.error}}}if(o)throw new I(o)}},e.prototype.add=function(s){var a;if(s&&s!==this)if(this.closed)M(s);else{if(s instanceof e){if(s.closed||s._hasParent(this))return;s._addParent(this)}(this._finalizers=null!==(a=this._finalizers)&&void 0!==a?a:[]).push(s)}},e.prototype._hasParent=function(e){var s=this._parentage;return s===e||Array.isArray(s)&&s.includes(e)},e.prototype._addParent=function(e){var s=this._parentage;this._parentage=Array.isArray(s)?(s.push(e),s):s?[s,e]:e},e.prototype._removeParent=function(e){var s=this._parentage;s===e?this._parentage=null:Array.isArray(s)&&E(s,e)},e.prototype.remove=function(s){var a=this._finalizers;a&&E(a,s),s instanceof e&&s._removeParent(this)},e.EMPTY=((s=new e).closed=!0,s),e}();function P(e){return e instanceof A||e&&"closed"in e&&_(e.remove)&&_(e.add)&&_(e.unsubscribe)}function M(e){_(e)?e():e.unsubscribe()}A.EMPTY;var C=null,O=null,L=void 0,F=!1,W=!1,R={setTimeout:function(e,s){for(var a=[],r=2;r=2,!0))}((qe=Math.floor(Math.random()*ke.length),Se=ke[qe],je={exposeAnswer:function(){return Se},calculateState:function(e){return e.split("").map((function(e,s){return Se[s]===e?b.Correct:Se.includes(e)?b.WrongSpot:b.Wrong}))}},function(e,s){var a,r,o=e.data[e.currentIndex];if("enter"===s){if(5===o.length){if(r=o,we.has(r)){var t=je.exposeAnswer(),i=ze(ze([],e.state,!0),[je.calculateState(o)],!1);return o===t?ve(ve({},e),{state:i,gameStatus:g.Success,bottomMessage:"Congrat! You did it!"}):5===e.currentIndex?ve(ve({},e),{state:i,gameStatus:g.Fail,bottomMessage:"The Answer is [".concat(t.toUpperCase(),"]")}):ve(ve({},e),{currentIndex:e.currentIndex+1,data:ze(ze([],e.data,!0),[""],!1),state:i})}return ve(ve({},e),{gameStatus:g.Error})}return e}return"backspace"===s?o.length>0?((a=ze([],e.data,!0))[e.currentIndex]=o.slice(0,-1),ve(ve({},e),{data:a,gameStatus:g.Pending})):e:o.length<5?((a=ze([],e.data,!0))[e.currentIndex]+=s,ve(ve({},e),{data:a})):e}),{currentIndex:0,data:[""],state:[],gameStatus:g.Pending,bottomMessage:null})).subscribe((function(e){var s,a;s=Ie,(a=e).gameStatus===g.Success||a.gameStatus===g.Fail?_e(s,a.state[a.currentIndex],a.currentIndex):""===a.data[a.currentIndex]&&a.currentIndex>0&&_e(s,a.state[a.currentIndex-1],a.currentIndex-1),function(e,s){for(var a=e.children[s.currentIndex].children,r=s.data[s.currentIndex],o=0;o{"use strict";var e={511:(e,s,a)=>{a.d(s,{Z:()=>i});var r=a(81),o=a.n(r),t=a(645),n=a.n(t)()(o());n.push([e.id,"div, h1, h3, ul, li, a, p {\n font-family: 'Fredoka', sans-serif;\n}\n#app {\n margin: 40px auto 20px auto;\n width: 300px;\n}\nh1 {\n margin-top: 50px;\n text-align: center;\n}\na {\n text-align: center;\n display: block;\n}\nh3 {\n text-align: center;\n}\nh3#redText {\n color: #de7b7b;\n}\nh3#greenText {\n color: #63cb89;\n}\nul {\n padding: 0;\n margin: 6px 0;\n height: 50px;\n}\nli {\n width: 18%;\n height: 100%;\n font-size: 2.1em;\n border: 1px solid #d5d5d5;\n border-radius: 5px;\n display: inline-block;\n vertical-align: middle;\n text-align: center;\n text-transform: uppercase;\n}\n.ackDz li {\n border-bottom: 2px solid #a4e5a6;\n}\n.Ch0N3 {\n background-color: #98ddca;\n color: white;\n}\n.tfSR7 {\n background-color: #b9b9b9;\n color: white;\n}\n.BGPtm {\n background-color: #e3cc8a;\n color: white;\n}\n",""]),n.locals={currentRow:"ackDz",stateCorrect:"Ch0N3",stateWrong:"tfSR7",stateWrongSpot:"BGPtm"};const i=n},645:e=>{e.exports=function(e){var s=[];return s.toString=function(){return this.map((function(s){var a="",r=void 0!==s[5];return s[4]&&(a+="@supports (".concat(s[4],") {")),s[2]&&(a+="@media ".concat(s[2]," {")),r&&(a+="@layer".concat(s[5].length>0?" ".concat(s[5]):""," {")),a+=e(s),r&&(a+="}"),s[2]&&(a+="}"),s[4]&&(a+="}"),a})).join("")},s.i=function(e,a,r,o,t){"string"==typeof e&&(e=[[null,e,void 0]]);var n={};if(r)for(var i=0;i0?" ".concat(c[5]):""," {").concat(c[1],"}")),c[5]=t),a&&(c[2]?(c[1]="@media ".concat(c[2]," {").concat(c[1],"}"),c[2]=a):c[2]=a),o&&(c[4]?(c[1]="@supports (".concat(c[4],") {").concat(c[1],"}"),c[4]=o):c[4]="".concat(o)),s.push(c))}},s}},81:e=>{e.exports=function(e){return e[1]}},633:(e,s)=>{function a(e,s,a,r,o){return Array.from({length:s}).map((function(s,t){var n=document.createElement("div"),i=a[t%a.length];return n.style["background-color"]=i,n.style.width=r,n.style.height=o,n.style.position="absolute",n.style.willChange="transform, opacity",n.style.visibility="hidden",e.appendChild(n),n}))}function r(e,s,a,r){var o=e*(Math.PI/180),t=s*(Math.PI/180);return{x:0,y:0,z:0,wobble:10*r(),wobbleSpeed:.1+.1*r(),velocity:.5*a+r()*a,angle2D:-o+(.5*t-r()*t),angle3D:-Math.PI/4+r()*(Math.PI/2),tiltAngle:r()*Math.PI,tiltAngleSpeed:.1+.3*r()}}function o(e,s,a,r,o,t){var n=void 0;return new Promise((function(i){requestAnimationFrame((function l(u){n||(n=u);var c=u-n,d=n===u?0:(u-n)/o;s.slice(0,Math.ceil(c/t)).forEach((function(e){!function(e,s,a,r){e.physics.x+=Math.cos(e.physics.angle2D)*e.physics.velocity,e.physics.y+=Math.sin(e.physics.angle2D)*e.physics.velocity,e.physics.z+=Math.sin(e.physics.angle3D)*e.physics.velocity,e.physics.wobble+=e.physics.wobbleSpeed,r?e.physics.velocity*=r:e.physics.velocity-=e.physics.velocity*a,e.physics.y+=3,e.physics.tiltAngle+=e.physics.tiltAngleSpeed;var o=e.physics,t=o.x,n=o.y,i=o.z,l=o.tiltAngle,u=o.wobble,c="translate3d("+(t+10*Math.cos(u))+"px, "+(n+10*Math.sin(u))+"px, "+i+"px) rotate3d(1, 1, 1, "+l+"rad)";e.element.style.visibility="visible",e.element.style.transform=c,e.element.style.opacity=1-s}(e,d,a,r)})),u-n1&&void 0!==arguments[1]?arguments[1]:{},i=Object.assign({},t,n(s)),l=i.elementCount,u=i.colors,c=i.width,d=i.height,p=i.perspective,y=i.angle,m=i.spread,h=i.startVelocity,g=i.decay,b=i.dragFriction,f=i.duration,k=i.stagger,w=i.random;e.style.perspective=p;var v=a(e,l,u,c,d),z=v.map((function(e){return{element:e,physics:r(y,m,h,w)}}));return o(e,z,b,g,f,k)};var t={angle:90,spread:45,startVelocity:45,elementCount:50,width:"10px",height:"10px",perspective:"",colors:["#a864fd","#29cdff","#78ff44","#ff718d","#fdff6a"],duration:3e3,stagger:0,dragFriction:.1,random:Math.random};function n(e){return!e.stagger&&e.delay&&(e.stagger=e.delay),e}},379:e=>{var s=[];function a(e){for(var a=-1,r=0;r{var s={};e.exports=function(e,a){var r=function(e){if(void 0===s[e]){var a=document.querySelector(e);if(window.HTMLIFrameElement&&a instanceof window.HTMLIFrameElement)try{a=a.contentDocument.head}catch(e){a=null}s[e]=a}return s[e]}(e);if(!r)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");r.appendChild(a)}},216:e=>{e.exports=function(e){var s=document.createElement("style");return e.setAttributes(s,e.attributes),e.insert(s,e.options),s}},565:(e,s,a)=>{e.exports=function(e){var s=a.nc;s&&e.setAttribute("nonce",s)}},795:e=>{e.exports=function(e){var s=e.insertStyleElement(e);return{update:function(a){!function(e,s,a){var r="";a.supports&&(r+="@supports (".concat(a.supports,") {")),a.media&&(r+="@media ".concat(a.media," {"));var o=void 0!==a.layer;o&&(r+="@layer".concat(a.layer.length>0?" ".concat(a.layer):""," {")),r+=a.css,o&&(r+="}"),a.media&&(r+="}"),a.supports&&(r+="}");var t=a.sourceMap;t&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(t))))," */")),s.styleTagTransform(r,e,s.options)}(s,e,a)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(s)}}}},589:e=>{e.exports=function(e,s){if(s.styleSheet)s.styleSheet.cssText=e;else{for(;s.firstChild;)s.removeChild(s.firstChild);s.appendChild(document.createTextNode(e))}}}},s={};function a(r){var o=s[r];if(void 0!==o)return o.exports;var t=s[r]={id:r,exports:{}};return e[r](t,t.exports,a),t.exports}a.n=e=>{var s=e&&e.__esModule?()=>e.default:()=>e;return a.d(s,{a:s}),s},a.d=(e,s)=>{for(var r in s)a.o(s,r)&&!a.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:s[r]})},a.o=(e,s)=>Object.prototype.hasOwnProperty.call(e,s),a.nc=void 0,(()=>{var e=a(379),s=a.n(e),r=a(795),o=a.n(r),t=a(569),n=a.n(t),i=a(565),l=a.n(i),u=a(216),c=a.n(u),d=a(589),p=a.n(d),y=a(511),m={};m.styleTagTransform=p(),m.setAttributes=l(),m.insert=n().bind(null,"head"),m.domAPI=o(),m.insertStyleElement=c(),s()(y.Z,m);const h=y.Z&&y.Z.locals?y.Z.locals:void 0;var g={update:null,begin:null,loopBegin:null,changeBegin:null,change:null,changeComplete:null,loopComplete:null,complete:null,loop:1,direction:"normal",autoplay:!0,timelineOffset:0},b={duration:1e3,delay:0,endDelay:0,easing:"easeOutElastic(1, .5)",round:0},f=["translateX","translateY","translateZ","rotate","rotateX","rotateY","rotateZ","scale","scaleX","scaleY","scaleZ","skew","skewX","skewY","perspective","matrix","matrix3d"],k={CSS:{},springs:{}};function w(e,s,a){return Math.min(Math.max(e,s),a)}function v(e,s){return e.indexOf(s)>-1}function z(e,s){return e.apply(null,s)}var x={arr:function(e){return Array.isArray(e)},obj:function(e){return v(Object.prototype.toString.call(e),"Object")},pth:function(e){return x.obj(e)&&e.hasOwnProperty("totalLength")},svg:function(e){return e instanceof SVGElement},inp:function(e){return e instanceof HTMLInputElement},dom:function(e){return e.nodeType||x.svg(e)},str:function(e){return"string"==typeof e},fnc:function(e){return"function"==typeof e},und:function(e){return void 0===e},nil:function(e){return x.und(e)||null===e},hex:function(e){return/(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(e)},rgb:function(e){return/^rgb/.test(e)},hsl:function(e){return/^hsl/.test(e)},col:function(e){return x.hex(e)||x.rgb(e)||x.hsl(e)},key:function(e){return!g.hasOwnProperty(e)&&!b.hasOwnProperty(e)&&"targets"!==e&&"keyframes"!==e}};function j(e){var s=/\(([^)]+)\)/.exec(e);return s?s[1].split(",").map((function(e){return parseFloat(e)})):[]}function q(e,s){var a=j(e),r=w(x.und(a[0])?1:a[0],.1,100),o=w(x.und(a[1])?100:a[1],.1,100),t=w(x.und(a[2])?10:a[2],.1,100),n=w(x.und(a[3])?0:a[3],.1,100),i=Math.sqrt(o/r),l=t/(2*Math.sqrt(o*r)),u=l<1?i*Math.sqrt(1-l*l):0,c=l<1?(l*i-n)/u:-n+i;function d(e){var a=s?s*e/1e3:e;return a=l<1?Math.exp(-a*l*i)*(1*Math.cos(u*a)+c*Math.sin(u*a)):(1+c*a)*Math.exp(-a*i),0===e||1===e?e:1-a}return s?d:function(){var s=k.springs[e];if(s)return s;for(var a=1/6,r=0,o=0;;)if(1===d(r+=a)){if(++o>=16)break}else o=0;var t=r*a*1e3;return k.springs[e]=t,t}}function S(e){return void 0===e&&(e=10),function(s){return Math.ceil(w(s,1e-6,1)*e)*(1/e)}}var M,I,T=function(){var e=.1;function s(e,s){return 1-3*s+3*e}function a(e,s){return 3*s-6*e}function r(e){return 3*e}function o(e,o,t){return((s(o,t)*e+a(o,t))*e+r(o))*e}function t(e,o,t){return 3*s(o,t)*e*e+2*a(o,t)*e+r(o)}return function(s,a,r,n){if(0<=s&&s<=1&&0<=r&&r<=1){var i=new Float32Array(11);if(s!==a||r!==n)for(var l=0;l<11;++l)i[l]=o(l*e,s,r);return function(l){return s===a&&r===n||0===l||1===l?l:o(function(a){for(var n=0,l=1;10!==l&&i[l]<=a;++l)n+=e;--l;var u=n+(a-i[l])/(i[l+1]-i[l])*e,c=t(u,s,r);return c>=.001?function(e,s,a,r){for(var n=0;n<4;++n){var i=t(s,a,r);if(0===i)return s;s-=(o(s,a,r)-e)/i}return s}(a,u,s,r):0===c?u:function(e,s,a,r,t){var n,i,l=0;do{(n=o(i=s+(a-s)/2,r,t)-e)>0?a=i:s=i}while(Math.abs(n)>1e-7&&++l<10);return i}(a,n,n+e,s,r)}(l),a,n)}}}}(),P=(M={linear:function(){return function(e){return e}}},I={Sine:function(){return function(e){return 1-Math.cos(e*Math.PI/2)}},Circ:function(){return function(e){return 1-Math.sqrt(1-e*e)}},Back:function(){return function(e){return e*e*(3*e-2)}},Bounce:function(){return function(e){for(var s,a=4;e<((s=Math.pow(2,--a))-1)/11;);return 1/Math.pow(4,3-a)-7.5625*Math.pow((3*s-2)/22-e,2)}},Elastic:function(e,s){void 0===e&&(e=1),void 0===s&&(s=.5);var a=w(e,1,10),r=w(s,.1,2);return function(e){return 0===e||1===e?e:-a*Math.pow(2,10*(e-1))*Math.sin((e-1-r/(2*Math.PI)*Math.asin(1/a))*(2*Math.PI)/r)}}},["Quad","Cubic","Quart","Quint","Expo"].forEach((function(e,s){I[e]=function(){return function(e){return Math.pow(e,s+2)}}})),Object.keys(I).forEach((function(e){var s=I[e];M["easeIn"+e]=s,M["easeOut"+e]=function(e,a){return function(r){return 1-s(e,a)(1-r)}},M["easeInOut"+e]=function(e,a){return function(r){return r<.5?s(e,a)(2*r)/2:1-s(e,a)(-2*r+2)/2}},M["easeOutIn"+e]=function(e,a){return function(r){return r<.5?(1-s(e,a)(1-2*r))/2:(s(e,a)(2*r-1)+1)/2}}})),M);function E(e,s){if(x.fnc(e))return e;var a=e.split("(")[0],r=P[a],o=j(e);switch(a){case"spring":return q(e,s);case"cubicBezier":return z(T,o);case"steps":return z(S,o);default:return z(r,o)}}function _(e){try{return document.querySelectorAll(e)}catch(e){return}}function A(e,s){for(var a=e.length,r=arguments.length>=2?arguments[1]:void 0,o=[],t=0;t1&&(a-=1),a<1/6?e+6*(s-e)*a:a<.5?s:a<2/3?e+(s-e)*(2/3-a)*6:e}if(0==n)s=a=r=i;else{var c=i<.5?i*(1+n):i+n-i*n,d=2*i-c;s=u(d,c,t+1/3),a=u(d,c,t),r=u(d,c,t-1/3)}return"rgba("+255*s+","+255*a+","+255*r+","+l+")"}(e):void 0;var s,a}(e);if(/\s/g.test(e))return e;var a=N(e),r=a?e.substr(0,e.length-a.length):e;return s?r+s:r}function X(e,s){return Math.sqrt(Math.pow(s.x-e.x,2)+Math.pow(s.y-e.y,2))}function Q(e){for(var s,a=e.points,r=0,o=0;o0&&(r+=X(s,t)),s=t}return r}function J(e){if(e.getTotalLength)return e.getTotalLength();switch(e.tagName.toLowerCase()){case"circle":return function(e){return 2*Math.PI*R(e,"r")}(e);case"rect":return function(e){return 2*R(e,"width")+2*R(e,"height")}(e);case"line":return function(e){return X({x:R(e,"x1"),y:R(e,"y1")},{x:R(e,"x2"),y:R(e,"y2")})}(e);case"polyline":return Q(e);case"polygon":return function(e){var s=e.points;return Q(e)+X(s.getItem(s.numberOfItems-1),s.getItem(0))}(e)}}function K(e,s){var a=s||{},r=a.el||function(e){for(var s=e.parentNode;x.svg(s)&&x.svg(s.parentNode);)s=s.parentNode;return s}(e),o=r.getBoundingClientRect(),t=R(r,"viewBox"),n=o.width,i=o.height,l=a.viewBox||(t?t.split(" "):[0,0,n,i]);return{el:r,viewBox:l,x:l[0]/1,y:l[1]/1,w:n,h:i,vW:l[2],vH:l[3]}}function ee(e,s,a){function r(a){void 0===a&&(a=0);var r=s+a>=1?s+a:0;return e.el.getPointAtLength(r)}var o=K(e.el,e.svg),t=r(),n=r(-1),i=r(1),l=a?1:o.w/o.vW,u=a?1:o.h/o.vH;switch(e.property){case"x":return(t.x-o.x)*l;case"y":return(t.y-o.y)*u;case"angle":return 180*Math.atan2(i.y-n.y,i.x-n.x)/Math.PI}}function se(e,s){var a=/[+-]?\d*\.?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/g,r=G(x.pth(e)?e.totalLength:e,s)+"";return{original:r,numbers:r.match(a)?r.match(a).map(Number):[0],strings:x.str(e)||s?r.split(a):[]}}function ae(e){return A(e?C(x.arr(e)?e.map(O):O(e)):[],(function(e,s,a){return a.indexOf(e)===s}))}function re(e){var s=ae(e);return s.map((function(e,a){return{target:e,id:a,total:s.length,transforms:{list:Y(e)}}}))}function oe(e,s){var a=F(s);if(/^spring/.test(a.easing)&&(a.duration=q(a.easing)),x.arr(e)){var r=e.length;2!==r||x.obj(e[0])?x.fnc(s.duration)||(a.duration=s.duration/r):e={value:e}}var o=x.arr(e)?e:[e];return o.map((function(e,a){var r=x.obj(e)&&!x.pth(e)?e:{value:e};return x.und(r.delay)&&(r.delay=a?0:s.delay),x.und(r.endDelay)&&(r.endDelay=a===o.length-1?s.endDelay:0),r})).map((function(e){return B(e,a)}))}var te={css:function(e,s,a){return e.style[s]=a},attribute:function(e,s,a){return e.setAttribute(s,a)},object:function(e,s,a){return e[s]=a},transform:function(e,s,a,r,o){if(r.list.set(s,a),s===r.last||o){var t="";r.list.forEach((function(e,s){t+=s+"("+e+") "})),e.style.transform=t}}};function ne(e,s){re(e).forEach((function(e){for(var a in s){var r=W(s[a],e),o=e.target,t=N(r),n=Z(o,a,t,e),i=$(G(r,t||N(n)),n),l=V(o,a);te[l](o,a,i,e.transforms,!0)}}))}function ie(e,s){return A(C(e.map((function(e){return s.map((function(s){return function(e,s){var a=V(e.target,s.name);if(a){var r=function(e,s){var a;return e.tweens.map((function(r){var o=function(e,s){var a={};for(var r in e){var o=W(e[r],s);x.arr(o)&&1===(o=o.map((function(e){return W(e,s)}))).length&&(o=o[0]),a[r]=o}return a.duration=parseFloat(a.duration),a.delay=parseFloat(a.delay),a}(r,s),t=o.value,n=x.arr(t)?t[1]:t,i=N(n),l=Z(s.target,e.name,i,s),u=a?a.to.original:l,c=x.arr(t)?t[0]:u,d=N(c)||N(l),p=i||d;return x.und(n)&&(n=u),o.from=se(c,p),o.to=se($(n,c),p),o.start=a?a.end:0,o.end=o.start+o.delay+o.duration+o.endDelay,o.easing=E(o.easing,o.duration),o.isPath=x.pth(t),o.isPathTargetInsideSVG=o.isPath&&x.svg(s.target),o.isColor=x.col(o.from.original),o.isColor&&(o.round=1),a=o,o}))}(s,e),o=r[r.length-1];return{type:a,property:s.name,animatable:e,tweens:r,duration:o.end,delay:r[0].delay,endDelay:o.endDelay}}}(e,s)}))}))),(function(e){return!x.und(e)}))}function le(e,s){var a=e.length,r=function(e){return e.timelineOffset?e.timelineOffset:0},o={};return o.duration=a?Math.max.apply(Math,e.map((function(e){return r(e)+e.duration}))):s.duration,o.delay=a?Math.min.apply(Math,e.map((function(e){return r(e)+e.delay}))):s.delay,o.endDelay=a?o.duration-Math.max.apply(Math,e.map((function(e){return r(e)+e.duration-e.endDelay}))):s.endDelay,o}var ue=0,ce=[],de=function(){var e;function s(a){for(var r=ce.length,o=0;o0?requestAnimationFrame(s):void 0}return"undefined"!=typeof document&&document.addEventListener("visibilitychange",(function(){ye.suspendWhenDocumentHidden&&(pe()?e=cancelAnimationFrame(e):(ce.forEach((function(e){return e._onDocumentVisibility()})),de()))})),function(){e||pe()&&ye.suspendWhenDocumentHidden||!(ce.length>0)||(e=requestAnimationFrame(s))}}();function pe(){return!!document&&document.hidden}function ye(e){void 0===e&&(e={});var s,a=0,r=0,o=0,t=0,n=null;function i(e){var s=window.Promise&&new Promise((function(e){return n=e}));return e.finished=s,s}var l=function(e){var s=L(g,e),a=L(b,e),r=function(e,s){var a=[],r=s.keyframes;for(var o in r&&(s=B(function(e){for(var s=A(C(e.map((function(e){return Object.keys(e)}))),(function(e){return x.key(e)})).reduce((function(e,s){return e.indexOf(s)<0&&e.push(s),e}),[]),a={},r=function(r){var o=s[r];a[o]=e.map((function(e){var s={};for(var a in e)x.key(a)?a==o&&(s.value=e[a]):s[a]=e[a];return s}))},o=0;o2||(f=Math.round(f*y)/y)),m.push(f)}var z=p.length;if(z){g=p[0];for(var x=0;x0&&(l.began=!0,m("begin")),!l.loopBegan&&l.currentTime>0&&(l.loopBegan=!0,m("loopBegin")),b<=h&&0!==l.currentTime&&y(0),(b>=g&&l.currentTime!==d||!d)&&y(d),b>h&&b=d&&(r=0,l.remaining&&!0!==l.remaining&&l.remaining--,l.remaining?(a=o,m("loopComplete"),l.loopBegan=!1,"alternate"===l.direction&&u()):(l.paused=!0,l.completed||(l.completed=!0,m("loopComplete"),m("complete"),!l.passThrough&&"Promise"in window&&(n(),i(l)))))}return i(l),l.reset=function(){var e=l.direction;l.passThrough=!1,l.currentTime=0,l.progress=0,l.paused=!0,l.began=!1,l.loopBegan=!1,l.changeBegan=!1,l.completed=!1,l.changeCompleted=!1,l.reversePlayback=!1,l.reversed="reverse"===e,l.remaining=l.loop,s=l.children;for(var a=t=s.length;a--;)l.children[a].reset();(l.reversed&&!0!==l.loop||"alternate"===e&&1===l.loop)&&l.remaining++,y(l.reversed?l.duration:0)},l._onDocumentVisibility=d,l.set=function(e,s){return ne(e,s),l},l.tick=function(e){o=e,a||(a=o),h((o+(r-a))*ye.speed)},l.seek=function(e){h(c(e))},l.pause=function(){l.paused=!0,d()},l.play=function(){l.paused&&(l.completed&&l.reset(),l.paused=!1,ce.push(l),d(),de())},l.reverse=function(){u(),l.completed=!l.reversed,d()},l.restart=function(){l.reset(),l.play()},l.remove=function(e){he(ae(e),l)},l.reset(),l.autoplay&&l.play(),l}function me(e,s){for(var a=s.length;a--;)D(e,s[a].animatable.target)&&s.splice(a,1)}function he(e,s){var a=s.animations,r=s.children;me(e,a);for(var o=r.length;o--;){var t=r[o],n=t.animations;me(e,n),n.length||t.children.length||r.splice(o,1)}a.length||r.length||s.pause()}ye.version="3.2.1",ye.speed=1,ye.suspendWhenDocumentHidden=!0,ye.running=ce,ye.remove=function(e){for(var s=ae(e),a=ce.length;a--;)he(s,ce[a])},ye.get=Z,ye.set=ne,ye.convertPx=U,ye.path=function(e,s){var a=x.str(e)?_(e)[0]:e,r=s||100;return function(e){return{property:e,el:a,svg:K(a),totalLength:J(a)*(r/100)}}},ye.setDashoffset=function(e){var s=J(e);return e.setAttribute("stroke-dasharray",s),s},ye.stagger=function(e,s){void 0===s&&(s={});var a=s.direction||"normal",r=s.easing?E(s.easing):null,o=s.grid,t=s.axis,n=s.from||0,i="first"===n,l="center"===n,u="last"===n,c=x.arr(e),d=c?parseFloat(e[0]):parseFloat(e),p=c?parseFloat(e[1]):0,y=N(c?e[1]:e)||0,m=s.start||0+(c?d:0),h=[],g=0;return function(e,s,b){if(i&&(n=0),l&&(n=(b-1)/2),u&&(n=b-1),!h.length){for(var f=0;f-1&&ce.splice(o,1);for(var i=0;i0&&o[o.length-1])||6!==t[0]&&2!==t[0])){n=0;continue}if(3===t[0]&&(!o||t[1]>o[0]&&t[1]=e.length&&(e=void 0),{value:e&&e[r++],done:!e}}};throw new TypeError(s?"Object is not iterable.":"Symbol.iterator is not defined.")}function xe(e,s){var a="function"==typeof Symbol&&e[Symbol.iterator];if(!a)return e;var r,o,t=a.call(e),n=[];try{for(;(void 0===s||s-- >0)&&!(r=t.next()).done;)n.push(r.value)}catch(e){o={error:e}}finally{try{r&&!r.done&&(a=t.return)&&a.call(t)}finally{if(o)throw o.error}}return n}function je(e,s,a){if(a||2===arguments.length)for(var r,o=0,t=s.length;o1||i(e,s)}))})}function i(e,s){try{(a=o[e](s)).value instanceof qe?Promise.resolve(a.value.v).then(l,u):c(t[0][2],a)}catch(e){c(t[0][3],e)}var a}function l(e){i("next",e)}function u(e){i("throw",e)}function c(e,s){e(s),t.shift(),t.length&&i(t[0][0],t[0][1])}}Object.create,Object.create;var Me=function(e){return e&&"number"==typeof e.length&&"function"!=typeof e};function Ie(e){return"function"==typeof e}var Te,Pe=((Te=function(e){return function(s){e(this),this.message=s?s.length+" errors occurred during unsubscription:\n"+s.map((function(e,s){return s+1+") "+e.toString()})).join("\n "):"",this.name="UnsubscriptionError",this.errors=s}}((function(e){Error.call(e),e.stack=(new Error).stack}))).prototype=Object.create(Error.prototype),Te.prototype.constructor=Te,Te);function Ee(e,s){if(e){var a=e.indexOf(s);0<=a&&e.splice(a,1)}}var _e=function(){function e(e){this.initialTeardown=e,this.closed=!1,this._parentage=null,this._finalizers=null}var s;return e.prototype.unsubscribe=function(){var e,s,a,r,o;if(!this.closed){this.closed=!0;var t=this._parentage;if(t)if(this._parentage=null,Array.isArray(t))try{for(var n=ze(t),i=n.next();!i.done;i=n.next())i.value.remove(this)}catch(s){e={error:s}}finally{try{i&&!i.done&&(s=n.return)&&s.call(n)}finally{if(e)throw e.error}}else t.remove(this);var l=this.initialTeardown;if(Ie(l))try{l()}catch(e){o=e instanceof Pe?e.errors:[e]}var u=this._finalizers;if(u){this._finalizers=null;try{for(var c=ze(u),d=c.next();!d.done;d=c.next()){var p=d.value;try{Ce(p)}catch(e){o=null!=o?o:[],e instanceof Pe?o=je(je([],xe(o)),xe(e.errors)):o.push(e)}}}catch(e){a={error:e}}finally{try{d&&!d.done&&(r=c.return)&&r.call(c)}finally{if(a)throw a.error}}}if(o)throw new Pe(o)}},e.prototype.add=function(s){var a;if(s&&s!==this)if(this.closed)Ce(s);else{if(s instanceof e){if(s.closed||s._hasParent(this))return;s._addParent(this)}(this._finalizers=null!==(a=this._finalizers)&&void 0!==a?a:[]).push(s)}},e.prototype._hasParent=function(e){var s=this._parentage;return s===e||Array.isArray(s)&&s.includes(e)},e.prototype._addParent=function(e){var s=this._parentage;this._parentage=Array.isArray(s)?(s.push(e),s):s?[s,e]:e},e.prototype._removeParent=function(e){var s=this._parentage;s===e?this._parentage=null:Array.isArray(s)&&Ee(s,e)},e.prototype.remove=function(s){var a=this._finalizers;a&&Ee(a,s),s instanceof e&&s._removeParent(this)},e.EMPTY=((s=new e).closed=!0,s),e}();function Ae(e){return e instanceof _e||e&&"closed"in e&&Ie(e.remove)&&Ie(e.add)&&Ie(e.unsubscribe)}function Ce(e){Ie(e)?e():e.unsubscribe()}_e.EMPTY;var Oe=null,De=null,Fe=void 0,Le=!1,Be=!1,Ne={setTimeout:function(e,s){for(var a=[],r=2;r1;)a.push({value:s}),a.push({value:-s}),s/=2;return a.push({value:0}),a},xs=function(){return xs=Object.assign||function(e){for(var s,a=1,r=arguments.length;a=2,!0))}((Ms=Math.floor(Math.random()*ws.length),Is=ws[Ms],Ss={exposeAnswer:function(){return Is},calculateState:function(e){return e.split("").map((function(e,s){return Is[s]===e?be.Correct:Is.includes(e)?be.WrongSpot:be.Wrong}))}},function(e,s){var a,r,o=e.data[e.currentIndex];if("enter"===s){if(5===o.length){if(r=o,vs.has(r)){var t=Ss.exposeAnswer(),n=js(js([],e.state,!0),[Ss.calculateState(o)],!1);return o===t?xs(xs({},e),{state:n,gameStatus:fe.Success,bottomMessage:"Congrat! You did it!"}):5===e.currentIndex?xs(xs({},e),{state:n,gameStatus:fe.Fail,bottomMessage:"The Answer is [".concat(t.toUpperCase(),"]")}):xs(xs({},e),{currentIndex:e.currentIndex+1,data:js(js([],e.data,!0),[""],!1),state:n})}return xs(xs({},e),{gameStatus:fe.Error,bottomMessage:"Not in word list"})}return xs(xs({},e),{gameStatus:fe.Error,bottomMessage:"Not eonugh letters"})}return"backspace"===s?o.length>0?((a=js([],e.data,!0))[e.currentIndex]=o.slice(0,-1),xs(xs({},e),{data:a,gameStatus:fe.Pending})):xs(xs({},e),{gameStatus:fe.Pending}):o.length<5?((a=js([],e.data,!0))[e.currentIndex]+=s,xs(xs({},e),{data:a,gameStatus:fe.Pending})):e}),{currentIndex:0,data:[""],state:[],gameStatus:fe.Pending,bottomMessage:null})).subscribe((function(e){var s,a;s=Es,(a=e).gameStatus===fe.Success||a.gameStatus===fe.Fail?Ts(s,a.state[a.currentIndex],a.currentIndex):""===a.data[a.currentIndex]&&a.currentIndex>0&&Ts(s,a.state[a.currentIndex-1],a.currentIndex-1),function(e,s){for(var a=e.children[s.currentIndex].children,r=s.data[s.currentIndex],o=0;o ul:nth-child(".concat(e.currentIndex+1,")"),easing:"linear",duration:800,translateX:zs(30)})):_s.innerText="",e.gameStatus===fe.Success?(Cs.unsubscribe(),As.innerText=e.bottomMessage,(0,Ps.p)(Es,{duration:2500})):e.gameStatus===fe.Fail&&(Cs.unsubscribe(),_s.innerText=e.bottomMessage)}))})()})(); \ No newline at end of file diff --git a/package.json b/package.json index 1914479..de4211d 100644 --- a/package.json +++ b/package.json @@ -15,9 +15,11 @@ }, "homepage": "https://github.com/im6/wordle#readme", "dependencies": { + "@types/animejs": "^3.1.8", "@types/jest": "^29.0.3", "@typescript-eslint/eslint-plugin": "^5.38.0", "@typescript-eslint/parser": "^5.38.0", + "animejs": "^3.2.1", "css-loader": "^6.7.1", "dom-confetti": "^0.2.2", "eslint": "^8.23.1", diff --git a/src/helper.spec.ts b/src/helper.spec.ts index b4a08f9..dac2cc2 100644 --- a/src/helper.spec.ts +++ b/src/helper.spec.ts @@ -1,4 +1,9 @@ -import { isValidWord, wordClosure, allowEngChar } from './helper'; +import { + isValidWord, + wordClosure, + allowEngChar, + getShakeFrame, +} from './helper'; describe('helpers', () => { test('isValidWord', () => { @@ -12,4 +17,7 @@ describe('helpers', () => { test('allowEngChar', () => { expect(allowEngChar('123')).toBe(false); }); + test('getShakeFrame', () => { + expect(getShakeFrame(8)).toHaveLength(7); + }); }); diff --git a/src/helper.ts b/src/helper.ts index f7df355..35b4035 100644 --- a/src/helper.ts +++ b/src/helper.ts @@ -27,3 +27,21 @@ export const wordClosure = () => { }), }; }; + +export const getShakeFrame = (full: number) => { + let amplitude = full; + const frames = []; + while (amplitude > 1) { + frames.push({ + value: amplitude, + }); + frames.push({ + value: -amplitude, + }); + amplitude /= 2; + } + frames.push({ + value: 0, + }); + return frames; +}; diff --git a/src/index.ts b/src/index.ts index ebad23d..52586b4 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,9 +1,11 @@ import './style.less'; +import anime from 'animejs/lib/anime.es.js'; import { Game, GameStatus } from './typing/interface'; import { startGame$ } from './observables'; import { render } from './view'; import { confetti } from 'dom-confetti'; import { confettiDuration } from './constant'; +import { getShakeFrame } from './helper'; const appDom = document.getElementById('app'); const redTextDom = document.getElementById('redText'); @@ -11,8 +13,17 @@ const greenTextDom = document.getElementById('greenText'); const subscription = startGame$().subscribe((a: Game) => { render(appDom, a); - redTextDom.innerText = - a.gameStatus === GameStatus.Error ? 'This is not a valid word' : ''; + if (a.gameStatus === GameStatus.Error) { + redTextDom.innerText = a.bottomMessage; + anime({ + targets: `#app > ul:nth-child(${a.currentIndex + 1})`, + easing: 'linear', + duration: 800, + translateX: getShakeFrame(30), + }); + } else { + redTextDom.innerText = ''; + } if (a.gameStatus === GameStatus.Success) { subscription.unsubscribe(); greenTextDom.innerText = a.bottomMessage; diff --git a/src/reducer.ts b/src/reducer.ts index bd2c7cd..6c5f465 100644 --- a/src/reducer.ts +++ b/src/reducer.ts @@ -39,11 +39,15 @@ const createReducer = return { ...g, gameStatus: GameStatus.Error, + bottomMessage: 'Not in word list', }; } } else { - // todo: some shake effect - return g; + return { + ...g, + gameStatus: GameStatus.Error, + bottomMessage: 'Not eonugh letters', + }; } } else if (newKey === 'backspace') { if (currentWord.length > 0) { @@ -55,7 +59,10 @@ const createReducer = gameStatus: GameStatus.Pending, }; } else { - return g; + return { + ...g, + gameStatus: GameStatus.Pending, + }; } } else { if (currentWord.length < wordLen) { @@ -64,6 +71,7 @@ const createReducer = return { ...g, data: newData, + gameStatus: GameStatus.Pending, }; } else { return g; diff --git a/src/style.less b/src/style.less index 5d71dfb..34ddcde 100644 --- a/src/style.less +++ b/src/style.less @@ -40,9 +40,10 @@ font-size: 2.1em; border: 1px solid #d5d5d5; border-radius: 5px; - text-align: center; display: inline-block; vertical-align: middle; + text-align: center; + text-transform: uppercase; } } diff --git a/yarn.lock b/yarn.lock index db6f83d..0b832bb 100644 --- a/yarn.lock +++ b/yarn.lock @@ -648,6 +648,11 @@ resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf" integrity sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A== +"@types/animejs@^3.1.8": + version "3.1.8" + resolved "https://registry.yarnpkg.com/@types/animejs/-/animejs-3.1.8.tgz#524203d7b3cf2ca7329aa917a11a0fdc5f2e28bb" + integrity sha512-jBMAq/l14WKPrKGoSbeVBqT94BOwikQ6V3F63K/rduUE/HE/zQ6qFEhUoISyUm+Yg7qdRYbrToJ04mKHRtybtw== + "@types/babel__core@^7.1.14": version "7.1.19" resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.19.tgz#7b497495b7d1b4812bdb9d02804d0576f43ee460" @@ -1212,6 +1217,11 @@ ajv@^8.0.0, ajv@^8.8.0: require-from-string "^2.0.2" uri-js "^4.2.2" +animejs@^3.2.1: + version "3.2.1" + resolved "https://registry.yarnpkg.com/animejs/-/animejs-3.2.1.tgz#de9fe2e792f44a777a7fdf6ae160e26604b0cdda" + integrity sha512-sWno3ugFryK5nhiDm/2BKeFCpZv7vzerWUcUPyAZLDhMek3+S/p418ldZJbJXo5ZUOpfm2kP2XRO4NJcULMy9A== + ansi-escapes@^4.2.1: version "4.3.2" resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.2.tgz#6b2291d1db7d98b6521d5f1efa42d0f3a9feb65e"