Novara - Learning Website
- 10 Devlogs
- 22 Total hours
Designed by Students, for Students. Education one lesson at a time :D BUILT BY HUMANS: https://github.com/Cassetu/Novara (check the commits)
Designed by Students, for Students. Education one lesson at a time :D BUILT BY HUMANS: https://github.com/Cassetu/Novara (check the commits)
New course card layout with a proper title/kicker header block and reworked filter buttons, ditching the old boxed style for underline tabs cuz its more dense. Added an orange accent color filled progress bar for anything not enrolled yet. Added a dev time badge to the hero using Hackatime in the main thing. Ripped out the entire theme system, one look only now cuz its better.
Full hero section overhaul. New copy, new photo instead of the old doorway SVG, new grid layout instead of flexbox, added a soft noise texture to the landing background. (tryina copy like concrete) Fixed a wrong journal link pointing at the wrong repo path.
Pulled a markdown course entry out of the catalog for good, both the JSON data and the catalog listing. (its not good) Small dropdown structure fix in the topbar CSS.
Added a course details overlay with author, published/updated dates, and sources. Fixed a typo where the close button ID didn’t match, so the overlay wouldn’t close. (SLOPPY CODDEE FREE MEE FROM ITT AAAAAA)
Added URL routing for logged out users. Course catalog and sign in views now update the URL with pushState and respond correctly on refresh, instead of only working for logged in users. Same stuf.
Reorganized assets into an img subfolder and added minibit sprites. Built a reusable dialogue box component with a typewriter-style next button flow, wired it into the landing page as a mayor NPC introduction, then cleaned up its sizing and added a completion message. Updated INFO.txt to match the actual lesson type naming convention and added entries for architectureSim and cookingSim.
Looking for coding profesionalls to help build a curriculum, email me or create an issue on my github!
Notice, the sim is very sloppy and is most definetly gonna be subject to more additions later.
Reworked drawDimension so tick marks always offset perpendicular to the wall, instead of one shared calc for both axes. Room labels now use two separate font scales instead of one. (definetly subject to change) Started tracking a global bounding box so each room draws its own outer footprint dimensions, not just per wall.
Added a Rectangle tool (R key) next to the draw tool, so you can drag out four walls at once. Split drawMeasuredLine into drawWall (just the line) and drawDimension (offset line, ticks, label). Added a live HUD showing length and angle in draw mode, or width and height in rect mode, while dragging.
Built a real toolbar with pen and eraser buttons with my new assets. Eraser uses point to line distance to find and remove walls. Added a confirm modal before doing the full clearing canvas, and replaced the old gradient fade label background with a plain rect.
Rewrote room detection as extractRooms using a proper planar graph traversal: build an adjacency list, sort each node’s neighbors by angle, then walk faces with the right hand rule to pull out every enclosed room as its own polygon. This finally supports multiple separate rooms on one canvas. Also fixed a null vs empty array bug, scaled room labels by area, reorganized brand assets, and added eraser, house, and trash icons. (from: https://game-icons.net)
First pass at room detection using an adjacency graph, assuming a single closed loop. Fixed several bugs in the adjacency keys and neighbor tracking, added shoelace formula area calculation, and split wall segments at T-intersections so room boundaries follow them correctly. (everything boils down to math and calculations)
Pulled measurement drawing into its own function so every wall, not just the active drag, shows its length. (very crucial) Bumped the grid scale for easier snapping and more detail when i later add features such as chairs and tables that you can drag in. Added a gradient fade behind dimension labels, then small tick marks at each wall end. (visual aids)
Wired the sim into the real course system. added a lesson entry so i can properly test it now, imported the renderer into course.js, and fixed leftover syntax typos. (my work has been a bit sloppy recently) Built the actual studio layout with a brief panel and drafting canvas, then added the mouse listeners for drawing walls, with Shift locking to cardinal directions for more percise drawing.
Scaffolded the drafting canvas: pixels to feet scale, snap to grid, and the first working render loop with simple grid and stuf. Fixed a small topbar CSS bug where button heights jumped on hover.
If you read all this, thanks :D
Refactored how navigation flows when a user enters an active lesson block. Previously, I had the topbar fade down to opacity: 0.5 via a body class state, and a separate, clunky #lesson-back-btn floating fixed at the top-left of the viewport. It wasn’t great, and I thought i could do way better.
So instead i cleaned it up, removed the fade, and pretty much “hijacked” the main elements. The standard topbar elements were set to display:none; with the user profile button getting set to half opacity and non-clickable. changed existing #nav-explorer slot by transforming its text to ← Return and changing its weight.
also changed the if (!confirm()) basic alert for my better error alert box. duplicated the old alert box and made another for this one, fit with a cancel button and all.
The main obstacle was handling the application’s default click-routing initialization handlers. Simply changing the .onclick property didn’t work because hidden layout listeners attached via .addEventListener() were catching the event bubbles and dumping the user back to the main curriculum selector immediately anyway. (because remember were hijacking the explore btn)
Fixed it by utilizing Event Capturing:
topNavBtn.addEventListener("click", window.activeTopbarGate, true);
by passing true, the browser catches the user’s click at the absolute top of the DOM tree before the default routers can see it. Inside the wrapper, i ran e.stopPropagation() to stalls the execution chain while the custom gate logic processes.
standard browser alerts freeze javascript synchronously, but custom DOM boxes are asynchronous so a normal return gate wouldn’t cut it. i solved it by wrapping all my navigation cleanup loops inside a functional callback and passing it straight into the dialog box. hit OK, the callback fires and drops you out of the lesson; hit cancel, it just clears the overlay div out of the DOM tree so you can keep working.
also wut u guys feel about the better formatting lemme know, i don’t want it to sound like i just copy pasted chatgpt but i want to explain it better so im a bit conflicted
Refactored URL routing logic so it sits in one function routeFromURL making it easier to reuse. Before I just had the code duplicated in two places as a quick implementation, and also the back/forward buttons didn’t do anything because there wasn’t a popstate listener yet. Now i have window.addEventListener("popstate", routeFromURL) to fix that issue.
Added a Privacy Policy page matching the Journal Layout, now users can trust Novara (little more than before at least) to keep their information safe when they sign in.
Started a test cooking curriculum, using the cookingSim and HeatControl additions.
Also added an Abstract0, Abstract1, Abstract2 assets to be used later. Abstract2 already implemented into an 404 page and the practice panel when the user isn’t enrolled in any curriculums. fetchCourseData now wraps its fetch in a try/catch and calls show404() on failure.
I added a new lesson type, “cookingSim”, it currently only has one simulation “heatControl”. Its a simple minigame for monitoring heat. Later I will have several cooking simulations, and use them in a cooking curriculum.
The reason for creating special simulations, is because cooking is a visual and hands on thing, you can’t learn to cook by simply reading and answering questions about it.
I’m also working on wiring together a way for the url to reflect the current view, that way you can bookmark specific courses or share specific curriculums.
The main focus of it is: history.pushState() and window.addEventListener("popstate").
Another important part is this:
const params = new URLSearchParams(window.location.search);
const view = params.get(“view”);
const id = params.get(“id”);
so on page load, you can get the right viewport, eg: ?view=syllabus&id=js-course, would show "syllabus" and "js-course".
Since its on page load the code is primarly residing in window.firebaseAuth.onAuthStateChanged since that part automatically signs in the user and skips over the authentication and homepage process if the user has signed in before.
Added a custom theme tool, automatically generates the code so users can easily build a unique & polished ui.
Easy access in topbar for signed in users and non-signed in users.
Test it out here: https://cassetu.github.io/Novara/html/themeTool.html
(STOP CONSOLTING AI FOR THEMES:
fixed some bugs as the focus for today (v1.03.37)
error overlays were stacking in the DOM, so i made a showError() function instead of copy pasting the same code everywhere
also fixed activeCourseRef being stale after practice sessions, was sending users to the wrong place
Onboarding, 4 cards, teaches user to enroll in curriculums, and navigate the topbar
Added README.md
(And related images)
Novara is actually a project of mine that I’ve been working on for a while. (Since May 6th)
I just got back into it and added an inline alert box, since the native alert box is shown to be less intuitive and more hostile to users.
Most Devlogs here will be some form of iteration of my onsite Journal, but more in depth, and more focused.