From 9cff95367c54b129504d6b998e6da0b10f03907e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Anders=20Engl=C3=B6f=20Ytterstr=C3=B6m?= Date: Sun, 20 Apr 2025 19:32:38 +0200 Subject: [PATCH] Design overhoul --- README.md | 72 ++++++++-------- docs/assets/index-BWHSjgtQ.css | 1 - docs/assets/index-BnxD8QrO.js | 1 - docs/index.html | 21 +++-- index.html | 19 ++--- src/App.svelte | 57 +++++-------- src/app.css | 105 ++++++------------------ src/lib/ArmyFatPercentage.svelte | 130 ----------------------------- src/lib/Counter.svelte | 10 --- src/lib/Display.svelte | 119 +++++++++++++++++++++++++++ src/lib/Keypad.svelte | 132 ++++++++++++++++++++++++++++++ src/lib/NavyFatPercentage.svelte | 136 ------------------------------- src/lib/OneRepMax.svelte | 56 ------------- src/lib/common.ts | 5 -- src/lib/formulaes.ts | 101 +++++++++++++++++++++++ src/lib/store.ts | 4 +- 16 files changed, 454 insertions(+), 515 deletions(-) delete mode 100644 docs/assets/index-BWHSjgtQ.css delete mode 100644 docs/assets/index-BnxD8QrO.js delete mode 100644 src/lib/ArmyFatPercentage.svelte delete mode 100644 src/lib/Counter.svelte create mode 100644 src/lib/Display.svelte create mode 100644 src/lib/Keypad.svelte delete mode 100644 src/lib/NavyFatPercentage.svelte delete mode 100644 src/lib/OneRepMax.svelte delete mode 100644 src/lib/common.ts create mode 100644 src/lib/formulaes.ts diff --git a/README.md b/README.md index e6cd94f..99209b8 100644 --- a/README.md +++ b/README.md @@ -1,47 +1,43 @@ -# Svelte + TS + Vite +# Kalkylatorer -This template should help get you started developing with Svelte and TypeScript in Vite. +This is 2 things: -## Recommended IDE Setup +- A set of formulaes for speedy calculation for +those times when a spreadsheet is to overwhelming. Basically related to strength training and body fat. +- An personal exercise to learn CSS subgrids, as well +as grinding code with Svelte. -[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). +## How it works -## Need an official Svelte framework? +- Choose a formula (top row), and set the values +with the keypad. +- Separate the values using semicolons. +- Add decimals by using a comma (sorry not sorry). +- Get result by pressing "=" button. -Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more. -## Technical considerations +## Built-in calculators -**Why use this over SvelteKit?** +### 1 repetition max calculator -- It brings its own routing solution which might not be preferable for some users. -- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app. - -This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project. - -Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate. - -**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?** - -Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information. - -**Why include `.vscode/extensions.json`?** - -Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project. - -**Why enable `allowJs` in the TS template?** - -While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant. - -**Why is HMR not preserving my local component state?** - -HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr). - -If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR. - -```ts -// store.ts -// An extremely simple external store -import { writable } from 'svelte/store' -export default writable(0) +``` +1rm(weight: number, reps: number, variant: "lower" | "upper") +``` + +### KG to LBS converter + +``` +lbs(weight: number) +``` + +### Army body fat composition calculator + +``` +abf(length: number, neck: number, waist: number, hips?: number, gender: "male" | "female", metric: boolean) +``` + +### Navy body fat composition calculator + +``` +nbf(length: number, neck: number, waist: number, hips?: number, gender: "male" | "female", metric: boolean) ``` diff --git a/docs/assets/index-BWHSjgtQ.css b/docs/assets/index-BWHSjgtQ.css deleted file mode 100644 index 717df13..0000000 --- a/docs/assets/index-BWHSjgtQ.css +++ /dev/null @@ -1 +0,0 @@ -:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0}button{border:5px solid crimson;background-color:transparent;border-radius:0;color:inherit}button:hover,button:focus{border-color:#fff;background-color:#ffffff1a}header{background-color:#dc143c}h1,h2{font-size:1em;margin:0;text-wrap:balance}main{min-width:100vw;min-height:100vh;display:grid;gap:1em;padding:1em;box-sizing:border-box;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(7,1fr)}output{background:#00000040;display:grid;grid-column:1 / 4;grid-row:2 / 4;grid-template:subgrid / subgrid;font-size:2em}output>span{grid-column:1 / 6;grid-row:1 / 2;text-align:right}output>span:before{content:"=";color:#888}output>span:after{content:"%";color:#888}form{background:#ffffff40;display:grid;grid-column:1 / 4;grid-row:4 / 8;grid-template:subgrid / subgrid}input{max-width:4em;display:block}header{display:grid;grid-column:1 / 4;grid-row:1 / 1;grid-template:subgrid / subgrid}h1{grid-column:2 / 4}.gender.svelte-5wgr0y{grid-column:1 / 2;grid-row:1 / 4}nav.svelte-1mcqfv8{display:grid;grid-template:subgrid / subgrid;grid-column:2 / 2;grid-row:2 / 6} diff --git a/docs/assets/index-BnxD8QrO.js b/docs/assets/index-BnxD8QrO.js deleted file mode 100644 index e65761f..0000000 --- a/docs/assets/index-BnxD8QrO.js +++ /dev/null @@ -1 +0,0 @@ -(function(){const t=document.createElement("link").relList;if(t&&t.supports&&t.supports("modulepreload"))return;for(const r of document.querySelectorAll('link[rel="modulepreload"]'))l(r);new MutationObserver(r=>{for(const a of r)if(a.type==="childList")for(const i of a.addedNodes)i.tagName==="LINK"&&i.rel==="modulepreload"&&l(i)}).observe(document,{childList:!0,subtree:!0});function n(r){const a={};return r.integrity&&(a.integrity=r.integrity),r.referrerPolicy&&(a.referrerPolicy=r.referrerPolicy),r.crossOrigin==="use-credentials"?a.credentials="include":r.crossOrigin==="anonymous"?a.credentials="omit":a.credentials="same-origin",a}function l(r){if(r.ep)return;r.ep=!0;const a=n(r);fetch(r.href,a)}})();const st=!1;var kt=Array.isArray,en=Array.prototype.indexOf,tn=Array.from,xt=Object.defineProperty,ye=Object.getOwnPropertyDescriptor,nn=Object.getOwnPropertyDescriptors,rn=Object.prototype,ln=Array.prototype,Tt=Object.getPrototypeOf;const oe=()=>{};function an(e){return e()}function We(e){for(var t=0;t=P.v&&m(P,k+1)}_t(i)}return!0},ownKeys(o){_(i);var u=Reflect.ownKeys(o).filter(s=>{var d=r.get(s);return d===void 0||d.v!==D});for(var[v,c]of r)c.v!==D&&!(v in o)&&u.push(v);return u},setPrototypeOf(){pn()}})}function _t(e,t=1){m(e,e.v+t)}function vt(e){return e!==null&&typeof e=="object"&&re in e?e[re]:e}function Tn(e,t){return Object.is(vt(e),vt(t))}var dt,Pt,Dt,Rt;function Mn(){if(dt===void 0){dt=window,Pt=/Firefox/.test(navigator.userAgent);var e=Element.prototype,t=Node.prototype;Dt=ye(t,"firstChild").get,Rt=ye(t,"nextSibling").get,e.__click=void 0,e.__className=void 0,e.__attributes=null,e.__style=void 0,e.__e=void 0,Text.prototype.__t=void 0}}function Nn(e=""){return document.createTextNode(e)}function Se(e){return Dt.call(e)}function rt(e){return Rt.call(e)}function g(e,t){return Se(e)}function On(e,t){{var n=Se(e);return n instanceof Comment&&n.data===""?rt(n):n}}function b(e,t=1,n=!1){let l=e;for(;t--;)l=rt(l);return l}function $t(e){var t=q|G,n=y!==null&&(y.f&q)!==0?y:null;return w===null||n!==null&&(n.f&F)!==0?t|=F:w.f|=Nt,{ctx:x,deps:null,effects:null,equals:Ot,f:t,fn:e,reactions:null,rv:0,v:null,wv:0,parent:n??w}}function Ft(e){var t=e.effects;if(t!==null){e.effects=null;for(var n=0;nnew Promise(l=>{n.outro?Ze(t,()=>{ae(t),l(void 0)}):(ae(t),l(void 0))})}function qt(e){return _e(Mt,e,!1)}function lt(e){return _e(Ce,e,!0)}function at(e,t=[],n=$t){const l=t.map(n);return jt(()=>e(...l.map(_)))}function jt(e,t=0){return _e(Ce|tt|t,e,!0)}function Ge(e,t=!0){return _e(Ce|W,e,!0,t)}function Kt(e){var t=e.teardown;if(t!==null){const n=it,l=y;bt(!0),J(null);try{t.call(null)}finally{bt(n),J(l)}}}function Vt(e,t=!1){var n=e.first;for(e.first=e.last=null;n!==null;){var l=n.next;(n.f&se)!==0?n.parent=null:ae(n,t),n=l}}function $n(e){for(var t=e.first;t!==null;){var n=t.next;(t.f&W)===0&&ae(t),t=n}}function ae(e,t=!0){var n=!1;if((t||(e.f&on)!==0)&&e.nodes_start!==null){for(var l=e.nodes_start,r=e.nodes_end;l!==null;){var a=l===r?null:rt(l);l.remove(),l=a}n=!0}Vt(e,t&&!n),$e(e,0),z(e,Ie);var i=e.transitions;if(i!==null)for(const o of i)o.stop();Kt(e);var f=e.parent;f!==null&&f.first!==null&&zt(e),e.next=e.prev=e.teardown=e.ctx=e.deps=e.fn=e.nodes_start=e.nodes_end=null}function zt(e){var t=e.parent,n=e.prev,l=e.next;n!==null&&(n.next=l),l!==null&&(l.prev=n),t!==null&&(t.first===e&&(t.first=l),t.last===e&&(t.last=n))}function Ze(e,t){var n=[];Bt(e,n,!0),Fn(n,()=>{ae(e),t&&t()})}function Fn(e,t){var n=e.length;if(n>0){var l=()=>--n||t();for(var r of e)r.out(l)}else t()}function Bt(e,t,n){if((e.f&fe)===0){if(e.f^=fe,e.transitions!==null)for(const i of e.transitions)(i.is_global||n)&&t.push(i);for(var l=e.first;l!==null;){var r=l.next,a=(l.f&nt)!==0||(l.f&W)!==0;Bt(l,t,a?n:!1),l=r}}}function ht(e){Ht(e,!0)}function Ht(e,t){if((e.f&fe)!==0){e.f^=fe,(e.f&$)===0&&(e.f^=$),xe(e)&&(z(e,G),je(e));for(var n=e.first;n!==null;){var l=n.next,r=(n.f&nt)!==0||(n.f&W)!==0;Ht(n,r?t:!1),n=l}if(e.transitions!==null)for(const a of e.transitions)(a.is_global||t)&&a.in()}}let Pe=[];function Cn(){var e=Pe;Pe=[],We(e)}function gt(e){Pe.length===0&&queueMicrotask(Cn),Pe.push(e)}let Me=!1,Je=!1,De=null,le=!1,it=!1;function bt(e){it=e}let Ne=[];let y=null,L=!1;function J(e){y=e}let w=null;function Q(e){w=e}let K=null;function In(e){K=e}let A=null,R=0,H=null;function Ln(e){H=e}let Ut=1,Re=0,Z=!1;function Yt(){return++Ut}function xe(e){var c;var t=e.f;if((t&G)!==0)return!0;if((t&ce)!==0){var n=e.deps,l=(t&F)!==0;if(n!==null){var r,a,i=(t&Ae)!==0,f=l&&w!==null&&!Z,o=n.length;if(i||f){var u=e,v=u.parent;for(r=0;re.wv)return!0}(!l||w!==null&&!Z)&&z(e,$)}return!1}function qn(e,t){for(var n=t;n!==null;){if((n.f&Oe)!==0)try{n.fn(e);return}catch{n.f^=Oe}n=n.parent}throw Me=!1,e}function jn(e){return(e.f&Ie)===0&&(e.parent===null||(e.parent.f&Oe)===0)}function qe(e,t,n,l){if(Me){if(n===null&&(Me=!1),jn(t))throw e;return}n!==null&&(Me=!0);{qn(e,t);return}}function Wt(e,t,n=!0){var l=e.reactions;if(l!==null)for(var r=0;r0)for(c.length=R+A.length,s=0;s0;){t++>1e3&&Vn();var n=Ne,l=n.length;Ne=[];for(var r=0;r{Promise.resolve().then(()=>{var t;if(!e.defaultPrevented)for(const n of e.target.elements)(t=n.__on_r)==null||t.call(n)})},{capture:!0}))}function Jn(e){var t=y,n=w;J(null),Q(null);try{return e()}finally{J(t),Q(n)}}function Zt(e,t,n,l=n){e.addEventListener(t,()=>Jn(n));const r=e.__on_r;r?e.__on_r=()=>{r(),l(!0)}:e.__on_r=()=>l(!0),Zn()}const Jt=new Set,Xe=new Set;function Ke(e){for(var t=0;t{throw O});throw s}}finally{e.__root=t,delete e.currentTarget,J(v),Q(c)}}}function Qn(e){var t=document.createElement("template");return t.innerHTML=e,t.content}function yt(e,t){var n=w;n.nodes_start===null&&(n.nodes_start=e,n.nodes_end=t)}function B(e,t){var n=(t&yn)!==0,l=(t&wn)!==0,r,a=!e.startsWith("");return()=>{r===void 0&&(r=Qn(a?e:""+e),n||(r=Se(r)));var i=l||Pt?document.importNode(r,!0):r.cloneNode(!0);if(n){var f=Se(i),o=i.lastChild;yt(f,o)}else yt(i,i);return i}}function V(e,t){e!==null&&e.before(t)}function ft(e,t){var n=t==null?"":typeof t=="object"?t+"":t;n!==(e.__t??(e.__t=e.nodeValue))&&(e.__t=n,e.nodeValue=n+"")}function Xn(e,t){return er(e,t)}const ie=new Map;function er(e,{target:t,anchor:n,props:l={},events:r,context:a,intro:i=!0}){Mn();var f=new Set,o=c=>{for(var s=0;s{var c=n??t.appendChild(Nn());return Ge(()=>{if(a){we({});var s=x;s.c=a}r&&(l.$$events=r),u=e(c,l)||{},a&&Ee()}),()=>{var h;for(var s of f){t.removeEventListener(s,Te);var d=ie.get(s);--d===0?(document.removeEventListener(s,Te),ie.delete(s)):ie.set(s,d)}Xe.delete(o),c!==n&&((h=c.parentNode)==null||h.removeChild(c))}});return tr.set(u,v),u}let tr=new WeakMap;function Y(e,t,[n,l]=[0,0]){var r=e,a=null,i=null,f=D,o=n>0?nt:0,u=!1;const v=(s,d=!0)=>{u=!0,c(d,s)},c=(s,d)=>{f!==(f=s)&&(f?(a?ht(a):d&&(a=Ge(()=>d(r))),i&&Ze(i,()=>{i=null})):(i?ht(i):d&&(i=Ge(()=>d(r,[n+1,l]))),a&&Ze(a,()=>{a=null})))};jt(()=>{u=!1,t(v),u||c(null,null)},o)}function j(e,t,n=t){var l=ke();Zt(e,"input",r=>{var a=r?e.defaultValue:e.value;if(a=Ue(e)?Ye(a):a,n(a),l&&a!==(a=t())){var i=e.selectionStart,f=e.selectionEnd;e.value=a??"",f!==null&&(e.selectionStart=i,e.selectionEnd=Math.min(f,e.value.length))}}),ot(t)==null&&e.value&&n(Ue(e)?Ye(e.value):e.value),lt(()=>{var r=t();Ue(e)&&r===Ye(e.value)||e.type==="date"&&!r&&!e.value||r!==e.value&&(e.value=r??"")})}const He=new Set;function Fe(e,t,n,l,r=l){var a=n.getAttribute("type")==="checkbox",i=e;if(t!==null)for(var f of t)i=i[f]??(i[f]=[]);i.push(n),Zt(n,"change",()=>{var o=n.__value;a&&(o=nr(i,o,n.checked)),r(o)},()=>r(a?[]:null)),lt(()=>{var o=l();a?(o=o||[],n.checked=o.includes(n.__value)):n.checked=Tn(n.__value,o)}),Lt(()=>{var o=i.indexOf(n);o!==-1&&i.splice(o,1)}),He.has(i)||(He.add(i),gt(()=>{i.sort((o,u)=>o.compareDocumentPosition(u)===4?-1:1),He.delete(i)})),gt(()=>{})}function nr(e,t,n){for(var l=new Set,r=0;rYn(t.s);if(e){let r=0,a={};const i=$t(()=>{let f=!1;const o=t.s;for(const u in o)o[u]!==a[u]&&(a[u]=o[u],f=!0);return f&&r++,r});l=()=>_(i)}n.b.length&&Dn(()=>{wt(t,l),We(n.b)}),pt(()=>{const r=ot(()=>n.m.map(an));return()=>{for(const a of r)typeof a=="function"&&a()}}),n.a.length&&pt(()=>{wt(t,l),We(n.a)})}function wt(e,t){if(e.l.s)for(const n of e.l.s)_(n);t()}function Qt(e,t,n){if(e==null)return t(void 0),oe;const l=ot(()=>e.subscribe(t,n));return l.unsubscribe?()=>l.unsubscribe():l}const ue=[];function lr(e,t=oe){let n=null;const l=new Set;function r(f){if(At(e,f)&&(e=f,n)){const o=!ue.length;for(const u of l)u[1](),ue.push(u,e);if(o){for(let u=0;u{l.delete(u),l.size===0&&n&&(n(),n=null)}}return{set:r,update:a,subscribe:i}}function ar(e){let t;return Qt(e,n=>t=n)(),t}let et=Symbol();function ir(e,t,n){const l=n[t]??(n[t]={store:null,source:En(void 0),unsubscribe:oe});if(l.store!==e&&!(et in n))if(l.unsubscribe(),l.store=e??null,e==null)l.source.v=void 0,l.unsubscribe=oe;else{var r=!0;l.unsubscribe=Qt(e,a=>{r?l.source.v=a:m(l.source,a)}),r=!1}return e&&et in n?ar(e):_(l.source)}function ur(){const e={};function t(){Lt(()=>{for(var n in e)e[n].unsubscribe();xt(e,et,{enumerable:!1,value:!0})})}return[e,t]}const or="5";var Et;typeof window<"u"&&((Et=window.__svelte??(window.__svelte={})).v??(Et.v=new Set)).add(or);mn();const Xt=lr("start"),ve=e=>Xt.update(t=>e);var fr=()=>ve("start"),sr=B(" "),cr=(e,t)=>t(),_r=(e,t)=>t(),vr=(e,t)=>t(),dr=B(''),pr=(e,t)=>t(),hr=B('

Kroppsfettkalkylator, Army

');function gr(e,t){we(t,!0);const n=[];let l=S(0),r=S("male"),a=S(null),i=S(null),f=S(null),o=S(null);const u=(p,T,M)=>86.01*Math.log10(p-T)-70.041*Math.log10(M)+30.3,v=(p,T,M,C)=>163.205*Math.log10(p+M-T)-97.684*Math.log10(C)-104.912,c=()=>{if(_(r)=="male"){if(!_(i)||!_(f)||!_(a))return;m(l,U(u(_(i),_(f),_(a))))}else{if(!_(i)||!_(f)||!_(a)||!_(o))return;m(l,U(v(_(i),_(f),_(o),_(a))))}};var s=hr(),d=g(s),h=g(d),E=g(h);E.__click=[fr];var N=b(d,2),P=g(N);{var k=p=>{var T=sr(),M=g(T);at(C=>ft(M,C),[()=>Math.round(_(l)*100)/100]),V(p,T)};Y(P,p=>{_(l)>0&&p(k)})}var O=b(N,2),X=g(O),ee=g(X),te=b(g(ee));te.value=(te.__value="male")==null?"":"male";var Ve=b(ee,2),ne=b(g(Ve));ne.value=(ne.__value="female")==null?"":"female";var de=b(X,2),pe=b(g(de));pe.__change=[cr,c];var he=b(de,2),ge=b(g(he));ge.__change=[_r,c];var be=b(he,2);{var ze=p=>{var T=dr(),M=b(g(T));M.__change=[vr,c],j(M,()=>_(o),C=>m(o,C)),V(p,T)};Y(be,p=>{_(r)=="female"&&p(ze)})}var Be=b(be,2),me=b(g(Be));me.__change=[pr,c],Fe(n,[],te,()=>_(r),p=>m(r,p)),Fe(n,[],ne,()=>_(r),p=>m(r,p)),j(pe,()=>_(a),p=>m(a,p)),j(ge,()=>_(i),p=>m(i,p)),j(me,()=>_(f),p=>m(f,p)),V(e,s),Ee()}Ke(["click","change"]);var br=()=>ve("start"),mr=B(" "),yr=(e,t)=>t(),wr=(e,t)=>t(),Er=(e,t)=>t(),kr=B(''),xr=(e,t)=>t(),Tr=B('

Kroppsfettkalkylator, Navy

');function Mr(e,t){we(t,!0);const n=[];let l=S(0),r=S("male"),a=S(null),i=S(null),f=S(null),o=S(null);const u=(p,T,M)=>495/(1.0324-.19077*Math.log10(p-T)+.15456*Math.log10(M))-450,v=(p,T,M,C)=>495/(1.29579-.35004*Math.log10(p+M-T)+.221*Math.log10(C))-450,c=()=>{if(_(r)=="male"){if(!_(i)||!_(f)||!_(a))return;m(l,U(u(_(i),_(f),_(a))))}else{if(!_(i)||!_(f)||!_(a)||!_(o))return;m(l,U(v(_(i),_(f),_(o),_(a))))}};var s=Tr(),d=g(s),h=g(d),E=g(h);E.__click=[br];var N=b(d,2),P=g(N);{var k=p=>{var T=mr(),M=g(T);at(C=>ft(M,C),[()=>Math.round(_(l)*100)/100]),V(p,T)};Y(P,p=>{_(l)>0&&p(k)})}var O=b(N,2),X=g(O),ee=g(X),te=b(g(ee));te.value=(te.__value="male")==null?"":"male";var Ve=b(ee,2),ne=b(g(Ve));ne.value=(ne.__value="female")==null?"":"female";var de=b(X,2),pe=b(g(de));pe.__change=[yr,c];var he=b(de,2),ge=b(g(he));ge.__change=[wr,c];var be=b(he,2);{var ze=p=>{var T=kr(),M=b(g(T));M.__change=[Er,c],j(M,()=>_(o),C=>m(o,C)),V(p,T)};Y(be,p=>{_(r)=="female"&&p(ze)})}var Be=b(be,2),me=b(g(Be));me.__change=[xr,c],Fe(n,[],te,()=>_(r),p=>m(r,p)),Fe(n,[],ne,()=>_(r),p=>m(r,p)),j(pe,()=>_(a),p=>m(a,p)),j(ge,()=>_(i),p=>m(i,p)),j(me,()=>_(f),p=>m(f,p)),V(e,s),Ee()}Ke(["click","change"]);var Nr=()=>ve("start"),Or=B(" "),Ar=(e,t)=>t(),Sr=(e,t)=>t(),Pr=B('

1RM

');function Dr(e,t){we(t,!0);let n=S(0),l=S(null),r=S(null);const a=()=>{_(r)&&_(l)&&m(n,_(r)/(1.0278-.0278*_(l)))};var i=Pr(),f=g(i),o=g(f),u=g(o);u.__click=[Nr];var v=b(f,2),c=g(v);{var s=k=>{var O=Or(),X=g(O);at(ee=>ft(X,ee),[()=>Math.round(_(n)*100)/100]),V(k,O)};Y(c,k=>{_(n)>0&&k(s)})}var d=b(v,2),h=g(d),E=b(g(h));E.__change=[Ar,a];var N=b(h,2),P=b(g(N));P.__change=[Sr,a],j(E,()=>_(l),k=>m(l,k)),j(P,()=>_(r),k=>m(r,k)),V(e,i),Ee()}Ke(["click","change"]);var Rr=()=>ve("armyfatcalc"),$r=()=>ve("navyfatcalc"),Fr=()=>ve("onerepmax"),Cr=B('
'),Ir=B(" ",1);function Lr(e,t){we(t,!1);const[n,l]=ur(),r=()=>ir(Xt,"$currentView",n);rr();var a=Ir(),i=On(a);{var f=h=>{gr(h,{})};Y(i,h=>{r()==="armyfatcalc"&&h(f)})}var o=b(i,2);{var u=h=>{Mr(h,{})};Y(o,h=>{r()==="navyfatcalc"&&h(u)})}var v=b(o,2);{var c=h=>{Dr(h,{})};Y(v,h=>{r()==="onerepmax"&&h(c)})}var s=b(v,2);{var d=h=>{var E=Cr(),N=g(E),P=g(N);P.__click=[Rr];var k=b(P,2);k.__click=[$r];var O=b(k,2);O.__click=[Fr],V(h,E)};Y(s,h=>{r()==="start"&&h(d)})}V(e,a),Ee(),l()}Ke(["click"]);Xn(Lr,{target:document.getElementById("app")}); diff --git a/docs/index.html b/docs/index.html index 45b4d4f..66f945d 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,14 +1,13 @@ - - - - - Vite + Svelte + TS - - - - -
- + + + + Kalkylatorer + + + + +
+ diff --git a/index.html b/index.html index b6c5f0a..aaef5d5 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,12 @@ - - - - - Vite + Svelte + TS - - -
- - + + + + Kalkylatorer + + +
+ + diff --git a/src/App.svelte b/src/App.svelte index ea9c222..e5a583d 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -1,42 +1,29 @@ -{#if $currentView === "armyfatcalc"} - -{/if} -{#if $currentView === "navyfatcalc"} - -{/if} -{#if $currentView === "onerepmax"} - -{/if} -{#if $currentView === "start"} -
- -
-{/if} +
+ + +
+ diff --git a/src/app.css b/src/app.css index 395a0a3..3d6e8c7 100644 --- a/src/app.css +++ b/src/app.css @@ -5,7 +5,13 @@ color-scheme: light dark; color: rgba(255, 255, 255, 0.87); - background-color: #242424; + background-color: #333; + background-image: linear-gradient( + hsl(0 25% 10%), + hsl(90 25% 10%), + hsl(180 25% 10%), + hsl(270 25% 10%) + ); font-synthesis: none; text-rendering: optimizeLegibility; @@ -14,90 +20,27 @@ } body { + min-height: 100vh; + min-width: 100vw; margin: 0; -} - -button { - border: 5px solid crimson; - background-color: transparent; - border-radius: 0; - color: inherit; - - &:hover, - &:focus { - border-color: #fff; - background-color: rgba(255, 255, 255, 0.1); - } -} - -header { - background-color: crimson; -} - -h1, -h2, -h2 { - font-size: 1em; - margin: 0; - text-wrap: balance; + display: flex; + justify-content: center; + align-items: center; } main { - min-width: 100vw; - min-height: 100vh; + width: 20rem; + height: 22rem; + max-width: 97%; + max-height: 97%; + background: #543; + padding: 0.5em; + border: 3px solid #000; + background-image: linear-gradient(135deg, #432, #654, #432); + border-radius: 5px; display: grid; - gap: 1em; - padding: 1em; + gap: 0.2em; box-sizing: border-box; - grid-template-columns: repeat(3, 1fr); - grid-template-rows: repeat(7, 1fr); -} - -output { - background: rgba(0, 0, 0, 0.25); - display: grid; - grid-column: 1 / 4; - grid-row: 2 / 4; - grid-template: subgrid / subgrid; - font-size: 2em; - - > span { - grid-column: 1 / 6; - grid-row: 1 / 2; - text-align: right; - - &::before { - content: "="; - color: #888; - } - - &::after { - content: "%"; - color: #888; - } - } -} - -form { - background: rgba(255, 255, 255, 0.25); - display: grid; - grid-column: 1 / 4; - grid-row: 4 / 8; - grid-template: subgrid / subgrid; -} - -input { - max-width: 4em; - display: block; -} - -header { - display: grid; - grid-column: 1 / 4; - grid-row: 1 / 1; - grid-template: subgrid / subgrid; -} - -h1 { - grid-column: 2 / 4; + grid-template-columns: repeat(4, 1fr); + grid-template-rows: repeat(8, 1fr); } diff --git a/src/lib/ArmyFatPercentage.svelte b/src/lib/ArmyFatPercentage.svelte deleted file mode 100644 index c85056d..0000000 --- a/src/lib/ArmyFatPercentage.svelte +++ /dev/null @@ -1,130 +0,0 @@ - - -
-
- - - -

Kroppsfettkalkylator, Army

-
- - {#if fatPercentage > 0} - {Math.round(fatPercentage * 100) / 100} - {/if} - -
-
- - -
- - - {#if gender == "female"} - - {/if} - -
-
- - diff --git a/src/lib/Counter.svelte b/src/lib/Counter.svelte deleted file mode 100644 index 37d75ce..0000000 --- a/src/lib/Counter.svelte +++ /dev/null @@ -1,10 +0,0 @@ - - - diff --git a/src/lib/Display.svelte b/src/lib/Display.svelte new file mode 100644 index 0000000..8342f4e --- /dev/null +++ b/src/lib/Display.svelte @@ -0,0 +1,119 @@ + + +
+
+ {#if $formula} + {$formula} + {#if $formula === "1rm"} + 0 ? "done" : ""}>weight + 1 ? "done" : ""}>reps + {/if} + {#if $formula === "lbs"} + 0 ? "done" : ""}>weight + {/if} + {#if $formula === "akf" || $formula === "nkf"} + 0 ? "done" : ""}>hgt + 1 ? "done" : ""}>nck + 2 ? "done" : ""}>wst + 3 ? "done" : ""}>hps? + {/if} + {/if} +
+ 
{$display}
+ copyToClipboard()}> + {#if $calculated}= + {/if} + {$calculated} + +
+ + diff --git a/src/lib/Keypad.svelte b/src/lib/Keypad.svelte new file mode 100644 index 0000000..e3d8f1e --- /dev/null +++ b/src/lib/Keypad.svelte @@ -0,0 +1,132 @@ + + + + + diff --git a/src/lib/NavyFatPercentage.svelte b/src/lib/NavyFatPercentage.svelte deleted file mode 100644 index ff2a9ff..0000000 --- a/src/lib/NavyFatPercentage.svelte +++ /dev/null @@ -1,136 +0,0 @@ - - -
-
- - - -

Kroppsfettkalkylator, Navy

-
- - {#if fatPercentage > 0} - {Math.round(fatPercentage * 100) / 100} - {/if} - -
-
- - -
- - - {#if gender == "female"} - - {/if} - -
-
- - diff --git a/src/lib/OneRepMax.svelte b/src/lib/OneRepMax.svelte deleted file mode 100644 index 43aba57..0000000 --- a/src/lib/OneRepMax.svelte +++ /dev/null @@ -1,56 +0,0 @@ - - -
-
- - - -

1RM

-
- - {#if oneRepMax > 0} - {Math.round(oneRepMax * 100) / 100} - {/if} - -
- - -
-
- - diff --git a/src/lib/common.ts b/src/lib/common.ts deleted file mode 100644 index 74a557c..0000000 --- a/src/lib/common.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { currentView } from "./store"; - -export const navigate = ( - page: "start" | "armyfatcalc" | "navyfatcalc" | "onerepmax", -) => currentView.update((_) => page); diff --git a/src/lib/formulaes.ts b/src/lib/formulaes.ts new file mode 100644 index 0000000..bcddcad --- /dev/null +++ b/src/lib/formulaes.ts @@ -0,0 +1,101 @@ +type Gender = "male" | "female"; +type Formula = "akf" | "nkf" | "1rm" | "lbs"; + +export const calculate = (f: Formula, params: string[]) => { + let G: Gender = "male"; + let H = undefined; + switch (f) { + case "1rm": + return round(oneRepMax(parseFloat(params[0]), parseInt(params[1], 10))); + case "lbs": + return round(kg2lbs(parseFloat(params[0].replace(",", ".")))); + case "akf": + if (params.length > 3) { + H = parseFloat(params[3].replace(",", ".")); + G = "female"; + } + return round( + armyBodyFatComposition( + G, + parseFloat(params[0].replace(",", ".")), + parseFloat(params[1].replace(",", ".")), + parseFloat(params[2].replace(",", ".")), + H, + ), + ); + case "nkf": + if (params.length > 3) { + H = parseFloat(params[3].replace(",", ".")); + G = "female"; + } + return round( + navyBodyFatComposition( + G, + parseFloat(params[0].replace(",", ".")), + parseFloat(params[1].replace(",", ".")), + parseFloat(params[2].replace(",", ".")), + H, + ), + ); + } +}; + +// https://www.athlegan.com/calculate-1rm +const oneRepMax = (weight: number, reps: number) => { + return weight / (1.0278 - 0.0278 * reps); +}; + +// https://www.gigacalculator.com/calculators/army-body-fat-calculator.php +const armyBodyFatComposition = ( + gender: Gender, + height: number, + neck: number, + waist: number, + hips?: number, +) => { + if (gender == "male") { + return ( + 86.01 * Math.log10(waist - neck) - 70.041 * Math.log10(height) + 30.3 + ); + } else { + return ( + 163.205 * Math.log10(waist + hips! - neck) - + 97.684 * Math.log10(height) - + 104.912 + ); + } +}; + +// https://www.omnicalculator.com/health/navy-body-fat +const navyBodyFatComposition = ( + gender: Gender, + height: number, + neck: number, + waist: number, + hips?: number, +) => { + if (gender == "male") { + return ( + 495 / + (1.0324 - + 0.19077 * Math.log10(waist - neck) + + 0.15456 * Math.log10(height)) - + 450 + ); + } else { + return ( + 495 / + (1.29579 - + 0.35004 * Math.log10(waist + hips! - neck) + + 0.221 * Math.log10(height)) - + 450 + ); + } +}; + +// https://www.unitconverters.net/weight-and-mass/kg-to-lbs.htm +const kg2lbs = (weight: number) => 2.2046226218 * weight; + +const round = (i: number) => { + return Math.round(i * 1000) / 1000; +}; diff --git a/src/lib/store.ts b/src/lib/store.ts index 9f91db0..5301372 100644 --- a/src/lib/store.ts +++ b/src/lib/store.ts @@ -1,3 +1,5 @@ import { writable } from "svelte/store"; -export const currentView = writable("start"); +export const calculated = writable(""); +export const formula = writable(""); +export const display = writable("hi.");