linkedin-puzzles/queens.html at main · lookasdev/linkedin-puzzles · 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Queens Puzzle Builder and Solver</title>
  <!-- Link to the unified dark gaming theme stylesheet -->
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Navigation: Home button to return to main puzzle selection -->
  <a href="index.html" class="home-btn">Home</a>

  <!-- Main container for the entire puzzle interface -->
  <div class="surround">
    <!-- Canvas and Image Preview Container -->
    <!-- This section holds the puzzle grid and AI image preview side by side -->
    <div class="canvas-container">
      <!-- Main puzzle canvas where the grid, regions, and queens are drawn -->
    <canvas id="board"></canvas>
      <!-- AI image preview (hidden by default, shown when image is pasted/uploaded) -->
      <img id="aiPreviewDock" alt="Puzzle screenshot preview" style="display:none">
    </div>

    <!-- Side Panel: Contains all controls and tabs -->
    <div id="side">
      <!-- Tab Navigation -->
      <!-- Users can switch between building new puzzles with AI and solving existing ones -->
      <div class="tabs">
        <div class="tab-btn active" data-tab="aiTab">Build with AI</div>
        <div class="tab-btn" data-tab="solveTab">Solve</div>
      </div>

      <!-- ============================================ -->
      <!-- BUILD WITH AI TAB: For creating new puzzles -->
      <!-- ============================================ -->
      <div id="aiTab" class="tab-content active">
        <div style="display:flex;flex-direction:column;gap:0.6rem">
          <!-- Region Selection Palette -->
          <!-- Dynamic buttons for selecting regions 1-11 and eraser -->
          <!-- This palette updates based on grid size (e.g., 5x5 grid shows regions 1-5) -->
          <div id="palette" style="display:flex;gap:0.4rem;flex-wrap:wrap;align-items:center"></div>

          <!-- Keyboard shortcuts note -->
          <div style="font-size: 0.9em; color: var(--text-secondary); margin-top: 0.2rem;">
            💡 <strong>Tip:</strong> Use keyboard shortcuts 1-9, 0 (for 10), - (for 11), = (eraser)
      </div>

          <!-- Step 0: Grid Size Selection -->
          <div><strong>Target grid size:</strong></div>
          <div style="display:flex;gap:0.8rem;flex-wrap:wrap;align-items:center">
          <label class="size">Size
              <!-- Grid size selector: Queens puzzles use square grids -->
              <select id="aiSizeInp">
                <option value="2">2x2</option>
                <option value="3">3x3</option>
                <option value="4">4x4</option>
                <option value="5">5x5</option>
                <option value="6" selected>6x6</option>
                <option value="7">7x7</option>
                <option value="8">8x8</option>
                <option value="9">9x9</option>
                <option value="10">10x10</option>
                <option value="11">11x11</option>
            </select>
          </label>
        </div>

          <!-- Step 1: Image Input -->
          <div><strong>Upload or paste puzzle screenshot:</strong></div>
          <div style="display:flex;gap:0.5rem;align-items:center;flex-wrap:wrap">
            <!-- File upload input for puzzle screenshots -->
            <input type="file" id="aiImage" accept="image/*">
            <!-- Button to paste image from clipboard -->
            <button id="pasteImgBtn" type="button">Paste Image</button>
      </div>

          <!-- Step 2: AI Prompt Generation and Grid Controls -->
          <div>
            <strong>Generate Gemini prompt:</strong>
            <button id="genPromptBtn">Generate Prompt</button>
            <button id="copyPromptBtn">Copy</button>
            <button id="clearBtn" class="danger">Clear Grid</button>
    </div>
          <!-- Text area where the AI prompt will be displayed -->
          <textarea id="aiPrompt" rows="10" style="width:100%"
                    placeholder="AI prompt will appear here after clicking 'Generate Prompt'..."></textarea>

          <!-- Step 3: API Key Input -->
          <div><strong>API key (local only; exposed):</strong></div>
          <input type="password" id="aiKey" placeholder="Enter Gemini API key" style="width:100%">

          <!-- Step 4: AI Processing -->
          <div><strong>Call Gemini (fills JSON below):</strong>
            <button id="runAiBtn" class="primary">Run AI</button>
          </div>

          <!-- Step 5: Apply Results -->
          <div><strong>Apply Gemini JSON output:</strong>
            <button id="applyJsonBtn" class="primary">Apply to Grid</button>
          </div>
          <!-- Text area for AI response (JSON format) -->
          <!-- Expected format: {"size":6,"regions":{"r,c":regionId},"queens":[[r,c],...]} -->
          <textarea id="aiJsonOut" rows="10" style="width:100%"
                    placeholder='{"size":6,"regions":{"r,c":id},"queens":[[r,c],...]}'></textarea>

          <!-- Status messages for AI operations -->
          <div id="aiStatus" style="font-weight:600"></div>
        </div>
      </div>

      <!-- ========================================= -->
      <!-- SOLVE TAB: For solving existing puzzles -->
      <!-- ========================================= -->
      <div id="solveTab" class="tab-content">
        <!-- Animation option: Show the solving process step by step -->
        <label>
          <input type="checkbox" id="animateChk">
          Animate full search
        </label>

        <!-- Solver control buttons -->
        <button id="startBtn" class="primary">Start</button>
        <button id="abortBtn" class="danger" style="display:none">Abort</button>

        <!-- Status and statistics display -->
        <div id="status">Idle</div>
        <div id="cellsVisited"></div>
        <div id="backtracks"></div>
        <div id="timer"></div>
      </div>
    </div>
  </div>

  <!-- JavaScript file containing all puzzle logic -->
  <script type="module" src="queens.js"></script>
</body>
</html>