ImagesForArcade/index.html at main · CoderDojo-Ennis/ImagesForArcade · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image to MakeCode Arcade Sprite</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="header-info">
        <img src="ImageToArcade.png" alt="Image to Arcade Converter Logo"> <!-- Let CSS control width -->
        <div class="header-text-content">
             <h1>Image to MakeCode Arcade Converter</h1>
             <p>
                Easily convert your images into MakeCode Arcade sprites! Upload an image, adjust settings like size and palette, and get the JavaScript or Python code to use in your Arcade projects.
                <br>Built by <a href="https://coderdojoennis.com/" target="_blank">CoderDojo Ennis</a>. Free to use.
            </p>
        </div>
    </div>

    <div class="container">
        <div class="panel input-preview-panel">
            <h2>Input & Preview</h2>
            <!-- Hidden actual file input - RESTORED -->
            <input type="file" id="imageLoader" name="imageLoader" accept=".png, .jpg, .jpeg" style="display: none;"/>

            <!-- Section for side-by-side canvases -->
            <section id="canvas-comparison-section">
                 <div class="canvas-comparison">
                    <div class="canvas-container" id="dropZone">
                        <!-- REMOVED H4 -->
                        <p class="drop-zone-placeholder">Drop image here or click to browse</p>
                        <canvas id="originalCanvas"></canvas>
                        <p class="drop-zone-instructions">Drop image into box, or click box, to add or replace an image.</p>
                    </div>
                    <div class="canvas-container">
                        <h4>Preview in Arcade</h4>
                        <!-- Move Max Dim here -->
                        <div class="config-option">
                            <label for="sizeSlider">Max Dimension (pixels):</label>
                            <input type="range" id="sizeSlider" name="sizeSlider" min="8" max="128" value="16" style="vertical-align: middle;">
                            <span id="sliderValueDisplay" style="vertical-align: middle;">16</span>
                        </div>

                        <!-- Add Scaling Mode Dropdown -->
                        <div class="config-option">
                            <label for="scalingMode">Scaling Mode:</label>
                            <select id="scalingMode">
                                <option value="smooth">Smooth</option>
                                <option value="pixelated">Nearest Neighbor</option>
                            </select>
                        </div>

                        <!-- Move Size P here -->
                        <p>Size: <span id="spriteSize">N/A</span></p>
                        <!-- Preview container -->
                        <div id="preview-container">
                             <canvas id="previewCanvas" style="image-rendering: pixelated;"></canvas>
                        </div>
                         <!-- Zoom controls -->
                        <div class="zoom-controls" style="margin-top: 10px;">
                             <label for="zoomSlider">Zoom:</label>
                             <input type="range" id="zoomSlider" name="zoomSlider" min="1" max="5" value="1" step="0.5" style="vertical-align: middle;">
                             <span id="zoomValueDisplay" style="vertical-align: middle;">1x</span>
                        </div>
                         <!-- Add Palette here -->
                         <div class="config-option">
                            <label for="paletteMode">Palette:</label>
                            <select id="paletteMode">
                                <option value="arcade">Arcade</option>
                                <option value="matte">Matte</option>
                                <option value="pastel">Pastel</option>
                                <option value="sweet">Sweet</option>
                                <option value="poke">Poke</option>
                                <option value="adventure">Adventure</option>
                                <option value="diy">DIY</option>
                                <option value="adafruit">Adafruit</option>
                                <option value="still_life">Still Life</option>
                                <option value="steam_punk">Steam Punk</option>
                                <option value="grayscale">Grayscale</option>
                            </select>
                        </div>
                    </div>
                 </div>
            </section>
        </div>

        <div class="panel export-panel">
            <h2>Export</h2>

             <section id="export-config-section">
                <h3>Export Configuration</h3>
                 <div class="config-option">
                    <label for="variableName">Variable Name:</label>
                    <input type="text" id="variableName" value="mySprite">
                </div>
                <!-- Add Sprite Kind Selection -->
                <div class="config-option">
                    <label for="spriteKind">Sprite Kind:</label>
                    <select id="spriteKind">
                        <option value="Player">Player</option>
                        <option value="Projectile">Projectile</option>
                        <option value="Food">Food</option>
                        <option value="Enemy">Enemy</option>
                        <option value="Other">Other...</option>
                    </select>
                    <input type="text" id="customSpriteKind" placeholder="Enter custom kind" style="display: none; margin-left: 5px;">
                </div>
             </section>

            <section id="output-section">
                <h3>Get Code</h3>
                <div class="tabs">
                    <button class="tablink active" onclick="openTab(event, 'javascript')">JavaScript</button>
                    <button class="tablink" onclick="openTab(event, 'python')">Python</button>
                </div>

                <div id="javascript" class="tabcontent" style="display:block;">
                    <h4>JavaScript</h4>
                    <textarea id="jsCodeOutput" rows="6" cols="70" readonly></textarea>
                    <button class="copy-button" onclick="copyCode('jsCodeOutput')">Copy Code</button>
                </div>

                <div id="python" class="tabcontent">
                    <h4>Python</h4>
                    <textarea id="pythonCodeOutput" rows="6" cols="70" readonly></textarea>
                    <button class="copy-button" onclick="copyCode('pythonCodeOutput')">Copy Code</button>
                </div>
            </section>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>