rework for new twitch concept

chat-game · Mar 19, 2024 · bb07b99 · bb07b99
1 parent 92c1cee
commit bb07b99
Show file tree

Hide file tree

Showing 9 changed files with 158 additions and 42 deletions.
diff --git a/.github/workflows/build-deploy.yml → .github/workflows/test.yml b/.github/workflows/build-deploy.yml → .github/workflows/test.yml
@@ -1,4 +1,4 @@
-name: Build and Deploy
+name: Test
 
 on:
   push:
@@ -7,19 +7,15 @@ on:
 
 permissions:
   contents: write
+
 jobs:
   build-and-deploy:
     concurrency: ci-${{ github.ref }}
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
 
-      - name: Install and Build 🔧
+      - name: Lint
         run: |
           npm ci
-          npm run build
-
-      - name: Deploy 🚀
-        uses: JamesIves/github-pages-deploy-action@v4
-        with:
-          folder: dist
+          npm run lint
diff --git a/.gitignore b/.gitignore
@@ -11,6 +11,8 @@ node_modules
 dist
 dist-ssr
 *.local
+.env
+*.token.json
 
 # Editor directories and files
 .vscode/*

diff --git a/README.md b/README.md
@@ -1,8 +1,9 @@
-# [Client] Online game Royal Madness 👑
+# [Twitch Chat Game] Royal Madness 👑
 
-👉 Check latest build: https://hmbanan666.github.io/royal-madness-client/
+👉 Building and playing it live: https://www.twitch.tv/hmbanan666
 
 🤔 Imagine an open world where your Hero can:
+
 - 🗺️ **Travel**, **defeat** creatures and **find** an infinite number of quests
 - 💎 **Gather** loot and a variety of materials
 - 🏗️ **Construct** buildings with other Heroes
@@ -13,16 +14,19 @@
 Let's build a similar world together!
 
 ## What will be here?
-- [Front] Web client for the game made with **Typescript**, **React**, and **Redux**
-  - simple graphics, top view camera
-  - movements with mouse clicks (or finger taps)
-  - some interface, menu, inventory slots...
+
+- [Front] Web client for the game made with **Typescript**, **React**
+    - simple graphics, top view camera
+    - movements with mouse clicks (or finger taps)
+    - some interface, menu, inventory slots...
 - [Back] Server on **Node.js**, where will be a storage for progress of all Heroes
 
 ## Why?
+
 - I want to take a break from product development and develop some game that myself would play in the evenings.
-- It will be made using front and back parts, with good code practices (hope so 😀). 
+- It will be made using front and back parts, with good code practices (hope so 😀).
 - Want to discover something new in software development. Some new challenges and their overcoming!
-- I enjoy the new achievements on GitHub, especially Starstruck x4: "Created a repository that has 4096 stars". Why not to try?
+- I enjoy the new achievements on GitHub, especially Starstruck x4: "Created a repository that has 4096 stars". Why not
+  to try?
 
-⭐️ Become a Stargazer ⭐️ Star this repo. Make forks, issues, PRs, and have fun! Thank for your ideas and activity! 😉
+⭐️ Become a Stargazer ⭐️ Star this repo. Make forks, issues, PRs, and have fun! Thanks for your ideas and activity! 😉
diff --git a/index.html b/index.html
@@ -1,15 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/wolf.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Royal Madness</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <div id="game"></div>
-    <script type="module" src="/src/main.tsx"></script>
-    <script type="module" src="/src/render/main.ts"></script>
-  </body>
+<head>
+    <meta charset="UTF-8"/>
+    <link rel="icon" type="image/svg+xml" href="/wolf.png"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>Royal Madness: Twitch Chat Game</title>
+</head>
+<body>
+<div id="root"></div>
+<div id="game"></div>
+<script type="module" src="/src/main.tsx"></script>
+<script type="module" src="/src/render/main.ts"></script>
+</body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,31 +1,30 @@
 {
-	"name": "royal-madness-client",
+	"name": "royal-madness-twitch-game",
 	"version": "0.0.1",
-	"description": "Royal Madness game client",
+	"description": "Royal Madness: Twitch Chat Game",
 	"scripts": {
 		"dev": "vite",
 		"build": "tsc && vite build",
 		"preview": "vite preview",
-		"lint": "npx @biomejs/biome check --apply ./src"
+		"lint": "npx @biomejs/biome check --apply ./src",
+		"server": "node --env-file=.env server/main.js"
 	},
-	"keywords": [
-		"game",
-		"online"
-	],
+	"type": "module",
+	"keywords": ["game", "online", "twitch"],
 	"author": "Nick Kosarev <[email protected]>",
 	"license": "MIT",
 	"repository": {
 		"type": "git",
-		"url": "git+https://github.com/hmbanan666/royal-madness-client.git"
+		"url": "git+https://github.com/hmbanan666/royal-madness-twitch-game.git"
 	},
 	"bugs": {
-		"url": "https://github.com/hmbanan666/royal-madness-client/issues"
+		"url": "https://github.com/hmbanan666/royal-madness-twitch-game/issues"
 	},
-	"homepage": "https://github.com/hmbanan666/royal-madness-client#readme",
-	"type": "module",
+	"homepage": "https://github.com/hmbanan666/royal-madness-twitch-game#readme",
 	"dependencies": {
 		"@twurple/auth": "7.1.0",
 		"@twurple/chat": "7.1.0",
+		"@twurple/easy-bot": "7.1.0",
 		"pixi.js": "8.0.2",
 		"react": "18.2.0",
 		"react-dom": "18.2.0"

diff --git a/server/main.js b/server/main.js
@@ -0,0 +1,65 @@
+import { promises as fs } from "node:fs";
+import { RefreshingAuthProvider } from "@twurple/auth";
+import { Bot, createBotCommand } from "@twurple/easy-bot";
+
+const channel = process.env.TWITCH_CHANNEL_NAME;
+const userId = process.env.TWITCH_CHANNEL_ID;
+
+const clientId = process.env.TWITCH_CLIENT_ID;
+const clientSecret = process.env.TWITCH_SECRET_ID;
+
+const tokenFilePath = `./server/${userId}.token.json`;
+
+const tokenData = JSON.parse(await fs.readFile(tokenFilePath, "utf-8"));
+
+const authProvider = new RefreshingAuthProvider({
+	clientId,
+	clientSecret,
+});
+
+authProvider.onRefresh(
+	async (userId, newTokenData) =>
+		await fs.writeFile(
+			tokenFilePath,
+			JSON.stringify(newTokenData, null, 4),
+			"utf-8",
+		),
+);
+
+await authProvider.addUserForToken(tokenData, ["chat"]);
+
+const bot = new Bot({
+	authProvider,
+	channels: [channel],
+	commands: [
+		createBotCommand("рубить", (params, { userId, userName, reply }) => {
+			console.log(userId, userName, params);
+
+			void reply(`${userName}, ты рубишь дерево! 30 шт/минуту`);
+		}),
+		createBotCommand("slap", (params, { userName, say }) => {
+			void say(
+				`${userName} slaps ${params.join(" ")} around a bit with a large trout`,
+			);
+		}),
+	],
+});
+
+bot.onSub(({ broadcasterName, userName }) => {
+	void bot.say(
+		broadcasterName,
+		`Thanks to @${userName} for subscribing to the channel!`,
+	);
+});
+bot.onResub(({ broadcasterName, userName, months }) => {
+	void bot.say(
+		broadcasterName,
+		`Thanks to @${userName} for subscribing to the channel for a total of ${months} months!`,
+	);
+});
+bot.onSubGift(({ broadcasterName, gifterName, userName }) => {
+	void bot.say(
+		broadcasterName,
+		`Thanks to @${gifterName} for gifting a subscription to @${userName}!`,
+	);
+});
diff --git a/tsconfig.json b/tsconfig.json
@@ -7,7 +7,7 @@
 		"skipLibCheck": true,
 
 		/* Bundler mode */
-		"moduleResolution": "bundler",
+		"moduleResolution": "Bundler",
 		"allowImportingTsExtensions": true,
 		"resolveJsonModule": true,
 		"isolatedModules": true,

diff --git a/vite.config.ts b/vite.config.ts
@@ -5,7 +5,6 @@ import { defineConfig } from "vite";
 // https://vitejs.dev/config/
 export default defineConfig({
 	plugins: [react(), tailwindcss()],
-	base: "/royal-madness-client/",
 	build: {
 		target: "ESNext",
 	},