Skip to content

Commit

Permalink
fix double paste
Browse files Browse the repository at this point in the history
  • Loading branch information
@orn8
orn8 authored Sep 7, 2024
1 parent ef050d5 commit cd5d045
Showing 1 changed file with 0 additions and 299 deletions.
299 changes: 0 additions & 299 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -299,304 +299,5 @@ <h1>SGA Trainer</h1>
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SGA Trainer</title>
<style>
@font-face {
font-family: "Galactic Simple";
src: url("data:application/octet-stream;base64,AAEAA..."); /* SGA custom font */
}

body {
background-color: black;
color: white;
font-family: "Roboto", sans-serif;
margin: 0;
padding: 0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
text-align: center;
}

.container {
text-align: center;
background-color: #1e2328;
padding: 20px;
border-radius: 10px;
border: 3px solid #ffd700; /* Yellow border for container */
}

h1 {
font-family: "Arial Black", sans-serif;
font-size: 48px;
margin: 0;
padding-bottom: 20px; /* Space below the heading */
}

#word-display {
font-family: "Galactic Simple"; /* Custom font for SGA text */
font-size: 30px;
margin-bottom: 20px;
letter-spacing: 5px; /* Spacing between characters in SGA text */
user-select: none; /* Prevents text selection */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}

#user-input {
font-size: 18px;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
background-color: white;
color: black;
outline: none;
}

.button {
padding: 15px 30px;
background-color: #ffd700; /* Yellow button background */
color: black;
text-decoration: none;
font-size: 1.2rem;
font-weight: 700;
border-radius: 10px;
margin: 8px;
border: none;
cursor: pointer;
outline: none;
transition: background-color 0.3s, transform 0.2s;
}

.button:hover {
background-color: #555; /* Darker background on hover */
color: white;
transform: scale(1.05); /* Slightly enlarged on hover */
}

.button:active, .button-pressed {
background-color: #555; /* Dark background when button is pressed */
color: white;
transform: scale(0.95); /* Slightly reduced size on click */
}

#feedback {
margin-top: 20px;
font-size: 18px;
color: white;
}

.footer {
color: gray;
font-size: 14px;
margin-top: 20px;
}

.footer a {
color: #ffd700; /* Yellow color for footer link */
text-decoration: none;
}

.footer a:hover {
text-decoration: underline; /* Underline on hover */
}

.toggle-container {
margin-top: 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}

.toggle-label {
color: white;
font-size: 16px;
}

.toggle-switch {
position: relative;
display: inline-block;
width: 60px;
height: 30px;
}

.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #555; /* Grey background when toggle is off */
transition: .4s;
border-radius: 15px;
}

.slider:before {
position: absolute;
content: "";
height: 22px;
width: 22px;
border-radius: 50%;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
}

input:checked + .slider {
background-color: #ffd700; /* Yellow background when toggle is on */
}

input:checked + .slider:before {
transform: translateX(30px); /* Moves the slider to the right */
}
</style>
</head>
<body>
<div class="container">
<h1>SGA Trainer</h1>
<div id="word-display"></div>
<input type="text" id="user-input" placeholder="Translation Here">
<button id="submit-button" class="button">Check</button>
<div id="feedback"></div>
<div class="footer">
Inspired by <a href="https://www.dioritetm.xyz/sga" target="_blank">DioriteTM's Standard Galactic Trainer</a>
</div>
<div class="toggle-container">
<label class="toggle-label">Local Mode:</label>
<label class="toggle-switch">
<input type="checkbox" id="local-toggle">
<span class="slider"></span>
</label>
</div>
</div>

<script>
// Variable to store the current word
let currentWord = "";

// Flag to track if Enter key is held
let enterHeld = false;

// Timestamp when Enter key was pressed
let pressStartTime = 0;

// Minimum duration for button to stay in pressed state
const minPressedDuration = 250; // Minimum press duration for the button

// List of words used in local mode
const wordList = ["the", "be", "to", "of", "and", "a", "in", "that", "have", "it", "for", "not", "on", "with", "he", "as", "you", "do", "at", "this", "but", "his", "by", "from", "they", "we", "say", "her", "she", "or", "an", "will", "my", "one", "all", "would", "there", "their", "what", "so", "up", "out", "if", "about", "who", "get", "which", "go", "me", "when", "make", "can", "like", "time", "no", "just", "him", "know", "take", "people", "into", "year", "your", "good", "some", "could", "them", "see", "other", "than", "then", "now", "look", "only", "come", "its", "over", "think", "also", "back", "after", "use", "two", "how", "our", "work", "first", "well", "way", "even", "new", "want", "because", "any", "these", "give", "day", "most", "us", "is", "are", "was", "had", "can", "more", "any", "now", "such", "last", "find", "great", "tell", "try", "ask", "need", "feel", "become", "leave", "put", "mean", "keep", "let", "begin", "seem", "help", "talk", "turn", "start", "might", "show", "hear", "play", "run", "move", "like", "live", "believe", "hold", "bring", "happen", "must", "write", "provide", "sit", "stand", "lose", "pay", "meet", "include", "continue", "set", "learn", "change", "lead", "understand", "watch", "follow", "stop", "create", "speak", "read", "allow", "add", "spend", "grow", "open", "walk", "win", "offer", "remember", "love", "consider", "appear", "buy", "wait", "serve", "die", "send", "expect", "build", "stay", "fall", "cut", "reach", "kill", "remain", "suggest", "raise", "pass", "sell", "require", "report", "decide", "pull", "return", "explain", "hope", "develop", "carry", "break", "receive", "agree", "support", "hit", "produce", "eat", "cover", "catch", "draw", "choose", "cause", "point", "listen", "realize", "place", "close", "involve", "answer", "identify", "act", "reach", "affect", "miss", "produce", "watch", "apply", "check", "stay", "determine", "record", "imagine", "agree", "claim", "introduce", "manage", "contain", "observe", "describe", "understand", "prepare", "select", "teach", "control", "accept", "explain", "occur", "recognize", "express", "enter", "suggest", "share", "apply", "maintain", "protect", "respond", "improve", "avoid", "expand", "explore", "assist", "participate", "require", "achieve", "occur", "encourage", "reflect", "respond", "consider", "discover", "achieve", "arrive", "ensure", "complete", "compare", "indicate", "adopt", "acquire", "handle", "diorite", "sga", "twitter", "reddit", "minecraft", "drums", "aunt", "uncle", "mom", "dad", "yes", "no", "random", "contain", "discuss", "compare", "indicate", "achieve", "arrive", "ensure", "complete", "compare", "indicate", "adopt", "acquire", "handle", "maintain", "direct", "contribute", "ensure", "focus", "achieve", "impact", "deliver", "enhance", "monitor", "influence", "support", "promote", "develop", "establish", "improve", "expand", "facilitate", "achieve", "analyze", "coordinate", "generate", "implement", "measure", "oversee", "plan", "prioritize", "recommend", "sustain", "advise", "engage", "identify", "align", "budget", "coach", "document", "educate", "forecast", "integrate", "lead", "negotiate", "optimize", "publish", "refine", "restructure", "simplify", "strategize", "upgrade", "validate", "collaborate", "delegate", "innovate", "leverage", "maximize", "navigate", "overcome", "revise", "translate", "utilize", "craft", "customize", "decipher", "design", "devise", "edit", "engineer", "formulate", "illustrate", "invent", "model", "originate", "photograph", "produce", "program", "prototype", "redesign", "sculpt", "sketch", "visualize", "adapt", "broaden", "construct", "evolve", "fortify", "fulfill", "foster", "ignite", "initiate", "instill", "mentor", "mobilize", "motivate", "propel", "revitalize", "spark", "strengthen", "transform", "articulate", "brainstorm", "communicate", "convey", "enlighten", "express", "highlight", "inspire", "persuade", "present", "publicize", "relay", "speak", "submit", "verify", "argue", "assert", "comment", "defend", "describe", "elaborate", "justify", "outline", "propose", "question", "rebut", "refute", "specify", "summarize", "analyze", "compile", "debate", "define", "determine", "diagnose", "differentiate", "evaluate", "examine", "interpret", "investigate", "scrutinize", "study", "survey", "research", "assess", "appraise", "audit", "compute", "consider", "estimate", "forecast", "quantify", "review", "sample", "test", "measure", "administer", "appoint", "authorize", "certify", "delegate", "enforce", "govern", "inaugurate", "inspect", "invest", "legislate", "license", "manage", "moderate", "organize", "preside", "regulate", "supervise", "convene", "assemble", "adjourn", "conclude", "confirm", "disband", "gather", "institute", "launch", "merge", "consolidate", "implement", "install", "initiate", "orient", "position", "recruit", "retain", "train", "adjust", "align", "assemble", "bind", "bolt", "calibrate", "conserve", "coordinate", "dismantle", "fabricate", "fasten", "fit", "fuse", "hoist", "install", "lower", "mount", "nail", "navigate", "orient", "pack", "place", "position", "pour", "prepare", "preserve", "prop", "release", "repair", "restore", "rig", "salvage", "scaffold", "seal", "service", "stack", "stock", "store", "support", "sustain", "tape", "tighten", "unfold", "unload", "uphold", "verify", "weld", "whip", "wrap", "agitate", "blend", "boil", "braise", "broil", "chop", "combine", "cream", "cube", "cut", "deep-fry", "dice", "drain", "dry", "filter", "flame", "flip", "fold", "freeze", "fry", "glaze", "grate", "grill", "heat", "ice", "knead", "marinate", "mash", "melt", "mix", "mold", "peel", "pick", "pour", "preheat", "preserve", "purée", "refrigerate", "rinse", "roast", "roll", "salt", "saute", "scramble", "season", "sear", "shake", "sift", "simmer", "skim", "slice", "smoke", "soak", "spoon", "spread", "sprinkle", "steam", "stew", "stir", "strain", "stuff", "sugar", "taste", "thaw", "toast", "trim", "whisk", "whip", "wrap", "zap", "zap", "zone", "zing", "zoom", "adapt", "admire", "admit", "advocate", "allow", "annex", "annihilate", "apologize", "appeal", "applaud", "apply", "appreciate", "approach", "approve", "arise", "arrest", "arrange", "arrest", "arrange", "arrive", "articulate", "ascend", "ask", "assemble", "assess", "assign", "assist", "assume", "assure", "attach", "attack", "attempt", "attend", "attract", "audition", "avoid", "await", "awake", "back", "bake", "balance", "ban", "bang", "bargain", "barter", "bathe", "battle", "beam", "beat", "become", "befriend", "beg", "begin", "behave", "behold", "believe", "belong", "bend", "benefit", "bequeath", "berate", "besiege", "bet", "bid", "bind", "bite", "blame", "blaze", "bleach", "bleed", "bless", "blink", "blow", "blush", "boast", "bolt", "bond", "book", "boost", "bounce", "bow", "box", "brag", "brake", "branch", "brand", "break", "breathe", "breed", "brief", "broadcast", "broaden", "broil", "broker", "brush", "bubble", "budget", "buff", "build", "bully", "burn", "burst", "bury", "bust", "buy", "buzz", "calculate", "call", "calm", "camp", "capture", "care", "carve", "catch", "celebrate", "challenge", "change", "charge", "chase", "cheat", "check", "cheer", "chew", "chip", "choose", "chop", "claim", "clap", "clarify", "clash", "clean", "clear", "climb", "cling", "clip", "close", "coach", "coil", "collapse", "collect", "color", "comb", "come", "comfort", "command", "commend", "comment", "compare", "compete", "complain", "complete", "comply", "compose", "conceive", "concentrate", "conclude", "condemn", "conduct", "confer", "confess", "confirm", "conform", "confront", "confuse", "congratulate", "connect", "conserve", "consider", "consist", "consult", "contain", "contemplate", "continue", "contract"]; // Local word list

// Fetch a random word from the API
async function fetchRandomWord() {
try {
const response = await fetch("https://random-word-api.herokuapp.com/word");
const word = await response.json();
return word[0]; // Return the first word from the API response
} catch (error) {
return "error"; // Return "error" if API fetch fails
}
}

// Get a random word from the local word list
async function getRandomLocalWord() {
const randomIndex = Math.floor(Math.random() * wordList.length); // Random index in wordList
return wordList[randomIndex]; // Return the word at the random index
}

// Display a new word based on the mode (API or local)
async function displayNewWord() {
const isLocalMode = document.getElementById("local-toggle").checked; // Check if local mode is active
currentWord = isLocalMode ? await getRandomLocalWord() : await fetchRandomWord(); // Get word based on mode
document.getElementById("word-display").textContent = currentWord; // Update word display
document.getElementById("user-input").value = ""; // Clear input field
}

// Set feedback message and clear it after a specified duration
function setFeedbackMessage(message, duration) {
const feedbackElement = document.getElementById("feedback"); // Get feedback element
feedbackElement.textContent = message; // Set the feedback message
setTimeout(() => {
feedbackElement.textContent = ""; // Clear the feedback message after duration
}, duration);
}

// Check user input against the current word and provide feedback
function checkUserInput() {
const userInput = document.getElementById("user-input").value.toLowerCase(); // Get user input
const feedbackDuration = 1000; // Duration to show feedback message
if (userInput === currentWord) {
setFeedbackMessage("Correct!", feedbackDuration); // Show "Correct!" message
displayNewWord(); // Display a new word
} else {
setFeedbackMessage("Wrong, try again!", feedbackDuration); // Show "Wrong" message
}
}

// Manage button press and release states
function handleButtonState(isPressed) {
const button = document.getElementById("submit-button"); // Get button element
button.classList.toggle("button-pressed", isPressed); // Toggle pressed state
}

// Handle Enter key press event
function handleEnterPress() {
if (!enterHeld) { // If Enter key is not already held
enterHeld = true; // Mark Enter key as held
pressStartTime = new Date().getTime(); // Record press start time
checkUserInput(); // Check user input
handleButtonState(true); // Set button to pressed state
}
}

// Handle Enter key release event
function handleEnterRelease() {
if (enterHeld) { // If Enter key was held
const pressDuration = new Date().getTime() - pressStartTime; // Calculate press duration
const delay = Math.max(minPressedDuration - pressDuration, 0); // Calculate delay before releasing button
setTimeout(() => {
handleButtonState(false); // Set button back to normal state
}, delay); // Delay the button release based on press duration
enterHeld = false; // Mark Enter key as released
}
}

// Add event listeners for button click and Enter key
document.getElementById("submit-button").addEventListener("click", checkUserInput); // Button click to check input

document.getElementById("user-input").addEventListener("keydown", function(event) {
if (event.key === "Enter") {
handleEnterPress(); // Handle Enter key press
}
});

document.getElementById("user-input").addEventListener("keyup", function(event) {
if (event.key === "Enter") {
handleEnterRelease(); // Handle Enter key release
}
});

// Toggle switch change event listener
document.getElementById("local-toggle").addEventListener("change", displayNewWord); // Update displayed word on toggle change

// Initialize with a new word on page load
window.onload = displayNewWord; // Display a new word when the page loads
</script>
</body>
</html>

0 comments on commit cd5d045

Please sign in to comment.