[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":29,"_34":12,"_35":12,"_36":12,"_37":12,"_38":-5,"_39":40},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","69d4c7c0a7e081918cb892964ebd00bf","versionInt","title","Doktor-glas-psykologisk-karta","type","code/react","content","import React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport { AnimatePresence, motion } from \"framer-motion\";\nimport {\n BookOpen,\n Clock3,\n MapPinned,\n X,\n Sparkles,\n Plus,\n Minus,\n RotateCcw,\n Move,\n} from \"lucide-react\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\n\nconst phases = [\n {\n id: \"tidigt\",\n label: \"Tidigt i romanen\",\n short: \"Tidigt\",\n title: \"Blicken över staden\",\n summary:\n \"Stockholm är ännu något Glas ser på och rör sig genom. Platserna är konkreta, men de börjar redan färgas av hans sätt att tänka.\",\n tint: \"from-slate-950/95 via-sky-950/90 to-slate-900/90\",\n markerColor: \"#7dd3fc\",\n panel: \"from-slate-950/92 via-sky-950/88 to-slate-900/90\",\n },\n {\n id: \"mitten\",\n label: \"Mitten av romanen\",\n short: \"Mitten\",\n title: \"Platserna blir laddade\",\n summary:\n \"Nu är staden mindre neutral. Miljöerna börjar nästan fungera som förlängningar av Glas begär, oro, avsky och moraliska funderingar.\",\n tint: \"from-stone-950/95 via-amber-950/90 to-rose-950/90\",\n markerColor: \"#fcd34d\",\n panel: \"from-stone-950/92 via-amber-950/88 to-rose-950/90\",\n },\n {\n id: \"slutet\",\n label: \"Slutet av romanen\",\n short: \"Slutet\",\n title: \"Efterklang och tyngd\",\n summary:\n \"Samma platser finns kvar, men de betyder andra saker efter handlingen. Det är som att staden minns det Glas har gjort.\",\n tint: \"from-zinc-950/95 via-violet-950/90 to-slate-950/90\",\n markerColor: \"#c4b5fd\",\n panel: \"from-zinc-950/92 via-violet-950/88 to-slate-950/92\",\n },\n];\n\nconst places = [\n {\n id: \"vasabron\",\n name: \"Vasabron\",\n coords: [59.3289, 18.0588],\n mapPos: { x: 164, y: 304 },\n category: \"Bro och utsiktspunkt\",\n chapterHint: \"12 juni\",\n intro:\n \"På Vasabron möter Glas både utsikten över staden och pastor Gregorius. Bron blir därför inte bara en plats man passerar, utan ett rum där avsky, minne och iakttagelse pressas samman.\",\n novelView:\n \"Bron öppnar vyer över vatten, hus och rörelse, men lugnet i stadsbilden störs av Gregorius närvaro. Det gör platsen viktig: det yttre och det inre kolliderar nästan direkt.\",\n studentReading:\n \"Jag tolkar Vasabron som en plats där Glas försöker vara neutral och betrakta världen, men där hans starka känslor ändå bryter igenom. Därför blir bron både en utsiktspunkt och en plats för motvilja.\",\n timeline: {\n tidigt:\n \"Tidigt fungerar Vasabron som en plats där Glas ser på staden och nästan försöker smälta in i den. Men mötet med Gregorius gör att platsen redan från början färgas av obehag.\",\n mitten:\n \"I mitten av romanen kan bron läsas som en övergångsplats. Glas står fortfarande mellan tanke och handling, och just sådana platser mellan två sidor blir därför viktiga.\",\n slutet:\n \"Efter handlingen får Vasabron en tyngre betydelse i min tolkning. Den kan ses som en påminnelse om att Glas länge rörde sig mot något avgörande utan att fullt erkänna det.\",\n },\n detailBullets: [\n \"utsikt över vatten och stad\",\n \"mötet med Gregorius förstör lugnet i vyn\",\n \"bron fungerar som övergång mellan observation och handling\",\n ],\n },\n {\n id: \"grand\",\n name: \"Trottoarkanten utanför Grand\",\n coords: [59.3299, 18.0737],\n mapPos: { x: 420, y: 416 },\n category: \"Promenadstråk och vattenrum\",\n chapterHint: \"24 juli och 28 juni\",\n intro:\n \"Området utanför Grand vid Strömmen är en av romanens viktigaste stämningsplatser. Här sitter Glas, iakttar människor, tänker på sitt eget liv och låter kvällsljuset och vattnet bära hans reflektioner.\",\n novelView:\n \"Det här rummet framstår som både offentligt och intimt. Det finns trottoar, hotell, vatten, ljus och den där blandningen av rörelse och ensamhet som passar Glas väldigt väl. Platsen är inte dramatisk på ytan, men den är laddad av inre aktivitet.\",\n studentReading:\n \"Jag läser platsen som ett exempel på hur Söderberg använder Stockholm för att visa psykologi. Glas sitter mitt bland andra människor, men han är ändå ensam. Vattnet och kvällsljuset gör honom inte lugn, utan mer eftertänksam.\",\n timeline: {\n tidigt:\n \"Tidigt känns platsen ganska öppen. Här finns rörelse, stadsliv och möjlighet att se andra människor utan att själv behöva delta fullt ut.\",\n mitten:\n \"I mitten blir platsen mer laddad. När Glas ser ut över strömmen blir det inte bara en vacker vy, utan ett rum där gamla fantasier, jämförelser och otillfredsställelse väcks.\",\n slutet:\n \"I slutet tycker jag att platsen nästan får en tom eftersmak. Samma vatten rinner vidare, men Glas inre läge gör att miljön inte längre kan stå för frihet eller lättnad.\",\n },\n detailBullets: [\n \"kvällsljus och vatten skapar stämning\",\n \"offentlig plats där Glas ändå är ensam\",\n \"staden blir ett rum för självjämförelse och fantasi\",\n ],\n },\n {\n id: \"jakob\",\n name: \"Jakobs kyrka och vattenbutiken\",\n coords: [59.3311, 18.0685],\n mapPos: { x: 308, y: 198 },\n category: \"Kyrkorum och offentlig scen\",\n chapterHint: \"22 augusti och 28 augusti\",\n intro:\n \"Jakobs kyrka och vattenbutiken i närheten är romanens mest laddade plats. Här möts offentlig stadsmiljö, religion, kropp, tid och den handling som förändrar allt.\",\n novelView:\n \"Det som gör platsen stark är kontrasten mellan det vanliga och det avgörande. Kyrkklockan slår, människor rör sig som vanligt, vatten serveras, men samtidigt dras hela scenen samman till ett ögonblick där Glas går från tanke till faktisk handling.\",\n studentReading:\n \"Jag tolkar detta som romanens hårdaste plats. Här blir moral konkret. Kyrkan gör också att scenen ramas in av frågor om skuld, dom och högtidlighet, särskilt eftersom begravningen senare äger rum i samma kyrka.\",\n timeline: {\n tidigt:\n \"Tidigt är Jakobs kyrka mest ett namn och ett stadsrum bland andra, även om kyrkan redan bär på minnen och normer kring Gregorius i Glas medvetande.\",\n mitten:\n \"I mitten börjar platsen kännas som ett mål. Vattenbutiken och kyrkan blir inte bara miljö, utan en sorts mekanik där tiden, kroppen och planeringen får enorm betydelse.\",\n slutet:\n \"I slutet är platsen nästan omöjlig att skilja från skuld. Att begravningen sker i Jakobs kyrka gör att samma plats får bära både handlingen och efterverkningarna av den.\",\n },\n detailBullets: [\n \"kyrkklockor och offentlig miljö gör scenen konkret\",\n \"vattenbutiken förvandlas från vardag till ödesplats\",\n \"begravningen i samma kyrka förstärker temat skuld\",\n ],\n },\n {\n id: \"djurgardsbrunn\",\n name: \"Djurgårdsbrunn\",\n coords: [59.3237, 18.1225],\n mapPos: { x: 728, y: 306 },\n category: \"Utflykt och sommarlandskap\",\n chapterHint: \"5 juli\",\n intro:\n \"Djurgårdsbrunn visar att också utflyktsplatser i romanen filtreras genom Glas personlighet. Han kan lämna centrum, men inte sig själv.\",\n novelView:\n \"På ytan är detta en somrig och ganska lätt scen. Men Glas upplever inte natur eller sällskapsliv på ett okomplicerat sätt. Han granskar omgivningen kritiskt och gör jämförelser mellan stad, natur, människor och sina egna preferenser.\",\n studentReading:\n \"Jag har med Djurgårdsbrunn för att det visar att Stockholm inte bara är hårda stadsgator i romanen. Även när miljön förändras fortsätter Glas att tolka, värdera och hålla distans. Därför säger platsen mycket om hans personlighet.\",\n timeline: {\n tidigt:\n \"Tidigt framstår platsen som ett försök till rörelse bort från vardagen, men det blir inte någon egentlig frigörelse. Glas tar med sig sitt sätt att tänka även hit.\",\n mitten:\n \"I mitten kan platsen läsas som kontrast till innerstaden. Trots det erbjuder den ingen enkel vila, vilket säger något om hur starkt Glas inre läge styr hans upplevelse av omgivningen.\",\n slutet:\n \"Mot slutet fungerar Djurgårdsbrunn i min tolkning mest som en påminnelse om att miljöombyte inte räcker. Problemet sitter inte i platsen, utan i det som redan har hänt och i Glas eget samvete.\",\n },\n detailBullets: [\n \"sommarutflykt utan verklig lätthet\",\n \"miljöbyte förändrar inte Glas grundstämning\",\n \"visar hur hans blick styr allt han ser\",\n ],\n },\n];\n\nconst MAP_WIDTH = 900;\nconst MAP_HEIGHT = 600;\nconst MIN_ZOOM = 1;\nconst MAX_ZOOM = 2.6;\n\nfunction clamp(value, min, max) {\n return Math.min(max, Math.max(min, value));\n}\n\nfunction runMiniTests() {\n const tests = [\n { name: \"clamp under min\", actual: clamp(-1, 0, 5), expected: 0 },\n { name: \"clamp over max\", actual: clamp(9, 0, 5), expected: 5 },\n { name: \"clamp inside range\", actual: clamp(3, 0, 5), expected: 3 },\n { name: \"phase ids exist\", actual: phases.every((p) => typeof p.id === \"string\" && p.id.length > 0), expected: true },\n {\n name: \"all places contain timeline entries\",\n actual: places.every((place) => phases.every((phase) => typeof place.timeline[phase.id] === \"string\")),\n expected: true,\n },\n ];\n\n return tests.every((test) => test.actual === test.expected);\n}\n\nconst TESTS_PASSED = runMiniTests();\n\nfunction PlaceMarker({ place, active, color, zoom, onClick }) {\n const labelScale = zoom > 1.45 ? 1 : 0.92;\n\n return (\n \n \n

\n \n \n \n {place.name}\n

\n \n \n );\n}\n\nfunction StockholmSvgMap() {\n return (\n \n );\n}\n\nfunction Modal({ open, onClose, phase, place }) {\n if (!open || !place) return null;\n\n return (\n \n \n e.stopPropagation()}\n className={`absolute inset-x-4 top-4 bottom-4 mx-auto max-w-2xl overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-br ${phase.panel} text-white shadow-2xl`}\n >\n

\n {place.category}\n {place.chapterHint}\n {phase.short}\n

{place.name}

{place.intro}

\n \n \n \n

\n\n

\n \n \n

\n \n Så upplevs platsen i romanen\n

{place.novelView}

\n \n \n\n \n \n

Min tolkning

{place.studentReading}

\n \n \n\n \n \n

Platsen i skedet: {phase.short}

{place.timeline[phase.id]}

\n \n \n\n \n \n

Det här ville jag få fram

\n {place.detailBullets.map((item) => (\n

\n {item}\n

\n ))}\n

\n \n \n

\n \n \n \n );\n}\n\nexport default function DoktorGlasKarta() {\n const [selectedPlaceId, setSelectedPlaceId] = useState(\"jakob\");\n const [phaseIndex, setPhaseIndex] = useState(0);\n const [modalOpen, setModalOpen] = useState(true);\n const [zoom, setZoom] = useState(1.1);\n const [pan, setPan] = useState({ x: -35, y: -18 });\n const [dragging, setDragging] = useState(false);\n const dragStartRef = useRef({ x: 0, y: 0, panX: 0, panY: 0 });\n\n const currentPhase = phases[phaseIndex];\n const selectedPlace = useMemo(\n () => places.find((place) => place.id === selectedPlaceId) || places[0],\n [selectedPlaceId]\n );\n\n useEffect(() => {\n setModalOpen(true);\n }, [selectedPlaceId, phaseIndex]);\n\n const handlePointerDown = (e) => {\n setDragging(true);\n dragStartRef.current = {\n x: e.clientX,\n y: e.clientY,\n panX: pan.x,\n panY: pan.y,\n };\n };\n\n const handlePointerMove = (e) => {\n if (!dragging) return;\n const dx = e.clientX - dragStartRef.current.x;\n const dy = e.clientY - dragStartRef.current.y;\n setPan({\n x: dragStartRef.current.panX + dx,\n y: dragStartRef.current.panY + dy,\n });\n };\n\n const stopDragging = () => setDragging(false);\n\n const changeZoom = (delta) => {\n setZoom((prev) => clamp(Number((prev + delta).toFixed(2)), MIN_ZOOM, MAX_ZOOM));\n };\n\n const resetView = () => {\n setZoom(1.1);\n setPan({ x: -35, y: -18 });\n };\n\n return (\n

\n\n

\n \n \n \n\n {places.map((place) => (\n {\n e.stopPropagation();\n setSelectedPlaceId(place.id);\n setModalOpen(true);\n }}\n />\n ))}\n

\n\n

\n \n \n

\n Elevprojekt\n Doktor Glas\n

\n Stockholm som psykologisk karta\n

\n Jag har byggt en egen karta över centrala Stockholm i stället för att använda en extern karttjänst. På så sätt går det att zooma, dra runt och klicka på viktiga platser ur romanen utan att något externt behöver laddas.\n

\n \n \n

\n \n Min idé\n

\n Min tanke är att platserna i romanen inte bara är bakgrund. De påverkar hur Doktor Glas tänker, känner och ser på världen. Därför har jag kopplat ihop plats, stämning och tidslinje.\n

\n\n

\n Dra i kartan för att flytta den. Använd plus och minus för att zooma. Klicka sedan på markörerna för att öppna en platsanalys.\n

\n\n {!TESTS_PASSED ? (\n

\n Inbyggda självtester hittade ett problem i datan för kartan.\n

\n ) : null}\n \n \n\n \n \n

\n \n Tidslinje\n

\n {phases.map((phase, index) => (\n setPhaseIndex(index)}\n className={`h-auto w-full justify-start rounded-xl px-3 py-3 text-left ${\n index === phaseIndex\n ? \"border-sky-200/30 bg-sky-300/10 text-white hover:bg-sky-300/10\"\n : \"border-white/10 bg-black/20 text-white/75 hover:bg-white/5\"\n }`}\n >\n

{phase.label}

{phase.title}

\n \n ))}\n

\n \n \n

\n\n

\n changeZoom(0.2)}\n className=\"pointer-events-auto border-white/15 bg-black/55 text-white hover:bg-white/10\"\n >\n \n \n changeZoom(-0.2)}\n className=\"pointer-events-auto border-white/15 bg-black/55 text-white hover:bg-white/10\"\n >\n \n \n \n \n \n

\n\n

\n \n \n

\n \n Vald plats\n

{selectedPlace.name}

{selectedPlace.category}

{currentPhase.summary}

\n \n Zoom: {zoom.toFixed(1)}x\n

\n setModalOpen(true)}\n className=\"mt-4 w-full rounded-2xl bg-sky-200 text-slate-950 hover:bg-sky-100\"\n >\n Öppna platsanalys\n \n \n \n

\n\n setModalOpen(false)}\n phase={currentPhase}\n place={selectedPlace}\n />\n \n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_41":42,"_43":44},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","manageRootRouteStylesheet","mobileWebHandoffEnabled","promoteCss","disableSSR","stripModulepreloadImports","paidCampaignAppRedirect","statsigGateEvaluationsPromise",["P",40],"traceId","14505971873895681844","traceTime",1792277869747]