Kastoli · linonetwo · Dec 5, 2024 · Dec 5, 2024 · Dec 5, 2024 · Dec 5, 2024
diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml
@@ -0,0 +1,27 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  deploy:
+    permissions:
+      contents: write
+      pages: write
+      id-token: write
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+
+    - name: Upload artifact
+      uses: actions/upload-pages-artifact@v1
+      with:
+        # Upload entire repository
+        path: ./
+    - name: Deploy to GitHub Pages
+      id: deployment
+      uses: actions/deploy-pages@v1
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 lin onetwo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,5 @@
+# Starbound-Character-Generator
+
+![图片](https://github.com/user-attachments/assets/11d7fbb4-16ff-4fab-9dfc-0953d91b241c)
+
+Using asset from [Starbound](https://store.steampowered.com/app/211820/Starbound/) and [Cutebound](https://steamcommunity.com/sharedfiles/filedetails/?id=761242493&searchtext=cute), only for learning properse.
diff --git a/images/sheets/apex/body-female.png b/images/sheets/apex/body-female.png
diff --git a/images/sheets/apex/head-female.png b/images/sheets/apex/head-female.png
diff --git a/images/sheets/apex/head-male.png b/images/sheets/apex/head-male.png
diff --git a/images/sheets/avian/body-female.png b/images/sheets/avian/body-female.png
diff --git a/images/sheets/avian/body-male.png b/images/sheets/avian/body-male.png
diff --git a/images/sheets/avian/head-female.png b/images/sheets/avian/head-female.png
diff --git a/images/sheets/avian/head-male.png b/images/sheets/avian/head-male.png
diff --git a/images/sheets/floran/body-female.png b/images/sheets/floran/body-female.png
diff --git a/images/sheets/floran/body-male.png b/images/sheets/floran/body-male.png
diff --git a/images/sheets/floran/head-female.png b/images/sheets/floran/head-female.png
diff --git a/images/sheets/floran/head-male.png b/images/sheets/floran/head-male.png
diff --git a/...eets/robot/armor-craftsmen-backSleeve.png → ...ets/glitch/armor-craftsmen-backSleeve.png b/...eets/robot/armor-craftsmen-backSleeve.png → ...ets/glitch/armor-craftsmen-backSleeve.png
diff --git a/...ets/robot/armor-craftsmen-chestFemale.png → ...ts/glitch/armor-craftsmen-chestFemale.png b/...ets/robot/armor-craftsmen-chestFemale.png → ...ts/glitch/armor-craftsmen-chestFemale.png
diff --git a/...heets/robot/armor-craftsmen-chestMale.png → ...eets/glitch/armor-craftsmen-chestMale.png b/...heets/robot/armor-craftsmen-chestMale.png → ...eets/glitch/armor-craftsmen-chestMale.png
diff --git a/...ets/robot/armor-craftsmen-frontSleeve.png → ...ts/glitch/armor-craftsmen-frontSleeve.png b/...ets/robot/armor-craftsmen-frontSleeve.png → ...ts/glitch/armor-craftsmen-frontSleeve.png
diff --git a/...ets/robot/armor-craftsmen-pantsFemale.png → ...ts/glitch/armor-craftsmen-pantsFemale.png b/...ets/robot/armor-craftsmen-pantsFemale.png → ...ts/glitch/armor-craftsmen-pantsFemale.png
diff --git a/...heets/robot/armor-craftsmen-pantsMale.png → ...eets/glitch/armor-craftsmen-pantsMale.png b/...heets/robot/armor-craftsmen-pantsMale.png → ...eets/glitch/armor-craftsmen-pantsMale.png
diff --git a/...heets/robot/armor-merchant-backSleeve.png → ...eets/glitch/armor-merchant-backSleeve.png b/...heets/robot/armor-merchant-backSleeve.png → ...eets/glitch/armor-merchant-backSleeve.png
diff --git a/...eets/robot/armor-merchant-chestFemale.png → ...ets/glitch/armor-merchant-chestFemale.png b/...eets/robot/armor-merchant-chestFemale.png → ...ets/glitch/armor-merchant-chestFemale.png
diff --git a/...sheets/robot/armor-merchant-chestMale.png → ...heets/glitch/armor-merchant-chestMale.png b/...sheets/robot/armor-merchant-chestMale.png → ...heets/glitch/armor-merchant-chestMale.png
diff --git a/...eets/robot/armor-merchant-frontSleeve.png → ...ets/glitch/armor-merchant-frontSleeve.png b/...eets/robot/armor-merchant-frontSleeve.png → ...ets/glitch/armor-merchant-frontSleeve.png
diff --git a/...eets/robot/armor-merchant-pantsFemale.png → ...ets/glitch/armor-merchant-pantsFemale.png b/...eets/robot/armor-merchant-pantsFemale.png → ...ets/glitch/armor-merchant-pantsFemale.png
diff --git a/...sheets/robot/armor-merchant-pantsMale.png → ...heets/glitch/armor-merchant-pantsMale.png b/...sheets/robot/armor-merchant-pantsMale.png → ...heets/glitch/armor-merchant-pantsMale.png
diff --git a/...s/sheets/robot/armor-noble-backSleeve.png → .../sheets/glitch/armor-noble-backSleeve.png b/...s/sheets/robot/armor-noble-backSleeve.png → .../sheets/glitch/armor-noble-backSleeve.png
diff --git a/.../sheets/robot/armor-noble-chestFemale.png → ...sheets/glitch/armor-noble-chestFemale.png b/.../sheets/robot/armor-noble-chestFemale.png → ...sheets/glitch/armor-noble-chestFemale.png
diff --git a/...es/sheets/robot/armor-noble-chestMale.png → ...s/sheets/glitch/armor-noble-chestMale.png b/...es/sheets/robot/armor-noble-chestMale.png → ...s/sheets/glitch/armor-noble-chestMale.png
diff --git a/.../sheets/robot/armor-noble-frontSleeve.png → ...sheets/glitch/armor-noble-frontSleeve.png b/.../sheets/robot/armor-noble-frontSleeve.png → ...sheets/glitch/armor-noble-frontSleeve.png
diff --git a/.../sheets/robot/armor-noble-pantsFemale.png → ...sheets/glitch/armor-noble-pantsFemale.png b/.../sheets/robot/armor-noble-pantsFemale.png → ...sheets/glitch/armor-noble-pantsFemale.png
diff --git a/...es/sheets/robot/armor-noble-pantsMale.png → ...s/sheets/glitch/armor-noble-pantsMale.png b/...es/sheets/robot/armor-noble-pantsMale.png → ...s/sheets/glitch/armor-noble-pantsMale.png
diff --git a/...sheets/robot/armor-peasant-backSleeve.png → ...heets/glitch/armor-peasant-backSleeve.png b/...sheets/robot/armor-peasant-backSleeve.png → ...heets/glitch/armor-peasant-backSleeve.png
diff --git a/...heets/robot/armor-peasant-chestFemale.png → ...eets/glitch/armor-peasant-chestFemale.png b/...heets/robot/armor-peasant-chestFemale.png → ...eets/glitch/armor-peasant-chestFemale.png
diff --git a/.../sheets/robot/armor-peasant-chestMale.png → ...sheets/glitch/armor-peasant-chestMale.png b/.../sheets/robot/armor-peasant-chestMale.png → ...sheets/glitch/armor-peasant-chestMale.png
diff --git a/...heets/robot/armor-peasant-frontSleeve.png → ...eets/glitch/armor-peasant-frontSleeve.png b/...heets/robot/armor-peasant-frontSleeve.png → ...eets/glitch/armor-peasant-frontSleeve.png
diff --git a/...heets/robot/armor-peasant-pantsFemale.png → ...eets/glitch/armor-peasant-pantsFemale.png b/...heets/robot/armor-peasant-pantsFemale.png → ...eets/glitch/armor-peasant-pantsFemale.png
diff --git a/.../sheets/robot/armor-peasant-pantsMale.png → ...sheets/glitch/armor-peasant-pantsMale.png b/.../sheets/robot/armor-peasant-pantsMale.png → ...sheets/glitch/armor-peasant-pantsMale.png
diff --git a/images/sheets/robot/body-accessories.png → images/sheets/glitch/body-accessories.png b/images/sheets/robot/body-accessories.png → images/sheets/glitch/body-accessories.png
diff --git a/images/sheets/robot/body-backArm.png → images/sheets/glitch/body-backArm.png b/images/sheets/robot/body-backArm.png → images/sheets/glitch/body-backArm.png
diff --git a/images/sheets/glitch/body-female.png b/images/sheets/glitch/body-female.png
diff --git a/images/sheets/robot/body-frontArm.png → images/sheets/glitch/body-frontArm.png b/images/sheets/robot/body-frontArm.png → images/sheets/glitch/body-frontArm.png
diff --git a/images/sheets/glitch/body-male.png b/images/sheets/glitch/body-male.png
diff --git a/images/sheets/glitch/head-female.png b/images/sheets/glitch/head-female.png
diff --git a/images/sheets/glitch/head-male.png b/images/sheets/glitch/head-male.png
diff --git a/images/sheets/human/body-female.png b/images/sheets/human/body-female.png
diff --git a/images/sheets/human/body-male.png b/images/sheets/human/body-male.png
diff --git a/images/sheets/human/head-female.png b/images/sheets/human/head-female.png
diff --git a/images/sheets/human/head-male.png b/images/sheets/human/head-male.png
diff --git a/images/sheets/hylotl/body-female.png b/images/sheets/hylotl/body-female.png
diff --git a/images/sheets/hylotl/head-female.png b/images/sheets/hylotl/head-female.png
diff --git a/images/sheets/hylotl/head-male.png b/images/sheets/hylotl/head-male.png
diff --git a/images/sheets/novakid/body-female.png b/images/sheets/novakid/body-female.png
diff --git a/images/sheets/novakid/body-male.png b/images/sheets/novakid/body-male.png
diff --git a/images/sheets/novakid/head-female.png b/images/sheets/novakid/head-female.png
diff --git a/images/sheets/novakid/head-male.png b/images/sheets/novakid/head-male.png
diff --git a/images/sheets/robot/body-female.png b/images/sheets/robot/body-female.png
diff --git a/images/sheets/robot/body-male.png b/images/sheets/robot/body-male.png
diff --git a/index.html b/index.html
@@ -1,185 +1,174 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-<link href="font.css" rel="stylesheet" type="text/css" ></link>
-<link href="webchargen.css" rel="stylesheet" type="text/css" />
-<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
-<script type="text/javascript" src="painter.js"></script>
-<script type="text/javascript" src="settings.js"></script>
-<script type="text/javascript" src="webchargen.js"></script>
+	<link href="font.css" rel="stylesheet" type="text/css">
+	</link>
+	<link href="webchargen.css" rel="stylesheet" type="text/css" />
+	<script type="module" src="main.mjs"></script>
 </head>
+
 <body>
-	<div id="loading-screen"><div id="loading-text">Loading...</div></div>
-
-	<div id="canvas-container">
-		<canvas id="tempCanvas1" width="43" height="43"></canvas>
-		<canvas id="tempCanvas2" width="43" height="43"></canvas>
-		<canvas id="tempCanvas3" width="43" height="43"></canvas>
-		<canvas id="tempCanvas4" width="43" height="43"></canvas>
-		<canvas id="tempCanvas5" width="43" height="43"></canvas>
-		<canvas id="tempCanvas7" width="43" height="43"></canvas>
-		<canvas id="tempCanvas8" width="43" height="43"></canvas>
-		<canvas id="tempCanvas9" width="43" height="43"></canvas>
-		<canvas id="tempCanvas10" width="43" height="43"></canvas>
-		<canvas id="tempCanvas11" width="43" height="43"></canvas>
-		<canvas id="tempCanvas6" width="43" height="43"></canvas>
+	<div id="loading-screen">
+		<div id="loading-text">Loading...</div>
 	</div>
-	
+
 	<div id="pos-container">
-	<div id="main-container">
-        <div id="species-select-container">
-            <div class="big-button species-selection" id="species-human">
-                <div></div>
-            </div>
-            <div class="big-button species-selection" id="species-avian">
-                <div></div>
-            </div>
-            <div class="big-button species-selection" id="species-apex">
-                <div></div>
-            </div>
-            <div class="big-button species-selection" id="species-floran">
-                <div></div>
-            </div>
-            <div class="big-button species-selection" id="species-hylotl">
-                <div></div>
-            </div>
-            <div class="big-button species-selection" id="species-robot">
-                <div></div>
-            </div>
-			<div class="big-button species-selection" id="species-novakid">
-                <div></div>
-            </div>
-        </div>
-        <div id="gender-select-container">
-            <div class="big-button gender-selection" id="gender-male">
-            	<div></div>
-            </div>
-            <div class="big-button gender-selection" id="gender-female">
-            	<div></div>
-            </div>
-        </div>
-        <canvas id="character-preview" height="129" width="129"></canvas>
-        <div id="button-randomize-look" class="dice"></div>
-        <div id="character-options-container">
-
-            <div id="variable-skinColor" class="option">
-				<div class="label" ></div>
-				<div class="option-buttons">
-					<div class="left-button button" ></div>
-					<div class="option-counter">
-						<div></div>
-						<div></div>
+		<div id="main-container">
+			<div id="species-select-container">
+				<div class="big-button species-selection" id="species-human">
+					<div></div>
+				</div>
+				<div class="big-button species-selection" id="species-avian">
+					<div></div>
+				</div>
+				<div class="big-button species-selection" id="species-apex">
+					<div></div>
+				</div>
+				<div class="big-button species-selection" id="species-floran">
+					<div></div>
+				</div>
+				<div class="big-button species-selection" id="species-hylotl">
+					<div></div>
+				</div>
+				<div class="big-button species-selection" id="species-glitch">
+					<div></div>
+				</div>
+				<div class="big-button species-selection" id="species-novakid">
+					<div></div>
+				</div>
+			</div>
+			<div id="gender-select-container">
+				<div class="big-button gender-selection" id="gender-male">
+					<div></div>
+				</div>
+				<div class="big-button gender-selection" id="gender-female">
+					<div></div>
+				</div>
+			</div>
+			<canvas id="character-preview" height="129" width="129"></canvas>
+			<div id="button-randomize-look" class="dice"></div>
+			<div id="character-options-container">
+
+				<div id="variable-skinColor" class="option">
+					<div class="label"></div>
+					<div class="option-buttons">
+						<div class="left-button button"></div>
+						<div class="option-counter">
+							<div></div>
+							<div></div>
+						</div>
+						<div class="right-button button"></div>
 					</div>
-					<div class="right-button button" ></div>
-				</div>
-            </div>
-			<div id="variable-altOption" class="option">
-                <div class="label" ></div>
-				<div class="option-buttons">
-					<div class="left-button button" ></div>
-					<div class="option-counter">
-						<div></div>
-						<div></div>
+				</div>
+				<div id="variable-altOption" class="option">
+					<div class="label"></div>
+					<div class="option-buttons">
+						<div class="left-button button"></div>
+						<div class="option-counter">
+							<div></div>
+							<div></div>
+						</div>
+						<div class="right-button button"></div>
 					</div>
-					<div class="right-button button" ></div>
-				</div>
-            </div>
-            <div id="variable-hairOption" class="option">
-				<div class="label" ></div>
-				<div class="option-buttons">
-					<div class="left-button button" ></div>
-					<div class="option-counter">
-						<div></div>
-						<div></div>
+				</div>
+				<div id="variable-hairOption" class="option">
+					<div class="label"></div>
+					<div class="option-buttons">
+						<div class="left-button button"></div>
+						<div class="option-counter">
+							<div></div>
+							<div></div>
+						</div>
+						<div class="right-button button"></div>
 					</div>
-					<div class="right-button button" ></div>
-				</div>
-            </div>
-			<div id="variable-headOption" class="option">
-                <div class="label" ></div>
-				<div class="option-buttons">
-					<div class="left-button button" ></div>
-					<div class="option-counter">
-						<div></div>
-						<div></div>
+				</div>
+				<div id="variable-headOption" class="option">
+					<div class="label"></div>
+					<div class="option-buttons">
+						<div class="left-button button"></div>
+						<div class="option-counter">
+							<div></div>
+							<div></div>
+						</div>
+						<div class="right-button button"></div>
 					</div>
-					<div class="right-button button" ></div>
-				</div>
-            </div>
-            <div id="variable-shirtOption" class="option">
-                <div class="label" ></div>
-				<div class="option-buttons">
-					<div class="left-button button" ></div>
-					<div class="option-counter">
-						<div></div>
-						<div></div>
+				</div>
+				<div id="variable-shirtOption" class="option">
+					<div class="label"></div>
+					<div class="option-buttons">
+						<div class="left-button button"></div>
+						<div class="option-counter">
+							<div></div>
+							<div></div>
+						</div>
+						<div class="right-button button"></div>
 					</div>
-					<div class="right-button button" ></div>
-				</div>
-            </div>
-			<div id="variable-shirtColor" class="option">
-                <div class="label" ></div>
-				<div class="option-buttons">
-					<div class="left-button button" ></div>
-					<div class="option-counter">
-						<div></div>
-						<div></div>
+				</div>
+				<div id="variable-shirtColor" class="option">
+					<div class="label"></div>
+					<div class="option-buttons">
+						<div class="left-button button"></div>
+						<div class="option-counter">
+							<div></div>
+							<div></div>
+						</div>
+						<div class="right-button button"></div>
 					</div>
-					<div class="right-button button" ></div>
-				</div>
-            </div>
-			<div id="variable-pantsOption" class="option">
-                <div class="label" ></div>
-				<div class="option-buttons">
-					<div class="left-button button" ></div>
-					<div class="option-counter">
-						<div></div>
-						<div></div>
+				</div>
+				<div id="variable-pantsOption" class="option">
+					<div class="label"></div>
+					<div class="option-buttons">
+						<div class="left-button button"></div>
+						<div class="option-counter">
+							<div></div>
+							<div></div>
+						</div>
+						<div class="right-button button"></div>
 					</div>
-					<div class="right-button button" ></div>
-				</div>
-            </div>
-			<div id="variable-pantsColor" class="option">
-                <div class="label" ></div>
-				<div class="option-buttons">
-					<div class="left-button button" ></div>
-					<div class="option-counter">
-						<div></div>
-						<div></div>
+				</div>
+				<div id="variable-pantsColor" class="option">
+					<div class="label"></div>
+					<div class="option-buttons">
+						<div class="left-button button"></div>
+						<div class="option-counter">
+							<div></div>
+							<div></div>
+						</div>
+						<div class="right-button button"></div>
 					</div>
-					<div class="right-button button" ></div>
-				</div>
-            </div>
-			<div id="variable-poseOption" class="option">
-                <div class="label" ></div>
-				<div class="option-buttons">
-					<div class="left-button button" ></div>
-					<div class="option-counter">
-						<div></div>
-						<div></div>
+				</div>
+				<div id="variable-poseOption" class="option">
+					<div class="label"></div>
+					<div class="option-buttons">
+						<div class="left-button button"></div>
+						<div class="option-counter">
+							<div></div>
+							<div></div>
+						</div>
+						<div class="right-button button"></div>
 					</div>
-					<div class="right-button button" ></div>
-				</div>
-            </div>
- 			<div id="variable-helmetOption" class="option">
-                <div class="label" ></div>
-				<div class="option-buttons">
-					<div class="left-button button" ></div>
-					<div class="option-counter">
-						<div></div>
-						<div></div>
+				</div>
+				<div id="variable-helmetOption" class="option">
+					<div class="label"></div>
+					<div class="option-buttons">
+						<div class="left-button button"></div>
+						<div class="option-counter">
+							<div></div>
+							<div></div>
+						</div>
+						<div class="right-button button"></div>
 					</div>
-					<div class="right-button button" ></div>
-				</div>
-            </div>
-       </div>
-
-        <div id="nameLabel">
-        	<input type="text" id="nameInput" />
-        </div>
-
-        <div id="save-button" class="save-button"></div>
-    </div>
+				</div>
+			</div>
+
+			<div id="nameLabel">
+				<input type="text" id="nameInput" />
+			</div>
+
+			<div id="save-button" class="save-button"></div>
+		</div>
 	</div>
 </body>
+
 </html>
diff --git a/jquery-1.8.2.min.js b/jquery-1.8.2.min.js