feat: add suit order gamma

Author: AdoryVo

src/components/CreateLobby.tsx

@@ -1,4 +1,5 @@
 import {
+  Badge,
   Button,
   Modal,
   ModalBody,
@@ -52,7 +53,10 @@ export default function CreateLobby({ closeToast }: Props) {
         me={2}
         onClick={onClick}
       >
-        Create lobby
+        Create lobby{' '}
+        <Badge variant="solid" bgColor="blue.300" ms={1} py={1} rounded="md">
+          🎉 New 🎉
+        </Badge>
       </Button>
 
       <Modal isOpen={isOpen} onClose={onClose} isCentered size="lg">

src/components/LobbyForm.tsx

@@ -1,5 +1,7 @@
 import Rules, { ALL_RULES, describe, rulesToArray } from '@big-two/Rules';
+import { SUIT_RANKING_ORDERS } from '@big-two/Util';
 import {
+  Badge,
   Box,
   Checkbox,
   CheckboxGroup,
@@ -69,11 +71,23 @@ export default function LobbyForm({ game, submitForm }: Props) {
           colorScheme="purple"
         >
           <VStack alignItems="start">
-            {ALL_RULES.slice(0, 2).map((suit_order) => (
-              <Radio key={suit_order} value={`${suit_order}`}>
-                {describe(suit_order)}
-              </Radio>
-            ))}
+            {ALL_RULES.slice(0, Object.keys(SUIT_RANKING_ORDERS).length).map(
+              (suit_order) => (
+                <Radio key={suit_order} value={`${suit_order}`}>
+                  {describe(suit_order)}
+                  {suit_order === Rules.SUIT_ORDER_GAMMA && (
+                    <Badge
+                      variant="solid"
+                      bgColor="blue.300"
+                      ms={2}
+                      rounded="md"
+                    >
+                      🎉 New 🎉
+                    </Badge>
+                  )}
+                </Radio>
+              ),
+            )}
           </VStack>
         </RadioGroup>
 
@@ -85,11 +99,13 @@ export default function LobbyForm({ game, submitForm }: Props) {
           colorScheme="green"
         >
           <VStack alignItems="start">
-            {ALL_RULES.slice(2).map((rule) => (
-              <Checkbox key={rule} value={rule}>
-                {describe(rule)}
-              </Checkbox>
-            ))}
+            {ALL_RULES.slice(Object.keys(SUIT_RANKING_ORDERS).length).map(
+              (rule) => (
+                <Checkbox key={rule} value={rule}>
+                  {describe(rule)}
+                </Checkbox>
+              ),
+            )}
           </VStack>
         </CheckboxGroup>
       </FormControl>

src/components/Version.tsx

@@ -16,7 +16,7 @@ export default function Version(props: TextProps) {
           href="https://github.com/AdoryVo/big-two/blob/main/CHANGELOG.md"
           isExternal
         >
-          v1.2.1
+          v1.2.2
         </Link>
       </Text>
     </Tooltip>

src/lib/big-two/Rules.ts

@@ -2,6 +2,7 @@ enum Rules {
   // Suit ordering
   SUIT_ORDER_ALPHA = 1,
   SUIT_ORDER_BETA = 0,
+  SUIT_ORDER_GAMMA = 1 << 6,
 
   // Straights
   STRAIGHTS_WRAP_AROUND = 1 << 1,
@@ -25,6 +26,7 @@ enum Rules {
 export const ALL_RULES = [
   Rules.SUIT_ORDER_ALPHA,
   Rules.SUIT_ORDER_BETA,
+  Rules.SUIT_ORDER_GAMMA,
   Rules.STRAIGHTS_WRAP_AROUND,
   Rules.STRAIGHTS_ALLOW_RUNS,
   Rules.CAN_PLAY_AFTER_PASS,
@@ -37,7 +39,9 @@ export function describe(rule: Rules) {
     case Rules.SUIT_ORDER_ALPHA:
       return 'Suit order alpha (clubs < diamonds < hearts < spades)';
     case Rules.SUIT_ORDER_BETA:
-      return 'Suit order Tiến (spades < clubs < diamonds < hearts)';
+      return 'Suit order beta [Tiến] (spades < clubs < diamonds < hearts)';
+    case Rules.SUIT_ORDER_GAMMA:
+      return 'Suit order gamma [Hong Kong] (diamonds < clubs < hearts < spades)';
     case Rules.STRAIGHTS_WRAP_AROUND:
       return 'Straights wrap around';
     case Rules.STRAIGHTS_ALLOW_RUNS:

src/lib/big-two/Util.ts

@@ -8,9 +8,10 @@ import Rules from './Rules';
 
 export const CARD_STRING_SEPARATOR = ';'; // "2;clubs"
 
-const SUIT_RANKING_ORDERS = {
+export const SUIT_RANKING_ORDERS = {
   [Rules.SUIT_ORDER_ALPHA]: ['clubs', 'diamonds', 'hearts', 'spades'],
   [Rules.SUIT_ORDER_BETA]: ['spades', 'clubs', 'diamonds', 'hearts'],
+  [Rules.SUIT_ORDER_GAMMA]: ['diamonds', 'clubs', 'hearts', 'spades'],
 };
 
 const RANK_ABBR_TO_NAME: { [key: string]: string } = {
@@ -55,7 +56,9 @@ class Util {
     const suit = card.suit.name;
     if (this.rules & Rules.SUIT_ORDER_ALPHA)
       return SUIT_RANKING_ORDERS[Rules.SUIT_ORDER_ALPHA].indexOf(suit);
-    else return SUIT_RANKING_ORDERS[Rules.SUIT_ORDER_BETA].indexOf(suit);
+    else if (this.rules & Rules.SUIT_ORDER_BETA)
+      return SUIT_RANKING_ORDERS[Rules.SUIT_ORDER_BETA].indexOf(suit);
+    else return SUIT_RANKING_ORDERS[Rules.SUIT_ORDER_GAMMA].indexOf(suit);
   }
 
   compare_cards(c1: Card, c2: Card) {

src/pages/index.tsx

@@ -122,9 +122,6 @@ export default function Home() {
         <Box>
           <NextLink href={'/game/singleplayer'} passHref>
             <Button colorScheme="blue" onClick={() => toast.closeAll()}>
-              <Text fontSize="sm" fontFamily="cursive" color="pink.100">
-                🎉NEW🎉
-              </Text>{' '}
               Singleplayer mode 🤖
             </Button>
           </NextLink>