[other] fix simulator

Author: Keisuke Izumiya

src/pon2/app/color.nim

@@ -25,18 +25,12 @@ const
 # ------------------------------------------------
 
 when defined(js):
-  import std/[strutils]
+  import std/[strformat, strutils]
   import karax/[kbase]
 
   func toColorCode*(color: Color): kstring {.inline.} =
     ## Returns the color code (including '#') converted from the color.
-    kstring join [
-      "#",
-      color.red.toHex(2),
-      color.green.toHex(2),
-      color.blue.toHex(2),
-      color.alpha.toHex(2),
-    ]
+    kstring &"#{color.red.toHex 2}{color.green.toHex 2}{color.blue.toHex 2}{color.alpha.toHex 2}"
 else:
   import nigui
 

src/pon2/app/ide/web.nim

@@ -65,7 +65,7 @@ proc newIdeNode(self: Ide, id: string): VNode {.inline.} =
         simulatorNode
       tdiv(class = "block"):
         self.newShareNode(&"{ShareIdPrefix}{id}", false)
-    if self.simulator.mode in {PlayEditor, Edit} and self.simulator.kind == Nazo:
+    if self.simulator.mode != Play and self.simulator.kind == Nazo:
       tdiv(class = "column is-narrow"):
         section(class = "section"):
           tdiv(class = "block"):
@@ -82,6 +82,8 @@ proc newIdeNode(self: Ide, id: string): VNode {.inline.} =
                 self.newAnswerSimulatorNode &"{AnswerSimulatorIdPrefix}{id}"
               tdiv(class = "block"):
                 self.newShareNode(&"{AnswerShareIdPrefix}{id}", true)
+    tdiv(class = "column is-narrow"):
+      self.newDisplayNode &"{ShareIdPrefix}{id}"
 
 proc newIdeNode*(
     self: Ide, setKeyHandler = true, wrapSection = true, id = ""

src/pon2/app/simulator/web.nim

@@ -30,7 +30,7 @@ import
 
 const ReqIdPrefix = "pon2-simulator-req-"
 
-proc newSimulatorNode(self: Simulator, id: string): VNode {.inline.} =
+proc newSimulatorNode(self: Simulator, id: string, hideSelect: bool): VNode {.inline.} =
   ## Returns the node without the external section.
   buildHtml(tdiv):
     tdiv(class = "block"):
@@ -46,7 +46,7 @@ proc newSimulatorNode(self: Simulator, id: string): VNode {.inline.} =
           if self.mode != Edit:
             tdiv(class = "block"):
               self.newMessagesNode
-          if self.mode in {PlayEditor, Edit}:
+          if not hideSelect and self.mode != Play:
             tdiv(class = "block"):
               self.newSelectNode
         if self.mode != Edit:
@@ -62,9 +62,11 @@ proc newSimulatorNode(self: Simulator, id: string): VNode {.inline.} =
           tdiv(class = "block"):
             self.newPairsNode
 
-proc newSimulatorNode*(self: Simulator, wrapSection = true, id = ""): VNode {.inline.} =
+proc newSimulatorNode*(
+    self: Simulator, wrapSection = true, id = "", hideSelect = false
+): VNode {.inline.} =
   ## Returns the simulator node.
-  let node = self.newSimulatorNode id
+  let node = self.newSimulatorNode(id, hideSelect)
 
   if wrapSection:
     result = buildHtml(section(class = "section")):

src/pon2/private/app/ide/web/answer.nim

@@ -14,4 +14,4 @@ import ../../../../app/simulator/[web]
 
 proc newAnswerSimulatorNode*(ide: Ide, id: string): VNode {.inline.} =
   ## Returns the answer simulator node.
-  ide.answerSimulator.newSimulatorNode(wrapSection = false, id = id)
+  ide.answerSimulator.newSimulatorNode(wrapSection = false, id = id, hideSelect = true)

src/pon2/private/app/ide/web/share.nim

@@ -32,7 +32,7 @@ proc downloadDisplayImage(
     &"""
 const div = document.getElementById('{DisplayDivIdPrefix}' + (#));
 div.style.display = 'block';
-html2canvas(div).then((canvas) => {{
+html2canvas(div, {{scale: 3}}).then((canvas) => {{
   div.style.display = 'none';
 
   const element = document.createElement('a');
@@ -76,7 +76,7 @@ proc newShareNode*(ide: Ide, id: string, useAnswer: bool): VNode {.inline.} =
     sim = if useAnswer: ide.answerSimulator else: ide.simulator
 
   result = buildHtml(tdiv):
-    if sim.mode != View:
+    if not useAnswer:
       tdiv(class = "block"):
         span(class = "icon"):
           italic(class = "fa-brands fa-x-twitter")
@@ -153,24 +153,30 @@ proc newShareNode*(ide: Ide, id: string, useAnswer: bool): VNode {.inline.} =
             ),
           ):
             text "操作有"
+
+proc newDisplayNode*(ide: Ide, id: string): VNode {.inline.} =
+  ## Returns the display node for image saving.
+  ## `id` should be the same as the one used in `newShareNode`.
+  buildHtml(
     tdiv(
       id = kstring &"{DisplayDivIdPrefix}{id}",
       style = style(StyleAttr.display, kstring"none"),
-    ):
-      tdiv(class = "block"):
-        sim.newRequirementNode(true, id)
-      tdiv(class = "block"):
-        tdiv(class = "columns is-mobile is-variable is-1"):
-          tdiv(class = "column is-narrow"):
-            tdiv(class = "block"):
-              sim.newFieldNode(true)
-            tdiv(class = "block"):
-              sim.newMessagesNode
-          tdiv(id = kstring &"{DisplayPairDivIdPrefix}{id}", class = "column is-narrow"):
-            tdiv(class = "block"):
-              sim.newPairsNode(true, false)
-          tdiv(
-            id = kstring &"{DisplayPairPosDivIdPrefix}{id}", class = "column is-narrow"
-          ):
-            tdiv(class = "block"):
-              sim.newPairsNode(true, true)
+    )
+  ):
+    tdiv(class = "block"):
+      ide.simulator.newRequirementNode(true, id)
+    tdiv(class = "block"):
+      tdiv(class = "columns is-mobile is-variable is-1"):
+        tdiv(class = "column is-narrow"):
+          tdiv(class = "block"):
+            ide.simulator.newFieldNode(true)
+          tdiv(class = "block"):
+            ide.simulator.newMessagesNode
+        tdiv(id = kstring &"{DisplayPairDivIdPrefix}{id}", class = "column is-narrow"):
+          tdiv(class = "block"):
+            ide.simulator.newPairsNode(true, false)
+        tdiv(
+          id = kstring &"{DisplayPairPosDivIdPrefix}{id}", class = "column is-narrow"
+        ):
+          tdiv(class = "block"):
+            ide.simulator.newPairsNode(true, true)

src/pon2/private/app/simulator/web/select.nim

@@ -23,6 +23,7 @@ proc newSelectNode*(simulator: Simulator): VNode {.inline.} =
     playEditorButtonClass =
       if simulator.mode == PlayEditor: SelectedClass else: NotSelectedClass
     editButtonClass = if simulator.mode == Edit: SelectedClass else: NotSelectedClass
+    viewButtonClass = if simulator.mode == View: SelectedClass else: NotSelectedClass
 
     tsuButtonClass = if simulator.rule == Tsu: SelectedClass else: NotSelectedClass
     waterButtonClass = if simulator.rule == Water: SelectedClass else: NotSelectedClass
@@ -37,6 +38,9 @@ proc newSelectNode*(simulator: Simulator): VNode {.inline.} =
       button(class = editButtonClass, onclick = () => (simulator.mode = Edit)):
         span(class = "icon"):
           italic(class = "fa-solid fa-pen-to-square")
+      button(class = viewButtonClass, onclick = () => (simulator.mode = View)):
+        span(class = "icon"):
+          italic(class = "fa-solid fa-circle-play")
     if simulator.mode == Edit:
       tdiv(class = "buttons has-addons"):
         button(class = tsuButtonClass, onclick = () => (simulator.rule = Tsu)):

tests/color/main.nim

@@ -9,6 +9,7 @@ import std/[unittest]
 import ../../src/pon2/app/[color]
 
 when defined(js):
+  import std/[strformat, strutils]
   import karax/[kbase]
 else:
   import nigui
@@ -21,14 +22,12 @@ proc main*() =
   when defined(js):
     # toColorCode
     block:
-      check WaterColor.toColorCode == "#87CEFAFF"
+      let c = WaterColor
+      check c.toColorCode ==
+        kstring &"#{c.red.toHex 2}{c.green.toHex 2}{c.blue.toHex 2}{c.alpha.toHex 2}"
   else:
     # toNiguiColor
     block:
-      check WaterColor.toNiguiColor ==
-        nigui.Color(
-          red: WaterColor.red,
-          green: WaterColor.green,
-          blue: WaterColor.blue,
-          alpha: WaterColor.alpha,
-        )
+      let c = WaterColor
+      check c.toNiguiColor ==
+        nigui.Color(red: c.red, green: c.green, blue: c.blue, alpha: c.alpha)