colorgame.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Color Picker Game</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }

        #content {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }

        #color-description {
            font-size: 2em;
            margin-bottom: 20px;
        }

        #color-picker {
            margin-bottom: 20px;
        }

        #score {
            font-size: 3em;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div id="content">
        <h1 id="color-description"></h1>
        <input type="color" id="color-picker">
        <button id="done-button">Done</button>
        <h2 id="score"></h2>
        <h2 id="hue-score"></h2>
        <button id="share-button">Share</button>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const colorDescription = document.getElementById('color-description');
            const colorPicker = document.getElementById('color-picker');
            const doneButton = document.getElementById('done-button');
            const scoreElement = document.getElementById('score');
            const hueScoreElement = document.getElementById('hue-score');
            const shareButton = document.getElementById('share-button');

            const urlParams = new URLSearchParams(window.location.search);
            const colorWords = urlParams.get('colorWords');
            const encodedHexColor = urlParams.get('encodedHexColor');
            const decodedHexColor = atob(encodedHexColor);

            colorDescription.innerText = colorWords;

            let chosenColor = '#000000';

            colorPicker.addEventListener('input', (event) => {
                chosenColor = event.target.value;
            });

            doneButton.addEventListener('click', () => {
                const errorScore = calculateScore(chosenColor, decodedHexColor);
                scoreElement.innerText = `Score: ${errorScore.toFixed(2)}`;
                const hueScore = calculateHueScore(chosenColor, decodedHexColor);
                hueScoreElement.innerText = `Hue Score: ${hueScore.toFixed(2)}`;
            });

            shareButton.addEventListener('click', () => {
                const shareData = {
                    title: 'Color Picker Game',
                    text: `Color Words: ${colorWords}, Chosen Hex: ${chosenColor}, Score: ${scoreElement.innerText}, Hue Score: ${hueScoreElement.innerText}`
                };
                navigator.share(shareData);
            });
        });

        function hexToRgb(hex) {
            return {
                r: parseInt(hex.slice(1, 3), 16),
                g: parseInt(hex.slice(3, 5), 16),
                b: parseInt(hex.slice(5, 7), 16)
            };
        }

        function calculateScore(chosenColor, targetColor) {
            const chosenRgb = hexToRgb(chosenColor);
            const targetRgb = hexToRgb(targetColor);

            const dr = Math.abs(chosenRgb.r - targetRgb.r) / 255;
            const dg = Math.abs(chosenRgb.g - targetRgb.g) / 255;
            const db = Math.abs(chosenRgb.b - targetRgb.b) / 255;

            return ((dr + dg + db) / 3) * 100;
        }

        function rgbToHsl(rgb) {
            const r = rgb.r / 255, g = rgb.g / 255, b = rgb.b / 255;
            const max = Math.max(r, g, b), min = Math.min(r, g, b);
            let h, s, l = (max + min) / 2;

            if(max === min) {
                h = s = 0; // achromatic
            } else {
                const d = max - min;
                s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
                switch(max) {
                    case r: h = (g - b) / d + (g < b ? 6 : 0); break;
                    case g: h = (b - r) / d + 2; break;
                    case b: h = (r - g) / d + 4; break;
                }
                h /= 6;
            }

            return { h, s, l };
        }

        function calculateHueScore(chosenColor, targetColor) {
            const chosenHsl = rgbToHsl(hexToRgb(chosenColor));
            const targetHsl = rgbToHsl(hexToRgb(targetColor));

            const hueDifference = Math.abs(chosenHsl.h - targetHsl.h);
            return hueDifference * 100;
        }
    </script>
</body>
</html>