2e:null 2f:["$","title",null,{"children":"Three Hero Deckbuilder | senritsu | Observable"}] 34:T11e3,mutations = ({ reset (state) { state.currentEnemy = null state.activePlayer = null state.skillStack = [] state.targets = [] state.enemies = defaultEnemyDeck shuffle(state.enemies) // TODO shuffle initial hero decks const playerDecks = [ defaultWarriorDeck, defaultThiefDeck, defaultClericDeck ] playerDecks.forEach(shuffle) state.players = [0, 1, 2].map(i => ({ assigned: [], attacks: [], deck: playerDecks[i], discard: [] })) }, drawEnemy (state) { if (state.currentEnemy || !state.enemies.length || state.players.some(x => !x.attacks.length)) return state.currentEnemy = state.enemies.shift() }, drawAttack (state, playerIndex) { const player = state.players[playerIndex] // don't allow drawing attacks mid turn if (state.currentEnemy || player.attacks.length && !player.assigned.length) return // enfore max attack limit if (player.attacks.length >= maxAttacks(player)) return player.attacks.push(player.deck.shift()) if (player.attacks.length > 1) { state.activePlayer = playerIndex } console.log('draw attack end') console.log(state.activePlayer) }, assignEnemy (state, player) { if (!state.currentEnemy) return state.players[player].assigned.push(state.currentEnemy) state.currentEnemy = null }, resolveAttack (state, playerIndex) { const sumAttackPower = (total, skill) => total + (skill.attack || 0) const player = state.players[playerIndex] const playerTotalAttack = Math.max(0, player.attacks.reduce(sumAttackPower, 0)) const enemyTotalAttack = Math.max(player.assigned.reduce(sumAttackPower, 0)) const difference = enemyTotalAttack - playerTotalAttack console.log({playerTotalAttack, enemyTotalAttack, difference}) if (difference <= 0) { player.discard.push(...player.assigned) player.assigned = [] } else { for (let i = 0; i < difference; i++) { if (!player.deck.length) break // TODO hero death player.discard.push(player.deck.shift()) } } player.discard.push(...player.attacks) player.attacks = [] state.activePlayer = null }, selectSkillTarget (state, target) { const skill = state.skillStack[0] state.targets.push(target) const requiredTargets = { banish: 1, push: 2, snipe: 2, restore: 1 } console.log(state.targets) console.log(requiredTargets[skill.type]) if (state.targets.length >= requiredTargets[skill.type]) { switch (skill.type) { case 'banish': { const enemies = state.players[state.activePlayer].assigned.splice(state.targets[0], 1) state.enemies.push(...enemies) break } case 'push': { const enemies = state.players[state.activePlayer].assigned.splice(state.targets[0], 1) state.players[state.targets[1]].assigned.push(...enemies) break } case 'snipe': { const player = state.players[state.targets[0]] if (player.assigned[state.targets[1]].attack > skill.power) break const enemies = player.assigned.splice(state.targets[1], 1) player.discard.push(...enemies) break } case 'restore': { const player = state.players[state.targets[0]] const cards = player.discard.splice(-skill.power, skill.power) player.deck.push(...cards) shuffle(player.deck) break } } state.skillStack.shift() state.targets = [] } }, skipSkill (state) { if (!state.skillStack.length) return state.skillStack.shift() state.targets = [] }, startAttackResolution (state) { const player = state.players[state.activePlayer] console.log({...player}) const sum = property => (total, attack) => total + (attack[property] || 0) const toArray = (property, i) => new Array(i).fill({type: property}) const collect = property => toArray(property, player.attacks.reduce(sum(property), 0)) const banishes = collect('banish') const pushes = collect('push') const snipes = player.attacks.filter(x => x.snipe).map(x => ({type: 'snipe', power: x.snipe})) const restores = player.attacks.filter(x => x.restore).map(x => ({type: 'restore', power: x.restore})) console.log({banishes, pushes, snipes, restores}) state.skillStack = [...banishes, ...pushes, ...snipes, ...restores] } })35:Te08,PlayerArea = ({ props: {playerIndex: Number}, computed: { ...Vuex.mapGetters(['phase']), ...Vuex.mapState({ skill: state => state.skillStack[0], player (state) { return state.players[this.playerIndex] } }), ...Vuex.mapState(['activePlayer', 'targets']) }, methods: { ...Vuex.mapMutations([ 'drawAttack', 'assignEnemy', 'startAttackResolution', 'selectSkillTarget', 'resolveAttack' ]) }, render (h) { const canDraw = this.player.deck.length > 0 && (this.phase === 'prepare' && this.player.attacks.length === 0 || this.phase === 'decide' && this.player.assigned.length > 0 && this.player.attacks.length < maxAttacks(this.player)) const canResolveCombat = this.phase === 'combat' && this.activePlayer === this.playerIndex && this.player.attacks.length >= maxAttacks(this.player) const canRestore = this.phase === 'skills' && this.skill.type === 'restore' && this.player.discard.length const canBePushTarget = this.phase === 'skills' && this.skill.type === 'push' && this.targets.length === 1 && this.activePlayer !== this.playerIndex return h('div', {class: 'player-area'}, [ h(CardDivider, ['Discard']), h('div', {class: 'card-area'}, [this.player.discard.length]), h(CardDivider, {props: {active: canRestore || canBePushTarget}, nativeOn: { click: () => { if (canRestore || canBePushTarget) this.selectSkillTarget(this.playerIndex) } }}, [`Player ${this.playerIndex + 1}`]), h(Deck, {props: {deck: this.player.deck, active: canDraw}, on: { click: () => { if (canDraw) { this.drawAttack(this.playerIndex) console.log('further checks') console.log(this.player.attacks.length) console.log(maxAttacks(this.player)) console.log(this.player.attacks.length >= maxAttacks(this.player)) if (this.player.attacks.length >= maxAttacks(this.player)) { this.startAttackResolution(this.playerIndex) } } } }}), h(CardDivider, {props: {active: canResolveCombat}, nativeOn: { click: () => { if (canResolveCombat) this.resolveAttack(this.playerIndex) } }}, ['Attacks']), this.player.attacks.map(skill => h(PlayerCard, {props: {skill}})), h(CardDivider, {props: {active: this.phase === 'assign'}, nativeOn: { click: () => { if (this.phase === 'assign') this.assignEnemy(this.playerIndex) } }}, ['Enemies']), this.player.assigned.map((enemy, i) => { const canPush = this.phase === 'skills' && this.skill.type === 'push' && this.targets.length === 0 && this.playerIndex === this.activePlayer const canSnipe = this.phase === 'skills' && this.skill.type === 'snipe' && this.targets.length === 0 && this.playerIndex !== this.activePlayer const canBanish = this.phase === 'skills' && this.skill.type === 'banish' && this.targets.length === 0 && this.playerIndex === this.activePlayer console.log({canPush, canSnipe, canBanish}) return h(EnemyCard, {props: {enemy, active: canPush || canSnipe || canBanish}, nativeOn: { click: () => { if (canPush) { this.selectSkillTarget(i) } if (canSnipe) { this.selectSkillTarget(this.playerIndex) this.selectSkillTarget(i) } if (canBanish) { this.selectSkillTarget(i) } } }}) }) ]) } }) 36:T4df,Board = ({ methods: {...Vuex.mapMutations([ 'reset', 'skipSkill', 'drawEnemy' ])}, render (h) { window.$vm0 = this const state = this.$store.state const enemy = state.currentEnemy const phase = this.$store.getters.phase const canDrawEnemy = phase === 'decide' return h('div', {class: 'board'}, [ h('div', {class: 'row'}, [h('h1', [phase, state.activePlayer !== null ? ` (${state.activePlayer})` : ''])]), h('div', {class: 'row'}, [ h(Deck, {props: {deck: this.$store.state.enemies, active: canDrawEnemy}, on: { click: () => { if (canDrawEnemy) this.drawEnemy() } }}), enemy ? h(EnemyCard, {props: {enemy}}) : h('div', {class: 'card-area'}) ]), h('hr'), h('div', {class: 'row'}, [h('h1', [state.skillStack.length ? `${state.skillStack[0].type} with targets ${state.targets}` : null])]), , this.$store.state.players.map((x, i) => h(PlayerArea, {props: {playerIndex: i}})), h('hr'), h('div', {class: 'row'}, [ h('button', {on: {click: this.reset}}, 'Reset'), state.skillStack.length ? h('button', {on: {click: this.skipSkill}}, 'Skip skill') : null ]) ]) } })37:T41e,enemyStyle = html``38:[] 32:{"id":"07a980eb5f78604c","slug":"three-hero-deckbuilder","title":"Three Hero Deckbuilder","thumbnail":"b566d247e5d0047aed7b37dfc012123a5fcda9f0dd2861d77feee43b9749ad0d","access_level":"public","create_time":"$D2018-10-13T16:30:25.865Z","update_time":"$D2018-10-15T20:13:07.946Z","view_time":null,"first_public_time":"$D2018-10-15T19:57:01.740Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"c62aba2ac21021cb","login":"senritsu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/2702f8a42e439426df2d134af708f1c3c3bdfa1a8434dfbeec26dfd7ce6bdcec","tier":"starter_2024"},"version":926,"publish_version":926,"role":null,"authored":false,"authors":[{"type":"individual","id":"cc9712af774c2953","login":"senritsu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/2702f8a42e439426df2d134af708f1c3c3bdfa1a8434dfbeec26dfd7ce6bdcec","tier":null}],"members":[{"type":"individual","id":"cc9712af774c2953","login":"senritsu","name":"","avatar_url":"https://avatars-next.observableusercontent.com/2702f8a42e439426df2d134af708f1c3c3bdfa1a8434dfbeec26dfd7ce6bdcec","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Three Hero Deckbuilder","cells":[{"id":0,"value":"md`# Three Hero Deckbuilder\na prototype inspired by [this reddit post](https://www.reddit.com/r/gamedesign/comments/9nnt9f/three_hero_deckbuilder/)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"import {mount, Vuex} with {store} from '@senritsu/vue'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"viewof board = mount(Board)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":608,"value":"md`## Default decks`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":610,"value":"defaultEnemyDeck = [...repeat(goblin, 7), ...repeat(orc, 3)]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"defaultWarriorDeck = [\n stumble, \n hitWeak, hitWeak, \n hitStrong, hitStrong, hitStrong, \n warriorBash, warriorBash,\n warriorStrike, warriorStrike\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":622,"value":"defaultClericDeck = [\n stumble, stumble, \n hitWeak, hitWeak, \n hitStrong, hitStrong, \n clericBlind, clericBlind, \n clericHeal, clericHeal\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"defaultThiefDeck = [\n hitWeak, hitWeak, hitWeak, hitWeak, \n hitStrong, \n thiefEvade, thiefEvade, thiefEvade, \n thiefBackstab, thiefBackstab\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"md`## Vuex Store`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"store = new Vuex.Store({\n state: {\n currentEnemy: null,\n activePlayer: null,\n skillStack: [],\n targets: [],\n enemies: [],\n players: []\n },\n getters: {\n phase (state) {\n console.log(state)\n if (state.currentEnemy) return 'assign'\n if (state.skillStack.length) return 'skills'\n if (state.activePlayer !== null) return 'combat'\n if (state.players.some(player => !player.attacks.length)) return 'prepare'\n return 'decide'\n }\n },\n mutations,\n actions\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"actions = ({\n act ({state, getters, commit}, playerIndex) {\n const player = state.players[playerIndex]\n\n console.log(player.attacks)\n console.log(maxAttacks(player))\n\n if (!state.players.every(player => player.attacks.length)) {\n console.log('prepare turn')\n commit('drawAttack', playerIndex)\n } else if (state.currentEnemy) {\n console.log('pull enemies')\n commit('assignEnemy', playerIndex)\n } else if (player.assigned.length) {\n if (player.attacks.length < maxAttacks(player)) {\n console.log('attack enemies, draw final attack card(s)')\n commit('drawAttack', playerIndex)\n } else {\n console.log('resolve attack')\n commit('resolveAttack', playerIndex)\n }\n } else {\n console.log('invalid action')\n }\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"md`## Components`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"EnemyCard = ({\n props: {enemy: Object, defeated: Boolean, active: Boolean},\n render (h, context) {\n return h('div', {class: {card: true, enemy: true, defeated: this.defeated, active: this.active}}, [\n h('div', {class: 'half top'}, [\n h('div', {class: 'attack'}, [\n h('span', {class: 'attack-power'}, [this.enemy.attack])\n ])\n ]),\n h('span', {class: 'name'}, [this.enemy.name]),\n h('div', {class: 'half bottom'}, [\n h(EnemySkill, {props: {skill: this.enemy.skill}})])\n ])\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"EnemySkill = ({\n props: {skill: Object},\n render (h) {\n const skill = this.skill\n let skillComponent = null\n switch (skill.type) {\n case 'attack': {\n skillComponent = h(SkillHalfAttack, {props: {skill}})\n break\n }\n }\n \n return h('div', {class: 'skill'}, [\n skillComponent\n ])\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"SkillHalfAttack = ({\n props: {skill: Object},\n render (h) {\n return h('span', {class: 'attack-power'}, [this.skill.power])\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"PlayerCard = ({\n props: {skill: Object},\n render (h) {\n return h('div', {class: 'card player'}, [\n JSON.stringify(this.skill, null, 2)\n ])\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"Deck = ({\n props: {deck: Array, active: Boolean},\n methods: {\n onClick () {\n console.log('onClick')\n if (!this.disabled) {\n this.$emit('click')\n }\n }\n },\n render (h) {\n return h('div', {\n class: {deck: true, active: this.active},\n style: {borderBottomWidth: `${Math.max(this.deck.length, 2)}px`},\n on: {click: this.onClick}\n }, [\n h('span', {class: 'remaining-cards'}, ['Cards: ', this.deck.length])\n ])\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"CardDivider = ({\n props: {active: Boolean},\n render (h, context) {\n return h('div', {class: {'card-divider': true, active: this.active}}, [h('span', [this.$slots.default])])\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"md`### css`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"deckStyle = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"boardStyle = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"md`## Enemy cards`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"viewof goblinPreview = mount(EnemyCard, {enemy: goblin})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"goblin = ({\n name: 'Goblin',\n attack: 2,\n skill: attack(1)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"viewof orcPreview = mount(EnemyCard, {enemy: orc})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"orc = ({\n name: 'Orc',\n attack: 5,\n skill: attack(3)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"md`## Player Cards`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"warriorBash = ({\n attack: 2,\n chain: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"warriorStrike = ({\n attack: 4\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"thiefEvade = ({\n push: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"thiefBackstab = ({\n snipe: 4\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"clericHeal = ({\n restore: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"clericBlind = ({\n banish: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"hitStrong = ({\n attack: 3\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"hitWeak = ({\n attack: 2\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"stumble = ({\n attack: -1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"md`## Skills`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"attack = power => ({type: 'attack', power})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"function repeat (x, count) { return new Array(count).fill(x) }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"shuffle = array => {\n const random = crypto.getRandomValues(new Uint8Array(array.length)).map((x, i) => Math.round(i * x / 255))\n console.log(array)\n for (let i = array.length - 1; i > 0; i--) {\n const j = random[i]\n if (i === j) continue\n const swap = array[j]\n array[j] = array[i]\n array[i] = swap\n }\n return array\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"function maxAttacks (player) {\n return player.attacks.reduce((total, skill) => total + (skill.chain || 0), 2)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 33:"$32:body"