-
-
Landing Page - Click 'Defend' to start the simulation. Or the icon in the top right corner to learn the rules.
-
Help Page - Learn the basics of CANshield.
-
Planning Page - Plan the Patrol Routes of your Ships
-
Monitoring Page - Monitor the Effectiveness of your Patrol Routes
-
Results Page - Monitor your Results
-
Statistics Widget - Monitor your results from past games.
-
Error 404 - Oops!
Inspiration
This project was created to compete for the Thales challenge this year. We chose to participate in this challenge because of the relevancy of Arctic passageways, which are becoming more appealing thanks to global climate change and melting glaciers.
Because this is designed like an Real-Time Strategy (RTS) video game, we were inspired to mimic the visualization and core gameplay of games like Civilization and Ages of Empires.
With great power, comes great responsibility. That's what we wanted users to feel. We envision players working hard to keep the arctic maritime passageways protected.
Defend the Canadian Arctic
Strategically place your navy ships to patrol the most amount of area possible.
Choose between three different vessels
Halifax Class Frigade
- Cost: $450,000
- Speed: 30 Knots
- Range: 9,500 N-Miles
Harry DeWolf Patrol Vessel
- Cost: $250,000
- Speed: 17 Knots
- Range: 6,800 N-Miles
Kingston Coastal Defence Vessel
- Cost: $150,000
- Speed: 15 Knots
- Range: 5,000 N-Miles
Choosing smart patrol routes and optimizing ressource management is key to a successful operation. Good luck officer!
How we built it
Tech Stack
Frontend: React.js, Tailwind CSS
Backend: FastAPI, MongoDB
Infrastructure: .tech Domains
Mapping: OpenStreetMap (gameplay), MapBox (background)
Challenges we ran into
- Finding an idea that we all felt comfortable committing to
- Time management and planning
- Dealing with merge conflicts
- Integrating our MongoDB database for past results
- Adding 1,400+ points for island outlines to make the mapping.
Accomplishments that we're proud of
- Settling on an idea we all agreed with
- Quickly learning and implementing React.js for web design
- Developing a visually appealing frontend
- Making every system of the program properly interact with eachother
- Not losing hope and submitting our project!
What we learned
- Don't trust AI for everything, especially algorithms that can be hard-coded
- Working as a team is challenging but rewarding
- Advanced web design skills
- It's important to not get greedy when implementing fancy features
- Spending more time on the presentation-side of the project can pay off
What's next for CANshield
We are hoping to expand on the app to allow for more repeatability and usage of our simulator with the goal of releasing an open beta.
Features we'd like to add:
- Fix all bugs and improve current features
- Different locations around the Arctic passage
- AI recommended paths and insights
- More balanced and challenging simulation options
- Special events during simulations
Thank You :)
Samuel, Thomas and Yoël
Built With
- .tech
- css
- html
- javascript
- mapbox
- mongodb
- openstreetmap
- react
- recharts
- vercel
Log in or sign up for Devpost to join the conversation.