About how to load the BOD format of shogi into html

I am currently using the script shogizumen.js to create a situation diagram for shogi.

<html>
<body>
  <script src="shogizumen.js"></script>
  <preclass="shogizumen">
  The piece in the back hand: None
  ９ ８ ７ ６ ５ ４ ３ ２ １
+---------------------------+
|v incense v Katsura · ·v balls v horns v Katsura v incense | 1
| ·V Flying ·V Silver ·V Gold ·V Gold ·|2
|v-step ·v-step ·v-silver v-step |3
| ·V-step ·V-step ·V-step ·V-step ·|4
| · · · · · · · | 5
| ·Steps ·Steps ·Steps ·|6
| Step by step, step by step, step by step, step by step, step by step | 7
| ············|8
| Katsura Kakutama · · Katsura Katsura | 9
+---------------------------+
First-handed piece: None
Up to = 25 ▲ 37 silver
  </pre>
</body>
</html>

If you create HTML like this, your browser will see it like this

Instead of writing this task directly to HTML, I would like to read and convert the BOD format string entered in textarea.

I tried using Vue to create a code like this, but it didn't work.

<html>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.22/vue.min.js'></script>
<link rel="stylesheet" href="main.css">
<body>

<divid="app">
<textarea v-model="bod" cols="40" rows="20">/textarea>
<script src="shogizumen.js"></script>

<preclass="shogizumen">
{{bod}}
</pre>
</div>


<script>
  const vueapp = new Vue({
    el: '#app',
    data: {
      bod:',
      aaa: '
    }
  })
</script>
</body>
</html>

This is what it looks like

How can I successfully convert the BOD format string I entered in textarea?

html vue.js

2022-09-30 11:26

1 Answers

The script seemed to assume the replacement of pre.shogizumen that existed when loading the document, so it seemed troublesome to divert it to a dynamic one, but fortunately SSZumen became a global function, so I could force it to re-render...

const vueapp=newVue({
    el: '#app',
    data: {
      bod:',
      aaa:',
      show —true,
    },
    watch: {
      US>bod(){
        This.show=false
        This.$nextTick().then()=>{
          This.show=true
          return this.$nextTick()
        }).then(()=>{
          window.SSZumen()
        })

      }
    }
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://pastebin.com/raw/UtB0nSan"></script>
<divid="app">
<textarea v-model="bod" cols="40" rows="20">/textarea>

<div v-if = "show" >
<preclass="shogizumen">
{{bod}}
</pre>
</div>
</div>

2022-09-30 11:26

If you have any answers or tips

Popular Tags

python x 4627

android x 1593

java x 1492

javascript x 1425

c x 924

c++ x 877

ruby-on-rails x 696

php x 692

python3 x 683

html x 656