init

.gitignore

@@ -0,0 +1,21 @@
+.DS_Store
+
+db/*
+!db/.gitkeep
+
+!nginx
+nginx/*
+!nginx/nginx.conf
+
+!php
+php/*
+!php/php.ini
+
+sveltekit/node_modules
+sveltekit/build/
+sveltekit/.svelte-kit/
+sveltekit/package/
+
+.env
+.env.*
+!.env.example

README.md

@@ -0,0 +1,55 @@
+# Docker-compose LEMP
+## Inkluderar
+- nginx 
+- SvelteKit -> localhost
+- php -> /api/
+- mariadb -> mariadb
+- phpmyadmin -> localhost:8080
+- composer
+
+## HowTo
+
+### SvelteKit
+SvelteKit-projekt skapas i katalogen **sveltekit**
+```console
+cd sveltekit
+npm create svelte@latest .
+npm i
+```
+### API med php
+Backend skrivet i php skall ligga i
+
+    /www/public/api
+### Starta servern (containern) med
+    docker-compose up -d
+### Stoppa servern (containern) med
+    docker-compose down
+
+### Logga SvelteKit till terminalen
+Tyvärr loggas inte fel från Sveltekit till terminlalen.
+Öppna en ny terminal och skriv:
+
+````console
+docker logs -f <Namnet på node-containern>
+````
+### Serverns url
+    localhost
+### phpmyadmin
+    localhost:8080
+### Anslut till MariaDB med php
+
+````php
+<?php
+    // Definierar konstanter med användarinformation.
+    define ('DB_USER', 'userName'); // Användare i MariaDB
+    define ('DB_PASSWORD', '12345');
+    define ('DB_HOST', 'mariadb');
+    define ('DB_NAME', 'dbName');   // Databasen som anslutning skall ske till
+
+    // Skapar en anslutning till MariaDB och databasen dbName
+    $dsn = 'mysql:host=' . DB_HOST . ';dbname=' . DB_NAME . ';charset=utf8';
+    $db = new PDO($dsn, DB_USER, DB_PASSWORD);
+?> // Ej nödvändigt att avslut "ren" php med ?>
+````
+### ToDo
+    Stöd för https, TLS (ssl).

config/mysql/my.cnf

@@ -0,0 +1,208 @@
+# Copyright © 2020 Joel Paulsson, Noah Jarvis
+#
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU Affero General Public License as published by
+# the Free Software Foundation, either version 3 of the License, or
+# (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+# GNU Affero General Public License for more details.
+#
+# You should have received a copy of the GNU Affero General Public License
+# along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+# MariaDB database server configuration file.
+#
+# You can copy this file to one of:
+# - "/etc/mysql/my.cnf" to set global options,
+# - "~/.my.cnf" to set user-specific options.
+#
+# One can use all long options that the program supports.
+# Run program with --help to get a list of available options and with
+# --print-defaults to see which it w  ould actually understand and use.
+#
+# For explanations see
+# http://dev.mysql.com/doc/mysql/en/server-system-variables.html
+
+# This will be passed to all mysql clients
+# It has been reported that passwords should be enclosed with ticks/quotes
+# escpecially if they contain "#" chars...
+# Remember to edit /etc/mysql/debian.cnf when changing the socket location.
+[client]
+port            = 3306
+socket          = /var/run/mysqld/mysqld.sock
+default-character-set = utf8mb4
+
+# Here is entries for some specific programs
+# The following values assume you have at least 32M ram
+
+# This was formally known as [safe_mysqld]. Both versions are currently parsed.
+[mysqld_safe]
+socket          = /var/run/mysqld/mysqld.sock
+nice            = 0
+
+[mysqld]
+character-set-client-handshake = FALSE
+character-set-server = utf8mb4
+collation-server = utf8mb4_unicode_ci
+
+#
+# * Basic Settings
+#
+#user           = mysql
+pid-file        = /var/run/mysqld/mysqld.pid
+socket          = /var/run/mysqld/mysqld.sock
+port            = 3306
+basedir         = /usr
+datadir         = /var/lib/mysql
+tmpdir          = /tmp
+lc_messages_dir = /usr/share/mysql
+lc_messages     = en_US
+skip-external-locking
+#
+# Instead of skip-networking the default is now to listen only on
+# localhost which is more compatible and is not less secure.
+#bind-address           = 172.17.0.1
+#
+# * Fine Tuning
+#
+max_connections         = 100
+connect_timeout         = 5
+wait_timeout            = 600
+max_allowed_packet      = 16M
+thread_cache_size       = 128
+sort_buffer_size        = 4M
+bulk_insert_buffer_size = 16M
+tmp_table_size          = 32M
+max_heap_table_size     = 32M
+#
+# * MyISAM
+#
+# This replaces the startup script and checks MyISAM tables if needed
+# the first time they are touched. On error, make copy and try a repair.
+myisam_recover_options = BACKUP
+key_buffer_size         = 128M
+#open-files-limit       = 2000
+table_open_cache        = 400
+myisam_sort_buffer_size = 512M
+concurrent_insert       = 2
+read_buffer_size        = 2M
+read_rnd_buffer_size    = 1M
+#
+# * Query Cache Configuration
+#
+# Cache only tiny result sets, so we can fit more in the query cache.
+query_cache_limit               = 128K
+query_cache_size                = 64M
+# for more write intensive setups, set to DEMAND or OFF
+#query_cache_type               = DEMAND
+#
+# * Logging and Replication
+#
+# Both location gets rotated by the cronjob.
+# Be aware that this log type is a performance killer.
+# As of 5.1 you can enable the log at runtime!
+#general_log_file        = /var/log/mysql/mysql.log
+#general_log             = 1
+#
+# Error logging goes to syslog due to /etc/mysql/conf.d/mysqld_safe_syslog.cnf.
+#
+# we do want to know about network errors and such
+#log_warnings           = 2
+#
+# Enable the slow query log to see queries with especially long duration
+#slow_query_log[={0|1}]
+slow_query_log_file     = /var/log/mysql/mariadb-slow.log
+long_query_time = 10
+#log_slow_rate_limit    = 1000
+#log_slow_verbosity     = query_plan
+
+#log-queries-not-using-indexes
+#log_slow_admin_statements
+#
+# The following can be used as easy to replay backup logs or for replication.
+# note: if you are setting up a replication slave, see README.Debian about
+#       other settings you may need to change.
+#server-id              = 1
+#report_host            = master1
+#auto_increment_increment = 2
+#auto_increment_offset  = 1
+#log_bin                        = /var/log/mysql/mariadb-bin
+#log_bin_index          = /var/log/mysql/mariadb-bin.index
+# not fab for performance, but safer
+#sync_binlog            = 1
+expire_logs_days        = 10
+max_binlog_size         = 100M
+# slaves
+#relay_log              = /var/log/mysql/relay-bin
+#relay_log_index        = /var/log/mysql/relay-bin.index
+#relay_log_info_file    = /var/log/mysql/relay-bin.info
+#log_slave_updates
+#read_only
+#
+# If applications support it, this stricter sql_mode prevents some
+# mistakes like inserting invalid dates etc.
+#sql_mode               = NO_ENGINE_SUBSTITUTION,TRADITIONAL
+#
+# * InnoDB
+#
+# InnoDB is enabled by default with a 10MB datafile in /var/lib/mysql/.
+# Read the manual for more InnoDB related options. There are many!
+default_storage_engine  = InnoDB
+innodb_buffer_pool_size = 256M
+innodb_log_buffer_size  = 8M
+innodb_file_per_table   = 1
+innodb_open_files       = 400
+innodb_io_capacity      = 400
+innodb_flush_method     = O_DIRECT
+#
+# * Security Features
+#
+# Read the manual, too, if you want chroot!
+# chroot = /var/lib/mysql/
+#
+# For generating SSL certificates I recommend the OpenSSL GUI "tinyca".
+#
+# ssl-ca=/etc/mysql/cacert.pem
+# ssl-cert=/etc/mysql/server-cert.pem
+# ssl-key=/etc/mysql/server-key.pem
+
+#
+# * Galera-related settings
+#
+[galera]
+# Mandatory settings
+#wsrep_on=ON
+#wsrep_provider=
+#wsrep_cluster_address=
+#binlog_format=row
+#default_storage_engine=InnoDB
+#innodb_autoinc_lock_mode=2
+#
+# Allow server to accept connections on all interfaces.
+#
+#bind-address=0.0.0.0
+#
+# Optional setting
+#wsrep_slave_threads=1
+#innodb_flush_log_at_trx_commit=0
+
+[mysqldump]
+quick
+quote-names
+max_allowed_packet      = 16M
+
+[mysql]
+default-character-set = utf8mb4
+no-auto-rehash # faster start of mysql but no tab completion
+
+[isamchk]
+key_buffer              = 16M
+
+#
+# * IMPORTANT: Additional settings that can override those from this file!
+#   The files must end with '.cnf', otherwise they'll be ignored.
+#
+!includedir /etc/mysql/conf.d/

config/nginx/nginx.conf

@@ -0,0 +1,71 @@
+events {}
+
+http {
+  server {
+    server_name egytalk.se;
+    listen 80;
+
+    root /var/www/public;
+    index index.php index.html index.htm;
+      
+    include /etc/nginx/mime.types;
+    default_type application/octet-stream;
+
+    location / {
+      proxy_pass http://node;
+      proxy_set_header X-Real-IP $remote_addr;
+      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+      proxy_set_header X-NginX-Proxy true;
+      proxy_set_header X-Forwarded-Proto $scheme;
+
+      proxy_redirect off;
+
+      proxy_http_version 1.1;
+      proxy_set_header Host $host;
+      proxy_set_header Upgrade $http_upgrade;
+      proxy_set_header Connection "upgrade";
+    }
+
+    location /api {
+      try_files $uri $uri/ /index.php?$query_string;
+    }
+
+    location ~ \.php$ {
+      try_files $uri = 404;
+      fastcgi_split_path_info ^(.+\.php)(/.+)$;
+      fastcgi_pass php:9000;
+      fastcgi_index index.php;
+      include fastcgi_params;
+      fastcgi_param REQUEST_URI $request_uri;
+      fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
+      fastcgi_param PATH_INFO $fastcgi_path_info;
+    }
+
+    error_log /var/log/nginx/error.log;
+    access_log /var/log/nginx/access.log;
+  }
+
+  server {
+    server_name api.egytalk.se;
+    listen 80;
+    root /var/www/public;
+    index index.php index.html index.htm;
+    
+    include /etc/nginx/mime.types;
+    default_type application/octet-stream;
+
+    # PHP-FPM 
+    location ~ \.php$ {
+      try_files $uri = 404;
+      fastcgi_split_path_info ^(.+\.php)(/.+)$;
+      fastcgi_pass php:9000;
+      fastcgi_index index.php;
+      include fastcgi_params;
+      fastcgi_param REQUEST_URI $request_uri;
+      fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
+      fastcgi_param PATH_INFO $fastcgi_path_info;
+    }
+
+    error_log /var/log/nginx/error.log;
+  }
+}

db/.gitkeep

@@ -0,0 +1 @@
+# För att behålla katalog

docker-compose.yml

@@ -0,0 +1,71 @@
+networks:
+  network:
+    driver: bridge
+    ipam:
+      config:
+        - subnet: 10.5.0.0/16
+          gateway: 10.5.0.1
+services:
+  nginx:
+    image: nginx:latest
+    container_name: nginx
+    hostname: egytalk.se
+    restart: always
+    ports:
+      - 80:80
+    volumes:
+      - ./www/public:/var/www/public
+      - ./config/nginx/nginx.conf:/etc/nginx/nginx.conf
+      - ./config/ssl:/etc/ssl
+    extra_hosts:
+      - "api.egytalk.se: 127.0.0.1"
+      - "egyweb.se: 127.0.0.1"
+    networks:
+      network:
+        ipv4_address: 10.5.0.5
+
+  mariadb:
+    image: mariadb:latest
+    container_name: mariadb
+    restart: always
+    ports:
+      - 3306:3306
+    volumes:
+      - ./db:/var/lib/mysql
+      - ./config/mysql/my.cnf:/etc/mysql/my.cnf
+    environment:
+      - MYSQL_ROOT_PASSWORD=12345
+      - MYSQL_DATABASE=db
+      - MYSQL_USER=pma
+      - MYSQL_PASSWORD=12345
+    networks:
+      network:
+        ipv4_address: 10.5.0.4
+
+  php:
+    build: ./docker/php
+    container_name: php
+    working_dir: /var/www
+    volumes:
+      - ./www:/var/www/
+      - ./config/php/php.ini:/usr/local/etc/php/php.ini
+    networks:
+      network:
+        ipv4_address: 10.5.0.3
+
+  node:
+    image: node:latest
+    container_name: node
+    working_dir: /sveltekit
+    command: "npm run dev -- --host 0.0.0.0 --port 80"
+    volumes:
+      - ./sveltekit:/sveltekit
+    networks:
+      network:
+        ipv4_address: 10.5.0.2
+    extra_hosts:
+      - "api.egytalk.se: 10.5.0.5"
+      - "egytalk.se: 127.0.0.1"
+    expose: 
+      - 80
+   

docker/php/Dockerfile

@@ -0,0 +1,48 @@
+FROM php:fpm
+
+WORKDIR /var/www
+
+RUN apt-get --allow-releaseinfo-change update && apt-get upgrade -y \
+    && apt-get install -y \
+    g++ \
+    libbz2-dev \
+    libc-client-dev \
+    libcurl4-gnutls-dev \
+    libedit-dev \
+    libfreetype6-dev \
+    libicu-dev \
+    libjpeg62-turbo-dev \
+    libkrb5-dev \
+    libmcrypt-dev \
+    libpng-dev \
+    libsqlite3-dev \
+    libzip-dev \
+    wget \
+    unzip \
+    zlib1g-dev \
+    && docker-php-ext-install -j$(nproc) \
+    mysqli \
+    pdo_mysql \
+    sockets \
+    && docker-php-ext-configure gd --with-freetype --with-jpeg \
+    && docker-php-ext-install -j$(nproc) gd \
+    && docker-php-ext-configure zip \
+    && docker-php-ext-install zip \
+    && docker-php-source delete \
+    && apt-get remove -y g++ wget \
+    && apt-get autoremove --purge -y && apt-get autoclean -y && apt-get clean -y \
+    && rm -rf /var/lib/apt/lists/* \
+    && rm -rf /tmp/* /var/tmp/*
+
+# Add user 
+RUN groupadd -g 1000 www
+RUN useradd -u 1000 -ms /bin/bash -g www www
+
+# Copy existing application directory contents
+COPY ./ /var/www
+
+# Copy existing application directory permissions
+COPY --chown=www:www ./ /var/www
+
+# Change current user to www
+USER www

sveltekit/.gitignore

@@ -0,0 +1,12 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+.vercel
+.output
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

sveltekit/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

sveltekit/README.md

@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

sveltekit/package.json

@@ -0,0 +1,18 @@
+{
+	"name": "sveltekit",
+	"version": "0.0.1",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview"
+	},
+	"devDependencies": {
+		"@fontsource/fira-mono": "^4.5.10",
+		"@neoconfetti/svelte": "^1.0.0",
+		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/kit": "^1.5.0",
+		"svelte": "^3.54.0",
+		"vite": "^4.0.0"
+	},
+	"type": "module"
+}

sveltekit/src/app.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

sveltekit/src/lib/images/github.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-3 -3 30 30">
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5229 6.47715 22 12 22C17.5229 22 22 17.5229 22 12C22 6.47715 17.5229 2 12 2ZM0 12C0 5.3726 5.3726 0 12 0C18.6274 0 24 5.3726 24 12C24 18.6274 18.6274 24 12 24C5.3726 24 0 18.6274 0 12Z"
+		fill="rgba(0,0,0,0.7)"
+		stroke="none"
+	/>
+	<path
+		fill-rule="evenodd"
+		clip-rule="evenodd"
+		d="M9.59162 22.7357C9.49492 22.6109 9.49492 21.4986 9.59162 19.399C8.55572 19.4347 7.90122 19.3628 7.62812 19.1833C7.21852 18.9139 6.80842 18.0833 6.44457 17.4979C6.08072 16.9125 5.27312 16.8199 4.94702 16.6891C4.62091 16.5582 4.53905 16.0247 5.84562 16.4282C7.15222 16.8316 7.21592 17.9303 7.62812 18.1872C8.04032 18.4441 9.02572 18.3317 9.47242 18.1259C9.91907 17.9201 9.88622 17.1538 9.96587 16.8503C10.0666 16.5669 9.71162 16.5041 9.70382 16.5018C9.26777 16.5018 6.97697 16.0036 6.34772 13.7852C5.71852 11.5669 6.52907 10.117 6.96147 9.49369C7.24972 9.07814 7.22422 8.19254 6.88497 6.83679C8.11677 6.67939 9.06732 7.06709 9.73672 7.99999C9.73737 8.00534 10.6143 7.47854 12.0001 7.47854C13.386 7.47854 13.8777 7.90764 14.2571 7.99999C14.6365 8.09234 14.94 6.36699 17.2834 6.83679C16.7942 7.79839 16.3844 8.99999 16.6972 9.49369C17.0099 9.98739 18.2372 11.5573 17.4833 13.7852C16.9807 15.2706 15.9927 16.1761 14.5192 16.5018C14.3502 16.5557 14.2658 16.6427 14.2658 16.7627C14.2658 16.9427 14.4942 16.9624 14.8233 17.8058C15.0426 18.368 15.0585 19.9739 14.8708 22.6234C14.3953 22.7445 14.0254 22.8257 13.7611 22.8673C13.2924 22.9409 12.7835 22.9822 12.2834 22.9982C11.7834 23.0141 11.6098 23.0123 10.9185 22.948C10.4577 22.9051 10.0154 22.8343 9.59162 22.7357Z"
+		fill="rgba(0,0,0,0.7)"
+		stroke="none"
+	/>
+</svg>

sveltekit/src/lib/images/svelte-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.1566,22.8189c-10.4-14.8851-30.94-19.2971-45.7914-9.8348L22.2825,29.6078A29.9234,29.9234,0,0,0,8.7639,49.6506a31.5136,31.5136,0,0,0,3.1076,20.2318A30.0061,30.0061,0,0,0,7.3953,81.0653a31.8886,31.8886,0,0,0,5.4473,24.1157c10.4022,14.8865,30.9423,19.2966,45.7914,9.8348L84.7167,98.3921A29.9177,29.9177,0,0,0,98.2353,78.3493,31.5263,31.5263,0,0,0,95.13,58.117a30,30,0,0,0,4.4743-11.1824,31.88,31.88,0,0,0-5.4473-24.1157" style="fill:#ff3e00"/><path d="M45.8171,106.5815A20.7182,20.7182,0,0,1,23.58,98.3389a19.1739,19.1739,0,0,1-3.2766-14.5025,18.1886,18.1886,0,0,1,.6233-2.4357l.4912-1.4978,1.3363.9815a33.6443,33.6443,0,0,0,10.203,5.0978l.9694.2941-.0893.9675a5.8474,5.8474,0,0,0,1.052,3.8781,6.2389,6.2389,0,0,0,6.6952,2.485,5.7449,5.7449,0,0,0,1.6021-.7041L69.27,76.281a5.4306,5.4306,0,0,0,2.4506-3.631,5.7948,5.7948,0,0,0-.9875-4.3712,6.2436,6.2436,0,0,0-6.6978-2.4864,5.7427,5.7427,0,0,0-1.6.7036l-9.9532,6.3449a19.0329,19.0329,0,0,1-5.2965,2.3259,20.7181,20.7181,0,0,1-22.2368-8.2427,19.1725,19.1725,0,0,1-3.2766-14.5024,17.9885,17.9885,0,0,1,8.13-12.0513L55.8833,23.7472a19.0038,19.0038,0,0,1,5.3-2.3287A20.7182,20.7182,0,0,1,83.42,29.6611a19.1739,19.1739,0,0,1,3.2766,14.5025,18.4,18.4,0,0,1-.6233,2.4357l-.4912,1.4978-1.3356-.98a33.6175,33.6175,0,0,0-10.2037-5.1l-.9694-.2942.0893-.9675a5.8588,5.8588,0,0,0-1.052-3.878,6.2389,6.2389,0,0,0-6.6952-2.485,5.7449,5.7449,0,0,0-1.6021.7041L37.73,51.719a5.4218,5.4218,0,0,0-2.4487,3.63,5.7862,5.7862,0,0,0,.9856,4.3717,6.2437,6.2437,0,0,0,6.6978,2.4864,5.7652,5.7652,0,0,0,1.602-.7041l9.9519-6.3425a18.978,18.978,0,0,1,5.2959-2.3278,20.7181,20.7181,0,0,1,22.2368,8.2427,19.1725,19.1725,0,0,1,3.2766,14.5024,17.9977,17.9977,0,0,1-8.13,12.0532L51.1167,104.2528a19.0038,19.0038,0,0,1-5.3,2.3287" style="fill:#fff"/></svg>

sveltekit/src/routes/+layout.svelte

@@ -0,0 +1,53 @@
+<script>
+	import Header from './Header.svelte';
+	import './styles.css';
+</script>
+
+<div class="app">
+	<Header />
+
+	<main>
+		<slot />
+	</main>
+
+	<footer>
+		<p>visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to learn SvelteKit</p>
+	</footer>
+</div>
+
+<style>
+	.app {
+		display: flex;
+		flex-direction: column;
+		min-height: 100vh;
+	}
+
+	main {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		padding: 1rem;
+		width: 100%;
+		max-width: 64rem;
+		margin: 0 auto;
+		box-sizing: border-box;
+	}
+
+	footer {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		padding: 12px;
+	}
+
+	footer a {
+		font-weight: bold;
+	}
+
+	@media (min-width: 480px) {
+		footer {
+			padding: 12px 0;
+		}
+	}
+</style>

sveltekit/src/routes/+page.js

@@ -0,0 +1,3 @@
+// since there's no dynamic data here, we can prerender
+// it so that it gets served as a static asset in production
+export const prerender = true;

sveltekit/src/routes/+page.svelte

@@ -0,0 +1,59 @@
+<script>
+	import Counter from './Counter.svelte';
+	import welcome from '$lib/images/svelte-welcome.webp';
+	import welcome_fallback from '$lib/images/svelte-welcome.png';
+</script>
+
+<svelte:head>
+	<title>Home</title>
+	<meta name="description" content="Svelte demo app" />
+</svelte:head>
+
+<section>
+	<h1>
+		<span class="welcome">
+			<picture>
+				<source srcset={welcome} type="image/webp" />
+				<img src={welcome_fallback} alt="Welcome" />
+			</picture>
+		</span>
+
+		to your new<br />SvelteKit app
+	</h1>
+
+	<h2>
+		try editing <strong>src/routes/+page.svelte</strong>
+	</h2>
+
+	<Counter />
+</section>
+
+<style>
+	section {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		flex: 0.6;
+	}
+
+	h1 {
+		width: 100%;
+	}
+
+	.welcome {
+		display: block;
+		position: relative;
+		width: 100%;
+		height: 0;
+		padding: 0 0 calc(100% * 495 / 2048) 0;
+	}
+
+	.welcome img {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		top: 0;
+		display: block;
+	}
+</style>

sveltekit/src/routes/Counter.svelte

@@ -0,0 +1,102 @@
+<script>
+	import { spring } from 'svelte/motion';
+
+	let count = 0;
+
+	const displayed_count = spring();
+	$: displayed_count.set(count);
+	$: offset = modulo($displayed_count, 1);
+
+	function modulo(n, m) {
+		// handle negative numbers
+		return ((n % m) + m) % m;
+	}
+</script>
+
+<div class="counter">
+	<button on:click={() => (count -= 1)} aria-label="Decrease the counter by one">
+		<svg aria-hidden="true" viewBox="0 0 1 1">
+			<path d="M0,0.5 L1,0.5" />
+		</svg>
+	</button>
+
+	<div class="counter-viewport">
+		<div class="counter-digits" style="transform: translate(0, {100 * offset}%)">
+			<strong class="hidden" aria-hidden="true">{Math.floor($displayed_count + 1)}</strong>
+			<strong>{Math.floor($displayed_count)}</strong>
+		</div>
+	</div>
+
+	<button on:click={() => (count += 1)} aria-label="Increase the counter by one">
+		<svg aria-hidden="true" viewBox="0 0 1 1">
+			<path d="M0,0.5 L1,0.5 M0.5,0 L0.5,1" />
+		</svg>
+	</button>
+</div>
+
+<style>
+	.counter {
+		display: flex;
+		border-top: 1px solid rgba(0, 0, 0, 0.1);
+		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+		margin: 1rem 0;
+	}
+
+	.counter button {
+		width: 2em;
+		padding: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: 0;
+		background-color: transparent;
+		touch-action: manipulation;
+		font-size: 2rem;
+	}
+
+	.counter button:hover {
+		background-color: var(--color-bg-1);
+	}
+
+	svg {
+		width: 25%;
+		height: 25%;
+	}
+
+	path {
+		vector-effect: non-scaling-stroke;
+		stroke-width: 2px;
+		stroke: #444;
+	}
+
+	.counter-viewport {
+		width: 8em;
+		height: 4em;
+		overflow: hidden;
+		text-align: center;
+		position: relative;
+	}
+
+	.counter-viewport strong {
+		position: absolute;
+		display: flex;
+		width: 100%;
+		height: 100%;
+		font-weight: 400;
+		color: var(--color-theme-1);
+		font-size: 4rem;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.counter-digits {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+	}
+
+	.hidden {
+		top: -100%;
+		user-select: none;
+	}
+</style>

sveltekit/src/routes/Header.svelte

@@ -0,0 +1,129 @@
+<script>
+	import { page } from '$app/stores';
+	import logo from '$lib/images/svelte-logo.svg';
+	import github from '$lib/images/github.svg';
+</script>
+
+<header>
+	<div class="corner">
+		<a href="https://kit.svelte.dev">
+			<img src={logo} alt="SvelteKit" />
+		</a>
+	</div>
+
+	<nav>
+		<svg viewBox="0 0 2 3" aria-hidden="true">
+			<path d="M0,0 L1,2 C1.5,3 1.5,3 2,3 L2,0 Z" />
+		</svg>
+		<ul>
+			<li aria-current={$page.url.pathname === '/' ? 'page' : undefined}>
+				<a href="/">Home</a>
+			</li>
+			<li aria-current={$page.url.pathname === '/about' ? 'page' : undefined}>
+				<a href="/about">About</a>
+			</li>
+			<li aria-current={$page.url.pathname.startsWith('/sverdle') ? 'page' : undefined}>
+				<a href="/sverdle">Sverdle</a>
+			</li>
+		</ul>
+		<svg viewBox="0 0 2 3" aria-hidden="true">
+			<path d="M0,0 L0,3 C0.5,3 0.5,3 1,2 L2,0 Z" />
+		</svg>
+	</nav>
+
+	<div class="corner">
+		<a href="https://github.com/sveltejs/kit">
+			<img src={github} alt="GitHub" />
+		</a>
+	</div>
+</header>
+
+<style>
+	header {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.corner {
+		width: 3em;
+		height: 3em;
+	}
+
+	.corner a {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+	}
+
+	.corner img {
+		width: 2em;
+		height: 2em;
+		object-fit: contain;
+	}
+
+	nav {
+		display: flex;
+		justify-content: center;
+		--background: rgba(255, 255, 255, 0.7);
+	}
+
+	svg {
+		width: 2em;
+		height: 3em;
+		display: block;
+	}
+
+	path {
+		fill: var(--background);
+	}
+
+	ul {
+		position: relative;
+		padding: 0;
+		margin: 0;
+		height: 3em;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		list-style: none;
+		background: var(--background);
+		background-size: contain;
+	}
+
+	li {
+		position: relative;
+		height: 100%;
+	}
+
+	li[aria-current='page']::before {
+		--size: 6px;
+		content: '';
+		width: 0;
+		height: 0;
+		position: absolute;
+		top: 0;
+		left: calc(50% - var(--size));
+		border: var(--size) solid transparent;
+		border-top: var(--size) solid var(--color-theme-1);
+	}
+
+	nav a {
+		display: flex;
+		height: 100%;
+		align-items: center;
+		padding: 0 0.5rem;
+		color: var(--color-text);
+		font-weight: 700;
+		font-size: 0.8rem;
+		text-transform: uppercase;
+		letter-spacing: 0.1em;
+		text-decoration: none;
+		transition: color 0.2s linear;
+	}
+
+	a:hover {
+		color: var(--color-theme-1);
+	}
+</style>

sveltekit/src/routes/about/+page.js

@@ -0,0 +1,9 @@
+import { dev } from '$app/environment';
+
+// we don't need any JS on this page, though we'll load
+// it in dev so that we get hot module replacement
+export const csr = dev;
+
+// since there's no dynamic data here, we can prerender
+// it so that it gets served as a static asset in production
+export const prerender = true;

sveltekit/src/routes/about/+page.svelte

@@ -0,0 +1,26 @@
+<svelte:head>
+	<title>About</title>
+	<meta name="description" content="About this app" />
+</svelte:head>
+
+<div class="text-column">
+	<h1>About this app</h1>
+
+	<p>
+		This is a <a href="https://kit.svelte.dev">SvelteKit</a> app. You can make your own by typing the
+		following into your command line and following the prompts:
+	</p>
+
+	<pre>npm create svelte@latest</pre>
+
+	<p>
+		The page you're looking at is purely static HTML, with no client-side interactivity needed.
+		Because of that, we don't need to load any JavaScript. Try viewing the page's source, or opening
+		the devtools network panel and reloading.
+	</p>
+
+	<p>
+		The <a href="/sverdle">Sverdle</a> page illustrates SvelteKit's data loading and form handling. Try
+		using it with JavaScript disabled!
+	</p>
+</div>

sveltekit/src/routes/formtest/+page.server.js

@@ -0,0 +1,24 @@
+export async function load({ cookies, fetch }) {
+   cookies.set("Sveltform", "testar");
+   
+   
+   const response = await fetch("http://api.egytalk.se/api/get.php", {
+      credentials: "include"
+   });
+   const result =  await response.json();
+   //let c = response.cookies.get("PHPSESSID");
+   console.log(response);
+   //result['cookie'] = c
+   return result;
+}
+
+export const actions = {
+
+   default: async ({ request, cookies }) => {
+      const data = await request.formData();
+      let name = data.get("txt");
+
+      cookies.set('test', "Kalle");
+      return { success: true, name }
+   }
+}

sveltekit/src/routes/formtest/+page.svelte

@@ -0,0 +1,23 @@
+<script>
+   import { enhance } from '$app/forms';
+    import { loop_guard } from 'svelte/internal';
+   export let form;
+   export let data;
+
+   async function get(){
+      //const response = await fetch("api/get.php");
+      //return await response.json();
+   }
+</script>
+{#await get() then info}
+   <p>mobil: {info?.phone}</p>
+{/await}
+<p>{form?.success}</p>
+<p>{form?.name}</p>
+<p>load(): {data?.phone}, cookie: {data?.cookie}</p>
+<form
+	method="POST"
+>
+   <input type="text" name="txt">
+   <button>Klick</button>
+</form>

sveltekit/src/routes/styles.css

@@ -0,0 +1,107 @@
+@import '@fontsource/fira-mono';
+
+:root {
+	--font-body: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+		Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+	--font-mono: 'Fira Mono', monospace;
+	--color-bg-0: rgb(202, 216, 228);
+	--color-bg-1: hsl(209, 36%, 86%);
+	--color-bg-2: hsl(224, 44%, 95%);
+	--color-theme-1: #ff3e00;
+	--color-theme-2: #4075a6;
+	--color-text: rgba(0, 0, 0, 0.7);
+	--column-width: 42rem;
+	--column-margin-top: 4rem;
+	font-family: var(--font-body);
+	color: var(--color-text);
+}
+
+body {
+	min-height: 100vh;
+	margin: 0;
+	background-attachment: fixed;
+	background-color: var(--color-bg-1);
+	background-size: 100vw 100vh;
+	background-image: radial-gradient(
+			50% 50% at 50% 50%,
+			rgba(255, 255, 255, 0.75) 0%,
+			rgba(255, 255, 255, 0) 100%
+		),
+		linear-gradient(180deg, var(--color-bg-0) 0%, var(--color-bg-1) 15%, var(--color-bg-2) 50%);
+}
+
+h1,
+h2,
+p {
+	font-weight: 400;
+}
+
+p {
+	line-height: 1.5;
+}
+
+a {
+	color: var(--color-theme-1);
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+h1 {
+	font-size: 2rem;
+	text-align: center;
+}
+
+h2 {
+	font-size: 1rem;
+}
+
+pre {
+	font-size: 16px;
+	font-family: var(--font-mono);
+	background-color: rgba(255, 255, 255, 0.45);
+	border-radius: 3px;
+	box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);
+	padding: 0.5em;
+	overflow-x: auto;
+	color: var(--color-text);
+}
+
+.text-column {
+	display: flex;
+	max-width: 48rem;
+	flex: 0.6;
+	flex-direction: column;
+	justify-content: center;
+	margin: 0 auto;
+}
+
+input,
+button {
+	font-size: inherit;
+	font-family: inherit;
+}
+
+button:focus:not(:focus-visible) {
+	outline: none;
+}
+
+@media (min-width: 720px) {
+	h1 {
+		font-size: 2.4rem;
+	}
+}
+
+.visually-hidden {
+	border: 0;
+	clip: rect(0 0 0 0);
+	height: auto;
+	margin: 0;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px;
+	white-space: nowrap;
+}

sveltekit/src/routes/sverdle/+page.server.js

@@ -0,0 +1,68 @@
+import { fail } from '@sveltejs/kit';
+import { Game } from './game';
+
+export const load = ({ cookies }) => {
+	const game = new Game(cookies.get('sverdle'));
+
+	return {
+		/**
+		 * The player's guessed words so far
+		 */
+		guesses: game.guesses,
+
+		/**
+		 * An array of strings like '__x_c' corresponding to the guesses, where 'x' means
+		 * an exact match, and 'c' means a close match (right letter, wrong place)
+		 */
+		answers: game.answers,
+
+		/**
+		 * The correct answer, revealed if the game is over
+		 */
+		answer: game.answers.length >= 6 ? game.answer : null
+	};
+};
+
+export const actions = {
+	/**
+	 * Modify game state in reaction to a keypress. If client-side JavaScript
+	 * is available, this will happen in the browser instead of here
+	 */
+	update: async ({ request, cookies }) => {
+		const game = new Game(cookies.get('sverdle'));
+
+		const data = await request.formData();
+		const key = data.get('key');
+
+		const i = game.answers.length;
+
+		if (key === 'backspace') {
+			game.guesses[i] = game.guesses[i].slice(0, -1);
+		} else {
+			game.guesses[i] += key;
+		}
+
+		cookies.set('sverdle', game.toString());
+	},
+
+	/**
+	 * Modify game state in reaction to a guessed word. This logic always runs on
+	 * the server, so that people can't cheat by peeking at the JavaScript
+	 */
+	enter: async ({ request, cookies }) => {
+		const game = new Game(cookies.get('sverdle'));
+
+		const data = await request.formData();
+		const guess = (data.getAll('guess'));
+
+		if (!game.enter(guess)) {
+			return fail(400, { badGuess: true });
+		}
+
+		cookies.set('sverdle', game.toString());
+	},
+
+	restart: async ({ cookies }) => {
+		cookies.delete('sverdle');
+	}
+};

sveltekit/src/routes/sverdle/+page.svelte

@@ -0,0 +1,404 @@
+<script>
+	import { confetti } from '@neoconfetti/svelte';
+	import { enhance } from '$app/forms';
+
+	import { reduced_motion } from './reduced-motion';
+
+	export let data;
+
+	export let form;
+
+	/** Whether or not the user has won */
+	$: won = data.answers.at(-1) === 'xxxxx';
+
+	/** The index of the current guess */
+	$: i = won ? -1 : data.answers.length;
+
+	/** Whether the current guess can be submitted */
+	$: submittable = data.guesses[i]?.length === 5;
+
+	/**
+	 * A map of classnames for all letters that have been guessed,
+	 * used for styling the keyboard
+	 */
+	let classnames;
+
+	/**
+	 * A map of descriptions for all letters that have been guessed,
+	 * used for adding text for assistive technology (e.g. screen readers)
+	 */
+	let description;
+
+	$: {
+		classnames = {};
+		description = {};
+
+		data.answers.forEach((answer, i) => {
+			const guess = data.guesses[i];
+
+			for (let i = 0; i < 5; i += 1) {
+				const letter = guess[i];
+
+				if (answer[i] === 'x') {
+					classnames[letter] = 'exact';
+					description[letter] = 'correct';
+				} else if (!classnames[letter]) {
+					classnames[letter] = answer[i] === 'c' ? 'close' : 'missing';
+					description[letter] = answer[i] === 'c' ? 'present' : 'absent';
+				}
+			}
+		});
+	}
+
+	/**
+	 * Modify the game state without making a trip to the server,
+	 * if client-side JavaScript is enabled
+	 */
+	function update(event) {
+		const guess = data.guesses[i];
+		const key = (event.target).getAttribute('data-key');
+
+		if (key === 'backspace') {
+			data.guesses[i] = guess.slice(0, -1);
+			if (form?.badGuess) form.badGuess = false;
+		} else if (guess.length < 5) {
+			data.guesses[i] += key;
+		}
+	}
+
+	/**
+	 * Trigger form logic in response to a keydown event, so that
+	 * desktop users can use the keyboard to play the game
+	 */
+	function keydown(event) {
+		if (event.metaKey) return;
+
+		document
+			.querySelector(`[data-key="${event.key}" i]`)
+			?.dispatchEvent(new MouseEvent('click', { cancelable: true }));
+	}
+</script>
+
+<svelte:window on:keydown={keydown} />
+
+<svelte:head>
+	<title>Sverdle</title>
+	<meta name="description" content="A Wordle clone written in SvelteKit" />
+</svelte:head>
+
+<h1 class="visually-hidden">Sverdle</h1>
+
+<form
+	method="POST"
+	action="?/enter"
+	use:enhance={() => {
+		// prevent default callback from resetting the form
+		return ({ update }) => {
+			update({ reset: false });
+		};
+	}}
+>
+	<a class="how-to-play" href="/sverdle/how-to-play">How to play</a>
+
+	<div class="grid" class:playing={!won} class:bad-guess={form?.badGuess}>
+		{#each Array(6) as _, row}
+			{@const current = row === i}
+			<h2 class="visually-hidden">Row {row + 1}</h2>
+			<div class="row" class:current>
+				{#each Array(5) as _, column}
+					{@const answer = data.answers[row]?.[column]}
+					{@const value = data.guesses[row]?.[column] ?? ''}
+					{@const selected = current && column === data.guesses[row].length}
+					{@const exact = answer === 'x'}
+					{@const close = answer === 'c'}
+					{@const missing = answer === '_'}
+					<div class="letter" class:exact class:close class:missing class:selected>
+						{value}
+						<span class="visually-hidden">
+							{#if exact}
+								(correct)
+							{:else if close}
+								(present)
+							{:else if missing}
+								(absent)
+							{:else}
+								empty
+							{/if}
+						</span>
+						<input name="guess" disabled={!current} type="hidden" {value} />
+					</div>
+				{/each}
+			</div>
+		{/each}
+	</div>
+
+	<div class="controls">
+		{#if won || data.answers.length >= 6}
+			{#if !won && data.answer}
+				<p>the answer was "{data.answer}"</p>
+			{/if}
+			<button data-key="enter" class="restart selected" formaction="?/restart">
+				{won ? 'you won :)' : `game over :(`} play again?
+			</button>
+		{:else}
+			<div class="keyboard">
+				<button data-key="enter" class:selected={submittable} disabled={!submittable}>enter</button>
+
+				<button
+					on:click|preventDefault={update}
+					data-key="backspace"
+					formaction="?/update"
+					name="key"
+					value="backspace"
+				>
+					back
+				</button>
+
+				{#each ['qwertyuiop', 'asdfghjkl', 'zxcvbnm'] as row}
+					<div class="row">
+						{#each row as letter}
+							<button
+								on:click|preventDefault={update}
+								data-key={letter}
+								class={classnames[letter]}
+								disabled={data.guesses[i].length === 5}
+								formaction="?/update"
+								name="key"
+								value={letter}
+								aria-label="{letter} {description[letter] || ''}"
+							>
+								{letter}
+							</button>
+						{/each}
+					</div>
+				{/each}
+			</div>
+		{/if}
+	</div>
+</form>
+
+{#if won}
+	<div
+		style="position: absolute; left: 50%; top: 30%"
+		use:confetti={{
+			particleCount: $reduced_motion ? 0 : undefined,
+			force: 0.7,
+			stageWidth: window.innerWidth,
+			stageHeight: window.innerHeight,
+			colors: ['#ff3e00', '#40b3ff', '#676778']
+		}}
+	/>
+{/if}
+
+<style>
+	form {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		gap: 1rem;
+		flex: 1;
+	}
+
+	.how-to-play {
+		color: var(--color-text);
+	}
+
+	.how-to-play::before {
+		content: 'i';
+		display: inline-block;
+		font-size: 0.8em;
+		font-weight: 900;
+		width: 1em;
+		height: 1em;
+		padding: 0.2em;
+		line-height: 1;
+		border: 1.5px solid var(--color-text);
+		border-radius: 50%;
+		text-align: center;
+		margin: 0 0.5em 0 0;
+		position: relative;
+		top: -0.05em;
+	}
+
+	.grid {
+		--width: min(100vw, 40vh, 380px);
+		max-width: var(--width);
+		align-self: center;
+		justify-self: center;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-start;
+	}
+
+	.grid .row {
+		display: grid;
+		grid-template-columns: repeat(5, 1fr);
+		grid-gap: 0.2rem;
+		margin: 0 0 0.2rem 0;
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		.grid.bad-guess .row.current {
+			animation: wiggle 0.5s;
+		}
+	}
+
+	.grid.playing .row.current {
+		filter: drop-shadow(3px 3px 10px var(--color-bg-0));
+	}
+
+	.letter {
+		aspect-ratio: 1;
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		text-align: center;
+		box-sizing: border-box;
+		text-transform: lowercase;
+		border: none;
+		font-size: calc(0.08 * var(--width));
+		border-radius: 2px;
+		background: white;
+		margin: 0;
+		color: rgba(0, 0, 0, 0.7);
+	}
+
+	.letter.missing {
+		background: rgba(255, 255, 255, 0.5);
+		color: rgba(0, 0, 0, 0.5);
+	}
+
+	.letter.exact {
+		background: var(--color-theme-2);
+		color: white;
+	}
+
+	.letter.close {
+		border: 2px solid var(--color-theme-2);
+	}
+
+	.selected {
+		outline: 2px solid var(--color-theme-1);
+	}
+
+	.controls {
+		text-align: center;
+		justify-content: center;
+		height: min(18vh, 10rem);
+	}
+
+	.keyboard {
+		--gap: 0.2rem;
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		gap: var(--gap);
+		height: 100%;
+	}
+
+	.keyboard .row {
+		display: flex;
+		justify-content: center;
+		gap: 0.2rem;
+		flex: 1;
+	}
+
+	.keyboard button,
+	.keyboard button:disabled {
+		--size: min(8vw, 4vh, 40px);
+		background-color: white;
+		color: black;
+		width: var(--size);
+		border: none;
+		border-radius: 2px;
+		font-size: calc(var(--size) * 0.5);
+		margin: 0;
+	}
+
+	.keyboard button.exact {
+		background: var(--color-theme-2);
+		color: white;
+	}
+
+	.keyboard button.missing {
+		opacity: 0.5;
+	}
+
+	.keyboard button.close {
+		border: 2px solid var(--color-theme-2);
+	}
+
+	.keyboard button:focus {
+		background: var(--color-theme-1);
+		color: white;
+		outline: none;
+	}
+
+	.keyboard button[data-key='enter'],
+	.keyboard button[data-key='backspace'] {
+		position: absolute;
+		bottom: 0;
+		width: calc(1.5 * var(--size));
+		height: calc(1 / 3 * (100% - 2 * var(--gap)));
+		text-transform: uppercase;
+		font-size: calc(0.3 * var(--size));
+		padding-top: calc(0.15 * var(--size));
+	}
+
+	.keyboard button[data-key='enter'] {
+		right: calc(50% + 3.5 * var(--size) + 0.8rem);
+	}
+
+	.keyboard button[data-key='backspace'] {
+		left: calc(50% + 3.5 * var(--size) + 0.8rem);
+	}
+
+	.keyboard button[data-key='enter']:disabled {
+		opacity: 0.5;
+	}
+
+	.restart {
+		width: 100%;
+		padding: 1rem;
+		background: rgba(255, 255, 255, 0.5);
+		border-radius: 2px;
+		border: none;
+	}
+
+	.restart:focus,
+	.restart:hover {
+		background: var(--color-theme-1);
+		color: white;
+		outline: none;
+	}
+
+	@keyframes wiggle {
+		0% {
+			transform: translateX(0);
+		}
+		10% {
+			transform: translateX(-2px);
+		}
+		30% {
+			transform: translateX(4px);
+		}
+		50% {
+			transform: translateX(-6px);
+		}
+		70% {
+			transform: translateX(+4px);
+		}
+		90% {
+			transform: translateX(-2px);
+		}
+		100% {
+			transform: translateX(0);
+		}
+	}
+</style>

sveltekit/src/routes/sverdle/game.js

@@ -0,0 +1,70 @@
+import { words, allowed } from './words.server';
+
+export class Game {
+	/**
+	 * Create a game object from the player's cookie, or initialise a new game
+	 */
+	constructor(serialized = undefined) {
+		if (serialized) {
+			const [index, guesses, answers] = serialized.split('-');
+
+			this.index = +index;
+			this.guesses = guesses ? guesses.split(' ') : [];
+			this.answers = answers ? answers.split(' ') : [];
+		} else {
+			this.index = Math.floor(Math.random() * words.length);
+			this.guesses = ['', '', '', '', '', ''];
+			this.answers = ([]);
+		}
+
+		this.answer = words[this.index];
+	}
+
+	/**
+	 * Update game state based on a guess of a five-letter word. Returns
+	 * true if the guess was valid, false otherwise
+	 */
+	enter(letters) {
+		const word = letters.join('');
+		const valid = allowed.has(word);
+
+		if (!valid) return false;
+
+		this.guesses[this.answers.length] = word;
+
+		const available = Array.from(this.answer);
+		const answer = Array(5).fill('_');
+
+		// first, find exact matches
+		for (let i = 0; i < 5; i += 1) {
+			if (letters[i] === available[i]) {
+				answer[i] = 'x';
+				available[i] = ' ';
+			}
+		}
+
+		// then find close matches (this has to happen
+		// in a second step, otherwise an early close
+		// match can prevent a later exact match)
+		for (let i = 0; i < 5; i += 1) {
+			if (answer[i] === '_') {
+				const index = available.indexOf(letters[i]);
+				if (index !== -1) {
+					answer[i] = 'c';
+					available[index] = ' ';
+				}
+			}
+		}
+
+		this.answers.push(answer.join(''));
+
+		return true;
+	}
+
+	/**
+	 * Serialize game state so it can be set as a cookie
+	 */
+	toString() {
+		return `${this.index}-${this.guesses.join(' ')}-${this.answers.join(' ')}`;
+	}
+}

sveltekit/src/routes/sverdle/how-to-play/+page.js

@@ -0,0 +1,9 @@
+import { dev } from '$app/environment';
+
+// we don't need any JS on this page, though we'll load
+// it in dev so that we get hot module replacement
+export const csr = dev;
+
+// since there's no dynamic data here, we can prerender
+// it so that it gets served as a static asset in production
+export const prerender = true;

sveltekit/src/routes/sverdle/how-to-play/+page.svelte

@@ -0,0 +1,95 @@
+<svelte:head>
+	<title>How to play Sverdle</title>
+	<meta name="description" content="How to play Sverdle" />
+</svelte:head>
+
+<div class="text-column">
+	<h1>How to play Sverdle</h1>
+
+	<p>
+		Sverdle is a clone of <a href="https://www.nytimes.com/games/wordle/index.html">Wordle</a>, the
+		word guessing game. To play, enter a five-letter English word. For example:
+	</p>
+
+	<div class="example">
+		<span class="close">r</span>
+		<span class="missing">i</span>
+		<span class="close">t</span>
+		<span class="missing">z</span>
+		<span class="exact">y</span>
+	</div>
+
+	<p>
+		The <span class="exact">y</span> is in the right place. <span class="close">r</span> and
+		<span class="close">t</span>
+		are the right letters, but in the wrong place. The other letters are wrong, and can be discarded.
+		Let's make another guess:
+	</p>
+
+	<div class="example">
+		<span class="exact">p</span>
+		<span class="exact">a</span>
+		<span class="exact">r</span>
+		<span class="exact">t</span>
+		<span class="exact">y</span>
+	</div>
+
+	<p>This time we guessed right! You have <strong>six</strong> guesses to get the word.</p>
+
+	<p>
+		Unlike the original Wordle, Sverdle runs on the server instead of in the browser, making it
+		impossible to cheat. It uses <code>&lt;form&gt;</code> and cookies to submit data, meaning you can
+		even play with JavaScript disabled!
+	</p>
+</div>
+
+<style>
+	span {
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+		font-size: 0.8em;
+		width: 2.4em;
+		height: 2.4em;
+		background-color: white;
+		box-sizing: border-box;
+		border-radius: 2px;
+		border-width: 2px;
+		color: rgba(0, 0, 0, 0.7);
+	}
+
+	.missing {
+		background: rgba(255, 255, 255, 0.5);
+		color: rgba(0, 0, 0, 0.5);
+	}
+
+	.close {
+		border-style: solid;
+		border-color: var(--color-theme-2);
+	}
+
+	.exact {
+		background: var(--color-theme-2);
+		color: white;
+	}
+
+	.example {
+		display: flex;
+		justify-content: flex-start;
+		margin: 1rem 0;
+		gap: 0.2rem;
+	}
+
+	.example span {
+		font-size: 1.4rem;
+	}
+
+	p span {
+		position: relative;
+		border-width: 1px;
+		border-radius: 1px;
+		font-size: 0.4em;
+		transform: scale(2) translate(0, -10%);
+		margin: 0 1em;
+	}
+</style>

sveltekit/src/routes/sverdle/reduced-motion.js

@@ -0,0 +1,23 @@
+import { readable } from 'svelte/store';
+import { browser } from '$app/environment';
+
+const reduced_motion_query = '(prefers-reduced-motion: reduce)';
+
+const get_initial_motion_preference = () => {
+	if (!browser) return false;
+	return window.matchMedia(reduced_motion_query).matches;
+};
+
+export const reduced_motion = readable(get_initial_motion_preference(), (set) => {
+	if (browser) {
+		const set_reduced_motion = (event) => {
+			set(event.matches);
+		};
+		const media_query_list = window.matchMedia(reduced_motion_query);
+		media_query_list.addEventListener('change', set_reduced_motion);
+
+		return () => {
+			media_query_list.removeEventListener('change', set_reduced_motion);
+		};
+	}
+});

sveltekit/static/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

sveltekit/svelte.config.js

@@ -0,0 +1,13 @@
+import adapter from '@sveltejs/adapter-auto';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	kit: {
+		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
+		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
+		adapter: adapter()
+	}
+};
+
+export default config;

sveltekit/vite.config.js

@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()]
+});

www/public/api/get.php

@@ -0,0 +1,16 @@
+<?php
+//session_set_cookie_params(time() + (86400 * 30), "/","egytalk.se");
+session_start();
+if(isset($_SESSION['id'])){
+   $result["phone"] = "343434";
+}else{
+   $result["phone"] = "999999";
+}
+
+$_SESSION['id'] = "12-12";
+setcookie("fromget", "Funkar igen", time() + (86400 * 30), "/",".egytalk.se",false, true);
+
+//header("Access-Control-Allow-Origin: *");
+header("Access-Control-Allow-Credentials: true");
+header('Content-Type: application/json');
+echo json_encode($result, JSON_UNESCAPED_UNICODE);