Mastermind – IT-Breeze Ltd.

[mastermind]

mastermind.php

PHP

<?php
/**
 * Plugin Name: Reversi Othello Game
 * Plugin URI: https://it-breeze.info/
 * Description: Mastermind game 
 * Version: 2.0.3
 * Author: Mike Vahldieck
 * Author URI: https://it-breeze.info/
 * License: GPL v2 or later
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html

<?php
/**
 * Plugin Name: Reversi Othello Game
 * Plugin URI: https://it-breeze.info/
 * Description: Mastermind game 
 * Version: 2.0.3
 * Author: Mike Vahldieck
 * Author URI: https://it-breeze.info/
 * License: GPL v2 or later
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 */

// Enqueue Scripts and Styles
function mastermind_enqueue_scripts() {
    wp_enqueue_style('mastermind-style', plugins_url('mastermind.css', __FILE__));
    wp_enqueue_script('mastermind-script', plugins_url('mastermind.js', __FILE__), array('jquery'), '1.2', true);
    wp_localize_script('mastermind-script', 'mastermindData', array(
        'ajax_url' => admin_url('admin-ajax.php')
    ));
}
add_action('wp_enqueue_scripts', 'mastermind_enqueue_scripts');

// Shortcode to Display the Mastermind Game
function mastermind_shortcode() {
    ob_start();
    ?>
    <div id="mastermind-game">
        <h2>Mastermind</h2>
        <div id="myheader">Multiple clicks on the pegs will cycle through the colors</div>
        <div id="game-board">
            <?php for ($i = 0; $i < 10; $i++): ?>
                <div class="game-row<?php echo $i === 0 ? ' active' : ''; ?>">
                    <div class="guess">
                        <?php for ($j = 0; $j < 4; $j++): ?>
                            <div class="peg" data-color=""></div>
                        <?php endfor; ?>
                    </div>
                    <div class="feedback"></div>
                </div>
            <?php endfor; ?>
        </div>
        <div id="game-controls">
            <button id="check-guess">Check Guess</button>
            <button id="restart-game">Restart</button>
            <button id="show-solution">Show Solution</button>
        </div>
        <div id="game-message"></div>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('mastermind', 'mastermind_shortcode');

function mastermind_generate_code() {
    $colors = ['R', 'G', 'B', 'Y', 'O', 'P']; // Red, Green, Blue, Yellow, Orange, Purple
    shuffle($colors); // Randomize the order
    $secret_code = array_slice($colors, 0, 4);
    return implode('', $secret_code);
}

function mastermind_check_guess() {
    session_start();

    if (!isset($_SESSION['mastermind_code'])) {
        $_SESSION['mastermind_code'] = mastermind_generate_code();
    }

    $secret_code = str_split($_SESSION['mastermind_code']);
    $player_guess = isset($_POST['guess']) ? strtoupper(trim($_POST['guess'])) : '';
    $player_guess = str_split($player_guess);

    $black_pegs = 0; // Correct color and position
    $white_pegs = 0; // Correct color, wrong position

    $code_copy = $secret_code;
    $guess_copy = $player_guess;

    // Check for black pegs
    foreach ($player_guess as $index => $color) {
        if ($color === $secret_code[$index]) {
            $black_pegs++;
            $code_copy[$index] = null;
            $guess_copy[$index] = null;
        }
    }

    // Check for white pegs
    foreach ($guess_copy as $index => $color) {
        if ($color && in_array($color, $code_copy)) {
            $white_pegs++;
            $key = array_search($color, $code_copy);
            $code_copy[$key] = null;
        }
    }

    $response = [
        'black' => $black_pegs,
        'white' => $white_pegs,
        'won'   => $black_pegs === 4,
        'code'  => implode('', $secret_code)
    ];

    if ($response['won']) {
        unset($_SESSION['mastermind_code']);
    }

    wp_send_json($response);
}
add_action('wp_ajax_mastermind_check_guess', 'mastermind_check_guess');
add_action('wp_ajax_nopriv_mastermind_check_guess', 'mastermind_check_guess');

// AJAX handler to show the solution
function mastermind_show_solution() {
    session_start();

    if (!isset($_SESSION['mastermind_code'])) {
        $_SESSION['mastermind_code'] = mastermind_generate_code();
    }

    $solution = $_SESSION['mastermind_code'];
    wp_send_json(['solution' => $solution]);
}
add_action('wp_ajax_mastermind_show_solution', 'mastermind_show_solution');
add_action('wp_ajax_nopriv_mastermind_show_solution', 'mastermind_show_solution');

// Plugin Activation Hook
function mastermind_activate() {
    // Create necessary files if needed (e.g., for caching)
    $upload_dir = wp_upload_dir();
    $plugin_dir = $upload_dir['basedir'] . '/mastermind-game/';
    if (!file_exists($plugin_dir)) {
        mkdir($plugin_dir, 0755, true);
    }
}
register_activation_hook(__FILE__, 'mastermind_activate');
?>

<?php
/**
 * Plugin Name: Reversi Othello Game
 * Plugin URI: https://it-breeze.info/
 * Description: Mastermind game 
 * Version: 2.0.3
 * Author: Mike Vahldieck
 * Author URI: https://it-breeze.info/
 * License: GPL v2 or later
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 */

// Enqueue Scripts and Styles
function mastermind_enqueue_scripts() {
    wp_enqueue_style('mastermind-style', plugins_url('mastermind.css', __FILE__));
    wp_enqueue_script('mastermind-script', plugins_url('mastermind.js', __FILE__), array('jquery'), '1.2', true);
    wp_localize_script('mastermind-script', 'mastermindData', array(
        'ajax_url' => admin_url('admin-ajax.php')
    ));
}
add_action('wp_enqueue_scripts', 'mastermind_enqueue_scripts');

// Shortcode to Display the Mastermind Game
function mastermind_shortcode() {
    ob_start();
    ?>
    <div id="mastermind-game">
        <h2>Mastermind</h2>
        <div id="myheader">Multiple clicks on the pegs will cycle through the colors</div>
        <div id="game-board">
            <?php for ($i = 0; $i < 10; $i++): ?>
                <div class="game-row<?php echo $i === 0 ? ' active' : ''; ?>">
                    <div class="guess">
                        <?php for ($j = 0; $j < 4; $j++): ?>
                            <div class="peg" data-color=""></div>
                        <?php endfor; ?>
                    </div>
                    <div class="feedback"></div>
                </div>
            <?php endfor; ?>
        </div>
        <div id="game-controls">
            <button id="check-guess">Check Guess</button>
            <button id="restart-game">Restart</button>
            <button id="show-solution">Show Solution</button>
        </div>
        <div id="game-message"></div>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('mastermind', 'mastermind_shortcode');

function mastermind_generate_code() {
    $colors = ['R', 'G', 'B', 'Y', 'O', 'P']; // Red, Green, Blue, Yellow, Orange, Purple
    shuffle($colors); // Randomize the order
    $secret_code = array_slice($colors, 0, 4);
    return implode('', $secret_code);
}

function mastermind_check_guess() {
    session_start();

if (!isset($_SESSION['mastermind_code'])) {
        $_SESSION['mastermind_code'] = mastermind_generate_code();
    }

$secret_code = str_split($_SESSION['mastermind_code']);
    $player_guess = isset($_POST['guess']) ? strtoupper(trim($_POST['guess'])) : '';
    $player_guess = str_split($player_guess);

$black_pegs = 0; // Correct color and position
    $white_pegs = 0; // Correct color, wrong position

$code_copy = $secret_code;
    $guess_copy = $player_guess;

// Check for black pegs
    foreach ($player_guess as $index => $color) {
        if ($color === $secret_code[$index]) {
            $black_pegs++;
            $code_copy[$index] = null;
            $guess_copy[$index] = null;
        }
    }

// Check for white pegs
    foreach ($guess_copy as $index => $color) {
        if ($color && in_array($color, $code_copy)) {
            $white_pegs++;
            $key = array_search($color, $code_copy);
            $code_copy[$key] = null;
        }
    }

$response = [
        'black' => $black_pegs,
        'white' => $white_pegs,
        'won'   => $black_pegs === 4,
        'code'  => implode('', $secret_code)
    ];

if ($response['won']) {
        unset($_SESSION['mastermind_code']);
    }

wp_send_json($response);
}
add_action('wp_ajax_mastermind_check_guess', 'mastermind_check_guess');
add_action('wp_ajax_nopriv_mastermind_check_guess', 'mastermind_check_guess');

// AJAX handler to show the solution
function mastermind_show_solution() {
    session_start();

if (!isset($_SESSION['mastermind_code'])) {
        $_SESSION['mastermind_code'] = mastermind_generate_code();
    }

$solution = $_SESSION['mastermind_code'];
    wp_send_json(['solution' => $solution]);
}
add_action('wp_ajax_mastermind_show_solution', 'mastermind_show_solution');
add_action('wp_ajax_nopriv_mastermind_show_solution', 'mastermind_show_solution');

// Plugin Activation Hook
function mastermind_activate() {
    // Create necessary files if needed (e.g., for caching)
    $upload_dir = wp_upload_dir();
    $plugin_dir = $upload_dir['basedir'] . '/mastermind-game/';
    if (!file_exists($plugin_dir)) {
        mkdir($plugin_dir, 0755, true);
    }
}
register_activation_hook(__FILE__, 'mastermind_activate');
?>

mastermind.js

JAVASCRIPT

document.addEventListener("DOMContentLoaded", function () {
    const colors = ["R", "G", "B", "Y", "O", "P"];
    let firstPegClickCount = 0; // To track clicks on the first peg

    // Allow pegs to cycle through colors
    document.querySelectorAll(".peg").forEach((peg, index) => {
        peg.addEventListener("click", function () {
            let currentColor = this.getAttribute("data-color");
            if (!currentColor) currentColor = ""; // Handle empty data-color

document.addEventListener("DOMContentLoaded", function () {
    const colors = ["R", "G", "B", "Y", "O", "P"];
    let firstPegClickCount = 0; // To track clicks on the first peg

    // Allow pegs to cycle through colors
    document.querySelectorAll(".peg").forEach((peg, index) => {
        peg.addEventListener("click", function () {
            let currentColor = this.getAttribute("data-color");
            if (!currentColor) currentColor = ""; // Handle empty data-color

            const nextColor = colors[(colors.indexOf(currentColor) + 1) % colors.length];
            this.setAttribute("data-color", nextColor);
            this.style.backgroundColor = colorToHex(nextColor);

            // Check if the first peg was clicked
            if (index === 0) {
                firstPegClickCount++;
                if (firstPegClickCount === 2) {
                    document.getElementById("myheader").style.display = "none";
                }
            }
        });
    });

    // Convert color initials to hex for visual display
    function colorToHex(color) {
        switch (color) {
            case "R": return "red";
            case "G": return "green";
            case "B": return "blue";
            case "Y": return "yellow";
            case "O": return "orange";
            case "P": return "purple";
            default:  return "white";
        }
    }

    // Handle guess submission
    document.getElementById("check-guess").addEventListener("click", function () {
        const activeRow = document.querySelector(".game-row.active");
        const guess = Array.from(activeRow.querySelectorAll(".peg")).map(peg =>
            peg.getAttribute("data-color")
        );

        if (guess.includes("")) {
            alert("Please fill all 4 pegs with colors.");
            return;
        }

        fetch(mastermindData.ajax_url, {
            method: "POST",
            headers: {
                "Content-Type": "application/x-www-form-urlencoded",
            },
            body: new URLSearchParams({
                action: "mastermind_check_guess",
                guess: guess.join(""),
            }),
        })
        .then(response => response.json())
        .then(data => {
            const feedbackPegs = activeRow.querySelector(".feedback");
            feedbackPegs.innerHTML = "";
            for (let i = 0; i < data.black; i++) {
                feedbackPegs.innerHTML += '<div class="peg black"></div>';
            }
            for (let i = 0; i < data.white; i++) {
                feedbackPegs.innerHTML += '<div class="peg white"></div>';
            }

            if (data.won) {
                alert("You won! The code was: " + data.code);
            } else {
                // Move to the next row
                activeRow.classList.remove("active");
                const nextRow = activeRow.nextElementSibling;
                if (nextRow) {
                    nextRow.classList.add("active");
                } else {
                    alert("Game over! The code was: " + data.code);
                }
            }
        });
    });

    // Restart the game
    document.getElementById("restart-game").addEventListener("click", function () {
        document.querySelectorAll(".peg").forEach(peg => {
            peg.setAttribute("data-color", "");
            peg.style.backgroundColor = "white";
        });
        document.querySelectorAll(".feedback").forEach(feedback => {
            feedback.innerHTML = "";
        });
        document.querySelectorAll(".game-row").forEach((row, index) => {
            row.classList.remove("active");
            if (index === 0) row.classList.add("active");
        });
        document.getElementById("game-message").textContent = "";
    });

    // Show the solution when the new button is clicked
    document.getElementById("show-solution").addEventListener("click", function () {
        fetch(mastermindData.ajax_url, {
            method: "POST",
            headers: {
                "Content-Type": "application/x-www-form-urlencoded",
            },
            body: new URLSearchParams({
                action: "mastermind_show_solution",
            }),
        })
        .then(response => response.json())
        .then(data => {
            // Display the solution in the game-message div
            document.getElementById("game-message").textContent = "Solution: " + data.solution;
        });
    });
});

document.addEventListener("DOMContentLoaded", function () {
    const colors = ["R", "G", "B", "Y", "O", "P"];
    let firstPegClickCount = 0; // To track clicks on the first peg

// Allow pegs to cycle through colors
    document.querySelectorAll(".peg").forEach((peg, index) => {
        peg.addEventListener("click", function () {
            let currentColor = this.getAttribute("data-color");
            if (!currentColor) currentColor = ""; // Handle empty data-color

const nextColor = colors[(colors.indexOf(currentColor) + 1) % colors.length];
            this.setAttribute("data-color", nextColor);
            this.style.backgroundColor = colorToHex(nextColor);

// Check if the first peg was clicked
            if (index === 0) {
                firstPegClickCount++;
                if (firstPegClickCount === 2) {
                    document.getElementById("myheader").style.display = "none";
                }
            }
        });
    });

// Convert color initials to hex for visual display
    function colorToHex(color) {
        switch (color) {
            case "R": return "red";
            case "G": return "green";
            case "B": return "blue";
            case "Y": return "yellow";
            case "O": return "orange";
            case "P": return "purple";
            default:  return "white";
        }
    }

// Handle guess submission
    document.getElementById("check-guess").addEventListener("click", function () {
        const activeRow = document.querySelector(".game-row.active");
        const guess = Array.from(activeRow.querySelectorAll(".peg")).map(peg =>
            peg.getAttribute("data-color")
        );

if (guess.includes("")) {
            alert("Please fill all 4 pegs with colors.");
            return;
        }

fetch(mastermindData.ajax_url, {
            method: "POST",
            headers: {
                "Content-Type": "application/x-www-form-urlencoded",
            },
            body: new URLSearchParams({
                action: "mastermind_check_guess",
                guess: guess.join(""),
            }),
        })
        .then(response => response.json())
        .then(data => {
            const feedbackPegs = activeRow.querySelector(".feedback");
            feedbackPegs.innerHTML = "";
            for (let i = 0; i < data.black; i++) {
                feedbackPegs.innerHTML += '<div class="peg black"></div>';
            }
            for (let i = 0; i < data.white; i++) {
                feedbackPegs.innerHTML += '<div class="peg white"></div>';
            }

if (data.won) {
                alert("You won! The code was: " + data.code);
            } else {
                // Move to the next row
                activeRow.classList.remove("active");
                const nextRow = activeRow.nextElementSibling;
                if (nextRow) {
                    nextRow.classList.add("active");
                } else {
                    alert("Game over! The code was: " + data.code);
                }
            }
        });
    });

// Restart the game
    document.getElementById("restart-game").addEventListener("click", function () {
        document.querySelectorAll(".peg").forEach(peg => {
            peg.setAttribute("data-color", "");
            peg.style.backgroundColor = "white";
        });
        document.querySelectorAll(".feedback").forEach(feedback => {
            feedback.innerHTML = "";
        });
        document.querySelectorAll(".game-row").forEach((row, index) => {
            row.classList.remove("active");
            if (index === 0) row.classList.add("active");
        });
        document.getElementById("game-message").textContent = "";
    });

// Show the solution when the new button is clicked
    document.getElementById("show-solution").addEventListener("click", function () {
        fetch(mastermindData.ajax_url, {
            method: "POST",
            headers: {
                "Content-Type": "application/x-www-form-urlencoded",
            },
            body: new URLSearchParams({
                action: "mastermind_show_solution",
            }),
        })
        .then(response => response.json())
        .then(data => {
            // Display the solution in the game-message div
            document.getElementById("game-message").textContent = "Solution: " + data.solution;
        });
    });
});

mastermind.css

CSS

/* General Styling */
#mastermind-game {
    font-family: Arial, sans-serif;
    max-width: 500px;
    margin: 30px auto;
    padding: 20px;
    border-radius: 12px;
    background: #d2a679;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    color: #333;

/* General Styling */
#mastermind-game {
    font-family: Arial, sans-serif;
    max-width: 500px;
    margin: 30px auto;
    padding: 20px;
    border-radius: 12px;
    background: #d2a679;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    color: #333;
    text-align: center;
}

#mastermind-game h2 {
    color: #5a3725;
    font-size: 1.8em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* Game Board */
#game-board {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 20px 0;
    background: #f5e0cc;
    padding: 10px;
    border-radius: 8px;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
    min-height: 400px;
}

/* Each Row in the Game Board */
.game-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid #d2a679;
}

/* Guess Pegs */
.guess {
    display: flex;
    gap: 10px;
    flex: 1;
}

.guess .peg {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #5a3725;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.3s ease;
}

.guess .peg[data-color="R"] {
    background: red;
}

.guess .peg[data-color="G"] {
    background: green;
}

.guess .peg[data-color="B"] {
    background: blue;
}

.guess .peg[data-color="Y"] {
    background: yellow;
}

.guess .peg[data-color="O"] {
    background: orange;
}

.guess .peg[data-color="P"] {
    background: purple;
}

/* Feedback Pegs */
.feedback {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
    width: 50px;
}

.feedback .peg {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #5a3725;
    border: 1px solid #333;
}

.feedback .peg.white {
    background: #fff;
}

.feedback .peg.black {
    background: #000;
}

/* Controls */
#game-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

#game-controls input {
    flex: 1;
    padding: 8px;
    border: 2px solid #5a3725;
    border-radius: 6px;
    font-size: 1em;
    margin-right: 10px;
    text-transform: uppercase;
}

#game-controls button {
    padding: 8px 15px;
    border: none;
    border-radius: 6px;
    font-size: 1em;
    cursor: pointer;
    background: #5a3725;
    color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: background 0.2s ease;
}

#game-controls button:hover {
    background: #804d29;
}

/* Game Message */
#game-message {
    margin-top: 15px;
    font-size: 1.2em;
    font-weight: bold;
    color: green;
}

/* Active Row Highlight */
.game-row.active .peg {
    border-color: #ff9f43;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

/* General Styling */
#mastermind-game {
    font-family: Arial, sans-serif;
    max-width: 500px;
    margin: 30px auto;
    padding: 20px;
    border-radius: 12px;
    background: #d2a679;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    color: #333;
    text-align: center;
}

#mastermind-game h2 {
    color: #5a3725;
    font-size: 1.8em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* Game Board */
#game-board {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 20px 0;
    background: #f5e0cc;
    padding: 10px;
    border-radius: 8px;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
    min-height: 400px;
}

/* Each Row in the Game Board */
.game-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid #d2a679;
}

/* Guess Pegs */
.guess {
    display: flex;
    gap: 10px;
    flex: 1;
}

.guess .peg {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #5a3725;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.3s ease;
}

.guess .peg[data-color="R"] {
    background: red;
}

.guess .peg[data-color="G"] {
    background: green;
}

.guess .peg[data-color="B"] {
    background: blue;
}

.guess .peg[data-color="Y"] {
    background: yellow;
}

.guess .peg[data-color="O"] {
    background: orange;
}

.guess .peg[data-color="P"] {
    background: purple;
}

/* Feedback Pegs */
.feedback {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
    width: 50px;
}

.feedback .peg {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #5a3725;
    border: 1px solid #333;
}

.feedback .peg.white {
    background: #fff;
}

.feedback .peg.black {
    background: #000;
}

/* Controls */
#game-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

#game-controls input {
    flex: 1;
    padding: 8px;
    border: 2px solid #5a3725;
    border-radius: 6px;
    font-size: 1em;
    margin-right: 10px;
    text-transform: uppercase;
}

#game-controls button {
    padding: 8px 15px;
    border: none;
    border-radius: 6px;
    font-size: 1em;
    cursor: pointer;
    background: #5a3725;
    color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: background 0.2s ease;
}

#game-controls button:hover {
    background: #804d29;
}

/* Game Message */
#game-message {
    margin-top: 15px;
    font-size: 1.2em;
    font-weight: bold;
    color: green;
}

/* Active Row Highlight */
.game-row.active .peg {
    border-color: #ff9f43;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

Download