tridecco.github.io/index.html at main · tridecco/tridecco.github.io · 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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Online IDE for Tridecco Game Board, allowing you to create and edit tridecco game boards directly in your browser.">
<title>Tridecco Game Board Web IDE</title>
<link rel="stylesheet" href="/css/styles.css">
<script src="/js/bundle.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
</head>

<body class="h-screen w-screen">
  <div id="home-container" class="h-full w-full overflow-hidden hidden">
    <div class="flex items-center justify-center h-full w-full bg-gradient-to-br from-blue-100 via-purple-100 to-pink-100 p-4">
  <div class="bg-white shadow-2xl rounded-lg p-8 w-full max-w-2xl text-center">
    <!-- Header -->
    <h1 class="text-4xl font-bold text-gray-800 mb-6">Game Board Editor</h1>
    <p class="text-gray-600 mb-8">
      Create, edit, and manage your game board configurations.
    </p>

    <!-- Main Action: Create New File -->
    <button data-action="create-new" class="w-full mb-8 px-6 py-3 bg-indigo-600 text-white rounded-lg font-semibold text-lg hover:bg-indigo-700 transition duration-200 ease-in-out shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50">
      Create New File
    </button>

    <!-- Recent Files Section -->
    <div class="text-left mb-8">
      <h2 class="text-xl font-semibold text-gray-700 mb-4 border-b pb-2">Recent Files</h2>
      <div id="home-recent-files-list" class="space-y-2 max-h-60 overflow-y-auto pr-2">
        <!-- Recent files will be loaded here -->
      </div>
      <p id="home-recent-files-placeholder" class="text-center text-gray-500 py-4 hidden">
        No recent files found.
      </p>
    </div>

    <!-- Link to File Manager -->
    <button data-action="go-to-files" class="w-full px-6 py-3 bg-gray-200 text-gray-700 rounded-lg font-semibold hover:bg-gray-300 transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50">
      Manage All Files
    </button>
  </div>
</div>
  </div>
  </div>
  <div id="editor-container" class="h-full w-full overflow-hidden hidden">
    <div class="flex flex-col h-full w-full">
  <!-- Toolbar -->
  <div id="editor-toolbar" class="bg-gray-800 text-white flex items-center px-4 py-2 z-10">
    <!-- Open File Dropdown -->
    <div class="relative group mr-4" data-dropdown-group>
      <button class="px-3 py-1 bg-blue-500 hover:bg-blue-600 rounded text-sm">Open File</button>
      <div class="absolute hidden bg-white text-black shadow-lg rounded mt-1 py-1 z-20" data-dropdown-menu>
        <button data-action="load-ide" class="block px-4 py-2 text-sm hover:bg-gray-200 w-full text-left">From IDE</button>
        <button data-action="load-computer" class="block px-4 py-2 text-sm hover:bg-gray-200 w-full text-left">From Computer</button>
      </div>
    </div>
    <!-- New File Dropdown -->
    <div class="relative group mr-4" data-dropdown-group>
      <button class="px-3 py-1 bg-blue-500 hover:bg-blue-600 rounded text-sm">New File</button>
      <div class="absolute hidden bg-white text-black shadow-lg rounded mt-1 py-1 z-20" data-dropdown-menu>
        <button data-action="new-empty" class="block px-4 py-2 text-sm hover:bg-gray-200 w-full text-left">Empty File</button>
        <button data-action="new-template" class="block px-4 py-2 text-sm hover:bg-gray-200 w-full text-left">From Template</button>
      </div>
    </div>
    <!-- Save As Dropdown -->
    <div class="relative group mr-4" data-dropdown-group>
      <button class="px-3 py-1 bg-blue-500 hover:bg-blue-600 rounded text-sm">Save As</button>
      <div class="absolute hidden bg-white text-black shadow-lg rounded mt-1 py-1 z-20" data-dropdown-menu>
        <button data-action="save-ide" class="block px-4 py-2 text-sm hover:bg-gray-200 w-full text-left">To IDE</button>
        <button data-action="save-computer" class="block px-4 py-2 text-sm hover:bg-gray-200 w-full text-left">To Computer (.js)</button>
      </div>
    </div>
    <button data-action="run-code" title="Run the current code (Ctrl+Enter or Cmd+Enter)" class="px-3 py-1 bg-green-600 hover:bg-green-700 rounded text-sm flex items-center space-x-1 mr-4">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
        <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      <span>Run</span>
    </button>

    <button data-action="share" title="Generate a shareable URL for the current code and version" class="px-3 py-1 bg-purple-600 hover:bg-purple-700 rounded text-sm flex items-center space-x-1 mr-4">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.886 12.938 9 12.482 9 12s-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6.001l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
      </svg>
      <span>Share</span>
    </button>

    <!-- Save Status and Version Selector Container -->
    <div class="flex-grow flex items-center justify-center space-x-4 mx-auto">
      <!-- Save Status -->
      <div id="save-status" class="text-sm">
        <span id="editor-save-status-text" class="text-gray-400">Loading...</span>
      </div>

      <!-- Version Selector -->
      <div class="flex items-center space-x-2">
        <label for="tridecco-board-version-selector" class="text-sm text-gray-300">Board Version:</label>
        <select id="tridecco-board-version-selector" name="tridecco-board-version" class="text-sm bg-gray-700 border border-gray-600 rounded px-2 py-0.5 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 disabled:opacity-50">
          <option value="">Loading...</option>
        </select>
      </div>
    </div>

    <button data-action="exit" class="ml-auto px-3 py-1 bg-red-500 hover:bg-red-600 rounded text-sm">Exit</button>
  </div>

  <!-- Main Content -->
  <div class="flex flex-1 h-[calc(100%-theme(space.10))]">
    <!-- Left Panel (Editor) -->
    <div id="editor-left-panel" class="bg-gray-700 h-full" style="width: 50%;">
      <div id="editor-editor" class="h-full overflow-hidden"></div>
    </div>

    <!-- Vertical Resizer -->
    <div id="editor-vertical-resizer" class="w-1 bg-gray-500 cursor-col-resize transition-colors duration-200 ease-in-out hover:bg-gray-600"></div>

    <!-- Right Panel (Canvas + Console) -->
    <div class="flex-1 flex flex-col bg-gray-700 h-full">
      <!-- Top Section (Canvas Container) -->
      <div id="editor-canvas-panel" class="bg-gray-800" style="height: 70%;">
        <div id="editor-canvas-container" class="w-full h-full overflow-hidden bg-gray-900 relative">
          <div class="absolute inset-0 flex items-center justify-center text-gray-500 text-sm">Canvas Area</div>
        </div>
      </div>

      <!-- Horizontal Resizer -->
      <div id="editor-horizontal-resizer" class="h-1 bg-gray-500 cursor-row-resize transition-colors duration-200 ease-in-out hover:bg-gray-600"></div>

      <!-- Bottom Section (Console Container) -->
      <div id="editor-console-panel" class="bg-gray-800 text-white flex-1 flex flex-col">
        <div class="flex-shrink-0 p-2 border-b border-gray-700">
          <h3 class="text-sm font-semibold text-gray-400">Console</h3>
        </div>
        <div id="editor-console-output" class="flex-grow p-2 overflow-auto text-xs font-mono whitespace-pre-wrap">
        </div>
      </div>
    </div>
  </div>

  <!-- Hidden file input for loading from computer -->
  <input type="file" id="file-input-computer" accept=".js, text/plain, application/javascript" style="display: none;" />

  <!-- Simple Modal Structure (Hidden by default) -->
  <div id="ide-file-modal" class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-md">
      <h3 class="text-lg font-medium leading-6 text-gray-900 mb-4" id="ide-file-modal-title">Select File from IDE</h3>
      <div id="ide-file-list" class="max-h-60 overflow-y-auto mb-4 border rounded p-2">
        <!-- File list will be populated here -->
      </div>
      <div class="flex justify-end space-x-2">
        <button id="ide-file-modal-cancel" class="px-4 py-2 bg-gray-300 text-gray-800 rounded hover:bg-gray-400">Cancel</button>
      </div>
    </div>
  </div>
</div>
  </div>
  <div id="files-container" class="h-full w-full overflow-hidden hidden">
    <div class="flex flex-col items-center justify-center h-full w-full bg-gray-100 p-4">
  <div class="bg-white shadow-xl rounded-lg p-6 w-full max-w-4xl">
    <!-- Header -->
    <div class="flex flex-wrap justify-between items-center gap-4 mb-6 pb-4 border-b">
      <h2 class="text-2xl font-semibold text-gray-700">Manage IDE Files</h2>
      <div class="flex items-center space-x-2">
        <button data-action="download-zip" id="files-download-zip-button" class="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 transition duration-150 ease-in-out text-sm flex items-center space-x-1 disabled:opacity-50 disabled:cursor-not-allowed" title="Download all files as ZIP">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
          </svg>
          <span>Download All (ZIP)</span>
        </button>
        <button data-action="back-to-home" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-150 ease-in-out text-sm">
          Back to Home
        </button>
      </div>
    </div>

    <!-- Search Input -->
    <div class="mb-4">
      <input type="search" id="files-search-input" placeholder="Search by file name..." class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500 shadow-sm text-sm">
    </div>

    <!-- File List Table -->
    <div class="overflow-x-auto border rounded-md">
      <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
          <tr>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              Name
            </th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              Last Modified
            </th>
            <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
              Actions
            </th>
          </tr>
        </thead>
        <tbody id="files-table-body" class="bg-white divide-y divide-gray-200">
          <!-- File rows will be dynamically inserted here -->
          <tr>
            <td colspan="3" class="px-6 py-4 text-center text-gray-500">
              Loading files...
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- Empty State Message (Hidden initially) -->
    <p id="files-empty-message" class="text-center text-gray-500 mt-6 hidden">
      No files found matching your criteria.
    </p>
  </div>
</div>
  </div>
  <div id="not-supported-container" class="h-full w-full overflow-hidden hidden">
    <div class="flex flex-col h-full w-full items-center justify-center bg-gray-100 text-center p-6">
  <div class="max-w-md">
    <h1 class="text-4xl font-bold text-gray-800 mb-4">Oops! Not Supported</h1>
    <p class="text-lg text-gray-600 mb-6">
      This IDE is not optimized for mobile devices. Please switch to a desktop or laptop for the best experience.
    </p>
    <img src="/assets/img/not-supported.svg" alt="Not Supported" class="w-64 mx-auto">
  </div>
</div>
  </div>
</body>

</html>