It wasn’t the last devlog:
I fixed some bugs where you couldn’t share the dishes or play the dish.
I also had to fix a bug which made the server crash

Version 2 is released

This will probably be the last devlog on this project except if there are any more bugs or things like that.

In this devlog I fixed a lot of bugs but also finished the custom flavors.
You can now:

• Publish them
• Use them in multiplayer
• Download published flavors

The hardest part of version 2 was definitely the multiplayer part because I never developed a multiplayer game or anything like that.
The bug fixing was quite annoying because some bugs were at one place in the code and had some “triggers” in another part of the code.

In the end it was also new how to setup nginx to work with websockets.

But now finally everything works

I fixed a lot of bugs with the multiplayer mode where you could drag one flavor bu the other user didn’t see it. In the end it was AGAIN a stale state where the useEffect in react did not refresh when the multiplayer game started.
I also added notifications for when a player leaves the game. Now everybody gets a notification that the player left.
Also added the functionality to auto close unused games on the server (which wasn’t really hard).
And a game where the host leaves kicks out everybody now with the notification “Game was closed by host”.
I also made the custom flavors work in multiplayer now. That was definitely the hardest part since I had to find where the data got lost and fix that.

I finally tried to upload the Flavor Synthesizer to my server it worked. Now I’m fixing a ton of bugs some are stale states in React others are just weird conversions from the server side dishes to the dishes used by the client. I’m also currently working on making the custom flavors work in multiplayer. I also added the Preview for the custom flavors as well as fixed some bugs where the colors of a custom flavor were not loaded again. Or another one was that custom flavors that get stored are gone when you open them and save the dish again.
The hardest one was that states get changed when the “old” dish is still open (when I opened one before, closed it, opened another one). So that the new dish has some parts of the old dish opened. Really hard!

This time I worked on the synchronization of the custom flavors so that they can be used even when you share your dish or open it in multiplayer. I worked on the backend and added all the routes. I also changed the style of the custom flavor list to look better and added the option to edit the custom flavors as well as delete them. I plan on adding a preview button with which you can hear the audio and see the image like it would be when it is on the track.
All of the custom flavors are now stored on the server when you are logged in otherwise they are stored locally.
I had quite some trouble with the size of the custom flavors since the base64 images and audio files are quite large and thus had to rewrite some code to work faster as well as change the database structure to use LONGTEXT instead of TEXT.

in this devlog I added custom flavors that you can create at the moment only if you are creating a dish but I am currently working on a custom flavor menu where you can manage them. I also fixed a ton of bugs. Luckily they weren’t too complex ones. The longest time took the adding of the menu since I didn’t make it easily extendable but now it is.

I’m currently creating the option to create your own flavors by either uploading an audio file or creating one as well as either uploading an image or creating your own image in the app. The feature is nearly finished but still has some things I have to work on like for example the audio creation in the app this will take some time….
I also had to rewrite some code for the playback of the audio since I had written it to use different audio files for each flavor depending on the main flavor which was selected. I removed this unused code since I now only have one audio file per Flavor.
I hope nothing bad happens with the audio system because last time I changed something I had to redo the entire audio system…. It took so long (7h or so).
I’m still working on these features that’s why they are not finished on the images. Didn’t want to make one big and long devlog.

I finished the multiplayer! The hardest part was the communication on the server and that all the changes get send to all people (except oneself). At the moment I still have some bugs in the multiplayer which I’m going to fix in the next devlog.

Now you can:

• Create a game
• Join a game
• Manage Joined Players
• Send chat message
• Mute players
• Set players to view only so they cant edit the dish

I am currently changing the download system to not download 100 files instead just 1 big zip file. And extract all the images from it and save them. It still doesn’t work correctly and throws an error at the moment.

I’m nearly finished with the multiplayer as of now you can open a dish as a multiplayer if you are logged in your name will be used if not you will be prompted to enter a name. After that you get to see you code with which you can invite people.
People who want to join have to enter this code and will be able to join. When they join you will be prompted to allow them to enter or don’t allow them you can also mute them or set them to only view. If you let them join they are able to edit your dish with you you will see changes live and be able to chat with them in the chat (which still has some bugs). You can also manage all joined users you can:
kick them
mute them
set them to view only

This all is done using Sockets so that everything is live.
I also fixed some bugs with the border of the pixelated elements.

I sometimes found it hard to imagine how the join / create multiplayer flow works but that is finally behind me,
Something that was annoying was that I had to write 14 functions for each action that can be taken and what to do when someone else does this action.

This time there are a lot of images because there is quite a bit new stuff.

This time the devlog is quite long because it took me round about 3h of work to get the masks to work. Since I have custom corner masks that make divs pixelated with the corners beeing a radius (in pixels) and I wanted to have the possibility of adding a border which only works if you don’t want to have a transparent background. And now I wanted to have a transparent background for the Multiplayer settings and had to crate the mask. the mask-image
is packet with 15 masks and that’s why it took soooooo long. I had to calculate where to put which mask and where I want to subtract the mask. And this took forever because the mask-composite
did not want to work how I wanted it to.

On the other hand I also finished the initial communication to the server for joining and creating the multiplayer “meeting”. I also had to fix a ton of bugs on the backend. I also added a chat function which doesnt work yet.

Overall it was quite a lot of trying out different combinations for the masks.

The code when it is compiled looks crazy (see last image)

Now It works!
FINALLY

I continued to fix a ton of bugs in the backend. But over time im getting used to express. By now i’ve been creating the multiplayer communication between server and client so that they don’t get out of sync. Its still a bit tough since I can’t try it yet because I haven’t finished the UI yet. That will be my next step hopefully everything works (Probably won’t). The hardest part was to get the communication to work because the client would send the packets / request to the server but the server(node.js) could’t get the body which was because I hadn’t set the Content-Type in the request. this was new because in PHP you don’t need that.
I don’t really have much to show yet. Its just the communication between client & server.

How it works:

• User creates a “meeting” -> server creates the room in its ram. and adds the user to the room.
• Server returns data to join room as well as a code to share and invite other users
• the client sends a request to join a “meeting”
• Server checks for an existsing meeting and sends the client a gameUUID and a endpointUUID thes identify the client as well as which “meeting” he currently is in.
• Client connects to /multiplayer/live where the communication is via WebSockets (a lot faster and live) from there it gets all the changes, which flavors are “locked”(used by another user), what happens at the moment

I rewrote the entire backend from PHP to Typescript (node.js though more like node.ts). It took a long time since the code in PHP was REALLY BAD and really unstructuredly written by me now the structure is a lot better and I also have type safety which is nice. The hardest part was learning how express works and how I can connect to the database. Now that works I probably still have some bugs in the backend but I will find them when I implement the new feature.
The new feature will be a “multiplayer”.
You will be able to cooperate on a dish.
This will be my first time coding a multiplayer thing . I’m excited to see how that will go…

I also created the logo for Flavor Synthesizer it’s a machine where glass tubes at the top filled with flavors are placed then they come mixed out at the bottom. What I might add are music particles for the playing of the music.

This time I fixed ONE BUG (actually more but this one was the hardest and took the longest). It was really bad the bug was somewhere in how the audio is played/resumed and so on. I thought I fixed it but I didn’t and this went one for quite some time. It took so long because there were bugs popping up everywhere. Even there where none were before. A bug that was fixed before was back just through one small change and finding that change was hard. All in all it works now with dragging between tracks and you can drag and drop flavors even when the dish is playing.
Also fixed a small bug where wen you deleted the entire name of a dish it would get replaced with “Unnamed”.

I fixed the bug where when you drag a flavor between two tracks it duplicates but keeps the reference (really cursed) now it gets moved correctly! I forgot to remove the flavor from the other tracks flavor list. Just found another bug (lol) where the element bugs back to where it started when returning back to the original track

I fixed a drag and drop bug (again…) where you couldn’t drag the flavors in the share / open share menu. Now it works again

I finally finished the Tutorial System. It took longer than expected. It also works on all devices and should make understanding the game a lot easier.

Im currently working on the tutorial for the Game. Made a custom tutorial system.
Working on the Dish List tutorial still have some bugs but then it should.
I also fixed a bug where the corners of the pixelated divs were asymmetrical. Had to redo the entire masks and gradients.
I learned that drag and drop also works on mobile devices even though I read somewhere that it doesn’t but now the drag and drop works on all devices!

CHANGES:

• Created Tutorial System (still in progress)
• Bug fixes:
  • asymmetrical corners
  • fixed the drag & drop on mac os
  • Made drag & drop work on iphones / ipads (didnt know that that even works)

Bug fixes

Bug fixes on mobile

This time I redid the entire database structure and php code since it was somewhat unstructured. I also added a restaurant where you can see the dishes other people published. I fixed a few bugs one of them was where the volumes were not saved. I also removed unused code since I want to ship it. I also made the UI/UX work on smaller devices. The main challange was finding the problems in code. Sometimes one small problem turned int a huge one. It was also really annoying to change the styles for the Smaller devices as well as touch devices since everything is different and I had to always reload the website on my phone to test it.

For the people who don’t want to read that text:
CHANGES:

• Redid Database Structure & PHP Code
• Added a Restaurant
• Bug fixes:
  • The Volumes weren’t saved
• Removing unused code / variables
• Made the entire UI and UX better on Smaller devices

CHALLANGES:

• It was sometimes really hard to find the problem…
• Keeping track of what is still to do and what I already did (The devlogs helped a lot)
• Making the UI fit for all screens was really annoying -> reload website on phone all the time
• Debugging Bugs on an iPhone / iPad is kinda hard when the screen changes size when you want to inspect the console

CHANGES:

• Touch zooming works
• Removed unnecessary complexity in some types
• Touch Menus
• Bug fixes:
  • Selected Flavors didn’t work
  • Touch adding flavor -> moving it left right made the start point drift

TODO:

• Finish the restaurant

CHALLANGES:

• Touch on Mobile is really hard -> to get the right scale (so that it isnt too fast or too slow)

• Created the README.md
• Created Video for README

Still don’t really know what should be in a README file?! Just googled what should be…

CHANGES:

• Published 1-beta release finally
• Bug fixes:
  • First render of Synth line didn’t render -> had smth. to do with React States (stale states)
  • Downloading Resources didn’t work correctly -> wrong paths

TODO:

• Finish Touch support
• create Readme
• Bugs:
  • Zooming on touch not working yet
  • Think of a good use for the Box in the main menu (write a comment if you have an idea)

CHANGES:

• Ask before leaving when unsaved changes
• Bug fixes:
  • Sharing -> creating new dish -> share information still there when sharing (really annoying to fix had to rewrite a lot of code)
  • Forking a dish -> sharing it -> share information not displayed in dish list
  • Selecting in Editor doesn’t work correctly / not at all on touch
  • Deleting didn’t work (Threw an error)

TODO:

• Finish Touch support
• Bugs:
  • Zooming on touch not working yet
  • Think of a good use for the Box in the main menu (write a comment if you have an idea)

CHANGES:

• Add turn device notice
• Add device not supported (too low resolution)
• Bug fixes:
  • Can share multiple times by reopening the dish

TODO:

• Finish Touch support
• Bug fixes:
  • Forking a dish -> sharing it -> share information not displayed in dish list
  • Zooming on touch not working yet
  • Selecting in Editor doesn’t work correctly / not at all on touch

CHANGES:

• Added Touch support (Still working on it) (Hard…)
• Bug fixes:
  • Resizing somethings didn’t work correctly

TODO:

• Finish Touch support
• Add turn device notice
• Add device not supported (too low resolution)
• Bug fixes:
  • Forking a dish -> sharing it -> share information not displayed in dish list
  • Zooming on touch not working yet
  • Can share multiple times by reopening the dish

CHANGES:

• Made it work for all screen sizes for:
  • Flavor Synth Editor
  • Share Dialog

TODO (Tomorrow):

• Do the same for:
  • Think of a good use for the Box in the main menu (write a comment if you have an idea)
  • Bug fixes

CHANGES:

• Made it work for all screen sizes for:
  • Main Menu
  • Main Flavor Selection Menu
  • Dish List (Doesn’t work correctly yet)
  • Open Shared Dish

TODO:

• Do the same for
  • Flavor Synth Editor
  • Share Dialog
• Think of a good use for the Box in the main menu (write a comment if you have an idea)

CHANGES:

• Bug fixes

CHANGES:

• Added the Share infos

CHANGES:

• Changed the system of how the shared dishes are saved
• Some bug fixes within the share system
• Bug fixes with the title not beeing correct or setting the title of the last opened element
• Added download button to export the dish as a file
• Made the Public / Private Button work in the Dish List
• Added View only Dish View

TODO:

• Making the dishes that were shared in the dish list show the info (with correct UI)
• Making the App work on Mobile / iPad

• Added download button to dish list menu

• Made Dishes playable from the dish list
• Bug fixes

• Cleaned code
• Bug fixes
• Made Notifications in game style
• made Buttons in game style

• Changed the Share Dialog
• Changed the Open Shared Dialog
• Changed the backend:
  • Made it save the entire dish
  • Made it share the dish by reference (uuids) so that the dish can be changed by the owner

Bug fixes with opening a shared dish

• Made downloads save progress
• Bug fixes with naming a dish
• Made the UI look better

Currently working on Undo / Redo in the Flavor Synth (its hard…)
Still not working…

Made the music nicer

It was really hard (since I’m not too good at music)

Bug fixes with downloading menu (also made it nicer looking)
Cleaned code

Made a loading animation
Made the download prompt look nicer

Finished the Dish List (Options)
Made the name of the dish changable (forgot to mention that)

Finished UI design

Bug fixes (Loading a dish didn’t load it)

• Bug fixes
• Made the backend work (creating, changing, sharing)

Cleaned App.tsx as well as made the game more structured with a gameState instead of a lot of individiual states.

I made the Dish list look nicer (work).

It was hard to get the masks to work because it somehow didn’t work at some point it did…

Made the backend work as well as cleaned the code

Made nice backgrounds / nice dish list menu

Made the main menu nicer with background image

Added download button for all assets

Added main menu login option

Added a Main Menu
Todo: Add the list menu for viewing created dishes and editing shared ones
Challanges: Integrating the menu into the current structure

• Made opening shared flavors / ai images / codes possible
• Made sharing an url possible

It was hard to check if the uploaded ai generated image is one of the generated ones that actually are a dish. I learned how to hide data in the images

Added custom confirm dialog & Created backend user management & made the share function work (can’t open them yet)

Currently working on the function to open the shared dishes

Added the open button (no backend yet)

Added Login screen for sharing (you don’t have to login / register)

Currently working on the Share menu…
Finished (only client side):

• Share Flavors
• Share AI Image
• Share Code

Bug fixes
Added a cursor position for from where it`s started

Cleaned Folder structure
Implemented dragging flavors accross multiple tracks

Implemented Volume Knobs and changed main flavors

Changed the style of controls pannel

Added volume konbs for Master, Flavor, Main Flavor tracks

fix: fixed the scrolling when multiple lines where added
feat: added line controls: volume, mute, solo
currently working on: making the main controls: play, pause, stop, etc…

Added Main Flavor selection dialog

Added caching of all audio files, flavor images and other images

feat: Added new Images for each Flavor, Changed the background of the flavor list
fix: fixed some scrolling and resizing bugs
fix: Changed the View in the timeline

Made multiple Flavors draggable, resizable at once
Fixed selection after dragging

Added Zooming in the timeline as well as fixed some bugs, where you could go into the negative time

Made the items from the Flavor list draggable

Made the elements in the Timeline draggable and resizable

Added Timelines that are scrollable

Making the UI…

Started creating a Flavor List where you can drag`n drop flavors from and also preview the sounds

Created an imatge Generator for each flavor

Searching for good images of each flavor

Trying to find good music that can be stiteched together…
It takes quite some time to find any…

Added Canvas functions like clearCanvas, fillCanvas, drawRect, fillRect, drawCircle, fillCircle, drawRoundedRect, fillRoundedRect

Finished function evaluation as well as JIT compiler

Bug fixes:
Saving a single image threw an exception
Removing rows works now

Added new Project “Source Manager”

Added DefaultLoader to load what it can from the source

Finished all german sources:
Tagesschau
Zdf
Deutschlandfunk
Spiegel
Sueddeutsche
Zeit
Faz
Handelsblatt
Taz
Welt
Focus
Bild

Created Parsers for:
Deutschlandfunk
ZDF Heute
Spiegel
Süddeutsche
Zeit
Frankfurter Allgemeine Zeitung

Created Parsers for:
Tagesschau.de
Bild.de

Finished export function
Can export as any epoxrt format or custom formats

Added Table UI
Added Formats for sources
Supported Formats:
-apa
-mla
-chicago
-harvard
-ieee
-din-iso-690

Fixed Bugs:

• On some devices the initial loading animation looked bad (everything was blury)

Fixed Bugs
Added Visit Statistics

Finished the contact form and made it send Emails

Changed chart library to JFreeChart and finished displaying transactions and when the happened.
Also display when Account was in debt (in red)

Added CurveLineChart and made it show negative numbers

Added Demo Account
Fixed Bugs

Fixed bug where some lessons would not be shown as cancelled

Uploaded to Github

Added 2FA Support

Updated Backend after Untis updated APIs (fix didnt work as I tought)

Updated Frontend after Untis updated APIs (fix didnt work as I tought)

Made Pasting passwords mor secure by typing them when pressed ctrl+v

Added logout after Unfocused for 10 Seconds
Added logout after System goes to sleep

Updated README.md

Added Warnings for Passwords that are reused or unsecure

Bux fixes:

• Encryption was saved as bytes in Json Objects which corrupted the data so that it could no longer be loaded

Added Encryption to passwords and salts / ivs

Added Login System

Added Password List and Password Viewer

Updated CV

Added Balance Component

Bug fixes
Added Visitor Statistics
Finished Contact Page

Added Shortcuts for Taking a Screenshot and for retaking it

Added Copy button to Images

Added last functions…
Centered Action Buttons

Changed the way the Images are saved and displayed (previewed) also added support for changing image format and its resolution

Added a Window for viewing recently made screenshots as well as save them, save them all, retake them, preview them, change thair name

Added Classes to take screenshots of all Screens

Fixed the bug that the lessons wont be parsed correctly and the information wes not extracted correctly. After Untis changed thair APIs

Finished Language support with a button to change language

I added the ability to change the Language of the Website without reloading it

Added Pluginsystem (1/?)