scambier/n0mbers
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

PWA

Browse Source
This commit is contained in:
Simon Cambier 2022-02-22 12:33:10 +01:00
parent 0cd8eaf580
commit cc86729dbc
11 changed files with 1891 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
favicon.pdn
View File

Binary file not shown.

BIN
favicon.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 24 KiB

13
index.html
View File

@ -2,13 +2,18 @@
<html lang="en" translate="no" class="dark h-full bg-stone-900"> <html lang="en" translate="no" class="dark h-full bg-stone-900">
<head> <head>
<meta charset="UTF-8" /> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" href="/icons/favicon.ico" />
<title>N0mbers</title> <title>N0mbers</title>
<meta name="description" content="Reach the result in five operations or less">
<link rel="icon" href="/icons/favicon.ico">
<link rel="alternate icon" href="/favicon.ico" type="image/png" sizes="16x16">
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" sizes="180x180">
<link rel="mask-icon" href="/icons/favicon.svg" color="#1C1917">
<meta name="theme-color" content="#1C1917">
</head> </head>
<body class="bg-stone-300 text-stone-900 dark:bg-stone-900 dark:text-stone-200 h-full relative transition-colors"> <body class="bg-stone-300 text-stone-900 dark:bg-stone-900 dark:text-stone-200 h-full relative">
<div id="app" class="h-full"></div> <div id="app" class="h-full"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>

4
package.json
View File

@ -45,7 +45,9 @@
"typescript": "~4.5.5", "typescript": "~4.5.5",
"unplugin-icons": "^0.13.2", "unplugin-icons": "^0.13.2",
"vite": "^2.8.4", "vite": "^2.8.4",
"vite-plugin-pwa": "^0.11.13",
"vitest": "^0.1.27", "vitest": "^0.1.27",
"vue-tsc": "^0.29.8" "vue-tsc": "^0.29.8",
"workbox-window": "^6.4.2"
} }
} }

1826
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

2
src/App.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div <div
class="container flex overflow-hidden relative flex-col mx-auto max-w-md h-full border border-cyan-500"> class="container flex overflow-hidden relative flex-col mx-auto max-w-md h-full">
<div class="px-2 w-full h-full"> <div class="px-2 w-full h-full">
<AppHeader class="" /> <AppHeader class="" />
<!-- keep relative for transition --> <!-- keep relative for transition -->

2
src/components/PlaquettesList.vue
View File

@ -9,7 +9,7 @@
@click="click(item)" @click="click(item)"
class="h-11 border" class="h-11 border"
:class="{ :class="{
'text-stone-600 border-stone-600': !item.free, 'dark:text-stone-600 dark:border-stone-600 text-stone-500 border-stone-400': !item.free,
'hover:border-cyan-500': item.free, 'hover:border-cyan-500': item.free,
}" }"
:style="{ transitionDelay: `${initDelay * i}ms` }" :style="{ transitionDelay: `${initDelay * i}ms` }"

8
src/components/SideMenu.vue
View File

@ -2,7 +2,7 @@
<Transition name="menu"> <Transition name="menu">
<div <div
v-if="isSideMenuVisible" v-if="isSideMenuVisible"
class="flex absolute top-[1px] right-0 z-10 flex-col w-[50%] h-full bg-stone-300 dark:bg-stone-900 border-l border-l-cyan-500"> class="flex absolute top-[1px] right-0 z-10 flex-col p-2 w-[50%] h-full bg-stone-300 dark:bg-stone-900 border-l border-l-cyan-500">
<div class="h-12"> <div class="h-12">
<button @click="isSideMenuVisible = false"> <button @click="isSideMenuVisible = false">
<IconClose <IconClose
@ -17,6 +17,10 @@
lbl-right="Night" lbl-right="Night"
v-model="darkMode" /> v-model="darkMode" />
</div> </div>
<div class="text-xs text-stone-500 dark:text-stone-600">
Build {{ buildDate }}
</div>
</div> </div>
</Transition> </Transition>
</template> </template>
@ -41,4 +45,6 @@ import { isSideMenuVisible } from '@/composables/side-menu'
import IconClose from '~icons/ph/x' import IconClose from '~icons/ph/x'
import InputSwitch from './common/InputSwitch.vue' import InputSwitch from './common/InputSwitch.vue'
const buildDate = import.meta.env.VITE_BUILD_DATE
</script> </script>

11
src/main.ts
View File

@ -1,11 +1,12 @@
import './index.css' import './index.css'
import messages from '@intlify/vite-plugin-vue-i18n/messages' import messages from '@intlify/vite-plugin-vue-i18n/messages'
import { registerSW } from 'virtual:pwa-register'
import { createApp } from 'vue' import { createApp } from 'vue'
import { createI18n } from 'vue-i18n' import { createI18n } from 'vue-i18n'
import App from './App.vue' import App from '@/App.vue'
import router from './router' import router from '@/router'
const i18n = createI18n({ const i18n = createI18n({
legacy: false, legacy: false,
@ -14,6 +15,12 @@ const i18n = createI18n({
messages, messages,
}) })
registerSW({
onOfflineReady() {
// showToast('Ce jeu peut être installé<br>pour fonctionner hors-ligne.', 2000)
},
})
const app = createApp(App) const app = createApp(App)
app.use(router) app.use(router)

4
src/views/HomeView.vue
View File

@ -12,9 +12,7 @@
class="text-2xl btn"> class="text-2xl btn">
{{ t('dailyGame') }} {{ t('dailyGame') }}
</RouterLink> </RouterLink>
<span v-html="t('dailyDescription')"> <span v-html="t('dailyDescription')" />
</span>
</div> </div>
<!-- Random --> <!-- Random -->

35
vite.config.ts
View File

@ -4,6 +4,9 @@ import path from 'path'
import Icons from 'unplugin-icons/vite' import Icons from 'unplugin-icons/vite'
import { fileURLToPath, URL } from 'url' import { fileURLToPath, URL } from 'url'
import { defineConfig } from 'vite' import { defineConfig } from 'vite'
import { VitePWA } from 'vite-plugin-pwa'
process.env.VITE_BUILD_DATE = new Date().toISOString()
// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
@ -16,6 +19,38 @@ export default defineConfig({
vueI18n({ vueI18n({
include: path.resolve(__dirname, 'src/locales/**'), include: path.resolve(__dirname, 'src/locales/**'),
}), }),
VitePWA({
registerType: 'autoUpdate',
includeAssets: [
'icons/favicon.ico',
'robots.txt',
'icons/apple-touch-icon.png',
],
manifest: {
name: 'N0mbers',
short_name: 'N0mbers',
description: 'Reach the result in five operations or less',
theme_color: '#198A42',
icons: [
{
src: 'icons/android-chrome-192x192.png',
sizes: '192x192',
type: 'image/png',
},
{
src: 'icons/android-chrome-512x512.png',
sizes: '512x512',
type: 'image/png',
},
{
src: 'icons/android-chrome-512x512.png',
sizes: '512x512',
type: 'image/png',
purpose: 'any maskable',
},
],
},
}),
], ],
resolve: { resolve: {
alias: { alias: {