2c:null 2d:["$","title",null,{"children":"Card Game Puzzle | Bruce Crock | Observable"}] 32:T82b,function createSimulationToggle(dealerStack, comparisonResult) { // Create the container for the simulation const simulationContainer = document.createElement("div"); simulationContainer.style.display = "none"; // Initially minimized simulationContainer.style.border = "1px solid black"; simulationContainer.style.padding = "10px"; // Create a button to toggle the simulation visibility const toggleButton = document.createElement("button"); toggleButton.textContent = "Show Simulation"; toggleButton.style.marginBottom = "10px"; // Style the button to be 3x larger toggleButton.style.fontSize = "24px"; // Larger font size toggleButton.style.padding = "15px 30px"; // Larger padding toggleButton.style.borderRadius = "8px"; // Rounded corners for aesthetics toggleButton.style.cursor = "pointer"; // Make it clear the button is clickable toggleButton.style.backgroundColor = "#007BFF"; // Blue background toggleButton.style.color = "white"; // White text toggleButton.style.border = "none"; // Remove the default border // Wrap the button and simulation container in a parent div const wrapper = document.createElement("div"); wrapper.appendChild(toggleButton); wrapper.appendChild(simulationContainer); // Toggle logic for the button let isSimulationVisible = false; let simulationStarted = false; // Ensure simulation starts only once toggleButton.addEventListener("click", () => { isSimulationVisible = !isSimulationVisible; if (isSimulationVisible) { // Show simulation area simulationContainer.style.display = "block"; toggleButton.textContent = "Hide Simulation"; // Start the simulation only once if (!simulationStarted) { const graphNode = visualizeGameSequenceWithAnimation(dealerStack, comparisonResult); simulationContainer.appendChild(graphNode); simulationStarted = true; } } else { // Hide simulation area simulationContainer.style.display = "none"; toggleButton.textContent = "Show Simulation"; } }); return wrapper; } 33:Tbb7,cardPuzzle = ( { "nodes": [ { "id": 1, "type": "Puzzle", "name": "Card Sorting Puzzle", "group": "Core", "description": "Puzzle Objective: Arrange the ten cards (Ace,2,3,4,5,6,7,8,9) in your dealer stack, such that when you deal the cards they land in order from Ace->9. After you deal the first card, you burn three cards to the bottom of the deck. Repeat that until there are only two cards to burn, then one card, then none. Arrange the cards in the dealer stack below and run the simulation to test your answer." }, { "id": 2, "type": "Group", "name": "Constraints()", "group": "Constraints" }, { "id": 3, "type": "Constraint", "name": "Special Deck Constraint", "group": "Constraints" }, { "id": 4, "type": "Constraint", "name": "Attribute-Based Constraint", "group": "Constraints" }, { "id": 5, "type": "Group", "name": "Domains()", "group": "Domains" }, { "id": 6, "type": "Domain", "name": "Playing Cards Ontology", "group": "Domains" }, { "id": 7, "type": "Domain", "name": "Card Game Ontology", "group": "Domains" }, { "id": 8, "type": "Objective", "name": "Sequence Objective", "group": "Objectives" }, { "id": 9, "type": "Group", "name": "Game Mechanics()", "group": "Game Mechanics" }, { "id": 10, "type": "Pile", "name": "Dealer Stack", "group": "Game Mechanics" }, { "id": 11, "type": "Pile", "name": "Active Pile", "group": "Game Mechanics" }, { "id": 12, "type": "Group", "name": "Game Sequence()", "group": "Game Mechanics" }, { "id": 13, "type": "Step", "name": "Step 1", "group": "Game Mechanics", "description": "Deal 1 card from the Dealer Stack to the Active Pile." }, { "id": 14, "type": "Step", "name": "Step 2", "group": "Game Mechanics", "description": "Burn 3 cards to the bottom of the Dealer Stack." }, { "id": 15, "type": "Step", "name": "Step 3", "group": "Game Mechanics", "description": "Repeat the sequence until the Dealer Stack is empty." } ], "edges": [ { "source": 1, "target": 2, "edgeName": "HasConstraints" }, { "source": 2, "target": 3, "edgeName": "IncludesConstraint" }, { "source": 2, "target": 4, "edgeName": "IncludesConstraint" }, { "source": 1, "target": 5, "edgeName": "UsesDomains" }, { "source": 5, "target": 6, "edgeName": "IncludesDomain" }, { "source": 5, "target": 7, "edgeName": "IncludesDomain" }, { "source": 1, "target": 8, "edgeName": "HasObjective" }, { "source": 1, "target": 9, "edgeName": "HasGameMechanics" }, { "source": 9, "target": 10, "edgeName": "IncludesPile" }, { "source": 9, "target": 11, "edgeName": "IncludesPile" }, { "source": 9, "target": 12, "edgeName": "HasGameSequence" }, { "source": 12, "target": 13, "edgeName": "IncludesStep" }, { "source": 12, "target": 14, "edgeName": "IncludesStep" }, { "source": 12, "target": 15, "edgeName": "IncludesStep" }, { "source": 13, "target": 11, "edgeName": "ModifiesPile" }, { "source": 14, "target": 10, "edgeName": "ModifiesPile" } ] } )34:T103d,cardPuzzle2 = ( { "nodes": [ { "id": 1, "type": "Puzzle", "name": "Card Sorting Puzzle", "group": "Core", "description": "Arrange Cards in your dealer stack such that when you follow the dealing constraint 'Deal 1 to active pile, Burn 3 to bottom of deck, and repeat until dealer stack is empty', the resulting cards in the active pile are sequenced Ace, 2, 3, 4, 5, 6, 7, 8, 9, 10." }, { "id": 2, "type": "Group", "name": "Constraints()", "group": "Constraints", "description": "The constraints that must be followed in the puzzle." }, { "id": 3, "type": "Constraint", "name": "Special Deck Constraint", "group": "Constraints", "description": "The cards can be any suit but must be a distinct list of card values from Ace to Ten." }, { "id": 4, "type": "Group", "name": "Card Game Constraints()", "group": "Constraints", "description": "The rules governing card game mechanics for this puzzle." }, { "id": 5, "type": "Objective", "name": "Objective", "group": "Objectives", "description": "The resulting cards in the active pile are sequenced Ace, 2, 3, 4, 5, 6, 7, 8, 9, 10." }, { "id": 6, "type": "Group", "name": "Domains()", "group": "Domains", "description": "The domains used in this puzzle." }, { "id": 7, "type": "Domain", "name": "Playing Cards Ontology", "group": "Domains", "description": "Describes the structure and attributes of a deck of playing cards, including suits, ranks, and colors." }, { "id": 8, "type": "Domain", "name": "Card Game Ontology", "group": "Domains", "description": "Describes the mechanics and actions possible in card games, such as dealing, shuffling, and sorting." }, { "id": 9, "type": "Pile", "name": "Active Pile", "group": "Game Mechanics", "description": "The pile where dealt cards are placed during the puzzle." }, { "id": 10, "type": "Pile", "name": "Dealer Stack", "group": "Game Mechanics", "description": "The stack of cards controlled by the dealer from which cards are dealt." }, { "id": 11, "type": "Group", "name": "Game Sequence()", "group": "Sequence", "description": "The sequence of steps to be followed in the game." }, { "id": 12, "type": "Step", "name": "Step 1", "group": "Sequence", "description": "Deal 1 card from the Dealer Stack to the Active Pile." }, { "id": 13, "type": "Step", "name": "Step 2", "group": "Sequence", "description": "Burn 3 cards to the bottom of the Dealer Stack." }, { "id": 14, "type": "Step", "name": "Step 3", "group": "Sequence", "description": "Repeat the sequence until the Dealer Stack is empty." } ], "edges": [ { "source": 1, "target": 2, "edgeName": "HasConstraints" }, { "source": 2, "target": 3, "edgeName": "IncludesConstraint" }, { "source": 2, "target": 4, "edgeName": "IncludesConstraint" }, { "source": 1, "target": 5, "edgeName": "HasObjective" }, { "source": 1, "target": 6, "edgeName": "UsesDomains" }, { "source": 6, "target": 7, "edgeName": "IncludesDomain" }, { "source": 6, "target": 8, "edgeName": "IncludesDomain" }, { "source": 2, "target": 6, "edgeName": "UsesConceptsFrom" }, { "source": 5, "target": 6, "edgeName": "UsesConceptsFrom" }, { "source": 4, "target": 10, "edgeName": "AppliesToDealerStack" }, { "source": 4, "target": 9, "edgeName": "ProducesActivePile" }, { "source": 1, "target": 11, "edgeName": "HasGameSequence" }, { "source": 11, "target": 12, "edgeName": "IncludesStep" }, { "source": 11, "target": 13, "edgeName": "IncludesStep" }, { "source": 11, "target": 14, "edgeName": "IncludesStep" }, { "source": 12, "target": 9, "edgeName": "Modifies" }, { "source": 13, "target": 10, "edgeName": "Modifies" } ] } )35:Td38,function createDraggableDealerStack(specialDeck) { const width = 800; const height = 150; const cardWidth = 60; const cardHeight = 100; const cardSpacing = 10; // Shuffle the special deck randomly for the initial sequence const shuffledDeck = [...specialDeck].sort(() => Math.random() - 0.5); // Create an SVG container const svg = d3.create("svg") .attr("width", width) .attr("height", height) .style("border", "1px solid black"); // Update the input value dynamically const updateInputValue = () => { const cardSequence = shuffledDeck.map(d => d.name).join(", "); console.log("Serialized Dealer Stack Input:", cardSequence); // Update the input value and dispatch the event const inputElem = document.querySelector("input[style='display:none;']"); inputElem.value = cardSequence; inputElem.dispatchEvent(new Event('input')); }; // Function to update card positions visually and in the data const updateCardPositions = () => { shuffledDeck.forEach((d, i) => { d.x = i * (cardWidth + cardSpacing); d.y = height / 2 - cardHeight / 2; }); svg.selectAll(".card") .data(shuffledDeck, d => d.id) .transition() .duration(500) .attr("transform", (d) => `translate(${d.x},${d.y})`); }; // Add cards as draggable groups const cards = svg.selectAll("g") .data(shuffledDeck, d => d.id) .enter() .append("g") .attr("class", "card") .attr("transform", (d, i) => { d.x = i * (cardWidth + cardSpacing); d.y = height / 2 - cardHeight / 2; return `translate(${d.x}, ${d.y})`; }) .call( d3.drag() .on("start", function(event, d) { d3.select(this).raise().classed("dragging", true); }) .on("drag", function(event, d) { const x = Math.min(Math.max(event.x, 0), width - cardWidth); const y = Math.min(Math.max(event.y, 0), height - cardHeight); d3.select(this).attr("transform", `translate(${x}, ${y})`); d.x = x; // Temporarily store the drag position d.y = y; }) .on("end", function(event, d) { const newIndex = Math.round(d.x / (cardWidth + cardSpacing)); const boundedIndex = Math.max(0, Math.min(newIndex, shuffledDeck.length - 1)); // Move card in the data array const oldIndex = shuffledDeck.findIndex(card => card.id === d.id); shuffledDeck.splice(oldIndex, 1); shuffledDeck.splice(boundedIndex, 0, d); // Update visuals and form input updateCardPositions(); updateInputValue(); d3.select(this).classed("dragging", false); }) ); // Draw rectangles for cards cards.append("rect") .attr("width", cardWidth) .attr("height", cardHeight) .attr("rx", 5) .attr("ry", 5) .attr("fill", d => { if (d.suit === "Hearts" || d.suit === "Diamonds") return "red"; if (d.suit === "Clubs" || d.suit === "Spades") return "black"; return "gray"; }) .attr("stroke", "white"); // Add text for card names cards.append("text") .attr("x", cardWidth / 2) .attr("y", cardHeight / 2) .attr("text-anchor", "middle") .attr("alignment-baseline", "middle") .attr("fill", "white") .style("font-size", "10px") .text(d => d.name); return svg.node(); } 36:Te9c,function visualizeGameSequenceWithInstrumentation(dealerStack) { const width = 800; const height = 300; const cardWidth = 60; const cardHeight = 100; const cardSpacing = 10; const duration = 500; // Duration of each step in milliseconds const resetInterval = 60000; // Restart the simulation every 1 minute console.clear(); // Clear the console for clean logs // Create an SVG container const svg = d3.create("svg") .attr("width", width) .attr("height", height) .style("border", "1px solid black"); // Dealer stack and active pile areas const dealerStackGroup = svg.append("g").attr("class", "dealer-stack"); const activePileGroup = svg.append("g").attr("class", "active-pile"); // Step-by-step logic const simulateDealAndBurn = () => { const activePile = []; const dealerStackClone = [...dealerStack]; console.log("Starting Dealer Stack:", JSON.parse(JSON.stringify(dealerStackClone))); // Step 0: Reset areas dealerStackGroup.selectAll("*").remove(); activePileGroup.selectAll("*").remove(); // Draw initial dealer stack dealerStackGroup .selectAll(".dealer-card") .data(dealerStackClone) .enter() .append("rect") .attr("class", "dealer-card") .attr("width", cardWidth) .attr("height", cardHeight) .attr("rx", 5) .attr("ry", 5) .attr("x", (d, i) => i * (cardWidth + cardSpacing)) .attr("y", height / 2) .attr("fill", d => (d.suit === "Hearts" || d.suit === "Diamonds" ? "red" : "black")) .attr("stroke", "white"); console.log("Initial Dealer Stack Rendered"); // Step-by-step execution (hard-coded to 2 iterations) const steps = [ () => { // Step 1: Deal 1 card to Active Pile console.log("\n--- Step 1: Deal 1 card ---"); const dealtCard = dealerStackClone.shift(); if (dealtCard) { activePile.push(dealtCard); console.log("Dealt Card:", dealtCard); console.log("Updated Dealer Stack:", JSON.parse(JSON.stringify(dealerStackClone))); console.log("Active Pile:", JSON.parse(JSON.stringify(activePile))); activePileGroup .append("rect") .attr("width", cardWidth) .attr("height", cardHeight) .attr("rx", 5) .attr("ry", 5) .attr("x", (activePile.length - 1) * (cardWidth + cardSpacing)) .attr("y", height / 4) .attr("fill", dealtCard.suit === "Hearts" || dealtCard.suit === "Diamonds" ? "red" : "black") .attr("stroke", "white"); } }, () => { // Step 2: Burn 3 cards to the bottom console.log("\n--- Step 2: Burn 3 cards ---"); for (let i = 0; i < 3; i++) { const burnedCard = dealerStackClone.shift(); if (burnedCard) { dealerStackClone.push(burnedCard); console.log(`Burned Card ${i + 1}:`, burnedCard); } } console.log("Updated Dealer Stack (after burn):", JSON.parse(JSON.stringify(dealerStackClone))); }, ]; let stepIndex = 0; const executeStep = () => { if (stepIndex < steps.length) { steps[stepIndex](); // Execute the current step stepIndex++; // Move to the next step setTimeout(executeStep, duration); // Schedule the next step } else { console.log("\n--- Simulation Complete ---"); console.log("Final Active Pile:", JSON.parse(JSON.stringify(activePile))); console.log("Remaining Dealer Stack:", JSON.parse(JSON.stringify(dealerStackClone))); } }; //executeStep(); }; // Start the simulation // simulateDealAndBurn(); return svg.node(); } 37:T118c,function visualizeGameSequenceWithAnimation(dealerStack, comparisonResult) { const width = 800; const cardWidth = 60; const cardHeight = 100; const cardSpacing = 10; const labelHeight = 20; const padding = 10; const animationSpeedFactor = 0.67; const baseDuration = 1500; const duration = baseDuration * animationSpeedFactor; const dealerStackY = labelHeight + padding; const separatorY = dealerStackY + cardHeight + padding; const activePileLabelY = separatorY + padding; const activePileY = activePileLabelY + labelHeight + padding; const svg = d3.create("svg") .attr("width", width) .attr("height", activePileY + cardHeight + padding) .style("border", "1px solid black"); const statusLabel = svg.append("text") .attr("x", width / 2) .attr("y", labelHeight) .attr("text-anchor", "middle") .style("font-size", "16px") .style("font-weight", "bold") .style("fill", "blue") .text("Simulation Ready"); const dealerStackGroup = svg.append("g").attr("class", "dealer-stack"); const activePileGroup = svg.append("g").attr("class", "active-pile"); const updateStatusLabel = (message) => { console.log(`Status: ${message}`); statusLabel.text(message); }; const updateCardPositions = (cards, group, yPosition) => { group .selectAll(".card") .data(cards, d => d.id) .join("g") .attr("class", "card") .transition() .duration(duration) .attr("transform", (d, i) => `translate(${i * (cardWidth + cardSpacing)}, ${yPosition})`) .each(function (d) { const card = d3.select(this); card.selectAll("*").remove(); card.append("rect") .attr("width", cardWidth) .attr("height", cardHeight) .attr("rx", 5) .attr("ry", 5) .attr("fill", d.suit === "Hearts" || d.suit === "Diamonds" ? "red" : "black") .attr("stroke", "white"); card.append("text") .attr("x", cardWidth / 2) .attr("y", cardHeight / 2) .attr("text-anchor", "middle") .attr("alignment-baseline", "middle") .attr("fill", "white") .style("font-size", "8px") .text(d.name); }); }; const simulateDealAndBurn = () => { const activePile = []; const dealerStackClone = [...dealerStack]; console.log("Starting Simulation with dealerStackClone:", dealerStackClone); updateStatusLabel("Starting Simulation..."); updateCardPositions(dealerStackClone, dealerStackGroup, dealerStackY + padding); const steps = []; // Build steps without mutating dealerStackClone in the loop while (dealerStackClone.length > 0 && steps.length < 100) { // while (dealerStackClone.length > 0) { // Step 1: Deal 1 card steps.push(() => { //console.log("steps.length",steps.length); if (dealerStackClone.length > 0) { const dealtCard = dealerStackClone.shift(); activePile.push(dealtCard); console.log("Dealt Card:", dealtCard); updateStatusLabel(`Dealing: ${dealtCard.name}`); updateCardPositions(dealerStackClone, dealerStackGroup, dealerStackY + padding); updateCardPositions(activePile, activePileGroup, activePileY); } }); // Step 2: Burn up to 3 cards if (dealerStackClone.length > 0) { steps.push(() => { const burnCount = Math.min(3, dealerStackClone.length); console.log("dealerStackClone.length",dealerStackClone.length); console.log(`Burning ${burnCount} cards.`); for (let i = 0; i < burnCount; i++) { const burnedCard = dealerStackClone.shift(); dealerStackClone.push(burnedCard); console.log("Burned Card:", burnedCard); } updateStatusLabel(`Burning ${burnCount} cards...`); updateCardPositions(dealerStackClone, dealerStackGroup, dealerStackY + padding); }); } else updateStatusLabel(comparisonResult); } let stepIndex = 0; console.log("Total steps to execute:", steps.length); const executeStep = () => { if (stepIndex < steps.length) { steps[stepIndex](); stepIndex++; setTimeout(executeStep, duration); } else { console.log("Simulation Complete"); updateStatusLabel(comparisonResult || "Simulation Complete!"); } }; executeStep(); }; simulateDealAndBurn(); return svg.node(); } 38:[] 30:{"id":"cf9604c8ee147ef8","slug":"card-game-puzzle","title":"Card Game Puzzle","thumbnail":"e970b715c1af787e2459dcd61d86224487420fa93a7f0135193cc204fc3d4055","access_level":"public","create_time":"$D2024-12-11T21:29:18.710Z","update_time":"$D2026-01-10T18:11:16.330Z","view_time":null,"first_public_time":"$D2024-12-19T03:35:43.339Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"6a5eec9facc12168","login":"bcrock","name":"Bruce Crock","avatar_url":"https://avatars-next.observableusercontent.com/a1ca96eda19d44fd67e83d386c0ee0f422866ebe02bf4a14c20c8c8514b78ae2","tier":"starter_2024","bio":""},"version":1026,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d4269ac640375fa3","login":"bcrock","name":"Bruce Crock","avatar_url":"https://avatars-next.observableusercontent.com/a1ca96eda19d44fd67e83d386c0ee0f422866ebe02bf4a14c20c8c8514b78ae2","tier":null,"bio":""}],"members":[{"type":"team","id":"6a5eec9facc12168","login":"bcrock","name":"Bruce Crock","avatar_url":"https://avatars-next.observableusercontent.com/a1ca96eda19d44fd67e83d386c0ee0f422866ebe02bf4a14c20c8c8514b78ae2","tier":"starter_2024","role":"editor"},{"type":"individual","id":"d4269ac640375fa3","login":"bcrock","name":"Bruce Crock","avatar_url":"https://avatars-next.observableusercontent.com/a1ca96eda19d44fd67e83d386c0ee0f422866ebe02bf4a14c20c8c8514b78ae2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Card Game Puzzle","cells":[{"id":0,"value":"# Card Game Puzzle","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":243,"value":"viewof selectedInfo = html`

Click on a node or link to see details.

`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":773,"value":"objective = \"Ace, 2, 3, 4, 5, 6, 7, 8, 9, 10\"; // From ontology\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":740,"value":"## Your Solution Here\nArrange the cards in the dealer stack","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":785,"value":"createDraggableDealerStack(specialDeck);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1008,"value":"formatDealerStack(dealerStack)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":977,"value":"## Results Here","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":775,"value":"comparisonResult = compareWithObjective(resultingPile, objective);\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":996,"value":"viewof simulation = createSimulationToggle(\n dealerStack,\n comparisonResult\n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":899,"value":"// Create the visualization\n//graphNode = visualizeGameSequenceWithAnimation(dealerStack);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":993,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1010,"value":"function formatDealerStack(dealerStack) {\n // Extract the values (e.g., \"Ace\", \"2\") from the dealer stack\n const stackNames = dealerStack.map(card => card.name.split(\" \")[0]); // Extract card values\n return `Current Dealer Stack = \"${stackNames.join(\", \")}\"`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":913,"value":"dealerStacktest = [\n { name: \"Ace of Hearts\", id: 1, suit: \"Hearts\" },\n { name: \"2 of Hearts\", id: 2, suit: \"Hearts\" },\n];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":902,"value":"// Append to the document\n//document.body.appendChild(graphNode);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":890,"value":"## Domain Explorer for Card Game Puzzle","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":885,"value":"viewof graphToggle = {\n const container = html`

`;\n const toggleButton = html``;\n const graphContainer = html`

`;\n\n // Append the graph and button\n container.appendChild(toggleButton);\n container.appendChild(graphContainer);\n\n // Render the graph\n const renderedGraph = forceGraph_Bruce({\n nodes,\n links,\n nodeId: d => d.id,\n nodeTitle: d => d.id,\n width: 800,\n height: 600,\n });\n graphContainer.appendChild(renderedGraph);\n\n // Toggle visibility\n let isGraphVisible = true;\n toggleButton.addEventListener(\"click\", () => {\n isGraphVisible = !isGraphVisible;\n graphContainer.style.display = isGraphVisible ? \"block\" : \"none\";\n toggleButton.textContent = isGraphVisible ? \"Hide Graph\" : \"Show Graph\";\n });\n\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"## DATA FOR VISUALIZATION","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":116,"value":"Copy Paste a new Ontology into this space. Ensure that each object always includes id, type, name, group","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":705,"value":"ontology=cardPuzzle;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":720,"value":"isOntologyValid = validateOntology(ontology);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1017,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"## CODE FOR VISUALIZATION","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":50,"value":"root = d3.hierarchy(ontology);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"nodes = ontology.nodes;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"links = ontology.edges;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"function generateSpecialDeck() {\n const suits = [\"Hearts\", \"Diamonds\", \"Clubs\", \"Spades\"];\n const ranks = [\"Ace\", \"2\", \"3\", \"4\", \"5\", \"6\", \"7\", \"8\", \"9\", \"10\"];\n const specialDeck = ranks.map((rank, index) => ({\n id: index + 1,\n rank,\n suit: suits[index % suits.length],\n name: `${rank} of ${suits[index % suits.length]}`\n }));\n return specialDeck;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":746,"value":" specialDeck = generateSpecialDeck();\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":756,"value":"function parseDealerStack(input, specialDeck) {\n if (!input || typeof input !== \"string\") {\n console.error(\"Dealer Stack input is undefined or not a string.\");\n return [];\n }\n\n const dealerStack = input\n .split(\",\")\n .map(cardName => specialDeck.find(card => card.name.trim() === cardName.trim()))\n .filter(card => card !== undefined);\n\n return dealerStack;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":850,"value":"viewof dealerStackInput = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":758,"value":"dealerStack = parseDealerStack(dealerStackInput, specialDeck);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":769,"value":"resultingPile = followGameSequence(dealerStack);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":782,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":815,"value":"import {Swatches} from \"@d3/color-legend\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":748,"value":"logging = {\n console.log(\"Special Deck:\", specialDeck);\n console.log(\"Dealer Stack:\", dealerStack);\n console.log(\"Resulting Active Pile:\", resultingPile);\n console.log(\"Comparison Result:\", comparisonResult);\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":766,"value":"function followGameSequence(dealerStack) {\n const activePile = [];\n const dealerStackClone = [...dealerStack];\n\n while (dealerStackClone.length > 0) {\n // Step 1: Deal 1 card to Active Pile\n const dealtCard = dealerStackClone.shift();\n if (dealtCard) {\n activePile.push(dealtCard);\n //console.log(\"dealing:\",dealtCard);\n }\n\n // Step 2: Burn 3 cards to the bottom of the Dealer Stack\n for (let i = 0; i < 3; i++) {\n const burnedCard = dealerStackClone.shift();\n if (burnedCard) {\n dealerStackClone.push(burnedCard);\n //console.log(\"burning:\",burnedCard);\n }\n }\n }\n\n return activePile;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":896,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":771,"value":"function compareWithObjective(resultingPile, objective) {\n const objectiveSequence = objective.split(\",\").map(name => name.trim());\n const resultingSequence = resultingPile.map(card => card.rank);\n\n return JSON.stringify(objectiveSequence) === JSON.stringify(resultingSequence)\n ? \"Solution is correct!\"\n : \"Solution is incorrect. Try again.\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"## IMPORTS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"import { forceGraphStyles, stickyDrag, distinct, forceGraph_Bruce, showAllLabels, validateOntology } from \"@bcrock/ontology-explorer\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":732,"value":"import {cardGameOntology} from \"@bcrock/card-game-ontology\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":736,"value":"import {deckOfCardsOntology} from \"@bcrock/deck-of-cards-ontology\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"import { css, collapsedCSS } from \"@j-f1/css-template-tag\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"//import {forceGraph} from \"@bcrock/ontology-visualizations-extended\"\n//import {forceGraph} from \"@austince/ontology-visualizations-core\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":836,"value":"style = document.createElement('style');\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":845,"value":"style.innerHTML = `\n .card {\n cursor: grab;\n transition: stroke 0.2s ease;\n }\n .card:hover rect {\n stroke: #ccc;\n }\n .card.dragging {\n cursor: grabbing;\n }\n\n`;\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1"}} 31:"$30:body"