Merge pull request #1 from ChrisWhisker/react

Turn into a Next.js React project
ChrisWhisker · Apr 22, 2024 · c7969f3 · c7969f3
2 parents 6df1e82 + 7a64ce3
commit c7969f3
Show file tree

Hide file tree

Showing 22 changed files with 5,250 additions and 163 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
 # Created by https://www.toptal.com/developers/gitignore/api/windows,visualstudio,visualstudiocode,react
 # Edit at https://www.toptal.com/developers/gitignore?templates=windows,visualstudio,visualstudiocode,react
 

diff --git a/README.md b/README.md
@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/app/Garamond Premier Pro Regular.ttf b/app/Garamond Premier Pro Regular.ttf
diff --git a/app/Mantinia.otf b/app/Mantinia.otf
diff --git a/app/favicon.ico b/app/favicon.ico
diff --git a/app/globals.css b/app/globals.css
@@ -0,0 +1,54 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+  }
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
+    rgb(var(--background-start-rgb));
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
+
+@font-face {
+  font-family: 'Mantinia';
+  src: url('Mantinia.otf') format('truetype');
+  /* Add more font formats (e.g., woff, woff2) if needed */
+}
+
+@font-face {
+  font-family: 'Garamond';
+  src: url('Garamond Premier Pro Regular.ttf') format('truetype');
+  /* Add more font formats (e.g., woff, woff2) if needed */
+}
+
+.title {
+  font-family: 'Mantinia', sans-serif;
+  color: '#dfaf37';
+}
+
+.body {
+  font-family: 'Garamond', sans-serif;
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Elden Scribe ",
+  description: "Write Elden Ring messages",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -0,0 +1,46 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import { search } from "./search";
+
+// Default Home component
+export default function Home() {
+  useEffect(() => {
+    // Load CSV data when the component mounts (equivalent to DOMContentLoaded)
+    search("");
+  }, []); // Empty dependency array ensures the effect runs only once when the component mounts
+
+  // State to hold the value of the input text
+  const [searchText, setSearchText] = useState("");
+
+  // Function to handle text change in the input box
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    // Update the state with the new text value
+    setSearchText(event.target.value);
+
+    // Call the imported function with the new text as an argument
+    search(event.target.value);
+  };
+
+  return (
+    <main className="flex min-h-screen flex-col items-center p-24">
+      {/* Title and description */}
+      <h1 className="text-6xl title">Elden scribE</h1>
+      <h2 className="text-2xl body">Easily create messages for Elden Ring</h2>
+      {/* Container for search text and input box */}
+      <div className="z-10 w-full max-w-5xl items-center font-mono text-sm lg:flex">
+        <div className="mr-4">Search:</div>
+        {/* Input text box with onChange event handler */}
+        <input
+          type="text"
+          className="border border-gray-300 px-3 py-1 rounded-md"
+          placeholder="finger"
+          value={searchText}
+          onChange={handleInputChange} // Call handleInputChange function when text changes
+        />
+      </div>
+      <div id="buttonContainer">
+        {/* Buttons will be dynamically added here */}
+    </div>
+    </main>
+  );
+}
diff --git a/app/search.tsx b/app/search.tsx
@@ -0,0 +1,139 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+// Define the type for the object containing word categories
+interface WordCategory {
+    [category: string]: string[];
+}
+
+// Define the type for the object containing word and category
+interface WordObject {
+    category: string;
+    word: string;
+}
+
+// Define the type for the props of the Button component
+interface ButtonProps {
+    onClick: () => void;
+    title: string;
+    textContent: string;
+}
+
+// Button component to render buttons
+const Button: React.FC<ButtonProps> = ({ onClick, title, textContent }) => {
+    return (
+        <button
+            onClick={onClick}
+            title={title}
+            style={{
+                backgroundColor: "#472f17",
+                padding: "10px 20px",
+                margin: "5px",
+                fontFamily: "body",
+                borderRadius: "9999px" // Make the button pill-shaped
+            }}
+        >
+            {textContent}
+        </button>
+    );
+};
+
+// Define the type for the props of the ButtonContainer component
+interface ButtonContainerProps {
+    words: WordObject[];
+}
+
+// ButtonContainer component to contain buttons
+const ButtonContainer: React.FC<ButtonContainerProps> = ({ words }) => {
+    return (
+        <div id="buttonContainer">
+            {words.map((obj, index) => (
+                <Button
+                    key={index}
+                    onClick={() => {}}
+                    title={obj.category}
+                    textContent={obj.word}
+                />
+            ))}
+        </div>
+    );
+};
+
+// Search function to filter words and create buttons
+const search = (query: string) => {
+    let buttonContainer: HTMLElement | null = document.getElementById("buttonContainer");
+
+    if (query == null) {
+        console.error("Query is null. You probably meant to call search with an empty string.");
+        return;
+    }
+
+    query = query.trim().toLowerCase();
+    const results: WordObject[] = [];
+
+    const addWordsFromCategory = (category: string) => {
+        for (const word of wordCategories[category]) {
+            let wordObj: WordObject = { category: category, word: word };
+            results.push(wordObj);
+        }
+    };
+
+    if (query === "") {
+        for (const category in wordCategories) {
+            addWordsFromCategory(category);
+        }
+    } else {
+        let found = false;
+        for (const category in wordCategories) {
+            for (const word of wordCategories[category]) {
+                if (word.toLowerCase().includes(query)) {
+                    let wordObj: WordObject = { category: category, word: word };
+                    results.push(wordObj);
+                    found = true;
+                }
+            }
+            if (category.toLowerCase().includes(query)) {
+                addWordsFromCategory(category);
+                found = true;
+            }
+        }
+        if (!found) {
+            renderButtons([]);
+            return;
+        }
+    }
+
+    console.log("Searching for: \"" + query + "\". Results:");
+    console.log(results);
+    renderButtons(results);
+};
+
+// Render the buttons
+const renderButtons = (words: WordObject[]) => {
+    const buttonContainer = document.getElementById("buttonContainer");
+    if (buttonContainer) {
+        ReactDOM.render(<ButtonContainer words={words} />, buttonContainer);
+    } else {
+        console.error("Button container not found");
+    }
+};
+
+// Word categories object
+const wordCategories: WordCategory = {
+    "Templates": ["**** ahead", "No **** ahead", "**** required ahead", "Be wary of ****", "Try ****", "Likely ****", "First off\, ****", "Seek ****", "Still no ****...", "Why is it always ****?", "If only I had a ****...", "Didn't expect ****...", "Visions of ****...", "Could this be a ****?", "Time for ****", "****\, O ****", "Behold\, ****!", "Offer ****", "Praise the ****!", "Let there be ****", "Ahh\, ****...", "****", "****!", "****?", "****..."],
+    "Enemies": ["enemy", "weak foe", "strong foe", "monster", "dragon", "boss", "sentry", "group", "pack", "decoy", "undead", "soldier", "knight", "cavalier", "archer", "sniper", "mage", "ordnance", "monarch", "lord", "demi-human", "outsider", "giant", "horse", "dog", "wolf", "rat", "beast", "bird", "raptor", "snake", "crab", "prawn", "octopus", "bug", "scarab", "slug", "wraith", "skeleton", "monstrosity", "ill-omened creature"],
+    "People": ["Tarnished", "warrior", "swordfighter", "knight", "samurai", "sorcerer", "cleric", "sage", "merchant", "teacher", "master", "friend", "lover", "old dear", "old codger", "angel", "fat coinpurse", "pauper", "good sort", "wicked sort", "plump sort", "skinny sort", "lovable sort", "pathetic sort", "strange sort", "nimble sort", "laggardly sort", "invisible sort", "unfathomable sort", "giant sort", "sinner", "thief", "liar", "dastard", "traitor", "pair", "trio", "noble", "aristocrat", "hero", "champion", "monarch", "lord", "god"],
+    "Things": ["item", "necessary item", "precious item", "something", "something incredible", "treasure chest", "corpse", "coffin", "trap", "armament", "shield", "bow", "projectile weapon", "armor", "talisman", "skill", "sorcery", "incantation", "map", "material", "flower", "grass", "tree", "fruit", "seed", "mushroom", "tear", "crystal", "butterfly", "bug", "dung", "grace", "door", "key", "ladder", "lever", "lift", "spiritspring", "sending gate", "stone astrolabe", "Birdseye Telescope", "message", "bloodstain", "Erdtree", "Elden Ring"],
+    "Battle Tactics": ["close-quarters battle", "ranged battle", "horseback battle", "luring out", "defeating one-by-one", "taking on all at once", "rushing in", "stealth", "mimicry", "confusion", "pursuit", "fleeing", "summoning", "circling around", "jumping off", "dashing through", "brief respite"],
+    "Actions": ["attacking", "jump attack", "running attack", "critical hit", "two-handing", "blocking", "parrying", "guard counter", "sorcery", "incantation", "skill", "summoning", "throwing", "healing", "running", "rolling", "backstepping", "jumping", "crouching", "target lock", "item crafting", "gesturing"],
+    "Situations": ["morning", "noon", "evening", "night", "clear sky", "overcast", "rain", "storm", "mist", "snow", "patrolling", "procession", "crowd", "surprise attack", "ambush", "pincer attack", "beating to a pulp", "battle", "reinforcements", "ritual", "explosion", "high spot", "defensible spot", "climbable spot", "bright spot", "dark spot", "open area", "cramped area", "hiding place", "sniping spot", "recon spot", "safety", "danger", "gorgeous view", "detour", "hidden path", "secret passage", "shortcut", "dead end", "looking away", "unnoticed", "out of stamina"],
+    "Places": ["high road", "checkpoint", "bridge", "castle", "fort", "city", "ruins", "church", "tower", "camp site", "house", "cemetery", "underground tomb", "tunnel", "cave", "evergaol", "great tree", "cellar", "surface", "underground", "forest", "river", "lake", "bog", "mountain", "valley", "cliff", "waterside", "nest", "hole"],
+    "Directions": ["east", "west", "south", "north", "ahead", "behind", "left", "right", "center", "up", "down", "edge"],
+    "Body Parts": ["head", "stomach", "back", "arms", "legs", "rump", "tail", "core", "fingers"],
+    "Affinities": ["physical", "standard", "striking", "slashing", "piercing", "fire", "lightning", "magic", "holy", "poison", "toxic", "scarlet rot", "blood loss", "frost", "sleep", "madness", "death"],
+    "Concepts": ["life", "Death", "light", "dark", "stars", "fire", "Order", "chaos", "joy", "wrath", "suffering", "sadness", "comfort", "bliss", "misfortune", "good fortune", "bad luck", "hope", "despair", "victory", "defeat", "research", "faith", "abundance", "rot", "loyalty", "injustice", "secret", "opportunity", "pickle", "clue", "friendship", "love", "bravery", "vigor", "fortitude", "confidence", "distracted", "unguarded", "introspection", "regret", "resignation", "futility", "on the brink", "betrayal", "revenge", "destruction", "recklessness", "calmness", "vigilance", "tranquility", "sound", "tears", "sleep", "depths", "dregs", "fear", "sacrifice", "ruin"],
+    "Phrases": ["good luck", "look carefully", "listen carefully", "think carefully", "well done", "I did it!", "I've failed...", "here!", "not here!", "don't you dare!", "do it!", "I can't take this...", "don't think", "so lonely...", "here again...", "just getting started", "stay calm", "keep moving", "turn back", "give up", "don't give up", "help me...", "I don't believe it...", "too high up", "I want to go home...", "it's like a dream...", "seems familiar...", "beautiful...", "you don't have the right", "are you ready?"],
+    "Conjunctions": ["and then", "or", "but", "therefore", "in short", "except", "by the way", "so to speak", "all the more", "\,"]
+};
+
+export { search };
diff --git a/words.csv → app/words.csv b/words.csv → app/words.csv
diff --git a/index.html b/index.html