Skip to content

Commit

Permalink
rework to be compatible with vuetify 3.7.0
Browse files Browse the repository at this point in the history
  • Loading branch information
halamix2 committed Nov 17, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent 93dcbe5 commit e26f211
Showing 7 changed files with 161 additions and 107 deletions.
3 changes: 2 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -3,7 +3,8 @@
## WIP

- Show help when hovering over the thumbnail
- refactor code
- Input fields values are now transferrable between views
- Refactor code

## 0.2.2

12 changes: 4 additions & 8 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -33,7 +33,7 @@
"vite-plugin-vuetify": "^2.0.4",
"vue": "^3.5.13",
"vue-router": "^4.4.5",
"vuetify": "3.6.15"
"vuetify": "^3.7.4"
},
"devDependencies": {
"@eslint/eslintrc": "^3.2.0",
73 changes: 40 additions & 33 deletions src/App.vue
Original file line number Diff line number Diff line change
@@ -5,54 +5,61 @@ const appVersion = import.meta.env.PACKAGE_VERSION
</script>

<template>
<v-app>
<v-app-bar :elevation="2" density="default">
<!--<template #prepend>
<v-responsive>
<v-app>
<v-app-bar :elevation="2" density="default">
<!--<template #prepend>
<v-app-bar-nav-icon v-if="$vuetify.display.smAndDown" /> </template
>-->
<v-img class="mx-6" src="favicon.ico" max-width="50" />
<!--<v-app-bar-nav-icon />-->
<v-img class="mx-6" src="favicon.ico" max-width="50" />
<!--<v-app-bar-nav-icon />-->

<v-btn class="px-8" size="x-large" height="100%" prepend-icon="md:person" to="/"
><template v-if="$vuetify.display.mdAndUp">Runnerzy</template></v-btn
>
<v-btn class="px-8" size="x-large" height="100%" prepend-icon="md:photo_camera" to="/photo">
<template v-if="$vuetify.display.mdAndUp"> Zdjęcia podczas wydarzenia </template>
</v-btn>
<v-btn class="px-8" size="x-large" height="100%" prepend-icon="mdi:mdi-youtube" to="/youtube"
><template v-if="$vuetify.display.mdAndUp">Youtube</template></v-btn
>

<template v-slot:append>
<v-btn class="px-8" size="x-large" height="100%" prepend-icon="md:person" to="/"
><template v-if="$vuetify.display.mdAndUp">Runnerzy</template></v-btn
>
<v-btn class="px-8" size="x-large" height="100%" prepend-icon="md:photo_camera" to="/photo">
<template v-if="$vuetify.display.mdAndUp"> Zdjęcia podczas wydarzenia </template>
</v-btn>
<v-btn
class="px-8"
size="x-large"
height="100%"
prepend-icon="mdi:mdi-github"
href="https://github.com/gramyPomagamy/GPST"
variant="tonal"
><template v-if="$vuetify.display.mdAndUp">Github</template></v-btn
prepend-icon="mdi:mdi-youtube"
to="/youtube"
><template v-if="$vuetify.display.mdAndUp">Youtube</template></v-btn
>
</template>

<!--
<template v-slot:append>
<v-btn
class="px-8"
size="x-large"
height="100%"
prepend-icon="mdi:mdi-github"
href="https://github.com/gramyPomagamy/GPST"
variant="tonal"
><template v-if="$vuetify.display.mdAndUp">Github</template></v-btn
>
</template>

<!--
<v-app-bar-title v-if="$vuetify.display.smAndDown && !$vuetify.display.xs"
>GPST</v-app-bar-title
>-->
<!--<v-app-bar-title v-if="$vuetify.display.lgAndUp"
<!--<v-app-bar-title v-if="$vuetify.display.lgAndUp"
>GPST – Generator Piekielnie Szybkich Thumbnailsów</v-app-bar-title
>-->
</v-app-bar>
</v-app-bar>

<!--<v-navigation-drawer> </v-navigation-drawer>-->
<!--<v-navigation-drawer> </v-navigation-drawer>-->

<v-main>
<RouterView />
</v-main>
<v-main>
<RouterView />
</v-main>

<v-footer class="d-flex flex-column bg-surface-variant">
By Halamix2 &#9874; 2024 - {{ new Date().getFullYear() }}, wersja {{ appVersion }}. Halamix
nie potrafi we frontend, a jednak to zrobił; what's your excuse?
</v-footer>
</v-app>
<v-footer class="d-flex flex-column bg-surface-variant">
By Halamix2 &#9874; 2024 - {{ new Date().getFullYear() }}, wersja {{ appVersion }}. Halamix
nie potrafi we frontend, a jednak to zrobił; what's your excuse?
</v-footer>
</v-app>
</v-responsive>
</template>
71 changes: 42 additions & 29 deletions src/views/PhotoView.vue
Original file line number Diff line number Diff line change
@@ -21,12 +21,10 @@ const store = useGenericStore(),
photo = ref(''),
photoRotation = ref(0),
photoLoaded = ref(false),
imageBanner = await loadImage(`${import.meta.env.VITE_IMAGES_BANNER_MILESTONE}`),
// ImageBanner.src = imageBannerData
imageGradient = await loadImage(`${import.meta.env.VITE_IMAGES_GRADIENT}`),
imageLogoGSPS = await loadImage(`${import.meta.env.VITE_LOGO_FIRST}`),
imageLogoFoundation = await loadImage(`${import.meta.env.VITE_LOGO_SECOND}`),
imageGradient: Ref<HTMLImageElement | null> = ref(null),
imageLogoGSPS: Ref<HTMLImageElement | null> = ref(null),
imageLogoFoundation: Ref<HTMLImageElement | null> = ref(null),
imageBanner: Ref<HTMLImageElement | null> = ref(null),
redrawThumbnail = function () {
// TODO: add a check to see if the canvas is already loaded
if (mainCanvas.value === null) {
@@ -38,26 +36,42 @@ const store = useGenericStore(),
runnerPosition = 208 + 101,
fullTitle = `${store.title} ${store.subtitle}`
ctx.drawImage(imageGradient, 0, 0)
if (imageGradient.value) {
ctx.drawImage(imageGradient.value, 0, 0)
}
drawBackground(ctx, backgroundImage.value, store.photoScale, store.photoLeft, store.photoTop)
ctx.globalAlpha = 0.12
ctx.drawImage(imageGradient, 0, 0)
if (imageGradient.value) {
ctx.globalAlpha = 0.12
ctx.drawImage(imageGradient.value, 0, 0)
}
ctx.globalAlpha = 1
ctx.drawImage(imageBanner, 0, 0)
if (imageBanner.value) {
ctx.drawImage(imageBanner.value, 0, 0)
}
ctx.imageSmoothingQuality = 'high'
ctx.imageSmoothingEnabled = true
ctx.drawImage(imageLogoGSPS, 1110, 849, 360, 360 * (imageLogoGSPS.height / imageLogoGSPS.width))
if (imageLogoGSPS.value) {
ctx.drawImage(
imageLogoGSPS.value,
1110,
849,
360,
360 * (imageLogoGSPS.value.height / imageLogoGSPS.value.width)
)
}
ctx.drawImage(
imageLogoFoundation,
0,
0,
350,
350 * (imageLogoFoundation.height / imageLogoFoundation.width)
)
if (imageLogoFoundation.value) {
ctx.drawImage(
imageLogoFoundation.value,
0,
0,
350,
350 * (imageLogoFoundation.value.height / imageLogoFoundation.value.width)
)
}
ctx.fillStyle = 'white'
ctx.strokeStyle = 'black'
@@ -142,11 +156,6 @@ backgroundImage.value.onload = () => {
redrawThumbnail()
}
imageGradient.onload = redrawThumbnail
imageLogoGSPS.onload = redrawThumbnail
imageLogoFoundation.onload = redrawThumbnail
imageBanner.onload = redrawThumbnail
watch(photo, (newPhoto: string) => {
store.photoLeft = 0
store.photoTop = 0
@@ -195,7 +204,16 @@ if (routeQuery.money && typeof routeQuery.money === 'string') {
store.money = Number(routeQuery.money)
}
onMounted(() => {
onMounted(async () => {
imageGradient.value = await loadImage(`${import.meta.env.VITE_IMAGES_GRADIENT}`)
imageGradient.value.onload = redrawThumbnail
imageLogoGSPS.value = await loadImage(`${import.meta.env.VITE_LOGO_FIRST}`)
imageLogoGSPS.value.onload = redrawThumbnail
imageLogoFoundation.value = await loadImage(`${import.meta.env.VITE_LOGO_SECOND}`)
imageLogoFoundation.value.onload = redrawThumbnail
imageBanner.value = await loadImage(`${import.meta.env.VITE_IMAGES_BANNER_MILESTONE}`)
imageBanner.value.onload = redrawThumbnail
store.$subscribe((mutation, state) => {
// TODO: maybe limti scope here? Do we want to redraw on ANY change in the store?
// console.log('store updated:', mutation, state)
@@ -207,11 +225,6 @@ onMounted(() => {

<template>
<v-container fluid class="main bg-surface">
<!---<v-row>
<v-col>
<h1>Miniaturka runnera na Twittera</h1>
</v-col>
</v-row>-->
<v-row>
<v-col>
<CanvasItem
64 changes: 42 additions & 22 deletions src/views/RunnerView.vue
Original file line number Diff line number Diff line change
@@ -18,10 +18,10 @@ const store = useGenericStore(),
canvasHeight = ref(1000),
backgroundImage: Ref<HTMLImageElement> = ref(new Image()),
photoRotation = ref(0),
imageGradient = await loadImage(`${import.meta.env.VITE_IMAGES_GRADIENT}`),
imageLogoGSPS = await loadImage(`${import.meta.env.VITE_LOGO_FIRST}`),
imageLogoFoundation = await loadImage(`${import.meta.env.VITE_LOGO_SECOND}`),
imageBanner = await loadImage(`${import.meta.env.VITE_IMAGES_BANNER_RUNNER}`),
imageGradient: Ref<HTMLImageElement | null> = ref(null),
imageLogoGSPS: Ref<HTMLImageElement | null> = ref(null),
imageLogoFoundation: Ref<HTMLImageElement | null> = ref(null),
imageBanner: Ref<HTMLImageElement | null> = ref(null),
photo = ref(''),
photoLoaded = ref(false),
redrawThumbnail = function () {
@@ -33,26 +33,42 @@ const store = useGenericStore(),
}
const ctx = mainCanvas.value.getContext('2d')!
ctx.drawImage(imageGradient, 0, 0)
if (imageGradient.value) {
ctx.drawImage(imageGradient.value, 0, 0)
}
drawBackground(ctx, backgroundImage.value, store.photoScale, store.photoLeft, store.photoTop)
ctx.globalAlpha = 0.12
ctx.drawImage(imageGradient, 0, 0)
if (imageGradient.value) {
ctx.globalAlpha = 0.12
ctx.drawImage(imageGradient.value, 0, 0)
}
ctx.globalAlpha = 1
ctx.drawImage(imageBanner, 0, 0)
if (imageBanner.value) {
ctx.drawImage(imageBanner.value, 0, 0)
}
ctx.imageSmoothingQuality = 'high'
ctx.imageSmoothingEnabled = true
ctx.drawImage(imageLogoGSPS, 16, 15, 316, 316 * (imageLogoGSPS.height / imageLogoGSPS.width))
if (imageLogoGSPS.value) {
ctx.drawImage(
imageLogoGSPS.value,
16,
15,
316,
316 * (imageLogoGSPS.value.height / imageLogoGSPS.value.width)
)
}
ctx.drawImage(
imageLogoFoundation,
320,
0,
323,
323 * (imageLogoFoundation.height / imageLogoFoundation.width)
)
if (imageLogoFoundation.value) {
ctx.drawImage(
imageLogoFoundation.value,
320,
0,
323,
323 * (imageLogoFoundation.value.height / imageLogoFoundation.value.width)
)
}
ctx.fillStyle = 'white'
ctx.strokeStyle = 'black'
@@ -125,11 +141,6 @@ backgroundImage.value.onload = () => {
redrawThumbnail()
}
imageGradient.onload = redrawThumbnail
imageLogoGSPS.onload = redrawThumbnail
imageLogoFoundation.onload = redrawThumbnail
imageBanner.onload = redrawThumbnail
watch(photo, (newPhoto: string) => {
store.photoLeft = 0
store.photoTop = 0
@@ -181,7 +192,16 @@ if (routeQuery.money && typeof routeQuery.money === 'string') {
store.money = Number(routeQuery.money)
}
onMounted(() => {
onMounted(async () => {
imageGradient.value = await loadImage(`${import.meta.env.VITE_IMAGES_GRADIENT}`)
imageGradient.value.onload = redrawThumbnail
imageLogoGSPS.value = await loadImage(`${import.meta.env.VITE_LOGO_FIRST}`)
imageLogoGSPS.value.onload = redrawThumbnail
imageLogoFoundation.value = await loadImage(`${import.meta.env.VITE_LOGO_SECOND}`)
imageLogoFoundation.value.onload = redrawThumbnail
imageBanner.value = await loadImage(`${import.meta.env.VITE_IMAGES_BANNER_RUNNER}`)
imageBanner.value.onload = redrawThumbnail
store.$subscribe((mutation, state) => {
// TODO: maybe limti scope here? Do we want to redraw on ANY change in the store?
// console.log('store updated:', mutation, state)
Loading

0 comments on commit e26f211

Please sign in to comment.