diff --git a/src/hooks/useTimer.ts b/src/hooks/useTimer.ts index 273ea27..3188195 100644 --- a/src/hooks/useTimer.ts +++ b/src/hooks/useTimer.ts @@ -18,7 +18,7 @@ export const useTimer = () => { const seconds = ref(0) const interval = ref(5) const sessionSeconds = ref(interval.value * 60) - const isProgrammer1Turn = ref(true) + const isDev1Turn = ref(true) const time = computed(() => formatSeconds(seconds.value)) const session = computed(() => formatSeconds(sessionSeconds.value)) @@ -36,11 +36,12 @@ export const useTimer = () => { stopwatchId = setInterval(() => { seconds.value++ - if (seconds.value % intervalSeconds.value === 0) { + const isTimeToChange = seconds.value % intervalSeconds.value === 0 + if (isTimeToChange) { sessionSeconds.value = intervalSeconds.value - isProgrammer1Turn.value = !isProgrammer1Turn.value + isDev1Turn.value = !isDev1Turn.value - const dev = isProgrammer1Turn.value ? 'Dev 1' : 'Dev 2' + const dev = isDev1Turn.value ? 'Dev 1' : 'Dev 2' notify('Changement !', { body: `${dev}, à votre tour !` @@ -69,7 +70,7 @@ export const useTimer = () => { pause() seconds.value = 0 sessionSeconds.value = intervalSeconds.value - isProgrammer1Turn.value = true + isDev1Turn.value = true } return { @@ -80,6 +81,6 @@ export const useTimer = () => { timeState, time, session, - isProgrammer1Turn + isDev1Turn } } diff --git a/src/views/Home.vue b/src/views/Home.vue index a86d8e3..1d9e10a 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -6,16 +6,8 @@ @update="(int) => (interval = int)" />
- - + +
{{ time }}
@@ -70,7 +62,7 @@ export default defineComponent({ timeState, time, session, - isProgrammer1Turn + isDev1Turn } = useTimer() return { @@ -82,7 +74,7 @@ export default defineComponent({ timeState, time, session, - isProgrammer1Turn + isDev1Turn } } }) -- 2.51.2 From 4f235a82642f61d1ebd45930ba70b6ecfeb17687 Mon Sep 17 00:00:00 2001 From: Julien Calixte Date: Sat, 11 Jul 2020 23:03:32 +0200 Subject: [PATCH 02/13] :heavy_plus_sign: (vuex) add vuex-persist and vuex composition --- package.json | 4 +++- yarn.lock | 18 ++++++++++++++++++ 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index bba1d90..db65ece 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,9 @@ "register-service-worker": "^1.7.1", "vue": "^2.6.11", "vue-router": "^3.2.0", - "vuex": "^3.4.0" + "vuex": "^3.4.0", + "vuex-composition-helpers": "^1.0.18", + "vuex-persist": "^2.2.0" }, "devDependencies": { "@typescript-eslint/eslint-plugin": "^2.33.0", diff --git a/yarn.lock b/yarn.lock index 0a242f6..a9a516f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5335,6 +5335,11 @@ lodash.memoize@^4.1.2: resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe" integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4= +lodash.merge@^4.6.2: + version "4.6.2" + resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a" + integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ== + lodash.template@^4.4.0: version "4.5.0" resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.5.0.tgz#f976195cf3f347d0d5f52483569fe8031ccce8ab" @@ -8722,6 +8727,19 @@ vue@^2.6.11: resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5" integrity sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ== +vuex-composition-helpers@^1.0.18: + version "1.0.18" + resolved "https://registry.yarnpkg.com/vuex-composition-helpers/-/vuex-composition-helpers-1.0.18.tgz#62b50a6ec34885c113b825b18d9efbbe0ee28dfe" + integrity sha512-IM0CankybZn7rwm9EXQ13fG3w6c/zl89yOmrgI2CKd2dQIud53Hh73x48D++sV8ea9K530/vKyoAP5/drg1Ajg== + +vuex-persist@^2.2.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/vuex-persist/-/vuex-persist-2.2.0.tgz#4acec75562896b045c43d319690b93d6bc1b2bbc" + integrity sha512-o/qbBeMcKZZqMvCXc7kfIew/5cjHxlP1f53rx5YYp3r2tk2kxXYK/UZumxKn7OXywlurl2r0mgkuBzH6nIWFjw== + dependencies: + flatted "^2.0.0" + lodash.merge "^4.6.2" + vuex@^3.4.0: version "3.5.1" resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.5.1.tgz#f1b8dcea649bc25254cf4f4358081dbf5da18b3d" -- 2.51.2 From d9d83372979234618b5c43a84253c5732fb8e805 Mon Sep 17 00:00:00 2001 From: Julien Calixte Date: Sat, 11 Jul 2020 23:03:55 +0200 Subject: [PATCH 03/13] :building_construction: (vuex) init vuex store --- src/store/index.ts | 56 +++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 50 insertions(+), 6 deletions(-) diff --git a/src/store/index.ts b/src/store/index.ts index 0107c20..421ae72 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -1,11 +1,55 @@ import Vue from 'vue' -import Vuex from 'vuex' +import Vuex, { ActionContext, ActionTree } from 'vuex' +import VuexPersistence from 'vuex-persist' Vue.use(Vuex) -export default new Vuex.Store({ - state: {}, - mutations: {}, - actions: {}, - modules: {} +export interface State { + interval: number + withMusic: boolean +} + +export interface RootActions extends ActionTree { + setInterval: (ctx: ActionContext, payload: number) => void + setWithMusic: (ctx: ActionContext, payload: boolean) => void +} + +const vuexLocal = new VuexPersistence({ + key: 'binome', + storage: window.localStorage +}) + +const SET_INTERVAL = 'SET_INTERVAL' +const WITH_MUSIC = 'WITH_MUSIC' + +const store = new Vuex.Store({ + state: { + interval: 5, + withMusic: true + }, + getters: { + interval: ({ interval }) => interval, + withMusic: ({ withMusic }) => withMusic + }, + mutations: { + [SET_INTERVAL](state, interval: number) { + state.interval = interval + }, + [WITH_MUSIC](state, withMusic: boolean) { + state.withMusic = withMusic + } + }, + actions: { + setInterval({ commit }, interval: number) { + if (interval > 0) { + commit(SET_INTERVAL, interval) + } + }, + setWithMusic({ commit }, withMusic: number) { + commit(WITH_MUSIC, withMusic) + } + }, + plugins: [vuexLocal.plugin] }) + +export default store -- 2.51.2 From d7f185fa6ba80e53206b47010282dc4ac3f13dda Mon Sep 17 00:00:00 2001 From: Julien Calixte Date: Sat, 11 Jul 2020 23:04:23 +0200 Subject: [PATCH 04/13] :sparkles: (persistance) persist user choices Lazy load youtube video --- src/components/IntervalInput.vue | 17 ++++++----- src/components/ZoneMusic.vue | 48 ++++++++++++++++++++++++++++++++ src/hooks/useInterval.ts | 13 +++++++++ src/hooks/useMusic.ts | 10 +++++-- src/hooks/useTimer.ts | 3 +- src/views/Home.vue | 33 +++------------------- 6 files changed, 84 insertions(+), 40 deletions(-) create mode 100644 src/components/ZoneMusic.vue create mode 100644 src/hooks/useInterval.ts diff --git a/src/components/IntervalInput.vue b/src/components/IntervalInput.vue index 1e2be53..6fa9067 100644 --- a/src/components/IntervalInput.vue +++ b/src/components/IntervalInput.vue @@ -8,30 +8,33 @@ diff --git a/src/hooks/useInterval.ts b/src/hooks/useInterval.ts new file mode 100644 index 0000000..6870ef5 --- /dev/null +++ b/src/hooks/useInterval.ts @@ -0,0 +1,13 @@ +import { useGetters, useActions } from 'vuex-composition-helpers' +import { GetterTree } from 'vuex' +import { State, RootActions } from '@/store' + +export const useInterval = () => { + const { interval } = useGetters>(['interval']) + const { setInterval } = useActions(['setInterval']) + + return { + interval, + setInterval + } +} diff --git a/src/hooks/useMusic.ts b/src/hooks/useMusic.ts index d5c138b..1a1fcf8 100644 --- a/src/hooks/useMusic.ts +++ b/src/hooks/useMusic.ts @@ -1,9 +1,13 @@ -import { ref } from '@vue/composition-api' +import { useGetters, useActions } from 'vuex-composition-helpers' +import { GetterTree } from 'vuex' +import { State, RootActions } from '@/store' export const useMusic = () => { - const hasMusic = ref(true) + const { withMusic } = useGetters>(['withMusic']) + const { setWithMusic } = useActions(['setWithMusic']) return { - hasMusic + withMusic, + setWithMusic } } diff --git a/src/hooks/useTimer.ts b/src/hooks/useTimer.ts index 3188195..b2d4dcc 100644 --- a/src/hooks/useTimer.ts +++ b/src/hooks/useTimer.ts @@ -1,6 +1,7 @@ import { ref, computed, watch } from '@vue/composition-api' import { StopwatchState } from '@/types/StopwatchState' import { notify } from '@/utils/notification' +import { useInterval } from './useInterval' const format = (num: number) => { return num.toString().padStart(2, '0') @@ -16,7 +17,7 @@ const formatSeconds = (seconds: number) => { export const useTimer = () => { const timeState = ref('stopped') const seconds = ref(0) - const interval = ref(5) + const { interval } = useInterval() const sessionSeconds = ref(interval.value * 60) const isDev1Turn = ref(true) diff --git a/src/views/Home.vue b/src/views/Home.vue index 1d9e10a..346b14a 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -1,10 +1,6 @@ + + diff --git a/src/styles/app.scss b/src/styles/app.scss index 1f8ea2b..c798ba2 100644 --- a/src/styles/app.scss +++ b/src/styles/app.scss @@ -1,9 +1,7 @@ @import url('https://fonts.googleapis.com/css2?family=Fira+Mono&display=swap'); @import '~pretty-checkbox/src/pretty-checkbox'; -$color: #f8efba; -$bgcolor: #2c3a47; -$font-family: 'Fira Mono', monospace; +@import './variables'; body { text-align: center; diff --git a/src/styles/variables.scss b/src/styles/variables.scss new file mode 100644 index 0000000..2ec066a --- /dev/null +++ b/src/styles/variables.scss @@ -0,0 +1,3 @@ +$color: #f8efba; +$bgcolor: #2c3a47; +$font-family: 'Fira Mono', monospace; -- 2.51.2 From c5cd14d4f4dadb9a44041c3a96119b0688451597 Mon Sep 17 00:00:00 2001 From: Julien Calixte Date: Sun, 12 Jul 2020 00:41:37 +0200 Subject: [PATCH 09/13] :lipstick: (music) --- src/components/ZoneMusic.vue | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/ZoneMusic.vue b/src/components/ZoneMusic.vue index e99d8e9..04e82fd 100644 --- a/src/components/ZoneMusic.vue +++ b/src/components/ZoneMusic.vue @@ -58,7 +58,10 @@ export default defineComponent({ .pretty { display: flex; justify-content: center; - gap: 1rem; +} + +label { + margin: 0 1rem; } .disabled { -- 2.51.2 From 0030bda5359cd45dda2e56d515debe5bac60cfa6 Mon Sep 17 00:00:00 2001 From: Julien Calixte Date: Sun, 12 Jul 2020 01:12:22 +0200 Subject: [PATCH 10/13] :lipstick: (switch) change switch lib --- package.json | 1 - src/App.vue | 2 +- src/components/ZoneMusic.vue | 40 ++++---- src/styles/app.scss | 2 +- src/styles/plume.scss | 172 +++++++++++++++++++++++++++++++++++ src/styles/variables.scss | 5 + yarn.lock | 5 - 7 files changed, 198 insertions(+), 29 deletions(-) create mode 100644 src/styles/plume.scss diff --git a/package.json b/package.json index db65ece..277b104 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,6 @@ "@vue/composition-api": "^1.0.0-beta.1", "core-js": "^3.6.5", "plyr": "^3.6.2", - "pretty-checkbox": "^3.0.3", "register-service-worker": "^1.7.1", "vue": "^2.6.11", "vue-router": "^3.2.0", diff --git a/src/App.vue b/src/App.vue index a049fb5..84118a1 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,5 +1,5 @@