Compare commits
No commits in common. "82475127ed8bdd3f4f6ba8979307543cc1f7f5fc" and "0db5ab19edc424732c625060c9e6a8ca75c03d71" have entirely different histories.
82475127ed
...
0db5ab19ed
5 changed files with 101 additions and 324 deletions
20
package-lock.json
generated
20
package-lock.json
generated
|
|
@ -13,8 +13,7 @@
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@sveltejs/vite-plugin-svelte": "^5.0.3",
|
"@sveltejs/vite-plugin-svelte": "^5.0.3",
|
||||||
"@tsconfig/svelte": "^5.0.4",
|
"@tsconfig/svelte": "^5.0.4",
|
||||||
"prettier": "^3.5.3",
|
"prettier": "^3.4.2",
|
||||||
"prettier-plugin-svelte": "^3.3.3",
|
|
||||||
"svelte": "^5.15.0",
|
"svelte": "^5.15.0",
|
||||||
"svelte-check": "^4.1.1",
|
"svelte-check": "^4.1.1",
|
||||||
"typescript": "~5.6.2",
|
"typescript": "~5.6.2",
|
||||||
|
|
@ -4506,9 +4505,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/prettier": {
|
"node_modules/prettier": {
|
||||||
"version": "3.5.3",
|
"version": "3.4.2",
|
||||||
"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz",
|
"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.2.tgz",
|
||||||
"integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
|
"integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"bin": {
|
"bin": {
|
||||||
|
|
@ -4521,17 +4520,6 @@
|
||||||
"url": "https://github.com/prettier/prettier?sponsor=1"
|
"url": "https://github.com/prettier/prettier?sponsor=1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/prettier-plugin-svelte": {
|
|
||||||
"version": "3.3.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-3.3.3.tgz",
|
|
||||||
"integrity": "sha512-yViK9zqQ+H2qZD1w/bH7W8i+bVfKrD8GIFjkFe4Thl6kCT9SlAsXVNmt3jCvQOCsnOhcvYgsoVlRV/Eu6x5nNw==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"peerDependencies": {
|
|
||||||
"prettier": "^3.0.0",
|
|
||||||
"svelte": "^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/pretty-bytes": {
|
"node_modules/pretty-bytes": {
|
||||||
"version": "6.1.1",
|
"version": "6.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.1.1.tgz",
|
||||||
|
|
|
||||||
|
|
@ -13,8 +13,7 @@
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@sveltejs/vite-plugin-svelte": "^5.0.3",
|
"@sveltejs/vite-plugin-svelte": "^5.0.3",
|
||||||
"@tsconfig/svelte": "^5.0.4",
|
"@tsconfig/svelte": "^5.0.4",
|
||||||
"prettier": "^3.5.3",
|
"prettier": "^3.4.2",
|
||||||
"prettier-plugin-svelte": "^3.3.3",
|
|
||||||
"svelte": "^5.15.0",
|
"svelte": "^5.15.0",
|
||||||
"svelte-check": "^4.1.1",
|
"svelte-check": "^4.1.1",
|
||||||
"typescript": "~5.6.2",
|
"typescript": "~5.6.2",
|
||||||
|
|
|
||||||
|
|
@ -1,168 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import DietProgress from "./DietProgress.svelte";
|
|
||||||
import P from "./svg-path";
|
|
||||||
import { gym, cardio, diet } from "./store";
|
|
||||||
|
|
||||||
export const DEG_TO_RAD = Math.PI / 180;
|
|
||||||
export const RAD_TO_DEG = 180 / Math.PI;
|
|
||||||
export const FULL_CIRCLE_IN_RADIANS = 2 * Math.PI;
|
|
||||||
|
|
||||||
const size = 400;
|
|
||||||
const segmentHeight = 16;
|
|
||||||
const span = 0.8 * FULL_CIRCLE_IN_RADIANS;
|
|
||||||
const startAngle = 0.25 * FULL_CIRCLE_IN_RADIANS + span / 2;
|
|
||||||
|
|
||||||
const perimiterWidth = size * Math.PI * (span / FULL_CIRCLE_IN_RADIANS);
|
|
||||||
const pixelToRadians = span / perimiterWidth;
|
|
||||||
const x = 0;
|
|
||||||
const y = 0;
|
|
||||||
|
|
||||||
const points = (radius: number, radLength: number, thickness: number) => {
|
|
||||||
const borderRadius = thickness / 2;
|
|
||||||
const outerRadius = radius;
|
|
||||||
const innerRadius = outerRadius - thickness;
|
|
||||||
const radEndAngle = startAngle - radLength;
|
|
||||||
const borderRadiusAngle =
|
|
||||||
(borderRadius / (outerRadius * FULL_CIRCLE_IN_RADIANS)) *
|
|
||||||
FULL_CIRCLE_IN_RADIANS;
|
|
||||||
const isLongTrack = radLength - 2 * borderRadiusAngle > Math.PI;
|
|
||||||
|
|
||||||
return P()
|
|
||||||
.moveTo(
|
|
||||||
-Math.sin(startAngle) * (outerRadius - borderRadius),
|
|
||||||
Math.cos(startAngle) * (outerRadius - borderRadius),
|
|
||||||
)
|
|
||||||
.arcTo(
|
|
||||||
borderRadius,
|
|
||||||
borderRadius,
|
|
||||||
false,
|
|
||||||
true,
|
|
||||||
-Math.sin(startAngle - borderRadiusAngle) * outerRadius,
|
|
||||||
Math.cos(startAngle - borderRadiusAngle) * outerRadius,
|
|
||||||
)
|
|
||||||
.arcTo(
|
|
||||||
outerRadius,
|
|
||||||
outerRadius,
|
|
||||||
isLongTrack,
|
|
||||||
true,
|
|
||||||
-Math.sin(radEndAngle + borderRadiusAngle) * outerRadius,
|
|
||||||
Math.cos(radEndAngle + borderRadiusAngle) * outerRadius,
|
|
||||||
)
|
|
||||||
.arcTo(
|
|
||||||
borderRadius,
|
|
||||||
borderRadius,
|
|
||||||
false,
|
|
||||||
true,
|
|
||||||
-Math.sin(radEndAngle) * (outerRadius - borderRadius),
|
|
||||||
Math.cos(radEndAngle) * (outerRadius - borderRadius),
|
|
||||||
)
|
|
||||||
.lineTo(
|
|
||||||
-Math.sin(radEndAngle) * (innerRadius + borderRadius),
|
|
||||||
Math.cos(radEndAngle) * (innerRadius + borderRadius),
|
|
||||||
)
|
|
||||||
.arcTo(
|
|
||||||
borderRadius,
|
|
||||||
borderRadius,
|
|
||||||
false,
|
|
||||||
true,
|
|
||||||
-Math.sin(radEndAngle + borderRadiusAngle) * innerRadius,
|
|
||||||
Math.cos(radEndAngle + borderRadiusAngle) * innerRadius,
|
|
||||||
)
|
|
||||||
.arcTo(
|
|
||||||
innerRadius,
|
|
||||||
innerRadius,
|
|
||||||
isLongTrack,
|
|
||||||
false,
|
|
||||||
-Math.sin(startAngle - borderRadiusAngle) * innerRadius,
|
|
||||||
Math.cos(startAngle - borderRadiusAngle) * innerRadius,
|
|
||||||
)
|
|
||||||
.arcTo(
|
|
||||||
borderRadius,
|
|
||||||
borderRadius,
|
|
||||||
false,
|
|
||||||
true,
|
|
||||||
-Math.sin(startAngle) * (innerRadius + borderRadius),
|
|
||||||
Math.cos(startAngle) * (innerRadius + borderRadius),
|
|
||||||
)
|
|
||||||
.close()
|
|
||||||
.stringify();
|
|
||||||
};
|
|
||||||
|
|
||||||
let items = [
|
|
||||||
{
|
|
||||||
c: "gym",
|
|
||||||
progress: $gym.filter((c) => c.completed).length / $gym.length,
|
|
||||||
level: 0,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
c: "cardio",
|
|
||||||
progress: $diet.filter((c) => !c.excluded).length / $cardio.length,
|
|
||||||
level: 1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
c: "diet",
|
|
||||||
progress:
|
|
||||||
$cardio.filter((c) => c.completed).length /
|
|
||||||
$diet.filter((c) => !c.excluded).length,
|
|
||||||
level: 2,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<figure>
|
|
||||||
<svg viewBox="0 0 {size} {size}" role="presentation">
|
|
||||||
<g transform="${`translate(${x},${y})`}" fill="none">
|
|
||||||
<g transform={`translate(${size / 2},${size / 2})`}>
|
|
||||||
{#each items as { c, progress, level }}
|
|
||||||
<path
|
|
||||||
fill="#fff"
|
|
||||||
opacity="0.066"
|
|
||||||
d={points(
|
|
||||||
size / 2 - level * (segmentHeight + 4),
|
|
||||||
span,
|
|
||||||
segmentHeight,
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
class={c}
|
|
||||||
fill="currentColor"
|
|
||||||
d={points(
|
|
||||||
size / 2 - level * (segmentHeight + 4),
|
|
||||||
progress * span,
|
|
||||||
segmentHeight,
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
{/each}
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
</figure>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
svg {
|
|
||||||
display: block;
|
|
||||||
max-width: 80%;
|
|
||||||
aspect-ratio: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
figure {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
place-content: center;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0;
|
|
||||||
margin: 2rem 0 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cardio {
|
|
||||||
color: #5dc5f8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gym {
|
|
||||||
color: #f62b5a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.diet {
|
|
||||||
color: #35d450;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { gym, cardio, diet, currentView } from "./store";
|
import { gym, cardio, diet, currentView } from "./store";
|
||||||
import Arc from "./Arc.svelte";
|
|
||||||
let gymProgress = $derived($gym.filter((c) => c.completed).length);
|
let gymProgress = $derived($gym.filter((c) => c.completed).length);
|
||||||
let cardioProgress = $derived($cardio.filter((c) => c.completed).length);
|
let cardioProgress = $derived($cardio.filter((c) => c.completed).length);
|
||||||
let dietProgress = $derived($diet.filter((c) => c.completed).length);
|
let dietProgress = $derived($diet.filter((c) => c.completed).length);
|
||||||
|
|
@ -12,9 +11,8 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<h1>Dags att komma i form!</h1>
|
<h1>Dags att komma i form!</h1>
|
||||||
<Arc />
|
<div class="progress">
|
||||||
<div class="progress">
|
|
||||||
<h2>Styrketräning, 3d/v under 11 veckor</h2>
|
<h2>Styrketräning, 3d/v under 11 veckor</h2>
|
||||||
<div class="progress-row">
|
<div class="progress-row">
|
||||||
<progress class="gym" value={gymProgress} max={$gym.length}></progress>
|
<progress class="gym" value={gymProgress} max={$gym.length}></progress>
|
||||||
|
|
@ -23,8 +21,7 @@
|
||||||
</div>
|
</div>
|
||||||
<h2>Konditionsträning, 3d/v under 7 veckor</h2>
|
<h2>Konditionsträning, 3d/v under 7 veckor</h2>
|
||||||
<div class="progress-row">
|
<div class="progress-row">
|
||||||
<progress class="cardio" value={cardioProgress} max={$cardio.length}
|
<progress class="cardio" value={cardioProgress} max={$cardio.length}></progress>
|
||||||
></progress>
|
|
||||||
<i>{cardioProgress} / {$cardio.length}</i>
|
<i>{cardioProgress} / {$cardio.length}</i>
|
||||||
<button class="clickable cardio" onclick={() => navigate(2)}>+</button>
|
<button class="clickable cardio" onclick={() => navigate(2)}>+</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -34,11 +31,13 @@
|
||||||
<i>{dietProgress} / {dietTotal}</i>
|
<i>{dietProgress} / {dietTotal}</i>
|
||||||
<button class="clickable diet" onclick={() => navigate(3)}>+</button>
|
<button class="clickable diet" onclick={() => navigate(3)}>+</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="top-button">
|
<div class="top-button">
|
||||||
<button class="clickable info" onclick={() => navigate(4)}> Va? </button>
|
<button class="clickable info" onclick={() => navigate(4)}>
|
||||||
</div>
|
Va?
|
||||||
<p class="madeby">Skapad av <a href="https://madr.se">Anders</a></p>
|
</button>
|
||||||
|
</div>
|
||||||
|
<p class="madeby">Skapad av <a href="https://madr.se">Anders</a></p>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
@ -103,12 +102,7 @@
|
||||||
*/
|
*/
|
||||||
::-moz-progress-bar {
|
::-moz-progress-bar {
|
||||||
background-color: var(--pcolor);
|
background-color: var(--pcolor);
|
||||||
background-image: linear-gradient(
|
background-image: linear-gradient(rgba(255,255,255,0.25) 0, rgba(255,255,255,0.25) 4px, var(--pcolor) 4px, var(--pcolor));
|
||||||
rgba(255, 255, 255, 0.25) 0,
|
|
||||||
rgba(255, 255, 255, 0.25) 4px,
|
|
||||||
var(--pcolor) 4px,
|
|
||||||
var(--pcolor)
|
|
||||||
);
|
|
||||||
border: 0.25rem solid var(--pcolor);
|
border: 0.25rem solid var(--pcolor);
|
||||||
border-width: 0.25rem 0.5rem;
|
border-width: 0.25rem 0.5rem;
|
||||||
border-radius: var(--br);
|
border-radius: var(--br);
|
||||||
|
|
@ -116,12 +110,7 @@
|
||||||
|
|
||||||
::-webkit-progress-value {
|
::-webkit-progress-value {
|
||||||
background-color: var(--pcolor);
|
background-color: var(--pcolor);
|
||||||
background-image: linear-gradient(
|
background-image: linear-gradient(rgba(255,255,255,0.25) 0, rgba(255,255,255,0.25) 4px, var(--pcolor) 4px, var(--pcolor));
|
||||||
rgba(255, 255, 255, 0.25) 0,
|
|
||||||
rgba(255, 255, 255, 0.25) 4px,
|
|
||||||
var(--pcolor) 4px,
|
|
||||||
var(--pcolor)
|
|
||||||
);
|
|
||||||
border: 0.25rem solid var(--pcolor);
|
border: 0.25rem solid var(--pcolor);
|
||||||
border-width: 0.25rem 0.5rem;
|
border-width: 0.25rem 0.5rem;
|
||||||
border-radius: var(--br);
|
border-radius: var(--br);
|
||||||
|
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
export default function () {
|
|
||||||
const commands: string[] = [];
|
|
||||||
return {
|
|
||||||
stringify() {
|
|
||||||
return `${commands.join("\n")}`;
|
|
||||||
},
|
|
||||||
arcTo(
|
|
||||||
ry: number,
|
|
||||||
rx: number,
|
|
||||||
long: boolean,
|
|
||||||
cw: boolean,
|
|
||||||
y: number,
|
|
||||||
x: number,
|
|
||||||
) {
|
|
||||||
commands.push(`A ${rx} ${ry} 0 ${long ? 1 : 0} ${cw ? 1 : 0} ${x} ${y}`);
|
|
||||||
return this;
|
|
||||||
},
|
|
||||||
moveTo(y: number, x: number) {
|
|
||||||
commands.push(`M ${x} ${y}`);
|
|
||||||
return this;
|
|
||||||
},
|
|
||||||
lineTo(y: number, x: number) {
|
|
||||||
commands.push(`L ${x} ${y}`);
|
|
||||||
return this;
|
|
||||||
},
|
|
||||||
close() {
|
|
||||||
commands.push("z");
|
|
||||||
return this;
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
Loading…
Add table
Reference in a new issue