diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 191c3df..6508749 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -5,10 +5,12 @@ on: paths: - "src/**" - "public/**" + - ".github/workflows/ci.yml" pull_request: paths: - "src/**" - "public/**" + - ".github/workflows/ci.yml" jobs: ubuntu: runs-on: ubuntu-latest @@ -22,18 +24,14 @@ jobs: nimble install -d -y - name: Frontend - run: nimble frontend - - - name: Backend - run: nimble build + run: nimble htmlpage - name: Upload Artifacts uses: actions/upload-artifact@v4 with: name: ubuntu path: | - app - public + dist if-no-files-found: error # windows: diff --git a/grado.nimble b/grado.nimble index 5f7dd27..04b9a90 100644 --- a/grado.nimble +++ b/grado.nimble @@ -17,12 +17,33 @@ requires "prologue >= 0.6.4" requires "sass >= 0.2.0" requires "kdl >= 2.0.1" -task frontend, "Compiles the frontend to JavaScript and builds the CSS": +task css, "Builds the CSS": exec "nimble c -r --mm:refc src/buildcss" - exec "nim js --outdir:public/js src/frontend" task frontendjs, "Compiles the frontend to JavaScript": exec "nim js --outdir:public/js src/frontend" -task css, "Builds the CSS": - exec "nimble c -r --mm:refc src/buildcss" +task frontend, "Compiles the frontend to JavaScript and builds the CSS": + exec "nimble css" + exec "nim frontendjs" + +import std/strtabs +import src/config as _ + +task htmlpage, "Generates a single html page": + exec "nimble css" + exec "nim js -d:relativePath --out:dist/app.js src/frontend" + + mkDir "dist" + cpFile "public/css/style.css", "dist/style.css" + cpDir "public/img", "dist/img" + + writeFile "dist/index.html", readFile("public/karax.html") % + { + "title": config.title, + "frontend": "./app.js", + "style": "./style.css", + "favicon": "./img/favicon.ico" + # "timestamp": encodeUrl(CompileDate & CompileTime), + # "ga": config.ga + }.newStringTable() diff --git a/public/karax.html b/public/karax.html index 879cb3e..117ee82 100644 --- a/public/karax.html +++ b/public/karax.html @@ -9,7 +9,7 @@ $title - + @@ -24,7 +24,7 @@ - + @@ -37,41 +37,57 @@ +
- + - + - + - + - + + - - + + diff --git a/src/app.nim b/src/app.nim index 9bed626..3f8cd78 100644 --- a/src/app.nim +++ b/src/app.nim @@ -9,6 +9,9 @@ proc getKarax(ctx: Context) {.async.} = resp htmlResponse readFile("public/karax.html") % { "title": config.title, + "frontend": "/public/js/frontend.js", + "style": "/public/css/style.css", + "favicon": "/public/img/favicon.ico" # "timestamp": encodeUrl(CompileDate & CompileTime), # "ga": config.ga }.newStringTable() diff --git a/src/frontend.nim b/src/frontend.nim index 046cf80..0ae4ed2 100644 --- a/src/frontend.nim +++ b/src/frontend.nim @@ -5,7 +5,7 @@ import karax/[karax, kajax, karaxdsl, vdom, vstyles, i18n, jdict, languages] # import matter import frontend/[routes, utils, patterns] -import frontend/simulations/parabola +import frontend/simulations/[parabola, utils] type State = ref object @@ -44,27 +44,17 @@ var state = newState() # addTranslation(esCo, "s/0/") -proc renderHome(params: Params): VNode = - #discard setTimeout(proc() = navigateTo("/parabola"), 10) - navigateTo("/parabola") - - buildHtml(tdiv): - text "Welcome to my grado project" - proc render(): VNode = - buildHtml(tdiv): - # renderHeader() - state.location.route([ - r("/", proc(params: Params): VNode = - state.parabola.render() - ) - ]) + state.parabola.render() proc postRender() = # Since matter needs to find the canvas element, if we load the simulation before karax has created the canvas element it won't work if not state.matterLoaded: - state.parabola.load() - state.matterLoaded = true + if not MathJax.typesetPromise.isNil: + state.parabola.load() + state.matterLoaded = true + else: + discard setTimeout(postRender, 100) # This event is (usually only) called when the user moves back in history # Here we fake the moving-back-in-history action so it doesn't actually reload the page diff --git a/src/frontend/simulations/parabola.nim b/src/frontend/simulations/parabola.nim index bdd9adb..b0ee67f 100644 --- a/src/frontend/simulations/parabola.nim +++ b/src/frontend/simulations/parabola.nim @@ -143,6 +143,12 @@ proc calcTime(initialState: CanonState, y: float, sign: bool): float = proc magnitude(v: Vec): float = sqrt(v.x^2 + v.y^2) +proc path(p: static string): string = + when defined(relativePath): + "./" & p + else: + "/public/" & p + const fps = 60 timeScale = 0.025 @@ -160,9 +166,9 @@ const canonSpeedChange = 1.0 canonAngleChangeDeg = 3.0 - canonTexture = "/public/img/canon.png" - canonBaseTexture = "/public/img/canonBase.png" - canonPlatformTexture = "/public/img/canonPlatform.png" + canonTexture = path "img/canon.png" + canonBaseTexture = path "img/canonBase.png" + canonPlatformTexture = path "img/canonPlatform.png" trajectoryStrokeStyles = ["Orange", "Salmon", "Crimson", "Pink", "HotPink", "Tomato", "Gold", "Khaki", "Violet", "SlateBlue", "YellowGreen", "LightSeaGreen", @@ -524,7 +530,7 @@ proc updatePointAccordion(state: var ParabolaState) = getElementById("point-input-vx").value = "" getElementById("point-input-vy").value = "" getElementById("point-input-s").value = "" - #getElementById("point-input-x").setAttribute("disabled", "") + var siInitialState = state.trajectory.state.toMu() siInitialState.gravity = siInitialState.gravity * gravityFactor @@ -646,8 +652,8 @@ proc calcTrajectory(state: var ParabolaState) = elif prevLastPoint: state.trajectory.pinnedPoint = state.trajectory.points.high - state.updatePointAccordion() state.updateStateAccordion() + state.updatePointAccordion() state.updateFormulaAccordion() ## The difference of canon's y respect base's y @@ -1818,7 +1824,7 @@ proc renderStateAccordion(state: var ParabolaState): VNode = tdiv(class = "col-9 col-sm-12"): input(class = "form-input form-inline", `type` = "number", id = "state-input-g", - step = state.inputStep, onchange = onInputGChange) + step = cstring state.inputStep, onchange = onInputGChange) tdiv(class = "accordion-body"): for e, (name, gravity) in gravities: