narde

a tables game (not backgammon)

by TZOTZIOY

HTML

<html>
<head>
<meta charset="utf-8"/>
<title>Φεύγα</title>
<link rel="stylesheet" href="assets/tvl.css">
<script src="assets/narde.js"></script>
</head>
<body onload="javascript:tvl.start()">
<div id="board">
	<!--
	this should contain img#board_layout for the background
	and two img.chip; the first is the player's, the second is the opponent's
	these two are removed, then slots get created, then clones of the chips are appended
	-->
	<img id="board_layout"...

CSS

.red {
  background: url('tvlchpred.svg');
}

.blu {
  background: url('tvlchpblu.svg');
}

.chip {
  background-size: contain;
  position: absolute;
/*  width: 6.667vmin;
  height: 6.667vmin; */
  top: 0px;
  left: 0px;
  width: 6.666666667vmin;
  height: 6.666666667vmin;
  transition: transform 0.2s ease-in, top 0.4s ease-in, left 0.4s ease-in, width 0.4s ease-in, height 0.4s ease-in;
}

#board {
	position: relative;
	width: 100vmin;
	height: 80vmin;
}

#board_layout {
/*	background: url('tvlboard.svg');
	background-repeat: no-repeat;
	background-clip: content-box;
	background-size: auto;
	position: absolute; */
	width: 100%;
}

.slot {
	width: 6.666666667vmin;
	height: 33.33333333vmin;
	position: absolute;
	background-color: transparent;
	opacity: 0.0;
}

.slot.inactive {
	background-color: gray;
	opacity: 0.2;
}

/* ugly as fuck, but I don't know how to make this programmatic */
#board.start_move > .slot.movable[data-slot="1"]:hover ~ .chip.top[data-slot="1"],
#board.start_move > .slot.movable[data-slot="2"]:hover ~ .chip.top[data-slot="2"],
#board.start_move > .slot.movable[data-slot="3"]:hover ~ .chip.top[data-slot="3"],
#board.start_move > .slot.movable[data-slot="4"]:hover ~ .chip.top[data-slot="4"],
#board.start_move > .slot.movable[data-slot="5"]:hover ~ .chip.top[data-slot="5"],
#board.start_move > .slot.movable[data-slot="6"]:hover ~ .chip.top[data-slot="6"],
#board.start_move > .slot.movable[data-slot="7"]:hover ~ .chip.top[data-slot="7"],
#board.start_move > .slot.movable[data-slot="8"]:hover ~ .chip.top[data-slot="8"],
#board.start_move > .slot.movable[data-slot="9"]:hover ~ .chip.top[data-slot="9"],
#board.start_move > .slot.movable[data-slot="10"]:hover ~ .chip.top[data-slot="10"],
#board.start_move > .slot.movable[data-slot="11"]:hover ~ .chip.top[data-slot="11"],
#board.start_move > .slot.movable[data-slot="12"]:hover ~ .chip.top[data-slot="12"],
#board.start_move > .slot.movable[data-slot="13"]:hover ~...

JavaScript

(function () {

tvl= {
	ox: 100.0/15*1.25,
	oy: 100.0/15*0.25,
	x: 100.0/15.0,
	y: 100.0/15.0
}

function tvl_coords(x, y) {
	/* calculate x (slot: 0 to 25) and y (chips on slot: 0 to 14) as vmin coordinates
	 * slot 0 is where the human player chips are stored
	 * slot 25 is where the robotic player chips are stored
	 * slots 1-24 are the normal board slots; player starts at 1, robot starts at 13
	 * */
	let i, j
	if (x === 0 || x === 25) {
		i= -6
	} else {
		x= x - 1
		i= x < 12 ? (x < 6 ? 11.5 - x : 11 - x) : (x < 18) ? (x - 12) : (x - 11.5)
	}
	j= x < 12 ? y % 5 : 10.5 - y % 5
	return {x: tvl.ox + i * tvl.x, y: tvl.oy + j * tvl.y}
}//; tvl.coords= tvl_coords  // uncomment to export

function tvl_move_element_to(el, x, y) {
	let coords= tvl_coords(x, y)
	el.style.top= coords.y + 'vmin'
	el.style.left= coords.x + 'vmin'
}

function tvl_translate(x, y) {
	/* return x y as translate transform */
	let o= tvl_coords(x,y)
	return 'translate(' + o.x + 'vmin,' + o.y + 'vmin)'
}//; tvl.translate= tvl_translate  // uncomment to export

function tvl_start() {
	/* initialize all structures and elements needed */
	let chips = [[], []], c, cc, tl
	tvl.chips= chips

	let board= document.getElementById('board')
	board.classList.add('start_move')
	tvl.board= {el: board}
	
	let slots= []
	tvl.slots= slots
	for (let i= 0; i < 26; ++i) {
		tl= tvl_coords(i, i < 13 ? 0 : 4)
		let n= document.createElement('div')
		if (i !== 0 && i !== 25)
			n.addEventListener('click', tvl_click_slot)
		n.classList.add('slot')
		n.dataset.slot= i
		n.style.left= tl.x + 'vmin'
		n.style.top= tl.y + 'vmin'
		n.style.zIndex= 10
		board.appendChild(n)
		slots.push({el: n, chips: [], index: i})
	}

	cc= document.getElementsByClassName('chip')
	cc= [cc[0], cc[1]]
	c= cc[0]
	for (let i= 0; i < 15; ++i) {
		let nc= c.cloneNode()
//		nc.style.transform= tvl_translate(0, 0)
		tvl_move_element_to(nc, 0, 0)
		c.parentElement.appendChild(nc)
		let chip= {el: nc, slot: slots[0], player:...