Now it drops

src/components/app.js

@@ -0,0 +1,45 @@
+import {html, Component} from './../vendor/htm-preact-standalone.mjs'
+import models from './../models.js'
+import Player from './player.js'
+import Cards from './cards.js'
+
+export default class App extends Component {
+	constructor(props) {
+		super(props)
+		this.state = {
+			cards: models.cards
+		}
+	}
+	componentDidMount() {
+		this.enableDrop()
+	}
+	enableDrop() {
+		const drop = new Sortable.default(this.base.querySelectorAll('.dropzone'), {
+			draggable: '.Card',
+			mirror: {constrainDimensions: true}
+		})
+		drop.on('drag:start', () => console.log('drag:start'))
+		drop.on('drag:move', () => console.log('drag:move'))
+		drop.on('drag:stop', () => console.log('drag:stop'))
+		drop.on('droppable:dropped', () => console.log('dropppable:dropped'))
+		drop.on('droppable:over', () => console.log('droppable:over'))
+		drop.on('droppable:out', () => console.log('droppable:out'))
+		drop.on('sortable:start', () => { console.log('sortable.start') })
+		drop.on('sortable:sort', () => { console.log('sortable.sort') })
+		drop.on('sortable:sorted', () => { console.log('sortable.sorted') })
+		drop.on('sortable:stop', () => { console.log('sortable.stop') })
+	}
+	render(props, state) {
+		return html`
+			<div class="App">
+				<div class="u-flex">
+					<${Player} name="Angelicka" />
+					<${Player} name="Mr. T" />
+				</div>
+				<${Cards} />
+				<${Cards} cards=${state.cards} />
+			</div>
+		`
+	}
+}
+

src/components/cards.js

@@ -1,25 +1,26 @@
-import {html, render, Component} from '../htm-preact-standalone.mjs'
-
-export const Card = ({name, type, energy, effects}) => html`
-	<div class="Card">
-		<h3 class="Card-title">${name}</h3>
-		<p class="Card-type">${type}</p>
-		<p class="Card-energy">${energy}</p>
-		<p class="Card-effects">${effects}</p>
-	</div>
-`
+import {html, render, Component} from '../vendor/htm-preact-standalone.mjs'
 
 export default class Cards extends Component {
 	componentDidMount() {
-		const cards = document.querySelectorAll('.Card')
-		// cards.forEach(dragndrop)
+		// const cards = document.querySelectorAll('.Card')
 	}
 	render({cards}) {
+		if (!cards) {
+			return html`<div class="Cards dropzone"></div> `
+		}
 		return html`
-			<p>We have ${cards.length}</p>
-			<div class="Cards PlayerDeck">
+			<div class="Cards dropzone">
 				${cards.map(Card)}
 			</div>
 		`
 	}
 }
+
+export const Card = ({name, type, energy, effects}) => html`
+	<article class="Card draggable">
+		<h3 class="Card-title">${name}</h3>
+		<p class="Card-type">${type}</p>
+		<p class="Card-energy">${energy}</p>
+		<p class="Card-effects">${effects}</p>
+	</article>
+`

src/components/player.js

@@ -1,4 +1,4 @@
-import {html, render, Component} from '../htm-preact-standalone.mjs'
+import {html, render, Component} from '../vendor/htm-preact-standalone.mjs'
 
 const Healthbar = ({max, value}) => html`
 	<div class="Healthbar">
@@ -18,9 +18,10 @@ export default class Player extends Component {
 		}
 	}
 	render(props, state) {
+		const name = props.name ? props.name : 'Anonymous'
 		return html`
 			<div class="Player">
-				<p>Player ${props.name}</p>
+				<p>${name}</p>
 				<p class="Energy"><i>${state.currentEnergy}</i> / ${state.maxEnergy}</p>
 				<${Healthbar} max=${state.maxHealth} value=${state.currentHealth} />
 			</div>

src/index.css

@@ -1,5 +1,5 @@
 html {
-	font-size: 1.3em;
+	font-size: 16px;
 	line-height: 1.2;
 	background: black;
 	color: antiquewhite;
@@ -63,6 +63,10 @@ center[vertical] {
 	/* box-shadow: 0 0 1em cyan; */
 }
 
+.Card.draggable-mirror {
+	max-width: 12em;
+}
+
 .Card-title {
 	margin: 0 0 0.5em;
 	padding: 0.2em 1em 0.08em;
@@ -147,11 +151,18 @@ center[vertical] {
 	flex: 1;
 }
 
-.DiscardPile {
+.Cards {
 	border: 1px dotted yellow;
-	padding: 2rem;
+	padding: 1rem;
 	margin: 1rem;
+	overflow: auto;
 }
+
+.draggable-source--is-dragging {
+	visibility: hidden;
+}
+
+/* Dragula styles */
 .gu-mirror {
 	position: fixed !important;
 	margin: 0 !important;
@@ -167,3 +178,4 @@ center[vertical] {
 .gu-transit {
 	opacity: 0.2;
 }
+

src/index.html

@@ -1,16 +1,14 @@
 <html>
 	<head>
 		<title>Kort Game</title>
-		<meta charset="UTF-8" />
+		<meta charset="utf-8" />
 		<!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Alegreya:400,700" /> -->
 		<link rel="stylesheet" href="index.css" />
 	</head>
 	<body>
 		<div id="root"></div>
 
-		<script src="vendor/dragula.min.js"></script>
-		<script src="vendor/draggable.bundle.js"></script>
-		<script src="vendor/popmotion.global.min.js"></script>
+		<script src="vendor/sortable.js"></script>
 		<script async src="index.js" type="module"></script>
 	</body>
 </html>

src/index.js

@@ -1,75 +1,8 @@
 // htm + preact in a single file
 // import {html, render, Component} from "https://unpkg.com/htm/preact/standalone.mjs"
-import {html, render, Component} from './htm-preact-standalone.mjs'
-import models from './models.js'
-import Player from './components/player.js'
-import Cards from './components/cards.js'
-
-class App extends Component {
-	constructor(props) {
-		super(props)
-		this.state = {
-			player: {
-				maxEnergy: 3,
-				currentEnergy: 3,
-				maxHealth: 100,
-				currentHealth: 10
-			},
-			cards: models.cards
-		}
-	}
-	render(props, state) {
-		return html`
-			<div class="App">
-				<div class="u-flex">
-					<${Player} name="1" />
-					<${Player} name="2" />
-				</div>
-				<div class="DiscardPile Cards"></div>
-				<${Cards} cards=${state.cards} />
-			</div>
-		`
-	}
-}
+import {html, render, Component} from './vendor/htm-preact-standalone.mjs'
+import App from './../components/app.js'
 
 const rootEl = document.querySelector('#root')
-// render(html`<${WelcomeScreen} />`, rootEl)
-render(
-	html`
-		<${App} />
-	`,
-	rootEl
-)
-
-setTimeout(gogo, 2000)
-
-function gogo() {
-	const playerDeck = document.querySelector('.PlayerDeck')
-	const discardPile = document.querySelector('.DiscardPile')
+render(html`<${App} />`, rootEl)
 
-	dragula([playerDeck, discardPile], {
-		moves(el, source, handle, sibling) {
-			// elements are always draggable by default
-			return true
-		},
-		copy(el, source) {
-			return source === playerDeck
-		},
-		accepts(el, target) {
-			return target !== playerDeck
-		}
-	})
-		.on('drag', function(el) {
-			el.className = el.className.replace('ex-moved', '')
-		})
-		.on('drop', function(el, target, source) {
-			console.log(el, target)
-			el.className += ' ex-moved'
-		})
-		.on('over', function(el, container) {
-			container.className += ' ex-over'
-		})
-		.on('out', function(el, container) {
-			container.className = container.className.replace('ex-over', '')
-		})
-}

src/models.js

@@ -14,7 +14,7 @@ class Card {
 const cards = [
 	{name: 'Bash', energy: 2, type: 'Attack', effects: 'Deal 8 damage. Apply 2 Vulnerable.'},
 	{name: 'Defend', energy: 1, type: 'Skill', effects: 'Gain 5 Block.'},
-	{name: 'Strike', energy: 1, type: 'Power', effects: 'Deal 6 Damage.'},
+	{name: 'Strike', energy: 1, type: 'Attack', effects: 'Deal 6 Damage.'},
 	{name: 'Body Slam', energy: 1, type: 'Attack', effects: 'Deal Damage equal to your Block'},
 	{name: 'Clash', energy: 0, type: 'Attack', effects: 'Can only be played if every card in your hand is an Attack. Deal 14 damage.'},
 	{name: 'Cleave', energy: 1, type: 'Attack', effects: 'Deal 8 damage to ALL enemies.'},