all the files

.eslintrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+    extends: ['@remix-run/eslint-config', '@remix-run/eslint-config/node'],
+    rules: {
+        quotes: ['error', 'single'],
+        semi: ['error', 'never'],
+        'no-tabs': ['error', { allowIndentationTabs: false }],
+    },
+}

.gitignore

@@ -0,0 +1,16 @@
+/node_modules
+/.cache
+/netlify/functions/server/index.js
+/public/build
+/.netlify
+
+.env
+.env.live
+.env.local
+
+/app/styles/tailwind.css
+
+.DS_Store
+/.vscode
+
+trash/

.prettierignore

@@ -0,0 +1,12 @@
+node_modules
+
+/server/build
+/public/build
+preferences.arc
+sam.json
+sam.yaml
+.env
+
+/app/styles/tailwind.css
+
+/netlify/functions/server

.todo

@@ -0,0 +1,7 @@
+// TODO: 
+-[x] byt ut de sista matcherna mot att tippa vilka lag som kommer att vinna etc
+-[x] fixa till user bets
+-[x] spara bets fynkar ej
+-[x] ange namn vid reg
+-[ ] svårt med reset: https://github.com/arpitdalal/remix-supabase-auth/blob/main/app/routes/forgot-password.tsx 
+-[ ] markera med en bock de matcher som är färdigspelade

README.md

@@ -1,6 +1,7 @@
 [![Netlify Status](https://api.netlify.com/api/v1/badges/101397de-a069-4b09-8e45-18d1e8d2a2b4/deploy-status)](https://app.netlify.com/sites/kohlin/deploys)
 
 #vmtipset
+website: https://kohlin.info
 # poäng 
 
 | poäng | kategori      | maxpoäng |
@@ -66,4 +67,9 @@ select
 Unschedule:
 ```
 SELECT cron.unschedule('get-football-scores');
-```
+```
+
+
+
+
+

app/components/BetBox.jsx

@@ -0,0 +1,86 @@
+import { useMemo } from 'react'
+import { Item, Label, Table } from 'semantic-ui-react'
+import useMediaQuery from '~/utils/responsive'
+import { translate } from '~/utils/utils'
+
+
+const BetBox = ({ match, teams, disabled }) => {
+    const mobile = useMediaQuery('(max-width: 639px)')
+    const [bet] = match.bets
+    const { win, results, total } = useMemo(() => {
+        const win = bet?.win || 0
+        const results = bet?.results || 0
+        const total = win + results
+        return { win, results, total }
+    }, [bet])
+    const sida = {
+        home: 'Hemma',
+        away: 'Borta'
+    }
+    const Bet = ({ side }) => {
+        return (
+            <Item className="input-wrapper !text-white">
+                <Item.Content content={bet?.[`${side}_score`] ?? '✏️…'} />
+            </Item>
+        )
+    }
+    return (
+        <>
+            {mobile ? (
+                <Table.Row>
+                    <Table.Cell colSpan={3}>
+                        <div className='flex flex-col'>
+                            <small className='text-neutral-500 border-b-[1px] border-neutral-500 mb-1'>Match {match.order}</small>
+                            <div className='grid grid-auto-cols-2 gap-y-1'>
+                                <span className='text-sm w-24 text-neutral-300'>{translate(teams['home']?.name || sida['home'])}</span>
+                                <span className='text-sm text-white'>{bet?.home_score ?? '🤔'}</span>
+                                <span className='text-sm w-24 text-neutral-300'>{translate(teams['away']?.name || sida['away'])}</span>
+                                <span className='text-sm text-white'>{bet?.away_score ?? '🤔'}</span>
+                            </div>
+                        </div>
+                    </Table.Cell>
+                    <Table.Cell>
+                        <div className='flex flex-col'>
+                            <small className='text-neutral-500 border-b-[1px] border-neutral-500 mb-1'>Poäng</small>
+                            <div className='grid grid-auto-cols-2 gap-x-2  gap-y-1'>
+                                <span className='text-sm text-neutral-300'>Rätt lag:</span>
+                                <span className='text-sm text-white'>{win.toString()}</span>
+                                <span className='text-sm text-neutral-300'>Resultat:</span>
+                                <span className='text-sm text-white'>{results.toString()}</span>
+                            </div>
+                        </div>
+                    </Table.Cell>
+                    <Table.Cell>
+                        <div className='mt-4 flex justify-center items-center'>
+                            <span className={`text-2xl ${total === 7 && 'text-green-500'}`}>{`${total}`}</span><sub className='text-neutral-500 ml-1'>p</sub>
+                        </div>
+                    </Table.Cell>
+                </Table.Row>
+            )
+                :
+                (<Table.Row className='align-baseline'>
+                    <Table.Cell>
+                        <div className="flex items-center">
+                            <span className='mr-2 text-neutral-500'>{match.order}. </span>
+                            <span className="">{translate(teams['home']?.name) || sida['home']} {match.home_score != null && `(${match.home_score})`}</span>
+                            <span className='match-separator'>-</span>
+                            <span className="">{translate(teams['away']?.name) || sida['away']} {match.away_score && `(${match.away_score})`}</span>
+                        </div>
+                    </Table.Cell>
+                    <Table.Cell className='flex items-center'>
+                        <Bet side={'home'} />
+                        <div className='match-separator'>-</div>
+                        <Bet side={'away'} />
+                    </Table.Cell>
+                    <Table.Cell className='!text-center'>{win}</Table.Cell>
+                    <Table.Cell className='!text-center'>{results}</Table.Cell>
+                    <Table.Cell className='!text-center'>{total === 7 ? <Label circular color={'green'} size="mini">{total}</Label> : total}</Table.Cell>
+                </Table.Row>
+                )
+            }
+        </ >
+    )
+}
+
+export default BetBox
+

app/components/BetFinal.jsx

@@ -0,0 +1,77 @@
+import { useState } from 'react'
+import Select from 'react-select'
+import { Container, Item } from 'semantic-ui-react'
+import { useHasMounted, translateList } from '~/utils/utils'
+
+
+const BetFinal = ({ count, options, bets, title, keys, emitChange }) => {
+    // options: [ { value: 8601, label: 'Netherlands' }, { value: 8602, label: 'Sweden' } ]
+    // bets: {value: [ 764, 781 ],id: 1,user_id: '0a8bf37d-e093-4541-ba7d-403c2801b0d2',title: 'LAST_16'}
+    const [numSelected, setSelected] = useState({ count: (bets?.value?.length || 0), className: (bets?.value?.length || 0) !== count ? 'text-red-600' : 'text-green-600' })
+    const mounted = useHasMounted()
+    if (!mounted) {
+        return null
+    }
+    const titleMap = {
+        LAST_16: 'Åttondelsfinal',
+        QUARTER_FINALS: 'Kvartsfinal',
+        SEMI_FINALS: 'Semifinal',
+        FINAL: 'Final',
+        WINNER: 'Vinnare',
+        THIRD_PLACE: 'Bronsplatsen',
+        TOP_SCORER: 'Målskytt',
+    }
+    // if selected elements are less than count, set className to 'error'
+    const handleChange = (selected) => {
+        setSelected({ count: selected?.length || 0, className: (selected?.length || 0) !== count ? 'text-red-600' : 'text-green-600' })
+        emitChange()
+    }
+    const myBets = bets?.value?.map((bet) => ({
+        value: bet,
+        label: options.find((option) => option.value == bet).label
+    })) || []
+    return (
+        <Container className='pb-4'>
+            <Item className=''>
+                <Item.Header className='text-xl mb-2'>{titleMap[title]}</Item.Header>
+                <Item.Meta className={`${numSelected.className} mb-2`}>{numSelected.count} av {count} lag valda</Item.Meta>
+                <Item.Content>
+                    <Select
+                        instanceId={keys[0]}
+                        inputId={keys[1]}
+                        defaultValue={myBets}
+                        isMulti
+                        name={title}
+                        options={translateList(options)}
+                        className='basic-multi-select text-gray-700'
+                        classNamePrefix="react-select"
+                        onChange={handleChange}
+                        closeMenuOnSelect={false}
+                    />
+                </Item.Content>
+            </Item>
+        </Container>
+    )
+}
+
+export default BetFinal
+
+/**
+ Select
+    option: {
+        clearValue: () => void,
+        getStyles: (string, any) => {},
+        getValue: () => ValueType,
+        hasValue: boolean,
+        isMulti: boolean,
+        options: OptionsType,
+        selectOption: OptionType => void,
+        selectProps: any,
+        setValue: (ValueType, ActionTypes) => void,
+        emotion: any,
+        cx: (any, any) => string,   
+        defaultInputValue: string,
+        defaultValue
+        onChange: // passed as the second argument to `onChange` type ActionTypes = | 'clear' | 'create-option' | 'deselect-option' | 'pop-value' | 'remove-value' | 'select-option' | 'set-value'
+    }
+ */

app/components/BetFinalBox.jsx

@@ -0,0 +1,60 @@
+import { Label, Table } from 'semantic-ui-react'
+import { useHasMounted } from '~/utils/utils'
+
+
+const BetFinalBox = ({ finalBet, title }) => {
+    const mounted = useHasMounted()
+    if (!mounted) {
+        return null
+    }
+    const titleMap = {
+        LAST_16: 'Åttondelsfinal',
+        QUARTER_FINALS: 'Kvartsfinal',
+        SEMI_FINALS: 'Semifinal',
+        FINAL: 'Final',
+        WINNER: 'Vinnare',
+        THIRD_PLACE: 'Bronsplatsen',
+        TOP_SCORER: 'Målskytt',
+    }
+    return (
+        <Table.Row>
+            <Table.Cell colSpan={4}>
+                <div className=''>
+                    <h3 className='text-xl mb-2'>{titleMap[title]}</h3>
+                    <div>
+                        {finalBet.teams.map
+                            ? finalBet.teams.map((team) => (
+                                <Label size='small' color='black' key={team}>{team}</Label>
+                            ))
+                            : <span>vad? {typeof finalBet}</span>}
+                    </div>
+                </div>
+            </Table.Cell>
+            <Table.Cell className='!text-center'>
+                {finalBet.score}
+            </Table.Cell>
+        </Table.Row>
+    )
+}
+
+export default BetFinalBox
+
+/**
+ Select
+    option: {
+        clearValue: () => void,
+        getStyles: (string, any) => {},
+        getValue: () => ValueType,
+        hasValue: boolean,
+        isMulti: boolean,
+        options: OptionsType,
+        selectOption: OptionType => void,
+        selectProps: any,
+        setValue: (ValueType, ActionTypes) => void,
+        emotion: any,
+        cx: (any, any) => string,   
+        defaultInputValue: string,
+        defaultValue
+        onChange: // passed as the second argument to `onChange` type ActionTypes = | 'clear' | 'create-option' | 'deselect-option' | 'pop-value' | 'remove-value' | 'select-option' | 'set-value'
+    }
+ */