Integrate Newly-Designed Assets into Web Game
Budget: $250 – $750 USD
We have a web-based game that is currently functional at a core level:
* The back-end (written in FastAPI/Python) handles all game logic, data storage, and APIs/WebSockets.
* The front-end is built in HTML, CSS, and JavaScript, but it uses very basic visuals (plain squares, text labels for abilities, etc.).
We have new graphic assets (icons, animations, backgrounds, etc.) created by a designer, and we want them integrated into our existing front-end code to transform the game’s interface into a more polished, professional look and feel.
What We Have
1. Current Front-End Code
* Basic HTML/CSS layout featuring squares for “houses,” simple text for abilities, and minimal styling.
* Some JavaScript handles board updates and receives messages from the server (via WebSocket), but the UI is very plain.
2. Graphic & Animation Assets
* Designed in Cinema 4D (with Arnold) and Adobe After Effects for animations.
* We will provide output files suitable for the web (e.g., PNG, SVG, GIF, MP4, sprite sheets, or possibly Lottie JSON).
* If minor tweaks are needed, we can also share the original source files (C4D, AE) after discussing how they might be modified.
What We Need the Developer to Do
1. Replace/Enhance the Visuals
* Swap out the current gray squares, text placeholders, etc. with the newly designed graphics (icons, backgrounds, animations).
* Make the game board, houses, and ability-related UI more appealing using these assets.
* Ensure mobile-friendly sizing and layouts.
2. Hook Animations to Game Events
* When the player clicks a house or the server tells us an ability was triggered, we want the corresponding animation to play.
* You will integrate animations by hooking into existing JavaScript event listeners and functions, ensuring animations trigger correctly when specific game actions occur. Depending on complexity, some animations might be handled via CSS transitions, while others may require JavaScript-controlled keyframes.
3. Respect the Existing Game Logic
* The JavaScript code for the game logic is mostly complete and runs with the back-end (via WebSocket). We do not want to break the underlying logic.
* Instead, we want the developer to:
* Hook into the existing JS events or functions that update the UI.
* Replace UI elements (HTML/CSS) with better visuals while keeping the same event flow intact.
4. Maintain WebSocket Communication
* The current code uses a WebSocket (and/or some HTTP calls) to communicate with the back-end.
* The developer must ensure that all WebSocket-triggered UI updates remain functional after the design overhaul. The WebSocket logic itself should not be modified unless absolutely necessary. If UI restructuring requires event handler adjustments, they should be made carefully without breaking WebSocket communication.
5. Clean, Modular CSS/JS
* Ideally, structure the updated CSS so it’s maintainable (e.g. using classes for each new visual component, naming conventions that are consistent, etc.).
* If animations need advanced handling, some JavaScript may be needed for keyframe triggers or reacting to game state changes.
Required Skills
* HTML/CSS Proficiency: Ability to craft responsive layouts, apply new designs, and handle animations/transitions in CSS.
* JavaScript & WebSockets: Comfortable integrating new UI elements with existing JS events (including onmessage from a WebSocket), sending/receiving messages, and updating the UI accordingly.
* Handling of New Assets: Understanding how to place images, icons, or simple animations (e.g., sprite sheets, GIF) into the code.
Nice-to-Have Skills
* Deeper JS Experience: For more advanced animation logic or partial refactoring if needed.
* Familiarity with Designer Tools such as Cinema 4D (Arnold) and Adobe After Effects: In case minor edits are required (e.g., adjusting color, frames).
* Experience with Lottie/Bodymovin: If some animations are delivered as Lottie JSON, you can integrate them for a smoother, vector-based animation experience.
Ongoing Project
This game project is continuing to evolve. After we integrate these new assets and polish the core gameplay visuals, we have plans to expand the game further. For example:
* Creating a user profile page and other UI screens.
* Adding new modes or features to the gameplay.
* Hence, we want a front-end developer we can continue working with in the long run, not just for a one-time task.
Outcome
By the end of this process, we want:
1. A visually appealing front-end that uses all the newly designed assets (icons, backgrounds, animated effects).(mobile-optimized)
2. Animations triggered at the right moments (e.g. upon user clicks, receiving messages from the server).
3. The WebSocket communication and game logic to stay intact, but rendered with the improved UI.
4. Clear, maintainable HTML/CSS/JS structure so future tweaks can be done easily.
* The back-end (written in FastAPI/Python) handles all game logic, data storage, and APIs/WebSockets.
* The front-end is built in HTML, CSS, and JavaScript, but it uses very basic visuals (plain squares, text labels for abilities, etc.).
We have new graphic assets (icons, animations, backgrounds, etc.) created by a designer, and we want them integrated into our existing front-end code to transform the game’s interface into a more polished, professional look and feel.
What We Have
1. Current Front-End Code
* Basic HTML/CSS layout featuring squares for “houses,” simple text for abilities, and minimal styling.
* Some JavaScript handles board updates and receives messages from the server (via WebSocket), but the UI is very plain.
2. Graphic & Animation Assets
* Designed in Cinema 4D (with Arnold) and Adobe After Effects for animations.
* We will provide output files suitable for the web (e.g., PNG, SVG, GIF, MP4, sprite sheets, or possibly Lottie JSON).
* If minor tweaks are needed, we can also share the original source files (C4D, AE) after discussing how they might be modified.
What We Need the Developer to Do
1. Replace/Enhance the Visuals
* Swap out the current gray squares, text placeholders, etc. with the newly designed graphics (icons, backgrounds, animations).
* Make the game board, houses, and ability-related UI more appealing using these assets.
* Ensure mobile-friendly sizing and layouts.
2. Hook Animations to Game Events
* When the player clicks a house or the server tells us an ability was triggered, we want the corresponding animation to play.
* You will integrate animations by hooking into existing JavaScript event listeners and functions, ensuring animations trigger correctly when specific game actions occur. Depending on complexity, some animations might be handled via CSS transitions, while others may require JavaScript-controlled keyframes.
3. Respect the Existing Game Logic
* The JavaScript code for the game logic is mostly complete and runs with the back-end (via WebSocket). We do not want to break the underlying logic.
* Instead, we want the developer to:
* Hook into the existing JS events or functions that update the UI.
* Replace UI elements (HTML/CSS) with better visuals while keeping the same event flow intact.
4. Maintain WebSocket Communication
* The current code uses a WebSocket (and/or some HTTP calls) to communicate with the back-end.
* The developer must ensure that all WebSocket-triggered UI updates remain functional after the design overhaul. The WebSocket logic itself should not be modified unless absolutely necessary. If UI restructuring requires event handler adjustments, they should be made carefully without breaking WebSocket communication.
5. Clean, Modular CSS/JS
* Ideally, structure the updated CSS so it’s maintainable (e.g. using classes for each new visual component, naming conventions that are consistent, etc.).
* If animations need advanced handling, some JavaScript may be needed for keyframe triggers or reacting to game state changes.
Required Skills
* HTML/CSS Proficiency: Ability to craft responsive layouts, apply new designs, and handle animations/transitions in CSS.
* JavaScript & WebSockets: Comfortable integrating new UI elements with existing JS events (including onmessage from a WebSocket), sending/receiving messages, and updating the UI accordingly.
* Handling of New Assets: Understanding how to place images, icons, or simple animations (e.g., sprite sheets, GIF) into the code.
Nice-to-Have Skills
* Deeper JS Experience: For more advanced animation logic or partial refactoring if needed.
* Familiarity with Designer Tools such as Cinema 4D (Arnold) and Adobe After Effects: In case minor edits are required (e.g., adjusting color, frames).
* Experience with Lottie/Bodymovin: If some animations are delivered as Lottie JSON, you can integrate them for a smoother, vector-based animation experience.
Ongoing Project
This game project is continuing to evolve. After we integrate these new assets and polish the core gameplay visuals, we have plans to expand the game further. For example:
* Creating a user profile page and other UI screens.
* Adding new modes or features to the gameplay.
* Hence, we want a front-end developer we can continue working with in the long run, not just for a one-time task.
Outcome
By the end of this process, we want:
1. A visually appealing front-end that uses all the newly designed assets (icons, backgrounds, animated effects).(mobile-optimized)
2. Animations triggered at the right moments (e.g. upon user clicks, receiving messages from the server).
3. The WebSocket communication and game logic to stay intact, but rendered with the improved UI.
4. Clear, maintainable HTML/CSS/JS structure so future tweaks can be done easily.