Brand logo and brant theme
We have created a portal with user-friendly experience and a god and easy interface.
Used AI to generate picture and text to make the site fun.with a green mushroom as a favicon
Easy azure B2C loggin for the new customer.
The backen have the same look and field ad the customer have
We also focus on some oldscool pixels for fun – inn the Canvas app
Glossy Pixels: For our app have we used Mario themed icons and Since we are Waken Koopa troopas have we choosen color-codes that represent Koopa Troopas colors. Green for their shell and yellow for their body.
Synne, being our lead designer, made sketches for our final design:
Our final design ended up quite close to the envisioned design:
We also have a minigame where you get to hunt as many Mario can, where we liberally use Mario inspired design language.
Chameleon
Our app is available both for desktop and mobile users. We also have built a responsive canvas app, however the minigame is only available in portrait mode so no one gets an unfair advantage 🙂
In the pursuit of optimizing business productivity within our solution, the implementation of an ALM pipeline has been a game-changer. This automated transfer of solutions between environments not only saves significant time and effort but also ensures that both unmanaged and managed versioning packages of the solution are seamlessly transitioned. Furthermore, the integration of a Power Automate flow for the approval of deployments has elevated our operational efficiency, marking a significant milestone in our journey to “Go with the Flow.” This achievement underscores our commitment to leveraging workflow automation for enhanced productivity.
Our solution showcases an exemplary blend of low-code platforms with pro-code customization, embodying the #ProCodeNoCodeUnite philosophy. By implementing a Power Pages site for user interface and login, coupled with a PCF component coded in React and TypeScript for a gamified course, we demonstrate the power of integrating professional coding standards with low-code solutions. This approach not only streamlines development but also opens up a realm of possibilities for creating robust, user-friendly applications.
Elevating user interaction through gamification, the implemented PCF component with interactive controllers to navigate through course levels. Each course represents a level, challenging users to advance and showcase their proficiency. This gamification aspect not only makes learning more engaging but also encourages users to level up their skills in a fun and interactive environment.
Our solution now features a Power BI report embedded within the Power Pages site, along with additional reports for user access to high scores and admins for an overview of active players and their progress. These reports, showcasing at least four graphs, gauges, or KPIs, highlight the business value of our dashboard. The integration of these visual insights ensures that both users and administrators have a comprehensive understanding of performance metrics at their fingertips.
The responsiveness of the Power Page, adapting automatically to all devices and screen sizes, exemplifies our solution’s versatility. This inherent adaptability ensures that our application delivers a consistent and user-friendly experience across various platforms, earning us the “Chameleon” badge. It’s a testament to our dedication to creating solutions that are not only powerful but also universally accessible.
Badges to be claimed:
The backbone of our system is supporting whatever requests our princesses may have. With that in mind, one of the main objectives while planning for the princess-facing side of the system, we opted for simplicity and a fun user experience before all.
Our home page has only one button, so there is no confusion in their time of need. We went with the opposite logiq than the people that post recipes online.
Once the button is clicked, and the princess creates their profile, the next step is a simple form to gather the important information.
Once they are happy with their request details, and submit, they get redirected to a page listing all of their current and historical request.
Adaptive solutions are always important as you no longer have any control on what kind of device the user is hacking along on.
Responsiveness was once considered a kind of black art, but fortunately, most modern solutions now offer robust support right out of the box. However, when integrating Power Pages, bots, and canvas apps, seamless functionality from the start isn’t always guaranteed.
What realy gave us a headacke was embedded canvas apps. Yes they do resize, but leaves a lot of uneeded blank space on the top of the page which makes the app “disapear” on a mobile device:
The solution might seem quite obvious to a seasoned frontend designer, but for those of us who are more accustomed to low-code plumbing, navigating through CSS, JS, IFRAMES oh my my…
So we spent the better part of the day chogging along, and finally, we arrived at a solution we were happy with.
How can so little code take so mutch time???
@media (max-width: 1200px) {
#il1tn4 {
margin: 0px !important;
padding: 0px !important;
}
#iebs75 {
padding: 0px;
}
}
@media (max-width: 992px) {
#il1tn4 iframe {
height: 420px !important;
}
}
@media (max-width: 767px) {
#il1tn4 iframe {
height: 170px !important;
}
}
We have mentioned little about our front end web solution so far. But here is some info.
The interface is made in React.js built with Vite. It is faster than Webpack.⏩
This is a page to be used by authorities, the coast guard or separate centers for shipping companies.
The website is used to scan areas on the map for ships. If a pirate ship is detected, an alarm can be sent to all other ships in the area.
In order to be able to be used on all surfaces, it is of course responsive 😉
Sending an alarm from the web interface will trigger an alarm in Teams clients over on the ships, as well as cause the light on the bridge to flash red.
“MMM.. is the ultimate tool for pirate captains looking to maximize their raids. With our comprehensive system, you’ll be able to plan, organize, and execute the perfect plunder. No more manual logs, no more disorganized crew. Just a streamlined, efficient process for taking what you want from the high seas. Upgrade your pirate game today with Maritime Mischief Manager.”
Pirates are met with a friendly user interface where they can manage all aspects of pillaging.
Under the “New Raid” menu, pirates with the rank of Captain can take a look at possible raid prospects and get an overview of the best possible strategy and also an estimation of the loot potential in the selected location.
The results we are seeing above comes from a query against the ChatGPT API with the use of Power Automate.
Being satisified with the current target, the Captain selects the vessel for the raid, choose to create it and the raid enters planning mode.
From the raid list, piratescan view raids in the planning stage. Simple pirates can choose to join a raid if they want to, but Captains can also choose to invite his best men. Pirates receiving an invitation will have to accept/reject the invitation through their Teams account.
Once the pirate has received and accepted an invitation, they have to scan their provided RFID card when they board the ship. They will then enter the status of Checked in.
Once the RFID card is scanned at the ship, a HTTP request is sent to the raid check-in flow, the flow will update the crew status.
When the Captain is happy with his band of criminals, he chooses to start the raid. The app conveniently simulates the battle as well, together with some nifty battle music. This is of course to save the hassle of actually raiding a place.
The pirate management team of course also have access to beautiful numbers of the entire operation
Once upon a time, in the world of Business Intelligence, there was a ship with 3 crew members, who were struggling to make ends meet. They would sail from port to port, hoping to find some treasure, but to no avail. That was until they discovered Power BI.
They were able to analyze data from different sources and turn it into valuable insights. They used Power BI’s interactive visuals and dashboards to identify the ports and ships with the most valuable cargo. No more guessing, no more wandering aimlessly. so were able to sail straight to the ports or ships with the most valuable treasures. 
used jason file to use “shape map” in power BI https://github.com/deldersveld/topojson
When plundering and sailing keeping track of pesky DM’s is no job for the captain or crew. This’ why we summoned the services of Power Automate and Power Apps to do our bidding: Enabling our ship to run smoothly and commands being forwarded at the correct time to the correct people.
It all starts with the Consumer of Data “Power Automate” who collects data from all our different intelligence points. Working in the shadows, this ghost can be attached to any workflow. Currently, since it thrives on human flesh for its operations, we started by attached to our crew log. Whenever Power Automate smells the fear of a new deck hand, laddie or lassie onboard it goes to work!
On a new pirate record Power Automate does two things:
We further improve the Captain’s life with Power Apps connected to the Power Flows. The Power App sits on the users phone, implemented via Teams or as a standalone app, and enables the Captain to administrate the crew roster, so any stowaway can be added to the crew and receive the required e-mail package with plank rules and NDA’s. This mobile approach lets the captain be in full control even when venturing away from his cabin and the desktop computer therein.
The convenience of having the Power Apps in teams means the captain can manipulate his Ship, The Raids and roster from any surface, be it mobile, desktop og even tablet!
Using Power Apps means we can also simulate raids adding new test data on the fly, without it needing to come from our Power Automate flow.
In Teams, on a device with a large screen, all the information (profile picture, name availability and skills) is displayed in a row.Â
But what will happen if you switch to your pirated iPhone? Lo and behold, by the power of flex-direction: column and CSS media queries – your content is now structured in a column, for your viewing pleasure!Â
