JSFiddle - React, Tailwind, and code Playground

by Florian Bar

JavaScript

const cards = [
	{
  	id: 1,
    tries: 0,
    sides: [
    	{ type: "panda", part: "head" },    	
      { type: "brown", part: "head" },
			{ type: "polar", part: "head" },
      { type: "black", part: "head" },
    ]
  },
  {
  	id: 2,
    tries: 0,
    sides: [
    	{ type: "panda", part: "head" },    	
      { type: "polar", part: "head" },
			{ type: "brown", part: "tail" },
      { type: "black", part: "head" },
    ]
  },
	{
  	id: 3,
    tries: 0,
    sides: [
    	{ type: "black", part: "head" },    	
      { type: "polar", part: "tail" },
			{ type: "brown", part: "head" },
      { type: "panda", part: "tail" },
    ]
  }
];




/* 
cards = [{ id, type, part, rotation }]
// solution = [{ ...cards but in the right order }]

// start selection
1: select card
2: select side of card // panda front
3: create array of possibilities // [selected card : {side: 1, attempt: []}]
4: take selected side and check it against all other cards  // [selected card : {side: 1, attempt: []}]
5: if match found // [selected card : {side: 1, attempt: [{ id: 2, type: panda back, 45deg }]}]
6: else move on
7: check against the next card // [selected card : {side: 1, attempt: [{}, {}, {}, {}]}] 
*/

/*
1. loop over cards
2. set current card as selectedCard
3. select a side of selectedCard
4. select nextCard
5. loop over nextCard's sides
   a. check if selectedCard has unsuccesful match cardId of nextCard
   		- if so end check and go to step 8 ?????????
   		- otherwise check for match between selectedCard's side and nextCard's side
   b. If no match found, store the unsucessful match cardId to current card 
      and move to next card and repeat step 5a
8. when loop is done and... 
	 a. has remaining cards repeat step 5	
   b. has no remaining cards continue to step 9
9. 
*/

const attempts = [];

const getRemainingCards = () => {
	const remainingCards = [];
  
  attempts[attempts.length-1].forEach(attempt => {
    	
  });
  
	cards.filter(card => card.id !==...