Flavor Synthesizer

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)

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)

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…