Pomodoro Timer
{{ label }}
diff --git a/src/components/IntervalEditBox.vue b/src/components/IntervalEditBox.vue
index 95f0a9c..56db351 100644
--- a/src/components/IntervalEditBox.vue
+++ b/src/components/IntervalEditBox.vue
@@ -1,6 +1,7 @@
+
+
+
+
diff --git a/src/components/TheControls.vue b/src/components/TheControls.vue
index 0b29df3..4077449 100644
--- a/src/components/TheControls.vue
+++ b/src/components/TheControls.vue
@@ -5,6 +5,11 @@ import BaseControl from '@/components/BaseControl.vue';
import LayoutInline from '@/components/LayoutInline.vue';
import { Status } from '@/types';
import { useMain } from '@/stores/main';
+import IconPlay from '~icons/zondicons/play';
+import IconPause from '~icons/zondicons/pause';
+import IconReload from '~icons/zondicons/reload';
+import IconWrench from '~icons/zondicons/wrench';
+import IconFastForward from '~icons/zondicons/fast-forward';
defineEmits<{
play: [];
@@ -25,19 +30,20 @@ const isPlaying = computed(() => status === Status.Play);
{{ isPlaying ? 'Pause' : 'Play' }}
-
- Skip
- Reset
+
+
+ Skip
+
+
+ Reset
+
diff --git a/src/components/TheCycle.vue b/src/components/TheCycle.vue
index c643103..339eeaf 100644
--- a/src/components/TheCycle.vue
+++ b/src/components/TheCycle.vue
@@ -1,25 +1,27 @@
-
+
-
-
-
-
diff --git a/src/components/TheGraphicTimer.vue b/src/components/TheGraphicTimer.vue
index 4fec526..917b6d7 100644
--- a/src/components/TheGraphicTimer.vue
+++ b/src/components/TheGraphicTimer.vue
@@ -46,7 +46,7 @@ const originalFavicon = new Map();
function renderCanvas() {
const { duration } = cycle.currentInterval;
- const percent = (duration - remaining.value) / duration;
+ const elapsedRatio = (duration - remaining.value) / duration;
if (!canvasRef.value) {
return;
}
@@ -57,14 +57,18 @@ function renderCanvas() {
return;
}
const center = size / 2;
+ const radius = center;
const color = window.getComputedStyle(canvas).getPropertyValue('color');
- const start = Math.PI / -2;
- const end = start + 2 * Math.PI * percent;
- const radius = center;
+ // -90deg starting from the x axis
+ const rotation = Math.PI / -2;
+
+ // start angle + 360deg * elapsed ratio
+ const start = rotation + 2 * Math.PI * elapsedRatio;
+ // start angle + 360deg
+ const end = rotation + 2 * Math.PI;
ctx.clearRect(0, 0, canvas.width, canvas.height);
- drawCircle(ctx, color, center, radius);
- drawCircle(ctx, '#fff', center, radius - center / 10, start, end);
+ drawCircle(ctx, color, center, radius, start, end);
const favicons = document.querySelectorAll(
'link[rel="icon"][type="image/png"]',
diff --git a/tsconfig.json b/tsconfig.json
index 037cca9..6108648 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -21,7 +21,11 @@
"noFallthroughCasesInSwitch": true,
"esModuleInterop": true,
- "types": ["vite/client", "vite-plugin-pwa/client"],
+ "types": [
+ "vite/client",
+ "vite-plugin-pwa/client",
+ "unplugin-icons/types/vue"
+ ],
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
diff --git a/vite.config.ts b/vite.config.ts
index 3e5a912..8d7a894 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,6 +4,7 @@ import vue from '@vitejs/plugin-vue';
import svgLoader from 'vite-svg-loader';
import { VitePWA } from 'vite-plugin-pwa';
import tailwindcss from '@tailwindcss/vite';
+import Icons from 'unplugin-icons/vite';
// https://vitejs.dev/config/
export default defineConfig({
@@ -16,6 +17,15 @@ export default defineConfig({
vue(),
tailwindcss(),
svgLoader(),
+ Icons({
+ compiler: 'vue3',
+ defaultClass: 'inline-flex aspect-square w-[1em] fill-current',
+ iconCustomizer(_collection, _icon, props) {
+ props['aria-hidden'] = 'true';
+ props.width = '1em';
+ props.height = '1em';
+ },
+ }),
VitePWA({
injectRegister: null,
manifest: {
Intervals
--
-
-
@@ -87,15 +90,15 @@ watch(