Platform part 2

.eslintignore

@@ -0,0 +1 @@
+**/*.js

.github/workflows/build-and-publish.yml

@@ -3,11 +3,16 @@ name: Build and Publish
 on:
   push:
     paths-ignore:
-    - 'tests/**'
-    branches: [main]
+      - 'tests/**'
+    branches:
+      - main
+      - platform_part_2 # Add this line
   pull_request:
     paths-ignore:
-    - 'tests/**'
+      - 'tests/**'
+    branches:
+      - main
+      - platform_part_2 # Add this line
 
 jobs:
   build-and-push-docker-image:
@@ -31,7 +36,7 @@ jobs:
         uses: docker/setup-buildx-action@v2
 
       - name: Login to DockerHub
-        if: github.ref == 'refs/heads/main'
+        if: github.ref == 'refs/heads/main' || github.ref == 'refs/heads/platform_part_2'
         uses: docker/login-action@v2
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
@@ -57,25 +62,25 @@ jobs:
             ${{ secrets.DOCKERHUB_USERNAME }}/pathology-socket:latest 
             ${{ secrets.DOCKERHUB_USERNAME }}/pathology-socket:${{ steps.vars.outputs.sha_short }}
             ${{ secrets.DOCKERHUB_USERNAME }}/pathology-socket:${{ steps.docker_build_version.outputs.version }}
-          push: ${{ github.ref == 'refs/heads/main' }}
+          push: ${{ github.ref == 'refs/heads/main' || github.ref == 'refs/heads/platform_part_2' }}
 
   config:
     name: Config
-    if: github.ref == 'refs/heads/main'
+    if: github.ref == 'refs/heads/main' || github.ref == 'refs/heads/platform_part_2'
     runs-on: ubuntu-latest
     outputs:
       get-server-ip-list: ${{ steps.get-server-ip-list.outputs.get-server-ip-list }}
     steps:
       - id: get-server-ip-list
         name: Get Server IP List
-        run: echo "get-server-ip-list=$(dig +short app-servers.pathology.gg TXT | jq -cr 'split(",")')" >> $GITHUB_OUTPUT
+        run: echo "get-server-ip-list=$(dig +short app-servers.pathology.gg TXT | jq -cr 'split(\",\")')" >> $GITHUB_OUTPUT
       - name: print output
         run: |
-          echo "${{ steps.get-server-ip-list.outputs.get-server-ip-list }}"        
+          echo "${{ steps.get-server-ip-list.outputs.get-server-ip-list }}"
 
   deploy-to-staging:
     name: Deploy to Staging
-    if: github.ref == 'refs/heads/main'
+    if: github.ref == 'refs/heads/main' || github.ref == 'refs/heads/platform_part_2'
     runs-on: ubuntu-latest
     needs: [build-and-push-docker-image, config]
     strategy:
@@ -98,4 +103,4 @@ jobs:
           SSH_KEY: ${{ secrets.SERVER_SSH_KEY }}
 
       - name: Update Environments with New Containers
-        run: ssh ${{ matrix.server }} 'bash /opt/pathology/scripts/update-Environments.sh -e stage -v ${{ needs.build-and-push-docker-image.outputs.sha_version }}'
+        run: ssh ${{ matrix.server }} 'bash /opt/pathology/scripts/update-Environments.sh -e stage -v ${{ needs.build-and-push-docker-image.outputs.sha_version }}'

.github/workflows/update-production.yml → .github/workflows/update-env.yml

@@ -1,4 +1,4 @@
-name: Update Production
+name: Update Env
 
 on:
   workflow_dispatch:
@@ -9,23 +9,23 @@ on:
         default: 'prod'
         type: choice
         options:
-        - stage
-        - prod
+          - stage
+          - prod
       action:
         description: 'Desired action against env'
         required: true
         default: 'update'
         type: choice
         options:
-        - update
-        - revert
+          - update
+          - revert
       desired_sha:
-        description: "[Optional] Target Short SHA"
+        description: '[Optional] Target Short SHA'
         required: false
         default: ''
         type: string
       deployment_description:
-        description: "A brief description of what changed in this deployment"
+        description: 'A brief description of what changed in this deployment'
         required: false
         default: 'Production Update/Revert via Github Action'
         type: string
@@ -41,7 +41,7 @@ jobs:
         run: echo "get-server-ip-list=$(dig +short app-servers.pathology.gg TXT | jq -cr 'split(",")')" >> $GITHUB_OUTPUT
       - name: print output
         run: |
-          echo "${{ steps.get-server-ip-list.outputs.get-server-ip-list }}"        
+          echo "${{ steps.get-server-ip-list.outputs.get-server-ip-list }}"
   deploy-new-containers:
     name: Update Production
     runs-on: ubuntu-latest
@@ -72,4 +72,4 @@ jobs:
 
       - name: Update Environments with New Containers - With SHA
         if: github.event.inputs.desired_sha != ''
-        run: ssh ${{ matrix.server }} 'bash /opt/pathology/scripts/update-Environments.sh -e ${{ inputs.environment }} -a ${{ inputs.action }} -c "${{ inputs.deployment_description }}" -v "${{ inputs.desired_sha }}"'
+        run: ssh ${{ matrix.server }} 'bash /opt/pathology/scripts/update-Environments.sh -e ${{ inputs.environment }} -a ${{ inputs.action }} -c "${{ inputs.deployment_description }}" -v "${{ inputs.desired_sha }}"'

.swcrc

@@ -0,0 +1,20 @@
+{
+  "jsc": {
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "dynamicImport": true,
+      "preserveAllComments": true
+    },
+    "preserveAllComments": true,
+    "minify": {},
+    "target": "es2022",
+    "transform": {
+      "react": {
+        "runtime": "automatic"
+      }
+    },    
+  },
+
+}
+

Dockerfile

@@ -11,20 +11,23 @@ ARG OFFLINE_BUILD=true
 
 RUN npm config set fund false
 
+WORKDIR /pathology_app
+
 # ts-node / tspath is needed for other scripts right now. module-alias is used for socket server production
 # ideally all would use package module alias and we would not need ts-node / tspath. but that's a TODO
 RUN npm install -g ts-node typescript module-alias
 
 COPY --chown=node:node package*.json ./
+
 RUN npm install --platform=linux --arch=x64 sharp
 RUN npm install --platform=linuxmusl
-RUN chown -R node:node node_modules/
+#RUN chown -R node:node node_modules/
 
 COPY --chown=node:node . .
 
 # for web app
 RUN npm run build --omit=dev
-RUN chown -R node:node .next/
+#RUN chown -R node:node .next/
 
 # for socket server
 RUN tsc -p tsconfig-socket.json

Dockerfile.dev

@@ -1,10 +1,12 @@
-FROM node:20
+FROM  node:20
 
 ENV NEXT_TELEMETRY_DISABLED=1
 
 WORKDIR /pathology_app
 
 COPY --chown=node:node package*.json tsconfig-socket.json ./
+
+
 RUN npm install
 
 # ts-node / tspath is needed for other scripts right now. module-alias is used for socket server production
@@ -18,7 +20,6 @@ COPY --chown=node:node . .
 
 # for dev you don't need to run tsc
 
-
 # Uncomment the following line if you want to run the app as a non-root user
 # USER node
 

README.md

@@ -1,10 +1,10 @@
-# <img src="public/logo.svg"> [Pathology](https://pathology.gg)
+# <img src="public/logos/thinky/thinky.svg"> [Thinky.gg](https://thinky.gg)
 
 [![codecov](https://codecov.io/gh/sspenst/pathology/branch/main/graph/badge.svg?token=BX0RSQ9R57)](https://codecov.io/gh/sspenst/pathology)
 ![Tests](https://github.com/sspenst/pathology/actions/workflows/node.js.yml/badge.svg)
 [![](https://dcbadge.vercel.app/api/server/j6RxRdqq4A?style=flat&theme=default-inverted)](https://discord.gg/j6RxRdqq4A)
 
-Shortest path puzzle game. Get to the exit in the least number of moves.
+Thinky is a platform dedicated to high-quality puzzle games. Solve and optimize puzzles, or create your own for everyone to play!
 
 ## Dev Environment
 

components/admin/sendAdminMessage.tsx

@@ -0,0 +1,146 @@
+import { Menu, Transition } from '@headlessui/react';
+import AdminCommand from '@root/constants/adminCommand';
+import Role from '@root/constants/role';
+import { IAdminCommand } from '@root/pages/[subdomain]/admin';
+import React, { Fragment, useState } from 'react';
+import toast from 'react-hot-toast';
+import ReactTextareaAutosize from 'react-textarea-autosize';
+
+interface SendAdminMessageProps {
+  runningCommand: boolean;
+  selectedUserCommand?: IAdminCommand;
+  setRunningCommand: (running: boolean) => void;
+}
+
+export default function SendAdminMessage({ runningCommand, selectedUserCommand, setRunningCommand }: SendAdminMessageProps) {
+  const [adminHref, setAdminHref] = useState('');
+  const [adminMessage, setAdminMessage] = useState('');
+  const [adminMessageRole, setAdminMessageRole] = useState<Role | null>(Role.ADMIN);
+
+  async function runCommandAdmin() {
+    if (selectedUserCommand?.confirm && !window.confirm('Are you sure you want to proceed?')) return;
+
+    setRunningCommand(true);
+    toast.dismiss();
+    toast.loading('Running command...');
+
+    const payload = JSON.stringify({
+      href: adminHref,
+      message: adminMessage,
+    });
+
+    const resp = await fetch('/api/admin', {
+      method: 'POST',
+      credentials: 'include',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        command: AdminCommand.SendAdminMessage,
+        role: adminMessageRole,
+        payload: payload,
+      }),
+    });
+
+    setRunningCommand(false);
+    const json = await resp.json();
+
+    toast.dismiss();
+
+    if (json.error) {
+      toast.error(json.error);
+    } else {
+      toast.success('Command ran successfully');
+    }
+  }
+
+  return (
+    <div className='flex flex-col gap-2'>
+      <h2 className='text-2xl font-medium'>
+        Send Admin Message
+      </h2>
+      <ReactTextareaAutosize
+        className='bg-inherit block py-1 -mt-2 w-96 max-w-full border-b border-neutral-500 disabled:text-neutral-500 transition resize-none placeholder:text-neutral-500 focus:outline-0 rounded-none focus:border-black focus:dark:border-white'
+        onChange={(e) => setAdminMessage(e.currentTarget.value)}
+        placeholder='Admin message...'
+        value={adminMessage}
+      />
+      <ReactTextareaAutosize
+        className='bg-inherit block py-1 -mt-2 w-96 max-w-full border-b border-neutral-500 disabled:text-neutral-500 transition resize-none placeholder:text-neutral-500 focus:outline-0 rounded-none focus:border-black focus:dark:border-white'
+        onChange={(e) => setAdminHref(e.currentTarget.value)}
+        placeholder='Href (eg: "/settings/pro")...'
+        value={adminHref}
+      />
+      <div className='flex gap-2 items-center'>
+        <span>To:</span>
+        <Menu as='div' className='relative inline-block text-left'>
+          <Menu.Button
+            aria-expanded='true'
+            aria-haspopup='true'
+            className='flex items-center w-full justify-center rounded-md bg-white pl-2 p-1 text-sm font-medium text-black gap-1 h-8 shadow-md border hover:opacity-70'
+            id='menu-button'
+            style={{
+              borderColor: 'var(--bg-color-3)',
+            }}
+          >
+            {adminMessageRole ?? 'All'}
+            <svg className='h-5 w-5' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor' aria-hidden='true'>
+              <path fillRule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clipRule='evenodd' />
+            </svg>
+          </Menu.Button>
+          <Transition
+            as={Fragment}
+            enter='transition ease-out duration-100'
+            enterFrom='transform opacity-0 scale-95'
+            enterTo='transform opacity-100 scale-100'
+            leave='transition ease-in duration-75'
+            leaveFrom='transform opacity-100 scale-100'
+            leaveTo='transform opacity-0 scale-95'
+          >
+            <Menu.Items className='absolute right-0 z-10 mt-1 rounded-md overflow-hidden border bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none border-color-1'>
+              <div>
+                {Object.values(Role).map(role => (
+                  <Menu.Item key={`role-${role}`}>
+                    {({ active }) => (
+                      <button
+                        className='text-black block p-1 text-sm w-28 flex items-center gap-1 justify-center'
+                        onClick={() => setAdminMessageRole(role)}
+                        role='menuitem'
+                        style= {{
+                          backgroundColor: active ? 'rgb(200, 200, 200)' : '',
+                        }}
+                      >
+                        {role}
+                      </button>
+                    )}
+                  </Menu.Item>
+                ))}
+                <Menu.Item key='role-all'>
+                  {({ active }) => (
+                    <button
+                      className='text-black block p-1 text-sm w-28 flex items-center gap-1 justify-center'
+                      onClick={() => setAdminMessageRole(null)}
+                      role='menuitem'
+                      style= {{
+                        backgroundColor: active ? 'rgb(200, 200, 200)' : '',
+                      }}
+                    >
+                      All
+                    </button>
+                  )}
+                </Menu.Item>
+              </div>
+            </Menu.Items>
+          </Transition>
+        </Menu>
+      </div>
+      <button
+        className={`bg-blue-500 hover:enabled:bg-blue-700 text-white font-bold py-2 px-4 rounded ${runningCommand ? 'bg-gray-500 cursor-not-allowed' : ''}`}
+        disabled={runningCommand}
+        onClick={runCommandAdmin}
+      >
+        Run
+      </button>
+    </div>
+  );
+}

components/buttons/filterButton.tsx

@@ -17,7 +17,7 @@ interface FilterButtonProps {
 }
 
 export default function FilterButton({ element, first, last, onClick, proRequired, selected, transparent, value }: FilterButtonProps) {
-  const { user } = useContext(AppContext);
+  const { game, user } = useContext(AppContext);
   const proDisabled = !isPro(user) && proRequired;
 
   return (
@@ -36,7 +36,7 @@ export default function FilterButton({ element, first, last, onClick, proRequire
           toast.dismiss();
           toast.error(
             <div className='text-lg'>
-              Requires <Link href='/settings/pro' className='text-blue-500'>Pathology Pro</Link>
+              Requires <Link href='/settings/pro' className='text-blue-500'>{game.displayName} Pro</Link>
             </div>,
             {
               duration: 3000,

components/cards/card.tsx

@@ -12,14 +12,10 @@ export default function Card({ children, id, title, tooltip }: CardProps) {
   const tooltipId = `card-tooltip-${id}`;
 
   return (
-    <div className='flex flex-col justify-center rounded-lg border max-w-full'
+    <div className='flex flex-col items-center max-w-full h-fit gap-4'
       id={id}
-      style={{
-        backgroundColor: 'var(--bg-color-2)',
-        borderColor: 'var(--bg-color-3)',
-      }}
     >
-      <h2 className='self-center px-4 pt-3 text-lg font-bold text-center' data-tooltip-id={tooltipId} data-tooltip-content={tooltip}>
+      <h2 className='text-xl font-bold' data-tooltip-id={tooltipId} data-tooltip-content={tooltip}>
         {title}
       </h2>
       <StyledTooltip id={tooltipId} />