diff --git a/backup_class_selctor_stuff_lol b/backup_class_selctor_stuff_lol new file mode 100644 index 0000000..17c3c77 --- /dev/null +++ b/backup_class_selctor_stuff_lol @@ -0,0 +1,31 @@ +function ClassSelectorWindow(p) { + return { + var dat1 = p.GetData("class") + return Object.keys(dat1) + } + } + displayFunction={(key) => { + return
  • { if (p.editClass===0){p.setClassName(key)}else{p.setSubClassName(key)}; p.setModalOpen(false) }}> {p.GetData("class", key, "name")}
    • + }} + /> + } + + + + + + + + +
    +
    +

    Class Skill Tree

    +
    { setClassSkillTreeWindowOpen(false) }}>
    +
    +
    +
      + {Object.keys(p.GetData("class")).map((cl)=>
    • {cl}
      • )} +
    +
    +
    \ No newline at end of file diff --git a/public/icons/class/br.png b/public/icons/class/br.png new file mode 100644 index 0000000..1c51c2b Binary files /dev/null and b/public/icons/class/br.png differ diff --git a/public/index.html b/public/index.html index 61504a9..265a696 100644 --- a/public/index.html +++ b/public/index.html @@ -3,8 +3,6 @@ - - React App + NGS Planner diff --git a/src/3.woff b/src/3.woff deleted file mode 100644 index 8cf9165..0000000 Binary files a/src/3.woff and /dev/null differ diff --git a/src/4.woff b/src/4.woff deleted file mode 100644 index 9ac33b7..0000000 Binary files a/src/4.woff and /dev/null differ diff --git a/src/App.js b/src/App.js index b5724e8..edf4d95 100644 --- a/src/App.js +++ b/src/App.js @@ -39,7 +39,7 @@ const PARRY_COUNTER = 4 //NOT USED YET*/ const BACKENDURL=process.env.REACT_APP_GITPOD_WORKSPACE_URL||process.env.REACT_APP_BACKENDURL||'https://projectdivar.com:4504' -const APP_TITLE = "NGSplanner" +const APP_TITLE = "NGS Planner" function GetBackendURL(p) { return (BACKENDURL)+(p.TESTMODE?"/test":"") @@ -804,7 +804,7 @@ function App() { - {APP_TITLE+" - Test"} + {"Test - "+APP_TITLE} +
      -
    •  NGSplanner.com
      • +
    •  NGSplanner.com
    • Build Planner
    • Guides
    • Blog
      • diff --git a/src/TestPanel.js b/src/TestPanel.js index 4aebef2..11ab10b 100644 --- a/src/TestPanel.js +++ b/src/TestPanel.js @@ -104,18 +104,7 @@ function ClassSelector(p){ } -function ClassSelectorWindow(p) { - return { - var dat1 = p.GetData("class") - return Object.keys(dat1) - } - } - displayFunction={(key) => { - return
    • { if (p.editClass===0){p.setClassName(key)}else{p.setSubClassName(key)}; p.setModalOpen(false) }}> {p.GetData("class", key, "name")}
      • - }} -/> -} + function EditableClass(p){ return <>
      {p.setClassNameSetter(p.editClass);p.setClassSelectWindowOpen(true)}}> @@ -200,6 +189,7 @@ const [statPage,setStatPage] = useState(1) const [classSelectWindowOpen,setClassSelectWindowOpen] = useState(false) const [classSkillTreeWindowOpen,setClassSkillTreeWindowOpen] = useState(false) +const [treePage,setTreePage] = useState(1) const [weaponSelectWindowOpen,setWeaponSelectWindowOpen] = useState(false) const [armorSelectWindowOpen,setArmorSelectWindowOpen] = useState(false) @@ -220,6 +210,7 @@ const [skillTreeGridSizeX,setSkillTreeGridSizeX] = useState(171) const [skillTreeGridSizeY,setSkillTreeGridSizeY] = useState(148) const [skillTreeGridPaddingX,setSkillTreeGridPaddingX] = useState(10) const [skillTreeGridPaddingY,setSkillTreeGridPaddingY] = useState(48) +const [halflineheight,setHalfLineHeight] = useState(60) const [classNameSetter,setClassNameSetter] = useState(0) @@ -261,6 +252,7 @@ useEffect(()=>{ setSkillTreeGridSizeY(skillTree.gridsizey) setSkillTreeGridPaddingX(skillTree.gridpaddingx) setSkillTreeGridPaddingY(skillTree.gridpaddingy) + setHalfLineHeight(skillTree.halflineheight) break; } } @@ -286,7 +278,7 @@ useEffect(()=>{ - Class + {setClassSelectWindowOpen(true)}}>Class @@ -310,10 +302,10 @@ useEffect(()=>{

      Current Effects

      -

      Effect Name

      -
        - { - effectPage===1?<>
      • Food Boost Effect + {effectPage===1?<>

        Effect Name

        • Food Boost Effect + + +
          •  [Meat] Potency +10.0%
          •  [Crisp] Potency to Weak Point +5.0%
            • @@ -329,9 +321,9 @@ useEffect(()=>{
            •  Potency +5.0%
            - :<> - } -
          +
        :<> + + }
    @@ -414,6 +406,7 @@ AUGMENT

    To Do List

      +
    • Grids. Grids everywhere.
    • Finish "Item Details" for Weapons/Armor
    • Class Skill Window
    • PA Select Window
      • @@ -548,56 +541,66 @@ AUGMENT
    - - - -{setClassSkillTreeWindowOpen(false)}} shouldFocusAfterRender={true} shouldCloseOnOverlayClick={true} shouldCloseOnEsc={true} className="modalSkillTree" overlayClassName="modalOverlaySkillTree"> -
    +{setClassSelectWindowOpen(false)}} shouldFocusAfterRender={true} shouldCloseOnOverlayClick={true} shouldCloseOnEsc={true} className="modal" overlayClassName="modalOverlay"> +
    -

    Class Skill Tree

    +

    Select Main Class

    { setClassSkillTreeWindowOpen(false) }}>
      - {Object.keys(p.GetData("class")).map((cl)=>
    • {cl}
      • )} +
    • Hunter
      • +
    • Fighter
      • +
    • Ranger
      • +
    • Gunner
      • +
    • Force
      • +
    • Techter
      • +
    • Braver
    +     + + + { setClassSkillTreeWindowOpen(false) }} shouldFocusAfterRender={true} shouldCloseOnOverlayClick={true} shouldCloseOnEsc={true} className="modal" overlayClassName="modalOverlay">
    -

    Ranger01

    +

    Class Skill Tree

    { setClassSkillTreeWindowOpen(false) }}>
    -
    -
    - {} -
    -
    1/5Blight Rounds
    -
     1/1Blight Rounds Reinforce
    -
    0/10Bad Condition Ward
    -
    0/1Spread Shot
    -
     0/1Spread Shot Quick Getaway
    -
    0/10Bad Condition Reduction
    -
    0/1Rifle Grenadier
    -
    0/1Slide Shot Advance
    -
    0/1Sticky Bomb Quick Reload
    -
    0/1Launcher Charge Grouping
    -
    0/1Slow Landing Attack-Ranger
    -
    0/1Slow Landing Charge-Ranger
    -
    0/1Slow Landing Charge-Ranger
    -
    0/1Slow Landing Charge-Ranger
    + Ranger, <> Force, "Launcher", "Rod", "Talis"]} currentPage={treePage} setCurrentPage={setTreePage} /> + {treePage === 1 ? <> +
    +
    + {} +
    +
    1/5Blight Rounds
    +
     1/1Blight Rounds Reinforce
    +
    0/10Bad Condition Ward
    +
    0/1Spread Shot
    +
     0/1Spread Shot Quick Getaway
    +
    0/10Bad Condition Reduction
    +
    0/1Rifle Grenadier
    +
    0/1Slide Shot Advance
    +
    0/1Sticky Bomb Quick Reload
    +
    0/1Launcher Charge Grouping
    +
    0/1Slow Landing Attack-Ranger
    +
    0/1Slow Landing Charge-Ranger
    +
    +
    : <>} +
    +
    Your Skill Points6
    +
    SP0
    -
    -
    Your Skill Points  6   SP    0
    -
    ConfirmCancel
    +
    ConfirmCancel
    +
    - - + { setWidth(p.gridSizeX*p.gridDimensionsX+p.gridPaddingX*(p.gridDimensionsX-1)) - setHeight(p.gridSizeY*p.gridDimensionsY+p.gridPaddingY*(p.gridDimensionsY-1)) - }, [p.skillLines,p.gridSizeX,p.gridSizeY,p.gridPaddingX,p.gridPaddingY,p.gridDimensionsX,p.gridDimensionsY]) + setHeight(p.gridSizeY*Math.ceil(p.gridDimensionsY/2)+p.halflineheight*Math.floor(p.gridDimensionsY/2)+p.gridPaddingY*(p.gridDimensionsY-1)) + }, [p.halflineheight,p.skillLines,p.gridSizeX,p.gridSizeY,p.gridPaddingX,p.gridPaddingY,p.gridDimensionsX,p.gridDimensionsY]) useEffect(()=>{ const canvas = canvasRef.current @@ -25,25 +25,25 @@ function SkillTree(p) { var padX = x!==0?p.gridPaddingX*x:0 var padY = y!==0?p.gridPaddingY*y:0 switch (char) { - case "─":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)-p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX+p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.stroke();break; - case "│":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)-p.gridPaddingY);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY+p.gridPaddingY);context.stroke();break; - case "└":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)-p.gridPaddingY);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX+p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.stroke();break; - case "┌":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX+p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY+p.gridPaddingY);context.stroke();break; - case "┘":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)-p.gridPaddingY);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)-p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.stroke();break; - case "┐":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)-p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY+p.gridPaddingY);context.stroke();break; - case "├":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)-p.gridPaddingY);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX+p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.stroke();context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX+p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY+p.gridPaddingY);context.stroke();break; - case "┤":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)-p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY+p.gridPaddingY);context.stroke();context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)-p.gridPaddingY);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)-p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.stroke();break; - case "┬":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)-p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY+p.gridPaddingY);context.stroke();context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX+p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY+p.gridPaddingY);context.stroke();break; - case "┴":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)-p.gridPaddingY);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX+p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.stroke();context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)-p.gridPaddingY);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)-p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.stroke();break; - case "┼":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)-p.gridPaddingY);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY+p.gridPaddingY);context.moveTo(x*p.gridSizeX+(padX)-p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX+p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.stroke();break; - case "□":context.fillRect(x*p.gridSizeX+(padX), y*p.gridSizeY+(padY), p.gridSizeX, p.gridSizeY);break; + case "─":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)-p.gridPaddingX,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX+p.gridPaddingX,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.stroke();break; + case "│":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)-p.gridPaddingY);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY+p.gridPaddingY);context.stroke();break; + case "└":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)-p.gridPaddingY);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX+p.gridPaddingX,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.stroke();break; + case "┌":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX+p.gridPaddingX,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY+p.gridPaddingY);context.stroke();break; + case "┘":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)-p.gridPaddingY);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)-p.gridPaddingX,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.stroke();break; + case "┐":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)-p.gridPaddingX,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY+p.gridPaddingY);context.stroke();break; + case "├":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)-p.gridPaddingY);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX+p.gridPaddingX,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.stroke();context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX+p.gridPaddingX,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY+p.gridPaddingY);context.stroke();break; + case "┤":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)-p.gridPaddingX,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY+p.gridPaddingY);context.stroke();context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)-p.gridPaddingY);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)-p.gridPaddingX,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.stroke();break; + case "┬":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)-p.gridPaddingX,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY+p.gridPaddingY);context.stroke();context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX+p.gridPaddingX,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY+p.gridPaddingY);context.stroke();break; + case "┴":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)-p.gridPaddingY);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX+p.gridPaddingX,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.stroke();context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)-p.gridPaddingY);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)-p.gridPaddingX,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.stroke();break; + case "┼":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)-p.gridPaddingY);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY+p.gridPaddingY);context.moveTo(x*p.gridSizeX+(padX)-p.gridPaddingX,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX+p.gridPaddingX,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.stroke();break; + case "□":context.fillRect(x*p.gridSizeX+(padX), Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY), p.gridSizeX, p.gridSizeY);break; default: } x++ } y++ } - },[width,height,p.gridSizeX,p.gridSizeY,p.gridPaddingX,p.gridPaddingY,p.lineDash,p.lineWidth,p.skillLines,p.strokeStyle]) + },[width,height,p.gridSizeX,p.gridSizeY,p.gridPaddingX,p.gridPaddingY,p.lineDash,p.lineWidth,p.skillLines,p.strokeStyle,p.halflineheight]) return Number(skill.split(",")[0])===Number(x)&&Number(skill.split(",")[1])===Number(y)) @@ -46,6 +47,7 @@ function SkillTreeEditor(p) { gridsizey:gridSizeY, gridpaddingx:gridPaddingX, gridpaddingy:gridPaddingY, + halflineheight:halflineheight, class_id:cl }) .then((data)=>{ @@ -85,6 +87,7 @@ function SkillTreeEditor(p) { setGridSizeY(skillTreeData[id].gridsizey) setGridPaddingX(skillTreeData[id].gridpaddingx) setGridPaddingY(skillTreeData[id].gridpaddingy) + setHalfLineHeight(skillTreeData[id].halflineheight) found=true } } @@ -171,7 +174,7 @@ function SkillTreeEditor(p) {
    {renderedInputs.map((control)=>control)}
    @@ -181,6 +184,7 @@ function SkillTreeEditor(p) { {setLineWidth(f.currentTarget.value)}}/>
    {setDimensionX(f.currentTarget.value)}}/>
    {setDimensionY(f.currentTarget.value)}}/>
    + {setHalfLineHeight(f.currentTarget.value)}}/>
    {setGridSizeX(f.currentTarget.value)}}/>
    {setGridSizeY(f.currentTarget.value)}}/>
    {setGridPaddingX(f.currentTarget.value)}}/>
    diff --git a/src/style.css b/src/style.css index 41051cb..f570bd9 100644 --- a/src/style.css +++ b/src/style.css @@ -3,6 +3,10 @@ margin: 0; padding: 0; box-sizing: border-box; + -webkit-user-select: none; /* Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE10+/Edge */ + user-select: none; /* Standard */ } @font-face { font-family: "ngs"; @@ -20,6 +24,10 @@ font-family: "ngs4"; src: url("./fonts/1.woff") format("woff"); } +@font-face { + font-family: "Segoe UI Symbol"; + src: url("./fonts/seguisym.ttf") format("truetype"); + } a, a:visited { color: white; text-decoration: none; @@ -34,20 +42,7 @@ hr { } img { vertical-align: middle; -}/* -body { - background-image: url("./icons/d_global_bg_header.png"),url("./icons/gl_main_bg.jpg"); - background-size: 1903px,2560px; - background-color: #e8ecf4; - background-repeat: no-repeat,repeat-y; - background-position: center 0; - color: black; - font-family: ngs,Arial,sans-serif; - font-size: 11pt; - font-weight: normal; - text-align: center; - -webkit-font-smoothing: antialiased; -}*/ +} body { background-image: url("https://pbs.twimg.com/media/E8tfm23VUAQTAAu?format=jpg&name=4096x4096"); background-color: #e8ecf4; @@ -57,10 +52,10 @@ body { background-size: cover; color: black; font-family: ngs,Arial,sans-serif; - font-size: 11pt; + font-size: 16px; font-weight: normal; text-align: center; - -webkit-font-smoothing: antialiased; + } table td { vertical-align: top; @@ -73,47 +68,29 @@ em { font-style: normal; } #header { - background-color: white; + background-color: rgba(0,0,0,0.33); min-height: 50px; padding: 20px; text-align: left; - margin-bottom: 20px; + color:white; } -#header a { - color: #151f25; +.header a { + /*color: #151f25;*/ + color:white; text-decoration: none; } -#header a:hover { - color: #454f85; +.header a:hover { + background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66)); text-decoration: none; } -#header div { - margin: 0 auto; - width: 80%; -} -#header ul { - display: flex; - flex-flow: row wrap; - align-items: center; - margin-left: -40px; - justify-content: flex-end; -} -#header ul li { - flex: 0 1; - color: black; - font-family: "ngs2"; - text-align: center; - white-space:nowrap; - -} -.headermenuitem { - font-size:14pt; - margin-left: 40px; -} .logo { + font-family: "ngs2"; margin-right: auto; - font-weight:bold; - font-size:20px; + font-size:24px; +} +.logo span{ + font-size:16px; + text-transform: uppercase; } .logo img { height:28px; @@ -128,24 +105,12 @@ em { display:none; } } -.main { - display: flex; - flex-flow: row wrap; +.main,.header { + display: grid; + grid-template-columns: repeat(auto-fit,minmax(300px,450px)); justify-content: center; -} -.containerA, .containerC { - flex-grow: 1; - flex-shrink: 1; - flex-basis: 240px; - max-width: 360px; - margin: 0 5px; -} -.containerB { - flex-grow: 1; - flex-shrink: auto; - flex-basis: auto; - max-width: 480px; - margin: 0 5px; + gap: 10px; + margin: 0 10px; } .box { color: #97e2fc; @@ -155,8 +120,6 @@ em { text-align: left; text-shadow: -1px -1px 0 rgba(0,0,0,0.66), 1px -1px 0 rgba(0,0,0,0.66), -1px 1px 0 rgba(0,0,0,0.66), 1px 1px 0 rgba(0,0,0,0.66); padding-bottom:10px; - /*filter: drop-shadow(0 5px 5px rgba(0,0,0,0.8));*/ - /*box-shadow: 0 10px 16px 0 rgba(0,0,0,0.5), 0 6px 20px 0 rgba(0,0,0,0.5) !important;*/ backdrop-filter: blur(10px); } @@ -210,25 +173,20 @@ em { }*/ .boxTitleBar { - /* background-color: #495a61; */ background-color: rgba(124, 144, 148, 0.66); color: white; font-weight: normal; - font-size: 13pt; + font-size: 18px; text-align: left; - white-space: nowrap; display: flex; flex-flow: row nowrap; justify-content: space-between; } .boxTitleBar h1 { - /* background-color: #495a61; */ color: white; font-weight: normal; - font-size: 13pt; - overflow: hidden; - text-overflow: ellipsis; + font-size: 18px; margin-right: 10px; padding: 13px 13px 7px 13px; } @@ -709,7 +667,7 @@ option { top: -10px; } .treeList { - padding: 0 2px; + padding: 0 2px 2px 2px; } .treeList li { background-color: rgba(128,128,128,0.33); @@ -719,12 +677,16 @@ option { background-repeat: no-repeat; background-position: right center; background-origin: content-box; + line-height: 20px; +} +li.treeListMain:after, li.treeListSub:after { + margin-left: 10px; } -li.treeListMain { - background-image: url("./icons/class_main.png"); +li.treeListMain:after { + content: url("./icons/class_main.png"); } -li.treeListSub { - background-image: url("./icons/class_sub.png"); +li.treeListSub:after { + content: url("./icons/class_sub.png"); } .treeList li img { vertical-align: middle; @@ -735,7 +697,6 @@ li.treeListSub { margin: 0; min-width: 181px; min-height: auto; - /*box-shadow: 0 10px 16px 0 rgba(0,0,0,0.5), 0 6px 20px 0 rgba(0,0,0,0.5) !important;*/ outline: 1px solid rgba(54,255,255,1); } .skillTreeBox .boxTitleBar, .treeSelectBox .boxTitleBar { @@ -854,6 +815,18 @@ div.skillMaxed .skillAllocated { padding: 16px 0 10px 0; color: white; font-size: 14pt; + display: grid; + grid-template-columns: repeat(auto-fit,292px); + justify-content: center; + gap: 10px; +} +.skillPoints div:first-child { + text-align: center; +} +.skillPoints div span { + display: inline-block; + width: calc(292px / 2); + text-align: center; } .skillConfirm { justify-content: center; @@ -986,35 +959,14 @@ button{ display: grid; justify-items: stretch; align-items: center; - grid-template-columns: minmax(10px, 1fr) minmax(200px, 580px) minmax(10px, 1fr); - grid-template-rows: 10px minmax(0, 1fr) 10px; -} -.modalOverlaySkillTree { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.8)); - display: grid; - justify-items: stretch; - align-items: center; - grid-template-columns: minmax(220px, 1fr) minmax(0, auto) minmax(10px, 1fr); - grid-template-rows: 10px minmax(0, 1fr) 10px; + grid-template-columns: minmax(10px, 1fr) minmax(200px, auto) minmax(10px, 1fr); + grid-template-rows: 10px minmax(10px, 1fr) 10px; } .modal { outline: 0; grid-column: 2; grid-row: 2; } -.modalSkillTree { - position: relative; - outline: 0; - grid-column: 2; - grid-row: 2; -/* display: flex; - flex-flow: row nowrap;*/ -} .boxModal { animation: fadeIn 0.15s; max-width: 580px; @@ -1022,19 +974,26 @@ button{ box-shadow: 0 10px 16px 0 rgba(0,0,0,0.5), 0 6px 20px 0 rgba(0,0,0,0.5) !important; outline: 1px solid rgba(54,255,255,1); } +.boxModalClassSelect { + animation: fadeIn 0.15s; + width: 300px; + margin: 0 auto; + box-shadow: 0 10px 16px 0 rgba(0,0,0,0.5), 0 6px 20px 0 rgba(0,0,0,0.5) !important; + outline: 1px solid rgba(54,255,255,1); +} @keyframes fadeIn { 0% {opacity:0;margin-bottom:30px;} 100% {opacity:1;margin-bottom:0;} } -.boxModal .boxTitleBar { +.boxModal .boxTitleBar, .boxModalClassSelect .boxTitleBar { background: linear-gradient(45deg, rgba(47,153,193,0.66),rgba(46,94,137,0.66) 30%,rgba(46,94,137,0.66) 70%, rgba(47,153,193,1)); } .modalItemListContainer { - overflow-y: auto; - overflow-x: hidden; - margin: 10px 5px 0 0; - padding: 2px; - max-height: calc(90vh - 115px); + overflow-y: auto; + overflow-x: hidden; + margin: 10px 5px 0 0; + padding: 2px; + max-height: calc(90vh - 115px); } .webicon{ color:maroon;