chore: use builtin proseimg over custom element

This commit is contained in:
eggy
2023-12-29 17:34:57 -05:00
parent 1df49b0b84
commit 3bc334f0f3
10 changed files with 39 additions and 64 deletions

View File

@@ -13,10 +13,7 @@ Ever been linked to a GitHub page to download something and couldn't figure out
<!-- more -->
::image{src="https://lh4.googleusercontent.com/u03FMDrVGVaU7x0ojxnNTAnM6_sPaSsnP1R6pZDJaTH95xqiH8LQKBN4OTZoU0Bigf6seLcCcDtSkuxcMwuLqLrCQH2fs6QsUZFyw58DN26sdbJcmMjXrhWjRQg6aoSzu-gBzib3gz20s0uFi_9h5k7QpgbohXqNkXw2pXPfPu4j3VibM_MNlHBK"}
What do all these words mean? Issues? Pull requests? Actions? Projects? Releases?
::
![What do all these words mean? Issues? Pull requests? Actions? Projects? Releases?](https://lh4.googleusercontent.com/u03FMDrVGVaU7x0ojxnNTAnM6_sPaSsnP1R6pZDJaTH95xqiH8LQKBN4OTZoU0Bigf6seLcCcDtSkuxcMwuLqLrCQH2fs6QsUZFyw58DN26sdbJcmMjXrhWjRQg6aoSzu-gBzib3gz20s0uFi_9h5k7QpgbohXqNkXw2pXPfPu4j3VibM_MNlHBK)
### The README and wiki
@@ -28,9 +25,7 @@ If that doesn't work, check out the project's wiki if they have one, located in
Now, if neither the README nor wiki have any hints to finding the link you want, you can go to the *Releases* section of the project, which on a desktop browser is in the right sidebar, while on mobile is located at the very bottom of the page.
::image{src="https://lh4.googleusercontent.com/v6G-c31NECe6ZJZhe2YSQXocQ4eCBJhYuXjNWSmECm5QQcSKaMWLpxe_roIkIonkMfUcDK4UtuqQEegVXCD1sAwHQnkssxOEk3uUrnQaMbhXL8zyeXdi0nUNv_QTKFsD5ZAUDJijHv_dc5wdTOEjggZipsIStM3vwaiabiNQ8XUY5bolApOupOwd"}
In this case, clicking one of the "primoprod" assets with the file extension for your device will get you a runnable program.
::
![In this case, clicking one of the "primoprod" assets with the file extension for your device will get you a runnable program.](https://lh4.googleusercontent.com/v6G-c31NECe6ZJZhe2YSQXocQ4eCBJhYuXjNWSmECm5QQcSKaMWLpxe_roIkIonkMfUcDK4UtuqQEegVXCD1sAwHQnkssxOEk3uUrnQaMbhXL8zyeXdi0nUNv_QTKFsD5ZAUDJijHv_dc5wdTOEjggZipsIStM3vwaiabiNQ8XUY5bolApOupOwd)
Releases are the "official" way for projects to upload stable versions of their program to send to others. In the "Assets" section of a release, clicking the link that is not labeled "Source code" will get you a runnable version of the program.
@@ -46,7 +41,7 @@ If that doesn't work, right-click the page that clicking "Raw" or "View Raw" ope
Trouble in paradise? If none of the above options worked, you can always file a new issue in the "Issues" tab of the project, where you can report bugs and ask questions directly to the project owner.
![img](https://lh6.googleusercontent.com/l7mlo6OTPsAi17WcYgLeZ39aVp65D_24Kz4PMYOgKArwxJcz4jRcTCtud9UtChEUiUdnVR8sR7_6TvQJAAL2mFcKecLK-hhPvr7De_tPqrvh_mbaNCfVisD2yBn2icaXSl0eFDD4cIHKOzPKOM--2hruiM6qHkC6foW-6Pu63pU9c6FZOid10WXN)
![](https://lh6.googleusercontent.com/l7mlo6OTPsAi17WcYgLeZ39aVp65D_24Kz4PMYOgKArwxJcz4jRcTCtud9UtChEUiUdnVR8sR7_6TvQJAAL2mFcKecLK-hhPvr7De_tPqrvh_mbaNCfVisD2yBn2icaXSl0eFDD4cIHKOzPKOM--2hruiM6qHkC6foW-6Pu63pU9c6FZOid10WXN)
Remember to read the project's issue guidelines, as some of them have a dedicated support forum or Discord to send help requests to.

View File

@@ -19,9 +19,7 @@ Introducing…emulation!
### TIL converting games to Australian birds will preserve them.
::image{src="https://upload.wikimedia.org/wikipedia/commons/9/9d/Emu_1_-_Tidbinbilla.jpg"}
(Wikipedia Commons, public domain)
::
![(Wikipedia Commons, public domain)](https://upload.wikimedia.org/wikipedia/commons/9/9d/Emu_1_-_Tidbinbilla.jpg)
Though *emu* and *emulation* share three letters, the only other similarity they have is that large entities have tried and failed miserably to stamp them out in the past. Emulation is the process of one system (such as a phone or computer) imitating another one (such as a video game console) to run programs designed for that system. Emus will now forever ravage the Australian wilderness, and emulation has been ruled to be legal in at least the United States.

View File

@@ -15,8 +15,7 @@ This report will cover from where the previous left off to the present day: 21 A
## No more
::image{src="primoprod-itemrevealscreen.webp"}
::
![](primoprod-itemrevealscreen.webp)
It's done. The pull screen is done. The element/weapon icon was added to the pull. Audio syncs up (well enough). The only thing missing is all of the fancy effects like glow and particles.
@@ -24,8 +23,7 @@ Nah, this is good enough.
## Take this!
::image{src="primoprod-questscreen.webp"}
::
![](primoprod-questscreen.webp)
Until now, you had to manually edit the browser's `localStorage` to gain any currency. The quest screen makes primoprod finally usable as now you can make your own long-term "quests" that give 900 Primogems each as well as set four daily "tasks" that give 30 Primogems each plus 60 when all are done — if only the base game was this generous. These are editable and can have whatever title or description you want. The logic here went through several rewrites as the structure was finalised and an interface developed to the rest of primoprod. Dailies will automatically refresh themselves on the next day.
@@ -57,8 +55,7 @@ Sounds incredible, right? As it turns out, as you gain more experience with tech
This is why [the shop](https://github.com/potatoeggy/primoprod/blob/master/src/components/ShopScreen.vue) and the [dialog to buy things from the shop](https://github.com/potatoeggy/primoprod/blob/master/src/components/ItemPurchaseOverlay.vue) are so nicely done! It reused most of my types and was admittedly much simpler than some of the other screens, but I only ran into one insurmountable problem: range styling.
::image{src="primoprod-itempurchaseoverlay.webp"}
::
![](primoprod-itempurchaseoverlay.webp)
*I wish I was actually this rich in the base game.*
@@ -68,8 +65,7 @@ As you can see, the slider looks very out of place. Why? That's because [only Fi
Up until now, only one banner was supported. This was finally fixed in November with the addition of [banner headers](https://github.com/potatoeggy/primoprod/pull/25) to match the base game. Now, you can simultaneously roll for Qiqi on *both* banners!
::image{src="selected-wanderlust-invocation.webp"}
::
![](selected-wanderlust-invocation.webp)
On a side note, did you know that Vue puts all of their reactive things into Proxies? This means you can't simply `console.log(obj)` without going through five more clicks to find what you actually want. No, no. To properly print out the actual object, you have to *copy its contents to a clean, non-reactive Object* for this to work. Why??
@@ -128,8 +124,7 @@ Back to laptop compilation we go!
Obviously, you aren't a *real* free and open source project if you don't have [pretty badges](https://github.com/potatoeggy/primoprod/blob/master/README.md) on your README. This was a major concern, so I copied Vue's style and now made primoprod a proper FOSS repo — build checkmark and badges and all!
::image{src="primoprod-badges.webp"}
::
![](primoprod-badges.webp)
## Kids and their phones
@@ -141,8 +136,7 @@ ItemRevealScreen? What's that? Now [WishBanners](https://github.com/potatoeggy/p
At last, though, we have a [proper mobile UI](https://github.com/potatoeggy/primoprod/pull/33).
::image{src="mobile-primoprod.webp"}
::
![](mobile-primoprod.webp)
Still some niggles to work out, but it looks "good enough"! With the completion of proper mobile orientation came the merging of the [Android branch](https://github.com/potatoeggy/primoprod/pull/32) made with [Capacitor.js](https://capacitorjs.com/), basically the mobile equivalent of Electron. It has even more niggles than the web version does.