From 355452c18d80e322f1e163abae8f8c4f74d651cd Mon Sep 17 00:00:00 2001 From: Araozu Date: Fri, 16 Oct 2020 07:44:11 -0500 Subject: [PATCH] Mejorado soporte para modo de color automatico --- public/img/simbolos-cartas/TClaro_corazon.svg | 25 +++++++++++++ .../img/simbolos-cartas/TClaro_diamante.svg | 25 +++++++++++++ public/img/simbolos-cartas/TClaro_pica.svg | 24 +++++++++++++ public/img/simbolos-cartas/TClaro_trebol.svg | 24 +++++++++++++ .../img/simbolos-cartas/TOscuro_corazon.svg | 24 +++++++++++++ .../img/simbolos-cartas/TOscuro_diamante.svg | 25 +++++++++++++ public/img/simbolos-cartas/TOscuro_pica.svg | 24 +++++++++++++ public/img/simbolos-cartas/TOscuro_trebol.svg | 23 ++++++++++++ src/App.vue | 14 ++++++-- src/components/carta.vue | 10 ++---- src/components/getEsOscuro.ts | 17 +++++++++ src/components/img-cartas/v-img-corazon.vue | 35 +++++++++++++++++++ src/store/index.ts | 9 +++-- src/views/Ayuda/Ayuda.vue | 6 +++- 14 files changed, 271 insertions(+), 14 deletions(-) create mode 100755 public/img/simbolos-cartas/TClaro_corazon.svg create mode 100755 public/img/simbolos-cartas/TClaro_diamante.svg create mode 100755 public/img/simbolos-cartas/TClaro_pica.svg create mode 100755 public/img/simbolos-cartas/TClaro_trebol.svg create mode 100755 public/img/simbolos-cartas/TOscuro_corazon.svg create mode 100755 public/img/simbolos-cartas/TOscuro_diamante.svg create mode 100755 public/img/simbolos-cartas/TOscuro_pica.svg create mode 100755 public/img/simbolos-cartas/TOscuro_trebol.svg create mode 100644 src/components/getEsOscuro.ts create mode 100644 src/components/img-cartas/v-img-corazon.vue diff --git a/public/img/simbolos-cartas/TClaro_corazon.svg b/public/img/simbolos-cartas/TClaro_corazon.svg new file mode 100755 index 0000000..4f49c48 --- /dev/null +++ b/public/img/simbolos-cartas/TClaro_corazon.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + diff --git a/public/img/simbolos-cartas/TClaro_diamante.svg b/public/img/simbolos-cartas/TClaro_diamante.svg new file mode 100755 index 0000000..b55de55 --- /dev/null +++ b/public/img/simbolos-cartas/TClaro_diamante.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + diff --git a/public/img/simbolos-cartas/TClaro_pica.svg b/public/img/simbolos-cartas/TClaro_pica.svg new file mode 100755 index 0000000..3a0cc14 --- /dev/null +++ b/public/img/simbolos-cartas/TClaro_pica.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + diff --git a/public/img/simbolos-cartas/TClaro_trebol.svg b/public/img/simbolos-cartas/TClaro_trebol.svg new file mode 100755 index 0000000..638c0bd --- /dev/null +++ b/public/img/simbolos-cartas/TClaro_trebol.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + diff --git a/public/img/simbolos-cartas/TOscuro_corazon.svg b/public/img/simbolos-cartas/TOscuro_corazon.svg new file mode 100755 index 0000000..acea360 --- /dev/null +++ b/public/img/simbolos-cartas/TOscuro_corazon.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + diff --git a/public/img/simbolos-cartas/TOscuro_diamante.svg b/public/img/simbolos-cartas/TOscuro_diamante.svg new file mode 100755 index 0000000..0c1e9dd --- /dev/null +++ b/public/img/simbolos-cartas/TOscuro_diamante.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + diff --git a/public/img/simbolos-cartas/TOscuro_pica.svg b/public/img/simbolos-cartas/TOscuro_pica.svg new file mode 100755 index 0000000..2b59007 --- /dev/null +++ b/public/img/simbolos-cartas/TOscuro_pica.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + diff --git a/public/img/simbolos-cartas/TOscuro_trebol.svg b/public/img/simbolos-cartas/TOscuro_trebol.svg new file mode 100755 index 0000000..08fe903 --- /dev/null +++ b/public/img/simbolos-cartas/TOscuro_trebol.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + diff --git a/src/App.vue b/src/App.vue index 6f52e12..c89bd79 100644 --- a/src/App.vue +++ b/src/App.vue @@ -10,9 +10,17 @@ export default defineComponent({ setup() { const store = useStore(); const modoColor = computed(() => store.state.modoColor); - watch(modoColor, (n) => { - console.log(`Modo color cambiado: ${n}`); - }); + + const query = window.matchMedia("(prefers-color-scheme: dark)"); + const funActualizarMediaQuery = (ev: MediaQueryListEvent | MediaQueryList) => { + store.commit( + "setModoColorUsuario", + ev.matches? "oscuro": "claro" + ); + }; + query.addEventListener("change", funActualizarMediaQuery); + funActualizarMediaQuery(query); + } }); diff --git a/src/components/carta.vue b/src/components/carta.vue index 1356f87..f16d5b9 100644 --- a/src/components/carta.vue +++ b/src/components/carta.vue @@ -13,6 +13,7 @@ div(@click="fnDescartar" style="display: inline-block") import {defineComponent, computed} from "vue"; import {useDimensions} from "@/components/useDimensions"; import { useStore } from "vuex"; +import { getEsOscuro } from "@/components/getEsOscuro"; export default defineComponent({ name: "carta", @@ -39,14 +40,7 @@ export default defineComponent({ const store = useStore(); const pxesc = computed(() => pH.value + "px"); - const esOscuro = computed(() => { - if (store.state.modoColor === "oscuro") { - return true; - } else if (store.state.modoColor === "auto" && window.matchMedia("(prefers-color-scheme: dark)").matches) { - return true; - } - return false; - }); + const {esOscuro} = getEsOscuro(store); const tipo = computed( () => (props.valor << 23) >>> 28); const tipoCarta = computed(() => { diff --git a/src/components/getEsOscuro.ts b/src/components/getEsOscuro.ts new file mode 100644 index 0000000..1f4b24b --- /dev/null +++ b/src/components/getEsOscuro.ts @@ -0,0 +1,17 @@ +import { computed } from "vue"; +import { RiMaJonState } from "@/store"; +import { Store } from "vuex"; + +export const getEsOscuro = (store: Store) => { + const esOscuro = computed(() => { + if (store.state.modoColor === "oscuro") { + return true; + } else if (store.state.modoColor === "auto") { + console.log(store.state.modoColorUsuario); + return store.state.modoColorUsuario === "oscuro"; + } + return false; + }); + + return {esOscuro}; +}; diff --git a/src/components/img-cartas/v-img-corazon.vue b/src/components/img-cartas/v-img-corazon.vue new file mode 100644 index 0000000..c4b89aa --- /dev/null +++ b/src/components/img-cartas/v-img-corazon.vue @@ -0,0 +1,35 @@ + + + + + diff --git a/src/store/index.ts b/src/store/index.ts index 8d9de7f..b5ca838 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -8,14 +8,16 @@ const vuexLocal = new VuexPersistence({ export interface RiMaJonState { idUsuario: string | undefined, nombreUsuario: string | undefined, - modoColor: string + modoColor: string, + modoColorUsuario: string } export default createStore({ state: { idUsuario: undefined, nombreUsuario: undefined, - modoColor: "auto" + modoColor: "auto", + modoColorUsuario: "claro" }, mutations: { setIdUsuario(state, id) { @@ -26,6 +28,9 @@ export default createStore({ }, setModoColor(state, modo) { state.modoColor = modo; + }, + setModoColorUsuario(state, modo) { + state.modoColorUsuario = modo; } }, actions: {}, diff --git a/src/views/Ayuda/Ayuda.vue b/src/views/Ayuda/Ayuda.vue index 8f0eb3a..6b0fb70 100644 --- a/src/views/Ayuda/Ayuda.vue +++ b/src/views/Ayuda/Ayuda.vue @@ -3,6 +3,8 @@ div h1 Sobre el juego p Ri Ma Jon es un juego inspirado en Mahjong, pero ejecutado con cartas. + vImgCorazon + h2 Cartas p Existen 108 cartas en el juego: @@ -358,6 +360,7 @@ div import {defineComponent} from "vue"; import carta from "@/components/carta.vue"; import grupoCartas from "../../components/grupo-cartas.vue"; +import vImgCorazon from "../../components/img-cartas/v-img-corazon.vue" const cartas = [2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8, 9, 9, 10, 10, 11, 11, 12, 12, 13, 13, 14, 14, 15, 15, 16, 16, 17, 17, 18, 18, 19, 19, 20, 20, 21, 21, 34, 34, 35, 35, 36, 36, 37, 37, 38, 38, 39, 39, 40, 40, 41, @@ -422,7 +425,8 @@ export default defineComponent({ name: "Ayuda", components: { carta, - grupoCartas + grupoCartas, + vImgCorazon }, setup() { return {