linkedin-puzzles/tango.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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tango 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, symbols, and constraints 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">
          <!-- 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: Tango 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>
              </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>
          <!-- Legacy preview element (kept for compatibility but hidden) -->
          <img id="aiPreview" alt="preview" style="max-width:100%;display:none;border:1px solid #ccc;border-radius:4px">

          <!-- 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: {"cols":6,"rows":6,"clues":{"r,c":1|0},"eqEdges":["r1,c1|r2,c2"],"diffEdges":["r1,c1|r2,c2"]} -->
          <textarea id="aiJsonOut" rows="10" style="width:100%"
                    placeholder='{"cols":6,"rows":6,"clues":{"r,c":1|0},"eqEdges":[],"diffEdges":[]}'></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="tango.js"></script>
</body>
</html>