InventoryGame/index.html at master · baxter-cs/InventoryGame · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<html>
  <head>

    <script src="https://unpkg.com/vue">
    </script>
    <link href="style/main.css" rel="stylesheet" >
  </head>
  <body>

    <div id="app">
      <div v-if="item && mode != 'done'" id="card-display">
        <div class="card-name">{{ item.name }}</div>
        <div class="card-description" v-for="description in item.descriptions">
          {{ description }}
        </div>
        <div v-if="mode == 'change'" class="card-description new">
          <textarea v-if="mode == 'change'" v-model="itemDescription" placeholder="edit me"/></textarea>
        </div>
      </div>
      <div id="card-edit" v-if="mode != 'done'">
        <input v-model="item.name" v-if="mode == 'create'" placeholder="edit me"/>
        <button v-if="mode != 'done'" @click="done()">Done</button>
      </div>

      <div v-if="mode == 'done'">
        <button @click="newCard()">New Card</button>
        <button v-if="items.length > 0" @click="drawCard()">Draw Card</button>
      </div>


      <div class="item-list" v-if="items.length > 0">
        <div class="item" v-for="item in items">
          <div v-if="item.descriptions.length > 0" class="name">{{ item.name }}</div>
          <div v-else>??</div>
          <div class="description"><div v-for="description in item.descriptions">{{ description }}</div></div>
        </div>
      </div>

    </div>


    <script>
      var items = [];
      var people = [];

      function Item(name){
        this.name = name;
        this.proto = true;
        this.descriptions = [];
        this.stats = {};
      }

      Item.prototype = {
        name: "NULL",
        AddStat: function(stat, value){
          var statExists = stat.name in this.stats.keys;
          if (statExists){
            var statRecord = this.stats[stat.name];
            statRecord.value += value;
          } else {
            this.stats[stat.name] = { "stat" : stat, "value" : value };
          }
        },
        AddDescription: function(description){
          this.descriptions.push(description);
        }
      };

      var app = new Vue({
        el: '#app',
        data: {
          items: items,
          item: null,
          mode: "done",
          itemDescription: "",
        },
        methods: {
          done: function(){
            if (this.item && this.itemDescription) {
              this.item.descriptions.push(this.itemDescription);
            }
            this.itemDescription = "";
            this.mode = 'done';
          },
          drawCard: function(){
            this.item = this.items[Math.floor( Math.random() * this.items.length)];
            this.mode = "change";
          },
          newCard: function(){
            var item = new Item();
            this.item = item;
            items.push(item);
            this.mode = "create";
          }
        }
      })
    </script>
  </body>
</html>