Move code into ShiningSword as a reset, and rebase the URLs

App.sln

@@ -13,6 +13,7 @@ Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Items", "Solution
 		package.json = package.json
 		README.md = README.md
 		vite.config.js = vite.config.js
+		main.sass = main.sass
 	EndProjectSection
 EndProject
 Global

README.md

@@ -1,6 +1,6 @@
 # RPG Utils
 
-https://maxwilson.github.io/rpg/
+https://maxwilson.github.io/ShiningSword/
 
 Player utilities for AD&D.
 

main.sass

@@ -17,235 +17,7 @@ img, picture, svg, video
     display: block
     max-width: 100%
 
-// Arena-specific logic here
-
-.header
-    .internalLink
-        margin: auto 5px
-        // prevent bold items from growing by preemptively giving them an invisible bold twin already
-        display: inline-flex
-        flex-direction: column
-        align-items: center
-        justify-content: space-between
-    .internalLink::after // prevent bold items from growing by preemptively giving them an invisible bold twin already
-        content: attr(data-text)
-        content: attr(data-text) / ""
-        overflow: hidden
-        height: 0
-        visibility: hidden
-        user-select: none
-        pointer-events: none
-        font-weight: bold
-        @media speech
-            display: none
-    .srcLink
-        max-width: 6rem
-        float: right
-        background-color: white
-
-.error
-    font-weight: bold
-    color: red
-
-.arena
-    display: grid
-    grid-template-columns: minmax(auto, 1fr) auto
-    grid-template-rows: auto minmax(auto, 1fr)
-    > *:nth-child(1)
-        grid-row: 1 / 3
-    > *:nth-child(2)
-        grid-row: 1
-        display: flex
-        flex-direction: column
-    border: thin solid black
-    background-color: darkgray
-    padding: 10px
-    margin: 3px
-    button
-        margin: 6px
-
-.main
-    button, input
-        margin-right: 7px
-        margin-top: 3px
-        min-width: 1.5rem
-    .fightSetup, .fightLog, .statistics, .commandInput
-        margin-top: 5px
-    .fightSetup
-        user-select: none
-    .fightSetup, .fightLog
-        border: thin solid black
-        padding: 3px
-        input[type="number"]
-            max-width: 3rem
-        .editLink
-            margin-left: 3px
-            margin-right: 3px
-            color: #4007a2
-            color: -webkit-link
-            cursor: pointer
-            text-decoration: underline
-        .specificQuantity, .calibrated
-            margin: 3px
-            padding: 3px
-            border: 4px dashed lightgrey
-        .clearButton
-           float: right
-    .fightSetup
-        display: flex
-        flex-direction: row
-        flex-wrap: wrap
-        gap: 10px
-        .specificQuantity, .calibrated
-            width: max(18rem, 25vw) // don't shrink too much even on small screens
-        .calibrated
-            .calibrationRange
-                input
-                    padding: 2px
-                    box-sizing: content-box
-                    max-width: 3rem
-                    margin-left: 3px
-                    margin-right: 3px
-                button
-                    margin-left: 3px
-    .combat
-        margin: 5px
-        display: grid
-        grid-template-rows: auto 1fr auto
-        grid-template-columns: auto minmax(auto, 1fr)
-        grid-template-areas: "statusTable statusTable" "logButtons logButtons" "logEntries logEntries" "visuals visuals"
-        @media (min-width: 400px)
-            grid-template-areas: "statusTable logButtons" "statusTable logEntries" "visuals visuals"
-        @media (min-width: 800px)
-            grid-template-areas: "statusTable logButtons visuals" "statusTable logEntries visuals"
-        gap: 5px
-        .visuals
-            grid-area: visuals
-            padding: 5px
-            background-color: darkgray
-        .statusTable
-            grid-area: statusTable
-            max-height: 55vh
-            overflow-y: auto
-            table
-                min-width: 25vw
-        .logButtons
-            user-select: none
-            grid-area: logButtons
-            button
-                margin: 5px
-                margin-right: 10px
-            input[type="checkbox"]
-                position: relative
-                top: 2px
-                left: 5px
-        .logEntries
-            grid-area: logEntries
-            max-height: calc(55vh - 30px) // ugh, how to make this responsive? And shorter; it is running off the page right now and it looks ugly.
-            overflow-y: auto
-            .details
-                margin-left: 8px
-                font-size: 0.8rem
-            div
-                margin-bottom: 4px
-            .selected
-                background-color: lightgrey
-            img
-                display: inline-block
-        .purpleName
-            color: #800080
-            font-weight: bold
-        .blueName
-            color: blue
-            font-weight: bold
-        .injury
-            color: red
-            font-weight: bold
-        .teamPurple
-            background-color: #d8bfd8
-        .teamBlue
-            background-color: lightblue
-        td:first-child
-            font-weight: bold
-        .statusDead, .statusDisabled, .statusOk
-            font-weight: bold
-        .statusDead
-            color: black
-        .statusDisabled
-            color: yellow
-        .statusOk
-            color: green
-        td
-            padding: 2px
-            border: thin solid black
-            text-align: center
-
-.editView
-    display: grid
-    grid-auto-columns: repeat(auto-fit, minmax(100px, 1fr))
-    grid-template-columns: auto 1fr
-    user-select: None
-    .error
-        color: red
-    input
-        max-width: 8rem
-    input[type="number"]
-        max-width: 4rem
-    input[type="checkbox"]
-        position: relative
-        top: 2px
-        left: 5px
-    .textview
-        grid-column: 1 / span 2
-        max-width: 100%
-        resize: both
-        @media (width < 800px)
-            min-height: 5rem
-    .editDamage input
-        max-width: 80px
-    button, input, select
-        margin-top: 5px
-        margin-right: 10px
-    .buttons
-        margin-top: 20px
-        grid-column: 1
-    input, select
-        margin-left: 5px
-    button
-        padding: 5px
-        margin-right: 50px
-
-.campaign
-    button
-        margin: 2px 4px
-    .error input, .error textarea
-        color: red
-    textarea
-        resize: both
-    textarea.chargen
-        margin: auto 5px
-        min-width: 90vw
-    textarea.chooseParty
-        margin-left: 5px
-        height: 1rem
-        min-width: 200px
-    *
-        user-select: none
-    .purpleName, .partyDisplay .teamPurple
-        color: #800080
-        font-weight: bold
-    .blueName, .partyDisplay .teamBlue
-        color: blue
-        font-weight: bold
-
-.settingsView
-    user-select: none
-    .setting
-        margin: 4px
-        input[type='radio']
-            margin-left: 10px
-            margin-right: 4px
-
+// ShiningSword-specific logic here
 
 .slideFromTop
     animation: fromTop 0.5s ease-in-out
@@ -306,9 +78,40 @@ img, picture, svg, video
         animation-delay: 0.9s
 
 @keyframes wave
-  0%
-    transform: scale(0)
-  50%
-    transform: scale(1)
-  100%
-    transform: scale(0)
+    0%
+        transform: scale(0)
+    50%
+        transform: scale(1)
+    100%
+        transform: scale(0)
+
+.hasMargins
+    margin: 3px
+
+.header
+    .internalLink
+        margin: auto 5px
+        // prevent bold items from growing by preemptively giving them an invisible bold twin already
+        display: inline-flex
+        flex-direction: column
+        align-items: center
+        justify-content: space-between
+    .internalLink::after // prevent bold items from growing by preemptively giving them an invisible bold twin already
+        content: attr(data-text)
+        content: attr(data-text) / ""
+        overflow: hidden
+        height: 0
+        visibility: hidden
+        user-select: none
+        pointer-events: none
+        font-weight: bold
+        @media speech
+            display: none
+    .srcLink
+        max-width: 6rem
+        float: right
+        background-color: white
+
+.mainPage // page styling for most pages in ShiningSword: display a basic layout with a header, some data items and links
+    @extend .fadeIn
+    @extend .hasMargins

package.json

@@ -2,7 +2,7 @@
   "private": true,
   "scripts": {
     "start": "dotnet tool restore && dotnet fable watch src -e .jsx -o dist --runFast vite --port 8080",
-    "buildGithub": "dotnet fable src -e .jsx -o dist --sourceMaps --run vite build --base /rpg",
+    "buildGithub": "dotnet fable src -e .jsx -o dist --sourceMaps --run vite build --base /ShiningSword",
     "build": "dotnet tool restore && dotnet fable src -e .jsx -o dist --run vite build",
     "clean": "dotnet fable clean src --yes"
   },

src/Main.fs

@@ -17,15 +17,24 @@ let Router() =
         router.children [
             class' "header" Html.div [
                 classP' "srcLink" Html.a [
-                    prop.href "https://github.com/MaxWilson/rpg/"
+                    prop.href "https://github.com/MaxWilson/ShiningSword/"
                     prop.children [Html.img [prop.ariaLabel "GitHub"; prop.src "img/GitHub_Logo.png"]]
                     prop.target "_blank"
                     ]
                 ]
+            let lookup = [
+                "priestSpells", "Priest Spells by Sphere", (fun () -> UI.PriestSpellsView.View())
+                ]
+            let (|Segment|_|) segment =
+                lookup |> List.tryFind (fun (s, _, _) -> s = segment)
             match currentUrl with
-            | [ "spells" ] -> UI.PriestSpellsView.View()
+            | [ Segment (_, _, view) ] -> view()
             | otherwise ->
-                UI.PriestSpellsView.View()
+                class' "mainPage" Html.div [
+                    Html.h1 "Shining Sword RPG apps"
+                    for (segment, name, _) in lookup do
+                        Html.a [prop.text name; prop.href ("#" + segment)]
+                    ]
             ]
         ]