| function onAdd(evt) { | function onAdd(evt) { | ||||
| let content = evt.detail; | let content = evt.detail; | ||||
| let item = { pending: true, content, index: -pendingItems.length }; | |||||
| let item = { pending: true, content, index: pendingItems.length }; | |||||
| pendingItems.push(item); | pendingItems.push(item); | ||||
| sortItems(); | sortItems(); | ||||
| wsock.send({ type: "item-add", content }).then(({ index }) => { | wsock.send({ type: "item-add", content }).then(({ index }) => { | ||||
| delete pendingItems[-item.index]; | |||||
| delete pendingItems[item.index]; | |||||
| item.index = index; | item.index = index; | ||||
| items[index] = item; | items[index] = item; | ||||
| <ListInput {words} on:add={onAdd} /> | <ListInput {words} on:add={onAdd} /> | ||||
| <div class="items"> | <div class="items"> | ||||
| {#each sortedItems as item (item.index)} | |||||
| {#each sortedItems as item (item)} | |||||
| <ListItem {item} on:remove={onRemove} /> | <ListItem {item} on:remove={onRemove} /> | ||||
| {/each} | {/each} | ||||
| </div> | </div> |