bujiu

分支 (2)

管理

管理

bujiu

master

smartbot
/
Custom_Strategy_Tool_ENG.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- Import styles -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<!-- Import component library -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="//cdn.staticfile.org/clipboard.js/2.0.4/clipboard.min.js"></script>
</head>
<header>
<div class="w3-monospace">

 <h2>  <strong>Custom Strategy Tool</strong>  <img src="https://files.smartbot.ws/monthly_2018_04/profile.png.14c57db4063c7e2b5e58b70646531ec7.png" width="50" height="50" align=center ></h2>


  <p>Code by Xnyld | English translation by Olanga</p>

</header>
<body background='https://img.freepik.com/premium-vector/abstract-modern-background-with-halftone-element-lowpoly-blue-white-gadient-color_8221-1317.jpg?w=2000'>
<body>
    <div id="app">
       <div style="padding-left:10px;">
    <div>
      <!-- Query card api address -->


<div style="margin-bottom 15px;">
<el-link target="_blank"
                 href="https://hearthstoneapi.com/cards#/"
                 type="primary">Card IDs and Names</el-link>
      </div>
      <el-form
               label-position="left"
               c
               label-width="100px">


          <div class="cardContainer">
            <div>
              <span class="chineseEnglishContainers">Card Name: </span>
              <el-input style="width:300px; margin-top: 20px; margin-left: -26px"
                        v-model="form.chineseName"></el-input>
            </div>
            <div>
              <span class="chineseEnglishContainers">Card ID: </span>
              <el-input style="width:300px; margin-top: 20px; margin-left: -30px"
                        v-model="form.codeName"></el-input>


            </div>
			<br>
			<br>
            <div>
            </div>
          </div>
		  <br>
		  <br>
        </el-form-item>
        <el-form-item label="Assumptions">
          <div class="supposeConditionalContainer">
            <div class="twoLineTextContainer"
                 v-for="
                 (list, index)
                 in
                 form.assumptions"
                 :key="index">
              <div class="twoLineTextContainer-x">
                <el-select v-model="list.part1"
                           :placeholder="`Please select a hypothesis ${index+1}`">
                  <div v-for="(ass,index) in selectionAssumptions"
                       :key="index">
                    <el-option :label="ass.cnName"
                               :value="ass.code"></el-option>
                  </div>
                </el-select>
                <!-- entry or selection -->
                <div style="display: flex;">
                  <!-- hero type -->
                  <el-select v-if="convertToType(list)==='occupation'"
                             style="width:150px;margin-left:15px"
                             v-model="list.part2"
                             placeholder="Choose a career">
                    <div v-for="(item,index) in enemyCareerChoice"
                         :key="index">
                      <el-option :label="item.cnName"
                                 :value="item.code"></el-option>
                    </div>
                  </el-select>
                  <!-- Three-segment type -->
                  <div v-else-if="convertToType(list,'1')==='threeSectionType'">
                    <el-select style="width:150px;margin-left:15px"
                               v-model="list.part2"
                               placeholder="Select Relationship">
                      <div v-for="(item,index) in sizeCollection"
                           :key="index">
                        <el-option :label="item.cnName"
                                   :value="item.code"></el-option>
                      </div>
                    </el-select>
                    <el-input style="width:150px;margin-left:15px"
                              placeholder="Parameter"
                              v-model="list.part3"></el-input>
                  </div>
                  <el-input v-else
                            style="width:150px"
                            placeholder="Parameter"
                            v-model="list.part2"></el-input>
                </div>
              </div>
              <!-- Conditional display section -->
              <div class="resultDisplayPart">

                <span style="background-color:white; outline: 1px dashed grey; margin-top:1px" class="inputBoxBorder">{{calc(list,'1')|| 'Code will appear here!'}}</span>
                <el-button type="primary"
                           @click="copyLink(calc(list,'1'))">copy</el-button>
              </div>
            </div>
            <!-- Add Condition Button -->
            <el-button style="width:150px"
                       type="primary"
                       @click="add('1')">Add condition</el-button>
          </div>

        </el-form-item>
        <el-form-item label="Result Statement">
          <div class="supposeConditionalContainer">
            <div class="twoLineTextContainer"
                 v-for="(list,index) in form.conditionalArray"
                 :key="index">
              <div style="width:300px;">
                <el-select v-model="
                   list.part1"
                           :placeholder="`Select Result Condition`">
                  <div v-for="(ass,index) in conditionalStatementArray"
                       :key="index">
                    <el-option :label="ass.cnName"
                               :value="ass.code"></el-option>
                  </div>
                </el-select>
                <el-input style="width:300px"
                          placeholder="Character Parameter"
                          v-model="list.part2"></el-input>
                <el-input style="width:200px"
                          placeholder="Number parameter"
                          v-model="list.part3"></el-input>
                <el-input style="width:450px"
                          placeholder="Character parameter is not required, fill in if A is valid for B"
                          v-model="list.part4"></el-input>
              </div>
              <!-- Result condition part -->
              <div class="resultDisplayPart">

                <span style="background-color:white; outline: 1px dashed grey; margin-top:3px; margin-bottom:1px" class="inputBoxBorder">{{calc(list,'2')|| 'Code will appear here!'}}</span>
                <el-button type="primary"
                           @click="copyLink(calc(list,'2'))">copy</el-button>
              </div>
            </div>
            <!-- Add Result Condition button -->
            <el-button style="width:150px"
                       type="primary"
                       @click="add('2')">Add condition</el-button>
          </div>

        </el-form-item>
      </el-form>
    </div>
    <!-- Generate statement -->
    <div
	style="background-color:white; outline: 1px dashed grey"
	class="generateStatement inputBoxBorder-x"
         ref="generateStatement">
      <!-- header -->
      <span>#region {{form.chineseName}} {{form.codeName}}</span>
      <span>if(</span>
      <!-- Content section -->
      <div v-for="(item,index) in form.assumptions"
           :key="index">
        <p>
          <span v-if="index">&&</span>
          <span>{{item.content}}</span>
        </p>
      </div>
      <span>){</span>
      <!-- End judgment part -->
      <div v-for="item in form.conditionalArray"
           :key="item.content">
        <p>
          <span>{{item.content}}</span>
        </p>
      </div>
      <span>}</span>
      <!-- tail -->
      <span>#endregion</span>
    </div>
    <el-button type="primary"
               @click="copyLink($refs.generateStatement.innerText)">copy</el-button>
  </div>
    </div>
    <script type="text/javascript">
        new Vue({
            el:'#app',
            data:{
                // last copied value
      lastCopiedValue: '',
      // 2 segment structure
      twoSegmentDataStructureType: [],
      // hero type
      heroType: [],
      // three segment type
      threeSectionType: [],
      resultText: '',
      form: {
        // Chinese name
        chineseName: 'Abyssal Wave',
        // 代码名
        codeName: 'TSC_924',
        // 卡牌类型
        selectCardType: 'CastSpellsModifiers',
        // 假设条件
        assumptions: [
          { part1: '', part2: '', part3: '' },
        ],
        // 结尾语句
        conditionalArray: [
          { part1: '', part2: '', part3: '', part4: '' },
        ],
      },
      // 卡牌类型选集
      cardTypeSelection: [
        {
          code: 'CastSpellsModifiers',
          cnName: 'Spell Cards'
        },
        {
          code: 'CastMinionsModifiers',
          cnName: 'Follower Card'
        },
      ],
      // set of assumptions
      // text text, number number, occupational occupation,
      selectionAssumptions: [
        // 2 segment structure
        {
          code: 'HasCardInHand',
          cnName: 'I have xx in my hand',
          type: '2SectionStructure'
        },
        {
          code: 'HasCardOnBoard',
          cnName: 'I have xx on my field',
          type: '2SectionStructure'
        },
        {
          code: 'Secret.Contains',
          cnName: 'Secret on the field is x',
          type: '2SectionStructure'
        },
        {
          code: 'SecretEnemy.Contains',
          cnName: 'Secret on the enemy field is x',
          type: '2SectionStructure'
        },
        {
          code: 'FriendGraveyard.Contains',
          cnName: 'I have it in my own cemetery',
          type: '2SectionStructure'
        },
        //
        {
          code: 'FriendGraveyard.Contains',
          cnName: 'Graveyards (of a certain type: such as pirates) Quantity',
          type: '2SectionStructure'
        },
        // career structure
        {
          code: 'EnemyClass == ',
          cnName: 'The Opponent is xx class',
          type: 'occupation'
        },
        // three segment type
        {
          code: 'ManaAvailable ',
          cnName: 'Mana Available',
          type: 'threeSectionType'
        },
        {
          code: 'MaxMana ',
          cnName: 'Maximum Mana',
          type: 'threeSectionType'
        },


        {
          code: 'FriendDeckCount ',
          cnName: 'Cards left in own deck',
          type: 'threeSectionType'
        },
        {
          code: 'MinionEnemy.Count ',
          cnName: 'Number of minions you control',
          type: 'threeSectionType'
        },
        {
          code: 'EnemyAbility.CurrentCost ',
          cnName: 'Enemy Hero Power Cost',
          type: 'threeSectionType'
        },
        {
          code: 'HeroEnemy.CurrentHealth ',
          cnName: 'Enemy Hero’s Health',
          type: 'threeSectionType'
        },
        {
          code: 'HeroFriend.CurrentHealth ',
          cnName: 'Own Hero’s Health',
          type: 'threeSectionType'
        },
        {
          code: 'MinionFriend.Count ',
          cnName: 'Number of minions you control',
          type: 'threeSectionType'
        },
        {
          code: 'Secret.Count ',
          cnName: 'Number of Secrets you control',
          type: 'threeSectionType'
        },
        {
          code: 'WeaponFriend != null && board.WeaponFriend.CurrentDurability ',
          cnName: 'There is a weapon in hand, and the weapons durability is x',
          type: 'threeSectionType'
        },
        // three paragraphs are followed by a string
        {
          code: 'EnemyAbility.Template.Id ',
          cnName: 'Enemys Hero Power',
          type: 'threeSectionTypeSpellTail'
        },
        {
          code: 'Ability.Template.Id ',
          cnName: 'Players Hero Power',
          type: 'threeSectionTypeSpellTail'
        },
        {
          code: 'WeaponFriend != null && board.WeaponFriend.Template.Id ',
          cnName: 'There is a weapon in hand, and it is xx',
          type: 'threeSectionTypeSpellTail'
        },
      ],

      // 职业
      enemyCareerChoice: [
        {
          code: 'DRUID',
          cnName: '德 DRUID'
        },
        {
          code: 'HUNTER',
          cnName: '猎 HUNTER'
        },
        {
          code: 'MAGE',
          cnName: '法 MAGE'
        },
        {
          code: 'PALADIN',
          cnName: '骑 PALADIN'
        },
        {
          code: 'PRIEST',
          cnName: '牧 PRIEST'
        },
        {
          code: 'ROGUE',
          cnName: '贼 ROGUE'
        },
        {
          code: 'SHAMAN',
          cnName: '萨 SHAMAN'
        },
        {
          code: 'WARLOCK',
          cnName: '术 WARLOCK'
        },
        {
          code: 'WARRIOR',
          cnName: '战 WARRIOR'
        },
        {
          code: 'DEMONHUNTER',
          cnName: '瞎 DEMONHUNTER'
        },
      ],
      // size relationship
      sizeCollection: [
        {
          code: '>',
          cnName: 'Greater Than',
        },
        {
          code: '==',
          cnName: 'Equals',
        },
        {
          code: '<',
          cnName: 'Lesser Than',
        },
        {
          code: '>=',
          cnName: 'Greater or Equal',
        },
        {
          code: '<=',
          cnName: 'Lesser or Equal',
        },
        {
          code: '!=',
          cnName: 'Not Equal to',
        },
      ],
      // end statement array
      conditionalStatementArray: [// conditional statement
        {
          code: 'CastSpellsModifiers',
          cnName: 'Cast Spells Modifiers',
          type: 'conditionalStatementType'
        },
        {
          code: 'PlayOrderModifiers',
          cnName: 'Play Order Modifiers',
          type: 'conditionalStatementType'
        },
        {
          code: 'CastMinionsModifiers',
          cnName: 'Cast Minions Modifiers',
          type: 'conditionalStatementType'
        },
        {
          code: 'CastHeroPowerModifier',
          cnName: 'Cast Hero Power Modifier',
          type: 'conditionalStatementType'
        },
        {
          code: 'CastWeaponsModifiers',
          cnName: 'Equip Weapons Modifiers',
          type: 'conditionalStatementType'
        },
        {
          code: 'OnBoardFriendlyMinionsValuesModifiers',
          cnName: 'Own Board Value Modifiers',
          type: 'conditionalStatementType'
        },
        {
          code: 'WeaponsAttackModifiers',
          cnName: 'Weapons Attack Modifiers',
          type: 'conditionalStatementType'
        },
        {
          code: 'TradeModifiers',
          cnName: 'Trade Modifiers',
          type: 'conditionalStatementType'
        },
        {
          code: 'OnBoardBoardEnemyMinionsModifiers',
          cnName: 'Enemy Board Value Modifiers ',
          type: 'conditionalStatementType'
        },]
            },
            methods:{
      copyLink (textToCopy) {
      if (this.lastCopiedValue === textToCopy){
				this.$message.error("Do not duplicate!");
				return false
			}
			console.log('@@',textToCopy,this.lastCopiedValue)
      if (!textToCopy){
				this.$message.error("Copy Content is Empty!");
				return false
			}
			// navigator clipboard 需要https等安全上下文
			if (navigator.clipboard && window.isSecureContext) {
					this.$message.success("Copy successful!");
					this.lastCopiedValue = textToCopy
					// navigator clipboard 向剪贴板写文本
					return navigator.clipboard.writeText(textToCopy);
			} else {
					// 创建text area
					this.$message.success("Copy successful!");
					let textArea = document.createElement("textarea");
					textArea.value = textToCopy;
					this.lastCopiedValue = textToCopy
					// 使text area不在viewport，同时设置不可见
					textArea.style.position = "absolute";
					textArea.style.opacity = 0;
					textArea.style.left = "-999999px";
					textArea.style.top = "-999999px";
					document.body.appendChild(textArea);
					textArea.focus();
					textArea.select();
					return new Promise((res, rej) => {
							// 执行复制命令并移除文本框
							document.execCommand('copy') ? res() : rej();
							textArea.remove();
					});
        }
    },
    calc (item, val) {
      const { part1, part2, part3, part4 } = item
      let a = null;
      switch (this.convertToType(item, val)) {
        // 二段结构
        case '2SectionStructure':
          a = `board.${part1 || '-'}(Card.Cards.${part2 || '-'}) `
          break;
        // 职业结构
        case 'occupation':
          a = `board.${part1 || '-'}Card.Cards.${part2 || '-'} `
          break;
        // 三段类型
        case 'threeSectionType':
          a = `board.${part1 || '- '}${part2 || '- '}${part3 || '- '} `
          break;
        // 三段类型尾部拼串
        case 'threeSectionTypeSpellTail':
          a = `board.${part1 || '- '}${part2 || '- '}==Card.Cards.${part3 || '- '} `
          break;
        // 结果语句
        case 'conditionalStatementType':
          if (part4) {
            a = `p.${part1 || '-'}.AddOrUpdate(Card.Cards.${part2 || '-'}, new Modifier(${part3 || '-'},Card.Cards.${part4 || '-'})); `
          } else {
            a = `p.${part1 || '-'}.AddOrUpdate(Card.Cards.${part2 || '-'}, new Modifier(${part3 || '-'})); `
          }
          // a = part3 ? `p.${part1 || '-'}.AddOrUpdate(Card.Cards.${part2 || '-'}, new Modifier(${part3 || '-'},Card.Cards.${part4 || '-'})); ` : `p.${part1 || '-'}.AddOrUpdate(Card.Cards.${part2 || '-'}, new Modifier(${part3 || '-'})); `
          break;

        default:
          break;
      }
      item.content = a
      return a
    },
    // 将不同限制类型放入不同数组中
    convertToType (val, string) {
      let a = null;
      let b = string === '1' ? this.selectionAssumptions : this.conditionalStatementArray
      b.forEach((item) => {
        if (item.code === val.part1) { a = item.type }
      })
      return a
    },
    // 新增条件
    add (val) {
      if (val === '1') {
        this.form.assumptions.push(
          { part1: '', part2: '', part3: '' }
        )
      } else {
        this.form.conditionalArray.push(
          { part1: '', part2: '', part3: '', part4: '' }
        )
      }
    },
            },
            mounted(){
                console.log("mount complete life cycle");
            },
            watch:{
                'message'(){
                    console.log("monitor call");
                }
            }
        })
    </script>
</body>
</html>

<style>
.generateStatement {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  margin-bottom: 10px;
  opacity: .8;
}
.cardContainer {
  display: flex;
  justify-content: space-between;
}
.supposeConditionalContainer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.conditionJudgmentArea {
  display: flex;
  flex-direction: column;
}
.inputBoxBorder {
  margin-right: 10px;
  border: 1px solid #dcdfe6;
  padding: 0 30px;
  border-radius: 5px;
}
.inputBoxBorder-x {
  margin-right: 10px;
  border: 1px solid #dcdfe6;
  padding: 15px 30px;
  border-radius: 5px;
}
.resultDisplayPart {
  display: flex;

  height: 40px;
}
.twoLineTextContainer {
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
}
.twoLineTextContainer-x {
  margin-bottom: 10px;
  display: flex;
}
.chineseEnglishContainers {
  width: 100px;
  margin-right: 30px;
  margin-top: 10px;
}
.parameterContainer {
  width: 150px;
  margin-left: 15px;
}
header {
  display: block;
}
i {
  font-style: impact;
}
h2 {
    display: block;
	margin-left: 350px;
}
p{
margin-left: 320px;
}

el-link{
margin-left: 420px;

background: grey;
border-color: hotpink;
font-size: 20px;


}
a:el-link {
  color: red;
}


</style>